@geekmidas/ui 0.0.1 → 0.2.0

package/dist/index.mjs

@@ -0,0 +1,2428 @@
+import { getLogLevelColor, getMethodColor, getStatusColor, theme } from "./theme-DAiFBbyM.mjs";
+import { useDebounce, useLocalStorage, useWebSocket } from "./hooks-DBc-Cw9X.mjs";
+import { format, subDays, subHours } from "date-fns";
+import { Area, AreaChart, Bar, BarChart, Cell, Pie, PieChart, ResponsiveContainer, Tooltip as Tooltip$1, XAxis, YAxis } from "recharts";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, ArrowUpDown, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, Circle, Copy, FileQuestion, Inbox, Loader2, PanelLeftClose, PanelLeftOpen, Pause, Play, Search, ServerOff, X } from "lucide-react";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Highlight, themes } from "prism-react-renderer";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+//#region src/lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+//#endregion
+//#region src/components/data-display/charts/area-time-series-chart.tsx
+const COLOR_MAP = {
+	blue: "hsl(217, 91%, 60%)",
+	red: "hsl(0, 84%, 60%)",
+	green: "hsl(142, 71%, 45%)",
+	amber: "hsl(38, 92%, 50%)",
+	purple: "hsl(263, 70%, 50%)"
+};
+function AreaTimeSeriesChart({ data, primaryLabel = "Value", secondaryLabel, primaryColor = "blue", secondaryColor = "red", timeFormat = "HH:mm", valueFormatter = (v) => v.toLocaleString(), className, showLegend }) {
+	if (data.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "h-48 flex items-center justify-center text-sm text-muted-foreground",
+		children: "No data available"
+	});
+	const hasSecondary = secondaryLabel && data.some((p) => p.secondaryValue !== void 0);
+	const chartData = data.map((point) => ({
+		time: format(new Date(point.timestamp), timeFormat),
+		timestamp: point.timestamp,
+		[primaryLabel]: point.value,
+		...hasSecondary && secondaryLabel ? { [secondaryLabel]: point.secondaryValue ?? 0 } : {}
+	}));
+	const primaryColorValue = COLOR_MAP[primaryColor] ?? primaryColor;
+	const secondaryColorValue = COLOR_MAP[secondaryColor] ?? secondaryColor;
+	const shouldShowLegend = showLegend ?? hasSecondary;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("h-48", className),
+		children: [/* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ jsxs(AreaChart, {
+				data: chartData,
+				children: [
+					/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsxs("linearGradient", {
+						id: "primaryGradient",
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "5%",
+							stopColor: primaryColorValue,
+							stopOpacity: .3
+						}), /* @__PURE__ */ jsx("stop", {
+							offset: "95%",
+							stopColor: primaryColorValue,
+							stopOpacity: 0
+						})]
+					}), hasSecondary && /* @__PURE__ */ jsxs("linearGradient", {
+						id: "secondaryGradient",
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "5%",
+							stopColor: secondaryColorValue,
+							stopOpacity: .3
+						}), /* @__PURE__ */ jsx("stop", {
+							offset: "95%",
+							stopColor: secondaryColorValue,
+							stopOpacity: 0
+						})]
+					})] }),
+					/* @__PURE__ */ jsx(XAxis, {
+						dataKey: "time",
+						tick: {
+							fill: "hsl(var(--muted-foreground))",
+							fontSize: 12
+						},
+						axisLine: false,
+						tickLine: false
+					}),
+					/* @__PURE__ */ jsx(YAxis, {
+						tick: {
+							fill: "hsl(var(--muted-foreground))",
+							fontSize: 12
+						},
+						axisLine: false,
+						tickLine: false,
+						tickFormatter: valueFormatter,
+						width: 50
+					}),
+					/* @__PURE__ */ jsx(Tooltip$1, { content: ({ active, payload, label }) => {
+						if (!active || !payload?.length) return null;
+						return /* @__PURE__ */ jsxs("div", {
+							className: "rounded-lg border bg-popover px-3 py-2 text-sm shadow-md",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "font-medium mb-1",
+								children: label
+							}), payload.map((entry, index) => /* @__PURE__ */ jsxs("p", {
+								className: "flex items-center gap-2 text-muted-foreground",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "w-2 h-2 rounded-full",
+										style: { backgroundColor: entry.color }
+									}),
+									entry.name,
+									": ",
+									valueFormatter(entry.value)
+								]
+							}, index))]
+						});
+					} }),
+					/* @__PURE__ */ jsx(Area, {
+						type: "monotone",
+						dataKey: primaryLabel,
+						stroke: primaryColorValue,
+						fill: "url(#primaryGradient)",
+						strokeWidth: 2
+					}),
+					hasSecondary && secondaryLabel && /* @__PURE__ */ jsx(Area, {
+						type: "monotone",
+						dataKey: secondaryLabel,
+						stroke: secondaryColorValue,
+						fill: "url(#secondaryGradient)",
+						strokeWidth: 2
+					})
+				]
+			})
+		}), shouldShowLegend && /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-center gap-4 mt-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 text-xs",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "w-3 h-3 rounded-full",
+					style: { backgroundColor: primaryColorValue }
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: primaryLabel
+				})]
+			}), hasSecondary && secondaryLabel && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 text-xs",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "w-3 h-3 rounded-full",
+					style: { backgroundColor: secondaryColorValue }
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: secondaryLabel
+				})]
+			})]
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/data-display/charts/bar-list-chart.tsx
+function BarListChart({ data, valueFormatter = (v) => v.toLocaleString(), onItemClick, className, emptyMessage = "No data available", color = "hsl(217, 91%, 60%)" }) {
+	if (data.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "h-48 flex items-center justify-center text-sm text-muted-foreground",
+		children: emptyMessage
+	});
+	const maxValue = Math.max(...data.map((d) => d.value));
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("space-y-3", className),
+		children: data.map((item, index) => {
+			const percentage = maxValue > 0 ? item.value / maxValue * 100 : 0;
+			const isClickable = !!onItemClick;
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("group", isClickable && "cursor-pointer"),
+				onClick: () => onItemClick?.(item),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between mb-1",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cn("text-sm truncate flex-1 mr-4", isClickable && "group-hover:text-foreground"),
+						children: item.name
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-sm font-medium tabular-nums",
+						children: valueFormatter(item.value)
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "h-2 bg-muted rounded-full overflow-hidden",
+					children: /* @__PURE__ */ jsx("div", {
+						className: cn("h-full rounded-full transition-all duration-300", isClickable && "group-hover:opacity-80"),
+						style: {
+							width: `${percentage}%`,
+							backgroundColor: color
+						}
+					})
+				})]
+			}, index);
+		})
+	});
+}
+
+//#endregion
+//#region src/components/data-display/charts/latency-percentiles-chart.tsx
+function defaultFormatDuration(ms) {
+	if (ms < 1) return "<1ms";
+	if (ms < 1e3) return `${Math.round(ms)}ms`;
+	return `${(ms / 1e3).toFixed(2)}s`;
+}
+const PERCENTILE_COLORS = {
+	p50: "hsl(217, 91%, 60%)",
+	p95: "hsl(38, 92%, 50%)",
+	p99: "hsl(0, 84%, 60%)"
+};
+function LatencyPercentilesChart({ p50, p95, p99, className, valueFormatter = defaultFormatDuration }) {
+	const chartData = [
+		{
+			name: "p50",
+			label: "p50 (Median)",
+			value: p50,
+			color: PERCENTILE_COLORS.p50
+		},
+		{
+			name: "p95",
+			label: "p95",
+			value: p95,
+			color: PERCENTILE_COLORS.p95
+		},
+		{
+			name: "p99",
+			label: "p99",
+			value: p99,
+			color: PERCENTILE_COLORS.p99
+		}
+	];
+	if (p99 === 0) return /* @__PURE__ */ jsx("div", {
+		className: "h-48 flex items-center justify-center text-sm text-muted-foreground",
+		children: "No data available"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("h-48", className),
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ jsxs(BarChart, {
+				data: chartData,
+				layout: "vertical",
+				barSize: 20,
+				children: [
+					/* @__PURE__ */ jsx(XAxis, {
+						type: "number",
+						tickFormatter: valueFormatter,
+						tick: {
+							fill: "hsl(var(--muted-foreground))",
+							fontSize: 12
+						},
+						axisLine: false,
+						tickLine: false
+					}),
+					/* @__PURE__ */ jsx(YAxis, {
+						type: "category",
+						dataKey: "label",
+						width: 90,
+						tick: {
+							fill: "hsl(var(--muted-foreground))",
+							fontSize: 12
+						},
+						axisLine: false,
+						tickLine: false
+					}),
+					/* @__PURE__ */ jsx(Tooltip$1, { content: ({ active, payload }) => {
+						if (!active || !payload?.length) return null;
+						const item = payload[0]?.payload;
+						return /* @__PURE__ */ jsxs("div", {
+							className: "rounded-lg border bg-popover px-3 py-2 text-sm shadow-md",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "font-medium",
+								children: item.label
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-muted-foreground",
+								children: valueFormatter(item.value)
+							})]
+						});
+					} }),
+					/* @__PURE__ */ jsx(Bar, {
+						dataKey: "value",
+						radius: [
+							0,
+							4,
+							4,
+							0
+						],
+						children: chartData.map((entry, index) => /* @__PURE__ */ jsx(Cell, { fill: entry.color }, `cell-${index}`))
+					})
+				]
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/components/data-display/charts/status-distribution-chart.tsx
+const STATUS_CONFIG = {
+	"2xx": {
+		label: "2xx Success",
+		color: "hsl(142, 71%, 45%)"
+	},
+	"3xx": {
+		label: "3xx Redirect",
+		color: "hsl(217, 91%, 60%)"
+	},
+	"4xx": {
+		label: "4xx Client Error",
+		color: "hsl(38, 92%, 50%)"
+	},
+	"5xx": {
+		label: "5xx Server Error",
+		color: "hsl(0, 84%, 60%)"
+	}
+};
+function StatusDistributionChart({ data, className }) {
+	const chartData = Object.entries(data).filter(([, value]) => value > 0).map(([key, value]) => ({
+		name: STATUS_CONFIG[key].label,
+		value,
+		color: STATUS_CONFIG[key].color
+	}));
+	const total = chartData.reduce((sum, d) => sum + d.value, 0);
+	if (total === 0) return /* @__PURE__ */ jsx("div", {
+		className: "h-48 flex items-center justify-center text-sm text-muted-foreground",
+		children: "No data available"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("h-48", className),
+		children: [/* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ jsxs(PieChart, { children: [/* @__PURE__ */ jsx(Pie, {
+				data: chartData,
+				cx: "50%",
+				cy: "50%",
+				innerRadius: 50,
+				outerRadius: 70,
+				paddingAngle: 2,
+				dataKey: "value",
+				nameKey: "name",
+				children: chartData.map((entry, index) => /* @__PURE__ */ jsx(Cell, { fill: entry.color }, `cell-${index}`))
+			}), /* @__PURE__ */ jsx(Tooltip$1, { content: ({ active, payload }) => {
+				if (!active || !payload?.length) return null;
+				const item = payload[0];
+				const percent = (item.value / total * 100).toFixed(1);
+				return /* @__PURE__ */ jsxs("div", {
+					className: "rounded-lg border bg-popover px-3 py-2 text-sm shadow-md",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "font-medium",
+						children: item.name
+					}), /* @__PURE__ */ jsxs("p", {
+						className: "text-muted-foreground",
+						children: [
+							item.value.toLocaleString(),
+							" (",
+							percent,
+							"%)"
+						]
+					})]
+				});
+			} })] })
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap justify-center gap-4 mt-2",
+			children: chartData.map((item) => /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 text-xs",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "w-3 h-3 rounded-full",
+					style: { backgroundColor: item.color }
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: item.name
+				})]
+			}, item.name))
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/data-display/charts/time-range-selector.tsx
+const defaultPresets = [
+	{
+		label: "1h",
+		value: "1h"
+	},
+	{
+		label: "6h",
+		value: "6h"
+	},
+	{
+		label: "24h",
+		value: "24h"
+	},
+	{
+		label: "7d",
+		value: "7d"
+	}
+];
+function getPresetRange(preset) {
+	const end = /* @__PURE__ */ new Date();
+	switch (preset) {
+		case "1h": return {
+			start: subHours(end, 1),
+			end
+		};
+		case "6h": return {
+			start: subHours(end, 6),
+			end
+		};
+		case "24h": return {
+			start: subHours(end, 24),
+			end
+		};
+		case "7d": return {
+			start: subDays(end, 7),
+			end
+		};
+		default: return {
+			start: subHours(end, 1),
+			end
+		};
+	}
+}
+function TimeRangeSelector({ value, onChange, presets = defaultPresets, className }) {
+	const handlePresetClick = (preset) => {
+		const range = getPresetRange(preset);
+		onChange({
+			preset,
+			...range
+		});
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-2", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex rounded-md border border-border overflow-hidden",
+			children: presets.map(({ label, value: preset }, index) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => handlePresetClick(preset),
+				className: cn("px-3 py-1.5 text-sm font-medium transition-colors", value.preset === preset ? "bg-primary text-primary-foreground" : "bg-card hover:bg-muted text-foreground", index > 0 && "border-l border-border"),
+				children: label
+			}, preset))
+		})
+	});
+}
+/**
+* Create a time range from a preset
+*/
+function createTimeRange(preset = "1h") {
+	const range = getPresetRange(preset);
+	return {
+		preset,
+		...range
+	};
+}
+
+//#endregion
+//#region src/components/ui/button.tsx
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+			destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+			outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+			secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-9 px-4 py-2",
+			sm: "h-8 rounded-md px-3 text-xs",
+			lg: "h-10 rounded-md px-8",
+			icon: "h-9 w-9"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+const Button = React.forwardRef(({ className, variant, size, asChild = false,...props }, ref) => {
+	const Comp = asChild ? Slot : "button";
+	return /* @__PURE__ */ jsx(Comp, {
+		className: cn(buttonVariants({
+			variant,
+			size,
+			className
+		})),
+		ref,
+		...props
+	});
+});
+Button.displayName = "Button";
+
+//#endregion
+//#region src/components/ui/select.tsx
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = React.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
+	ref,
+	className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className),
+	...props,
+	children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" })
+	})]
+}));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectScrollUpButton = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, {
+	ref,
+	className: cn("flex cursor-default items-center justify-center py-1", className),
+	...props,
+	children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
+}));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, {
+	ref,
+	className: cn("flex cursor-default items-center justify-center py-1", className),
+	...props,
+	children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+}));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = React.forwardRef(({ className, children, position = "popper",...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
+	ref,
+	className: cn("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", 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,
+	...props,
+	children: [
+		/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+		/* @__PURE__ */ jsx(SelectPrimitive.Viewport, {
+			className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),
+			children
+		}),
+		/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+	]
+}) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Label, {
+	ref,
+	className: cn("px-2 py-1.5 text-sm font-semibold", className),
+	...props
+}));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = React.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
+	ref,
+	className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+	...props,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center",
+		children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) })
+	}), /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })]
+}));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectSeparator = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Separator, {
+	ref,
+	className: cn("-mx-1 my-1 h-px bg-muted", className),
+	...props
+}));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+//#endregion
+//#region src/components/ui/table.tsx
+const Table = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+	className: "relative w-full overflow-auto",
+	children: /* @__PURE__ */ jsx("table", {
+		ref,
+		className: cn("w-full caption-bottom text-sm", className),
+		...props
+	})
+}));
+Table.displayName = "Table";
+const TableHeader = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("thead", {
+	ref,
+	className: cn("[&_tr]:border-b", className),
+	...props
+}));
+TableHeader.displayName = "TableHeader";
+const TableBody = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("tbody", {
+	ref,
+	className: cn("[&_tr:last-child]:border-0", className),
+	...props
+}));
+TableBody.displayName = "TableBody";
+const TableFooter = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("tfoot", {
+	ref,
+	className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+	...props
+}));
+TableFooter.displayName = "TableFooter";
+const TableRow = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("tr", {
+	ref,
+	className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className),
+	...props
+}));
+TableRow.displayName = "TableRow";
+const TableHead = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("th", {
+	ref,
+	className: cn("h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
+	...props
+}));
+TableHead.displayName = "TableHead";
+const TableCell = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("td", {
+	ref,
+	className: cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
+	...props
+}));
+TableCell.displayName = "TableCell";
+const TableCaption = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("caption", {
+	ref,
+	className: cn("mt-4 text-sm text-muted-foreground", className),
+	...props
+}));
+TableCaption.displayName = "TableCaption";
+
+//#endregion
+//#region src/components/data-display/data-table.tsx
+function DataTableInner({ className, columns, data, getRowKey = (_, index) => index, sortColumn, sortDirection, onSortChange, pagination = false, page = 1, pageSize = 10, totalItems, onPageChange, onPageSizeChange, pageSizeOptions = [
+	10,
+	20,
+	50,
+	100
+], loading = false, emptyState, onRowClick, selectedKeys, striped = false, hoverable = true, compact = false,...props }, ref) {
+	const total = totalItems ?? data.length;
+	const totalPages = Math.ceil(total / pageSize);
+	const handleSort = (columnKey) => {
+		if (!onSortChange) return;
+		if (sortColumn === columnKey) onSortChange(columnKey, sortDirection === "asc" ? "desc" : "asc");
+		else onSortChange(columnKey, "asc");
+	};
+	const getSortIcon = (columnKey) => {
+		if (sortColumn !== columnKey) return /* @__PURE__ */ jsx(ArrowUpDown, { className: "ml-1 h-3.5 w-3.5 text-muted-foreground" });
+		return sortDirection === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "ml-1 h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "ml-1 h-3.5 w-3.5" });
+	};
+	const getAlignClass = (align) => {
+		switch (align) {
+			case "center": return "text-center";
+			case "right": return "text-right";
+			default: return "text-left";
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("w-full", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "rounded-md border border-border overflow-hidden",
+			children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, {
+				className: "hover:bg-transparent",
+				children: columns.map((column) => /* @__PURE__ */ jsx(TableHead, {
+					className: cn(getAlignClass(column.align), column.sortable && "cursor-pointer select-none", compact ? "py-2" : "py-3", column.headerClassName),
+					style: { width: column.width },
+					onClick: column.sortable ? () => handleSort(column.key) : void 0,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: cn("flex items-center", column.align === "center" && "justify-center", column.align === "right" && "justify-end"),
+						children: [column.header, column.sortable && getSortIcon(column.key)]
+					})
+				}, column.key))
+			}) }), /* @__PURE__ */ jsx(TableBody, { children: loading ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+				colSpan: columns.length,
+				className: "h-24 text-center text-muted-foreground",
+				children: "Loading..."
+			}) }) : data.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+				colSpan: columns.length,
+				className: "h-24 text-center text-muted-foreground",
+				children: emptyState ?? "No data available"
+			}) }) : data.map((row, rowIndex) => {
+				const rowKey = getRowKey(row, rowIndex);
+				const isSelected = selectedKeys?.has(rowKey);
+				return /* @__PURE__ */ jsx(TableRow, {
+					className: cn(striped && rowIndex % 2 === 1 && "bg-surface/50", hoverable && "hover:bg-surface-hover cursor-pointer", isSelected && "bg-accent/10", onRowClick && "cursor-pointer"),
+					onClick: onRowClick ? () => onRowClick(row, rowIndex) : void 0,
+					children: columns.map((column) => /* @__PURE__ */ jsx(TableCell, {
+						className: cn(getAlignClass(column.align), compact ? "py-2" : "py-3", column.cellClassName),
+						children: column.cell ? column.cell(row, rowIndex) : column.accessor ? column.accessor(row) : row[column.key]
+					}, column.key))
+				}, rowKey);
+			}) })] })
+		}), pagination && totalPages > 0 && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between px-2 py-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 text-sm text-muted-foreground",
+				children: [/* @__PURE__ */ jsx("span", { children: "Rows per page:" }), /* @__PURE__ */ jsxs(Select, {
+					value: String(pageSize),
+					onValueChange: (value) => onPageSizeChange?.(Number(value)),
+					children: [/* @__PURE__ */ jsx(SelectTrigger, {
+						className: "h-8 w-[70px]",
+						children: /* @__PURE__ */ jsx(SelectValue, {})
+					}), /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, {
+						value: String(size),
+						children: size
+					}, size)) })]
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "text-sm text-muted-foreground",
+					children: [
+						"Page ",
+						page,
+						" of ",
+						totalPages
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "icon",
+							className: "h-8 w-8",
+							onClick: () => onPageChange?.(1),
+							disabled: page <= 1,
+							children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "icon",
+							className: "h-8 w-8",
+							onClick: () => onPageChange?.(page - 1),
+							disabled: page <= 1,
+							children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "icon",
+							className: "h-8 w-8",
+							onClick: () => onPageChange?.(page + 1),
+							disabled: page >= totalPages,
+							children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "icon",
+							className: "h-8 w-8",
+							onClick: () => onPageChange?.(totalPages),
+							disabled: page >= totalPages,
+							children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" })
+						})
+					]
+				})]
+			})]
+		})]
+	});
+}
+const DataTable = React.forwardRef(DataTableInner);
+
+//#endregion
+//#region src/components/data-display/json-viewer.tsx
+const JsonViewer = React.forwardRef(({ className, data, defaultExpanded = true, expandDepth = 2, copyable = true, keyClassName, valueClassName,...props }, ref) => {
+	const [copied, setCopied] = React.useState(false);
+	const handleCopy = async () => {
+		await navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2e3);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("relative rounded-md bg-surface border border-border font-mono text-sm", className),
+		...props,
+		children: [copyable && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: handleCopy,
+			className: "absolute right-2 top-2 p-1.5 rounded-md hover:bg-surface-hover text-muted-foreground hover:text-foreground transition-colors",
+			"aria-label": "Copy JSON",
+			children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-green-500" }) : /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" })
+		}), /* @__PURE__ */ jsx("div", {
+			className: "p-3 overflow-auto",
+			children: /* @__PURE__ */ jsx(JsonNode, {
+				data,
+				depth: 0,
+				defaultExpanded,
+				expandDepth,
+				keyClassName,
+				valueClassName
+			})
+		})]
+	});
+});
+JsonViewer.displayName = "JsonViewer";
+function JsonNode({ data, depth, defaultExpanded, expandDepth, keyClassName, valueClassName, propertyKey, isLast = true }) {
+	const [expanded, setExpanded] = React.useState(defaultExpanded && depth < expandDepth);
+	const indent = depth * 16;
+	if (data === null) return /* @__PURE__ */ jsxs("span", {
+		className: "inline",
+		children: [
+			propertyKey && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+				className: cn("text-purple-400", keyClassName),
+				children: [
+					"\"",
+					propertyKey,
+					"\""
+				]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: ": "
+			})] }),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("text-orange-400", valueClassName),
+				children: "null"
+			}),
+			!isLast && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: ","
+			})
+		]
+	});
+	if (data === void 0) return /* @__PURE__ */ jsxs("span", {
+		className: "inline",
+		children: [
+			propertyKey && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+				className: cn("text-purple-400", keyClassName),
+				children: [
+					"\"",
+					propertyKey,
+					"\""
+				]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: ": "
+			})] }),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("text-gray-500", valueClassName),
+				children: "undefined"
+			}),
+			!isLast && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: ","
+			})
+		]
+	});
+	if (typeof data === "boolean") return /* @__PURE__ */ jsxs("span", {
+		className: "inline",
+		children: [
+			propertyKey && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+				className: cn("text-purple-400", keyClassName),
+				children: [
+					"\"",
+					propertyKey,
+					"\""
+				]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: ": "
+			})] }),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("text-blue-400", valueClassName),
+				children: String(data)
+			}),
+			!isLast && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: ","
+			})
+		]
+	});
+	if (typeof data === "number") return /* @__PURE__ */ jsxs("span", {
+		className: "inline",
+		children: [
+			propertyKey && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+				className: cn("text-purple-400", keyClassName),
+				children: [
+					"\"",
+					propertyKey,
+					"\""
+				]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: ": "
+			})] }),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("text-amber-400", valueClassName),
+				children: data
+			}),
+			!isLast && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: ","
+			})
+		]
+	});
+	if (typeof data === "string") return /* @__PURE__ */ jsxs("span", {
+		className: "inline",
+		children: [
+			propertyKey && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+				className: cn("text-purple-400", keyClassName),
+				children: [
+					"\"",
+					propertyKey,
+					"\""
+				]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: ": "
+			})] }),
+			/* @__PURE__ */ jsxs("span", {
+				className: cn("text-green-400", valueClassName),
+				children: [
+					"\"",
+					data,
+					"\""
+				]
+			}),
+			!isLast && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: ","
+			})
+		]
+	});
+	if (Array.isArray(data)) {
+		if (data.length === 0) return /* @__PURE__ */ jsxs("span", {
+			className: "inline",
+			children: [
+				propertyKey && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+					className: cn("text-purple-400", keyClassName),
+					children: [
+						"\"",
+						propertyKey,
+						"\""
+					]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: ": "
+				})] }),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: "[]"
+				}),
+				!isLast && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: ","
+				})
+			]
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			className: "inline-block",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center cursor-pointer hover:text-foreground text-muted-foreground",
+					onClick: () => setExpanded(!expanded),
+					children: [
+						expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 mr-0.5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 mr-0.5" }),
+						propertyKey && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+							className: cn("text-purple-400", keyClassName),
+							children: [
+								"\"",
+								propertyKey,
+								"\""
+							]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: ": "
+						})] }),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: "["
+						}),
+						!expanded && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground mx-1",
+							children: [data.length, " items"]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: "]"
+						})] })
+					]
+				}),
+				expanded && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+					style: { paddingLeft: indent + 16 },
+					children: data.map((item, index) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(JsonNode, {
+						data: item,
+						depth: depth + 1,
+						defaultExpanded,
+						expandDepth,
+						keyClassName,
+						valueClassName,
+						isLast: index === data.length - 1
+					}) }, index))
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: "]"
+				})] }),
+				!isLast && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: ","
+				})
+			]
+		});
+	}
+	if (typeof data === "object") {
+		const entries = Object.entries(data);
+		if (entries.length === 0) return /* @__PURE__ */ jsxs("span", {
+			className: "inline",
+			children: [
+				propertyKey && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+					className: cn("text-purple-400", keyClassName),
+					children: [
+						"\"",
+						propertyKey,
+						"\""
+					]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: ": "
+				})] }),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: "{}"
+				}),
+				!isLast && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: ","
+				})
+			]
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			className: "inline-block",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center cursor-pointer hover:text-foreground text-muted-foreground",
+					onClick: () => setExpanded(!expanded),
+					children: [
+						expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 mr-0.5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 mr-0.5" }),
+						propertyKey && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+							className: cn("text-purple-400", keyClassName),
+							children: [
+								"\"",
+								propertyKey,
+								"\""
+							]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: ": "
+						})] }),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: "{"
+						}),
+						!expanded && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground mx-1",
+							children: "..."
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: "}"
+						})] })
+					]
+				}),
+				expanded && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+					style: { paddingLeft: indent + 16 },
+					children: entries.map(([key, value], index) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(JsonNode, {
+						data: value,
+						depth: depth + 1,
+						defaultExpanded,
+						expandDepth,
+						keyClassName,
+						valueClassName,
+						propertyKey: key,
+						isLast: index === entries.length - 1
+					}) }, key))
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: "}"
+				})] }),
+				!isLast && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: ","
+				})
+			]
+		});
+	}
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("text-muted-foreground", valueClassName),
+		children: String(data)
+	});
+}
+
+//#endregion
+//#region src/components/data-display/sparkline.tsx
+const Sparkline = React.forwardRef(({ className, data, width = 100, height = 32, color = "currentColor", strokeWidth = 2, filled = false, fillOpacity = .2, showDots = false, curved = true, min: minProp, max: maxProp,...props }, ref) => {
+	if (data.length === 0) return /* @__PURE__ */ jsx("svg", {
+		ref,
+		className: cn("text-accent", className),
+		width,
+		height,
+		viewBox: `0 0 ${width} ${height}`,
+		...props
+	});
+	const min = minProp ?? Math.min(...data);
+	const max = maxProp ?? Math.max(...data);
+	const range = max - min || 1;
+	const padding = strokeWidth;
+	const chartWidth = width - padding * 2;
+	const chartHeight = height - padding * 2;
+	const points = data.map((value, index) => {
+		const x = padding + index / (data.length - 1 || 1) * chartWidth;
+		const y = padding + chartHeight - (value - min) / range * chartHeight;
+		return {
+			x,
+			y
+		};
+	});
+	let pathD;
+	if (curved && points.length > 2) pathD = points.reduce((acc, point, index) => {
+		if (index === 0) return `M ${point.x},${point.y}`;
+		const prev = points[index - 1];
+		const cpX = (prev.x + point.x) / 2;
+		return `${acc} Q ${prev.x},${prev.y} ${cpX},${(prev.y + point.y) / 2} T ${point.x},${point.y}`;
+	}, "");
+	else pathD = points.map((point, index) => index === 0 ? `M ${point.x},${point.y}` : `L ${point.x},${point.y}`).join(" ");
+	const fillPathD = filled ? `${pathD} L ${points[points.length - 1]?.x},${height - padding} L ${points[0]?.x},${height - padding} Z` : "";
+	return /* @__PURE__ */ jsxs("svg", {
+		ref,
+		className: cn("text-accent", className),
+		width,
+		height,
+		viewBox: `0 0 ${width} ${height}`,
+		...props,
+		children: [
+			filled && /* @__PURE__ */ jsx("path", {
+				d: fillPathD,
+				fill: color,
+				opacity: fillOpacity,
+				strokeWidth: 0
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: pathD,
+				fill: "none",
+				stroke: color,
+				strokeWidth,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			showDots && points.map((point, index) => /* @__PURE__ */ jsx("circle", {
+				cx: point.x,
+				cy: point.y,
+				r: strokeWidth + 1,
+				fill: color
+			}, index))
+		]
+	});
+});
+Sparkline.displayName = "Sparkline";
+const SparkBar = React.forwardRef(({ className, data, width = 100, height = 32, color = "currentColor", gap = .2, min: minProp = 0, max: maxProp, radius = 2,...props }, ref) => {
+	if (data.length === 0) return /* @__PURE__ */ jsx("svg", {
+		ref,
+		className: cn("text-accent", className),
+		width,
+		height,
+		viewBox: `0 0 ${width} ${height}`,
+		...props
+	});
+	const min = minProp;
+	const max = maxProp ?? Math.max(...data);
+	const range = max - min || 1;
+	const barWidth = width / data.length;
+	const gapWidth = barWidth * gap;
+	const actualBarWidth = barWidth - gapWidth;
+	return /* @__PURE__ */ jsx("svg", {
+		ref,
+		className: cn("text-accent", className),
+		width,
+		height,
+		viewBox: `0 0 ${width} ${height}`,
+		...props,
+		children: data.map((value, index) => {
+			const barHeight = (value - min) / range * height;
+			const x = index * barWidth + gapWidth / 2;
+			const y = height - barHeight;
+			return /* @__PURE__ */ jsx("rect", {
+				x,
+				y,
+				width: actualBarWidth,
+				height: barHeight,
+				fill: color,
+				rx: radius,
+				ry: radius
+			}, index);
+		})
+	});
+});
+SparkBar.displayName = "SparkBar";
+const MetricCard = React.forwardRef(({ className, title, value, description, sparklineData, trend, trendValue, icon,...props }, ref) => {
+	const trendColor = trend === "up" ? "text-green-500" : trend === "down" ? "text-red-500" : "text-muted-foreground";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("rounded-lg border border-border bg-surface p-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm font-medium text-muted-foreground",
+				children: title
+			}), icon && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: icon
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-2 flex items-end justify-between",
+			children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+				className: "text-2xl font-bold text-foreground",
+				children: value
+			}), (description || trendValue) && /* @__PURE__ */ jsxs("div", {
+				className: "mt-1 flex items-center gap-1",
+				children: [trendValue && /* @__PURE__ */ jsx("span", {
+					className: cn("text-xs font-medium", trendColor),
+					children: trendValue
+				}), description && /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: description
+				})]
+			})] }), sparklineData && sparklineData.length > 0 && /* @__PURE__ */ jsx(Sparkline, {
+				data: sparklineData,
+				width: 80,
+				height: 32,
+				filled: true,
+				className: trend === "up" ? "text-green-500" : trend === "down" ? "text-red-500" : "text-accent"
+			})]
+		})]
+	});
+});
+MetricCard.displayName = "MetricCard";
+
+//#endregion
+//#region src/components/data-display/timeline.tsx
+const timelineVariants = cva("relative", {
+	variants: { orientation: {
+		vertical: "flex flex-col",
+		horizontal: "flex flex-row"
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+const Timeline = React.forwardRef(({ className, orientation = "vertical", children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn(timelineVariants({
+			orientation,
+			className
+		})),
+		...props,
+		children
+	});
+});
+Timeline.displayName = "Timeline";
+const timelineItemVariants = cva("relative flex", {
+	variants: { orientation: {
+		vertical: "flex-row gap-4 pb-8 last:pb-0",
+		horizontal: "flex-col gap-2 pr-8 last:pr-0"
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+const TimelineItem = React.forwardRef(({ className, orientation = "vertical", active, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn(timelineItemVariants({
+			orientation,
+			className
+		})),
+		"data-active": active,
+		...props,
+		children
+	});
+});
+TimelineItem.displayName = "TimelineItem";
+const timelineIndicatorVariants = cva("flex items-center justify-center rounded-full border-2 shrink-0", {
+	variants: {
+		size: {
+			sm: "h-3 w-3",
+			md: "h-4 w-4",
+			lg: "h-6 w-6"
+		},
+		variant: {
+			default: "border-border bg-surface",
+			primary: "border-accent bg-accent",
+			success: "border-green-500 bg-green-500",
+			warning: "border-amber-500 bg-amber-500",
+			error: "border-red-500 bg-red-500",
+			info: "border-blue-500 bg-blue-500",
+			muted: "border-muted-foreground bg-muted"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		variant: "default"
+	}
+});
+const TimelineIndicator = React.forwardRef(({ className, size, variant, showLine = true, linePosition = "after", orientation = "vertical", children,...props }, ref) => {
+	const isVertical = orientation === "vertical";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("relative flex items-center", isVertical ? "flex-col" : "flex-row"),
+		children: [
+			showLine && (linePosition === "before" || linePosition === "both") && /* @__PURE__ */ jsx("div", { className: cn("bg-border", isVertical ? "w-0.5 flex-1" : "h-0.5 flex-1") }),
+			/* @__PURE__ */ jsx("div", {
+				className: cn(timelineIndicatorVariants({
+					size,
+					variant,
+					className
+				})),
+				...props,
+				children
+			}),
+			showLine && (linePosition === "after" || linePosition === "both") && /* @__PURE__ */ jsx("div", { className: cn("bg-border", isVertical ? "w-0.5 flex-1" : "h-0.5 flex-1") })
+		]
+	});
+});
+TimelineIndicator.displayName = "TimelineIndicator";
+const TimelineConnector = React.forwardRef(({ className, orientation = "vertical",...props }, ref) => {
+	const isVertical = orientation === "vertical";
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("bg-border", isVertical ? "absolute left-[7px] top-4 bottom-0 w-0.5" : "absolute top-[7px] left-4 right-0 h-0.5", className),
+		...props
+	});
+});
+TimelineConnector.displayName = "TimelineConnector";
+const TimelineContent = React.forwardRef(({ className, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("flex-1 pt-0.5", className),
+		...props,
+		children
+	});
+});
+TimelineContent.displayName = "TimelineContent";
+const TimelineTitle = React.forwardRef(({ className, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("h4", {
+		ref,
+		className: cn("text-sm font-medium text-foreground", className),
+		...props,
+		children
+	});
+});
+TimelineTitle.displayName = "TimelineTitle";
+const TimelineDescription = React.forwardRef(({ className, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("p", {
+		ref,
+		className: cn("text-sm text-muted-foreground", className),
+		...props,
+		children
+	});
+});
+TimelineDescription.displayName = "TimelineDescription";
+const TimelineTime = React.forwardRef(({ className, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cn("text-xs text-muted-foreground", className),
+		...props,
+		children
+	});
+});
+TimelineTime.displayName = "TimelineTime";
+
+//#endregion
+//#region src/components/feedback/empty-state.tsx
+const emptyStateVariants = cva("flex flex-col items-center justify-center text-center", {
+	variants: { size: {
+		sm: "gap-2 p-4",
+		md: "gap-3 p-6",
+		lg: "gap-4 p-8"
+	} },
+	defaultVariants: { size: "md" }
+});
+const EmptyState = React.forwardRef(({ className, size, icon, title, description, action, secondaryAction, children,...props }, ref) => {
+	const iconSize = size === "sm" ? "h-8 w-8" : size === "lg" ? "h-16 w-16" : "h-12 w-12";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn(emptyStateVariants({
+			size,
+			className
+		})),
+		...props,
+		children: [
+			icon && /* @__PURE__ */ jsx("div", {
+				className: cn("text-muted-foreground", iconSize),
+				children: icon
+			}),
+			title && /* @__PURE__ */ jsx("h3", {
+				className: cn("font-semibold text-foreground", size === "sm" && "text-sm", size === "lg" && "text-xl"),
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: cn("text-muted-foreground max-w-sm", size === "sm" && "text-xs", size === "lg" && "text-base", !size && "text-sm"),
+				children: description
+			}),
+			children,
+			(action || secondaryAction) && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 mt-2",
+				children: [action && /* @__PURE__ */ jsx(Button, {
+					size: size === "sm" ? "sm" : size === "lg" ? "default" : "sm",
+					onClick: action.onClick,
+					children: action.label
+				}), secondaryAction && /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: size === "sm" ? "sm" : size === "lg" ? "default" : "sm",
+					onClick: secondaryAction.onClick,
+					children: secondaryAction.label
+				})]
+			})
+		]
+	});
+});
+EmptyState.displayName = "EmptyState";
+const NoData = React.forwardRef(({ title = "No data",...props }, ref) => {
+	return /* @__PURE__ */ jsx(EmptyState, {
+		ref,
+		icon: /* @__PURE__ */ jsx(Inbox, { className: "h-full w-full" }),
+		title,
+		...props
+	});
+});
+NoData.displayName = "NoData";
+const NoResults = React.forwardRef(({ title = "No results found", searchTerm, description,...props }, ref) => {
+	const desc = description ?? (searchTerm ? `No results found for "${searchTerm}". Try adjusting your search.` : "Try adjusting your search or filters.");
+	return /* @__PURE__ */ jsx(EmptyState, {
+		ref,
+		icon: /* @__PURE__ */ jsx(Search, { className: "h-full w-full" }),
+		title,
+		description: desc,
+		...props
+	});
+});
+NoResults.displayName = "NoResults";
+const NotFound = React.forwardRef(({ title = "Page not found", description = "The page you're looking for doesn't exist or has been moved.",...props }, ref) => {
+	return /* @__PURE__ */ jsx(EmptyState, {
+		ref,
+		icon: /* @__PURE__ */ jsx(FileQuestion, { className: "h-full w-full" }),
+		title,
+		description,
+		...props
+	});
+});
+NotFound.displayName = "NotFound";
+const ServerError = React.forwardRef(({ title = "Something went wrong", description = "An unexpected error occurred. Please try again later.",...props }, ref) => {
+	return /* @__PURE__ */ jsx(EmptyState, {
+		ref,
+		icon: /* @__PURE__ */ jsx(ServerOff, { className: "h-full w-full" }),
+		title,
+		description,
+		...props
+	});
+});
+ServerError.displayName = "ServerError";
+
+//#endregion
+//#region src/components/feedback/live-indicator.tsx
+const liveIndicatorVariants = cva("inline-flex items-center gap-2 rounded-full text-sm font-medium", {
+	variants: {
+		size: {
+			sm: "h-6 px-2 text-xs",
+			md: "h-7 px-2.5",
+			lg: "h-8 px-3"
+		},
+		variant: {
+			default: "bg-surface border border-border",
+			solid: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		variant: "default"
+	}
+});
+const LiveIndicator = React.forwardRef(({ className, size, variant, live = true, liveLabel = "Live", pausedLabel = "Paused", toggleable = false, onLiveToggle, liveColor = "#22c55e",...props }, ref) => {
+	const handleToggle = () => {
+		onLiveToggle?.(!live);
+	};
+	const dotColor = live ? liveColor : "#6b7280";
+	const textColor = live ? liveColor : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn(liveIndicatorVariants({
+			size,
+			variant,
+			className
+		}), variant === "solid" && live && "bg-green-500/10", variant === "solid" && !live && "bg-muted"),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn("rounded-full", live && "animate-pulse"),
+				style: {
+					backgroundColor: dotColor,
+					width: size === "sm" ? 6 : size === "lg" ? 10 : 8,
+					height: size === "sm" ? 6 : size === "lg" ? 10 : 8
+				}
+			}),
+			/* @__PURE__ */ jsx("span", {
+				style: { color: textColor },
+				children: live ? liveLabel : pausedLabel
+			}),
+			toggleable && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon",
+				className: cn("ml-1 rounded-full", size === "sm" && "h-4 w-4", size === "md" && "h-5 w-5", size === "lg" && "h-6 w-6"),
+				onClick: handleToggle,
+				children: live ? /* @__PURE__ */ jsx(Pause, { className: cn(size === "sm" && "h-2.5 w-2.5", size === "md" && "h-3 w-3", size === "lg" && "h-3.5 w-3.5") }) : /* @__PURE__ */ jsx(Play, { className: cn(size === "sm" && "h-2.5 w-2.5", size === "md" && "h-3 w-3", size === "lg" && "h-3.5 w-3.5") })
+			})
+		]
+	});
+});
+LiveIndicator.displayName = "LiveIndicator";
+const connectionStatusConfig = {
+	connected: {
+		color: "#22c55e",
+		label: "Connected",
+		pulse: false
+	},
+	connecting: {
+		color: "#f59e0b",
+		label: "Connecting...",
+		pulse: true
+	},
+	disconnected: {
+		color: "#6b7280",
+		label: "Disconnected",
+		pulse: false
+	},
+	error: {
+		color: "#ef4444",
+		label: "Error",
+		pulse: true
+	}
+};
+const ConnectionStatus = React.forwardRef(({ className, status, showLabel = true, size = "md",...props }, ref) => {
+	const config = connectionStatusConfig[status];
+	const dotSize = size === "sm" ? 6 : size === "lg" ? 10 : 8;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("inline-flex items-center gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("rounded-full", config.pulse && "animate-pulse"),
+			style: {
+				backgroundColor: config.color,
+				width: dotSize,
+				height: dotSize
+			}
+		}), showLabel && /* @__PURE__ */ jsx("span", {
+			className: cn("text-sm", size === "sm" && "text-xs", size === "lg" && "text-base"),
+			style: { color: config.color },
+			children: config.label
+		})]
+	});
+});
+ConnectionStatus.displayName = "ConnectionStatus";
+
+//#endregion
+//#region src/components/feedback/loading.tsx
+const spinnerVariants = cva("animate-spin text-muted-foreground", {
+	variants: { size: {
+		xs: "h-3 w-3",
+		sm: "h-4 w-4",
+		md: "h-6 w-6",
+		lg: "h-8 w-8",
+		xl: "h-12 w-12"
+	} },
+	defaultVariants: { size: "md" }
+});
+const Spinner = React.forwardRef(({ className, size,...props }, ref) => {
+	return /* @__PURE__ */ jsx(Loader2, {
+		ref,
+		className: cn(spinnerVariants({
+			size,
+			className
+		})),
+		...props
+	});
+});
+Spinner.displayName = "Spinner";
+const loadingOverlayVariants = cva("absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm", {
+	variants: { variant: {
+		default: "bg-background/80",
+		dark: "bg-background/90",
+		light: "bg-background/50"
+	} },
+	defaultVariants: { variant: "default" }
+});
+const LoadingOverlay = React.forwardRef(({ className, variant, loading = true, text, spinnerSize = "lg", children,...props }, ref) => {
+	if (!loading) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn(loadingOverlayVariants({
+			variant,
+			className
+		})),
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center gap-3",
+			children: [
+				/* @__PURE__ */ jsx(Spinner, { size: spinnerSize }),
+				text && /* @__PURE__ */ jsx("span", {
+					className: "text-sm text-muted-foreground",
+					children: text
+				}),
+				children
+			]
+		})
+	});
+});
+LoadingOverlay.displayName = "LoadingOverlay";
+const LoadingContainer = React.forwardRef(({ className, loading = false, loadingText, spinnerSize, overlayVariant, children,...props }, ref) => {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("relative", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(LoadingOverlay, {
+			loading,
+			text: loadingText,
+			spinnerSize,
+			variant: overlayVariant
+		})]
+	});
+});
+LoadingContainer.displayName = "LoadingContainer";
+const LoadingDots = React.forwardRef(({ className, size = "md",...props }, ref) => {
+	const dotSize = size === "sm" ? "h-1 w-1" : size === "lg" ? "h-2.5 w-2.5" : "h-1.5 w-1.5";
+	const gap = size === "sm" ? "gap-1" : size === "lg" ? "gap-2" : "gap-1.5";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("flex items-center", gap, className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn(dotSize, "rounded-full bg-muted-foreground animate-bounce"),
+				style: { animationDelay: "0ms" }
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn(dotSize, "rounded-full bg-muted-foreground animate-bounce"),
+				style: { animationDelay: "150ms" }
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn(dotSize, "rounded-full bg-muted-foreground animate-bounce"),
+				style: { animationDelay: "300ms" }
+			})
+		]
+	});
+});
+LoadingDots.displayName = "LoadingDots";
+const Skeleton = React.forwardRef(({ className, width, height, rounded = "md", style,...props }, ref) => {
+	const roundedClass = rounded === true ? "rounded-md" : rounded === false ? "" : rounded === "sm" ? "rounded-sm" : rounded === "lg" ? "rounded-lg" : rounded === "full" ? "rounded-full" : "rounded-md";
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("animate-pulse bg-muted", roundedClass, className),
+		style: {
+			width,
+			height,
+			...style
+		},
+		...props
+	});
+});
+Skeleton.displayName = "Skeleton";
+
+//#endregion
+//#region src/components/feedback/status-badge.tsx
+const statusBadgeVariants = cva("inline-flex items-center justify-center rounded-full text-xs font-medium", {
+	variants: { size: {
+		sm: "h-5 min-w-5 px-1.5",
+		md: "h-6 min-w-6 px-2",
+		lg: "h-7 min-w-7 px-2.5"
+	} },
+	defaultVariants: { size: "md" }
+});
+const StatusBadge = React.forwardRef(({ className, size, status, method, logLevel, color: customColor, pulse, children, style,...props }, ref) => {
+	let color = customColor;
+	let content = children;
+	if (status !== void 0) {
+		color = color ?? getStatusColor(status);
+		content = content ?? String(status);
+	} else if (method) {
+		color = color ?? getMethodColor(method);
+		content = content ?? method.toUpperCase();
+	} else if (logLevel) {
+		color = color ?? getLogLevelColor(logLevel);
+		content = content ?? logLevel.toUpperCase();
+	}
+	const backgroundColor = color ? `${color}20` : void 0;
+	const textColor = color;
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		className: cn(statusBadgeVariants({
+			size,
+			className
+		})),
+		style: {
+			backgroundColor,
+			color: textColor,
+			...style
+		},
+		...props,
+		children: [pulse && /* @__PURE__ */ jsx("span", {
+			className: "mr-1.5 h-1.5 w-1.5 rounded-full animate-pulse",
+			style: { backgroundColor: color }
+		}), content]
+	});
+});
+StatusBadge.displayName = "StatusBadge";
+const HttpStatusBadge = React.forwardRef(({ code,...props }, ref) => {
+	return /* @__PURE__ */ jsx(StatusBadge, {
+		ref,
+		status: code,
+		...props
+	});
+});
+HttpStatusBadge.displayName = "HttpStatusBadge";
+const HttpMethodBadge = React.forwardRef(({ method,...props }, ref) => {
+	return /* @__PURE__ */ jsx(StatusBadge, {
+		ref,
+		method,
+		...props
+	});
+});
+HttpMethodBadge.displayName = "HttpMethodBadge";
+const LogLevelBadge = React.forwardRef(({ level,...props }, ref) => {
+	return /* @__PURE__ */ jsx(StatusBadge, {
+		ref,
+		logLevel: level,
+		...props
+	});
+});
+LogLevelBadge.displayName = "LogLevelBadge";
+
+//#endregion
+//#region src/components/layout/header.tsx
+const Header = React.forwardRef(({ className, sticky = false, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("header", {
+		ref,
+		className: cn("flex h-14 items-center gap-4 border-b border-border bg-surface px-4", sticky && "sticky top-0 z-10", className),
+		...props,
+		children
+	});
+});
+Header.displayName = "Header";
+const HeaderTitle = React.forwardRef(({ className, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("h1", {
+		ref,
+		className: cn("text-lg font-semibold text-foreground", className),
+		...props,
+		children
+	});
+});
+HeaderTitle.displayName = "HeaderTitle";
+const HeaderDescription = React.forwardRef(({ className, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("p", {
+		ref,
+		className: cn("text-sm text-muted-foreground", className),
+		...props,
+		children
+	});
+});
+HeaderDescription.displayName = "HeaderDescription";
+const HeaderActions = React.forwardRef(({ className, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("ml-auto flex items-center gap-2", className),
+		...props,
+		children
+	});
+});
+HeaderActions.displayName = "HeaderActions";
+const HeaderBreadcrumbs = React.forwardRef(({ className, items, separator,...props }, ref) => {
+	return /* @__PURE__ */ jsx("nav", {
+		ref,
+		"aria-label": "Breadcrumb",
+		className: cn("flex items-center gap-1 text-sm", className),
+		...props,
+		children: /* @__PURE__ */ jsx("ol", {
+			className: "flex items-center gap-1",
+			children: items.map((item, index) => /* @__PURE__ */ jsxs("li", {
+				className: "flex items-center gap-1",
+				children: [index > 0 && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: separator ?? /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" })
+				}), item.href && !item.current ? /* @__PURE__ */ jsx("a", {
+					href: item.href,
+					className: "text-muted-foreground hover:text-foreground transition-colors",
+					children: item.label
+				}) : /* @__PURE__ */ jsx("span", {
+					className: cn(item.current ? "text-foreground font-medium" : "text-muted-foreground"),
+					"aria-current": item.current ? "page" : void 0,
+					children: item.label
+				})]
+			}, item.label))
+		})
+	});
+});
+HeaderBreadcrumbs.displayName = "HeaderBreadcrumbs";
+const HeaderGroup = React.forwardRef(({ className, align = "start", children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("flex items-center gap-3", align === "center" && "justify-center", align === "end" && "justify-end ml-auto", className),
+		...props,
+		children
+	});
+});
+HeaderGroup.displayName = "HeaderGroup";
+
+//#endregion
+//#region src/components/layout/shell.tsx
+const Shell = React.forwardRef(({ className, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("flex h-screen w-full bg-background", className),
+		...props,
+		children
+	});
+});
+Shell.displayName = "Shell";
+const ShellSidebar = React.forwardRef(({ className, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("shrink-0", className),
+		...props,
+		children
+	});
+});
+ShellSidebar.displayName = "ShellSidebar";
+const ShellMain = React.forwardRef(({ className, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("flex flex-1 flex-col overflow-hidden", className),
+		...props,
+		children
+	});
+});
+ShellMain.displayName = "ShellMain";
+const ShellHeader = React.forwardRef(({ className, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("shrink-0", className),
+		...props,
+		children
+	});
+});
+ShellHeader.displayName = "ShellHeader";
+const ShellContent = React.forwardRef(({ className, scrollable = true, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("flex-1", scrollable && "overflow-auto", className),
+		...props,
+		children
+	});
+});
+ShellContent.displayName = "ShellContent";
+const ShellFooter = React.forwardRef(({ className, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("shrink-0 border-t border-border bg-surface", className),
+		...props,
+		children
+	});
+});
+ShellFooter.displayName = "ShellFooter";
+
+//#endregion
+//#region src/components/ui/scroll-area.tsx
+const ScrollArea = React.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
+	ref,
+	className: cn("relative overflow-hidden", className),
+	...props,
+	children: [
+		/* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, {
+			className: "h-full w-full rounded-[inherit]",
+			children
+		}),
+		/* @__PURE__ */ jsx(ScrollBar, {}),
+		/* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+	]
+}));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+const ScrollBar = React.forwardRef(({ className, orientation = "vertical",...props }, ref) => /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, {
+	ref,
+	orientation,
+	className: cn("flex touch-none select-none transition-colors", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]", className),
+	...props,
+	children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+}));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+//#endregion
+//#region src/components/ui/tooltip.tsx
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
+	ref,
+	sideOffset,
+	className: cn("z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=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", className),
+	...props
+}) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+//#endregion
+//#region src/components/layout/sidebar.tsx
+const sidebarVariants = cva("flex flex-col border-r border-border bg-surface transition-all duration-200", {
+	variants: { collapsed: {
+		true: "w-16",
+		false: "w-64"
+	} },
+	defaultVariants: { collapsed: false }
+});
+const SidebarContext = React.createContext({
+	collapsed: false,
+	setCollapsed: () => {}
+});
+function useSidebar() {
+	const context = React.useContext(SidebarContext);
+	if (!context) throw new Error("useSidebar must be used within a Sidebar");
+	return context;
+}
+const Sidebar = React.forwardRef(({ className, collapsed: controlledCollapsed, onCollapsedChange, header, footer, children,...props }, ref) => {
+	const [internalCollapsed, setInternalCollapsed] = React.useState(false);
+	const collapsed = controlledCollapsed ?? internalCollapsed;
+	const setCollapsed = React.useCallback((value) => {
+		setInternalCollapsed(value);
+		onCollapsedChange?.(value);
+	}, [onCollapsedChange]);
+	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
+		value: {
+			collapsed,
+			setCollapsed
+		},
+		children: /* @__PURE__ */ jsx(TooltipProvider, {
+			delayDuration: 0,
+			children: /* @__PURE__ */ jsxs("div", {
+				ref,
+				className: cn(sidebarVariants({
+					collapsed,
+					className
+				})),
+				...props,
+				children: [
+					header && /* @__PURE__ */ jsx("div", {
+						className: "flex h-14 items-center border-b border-border px-4",
+						children: header
+					}),
+					/* @__PURE__ */ jsx(ScrollArea, {
+						className: "flex-1",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "flex flex-col gap-1 p-2",
+							children
+						})
+					}),
+					footer && /* @__PURE__ */ jsx("div", {
+						className: "border-t border-border p-2",
+						children: footer
+					})
+				]
+			})
+		})
+	});
+});
+Sidebar.displayName = "Sidebar";
+const SidebarToggle = React.forwardRef(({ className,...props }, ref) => {
+	const { collapsed, setCollapsed } = useSidebar();
+	return /* @__PURE__ */ jsxs(Button, {
+		ref,
+		variant: "ghost",
+		size: "icon",
+		className: cn("h-8 w-8", className),
+		onClick: () => setCollapsed(!collapsed),
+		...props,
+		children: [collapsed ? /* @__PURE__ */ jsx(PanelLeftOpen, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: collapsed ? "Expand sidebar" : "Collapse sidebar"
+		})]
+	});
+});
+SidebarToggle.displayName = "SidebarToggle";
+const SidebarSection = React.forwardRef(({ className, title, children,...props }, ref) => {
+	const { collapsed } = useSidebar();
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("flex flex-col gap-1", className),
+		...props,
+		children: [
+			title && !collapsed && /* @__PURE__ */ jsx("div", {
+				className: "px-2 py-1.5 text-xs font-medium text-muted-foreground uppercase tracking-wider",
+				children: title
+			}),
+			title && collapsed && /* @__PURE__ */ jsx("div", { className: "mx-auto my-1 h-px w-6 bg-border" }),
+			children
+		]
+	});
+});
+SidebarSection.displayName = "SidebarSection";
+const SidebarItem = React.forwardRef(({ className, icon: Icon, active, badge, children,...props }, ref) => {
+	const { collapsed } = useSidebar();
+	const button = /* @__PURE__ */ jsxs("button", {
+		ref,
+		className: cn("flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors", "text-muted-foreground hover:bg-surface-hover hover:text-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", active && "bg-surface-hover text-foreground", collapsed && "justify-center px-0", className),
+		...props,
+		children: [
+			Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0" }),
+			!collapsed && /* @__PURE__ */ jsx("span", {
+				className: "flex-1 truncate",
+				children
+			}),
+			!collapsed && badge && /* @__PURE__ */ jsx("span", { children: badge })
+		]
+	});
+	if (collapsed) return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: button
+	}), /* @__PURE__ */ jsxs(TooltipContent, {
+		side: "right",
+		className: "flex items-center gap-2",
+		children: [children, badge]
+	})] });
+	return button;
+});
+SidebarItem.displayName = "SidebarItem";
+const SidebarLink = React.forwardRef(({ className, icon: Icon, active, badge, children,...props }, ref) => {
+	const { collapsed } = useSidebar();
+	const link = /* @__PURE__ */ jsxs("a", {
+		ref,
+		className: cn("flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors", "text-muted-foreground hover:bg-surface-hover hover:text-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", active && "bg-surface-hover text-foreground", collapsed && "justify-center px-0", className),
+		...props,
+		children: [
+			Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0" }),
+			!collapsed && /* @__PURE__ */ jsx("span", {
+				className: "flex-1 truncate",
+				children
+			}),
+			!collapsed && badge && /* @__PURE__ */ jsx("span", { children: badge })
+		]
+	});
+	if (collapsed) return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: link
+	}), /* @__PURE__ */ jsxs(TooltipContent, {
+		side: "right",
+		className: "flex items-center gap-2",
+		children: [children, badge]
+	})] });
+	return link;
+});
+SidebarLink.displayName = "SidebarLink";
+
+//#endregion
+//#region src/components/layout/split-pane.tsx
+const SplitPane = React.forwardRef(({ className, direction = "horizontal", defaultSize = "50%", minSize = 100, maxSize, onSizeChange, resizable = true, children,...props }, ref) => {
+	const containerRef = React.useRef(null);
+	const [size, setSize] = React.useState(null);
+	const [isDragging, setIsDragging] = React.useState(false);
+	const childArray = React.Children.toArray(children);
+	const firstPane = childArray[0];
+	const secondPane = childArray[1];
+	const isHorizontal = direction === "horizontal";
+	React.useEffect(() => {
+		if (size !== null || !containerRef.current) return;
+		const containerSize = isHorizontal ? containerRef.current.offsetWidth : containerRef.current.offsetHeight;
+		if (typeof defaultSize === "string" && defaultSize.endsWith("%")) {
+			const percent = parseFloat(defaultSize) / 100;
+			setSize(Math.round(containerSize * percent));
+		} else if (typeof defaultSize === "number") setSize(defaultSize);
+		else setSize(Math.round(containerSize / 2));
+	}, [
+		defaultSize,
+		isHorizontal,
+		size
+	]);
+	const handleMouseDown = React.useCallback((e) => {
+		if (!resizable) return;
+		e.preventDefault();
+		setIsDragging(true);
+	}, [resizable]);
+	React.useEffect(() => {
+		if (!isDragging) return;
+		const handleMouseMove = (e) => {
+			if (!containerRef.current) return;
+			const containerRect = containerRef.current.getBoundingClientRect();
+			const containerSize = isHorizontal ? containerRect.width : containerRect.height;
+			let newSize = isHorizontal ? e.clientX - containerRect.left : e.clientY - containerRect.top;
+			newSize = Math.max(minSize, newSize);
+			if (maxSize) newSize = Math.min(maxSize, newSize);
+			newSize = Math.min(containerSize - minSize, newSize);
+			setSize(newSize);
+			onSizeChange?.(newSize);
+		};
+		const handleMouseUp = () => {
+			setIsDragging(false);
+		};
+		document.addEventListener("mousemove", handleMouseMove);
+		document.addEventListener("mouseup", handleMouseUp);
+		return () => {
+			document.removeEventListener("mousemove", handleMouseMove);
+			document.removeEventListener("mouseup", handleMouseUp);
+		};
+	}, [
+		isDragging,
+		isHorizontal,
+		minSize,
+		maxSize,
+		onSizeChange
+	]);
+	const firstPaneStyle = {
+		[isHorizontal ? "width" : "height"]: size !== null ? `${size}px` : defaultSize,
+		flexShrink: 0
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: (node) => {
+			containerRef.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		className: cn("flex overflow-hidden", isHorizontal ? "flex-row" : "flex-col", isDragging && "cursor-col-resize select-none", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: cn("overflow-auto", isHorizontal ? "min-w-0" : "min-h-0"),
+				style: firstPaneStyle,
+				children: firstPane
+			}),
+			resizable && /* @__PURE__ */ jsx("div", {
+				className: cn("flex shrink-0 items-center justify-center bg-border transition-colors", isHorizontal ? "w-1 cursor-col-resize hover:bg-border-hover active:bg-accent" : "h-1 cursor-row-resize hover:bg-border-hover active:bg-accent", isDragging && "bg-accent"),
+				onMouseDown: handleMouseDown,
+				children: /* @__PURE__ */ jsx("div", { className: cn("rounded-full bg-muted-foreground/50", isHorizontal ? "h-8 w-1" : "h-1 w-8") })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("flex-1 overflow-auto", isHorizontal ? "min-w-0" : "min-h-0"),
+				children: secondPane
+			})
+		]
+	});
+});
+SplitPane.displayName = "SplitPane";
+const SplitPanePanel = React.forwardRef(({ className, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("h-full w-full", className),
+		...props,
+		children
+	});
+});
+SplitPanePanel.displayName = "SplitPanePanel";
+
+//#endregion
+//#region src/components/ui/badge.tsx
+const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+	variants: { variant: {
+		default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+		secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+		destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+		outline: "text-foreground",
+		success: "border-transparent bg-emerald-500/15 text-emerald-400",
+		warning: "border-transparent bg-amber-500/15 text-amber-400",
+		info: "border-transparent bg-blue-500/15 text-blue-400",
+		get: "border-transparent bg-blue-500/15 text-blue-400 font-mono",
+		post: "border-transparent bg-emerald-500/15 text-emerald-400 font-mono",
+		put: "border-transparent bg-amber-500/15 text-amber-400 font-mono",
+		patch: "border-transparent bg-violet-500/15 text-violet-400 font-mono",
+		delete: "border-transparent bg-red-500/15 text-red-400 font-mono"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Badge({ className, variant,...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(badgeVariants({ variant }), className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/components/ui/card.tsx
+const Card = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("rounded-xl border bg-card text-card-foreground shadow", className),
+	...props
+}));
+Card.displayName = "Card";
+const CardHeader = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("flex flex-col space-y-1.5 p-6", className),
+	...props
+}));
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("font-semibold leading-none tracking-tight", className),
+	...props
+}));
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("text-sm text-muted-foreground", className),
+	...props
+}));
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("p-6 pt-0", className),
+	...props
+}));
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("flex items-center p-6 pt-0", className),
+	...props
+}));
+CardFooter.displayName = "CardFooter";
+
+//#endregion
+//#region src/components/ui/code-block.tsx
+const CodeBlock = React.forwardRef(({ code, language = "typescript", showLineNumbers = false, className }, ref) => {
+	return /* @__PURE__ */ jsx(Highlight, {
+		theme: themes.vsDark,
+		code: code.trim(),
+		language,
+		children: ({ className: highlightClassName, style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx("pre", {
+			ref,
+			className: cn("overflow-auto rounded-md border bg-[#1e1e1e] p-4 text-sm", className),
+			style,
+			children: /* @__PURE__ */ jsx("code", {
+				className: highlightClassName,
+				children: tokens.map((line, i) => {
+					const lineProps = getLineProps({
+						line,
+						key: i
+					});
+					return /* @__PURE__ */ jsxs("div", {
+						...lineProps,
+						className: "table-row",
+						children: [showLineNumbers && /* @__PURE__ */ jsx("span", {
+							className: "table-cell select-none pr-4 text-right text-muted-foreground opacity-50",
+							children: i + 1
+						}), /* @__PURE__ */ jsx("span", {
+							className: "table-cell",
+							children: line.map((token, key) => /* @__PURE__ */ jsx("span", { ...getTokenProps({
+								token,
+								key
+							}) }, key))
+						})]
+					}, i);
+				})
+			})
+		})
+	});
+});
+CodeBlock.displayName = "CodeBlock";
+
+//#endregion
+//#region src/components/ui/dialog.tsx
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+const DialogOverlay = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
+	ref,
+	className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
+	...props
+}));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const DialogContent = React.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
+	ref,
+	className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className),
+	...props,
+	children: [children, /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
+		className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+		children: [/* @__PURE__ */ jsx(X, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Close"
+		})]
+	})]
+})] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogHeader = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className),
+	...props
+});
+DialogHeader.displayName = "DialogHeader";
+const DialogFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
+	...props
+});
+DialogFooter.displayName = "DialogFooter";
+const DialogTitle = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, {
+	ref,
+	className: cn("text-lg font-semibold leading-none tracking-tight", className),
+	...props
+}));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, {
+	ref,
+	className: cn("text-sm text-muted-foreground", className),
+	...props
+}));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+//#endregion
+//#region src/components/ui/dropdown-menu.tsx
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.SubTrigger, {
+	ref,
+	className: cn("flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className),
+	...props,
+	children: [children, /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto" })]
+}));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+const DropdownMenuSubContent = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubContent, {
+	ref,
+	className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
+	...props
+}));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
+	ref,
+	sideOffset,
+	className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
+	...props
+}) }));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+const DropdownMenuItem = React.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
+	ref,
+	className: cn("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0", inset && "pl-8", className),
+	...props
+}));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, {
+	ref,
+	className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+	checked,
+	...props,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
+		children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) })
+	}), children]
+}));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+const DropdownMenuRadioItem = React.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.RadioItem, {
+	ref,
+	className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+	...props,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
+		children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) })
+	}), children]
+}));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+const DropdownMenuLabel = React.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Label, {
+	ref,
+	className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
+	...props
+}));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+const DropdownMenuSeparator = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, {
+	ref,
+	className: cn("-mx-1 my-1 h-px bg-muted", className),
+	...props
+}));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+const DropdownMenuShortcut = ({ className,...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+		...props
+	});
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+//#endregion
+//#region src/components/ui/input.tsx
+const Input = React.forwardRef(({ className, type,...props }, ref) => {
+	return /* @__PURE__ */ jsx("input", {
+		type,
+		className: cn("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className),
+		ref,
+		...props
+	});
+});
+Input.displayName = "Input";
+
+//#endregion
+//#region src/components/ui/label.tsx
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const Label = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, {
+	ref,
+	className: cn(labelVariants(), className),
+	...props
+}));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+//#endregion
+//#region src/components/ui/separator.tsx
+const Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true,...props }, ref) => /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
+	ref,
+	decorative,
+	orientation,
+	className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className),
+	...props
+}));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+//#endregion
+//#region src/components/ui/tabs.tsx
+const Tabs = TabsPrimitive.Root;
+const TabsList = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.List, {
+	ref,
+	className: cn("inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground", className),
+	...props
+}));
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Trigger, {
+	ref,
+	className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow", className),
+	...props
+}));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Content, {
+	ref,
+	className: cn("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className),
+	...props
+}));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+//#endregion
+export { AreaTimeSeriesChart, Badge, BarListChart, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CodeBlock, ConnectionStatus, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, Header, HeaderActions, HeaderBreadcrumbs, HeaderDescription, HeaderGroup, HeaderTitle, HttpMethodBadge, HttpStatusBadge, Input, JsonViewer, Label, LatencyPercentilesChart, LiveIndicator, LoadingContainer, LoadingDots, LoadingOverlay, LogLevelBadge, MetricCard, NoData, NoResults, NotFound, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ServerError, Shell, ShellContent, ShellFooter, ShellHeader, ShellMain, ShellSidebar, Sidebar, SidebarItem, SidebarLink, SidebarSection, SidebarToggle, Skeleton, SparkBar, Sparkline, Spinner, SplitPane, SplitPanePanel, StatusBadge, StatusDistributionChart, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TimeRangeSelector, Timeline, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineTime, TimelineTitle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, createTimeRange, emptyStateVariants, getLogLevelColor, getMethodColor, getStatusColor, liveIndicatorVariants, loadingOverlayVariants, sidebarVariants, spinnerVariants, statusBadgeVariants, theme, timelineIndicatorVariants, timelineItemVariants, timelineVariants, useDebounce, useLocalStorage, useSidebar, useWebSocket };
+//# sourceMappingURL=index.mjs.map