palettecn 0.1.0

package/dist/web/server/_ssr/routes-CvlpZK4Q.mjs

@@ -0,0 +1,2630 @@
+import { i as __toESM } from "../_runtime.mjs";
+import { n as DefaultChatTransport, t as useChat, u as require_react } from "../_libs/@ai-sdk/react+[...].mjs";
+import { a as Icons$2, i as Icons$4, n as Icons$3, o as Icons$1, r as Icons, s as require_jsx_runtime, t as Icons$5 } from "../_libs/@lobehub/icons+[...].mjs";
+import { B as ArrowDown, D as Copy, E as CornerDownLeft, F as Check, I as Brain, M as ChevronRight, O as CodeXml, P as ChevronDown, R as ArrowRight, S as LoaderCircle, T as GripVertical, _ as Palette, a as Trash2, b as Moon, c as Sparkle, d as RefreshCcw, f as Plus, g as PanelLeft, h as Pencil, j as ChevronUp, k as Clover, l as Settings2, m as Pipette, n as TypeOutline, o as Sun, p as Play, s as Square, t as X, u as ScanEye, y as MousePointerClick, z as ArrowLeft } from "../_libs/lucide-react.mjs";
+import { n as clsx, t as cva } from "../_libs/class-variance-authority+clsx.mjs";
+import { n as Us } from "../_libs/streamdown+[...].mjs";
+import { a as ItemText, c as ScrollDownButton, d as Value, f as Viewport, i as ItemIndicator, l as ScrollUpButton, n as Icon, o as Portal, r as Item, s as Root2, t as Content2, u as Trigger } from "../_libs/@radix-ui/react-select+[...].mjs";
+import { n as CollapsibleTrigger$1, o as useControllableState, r as Root$1, t as CollapsibleContent$1 } from "../_libs/@radix-ui/react-collapsible+[...].mjs";
+import { a as Portal$1, c as Trigger$1, i as Overlay, n as Content, o as Root$2, r as Description, s as Title, t as Close } from "../_libs/@radix-ui/react-dialog+[...].mjs";
+import { d as isRedirect, u as useRouter } from "../_libs/@tanstack/react-router+[...].mjs";
+import { a as Root3, c as SubTrigger2, i as Portal2, l as Trigger$2, n as Item3, o as Sub2, r as Menu, s as SubContent2, t as Content2$1 } from "../_libs/radix-ui__react-menubar.mjs";
+import { a as Trigger$3, i as Root2$1, n as PopoverClose, r as Portal$2, t as Content2$2 } from "../_libs/radix-ui__react-popover.mjs";
+import { a as Viewport$1, i as ScrollAreaThumb, n as Root$3, r as ScrollAreaScrollbar, t as Corner } from "../_libs/radix-ui__react-scroll-area.mjs";
+import { t as dist_exports } from "../_libs/radix-ui__react-slider.mjs";
+import { n as Thumb$1, t as Root$4 } from "../_libs/radix-ui__react-switch.mjs";
+import { i as Trigger$4, n as List, r as Root2$2, t as Content$1 } from "../_libs/radix-ui__react-tabs.mjs";
+import { a as Root3$1, i as Provider, n as Content2$3, o as Trigger$5, r as Portal$3, t as Arrow2 } from "../_libs/radix-ui__react-tooltip.mjs";
+import { d as Spinner, i as FieldError, l as Input, m as isLocal, n as Field, p as cn, t as Button, u as Separator$1 } from "./field-1-agM60DBf.mjs";
+import { n as AnimatePresence, t as motion } from "../_libs/framer-motion+[...].mjs";
+import { t as createHighlighterCore } from "../_libs/@shikijs/core+[...].mjs";
+import { t as A } from "../_libs/shiki+streamdown__code.mjs";
+import { t as createJavaScriptRegexEngine } from "../_libs/@shikijs/engine-javascript+[...].mjs";
+import { t as h } from "../_libs/@streamdown/math+[...].mjs";
+import { t as createServerFn } from "./ssr.mjs";
+import { n as providers, t as providerDisplay } from "./dist-BRaLXgxZ.mjs";
+import { St as string, ot as _enum, yt as object } from "../_libs/@ai-sdk/anthropic+[...].mjs";
+import { n as shadcnStylesSchema } from "./schemas-DsZ5O3zp.mjs";
+import { n as convert, t as Color } from "../_libs/color+[...].mjs";
+import { a as defaultTheme, c as formatColorName, d as premadeThemes, f as previewColors, h as useThemes, i as createSsrRpc, l as generateCode, m as useProviders, n as applyTheme, o as defaultThemeId, p as useFonts, r as colorSegments, s as displayColor, t as SvgLogo, u as loadFont } from "./use-providers-Bwqg2U3N.mjs";
+import { t as zodValidator } from "../_libs/tanstack__zod-adapter.mjs";
+import { n as z } from "../_libs/next-themes.mjs";
+import { n as toast } from "../_libs/sonner.mjs";
+import { n as useQuery, t as useMutation } from "../_libs/tanstack__react-query.mjs";
+import { n as Zt, r as qt, t as Ut } from "../_libs/react-resizable-panels.mjs";
+import { t as copyTextToClipboard } from "../_libs/copy-text-to-clipboard.mjs";
+import { t as nanoid } from "../_libs/nanoid.mjs";
+import { n as useStickToBottomContext, t as StickToBottom } from "../_libs/use-stick-to-bottom.mjs";
+import { bi as css_default } from "../_libs/shikijs__langs.mjs";
+import { ft as vitesse_light_default, pt as vitesse_black_default } from "../_libs/shikijs__themes.mjs";
+import { t as require_fuzzysort } from "../_libs/fuzzysort.mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/routes-CvlpZK4Q.js
+var import_react = /* @__PURE__ */ __toESM(require_react());
+var import_jsx_runtime = require_jsx_runtime();
+var import_fuzzysort = /* @__PURE__ */ __toESM(require_fuzzysort());
+function useServerFn(serverFn) {
+	const router = useRouter();
+	return import_react.useCallback(async (...args) => {
+		try {
+			const res = await serverFn(...args);
+			if (isRedirect(res)) throw res;
+			return res;
+		} catch (err) {
+			if (isRedirect(err)) {
+				err.options._fromLocation = router.state.location;
+				return router.navigate(router.resolveRedirect(err).options);
+			}
+			throw err;
+		}
+	}, [router, serverFn]);
+}
+function ResizablePanelGroup({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ut, {
+		"data-slot": "resizable-panel-group",
+		className: cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className),
+		...props
+	});
+}
+function ResizablePanel({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(qt, {
+		"data-slot": "resizable-panel",
+		...props
+	});
+}
+function ResizableHandle({ withHandle, className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Zt, {
+		"data-slot": "resizable-handle",
+		className: cn("bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90", className),
+		...props,
+		children: withHandle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GripVertical, { className: "size-2.5" })
+		})
+	});
+}
+function Tabs$1({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Root2$2, {
+		"data-slot": "tabs",
+		className: cn("flex flex-col gap-2", className),
+		...props
+	});
+}
+function TabsList({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(List, {
+		"data-slot": "tabs-list",
+		className: cn("bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]", className),
+		...props
+	});
+}
+function TabsTrigger({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trigger$4, {
+		"data-slot": "tabs-trigger",
+		className: cn("data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+}
+function TabsContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content$1, {
+		"data-slot": "tabs-content",
+		className: cn("flex-1 outline-none", className),
+		...props
+	});
+}
+var ShimmerComponent = ({ children, as: Component = "p", className, duration = 2, spread = 2 }) => {
+	const MotionComponent = motion.create(Component);
+	const dynamicSpread = (0, import_react.useMemo)(() => (children?.length ?? 0) * spread, [children, spread]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MotionComponent, {
+		animate: { backgroundPosition: "0% center" },
+		className: cn("relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent", "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]", className),
+		initial: { backgroundPosition: "100% center" },
+		style: {
+			"--spread": `${dynamicSpread}px`,
+			backgroundImage: "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))"
+		},
+		transition: {
+			repeat: Number.POSITIVE_INFINITY,
+			duration,
+			ease: "linear"
+		},
+		children
+	});
+};
+var Shimmer = (0, import_react.memo)(ShimmerComponent);
+function Collapsible$1({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Root$1, {
+		"data-slot": "collapsible",
+		...props
+	});
+}
+function CollapsibleTrigger({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsibleTrigger$1, {
+		"data-slot": "collapsible-trigger",
+		...props
+	});
+}
+function CollapsibleContent({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsibleContent$1, {
+		"data-slot": "collapsible-content",
+		className: cn("overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up", className),
+		...props,
+		children
+	});
+}
+var ReasoningContext = (0, import_react.createContext)(null);
+var useReasoning = () => {
+	const context = (0, import_react.use)(ReasoningContext);
+	if (!context) throw new Error("Reasoning components must be used within Reasoning");
+	return context;
+};
+var AUTO_CLOSE_DELAY = 1e3;
+var MS_IN_S = 1e3;
+var Reasoning = (0, import_react.memo)(({ className, isStreaming = false, open, defaultOpen = true, onOpenChange, duration: durationProp, children, ...props }) => {
+	const [isOpen, setIsOpen] = useControllableState({
+		prop: open,
+		defaultProp: defaultOpen,
+		onChange: onOpenChange
+	});
+	const [duration, setDuration] = useControllableState({
+		prop: durationProp,
+		defaultProp: void 0
+	});
+	const [hasAutoClosed, setHasAutoClosed] = (0, import_react.useState)(false);
+	const [startTime, setStartTime] = (0, import_react.useState)(null);
+	(0, import_react.useEffect)(() => {
+		if (isStreaming) {
+			if (startTime === null) setStartTime(Date.now());
+		} else if (startTime !== null) {
+			setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S));
+			setStartTime(null);
+		}
+	}, [
+		isStreaming,
+		startTime,
+		setDuration
+	]);
+	(0, import_react.useEffect)(() => {
+		if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
+			const timer = setTimeout(() => {
+				setIsOpen(false);
+				setHasAutoClosed(true);
+			}, AUTO_CLOSE_DELAY);
+			return () => clearTimeout(timer);
+		}
+	}, [
+		isStreaming,
+		isOpen,
+		defaultOpen,
+		setIsOpen,
+		hasAutoClosed
+	]);
+	const handleOpenChange = (newOpen) => {
+		setIsOpen(newOpen);
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReasoningContext, {
+		value: {
+			isStreaming,
+			isOpen,
+			setIsOpen,
+			duration
+		},
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collapsible$1, {
+			className: cn("not-prose mb-4", className),
+			onOpenChange: handleOpenChange,
+			open: isOpen,
+			...props,
+			children
+		})
+	});
+});
+var defaultGetThinkingMessage = (isStreaming, duration) => {
+	if (isStreaming || duration === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Shimmer, {
+		duration: 1,
+		children: "Thinking..."
+	});
+	if (duration === void 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Thought for a few seconds" });
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
+		"Thought for ",
+		duration,
+		" seconds"
+	] });
+};
+var ReasoningTrigger = (0, import_react.memo)(({ className, children, getThinkingMessage = defaultGetThinkingMessage, ...props }) => {
+	const { isStreaming, isOpen, duration } = useReasoning();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsibleTrigger, {
+		className: cn("flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground", className),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Brain, { className: "size-4" }),
+			getThinkingMessage(isStreaming, duration),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, { className: cn("size-4 transition-transform", isOpen ? "rotate-180" : "rotate-0") })
+		] })
+	});
+});
+var ReasoningContent = (0, import_react.memo)(({ className, children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsibleContent, {
+	className: cn("mt-4 text-sm", "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in", className),
+	...props,
+	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Us, {
+		plugins: {
+			code: A,
+			math: h
+		},
+		...props,
+		children
+	})
+}));
+Reasoning.displayName = "Reasoning";
+ReasoningTrigger.displayName = "ReasoningTrigger";
+ReasoningContent.displayName = "ReasoningContent";
+function ColorPlaceholder({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
+		className: cn("size-4 text-muted-foreground", className),
+		fill: "none",
+		viewBox: "0 0 24 24",
+		stroke: "currentColor",
+		...props,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: 1.5,
+			d: "M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+		})
+	});
+}
+function ThemeTool({ part, streamedData }) {
+	if (part.type !== "tool-generateTheme") return null;
+	const { theme } = z();
+	const { colorMode, currentTheme, setCurrentTheme } = useThemes();
+	const [isCopying, setIsCopying] = (0, import_react.useState)(false);
+	const isStreaming = part.state !== "output-available";
+	const styles = part.output || streamedData;
+	const isApplied = currentTheme?.id === styles?.id;
+	const shadcnTheme = styles?.[theme === "dark" ? "dark" : "light"];
+	function handleCopy() {
+		setIsCopying(true);
+		copyTextToClipboard(generateCode(styles));
+		setTimeout(() => setIsCopying(false), 3e3);
+	}
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collapsible$1, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "rounded-lg border bg-sidebar p-2 relative",
+		children: [
+			!!styles?.name && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(motion.p, {
+				initial: { y: 30 },
+				animate: { y: 0 },
+				transition: { duration: .5 },
+				className: "capitalize absolute text-xs -top-5 @sm/sidebar:left-4 left-2 -z-1 py-0.5 px-2 border bg-muted rounded-t-sm",
+				children: styles?.name
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex justify-between items-center",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsibleTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+						variant: "ghost",
+						className: "flex @sm/sidebar:gap-2 gap-1 p-2!",
+						children: [previewColors.map((key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							style: { backgroundColor: shadcnTheme?.[key] ?? "transparent" },
+							className: "rounded-md border size-5 flex items-center justify-center",
+							children: !shadcnTheme?.[key] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+								className: "size-full rounded-md bg-muted flex items-center justify-center",
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorPlaceholder, {})
+							})
+						}, key)), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, {
+							className: "transition-transform in-data-[state=\"open\"]:rotate-180",
+							size: 16
+						})]
+					})
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-0.5",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+						className: clsx(isStreaming && "pointer-events-none"),
+						size: "sm",
+						variant: "ghost",
+						onClick: () => {
+							setCurrentTheme(styles);
+						},
+						disabled: isApplied,
+						children: isStreaming ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Shimmer, { children: "Generating" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {})] }) : isApplied ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: ["Applied ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MousePointerClick, {})] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: ["Apply ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Play, {})] })
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+						size: "icon-sm",
+						variant: "ghost",
+						disabled: isStreaming || isCopying,
+						onClick: handleCopy,
+						children: isCopying ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Copy, {})
+					})]
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsibleContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "my-4 mx-2 space-y-4 max-h-52 overflow-y-auto",
+				children: Object.keys(colorSegments).map((key) => {
+					const displayedColors = colorSegments[key];
+					if (displayedColors.every((color) => !shadcnTheme?.[color])) return null;
+					return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
+						className: "text-lg",
+						children: key
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "flex flex-wrap gap-3",
+						children: displayedColors.map((themeKey) => {
+							const value = shadcnTheme?.[themeKey];
+							if (!value) return null;
+							const formattedValue = displayColor(value, colorMode);
+							return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "flex w-52 items-center gap-2 overflow-hidden text-ellipsis",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+									style: { backgroundColor: value },
+									className: "border-2 rounded-sm size-12 min-w-10"
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+									className: "space-y-0.5",
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
+										className: "text-sm text-ellipsis",
+										children: formatColorName(themeKey)
+									}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+										className: "text-muted-foreground flex items-center gap-2",
+										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+											className: "text-xs font-mono",
+											children: formattedValue
+										}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Copy, {
+											size: 16,
+											onClick: () => copyTextToClipboard(formattedValue),
+											className: "hover:opacity-90 cursor-pointer"
+										})]
+									})]
+								})]
+							});
+						})
+					})] }, key);
+				})
+			}) })
+		]
+	}) });
+}
+function ScrollArea$1({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Root$3, {
+		"data-slot": "scroll-area",
+		className: cn("relative", className),
+		...props,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Viewport$1, {
+				"data-slot": "scroll-area-viewport",
+				className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+				children
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollBar, {}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Corner, {})
+		]
+	});
+}
+function ScrollBar({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaScrollbar, {
+		"data-slot": "scroll-area-scrollbar",
+		"data-orientation": orientation,
+		orientation,
+		className: cn("data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none", className),
+		...props,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollAreaThumb, {
+			"data-slot": "scroll-area-thumb",
+			className: "rounded-full relative flex-1 bg-border"
+		})
+	});
+}
+function Dialog$1({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Root$2, {
+		"data-slot": "dialog",
+		...props
+	});
+}
+function DialogTrigger({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trigger$1, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+function DialogPortal({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Portal$1, {
+		"data-slot": "dialog-portal",
+		...props
+	});
+}
+function DialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Overlay, {
+		"data-slot": "dialog-overlay",
+		className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", className),
+		...props
+	});
+}
+function DialogContent({ className, children, showCloseButton = true, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogPortal, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlay, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Content, {
+		"data-slot": "dialog-content",
+		className: cn("bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Close, {
+			"data-slot": "dialog-close",
+			asChild: true,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+				variant: "ghost",
+				className: "absolute top-2 right-2",
+				size: "icon-sm",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(X, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "sr-only",
+					children: "Close"
+				})]
+			})
+		})]
+	})] });
+}
+function DialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Title, {
+		"data-slot": "dialog-title",
+		className: cn("text-base leading-none font-medium", className),
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Description, {
+		"data-slot": "dialog-description",
+		className: cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className),
+		...props
+	});
+}
+function Textarea({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", {
+		"data-slot": "textarea",
+		className: cn("border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className),
+		...props
+	});
+}
+function InputGroup({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: cn("group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none", "h-9 min-w-0 has-[>textarea]:h-auto", "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]", "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40", className),
+		...props
+	});
+}
+var inputGroupAddonVariants = cva("text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50", {
+	variants: { align: {
+		"inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+		"inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+		"block-start": "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+		"block-end": "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		role: "group",
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		className: cn(inputGroupAddonVariants({ align }), className),
+		onClick: (e) => {
+			if (e.target.closest("button")) return;
+			e.currentTarget.parentElement?.querySelector("input")?.focus();
+		},
+		...props
+	});
+}
+var inputGroupButtonVariants = cva("text-sm shadow-none flex gap-2 items-center", {
+	variants: { size: {
+		xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+		sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+		"icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
+	} },
+	defaultVariants: { size: "xs" }
+});
+function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+		type,
+		"data-size": size,
+		variant,
+		className: cn(inputGroupButtonVariants({ size }), className),
+		...props
+	});
+}
+function InputGroupTextarea({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Textarea, {
+		"data-slot": "input-group-control",
+		className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className),
+		...props
+	});
+}
+function Select$1({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Root2, {
+		"data-slot": "select",
+		...props
+	});
+}
+function SelectValue({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Value, {
+		"data-slot": "select-value",
+		...props
+	});
+}
+function SelectTrigger({ className, size = "default", children, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Trigger, {
+		"data-slot": "select-trigger",
+		"data-size": size,
+		className: cn("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, { className: "size-4 opacity-50" })
+		})]
+	});
+}
+function SelectContent({ className, children, position = "item-aligned", align = "center", ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Content2, {
+		"data-slot": "select-content",
+		className: cn("bg-popover text-popover-foreground 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
+		position,
+		align,
+		...props,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectScrollUpButton, {}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Viewport, {
+				className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"),
+				children
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectScrollDownButton, {})
+		]
+	}) });
+}
+function SelectItem({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Item, {
+		"data-slot": "select-item",
+		className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			"data-slot": "select-item-indicator",
+			className: "absolute right-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, { className: "size-4" }) })
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemText, { children })]
+	});
+}
+function SelectScrollUpButton({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollUpButton, {
+		"data-slot": "select-scroll-up-button",
+		className: cn("flex cursor-default items-center justify-center py-1", className),
+		...props,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronUp, { className: "size-4" })
+	});
+}
+function SelectScrollDownButton({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollDownButton, {
+		"data-slot": "select-scroll-down-button",
+		className: cn("flex cursor-default items-center justify-center py-1", className),
+		...props,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, { className: "size-4" })
+	});
+}
+var PromptInputController = (0, import_react.createContext)(null);
+var ProviderAttachmentsContext = (0, import_react.createContext)(null);
+var useOptionalPromptInputController = () => (0, import_react.use)(PromptInputController);
+var useOptionalProviderAttachments = () => (0, import_react.use)(ProviderAttachmentsContext);
+var LocalAttachmentsContext = (0, import_react.createContext)(null);
+var usePromptInputAttachments = () => {
+	const provider = useOptionalProviderAttachments();
+	const local = (0, import_react.use)(LocalAttachmentsContext);
+	const context = provider ?? local;
+	if (!context) throw new Error("usePromptInputAttachments must be used within a PromptInput or PromptInputProvider");
+	return context;
+};
+var PromptInput = ({ className, accept, multiple, globalDrop, syncHiddenInput, maxFiles, maxFileSize, onError, onSubmit, children, ...props }) => {
+	const controller = useOptionalPromptInputController();
+	const usingProvider = !!controller;
+	const inputRef = (0, import_react.useRef)(null);
+	const formRef = (0, import_react.useRef)(null);
+	const [items, setItems] = (0, import_react.useState)([]);
+	const files = usingProvider ? controller.attachments.files : items;
+	const filesRef = (0, import_react.useRef)(files);
+	filesRef.current = files;
+	const openFileDialogLocal = (0, import_react.useCallback)(() => {
+		inputRef.current?.click();
+	}, []);
+	const matchesAccept = (0, import_react.useCallback)((f) => {
+		if (!accept || accept.trim() === "") return true;
+		return accept.split(",").map((s) => s.trim()).filter(Boolean).some((pattern) => {
+			if (pattern.endsWith("/*")) {
+				const prefix = pattern.slice(0, -1);
+				return f.type.startsWith(prefix);
+			}
+			return f.type === pattern;
+		});
+	}, [accept]);
+	const addLocal = (0, import_react.useCallback)((fileList) => {
+		const incoming = Array.from(fileList);
+		const accepted = incoming.filter((f) => matchesAccept(f));
+		if (incoming.length && accepted.length === 0) {
+			onError?.({
+				code: "accept",
+				message: "No files match the accepted types."
+			});
+			return;
+		}
+		const withinSize = (f) => maxFileSize ? f.size <= maxFileSize : true;
+		const sized = accepted.filter(withinSize);
+		if (accepted.length > 0 && sized.length === 0) {
+			onError?.({
+				code: "max_file_size",
+				message: "All files exceed the maximum size."
+			});
+			return;
+		}
+		setItems((prev) => {
+			const capacity = typeof maxFiles === "number" ? Math.max(0, maxFiles - prev.length) : void 0;
+			const capped = typeof capacity === "number" ? sized.slice(0, capacity) : sized;
+			if (typeof capacity === "number" && sized.length > capacity) onError?.({
+				code: "max_files",
+				message: "Too many files. Some were not added."
+			});
+			const next = [];
+			for (const file of capped) next.push({
+				id: nanoid(),
+				type: "file",
+				url: URL.createObjectURL(file),
+				mediaType: file.type,
+				filename: file.name
+			});
+			return prev.concat(next);
+		});
+	}, [
+		matchesAccept,
+		maxFiles,
+		maxFileSize,
+		onError
+	]);
+	const removeLocal = (0, import_react.useCallback)((id) => setItems((prev) => {
+		const found = prev.find((file) => file.id === id);
+		if (found?.url) URL.revokeObjectURL(found.url);
+		return prev.filter((file) => file.id !== id);
+	}), []);
+	const clearLocal = (0, import_react.useCallback)(() => setItems((prev) => {
+		for (const file of prev) if (file.url) URL.revokeObjectURL(file.url);
+		return [];
+	}), []);
+	const add = usingProvider ? controller.attachments.add : addLocal;
+	const remove = usingProvider ? controller.attachments.remove : removeLocal;
+	const clear = usingProvider ? controller.attachments.clear : clearLocal;
+	const openFileDialog = usingProvider ? controller.attachments.openFileDialog : openFileDialogLocal;
+	(0, import_react.useEffect)(() => {
+		if (!usingProvider) return;
+		controller.__registerFileInput(inputRef, () => inputRef.current?.click());
+	}, [usingProvider, controller]);
+	(0, import_react.useEffect)(() => {
+		if (syncHiddenInput && inputRef.current && files.length === 0) inputRef.current.value = "";
+	}, [files, syncHiddenInput]);
+	(0, import_react.useEffect)(() => {
+		const form = formRef.current;
+		if (!form) return;
+		if (globalDrop) return;
+		const onDragOver = (e) => {
+			if (e.dataTransfer?.types?.includes("Files")) e.preventDefault();
+		};
+		const onDrop = (e) => {
+			if (e.dataTransfer?.types?.includes("Files")) e.preventDefault();
+			if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) add(e.dataTransfer.files);
+		};
+		form.addEventListener("dragover", onDragOver);
+		form.addEventListener("drop", onDrop);
+		return () => {
+			form.removeEventListener("dragover", onDragOver);
+			form.removeEventListener("drop", onDrop);
+		};
+	}, [add, globalDrop]);
+	(0, import_react.useEffect)(() => {
+		if (!globalDrop) return;
+		const onDragOver = (e) => {
+			if (e.dataTransfer?.types?.includes("Files")) e.preventDefault();
+		};
+		const onDrop = (e) => {
+			if (e.dataTransfer?.types?.includes("Files")) e.preventDefault();
+			if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) add(e.dataTransfer.files);
+		};
+		document.addEventListener("dragover", onDragOver);
+		document.addEventListener("drop", onDrop);
+		return () => {
+			document.removeEventListener("dragover", onDragOver);
+			document.removeEventListener("drop", onDrop);
+		};
+	}, [add, globalDrop]);
+	(0, import_react.useEffect)(() => () => {
+		if (!usingProvider) {
+			for (const f of filesRef.current) if (f.url) URL.revokeObjectURL(f.url);
+		}
+	}, [usingProvider]);
+	const handleChange = (event) => {
+		if (event.currentTarget.files) add(event.currentTarget.files);
+		event.currentTarget.value = "";
+	};
+	const convertBlobUrlToDataUrl = async (url) => {
+		try {
+			const blob = await (await fetch(url)).blob();
+			return new Promise((resolve) => {
+				const reader = new FileReader();
+				reader.onloadend = () => resolve(reader.result);
+				reader.onerror = () => resolve(null);
+				reader.readAsDataURL(blob);
+			});
+		} catch {
+			return null;
+		}
+	};
+	const ctx = (0, import_react.useMemo)(() => ({
+		files: files.map((item) => ({
+			...item,
+			id: item.id
+		})),
+		add,
+		remove,
+		clear,
+		openFileDialog,
+		fileInputRef: inputRef
+	}), [
+		files,
+		add,
+		remove,
+		clear,
+		openFileDialog
+	]);
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		const form = event.currentTarget;
+		const text = usingProvider ? controller.textInput.value : new FormData(form).get("message") || "";
+		if (!usingProvider) form.reset();
+		Promise.all(files.map(async ({ id, ...item }) => {
+			if (item.url && item.url.startsWith("blob:")) {
+				const dataUrl = await convertBlobUrlToDataUrl(item.url);
+				return {
+					...item,
+					url: dataUrl ?? item.url
+				};
+			}
+			return item;
+		})).then((convertedFiles) => {
+			try {
+				const result = onSubmit({
+					text,
+					files: convertedFiles
+				}, event);
+				if (result instanceof Promise) result.then(() => {
+					clear();
+					if (usingProvider) controller.textInput.clear();
+				}).catch(() => {});
+				else {
+					clear();
+					if (usingProvider) controller.textInput.clear();
+				}
+			} catch {}
+		}).catch(() => {});
+	};
+	const inner = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+		accept,
+		"aria-label": "Upload files",
+		className: "hidden",
+		multiple,
+		onChange: handleChange,
+		ref: inputRef,
+		title: "Upload files",
+		type: "file"
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", {
+		className: cn("w-full", className),
+		onSubmit: handleSubmit,
+		ref: formRef,
+		...props,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputGroup, {
+			className: "overflow-hidden",
+			children
+		})
+	})] });
+	return usingProvider ? inner : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LocalAttachmentsContext, {
+		value: ctx,
+		children: inner
+	});
+};
+var PromptInputTextarea = ({ onChange, className, placeholder = "What would you like to know?", ...props }) => {
+	const controller = useOptionalPromptInputController();
+	const attachments = usePromptInputAttachments();
+	const [isComposing, setIsComposing] = (0, import_react.useState)(false);
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter") {
+			if (isComposing || e.nativeEvent.isComposing) return;
+			if (e.shiftKey) return;
+			e.preventDefault();
+			const form = e.currentTarget.form;
+			if ((form?.querySelector("button[type=\"submit\"]"))?.disabled) return;
+			form?.requestSubmit();
+		}
+		if (e.key === "Backspace" && e.currentTarget.value === "" && attachments.files.length > 0) {
+			e.preventDefault();
+			const lastAttachment = attachments.files.at(-1);
+			if (lastAttachment) attachments.remove(lastAttachment.id);
+		}
+	};
+	const handlePaste = (event) => {
+		const items = event.clipboardData?.items;
+		if (!items) return;
+		const files = [];
+		for (const item of items) if (item.kind === "file") {
+			const file = item.getAsFile();
+			if (file) files.push(file);
+		}
+		if (files.length > 0) {
+			event.preventDefault();
+			attachments.add(files);
+		}
+	};
+	const controlledProps = controller ? {
+		value: controller.textInput.value,
+		onChange: (e) => {
+			controller.textInput.setInput(e.currentTarget.value);
+			onChange?.(e);
+		}
+	} : { onChange };
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputGroupTextarea, {
+		className: cn("field-sizing-content max-h-48 min-h-16", className),
+		name: "message",
+		onCompositionEnd: () => setIsComposing(false),
+		onCompositionStart: () => setIsComposing(true),
+		onKeyDown: handleKeyDown,
+		onPaste: handlePaste,
+		placeholder,
+		...props,
+		...controlledProps
+	});
+};
+var PromptInputFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputGroupAddon, {
+	align: "block-end",
+	className: cn("justify-between gap-1", className),
+	...props
+});
+var PromptInputSubmit = ({ className, variant = "default", size = "icon-sm", status, children, ...props }) => {
+	let Icon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CornerDownLeft, { className: "size-4" });
+	if (status === "submitted") Icon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoaderCircle, { className: "size-4 animate-spin" });
+	else if (status === "streaming") Icon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Square, { className: "size-4" });
+	else if (status === "error") Icon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(X, { className: "size-4" });
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputGroupButton, {
+		"aria-label": "Submit",
+		className: cn(className),
+		size,
+		type: "submit",
+		variant,
+		...props,
+		children: children ?? Icon
+	});
+};
+var Conversation = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StickToBottom, {
+	className: cn("relative flex-1 overflow-y-hidden", className),
+	initial: "smooth",
+	resize: "smooth",
+	role: "log",
+	...props
+});
+var ConversationContent = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StickToBottom.Content, {
+	className: cn("flex flex-col gap-8 p-4", className),
+	...props
+});
+var ConversationScrollButton = ({ className, ...props }) => {
+	const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+	const handleScrollToBottom = (0, import_react.useCallback)(() => {
+		scrollToBottom();
+	}, [scrollToBottom]);
+	return !isAtBottom && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+		className: cn("absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full", className),
+		onClick: handleScrollToBottom,
+		size: "icon",
+		type: "button",
+		variant: "outline",
+		...props,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowDown, { className: "size-4" })
+	});
+};
+cva("flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2", {
+	variants: { orientation: {
+		horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+		vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
+	} },
+	defaultVariants: { orientation: "horizontal" }
+});
+function TooltipProvider({ delayDuration = 0, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, {
+		"data-slot": "tooltip-provider",
+		delayDuration,
+		...props
+	});
+}
+function Tooltip$1({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Root3$1, {
+		"data-slot": "tooltip",
+		...props
+	});
+}
+function TooltipTrigger({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trigger$5, {
+		"data-slot": "tooltip-trigger",
+		...props
+	});
+}
+function TooltipContent({ className, sideOffset = 0, children, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Portal$3, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Content2$3, {
+		"data-slot": "tooltip-content",
+		sideOffset,
+		className: cn("data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-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 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) bg-foreground text-background", className),
+		...props,
+		children: [children, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Arrow2, { className: "size-2.5 rotate-45 rounded-[2px] z-50 translate-y-[calc(-50%_-_2px)] bg-foreground fill-foreground" })]
+	}) });
+}
+var Message = ({ className, from, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+	className: cn("group flex w-full max-w-[95%] flex-col gap-2", from === "user" ? "is-user ml-auto justify-end" : "is-assistant", className),
+	...props
+});
+var MessageContent = ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+	className: cn("is-user:dark flex w-fit max-w-full min-w-0 flex-col gap-2 overflow-hidden text-sm", "group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground", "group-[.is-assistant]:text-foreground", className),
+	...props,
+	children
+});
+var MessageActions = ({ className, children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+	className: cn("flex items-center gap-1", className),
+	...props,
+	children
+});
+var MessageAction = ({ tooltip, children, label, variant = "ghost", size = "icon-sm", ...props }) => {
+	const button = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+		size,
+		type: "button",
+		variant,
+		...props,
+		children: [children, /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: "sr-only",
+			children: label || tooltip
+		})]
+	});
+	if (tooltip) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tooltip$1, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipTrigger, {
+		asChild: true,
+		children: button
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: tooltip }) })] }) });
+	return button;
+};
+(0, import_react.createContext)(null);
+var MessageResponse = (0, import_react.memo)(({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Us, {
+	className: cn("size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", className),
+	...props
+}), (prevProps, nextProps) => prevProps.children === nextProps.children);
+MessageResponse.displayName = "MessageResponse";
+var generateSuggestions = createServerFn({ method: "POST" }).inputValidator(zodValidator(object({
+	shadcn: shadcnStylesSchema,
+	provider: _enum(providers),
+	model: string()
+}))).handler(createSsrRpc("74c0f93931f897f2d57d57ff71eece1b1d31f77b934ce83ff1dcab0015ddfee6"));
+function Menubar$1({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Root3, {
+		"data-slot": "menubar",
+		className: cn("flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-xs", className),
+		...props
+	});
+}
+function MenubarMenu({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menu, {
+		"data-slot": "menubar-menu",
+		...props
+	});
+}
+function MenubarPortal({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Portal2, {
+		"data-slot": "menubar-portal",
+		...props
+	});
+}
+function MenubarTrigger({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trigger$2, {
+		"data-slot": "menubar-trigger",
+		className: cn("flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", className),
+		...props
+	});
+}
+function MenubarContent({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenubarPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content2$1, {
+		"data-slot": "menubar-content",
+		align,
+		alignOffset,
+		sideOffset,
+		className: cn("z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
+		...props
+	}) });
+}
+function MenubarItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item3, {
+		"data-slot": "menubar-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className),
+		...props
+	});
+}
+function MenubarShortcut({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		"data-slot": "menubar-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
+		...props
+	});
+}
+function MenubarSub({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Sub2, {
+		"data-slot": "menubar-sub",
+		...props
+	});
+}
+function MenubarSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SubTrigger2, {
+		"data-slot": "menubar-sub-trigger",
+		"data-inset": inset,
+		className: cn("flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", className),
+		...props,
+		children: [children, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, { className: "ml-auto h-4 w-4" })]
+	});
+}
+function MenubarSubContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SubContent2, {
+		"data-slot": "menubar-sub-content",
+		className: cn("z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
+		...props
+	});
+}
+var submitApiKey = createServerFn().inputValidator(zodValidator(object({
+	provider: _enum(providers),
+	apiKey: string()
+}))).handler(createSsrRpc("834a951965bf50d49d9a1f848390ddb1ddef4f162422cf43f1e7fd82726bbe90"));
+var PROVIDER_ICONS = {
+	chatgpt: Icons,
+	claude: Icons$1,
+	gemini: Icons$2,
+	glm: Icons$3,
+	kimi: Icons$4
+};
+function ProviderPicker() {
+	const [tokenDialogState, setTokenDialogState] = (0, import_react.useState)();
+	const { providers: providersState, updateProvider, selectedModel, setSelectedModel } = useProviders();
+	const { mutate: submitKey, isPending, isError, error } = useMutation({
+		mutationKey: ["submitApiKey", tokenDialogState],
+		mutationFn: async (apiKey) => {
+			if (!tokenDialogState) return;
+			const { models } = await submitApiKey({ data: {
+				apiKey,
+				provider: tokenDialogState
+			} });
+			updateProvider(tokenDialogState, {
+				isActive: true,
+				models
+			});
+			setTokenDialogState(void 0);
+			toast(`API key for ${providerDisplay[tokenDialogState]} saved.`);
+		},
+		retry: 1
+	});
+	const selectedModelInfo = (0, import_react.useMemo)(() => {
+		const providerList = Object.keys(providersState);
+		if (!providerList.length) return;
+		for (const provider of providerList) {
+			const providerState = providersState[provider];
+			if (providerState.isActive) {
+				const foundModel = providerState.models.find((model) => model.id === selectedModel);
+				if (foundModel) return foundModel;
+			}
+		}
+	}, [providersState]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog$1, {
+		open: !!tokenDialogState,
+		onOpenChange: (open) => setTokenDialogState((prev) => open ? prev : void 0),
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogContent, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogTitle, { children: ["Setup ", providerDisplay[tokenDialogState]] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", {
+			onSubmit: (event) => {
+				event.preventDefault();
+				submitKey(new FormData(event.target).get("apiKey"));
+			},
+			className: "size-full space-y-2",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, {
+				"data-invalid": isError,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+					id: "apiKey",
+					name: "apiKey",
+					type: "password",
+					placeholder: "API key",
+					"aria-invalid": isError,
+					disabled: isPending,
+					required: true
+				}), isError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldError, { children: error.message })]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+				type: "submit",
+				className: "w-full",
+				disabled: isPending,
+				children: "Submit"
+			})]
+		})] })
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Menubar$1, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MenubarMenu, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenubarTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+				variant: "ghost",
+				size: "sm",
+				className: "flex items-center gap-x-1",
+				children: [selectedModelInfo ? selectedModelInfo.name : "Select model", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronUp, { size: 16 })]
+			})
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenubarContent, { children: providers.map((provider) => {
+			const Icon = PROVIDER_ICONS[provider];
+			const displayName = providerDisplay[provider];
+			const providerState = providersState?.[provider];
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MenubarSub, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MenubarSubTrigger, {
+				className: "capitalize space-x-1",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}), displayName]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenubarSubContent, { children: providerState?.isActive ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [[...providerState.models].reverse().map((model, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MenubarItem, {
+				onClick: () => setSelectedModel(model.id, provider),
+				children: [model.name, model.id === selectedModel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenubarShortcut, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, { size: 16 }) })]
+			}, index)), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MenubarItem, {
+				onClick: () => setTokenDialogState(provider),
+				children: [
+					"Edit ",
+					displayName,
+					" ",
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenubarShortcut, { children: "API KEY" })
+				]
+			})] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MenubarItem, {
+				onClick: () => setTokenDialogState(provider),
+				children: [
+					"Setup ",
+					displayName,
+					" ",
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenubarShortcut, { children: "API KEY" })
+				]
+			}) })] }, provider);
+		}) })] })
+	})] });
+}
+var suggestions = [
+	"Minimalist, high-contrast monochrome",
+	"Midnight executive, deep indigo with soft muted accents",
+	"Autumn forest with browns and burnt orange accents",
+	"Electric lime greens against a dark slate background"
+];
+var Chat = ({ ref }) => {
+	const { selectedModel, selectedProvider } = useProviders();
+	const { currentTheme, setCurrentTheme, appendThemes, setIsGenerating } = useThemes();
+	const [input, setInput] = (0, import_react.useState)("");
+	const [aiSuggestions, setAiSuggestions] = (0, import_react.useState)();
+	const [streamedData, setStreamedData] = (0, import_react.useState)();
+	const getSuggestions = useServerFn(generateSuggestions);
+	const { messages, sendMessage, status, regenerate, setMessages } = useChat({
+		transport: new DefaultChatTransport({
+			prepareSendMessagesRequest(req) {
+				setAiSuggestions([]);
+				return { body: {
+					id: req.id,
+					messages: req.messages,
+					provider: selectedProvider,
+					model: selectedModel,
+					...req.body
+				} };
+			},
+			api: "/api/chat"
+		}),
+		onData: (dataPart) => {
+			if (dataPart.type === "data-theme") {
+				if (dataPart.data.styles.id?.length === 16) {
+					appendThemes(dataPart.data.styles);
+					setCurrentTheme(dataPart.data.styles);
+					setStreamedData(dataPart.data.styles);
+				}
+			}
+		},
+		onFinish() {
+			if (!selectedProvider || !selectedModel) return;
+			getSuggestions({ data: {
+				shadcn: currentTheme || streamedData,
+				provider: selectedProvider,
+				model: selectedModel
+			} }).then(setAiSuggestions);
+			setStreamedData(void 0);
+		}
+	});
+	const handleSubmit = (message, e) => {
+		e.preventDefault();
+		if (message.text.trim()) {
+			sendMessage({ text: message.text });
+			setInput("");
+		}
+	};
+	(0, import_react.useImperativeHandle)(ref, () => ({ resetChat: () => setMessages([]) }));
+	(0, import_react.useEffect)(() => {
+		if ((messages.at(-1)?.parts.at(-1))?.type === "data-theme" && streamedData?.id) {
+			appendThemes(streamedData);
+			setCurrentTheme(streamedData, false);
+			setStreamedData(void 0);
+		}
+	}, [messages]);
+	(0, import_react.useEffect)(() => {
+		setIsGenerating(!!streamedData);
+	}, [streamedData]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "mx-auto relative flex flex-col justify-end size-full p-4",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col size-full",
+			children: [
+				!messages.length && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(motion.div, {
+					className: "flex flex-col justify-center sm:mx-8 gap-y-4 flex-1",
+					initial: { opacity: 0 },
+					animate: { opacity: 1 },
+					transition: { duration: .5 },
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-2 ml-4",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SvgLogo, { className: "size-6 text-primary" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+							className: "font-medium",
+							children: "What's on your mind?"
+						})]
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "flex flex-col gap-y-1",
+						children: suggestions?.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+							className: "p-2 text-left opacity-90 hover:text-primary cursor-pointer border-b",
+							onClick: () => sendMessage({ text: suggestion }),
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+								className: "text-xs",
+								children: suggestion
+							})
+						}, index))
+					})]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Conversation, {
+					className: "flex-1 h-full min-h-0",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConversationContent, { children: messages.map((message, messageIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: message.parts.map((part, i) => {
+						const isLastMessage = messageIndex === messages.length - 1;
+						switch (part.type) {
+							case "reasoning": return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Reasoning, {
+								className: "w-full",
+								isStreaming: status === "streaming" && i === message.parts.length - 1 && message.id === messages.at(-1)?.id,
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReasoningTrigger, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReasoningContent, { children: part.text })]
+							}, `r-${message.id}-${i}`);
+							case "text":
+								if (!part.text.trim()) return null;
+								return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Message, {
+									from: message.role,
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MessageContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MessageResponse, { children: part.text }) })
+								}), message.role === "assistant" && isLastMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MessageActions, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MessageAction, {
+									onClick: () => regenerate(),
+									label: "Retry",
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RefreshCcw, { className: "size-3" })
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MessageAction, {
+									onClick: () => copyTextToClipboard(part.text),
+									label: "Copy",
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Copy, { className: "size-3" })
+								})] })] }, `${message.id}-${i}`);
+							case "tool-generateTheme": return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeTool, {
+								streamedData,
+								part
+							}, `${message.id}-${i}`);
+							default: return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, {}, `${message.id}-${i}`);
+						}
+					}) }, message.id)) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConversationScrollButton, {})]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollArea$1, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "flex flex-wrap gap-2",
+					children: aiSuggestions?.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+						variant: "outline",
+						className: "rounded-full cursor-pointer dark:bg-input dark:backdrop-blur-xl text-xs h-auto py-1 px-3",
+						onClick: () => sendMessage({ text: suggestion }),
+						children: suggestion
+					}, index))
+				}) }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PromptInput, {
+					multiple: true,
+					globalDrop: true,
+					className: "mt-4 w-full mx-auto relative flex-col",
+					onSubmit: handleSubmit,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PromptInputTextarea, {
+						value: input,
+						placeholder: "Say something...",
+						onChange: (e) => setInput(e.currentTarget.value),
+						className: "pr-12"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PromptInputFooter, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProviderPicker, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PromptInputSubmit, {
+						status: status === "streaming" ? "streaming" : "ready",
+						disabled: !input.trim() || !selectedModel || !selectedProvider
+					})] })]
+				})
+			]
+		})
+	});
+};
+function Switch$1({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Root$4, {
+		"data-slot": "switch",
+		"data-size": size,
+		className: cn("data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		...props,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Thumb$1, {
+			"data-slot": "switch-thumb",
+			className: "bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform"
+		})
+	});
+}
+var ThemeSwitch = ({ className, ...props }) => {
+	const { resolvedTheme, setTheme } = z();
+	const setCurrentTheme = useThemes((state) => state.setCurrentTheme);
+	const [checked, setChecked] = (0, import_react.useState)(false);
+	const [mounted, setMounted] = (0, import_react.useState)(false);
+	(0, import_react.useEffect)(() => setMounted(true), []);
+	(0, import_react.useEffect)(() => setChecked(resolvedTheme === "dark"), [resolvedTheme]);
+	const handleCheckedChange = (0, import_react.useCallback)((isChecked) => {
+		const newTheme = isChecked ? "dark" : "light";
+		setChecked(isChecked);
+		setTheme(newTheme);
+		setCurrentTheme(useThemes.getState().currentTheme, true, newTheme);
+	}, [setTheme]);
+	if (!mounted) return null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: cn("relative flex items-center justify-center", "h-7 w-14", className),
+		...props,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Switch$1, {
+				checked,
+				onCheckedChange: handleCheckedChange,
+				className: clsx("peer absolute inset-0 size-full min-w-14 min-h-7 rounded-full bg-input! transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "[&>span]:size-5! [&>span]:rounded-full [&>span]:bg-background [&>span]:shadow [&>span]:z-10", "data-[state=unchecked]:[&>span]:translate-x-1.5", "data-[state=checked]:[&>span]:translate-x-[28px]")
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: cn("pointer-events-none absolute left-2 inset-y-0 z-0", "flex items-center justify-center"),
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Sun, {
+					size: 16,
+					className: cn("transition-all duration-200 ease-out", checked ? "text-muted-foreground/70" : "text-foreground scale-110")
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: cn("pointer-events-none absolute right-2 inset-y-0 z-0", "flex items-center justify-center"),
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Moon, {
+					size: 16,
+					className: cn("transition-all duration-200 ease-out", checked ? "text-foreground scale-110" : "text-muted-foreground/70")
+				})
+			})
+		]
+	});
+};
+function CopyCode(props) {
+	const { currentTheme, isGenerating } = useThemes();
+	const [isCopying, setIsCopying] = (0, import_react.useState)(false);
+	function copyCode() {
+		const code = generateCode(currentTheme);
+		setIsCopying(true);
+		copyTextToClipboard(code);
+		setTimeout(() => setIsCopying(false), 3e3);
+	}
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+		size: "sm",
+		variant: "secondary",
+		onClick: copyCode,
+		disabled: isGenerating,
+		...props,
+		children: ["Copy code", isCopying ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Copy, {})]
+	});
+}
+function CodePreview() {
+	const { theme } = z();
+	const { currentTheme, colorMode, setColorMode } = useThemes();
+	const [html, setHtml] = (0, import_react.useState)("");
+	(0, import_react.useEffect)(() => {
+		if (!currentTheme) return;
+		const code = generateCode(currentTheme);
+		const initShiki = async () => {
+			const highlighter = await createHighlighterCore({
+				themes: [vitesse_black_default, vitesse_light_default],
+				langs: [css_default],
+				engine: createJavaScriptRegexEngine()
+			});
+			setHtml(highlighter.codeToHtml(code, {
+				lang: "css",
+				theme: theme === "dark" ? "vitesse-black" : "vitesse-light"
+			}));
+			highlighter.dispose();
+		};
+		initShiki();
+	}, [
+		currentTheme,
+		theme,
+		colorMode
+	]);
+	if (!currentTheme) return null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ScrollArea$1, {
+		className: "size-full relative pb-6",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "sticky top-2 w-full flex items-center gap-2 justify-end z-10 pr-4",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select$1, {
+				value: colorMode,
+				onValueChange: setColorMode,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, {
+					className: "uppercase backdrop-blur-md",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, {})
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContent, { children: [
+					"oklch",
+					"hex",
+					"rgb",
+					"hsl"
+				].map((colorMode) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
+					value: colorMode,
+					className: "uppercase",
+					children: colorMode
+				}, colorMode)) })]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyCode, { size: "default" })]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "w-full sm:pb-20 mt-4 text-[13px] [&>pre]:px-4 [&>pre]:py-4 **:bg-transparent! [&>pre]:whitespace-pre-wrap [&>pre]:break-words",
+			dangerouslySetInnerHTML: { __html: html }
+		})]
+	});
+}
+var GhostTabsTrigger = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsTrigger, {
+	className: clsx("p-2! border-none hover:text-foreground! data-[state=\"active\"]:bg-muted! shadow-none!", className),
+	...props
+});
+var ParticleAnimation = ({ className, particleCount = 500, colors = [
+	"#00b8a9",
+	"#f8f3d4",
+	"#f6416c",
+	"#ffde7d"
+], animationDuration = [1, 2], perspective = "10vmin", particleWidth = "30%", particleHeight = "1px" }) => {
+	const [particles, setParticles] = (0, import_react.useState)([]);
+	const random = (min, max) => Math.random() * (max - min) + min;
+	const randomColor = () => colors[Math.floor(Math.random() * colors.length)];
+	const randomRotation = () => random(-180, 180);
+	(0, import_react.useEffect)(() => {
+		setParticles(Array.from({ length: particleCount }, (_, i) => ({
+			id: i,
+			duration: random(animationDuration[0], animationDuration[1]),
+			delay: -random(.1, 2),
+			rotateX: randomRotation(),
+			rotateY: randomRotation(),
+			rotateZ: randomRotation(),
+			gradientStops: Math.floor(random(2, 5)),
+			color: randomColor(),
+			transparentStop: random(50, 100)
+		})));
+	}, [
+		particleCount,
+		animationDuration,
+		colors
+	]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "relative size-full flex items-center justify-center",
+		style: { perspective },
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: cn("relative flex items-end justify-center", className),
+			children: particles.map((particle) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "absolute",
+				style: {
+					width: particleWidth,
+					height: particleHeight,
+					willChange: "transform, opacity",
+					transformStyle: "preserve-3d",
+					background: `linear-gradient(to left, ${particle.color}, transparent ${particle.transparentStop}%)`,
+					animation: `move-${particle.id} ${particle.duration}s linear infinite`,
+					animationDelay: `${particle.delay}s`,
+					transformOrigin: "0 center",
+					"--rotateX": `${particle.rotateX}deg`,
+					"--rotateY": `${particle.rotateY}deg`,
+					"--rotateZ": `${particle.rotateZ}deg`
+				}
+			}, particle.id))
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+        ${particles.map((particle) => `
+          @keyframes move-${particle.id} {
+            0% {
+              transform: translateX(50%) rotateX(${particle.rotateX}deg) rotateY(${particle.rotateY}deg) rotateZ(${particle.rotateZ}deg) scale(2);
+              opacity: 0;
+            }
+            20% {
+              opacity: 1;
+            }
+            100% {
+              transform: translateX(50%) rotateX(${particle.rotateX}deg) rotateY(${particle.rotateY}deg) rotateZ(${particle.rotateZ}deg) scale(0);
+              opacity: 1;
+            }
+          }
+        `).join("\n")}
+      ` })]
+	});
+};
+function WordRotate({ words, duration = 2500, framerProps = {
+	initial: {
+		opacity: 0,
+		y: -50
+	},
+	animate: {
+		opacity: 1,
+		y: 0
+	},
+	exit: {
+		opacity: 0,
+		y: 50
+	},
+	transition: {
+		duration: .25,
+		ease: "easeOut"
+	}
+}, className }) {
+	const [index, setIndex] = (0, import_react.useState)(0);
+	(0, import_react.useEffect)(() => {
+		const interval = setInterval(() => {
+			setIndex((prevIndex) => (prevIndex + 1) % words.length);
+		}, duration);
+		return () => clearInterval(interval);
+	}, [words, duration]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "overflow-hidden py-2 inline-flex",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatePresence, {
+			mode: "wait",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(motion.h1, {
+				className: cn(className),
+				...framerProps,
+				children: words[index]
+			}, words[index])
+		})
+	});
+}
+var Snippet = ({ className, text, width = "100%", onCopy, prompt = true }) => {
+	const [copied, setCopied] = (0, import_react.useState)(false);
+	const timeout = (0, import_react.useRef)(null);
+	const lines = typeof text === "string" ? [text] : text;
+	const onClick = () => {
+		if (timeout.current) clearTimeout(timeout.current);
+		setCopied(true);
+		timeout.current = setTimeout(() => setCopied(false), 2e3);
+		copyTextToClipboard(lines.join("\n"));
+		onCopy?.();
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: cn("flex items-start gap-3 px-3 py-2.5 rounded-md border border-border bg-muted", className),
+		style: { width },
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "flex-1",
+			children: lines.map((line) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: clsx("font-mono text-[13px] text-muted-foreground", prompt && "before:content-['$_']"),
+				children: line
+			}, line))
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+			onClick,
+			className: "cursor-pointer mt-0.5 text-muted-foreground hover:text-foreground transition-colors",
+			children: copied ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Copy, { size: 16 })
+		})]
+	});
+};
+var command = "npx palettecn";
+function LandingPage() {
+	const { theme } = z();
+	const { appendThemes, setCurrentTheme, setIsSidebarCollapsed } = useThemes();
+	const [npxDialogOpen, setNpxDialogOpen] = (0, import_react.useState)(false);
+	function getStarted() {
+		setIsSidebarCollapsed(false);
+		if (!isLocal) setNpxDialogOpen(true);
+	}
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog$1, {
+		open: npxDialogOpen,
+		onOpenChange: setNpxDialogOpen,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogContent, { children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle, { children: "Setup palettecn" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogDescription, { children: "You must run palettecn locally. Run it using the following command:" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Snippet, { text: command })
+		] })
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "relative size-full",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "size-full overflow-hidden -z-1 absolute inset-0",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParticleAnimation, {
+				particleCount: 500,
+				colors: [
+					"#fff200",
+					"#a855f7",
+					"#f43f5e",
+					"#22c55e"
+				],
+				animationDuration: [1, 20],
+				className: "size-full opacity-20"
+			})
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "flex items-center flex-col mt-24 gap-y-2 overflow-hidden",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h1", {
+					className: "font-extrabold text-3xl sm:text-5xl sm:mr-8 inline text-center",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(WordRotate, {
+							duration: 4e3,
+							words: [
+								"Design",
+								"Create",
+								"Generate"
+							],
+							className: "sm:w-68 w-40 text-right"
+						}),
+						" ",
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "text-primary mr-12 sm:mr-0",
+							children: "shadcn/ui"
+						}),
+						" themes with",
+						" ",
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "bg-primary text-primary-foreground px-2 rounded-sm",
+							children: "AI"
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: "text-muted-foreground text-center px-12 mt-4",
+					children: "Build stunning shadcn themes using premade color palettes and AI."
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex gap-2 [&_button]:px-8! mt-4",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+						onClick: getStarted,
+						className: "font-bold",
+						children: "Get started"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+						href: "https://github.com/mrozio13pl/palettecn",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+							className: "font-bold backdrop-blur-sm",
+							variant: "outline",
+							children: ["View on ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icons$5, {})]
+						})
+					})]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col items-center gap-y-4 mt-4",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "text-muted-foreground text-center px-12",
+						children: "Run palettecn locally and use your own AI providers."
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Snippet, {
+						text: command,
+						className: "max-w-74"
+					})]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "opacity-50 sm:w-xl w-3xs flex justify-center items-center [&_svg]:min-w-6 [&_svg]:fill-border text-border my-8",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Clover, { className: "-rotate-135" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Separator$1, { className: "py-px w-full" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Clover, { className: "rotate-45" })
+					]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "sm:px-20  flex justify-center",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "max-w-5xl flex flex-wrap justify-center items-center gap-4",
+						children: premadeThemes.map((premadeTheme) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+							size: "sm",
+							className: "opacity-80 hover:opacity-100 px-1.5",
+							style: {
+								backgroundColor: premadeTheme[theme === "dark" ? "dark" : "light"].background,
+								color: premadeTheme[theme === "dark" ? "dark" : "light"].foreground
+							},
+							onClick: () => {
+								appendThemes(premadeTheme);
+								setCurrentTheme(premadeTheme, true, theme);
+							},
+							children: [previewColors.slice(0, 3).map((colorName) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+								className: "size-6 border rounded-sm",
+								style: { backgroundColor: premadeTheme?.[theme === "dark" ? "dark" : "light"]?.[colorName] }
+							}, colorName)), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
+								className: "ml-2 font-semibold",
+								children: premadeTheme?.name || "Untitled"
+							})]
+						}, premadeTheme.id))
+					})
+				})
+			]
+		})]
+	})] });
+}
+var ComponentsPage = (0, import_react.lazy)(() => import("./components-BzCiScpA.mjs").then((m) => ({ default: m.ComponentsPage })));
+var fallback = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+	className: "h-full flex justify-center items-center",
+	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, { className: "size-12 -mt-12" })
+});
+function Preview() {
+	const { isSidebarCollapsed } = useThemes();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tabs$1, {
+		defaultValue: "landing",
+		className: "size-full flex-col overflow-hidden",
+		children: [
+			!isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TabsList, {
+				className: "bg-transparent! m-2 gap-4",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(GhostTabsTrigger, {
+					value: "landing",
+					children: "Landing Page"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GhostTabsTrigger, {
+					value: "components",
+					children: "Components"
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+				value: "landing",
+				className: "size-full overflow-x-hidden sm:overflow-hidden",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LandingPage, {})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+				value: "components",
+				className: "h-full overflow-y-auto sm:pb-20 @container",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, {
+					fallback,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComponentsPage, {})
+				})
+			})
+		]
+	});
+}
+function Popover$1({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Root2$1, {
+		"data-slot": "popover",
+		...props
+	});
+}
+function PopoverTrigger({ ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trigger$3, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+}
+function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Portal$2, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content2$2, {
+		"data-slot": "popover-content",
+		align,
+		sideOffset,
+		className: cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 z-50 w-72 origin-(--radix-popover-content-transform-origin) outline-hidden", className),
+		...props
+	}) });
+}
+var fontTypes = {
+	all: "All Fonts",
+	display: "Display",
+	handwriting: "Handwriting",
+	monospace: "Monospace",
+	"sans-serif": "Sans Serif",
+	serif: "Serif"
+};
+function FontPicker({ font, onFontChange }) {
+	const [query, setQuery] = (0, import_react.useState)("");
+	const [category, setCategory] = (0, import_react.useState)("all");
+	const { loadedFonts, fonts } = useFonts();
+	const hoverTimeoutRef = (0, import_react.useRef)({});
+	const filteredFonts = (0, import_react.useMemo)(() => {
+		if (!fonts) return [];
+		let searchedFonts = fonts;
+		if (query.trim().length) searchedFonts = import_fuzzysort.default.go(query, fonts, { keys: ["id", "family"] }).map(({ obj }) => obj);
+		if (category !== "all") searchedFonts = searchedFonts.filter((searchedFont) => searchedFont.category === category);
+		return searchedFonts;
+	}, [
+		fonts,
+		query,
+		category
+	]);
+	const handleMouseEnter = (fontId, fontFamily) => {
+		if (hoverTimeoutRef.current[fontId]) clearTimeout(hoverTimeoutRef.current[fontId]);
+		hoverTimeoutRef.current[fontId] = setTimeout(() => {
+			loadFont(fontId, fontFamily);
+		}, 500);
+	};
+	const handleMouseLeave = (fontId) => {
+		if (hoverTimeoutRef.current[fontId]) {
+			clearTimeout(hoverTimeoutRef.current[fontId]);
+			delete hoverTimeoutRef.current[fontId];
+		}
+	};
+	(0, import_react.useEffect)(() => {
+		return () => {
+			Object.values(hoverTimeoutRef.current).forEach(clearTimeout);
+		};
+	}, []);
+	if (!fonts) return null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Popover$1, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+			className: "w-full justify-between",
+			variant: "outline",
+			children: [font ? fonts.find((f) => font === f.id)?.family : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "text-muted-foreground",
+				children: "Select font"
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, { className: "size-4 opacity-50" })]
+		})
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PopoverContent, {
+		className: "w-96 space-y-2",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+				placeholder: "Search fonts...",
+				value: query,
+				onChange: (e) => setQuery(e.target.value)
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select$1, {
+				value: category,
+				onValueChange: setCategory,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, {
+					className: "w-full",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, {})
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContent, { children: Object.keys(fontTypes).map((type) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
+					value: type,
+					children: fontTypes[type]
+				}, type)) })]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollArea$1, {
+				className: "h-80 space-y-1",
+				children: filteredFonts?.map((fontItem) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverClose, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
+						className: "w-full flex-col items-start gap-y-0! h-auto",
+						variant: "ghost",
+						onClick: () => {
+							loadFont(fontItem.id, fontItem.family);
+							onFontChange(fontItem.id);
+						},
+						onMouseEnter: () => handleMouseEnter(fontItem.id, fontItem.family),
+						onMouseLeave: () => handleMouseLeave(fontItem.id),
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
+							className: "text-lg",
+							style: { fontFamily: loadedFonts.has(fontItem.id) ? fontItem.family : void 0 },
+							children: fontItem.family
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+							className: "text-muted-foreground text-xs font-normal",
+							children: fontItem.category
+						})]
+					})
+				}, fontItem.id))
+			})
+		]
+	})] });
+}
+function Typography() {
+	const { themes, currentTheme, setThemes, setCurrentTheme } = useThemes();
+	const { theme } = z();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-y-4",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { children: "Sans-Serif" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontPicker, {
+					font: currentTheme?.fontSans,
+					onFontChange: (font) => {
+						setCurrentTheme({
+							...currentTheme,
+							fontSans: font
+						});
+					}
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { children: "Serif" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontPicker, {
+					font: currentTheme?.fontSerif,
+					onFontChange: (font) => {
+						setCurrentTheme({
+							...currentTheme,
+							fontSerif: font
+						});
+					}
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { children: "Monospace" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontPicker, {
+					font: currentTheme?.fontMono,
+					onFontChange: (font) => {
+						setCurrentTheme({
+							...currentTheme,
+							fontMono: font
+						});
+					}
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { children: "Border radius" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "relative flex items-center",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+						type: "number",
+						value: currentTheme?.[theme].radius.replace("rem", ""),
+						className: "pr-12",
+						onChange: (e) => {
+							const value = e.target.value;
+							setThemes(themes.map((t) => {
+								if (t.id === currentTheme?.id) {
+									const newTheme = {
+										...t,
+										dark: {
+											...t.dark,
+											radius: value + "rem"
+										},
+										light: {
+											...t.light,
+											radius: value + "rem"
+										}
+									};
+									setCurrentTheme(newTheme);
+									return newTheme;
+								}
+								return t;
+							}));
+						}
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "absolute right-3 select-none text-sm font-medium text-muted-foreground pointer-events-none",
+						children: "rem"
+					})]
+				})]
+			})
+		]
+	});
+}
+var ColorPickerContext = (0, import_react.createContext)(void 0);
+var { Range, Root, Thumb, Track } = dist_exports;
+var useColorPicker = () => {
+	const context = (0, import_react.use)(ColorPickerContext);
+	if (!context) throw new Error("useColorPicker must be used within a ColorPickerProvider");
+	return context;
+};
+var ColorPicker = ({ value, defaultValue = "#000000", onChange, className, ...props }) => {
+	const selectedColor = Color(value);
+	const defaultColor = Color(defaultValue);
+	const [hue, setHue] = (0, import_react.useState)(selectedColor.hue() || defaultColor.hue() || 0);
+	const [saturation, setSaturation] = (0, import_react.useState)(selectedColor.saturationl() || defaultColor.saturationl() || 100);
+	const [lightness, setLightness] = (0, import_react.useState)(selectedColor.lightness() || defaultColor.lightness() || 50);
+	const [alpha, setAlpha] = (0, import_react.useState)(selectedColor.alpha() * 100 || defaultColor.alpha() * 100);
+	const [mode, setMode] = (0, import_react.useState)("hex");
+	(0, import_react.useEffect)(() => {
+		if (value) {
+			const color = Color.rgb(value).rgb().object();
+			setHue(color.r);
+			setSaturation(color.g);
+			setLightness(color.b);
+			setAlpha(color.a);
+		}
+	}, [value]);
+	(0, import_react.useEffect)(() => {
+		if (onChange) onChange(Color.hsl(hue, saturation, lightness).alpha(alpha / 100).rgb());
+	}, [
+		hue,
+		saturation,
+		lightness,
+		alpha,
+		onChange
+	]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorPickerContext, {
+		value: {
+			hue,
+			saturation,
+			lightness,
+			alpha,
+			mode,
+			setHue,
+			setSaturation,
+			setLightness,
+			setAlpha,
+			setMode
+		},
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: cn("grid w-full gap-4", className),
+			...props
+		})
+	});
+};
+var ColorPickerSelection = ({ className, ...props }) => {
+	const containerRef = (0, import_react.useRef)(null);
+	const [isDragging, setIsDragging] = (0, import_react.useState)(false);
+	const { hue, saturation, lightness, setSaturation, setLightness } = useColorPicker();
+	const [position, setPosition] = (0, import_react.useState)({
+		x: 0,
+		y: 0
+	});
+	(0, import_react.useEffect)(() => {
+		if (isDragging || !containerRef.current) return;
+		const color = Color.hsl(hue, saturation, lightness).hsv();
+		setPosition({
+			x: color.saturationv() / 100,
+			y: 1 - color.value() / 100
+		});
+	}, [
+		containerRef,
+		hue,
+		saturation,
+		lightness
+	]);
+	const handlePointerMove = (0, import_react.useCallback)((event) => {
+		if (!isDragging || !containerRef.current) return;
+		const rect = containerRef.current.getBoundingClientRect();
+		const x = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
+		const y = Math.max(0, Math.min(1, (event.clientY - rect.top) / rect.height));
+		const color = Color.hsv(hue, x * 100, (1 - y) * 100).hsl();
+		setPosition({
+			x,
+			y
+		});
+		setSaturation(color.saturationl());
+		setLightness(color.lightness());
+	}, [
+		isDragging,
+		hue,
+		setSaturation,
+		setLightness
+	]);
+	(0, import_react.useEffect)(() => {
+		if (isDragging) {
+			window.addEventListener("pointermove", handlePointerMove);
+			const handleUp = () => setIsDragging(false);
+			window.addEventListener("pointerup", handleUp);
+			return () => {
+				window.removeEventListener("pointermove", handlePointerMove);
+				window.removeEventListener("pointerup", handleUp);
+			};
+		}
+	}, [isDragging, handlePointerMove]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		ref: containerRef,
+		className: cn("relative aspect-[4/3] w-full cursor-crosshair rounded overflow-hidden", className),
+		style: { background: `
+          linear-gradient(to top, #000, transparent),
+          linear-gradient(to right, #fff, hsl(${hue}, 100%, 50%))
+        ` },
+		onPointerDown: (e) => {
+			e.preventDefault();
+			setIsDragging(true);
+			const rect = containerRef.current.getBoundingClientRect();
+			const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+			const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+			const color = Color.hsv(hue, x * 100, (1 - y) * 100).hsl();
+			setSaturation(color.saturationl());
+			setLightness(color.lightness());
+		},
+		...props,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute h-4 w-4 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.5)]",
+			style: {
+				left: `${position.x * 100}%`,
+				top: `${position.y * 100}%`
+			}
+		})
+	});
+};
+var ColorPickerHue = ({ className, ...props }) => {
+	const { hue, setHue } = useColorPicker();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Root, {
+		value: [hue],
+		max: 360,
+		step: 1,
+		className: cn("relative flex h-4 w-full touch-none", className),
+		onValueChange: ([hue]) => setHue(hue),
+		...props,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Track, {
+			className: "relative my-0.5 h-3 w-full grow rounded-full bg-[linear-gradient(90deg,#FF0000,#FFFF00,#00FF00,#00FFFF,#0000FF,#FF00FF,#FF0000)]",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Range, { className: "absolute h-full" })
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })]
+	});
+};
+var ColorPickerAlpha = ({ className, ...props }) => {
+	const { alpha, setAlpha } = useColorPicker();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Root, {
+		value: [alpha],
+		max: 100,
+		step: 1,
+		className: cn("relative flex h-4 w-full touch-none", className),
+		onValueChange: ([alpha]) => setAlpha(alpha),
+		...props,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Track, {
+			className: "relative my-0.5 h-3 w-full grow rounded-full",
+			style: { background: "url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==\") left center" },
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 rounded-full bg-gradient-to-r from-transparent to-primary/50" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Range, { className: "absolute h-full rounded-full bg-transparent" })]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })]
+	});
+};
+var ColorPickerEyeDropper = ({ className, ...props }) => {
+	const { setHue, setSaturation, setLightness, setAlpha } = useColorPicker();
+	const handleEyeDropper = async () => {
+		try {
+			const [h, s, l] = Color((await new EyeDropper().open()).sRGBHex).hsl().array();
+			setHue(h);
+			setSaturation(s);
+			setLightness(l);
+			setAlpha(100);
+		} catch (error) {
+			console.error("EyeDropper failed:", error);
+		}
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+		variant: "outline",
+		size: "icon",
+		onClick: handleEyeDropper,
+		className: cn("shrink-0 text-muted-foreground", className),
+		...props,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pipette, { size: 16 })
+	});
+};
+var formats = [
+	"oklch",
+	"hex",
+	"rgb",
+	"css",
+	"hsl"
+];
+var ColorPickerOutput = ({ className, ...props }) => {
+	const { mode, setMode } = useColorPicker();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select$1, {
+		value: mode,
+		onValueChange: setMode,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, {
+			className: "h-8 w-[4.5rem] shrink-0 text-xs",
+			...props,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, { placeholder: "Mode" })
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContent, { children: formats.map((format) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
+			value: format,
+			className: "text-xs",
+			children: format.toUpperCase()
+		}, format)) })]
+	});
+};
+var PercentageInput = ({ className, ...props }) => {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+			type: "text",
+			...props,
+			className: cn("h-8 w-[3.25rem] rounded-l-none bg-secondary px-2 text-xs shadow-none", className)
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: "-translate-y-1/2 absolute top-1/2 right-2 text-muted-foreground text-xs",
+			children: "%"
+		})]
+	});
+};
+var ColorPickerFormat = ({ className, ...props }) => {
+	const { hue, saturation, lightness, alpha, mode, setHue, setSaturation, setLightness } = useColorPicker();
+	const color = Color.hsl(hue, saturation, lightness, alpha / 100);
+	if (mode === "hex") {
+		const hex = color.hex();
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: cn("-space-x-px relative flex items-center shadow-sm", className),
+			...props,
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "-translate-y-1/2 absolute top-1/2 left-3 text-xs text-muted-foreground",
+					children: "#"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+					type: "text",
+					value: hex,
+					className: "h-8 rounded-r-none bg-secondary px-2 text-xs shadow-none"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PercentageInput, { value: alpha })
+			]
+		});
+	}
+	if (mode === "rgb") {
+		const rgb = color.rgb().array().map((value) => Math.round(value));
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: cn("-space-x-px flex items-center shadow-sm", className),
+			...props,
+			children: [rgb.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+				type: "text",
+				value,
+				readOnly: true,
+				className: cn("h-8 rounded-r-none bg-secondary px-2 text-xs shadow-none", index && "rounded-l-none", className)
+			}, index)), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PercentageInput, { value: alpha })]
+		});
+	}
+	if (mode === "css") {
+		const rgb = color.rgb().array().map((value) => Math.round(value));
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: cn("w-full shadow-sm", className),
+			...props,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+				type: "text",
+				className: "h-8 w-full bg-secondary px-2 text-xs shadow-none",
+				value: `rgba(${rgb.join(", ")}, ${alpha}%)`,
+				readOnly: true,
+				...props
+			})
+		});
+	}
+	if (mode === "hsl") {
+		const hsl = color.hsl().array().map((value) => Math.round(value));
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: cn("-space-x-px flex items-center shadow-sm", className),
+			...props,
+			children: [hsl.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+				type: "text",
+				value,
+				readOnly: true,
+				className: cn("h-8 rounded-r-none bg-secondary px-2 text-xs shadow-none", index && "rounded-l-none", className)
+			}, index)), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PercentageInput, { value: alpha })]
+		});
+	}
+	if (mode === "oklch") {
+		const rgb = color.rgb().array().map((value) => Math.round(value));
+		const oklch = convert.rgb.lch(rgb[0], rgb[1], rgb[2]);
+		const [l, c, h] = oklch.map((value, index) => {
+			return index === 1 ? Math.round(value * 100) / 100 : Math.round(value);
+		});
+		const handleOklchChange = (index, value) => {
+			try {
+				const currentOklch = [...oklch];
+				currentOklch[index] = parseFloat(value) || 0;
+				const newRgb = convert.lch.rgb(currentOklch[0], currentOklch[1], currentOklch[2]);
+				const newHsl = convert.rgb.hsl(newRgb[0], newRgb[1], newRgb[2]);
+				setHue(newHsl[0]);
+				setSaturation(newHsl[1]);
+				setLightness(newHsl[2]);
+			} catch (error) {
+				console.error("Invalid OKLCH color:", error);
+			}
+		};
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: cn("-space-x-px flex items-center shadow-sm", className),
+			...props,
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+					type: "text",
+					value: l,
+					onChange: (e) => handleOklchChange(0, e.target.value),
+					className: "h-8 rounded-r-none bg-secondary px-2 text-xs shadow-none",
+					placeholder: "L"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+					type: "text",
+					value: c,
+					onChange: (e) => handleOklchChange(1, e.target.value),
+					className: "h-8 rounded-none bg-secondary px-2 text-xs shadow-none",
+					placeholder: "C"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+					type: "text",
+					value: h,
+					onChange: (e) => handleOklchChange(2, e.target.value),
+					className: "h-8 rounded-none bg-secondary px-2 text-xs shadow-none",
+					placeholder: "H"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PercentageInput, { value: alpha })
+			]
+		});
+	}
+	return null;
+};
+function Colors() {
+	const { theme } = z();
+	const { colorMode, currentTheme, setCurrentTheme } = useThemes();
+	const selectedTheme = currentTheme?.[theme === "dark" ? "dark" : "light"];
+	const debounceTimer = (0, import_react.useRef)(null);
+	(0, import_react.useEffect)(() => {
+		return () => {
+			if (debounceTimer.current) clearTimeout(debounceTimer.current);
+		};
+	}, []);
+	const onUpdate = (colorName, rgb) => {
+		if (!currentTheme || !selectedTheme || selectedTheme[colorName] === rgb) return;
+		if (debounceTimer.current) clearTimeout(debounceTimer.current);
+		debounceTimer.current = setTimeout(() => {
+			if (!currentTheme || !selectedTheme || selectedTheme[colorName] === rgb) return;
+			const newTheme = currentTheme;
+			newTheme[theme === "dark" ? "dark" : "light"] = {
+				...selectedTheme,
+				[colorName]: rgb
+			};
+			setCurrentTheme(newTheme);
+		}, 250);
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "space-y-6 overflow-auto h-full pb-24",
+		children: Object.keys(colorSegments).map((segmentName) => {
+			const colors = colorSegments[segmentName];
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Collapsible$1, {
+				className: "border rounded-xl",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CollapsibleTrigger, {
+					className: "p-4 in-data-[state='open']:border-b flex justify-between items-center font-bold w-full",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: segmentName }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, {
+						className: "transition-transform in-data-[state=\"open\"]:rotate-180",
+						size: 16
+					})]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsibleContent, {
+					className: "p-4 space-y-2",
+					children: colors.map((color) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Popover$1, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							className: "size-12 border-2 rounded-sm overflow-hidden",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "text-muted-foreground size-full flex justify-center items-center",
+								style: { backgroundColor: selectedTheme?.[color] },
+								children: !selectedTheme?.[color] ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorPlaceholder, { className: "size-6" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pencil, { className: "size-6" })
+							})
+						}) }), !!selectedTheme?.[color] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverContent, {
+							align: "start",
+							className: "p-0",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ColorPicker, {
+								className: "w-full max-w-[300px] rounded-md border bg-background p-4 shadow-sm",
+								defaultValue: selectedTheme[color] || "#ffffff",
+								onChange: (rgb) => onUpdate(color, rgb.toString()),
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorPickerSelection, {}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+										className: "flex items-center gap-4",
+										children: [typeof EyeDropper !== "undefined" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorPickerEyeDropper, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+											className: "w-full grid gap-1",
+											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorPickerHue, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorPickerAlpha, {})]
+										})]
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorPickerOutput, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorPickerFormat, {})]
+									})
+								]
+							})
+						})] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "space-y-1",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: formatColorName(color) }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "text-muted-foreground text-xs flex items-center gap-2",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: displayColor(selectedTheme?.[color] || "", colorMode) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Copy, { className: "size-3 hover:opacity-90 cursor-pointer" })]
+							})]
+						})]
+					}, color))
+				})]
+			}) }, segmentName);
+		})
+	});
+}
+function ColorPreview({ theme: currentTheme }) {
+	const { theme } = z();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [previewColors.map((colorName, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: clsx("sm:size-6 size-4 border", i >= 3 && "hidden sm:block"),
+		style: { backgroundColor: currentTheme?.[theme === "dark" ? "dark" : "light"]?.[colorName] }
+	}, colorName)), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
+		className: "ml-2 font-semibold",
+		children: currentTheme?.name || "Untitled"
+	})] });
+}
+function useIsMobile(breakpoint = 768) {
+	const [isMobile, setIsMobile] = (0, import_react.useState)(false);
+	(0, import_react.useEffect)(() => {
+		const checkSize = () => {
+			setIsMobile(window.innerWidth < breakpoint);
+		};
+		checkSize();
+		window.addEventListener("resize", checkSize);
+		return () => window.removeEventListener("resize", checkSize);
+	}, [breakpoint]);
+	return isMobile;
+}
+function Sidebar() {
+	const chatRef = (0, import_react.useRef)(null);
+	const { theme } = z();
+	const { themes, currentTheme, setCurrentTheme } = useThemes();
+	const currentThemeIndex = (0, import_react.useMemo)(() => themes.findIndex((_theme) => _theme.id === currentTheme?.id), [currentTheme, theme]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "size-full flex flex-col overflow-hidden",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "h-16 sm:flex justify-between border-b hidden",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2 p-4",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SvgLogo, { className: "size-6 text-primary" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
+					className: "font-bold text-sm select-none",
+					children: "palettecn"
+				})]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex [&_button]:cursor-pointer [&_button]:rounded-none [&_button]:p-4 [&_button]:border-l [&_button]:h-full [&_button]:w-16",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+						variant: "ghost",
+						onClick: () => {
+							const prev = themes[currentThemeIndex - 1];
+							setCurrentTheme(prev);
+						},
+						disabled: currentThemeIndex === 0,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowLeft, {})
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+						variant: "ghost",
+						onClick: () => {
+							const next = themes[currentThemeIndex + 1];
+							setCurrentTheme(next);
+						},
+						disabled: currentThemeIndex >= themes.length - 1 || currentThemeIndex === -1,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowRight, {})
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+						variant: "ghost",
+						onClick: () => chatRef.current?.resetChat(),
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, {})
+					})
+				]
+			})]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tabs$1, {
+			className: "flex-1 flex-col flex min-h-0",
+			defaultValue: "ai",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TabsList, {
+					className: "mb-4 sm:mt-4 px-2 w-full bg-transparent!",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(GhostTabsTrigger, {
+							value: "colors",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Palette, {}), "Colors"]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(GhostTabsTrigger, {
+							value: "fonts",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TypeOutline, {}), "Typography"]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(GhostTabsTrigger, {
+							value: "ai",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Sparkle, {}), "Generate"]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(GhostTabsTrigger, {
+							value: "code",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodeXml, {}), "Code"]
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+					forceMount: true,
+					className: "hidden w-full flex-1 min-h-0 data-[state=active]:flex flex-col m-0 border-none",
+					value: "ai",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Chat, { ref: chatRef })
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+					className: "flex flex-col m-0 border-none size-full",
+					value: "code",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodePreview, {})
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+					className: "flex flex-col border-none size-full px-6",
+					value: "fonts",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Typography, {})
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+					className: "flex flex-col border-none size-full px-6",
+					value: "colors",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Colors, {})
+				})
+			]
+		})]
+	});
+}
+function PreviewComponent() {
+	const { isSidebarCollapsed, setIsSidebarCollapsed, themes, currentTheme, setCurrentTheme, setThemes } = useThemes();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col size-full h-full overflow-hidden",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", {
+			className: "size-full p-4 border-b h-16 -mt-2 sm:mt-0 flex items-center justify-between bg-background/20 backdrop-blur-sm",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2",
+				children: [
+					isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SvgLogo, { className: "size-6 text-primary" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+						size: "icon",
+						variant: "ghost",
+						className: "text-primary sm:flex hidden",
+						onClick: () => setIsSidebarCollapsed(!isSidebarCollapsed),
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PanelLeft, {})
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select$1, {
+						value: currentTheme?.id,
+						onValueChange: (id) => {
+							const selected = themes.find((t) => t.id === id);
+							if (selected) setCurrentTheme(selected);
+						},
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, {
+							className: "w-auto border-none shadow-none focus:ring-0 sm:[&_h3]:block [&_h3]:hidden",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, {})
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContent, {
+							position: "popper",
+							children: themes.filter((theme) => Boolean(theme?.id)).map((theme) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
+								value: theme.id,
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorPreview, { theme })
+							}, theme.id))
+						})]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Dialog$1, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+						size: "icon",
+						variant: "ghost",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pencil, {})
+					}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogContent, { children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle, { children: "Edit name" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogDescription, { children: "Edit the name of the theme" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+							placeholder: "Untitled",
+							value: themes.find((theme) => theme.id === currentTheme?.id)?.name,
+							onChange: (e) => {
+								setThemes(themes.map((theme) => {
+									if (theme.id === currentTheme?.id) return {
+										...currentTheme,
+										name: e.target.value
+									};
+									return theme;
+								}));
+							}
+						})
+					] })] }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+						size: "icon",
+						variant: "destructive",
+						onClick: () => {
+							const index = themes.findIndex((theme) => theme.id === currentTheme?.id);
+							setThemes(themes.filter((_, i) => index !== i));
+							const updatedThemes = useThemes.getState().themes;
+							if (updatedThemes.length === 0) {
+								setThemes([defaultTheme]);
+								setCurrentTheme(defaultTheme);
+							} else setCurrentTheme(updatedThemes[Math.max(0, index - 1)]);
+						},
+						disabled: themes.length <= 1 && !themes.some((theme) => theme.id !== defaultThemeId),
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trash2, {})
+					})
+				]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-4",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyCode, { className: "sm:flex hidden" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeSwitch, {})]
+			})]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "size-full p-2 overflow-hidden",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Preview, {})
+		})]
+	});
+}
+function App() {
+	const { theme } = z();
+	const { setFonts } = useFonts();
+	const { initialized, isSidebarCollapsed, currentTheme } = useThemes();
+	const isMobile = useIsMobile();
+	useQuery({
+		queryKey: ["fonts"],
+		queryFn: async () => {
+			setFonts(await (await fetch("https://api.fontsource.org/v1/fonts")).json());
+		},
+		staleTime: 1e3 * 60 * 60 * 24,
+		gcTime: 1e3 * 60 * 60 * 24,
+		refetchOnWindowFocus: false,
+		refetchOnMount: false
+	});
+	(0, import_react.useEffect)(() => {
+		if (currentTheme) applyTheme(currentTheme, theme);
+	}, [currentTheme, theme]);
+	if (!initialized) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "flex justify-center items-center h-full",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, { className: "size-12" })
+	});
+	if (isMobile) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tabs$1, {
+		defaultValue: "editor",
+		className: "size-full",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TabsList, {
+				className: "bg-transparent! w-full",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(GhostTabsTrigger, {
+					value: "editor",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Settings2, {}), "Edit"]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(GhostTabsTrigger, {
+					value: "preview",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScanEye, {}), "Preview"]
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Separator$1, {}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+				value: "editor",
+				className: "w-full @container/sidebar",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Sidebar, {})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, {
+				value: "preview",
+				className: "w-full @container overflow-hidden",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewComponent, {})
+			})
+		]
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "size-full",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ResizablePanelGroup, {
+			orientation: "horizontal",
+			className: "isolate",
+			children: [
+				!isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResizablePanel, {
+					defaultSize: 25,
+					minSize: 400,
+					maxSize: "50%",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Sidebar, {})
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResizableHandle, { withHandle: true }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResizablePanel, {
+					defaultSize: 75,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreviewComponent, {})
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { App as component };