@datum-cloud/datum-ui 1.8.0 → 2.1.0

package/dist/logs/index.mjs

@@ -0,0 +1,980 @@
+import { t as cn } from "../utils-Bu32wN-x.mjs";
+import { t as Badge } from "../badge-BTNW_FEU.mjs";
+import { t as Button } from "../button-A1qTjZ8U.mjs";
+import { t as Checkbox } from "../checkbox-C6P12fio.mjs";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../collapsible/index.mjs";
+import { t as Input } from "../input-j4tbmYYz.mjs";
+import { t as Sheet } from "../sheet-C2i2k5i2.mjs";
+import { t as useBreakpoint } from "../use-breakpoint-CwiUJSmk.mjs";
+import { Skeleton } from "../skeleton/index.mjs";
+import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/index.mjs";
+import { t as DateTimeRangePicker } from "../date-time-range-picker-Dog33Ry0.mjs";
+import { t as DateTime } from "../date-time-CA-09lnw.mjs";
+import { t as useCopyToClipboard } from "../use-copy-to-clipboard-DZDq_85T.mjs";
+import { ChevronDown, ChevronUp, Copy, Download, RefreshCw, Search, SlidersHorizontal, X } from "lucide-react";
+import { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { format } from "date-fns";
+//#region src/components/features/logs/hooks/use-logs.ts
+const LogsContext = createContext(null);
+function useLogs() {
+	const context = use(LogsContext);
+	if (!context) throw new Error("Logs components must be used within <Logs.Root>");
+	return context;
+}
+//#endregion
+//#region src/components/features/logs/utils/parse-log-line.ts
+const ACCESS_LOG_RE = /^(GET|POST|PUT|PATCH|DELETE|HEAD|OPTIONS)\s+(\S+)\s+(\d{3})\s+(\d+)ms\b/i;
+const PATH_TOKEN_RE = /(?:^|\s)(\/\S+)/;
+function parseLogLine(line) {
+	const match = ACCESS_LOG_RE.exec(line);
+	if (!match) return {
+		kind: "text",
+		line
+	};
+	const method = match[1];
+	const path = match[2];
+	const status = match[3];
+	const duration = match[4];
+	if (!method || !path || !status || !duration) return {
+		kind: "text",
+		line
+	};
+	return {
+		kind: "http",
+		method: method.toUpperCase(),
+		path,
+		status: Number(status),
+		durationMs: Number(duration)
+	};
+}
+function logLineDisplay(line) {
+	const parsed = parseLogLine(line);
+	if (parsed.kind === "http") {
+		const match = ACCESS_LOG_RE.exec(line);
+		const rest = match ? line.slice(match[0].length).trim() : "";
+		return {
+			parsed,
+			path: parsed.path,
+			message: extraMessage(rest)
+		};
+	}
+	const path = PATH_TOKEN_RE.exec(line)?.[1] ?? null;
+	if (!path) return {
+		parsed,
+		path: null,
+		message: line
+	};
+	return {
+		parsed,
+		path,
+		message: extraMessage(stripOnce(line, path))
+	};
+}
+/** Drop leftover that is only fields already shown (method, status, path, duration, label=value). */
+function extraMessage(rest) {
+	if (!rest) return "";
+	return rest.split(/\s+/).filter(Boolean).some((token) => !/^[A-Z_]\w*=\S+$/i.test(token)) ? rest : "";
+}
+function stripOnce(line, token) {
+	const index = line.indexOf(token);
+	if (index === -1) return line;
+	return `${line.slice(0, index)}${line.slice(index + token.length)}`.replace(/\s+/g, " ").trim();
+}
+//#endregion
+//#region src/components/features/logs/utils/severity.ts
+const SEVERITY_BADGE = {
+	ERROR: "danger",
+	FATAL: "danger",
+	CRITICAL: "danger",
+	WARN: "warning",
+	WARNING: "warning",
+	INFO: "info",
+	DEBUG: "muted",
+	TRACE: "muted"
+};
+function severityBadgeType(severity) {
+	if (!severity) return "muted";
+	return SEVERITY_BADGE[severity.toUpperCase()] ?? "muted";
+}
+function httpStatusBadgeType(status) {
+	if (status >= 500) return "danger";
+	if (status >= 400) return "warning";
+	if (status >= 300) return "info";
+	if (status >= 200) return "success";
+	return "muted";
+}
+function httpStatusTextClass(status) {
+	switch (httpStatusBadgeType(status)) {
+		case "danger": return "text-[var(--color-badge-danger)]";
+		case "warning": return "text-[var(--color-badge-warning)]";
+		case "info": return "text-[var(--color-badge-info)]";
+		case "success": return "text-[var(--color-badge-success)]";
+		default: return "text-muted-foreground";
+	}
+}
+//#endregion
+//#region src/components/features/logs/components/status-badge.tsx
+function LogsSeverityBadge({ severity }) {
+	return /* @__PURE__ */ jsx(Badge, {
+		type: severityBadgeType(severity),
+		theme: "light",
+		className: "h-4 px-1.5 py-0 font-mono text-[10px] leading-4 font-medium",
+		children: severity ?? "LOG"
+	});
+}
+function LogsStatusBadge({ parsed }) {
+	if (parsed.kind !== "http") return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "—"
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-grid grid-cols-[7ch_auto] gap-x-2 font-mono text-[11px] font-medium",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground",
+			children: parsed.method
+		}), /* @__PURE__ */ jsx("span", {
+			className: cn("tabular-nums", httpStatusTextClass(parsed.status)),
+			children: parsed.status
+		})]
+	});
+}
+//#endregion
+//#region src/components/features/logs/components/detail.tsx
+function MetaCell({ label, children, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("bg-background min-w-0 px-3 py-2.5", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground mb-1 text-[11px] font-medium",
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "font-mono text-xs break-all",
+			children
+		})]
+	});
+}
+function DetailBody({ showClose = true }) {
+	const { selectedEntry, selectPrevious, selectNext, setSelectedId } = useLogs();
+	const [, copy] = useCopyToClipboard();
+	if (!selectedEntry) return null;
+	const parsed = parseLogLine(selectedEntry.line);
+	const title = parsed.kind === "http" ? `${parsed.method} ${parsed.path}` : selectedEntry.labels.service_name ?? "Log";
+	const service = selectedEntry.labels.service_name;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("header", {
+		className: "flex items-start gap-2 border-b px-4 py-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "mb-1.5",
+					children: /* @__PURE__ */ jsx(LogsSeverityBadge, { severity: selectedEntry.labels.severity })
+				}),
+				/* @__PURE__ */ jsx("h3", {
+					className: "truncate font-mono text-sm font-medium",
+					children: title
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "text-muted-foreground mt-1 flex min-w-0 items-center gap-1.5 text-xs",
+					children: [service && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate font-mono",
+						children: service
+					}), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: "·"
+					})] }), /* @__PURE__ */ jsx(DateTime, {
+						date: selectedEntry.timestamp,
+						timestamp: selectedEntry.timestampNs,
+						variant: "relative",
+						tooltip: "detailed",
+						className: "text-muted-foreground text-xs"
+					})]
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex shrink-0 items-center gap-1",
+			children: [
+				/* @__PURE__ */ jsx(Button, {
+					type: "secondary",
+					theme: "borderless",
+					size: "icon",
+					"aria-label": "Previous log",
+					onClick: selectPrevious,
+					children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" })
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					type: "secondary",
+					theme: "borderless",
+					size: "icon",
+					"aria-label": "Next log",
+					onClick: selectNext,
+					children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					type: "secondary",
+					theme: "borderless",
+					size: "icon",
+					"aria-label": "Copy log line",
+					onClick: () => copy(selectedEntry.line, { withToast: true }),
+					children: /* @__PURE__ */ jsx(Copy, { className: "size-4" })
+				}),
+				showClose && /* @__PURE__ */ jsx(Button, {
+					type: "secondary",
+					theme: "borderless",
+					size: "icon",
+					"aria-label": "Close details",
+					onClick: () => setSelectedId(null),
+					children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+				})
+			]
+		})]
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4 py-4",
+		children: [
+			/* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx("h4", {
+				className: "text-muted-foreground mb-2 text-xs font-medium",
+				children: "Message"
+			}), /* @__PURE__ */ jsx("pre", {
+				className: "bg-muted text-foreground overflow-x-auto rounded-md border p-3 font-mono text-xs leading-5 whitespace-pre-wrap break-all",
+				children: selectedEntry.line
+			})] }),
+			parsed.kind === "http" && /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx("h4", {
+				className: "text-muted-foreground mb-2 text-xs font-medium",
+				children: "Request"
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "bg-border grid grid-cols-3 gap-px overflow-hidden rounded-md border",
+				children: [
+					/* @__PURE__ */ jsx(MetaCell, {
+						label: "Method",
+						children: parsed.method
+					}),
+					/* @__PURE__ */ jsx(MetaCell, {
+						label: "Status",
+						children: /* @__PURE__ */ jsx("span", {
+							className: cn("font-medium tabular-nums", httpStatusTextClass(parsed.status)),
+							children: parsed.status
+						})
+					}),
+					/* @__PURE__ */ jsxs(MetaCell, {
+						label: "Duration",
+						children: [parsed.durationMs, "ms"]
+					}),
+					/* @__PURE__ */ jsx(MetaCell, {
+						label: "Path",
+						className: "col-span-3",
+						children: parsed.path
+					})
+				]
+			})] }),
+			/* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx("h4", {
+				className: "text-muted-foreground mb-2 text-xs font-medium",
+				children: "Labels"
+			}), /* @__PURE__ */ jsx("dl", {
+				className: "overflow-hidden rounded-md border",
+				children: Object.entries(selectedEntry.labels).map(([key, value]) => /* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-[minmax(0,8.5rem)_minmax(0,1fr)] gap-x-3 border-b px-3 py-2 last:border-b-0",
+					children: [/* @__PURE__ */ jsx("dt", {
+						className: "text-muted-foreground truncate font-mono text-[11px]",
+						children: key
+					}), /* @__PURE__ */ jsx("dd", {
+						className: "min-w-0 font-mono text-xs break-all",
+						children: value
+					})]
+				}, key))
+			})] })
+		]
+	})] });
+}
+function LogsDetail({ className }) {
+	const { selectedEntry, setSelectedId } = useLogs();
+	const breakpoint = useBreakpoint();
+	const reduceMotion = useReducedMotion();
+	const isDesktop = breakpoint === "desktop";
+	const open = selectedEntry !== null;
+	if (!isDesktop) return /* @__PURE__ */ jsx(Sheet, {
+		open,
+		onOpenChange: (next) => {
+			if (!next) setSelectedId(null);
+		},
+		children: /* @__PURE__ */ jsxs(Sheet.Content, {
+			side: "right",
+			showCloseButton: false,
+			className: "sm:max-w-md w-full gap-0 p-0",
+			"data-slot": "logs-detail",
+			children: [
+				/* @__PURE__ */ jsx(Sheet.Title, {
+					className: "sr-only",
+					children: "Log details"
+				}),
+				/* @__PURE__ */ jsx(Sheet.Description, {
+					className: "sr-only",
+					children: "Selected log entry"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex h-full flex-col",
+					children: /* @__PURE__ */ jsx(DetailBody, {})
+				})
+			]
+		})
+	});
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(motion.aside, {
+		"data-slot": "logs-detail",
+		initial: reduceMotion ? false : { width: 0 },
+		animate: { width: 400 },
+		exit: { width: 0 },
+		transition: reduceMotion ? { duration: 0 } : {
+			duration: .2,
+			ease: "easeOut"
+		},
+		className: cn("bg-background flex h-full shrink-0 flex-col overflow-hidden border-l", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex h-full w-[400px] flex-col",
+			children: /* @__PURE__ */ jsx(DetailBody, {})
+		})
+	}) });
+}
+//#endregion
+//#region src/components/features/logs/components/filters.tsx
+function LogsFilterGroup({ facet, defaultOpen }) {
+	const { filters, toggleFilterValue } = useLogs();
+	const selected = filters[facet.name] ?? [];
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		defaultOpen,
+		className: "border-b border-border",
+		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			className: "hover:bg-muted/40 flex w-full items-center justify-between px-3 py-2 text-left text-sm font-medium",
+			children: [facet.label, /* @__PURE__ */ jsx(ChevronDown, { className: "text-muted-foreground size-4 transition-transform [[data-state=open]_&]:rotate-180" })]
+		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col gap-1 px-3 pb-3",
+			children: facet.options.map((option) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("label", {
+				className: "hover:bg-muted/40 flex cursor-pointer items-center gap-2 rounded-md px-1 py-1 text-sm",
+				children: [
+					/* @__PURE__ */ jsx(Checkbox, {
+						checked: selected.includes(option.value),
+						onCheckedChange: () => toggleFilterValue(facet.name, option.value),
+						"aria-label": option.value
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate font-mono text-xs",
+						children: option.value
+					}),
+					option.count !== void 0 && /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground tabular-nums text-xs",
+						children: option.count
+					})
+				]
+			}) }, option.value))
+		}) })]
+	});
+}
+function LogsTimeRangeFilter({ className }) {
+	const { timeRange, setTimeRange } = useLogs();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("border-b border-border px-3 py-3", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground mb-2 text-xs font-medium",
+			children: "Time range"
+		}), /* @__PURE__ */ jsx(DateTimeRangePicker, {
+			value: timeRange,
+			onChange: (next) => {
+				if (next) setTimeRange({
+					from: next.from,
+					to: next.to
+				});
+			},
+			placeholder: "Select range",
+			disableFuture: true,
+			hideTimezone: true,
+			numberOfMonths: 1,
+			className: "w-full",
+			triggerClassName: "w-full justify-start text-xs",
+			sheetTitle: "Select time range"
+		})]
+	});
+}
+function LogsFilters({ className }) {
+	const { facets, hasActiveFilters, resetFilters } = useLogs();
+	return /* @__PURE__ */ jsxs("aside", {
+		"data-slot": "logs-filters",
+		className: cn("bg-background flex h-full min-h-0 w-64 shrink-0 flex-col border-r", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between px-3 py-3",
+			children: [/* @__PURE__ */ jsx("h2", {
+				className: "text-sm font-semibold",
+				children: "Filters"
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "text-muted-foreground hover:text-foreground text-xs disabled:opacity-40",
+				disabled: !hasActiveFilters,
+				onClick: resetFilters,
+				children: "Reset"
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "min-h-0 flex-1 overflow-y-auto",
+			children: [/* @__PURE__ */ jsx(LogsTimeRangeFilter, {}), facets.map((facet, index) => /* @__PURE__ */ jsx(LogsFilterGroup, {
+				facet,
+				defaultOpen: index === 0
+			}, facet.name))]
+		})]
+	});
+}
+//#endregion
+//#region src/components/features/logs/utils/format-timestamp.ts
+function formatLogTimestamp(date) {
+	return format(date, "MMM dd HH:mm:ss.SS").toUpperCase();
+}
+//#endregion
+//#region src/components/features/logs/components/table.tsx
+const COLUMN_LABEL = {
+	time: "Time",
+	severity: "Severity",
+	status: "Status",
+	service: "Service",
+	resource: "Resource",
+	path: "Path",
+	message: "Message"
+};
+const COLUMN_HEAD_CLASS = {
+	time: "w-[168px]",
+	severity: "w-[88px]",
+	status: "w-[110px]",
+	service: "w-[160px]",
+	resource: "w-[160px]",
+	path: "w-[200px]",
+	message: ""
+};
+function LogCell({ column, entry, parsed, path, message }) {
+	switch (column) {
+		case "time": return /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("time", {
+			dateTime: entry.timestamp.toISOString(),
+			className: "text-muted-foreground font-mono text-xs whitespace-nowrap",
+			children: formatLogTimestamp(entry.timestamp)
+		}) });
+		case "severity": return /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(LogsSeverityBadge, { severity: entry.labels.severity }) });
+		case "status": return /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(LogsStatusBadge, { parsed }) });
+		case "service": return /* @__PURE__ */ jsx(TableCell, {
+			className: "text-muted-foreground truncate font-mono text-xs",
+			children: entry.labels.service_name ?? "—"
+		});
+		case "resource": return /* @__PURE__ */ jsx(TableCell, {
+			className: "text-muted-foreground truncate font-mono text-xs",
+			children: entry.labels.resource_name ?? "—"
+		});
+		case "path": return /* @__PURE__ */ jsx(TableCell, {
+			className: cn("truncate font-mono text-xs", !path && "text-muted-foreground"),
+			title: path ?? void 0,
+			children: path ?? "—"
+		});
+		case "message": return /* @__PURE__ */ jsx(TableCell, {
+			className: "truncate font-mono text-xs",
+			children: message
+		});
+	}
+}
+function LogsTable({ className }) {
+	const { entries, columns, selectedId, setSelectedId, isLoading, error, selectPrevious, selectNext } = useLogs();
+	const scrollerRef = useRef(null);
+	function onKeyDown(event) {
+		if (event.key === "ArrowDown" || event.key === "j") {
+			event.preventDefault();
+			selectNext();
+		}
+		if (event.key === "ArrowUp" || event.key === "k") {
+			event.preventDefault();
+			selectPrevious();
+		}
+		if (event.key === "Escape") setSelectedId(null);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		ref: scrollerRef,
+		"data-slot": "logs-table",
+		className: cn("min-h-0 flex-1 overflow-auto outline-none", className),
+		tabIndex: 0,
+		"aria-busy": isLoading || void 0,
+		onKeyDown,
+		children: [error && /* @__PURE__ */ jsx("div", {
+			role: "alert",
+			className: "text-destructive px-4 py-3 text-sm",
+			children: error
+		}), /* @__PURE__ */ jsxs("table", {
+			className: "w-full caption-bottom table-fixed text-sm",
+			children: [/* @__PURE__ */ jsx(TableHeader, {
+				className: "bg-background sticky top-0 z-10",
+				children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx(TableHead, {
+					className: COLUMN_HEAD_CLASS[column],
+					children: COLUMN_LABEL[column]
+				}, column)) })
+			}), /* @__PURE__ */ jsxs(TableBody, { children: [
+				isLoading && entries.length === 0 && Array.from({ length: 8 }, (_, index) => /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+					colSpan: columns.length,
+					children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" })
+				}) }, `skeleton-${index}`)),
+				!isLoading && entries.length === 0 && !error && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+					colSpan: columns.length,
+					className: "text-muted-foreground py-10 text-center text-sm",
+					children: "No logs in this time range"
+				}) }),
+				entries.map((entry) => {
+					const { parsed, path, message } = logLineDisplay(entry.line);
+					const selected = entry.id === selectedId;
+					return /* @__PURE__ */ jsx(TableRow, {
+						"data-state": selected ? "selected" : void 0,
+						"aria-selected": selected,
+						className: cn("cursor-pointer hover:bg-foreground/[0.08]", "data-[state=selected]:bg-foreground/[0.14]", "data-[state=selected]:hover:bg-foreground/[0.14]"),
+						onClick: () => {
+							setSelectedId(selected ? null : entry.id);
+							scrollerRef.current?.focus();
+						},
+						children: columns.map((column) => /* @__PURE__ */ jsx(LogCell, {
+							column,
+							entry,
+							parsed,
+							path,
+							message
+						}, column))
+					}, entry.id);
+				})
+			] })]
+		})]
+	});
+}
+//#endregion
+//#region src/components/features/logs/components/toolbar.tsx
+function LogsSearch({ placeholder = "Search logs...", className }) {
+	const { search, setSearch } = useLogs();
+	const [value, setValue] = useState(search);
+	const searchRef = useRef(search);
+	const skipNextSync = useRef(false);
+	searchRef.current = search;
+	useEffect(() => {
+		if (skipNextSync.current) {
+			skipNextSync.current = false;
+			return;
+		}
+		setValue(search);
+	}, [search]);
+	useEffect(() => {
+		if (value === searchRef.current) return;
+		const timer = setTimeout(() => {
+			skipNextSync.current = true;
+			setSearch(value);
+		}, 250);
+		return () => clearTimeout(timer);
+	}, [value, setSearch]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative min-w-0 flex-1", className),
+		children: [/* @__PURE__ */ jsx(Search, { className: "text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2" }), /* @__PURE__ */ jsx(Input, {
+			value,
+			onChange: (event) => setValue(event.target.value),
+			placeholder,
+			"aria-label": placeholder,
+			className: "pl-9",
+			"data-slot": "logs-search"
+		})]
+	});
+}
+function LogsLiveToggle({ className }) {
+	const { live, setLive } = useLogs();
+	return /* @__PURE__ */ jsxs(Button, {
+		type: "secondary",
+		theme: "outline",
+		size: "small",
+		"aria-pressed": live,
+		onClick: () => setLive(!live),
+		className: cn("gap-2", className),
+		"data-slot": "logs-live",
+		children: [/* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full", live ? "bg-destructive animate-pulse" : "bg-muted-foreground/40") }), "Live"]
+	});
+}
+function LogsToolbar({ children, className }) {
+	const { onRefresh, onExport, entries } = useLogs();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "logs-toolbar",
+		className: cn("flex items-center gap-2 border-b px-3 py-2", className),
+		children: [
+			/* @__PURE__ */ jsx(LogsSearch, {}),
+			children,
+			/* @__PURE__ */ jsx(LogsLiveToggle, {}),
+			onRefresh && /* @__PURE__ */ jsx(Button, {
+				type: "secondary",
+				theme: "outline",
+				size: "icon",
+				"aria-label": "Refresh logs",
+				onClick: onRefresh,
+				children: /* @__PURE__ */ jsx(RefreshCw, { className: "size-4" })
+			}),
+			onExport && /* @__PURE__ */ jsx(Button, {
+				type: "secondary",
+				theme: "outline",
+				size: "icon",
+				"aria-label": "Export logs",
+				onClick: () => onExport(entries),
+				children: /* @__PURE__ */ jsx(Download, { className: "size-4" })
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/features/logs/components/explorer.tsx
+function LogsExplorer({ className }) {
+	const isDesktop = useBreakpoint() === "desktop";
+	const [filtersOpen, setFiltersOpen] = useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "logs-explorer",
+		className: cn("flex min-h-0 flex-1 overflow-hidden", className),
+		children: [
+			isDesktop ? /* @__PURE__ */ jsx(LogsFilters, {}) : /* @__PURE__ */ jsx(Sheet, {
+				open: filtersOpen,
+				onOpenChange: setFiltersOpen,
+				children: /* @__PURE__ */ jsxs(Sheet.Content, {
+					side: "left",
+					className: "w-72 p-0 sm:max-w-72",
+					children: [
+						/* @__PURE__ */ jsx(Sheet.Title, {
+							className: "sr-only",
+							children: "Filters"
+						}),
+						/* @__PURE__ */ jsx(Sheet.Description, {
+							className: "sr-only",
+							children: "Log filters"
+						}),
+						/* @__PURE__ */ jsx(LogsFilters, { className: "w-full border-r-0 [&>div:first-child]:pr-12" })
+					]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col",
+				children: [/* @__PURE__ */ jsx(LogsToolbar, { children: !isDesktop && /* @__PURE__ */ jsxs(Button, {
+					type: "secondary",
+					theme: "outline",
+					size: "small",
+					onClick: () => setFiltersOpen(true),
+					children: [/* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-4" }), "Filters"]
+				}) }), /* @__PURE__ */ jsxs("div", {
+					className: "flex min-h-0 flex-1",
+					children: [/* @__PURE__ */ jsx(LogsTable, {}), isDesktop && /* @__PURE__ */ jsx(LogsDetail, {})]
+				})]
+			}),
+			!isDesktop && /* @__PURE__ */ jsx(LogsDetail, {})
+		]
+	});
+}
+//#endregion
+//#region src/components/features/logs/hooks/use-controllable-state.ts
+function useControllableState({ value, defaultValue, onChange }) {
+	const [internal, setInternal] = useState(defaultValue);
+	const isControlled = value !== void 0;
+	return [isControlled ? value : internal, useCallback((next) => {
+		if (!isControlled) setInternal(next);
+		onChange?.(next);
+	}, [isControlled, onChange])];
+}
+//#endregion
+//#region src/components/features/logs/utils/constants.ts
+const DEFAULT_LOG_COLUMNS = [
+	"time",
+	"severity",
+	"status",
+	"service",
+	"path",
+	"message"
+];
+const CANONICAL_FACET_NAMES = [
+	"severity",
+	"service_name",
+	"resource_name"
+];
+const FACET_LABELS = {
+	severity: "Severity",
+	service_name: "Service",
+	resource_name: "Resource"
+};
+const SEVERITY_ORDER = [
+	"ERROR",
+	"FATAL",
+	"WARN",
+	"WARNING",
+	"INFO",
+	"DEBUG",
+	"TRACE"
+];
+const DEFAULT_LOGQL_MATCHER = "{service_name=~\".+\"}";
+//#endregion
+//#region src/components/features/logs/utils/facets.ts
+function facetLabel(name) {
+	return FACET_LABELS[name] ?? name.replaceAll("_", " ");
+}
+function compareFacetValues(name, a, b) {
+	if (name === "severity") {
+		const aIndex = SEVERITY_ORDER.indexOf(a);
+		const bIndex = SEVERITY_ORDER.indexOf(b);
+		const aRank = aIndex === -1 ? SEVERITY_ORDER.length : aIndex;
+		const bRank = bIndex === -1 ? SEVERITY_ORDER.length : bIndex;
+		if (aRank !== bRank) return aRank - bRank;
+	}
+	return a.localeCompare(b);
+}
+function compareFacetNames(a, b) {
+	const aIndex = CANONICAL_FACET_NAMES.indexOf(a);
+	const bIndex = CANONICAL_FACET_NAMES.indexOf(b);
+	const aRank = aIndex === -1 ? CANONICAL_FACET_NAMES.length : aIndex;
+	const bRank = bIndex === -1 ? CANONICAL_FACET_NAMES.length : bIndex;
+	if (aRank !== bRank) return aRank - bRank;
+	return a.localeCompare(b);
+}
+function facetsFromEntries(entries, names = CANONICAL_FACET_NAMES) {
+	const allow = new Set(names);
+	const counts = /* @__PURE__ */ new Map();
+	for (const entry of entries) for (const [name, value] of Object.entries(entry.labels)) {
+		if (!value || !allow.has(name)) continue;
+		let values = counts.get(name);
+		if (!values) {
+			values = /* @__PURE__ */ new Map();
+			counts.set(name, values);
+		}
+		values.set(value, (values.get(value) ?? 0) + 1);
+	}
+	return [...counts.keys()].sort(compareFacetNames).map((name) => {
+		const values = counts.get(name) ?? /* @__PURE__ */ new Map();
+		return {
+			name,
+			label: facetLabel(name),
+			options: [...values.entries()].sort(([a], [b]) => compareFacetValues(name, a, b)).map(([value, count]) => ({
+				value,
+				count
+			}))
+		};
+	});
+}
+function filterEntries(entries, filters, search = "") {
+	const query = search.trim().toLowerCase();
+	const active = Object.entries(filters).filter(([, values]) => values.length > 0);
+	return entries.filter((entry) => {
+		for (const [name, values] of active) {
+			const label = entry.labels[name];
+			if (!label || !values.includes(label)) return false;
+		}
+		if (query && !entry.line.toLowerCase().includes(query)) return false;
+		return true;
+	});
+}
+//#endregion
+//#region src/components/features/logs/utils/time-range.ts
+const THIRTY_MINUTES_MS = 18e5;
+function lastThirtyMinutes(now = /* @__PURE__ */ new Date()) {
+	return {
+		from: (/* @__PURE__ */ new Date(now.getTime() - THIRTY_MINUTES_MS)).toISOString(),
+		to: now.toISOString()
+	};
+}
+function filtersAreActive(filters) {
+	return Object.values(filters).some((values) => values.length > 0);
+}
+//#endregion
+//#region src/components/features/logs/components/root.tsx
+function LogsRoot({ entries, facets, timeRange, defaultTimeRange, filters, defaultFilters, search, defaultSearch = "", live, defaultLive = false, selectedId, defaultSelectedId = null, isLoading = false, error, columns = DEFAULT_LOG_COLUMNS, onTimeRangeChange, onFiltersChange, onSearchChange, onLiveChange, onSelectedIdChange, onRefresh, onExport, className, children }) {
+	const [currentTimeRange, setTimeRange] = useControllableState({
+		value: timeRange,
+		defaultValue: defaultTimeRange ?? lastThirtyMinutes(),
+		onChange: onTimeRangeChange
+	});
+	const [currentFilters, setFilters] = useControllableState({
+		value: filters,
+		defaultValue: defaultFilters ?? {},
+		onChange: onFiltersChange
+	});
+	const [currentSearch, setSearch] = useControllableState({
+		value: search,
+		defaultValue: defaultSearch,
+		onChange: onSearchChange
+	});
+	const [currentLive, setLive] = useControllableState({
+		value: live,
+		defaultValue: defaultLive,
+		onChange: onLiveChange
+	});
+	const [currentSelectedId, setSelectedId] = useControllableState({
+		value: selectedId,
+		defaultValue: defaultSelectedId,
+		onChange: onSelectedIdChange
+	});
+	const resolvedFacets = useMemo(() => facets ?? facetsFromEntries(entries), [facets, entries]);
+	const selectedIndex = useMemo(() => entries.findIndex((entry) => entry.id === currentSelectedId), [entries, currentSelectedId]);
+	const selectedEntry = selectedIndex >= 0 ? entries[selectedIndex] ?? null : null;
+	const toggleFilterValue = useCallback((name, value) => {
+		const current = currentFilters[name] ?? [];
+		const nextValues = current.includes(value) ? current.filter((item) => item !== value) : [...current, value];
+		const next = { ...currentFilters };
+		if (nextValues.length === 0) delete next[name];
+		else next[name] = nextValues;
+		setFilters(next);
+	}, [currentFilters, setFilters]);
+	const resetFilters = useCallback(() => {
+		setFilters({});
+	}, [setFilters]);
+	const selectPrevious = useCallback(() => {
+		if (entries.length === 0) return;
+		if (selectedIndex <= 0) setSelectedId(entries[0].id);
+		else setSelectedId(entries[selectedIndex - 1].id);
+	}, [
+		entries,
+		selectedIndex,
+		setSelectedId
+	]);
+	const selectNext = useCallback(() => {
+		if (entries.length === 0) return;
+		if (selectedIndex < 0) setSelectedId(entries[0].id);
+		else if (selectedIndex < entries.length - 1) setSelectedId(entries[selectedIndex + 1].id);
+	}, [
+		entries,
+		selectedIndex,
+		setSelectedId
+	]);
+	const value = useMemo(() => ({
+		entries,
+		facets: resolvedFacets,
+		timeRange: currentTimeRange,
+		setTimeRange,
+		filters: currentFilters,
+		setFilters,
+		toggleFilterValue,
+		resetFilters,
+		search: currentSearch,
+		setSearch,
+		live: currentLive,
+		setLive,
+		selectedId: currentSelectedId,
+		setSelectedId,
+		selectedEntry,
+		selectedIndex,
+		selectPrevious,
+		selectNext,
+		isLoading,
+		error,
+		columns,
+		hasActiveFilters: filtersAreActive(currentFilters),
+		onRefresh,
+		onExport
+	}), [
+		entries,
+		resolvedFacets,
+		currentTimeRange,
+		setTimeRange,
+		currentFilters,
+		setFilters,
+		toggleFilterValue,
+		resetFilters,
+		currentSearch,
+		setSearch,
+		currentLive,
+		setLive,
+		currentSelectedId,
+		setSelectedId,
+		selectedEntry,
+		selectedIndex,
+		selectPrevious,
+		selectNext,
+		isLoading,
+		error,
+		columns,
+		onRefresh,
+		onExport
+	]);
+	return /* @__PURE__ */ jsx(LogsContext, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "logs-root",
+			className: cn("flex h-full min-h-0 w-full flex-col", className),
+			children
+		})
+	});
+}
+//#endregion
+//#region src/components/features/logs/logs.tsx
+const Logs = {
+	Root: LogsRoot,
+	Explorer: LogsExplorer,
+	Filters: LogsFilters,
+	FilterGroup: LogsFilterGroup,
+	TimeRangeFilter: LogsTimeRangeFilter,
+	Toolbar: LogsToolbar,
+	Search: LogsSearch,
+	LiveToggle: LogsLiveToggle,
+	Table: LogsTable,
+	Detail: LogsDetail
+};
+//#endregion
+//#region src/components/features/logs/utils/build-logql.ts
+/** Loki/Prometheus label names. Anything else is dropped, not interpolated. */
+const LOKI_LABEL_NAME = /^[a-z_]\w*$/i;
+function escapeQuoted(value) {
+	return value.replace(/\\/g, "\\\\").replace(/"/g, "\\\"");
+}
+function escapeRegex(value) {
+	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function matcherClause(label, values) {
+	if (!LOKI_LABEL_NAME.test(label)) return null;
+	const unique = [...new Set(values.map((v) => v.trim()).filter(Boolean))];
+	if (unique.length === 0) return null;
+	if (unique.length === 1) return `${label}="${escapeQuoted(unique[0])}"`;
+	return `${label}=~"${escapeQuoted(unique.map(escapeRegex).join("|"))}"`;
+}
+function selectorFromMatchers(matchers) {
+	if (!matchers) return DEFAULT_LOGQL_MATCHER;
+	const clauses = Object.entries(matchers).map(([label, values]) => matcherClause(label, values)).filter((clause) => clause !== null);
+	if (clauses.length === 0) return DEFAULT_LOGQL_MATCHER;
+	return `{${clauses.join(", ")}}`;
+}
+function buildLogQL({ matchers, lineContains } = {}) {
+	const selector = selectorFromMatchers(matchers);
+	const text = lineContains?.trim();
+	if (!text) return selector;
+	return `${selector} |= "${escapeQuoted(text)}"`;
+}
+//#endregion
+//#region src/components/features/logs/utils/flatten-loki.ts
+function nsToDate(timestampNs) {
+	try {
+		const ms = BigInt(timestampNs) / 1000000n;
+		return new Date(Number(ms));
+	} catch {
+		return /* @__PURE__ */ new Date(NaN);
+	}
+}
+function flattenStream(stream, streamIndex) {
+	const labels = stream.stream ?? {};
+	const values = stream.values ?? [];
+	const entries = [];
+	for (const [valueIndex, pair] of values.entries()) {
+		const timestampNs = pair[0];
+		const line = pair[1];
+		if (!timestampNs || line === void 0) continue;
+		const timestamp = nsToDate(timestampNs);
+		if (Number.isNaN(timestamp.getTime())) continue;
+		entries.push({
+			id: `${timestampNs}-${streamIndex}-${valueIndex}`,
+			timestamp,
+			timestampNs,
+			line,
+			labels: { ...labels }
+		});
+	}
+	return entries;
+}
+function flattenLokiStreams(response) {
+	if (response.status !== "success" || response.data?.resultType !== "streams" || !response.data.result) return [];
+	const entries = response.data.result.flatMap(flattenStream);
+	entries.sort((a, b) => {
+		try {
+			const delta = BigInt(b.timestampNs) - BigInt(a.timestampNs);
+			if (delta === 0n) return a.id < b.id ? 1 : -1;
+			return delta > 0n ? 1 : -1;
+		} catch {
+			return a.timestampNs < b.timestampNs ? 1 : -1;
+		}
+	});
+	return entries;
+}
+//#endregion
+export { Logs, buildLogQL, facetsFromEntries, filterEntries, flattenLokiStreams, httpStatusBadgeType, httpStatusTextClass, lastThirtyMinutes, logLineDisplay, nsToDate, parseLogLine, severityBadgeType, useLogs };