tekivex-ui 2.5.15 → 2.6.0

package/dist/realtime.js

@@ -1,804 +1 @@
-import { f as e } from "./themes-BbJanqiC.js";
-import { m as t } from "./tkx-mOKMzvUK.js";
-import { createElement as n, useCallback as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
-//#region src/components/TkxLiveFeed.tsx
-var c = 64, l = 5, u = !1;
-function d() {
-	if (u || typeof document > "u") return;
-	u = !0;
-	let e = document.createElement("style");
-	e.id = "tkx-live-feed-styles", e.textContent = "@keyframes tkx-feed-slide-in {\n  from { transform: translateY(-20px); opacity: 0; }\n  to   { transform: translateY(0);     opacity: 1; }\n}\n.tkx-feed-item-new {\n  animation: tkx-feed-slide-in 0.25s ease-out both;\n}", document.head.appendChild(e);
-}
-function f(e) {
-	let t = Date.now() - e;
-	return t < 1e4 ? "just now" : t < 6e4 ? `${Math.floor(t / 1e3)}s ago` : t < 36e5 ? `${Math.floor(t / 6e4)}m ago` : t < 864e5 ? `${Math.floor(t / 36e5)}h ago` : `${Math.floor(t / 864e5)}d ago`;
-}
-function p(e, t) {
-	switch (e) {
-		case "info": return t.info;
-		case "success": return t.success;
-		case "warning": return t.warning;
-		case "error": return t.danger;
-		default: return t.border;
-	}
-}
-function m(e) {
-	return e ? e.split(" ").map((e) => e[0] ?? "").slice(0, 2).join("").toUpperCase() : "?";
-}
-function h({ item: e, isNew: r, showTimestamps: i, onItemClick: a, renderItem: o, theme: s, style: l }) {
-	let u = p(e.type, s);
-	return o ? n("div", {
-		style: l,
-		className: r ? "tkx-feed-item-new" : void 0
-	}, o(e)) : n("div", {
-		style: {
-			...l,
-			display: "flex",
-			alignItems: "center",
-			gap: 10,
-			padding: "0 12px",
-			borderLeft: `3px solid ${u}`,
-			cursor: a ? "pointer" : "default",
-			boxSizing: "border-box",
-			height: c,
-			background: s.surface,
-			transition: "background 0.15s"
-		},
-		className: r ? "tkx-feed-item-new" : void 0,
-		onClick: a ? () => a(e) : void 0,
-		role: a ? "button" : void 0,
-		tabIndex: a ? 0 : void 0,
-		onKeyDown: a ? (t) => {
-			(t.key === "Enter" || t.key === " ") && a(e);
-		} : void 0
-	}, n("div", { style: {
-		width: 36,
-		height: 36,
-		borderRadius: "50%",
-		background: u,
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		fontSize: 13,
-		fontWeight: 700,
-		color: s.bg,
-		flexShrink: 0,
-		overflow: "hidden"
-	} }, e.avatar ? n("img", {
-		src: e.avatar,
-		alt: e.author ?? "",
-		style: {
-			width: "100%",
-			height: "100%",
-			objectFit: "cover"
-		}
-	}) : m(e.author)), n("div", { style: {
-		flex: 1,
-		minWidth: 0
-	} }, n("div", { style: {
-		display: "flex",
-		alignItems: "center",
-		gap: 6,
-		marginBottom: 2
-	} }, e.author && n("span", { style: {
-		fontWeight: 600,
-		fontSize: 13,
-		color: s.text
-	} }, t(e.author)), e.meta && n("span", { style: {
-		fontSize: 11,
-		color: s.textMuted,
-		background: s.surfaceAlt,
-		borderRadius: 4,
-		padding: "1px 5px"
-	} }, t(e.meta))), n("div", { style: {
-		fontSize: 13,
-		color: s.text,
-		overflow: "hidden",
-		textOverflow: "ellipsis",
-		whiteSpace: "nowrap"
-	} }, t(e.content))), i && n("div", { style: {
-		fontSize: 11,
-		color: s.textMuted,
-		flexShrink: 0
-	} }, f(e.timestamp)));
-}
-function g({ items: u, maxItems: f = 100, height: p = 400, autoScroll: m = !0, showTimestamps: g = !0, onItemClick: _, emptyMessage: v = "No activity yet.", pauseOnHover: y = !0, renderItem: b }) {
-	let x = e();
-	d();
-	let S = o(null), [C, w] = s(0), [T, E] = s(!1), [D, O] = s(/* @__PURE__ */ new Set()), k = o([]), A = a(() => u.slice(-f), [u, f]), j = typeof p == "number" ? p : 400, M = A.length * c;
-	i(() => {
-		let e = new Set(k.current.map((e) => e.id)), t = A.filter((t) => !e.has(t.id)).map((e) => e.id);
-		if (t.length > 0) {
-			O((e) => {
-				let n = new Set(e);
-				return t.forEach((e) => n.add(e)), n;
-			});
-			let e = window.setTimeout(() => {
-				O((e) => {
-					let n = new Set(e);
-					return t.forEach((e) => n.delete(e)), n;
-				});
-			}, 400);
-			return () => clearTimeout(e);
-		}
-	}, [A]), i(() => {
-		k.current = A;
-	}, [A]);
-	let N = m && !(y && T);
-	i(() => {
-		if (!N || !S.current) return;
-		let e = S.current;
-		(e.scrollHeight - e.scrollTop - e.clientHeight < c * 3 || A.length <= 5) && (e.scrollTop = e.scrollHeight);
-	}, [A.length, N]);
-	let P = r(() => {
-		S.current && w(S.current.scrollTop);
-	}, []), F = Math.max(0, Math.floor(C / c) - l), I = Math.min(A.length - 1, Math.ceil((C + j) / c) + l), L = {
-		position: "relative",
-		overflow: "auto",
-		height: typeof p == "number" ? `${p}px` : p,
-		background: x.bg,
-		border: `1px solid ${x.border}`,
-		borderRadius: 8,
-		boxSizing: "border-box"
-	}, R = {
-		position: "relative",
-		height: M,
-		minHeight: "100%"
-	};
-	if (A.length === 0) return n("div", { style: {
-		...L,
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center"
-	} }, n("span", { style: {
-		color: x.textMuted,
-		fontSize: 14
-	} }, t(v)));
-	let z = [];
-	for (let e = F; e <= I; e++) {
-		let t = A[e];
-		t && z.push(n(h, {
-			key: t.id,
-			item: t,
-			isNew: D.has(t.id),
-			showTimestamps: g,
-			onItemClick: _,
-			renderItem: b,
-			theme: x,
-			style: {
-				position: "absolute",
-				top: e * c,
-				left: 0,
-				right: 0
-			}
-		}));
-	}
-	return n("div", {
-		ref: S,
-		style: L,
-		onScroll: P,
-		onMouseEnter: y ? () => E(!0) : void 0,
-		onMouseLeave: y ? () => E(!1) : void 0,
-		"aria-label": "Live feed",
-		role: "feed"
-	}, n("div", { style: R }, ...z));
-}
-//#endregion
-//#region src/components/TkxLiveMetrics.tsx
-var _ = !1;
-function v() {
-	if (_ || typeof document > "u") return;
-	_ = !0;
-	let e = document.createElement("style");
-	e.id = "tkx-live-metrics-styles", e.textContent = "@keyframes tkx-metric-pulse {\n  0%   { opacity: 1; }\n  40%  { opacity: 0.4; }\n  100% { opacity: 1; }\n}\n@keyframes tkx-metric-shimmer {\n  0%   { background-position: -200% 0; }\n  100% { background-position:  200% 0; }\n}\n.tkx-metric-shimmer {\n  animation: tkx-metric-shimmer 0.6s ease-in-out;\n}\n@media (prefers-reduced-motion: reduce) {\n  .tkx-metric-shimmer { animation: none; }\n  .tkx-metric-pulse   { animation: none; }\n}", document.head.appendChild(e);
-}
-function y(e, t) {
-	if (typeof e == "string") return e;
-	let n = e >= 1e6 ? `${(e / 1e6).toFixed(1)}M` : e >= 1e3 ? `${(e / 1e3).toFixed(1)}k` : String(Number.isInteger(e) ? e : e.toFixed(2));
-	return t ? `${n}${t}` : n;
-}
-function b(e, t) {
-	switch (e) {
-		case "warning": return t.warning;
-		case "critical": return t.danger;
-		default: return t.primary;
-	}
-}
-function x() {
-	let [e, t] = s(() => typeof window < "u" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : !1);
-	return i(() => {
-		if (typeof window > "u") return;
-		let e = window.matchMedia("(prefers-reduced-motion: reduce)"), n = (e) => t(e.matches);
-		return e.addEventListener("change", n), () => e.removeEventListener("change", n);
-	}, []), e;
-}
-function S(e, t, n) {
-	let [r, a] = s(e), c = o(e), l = o(null), u = o(null), d = x();
-	return i(() => {
-		if (!n || d) {
-			a(e), c.current = e;
-			return;
-		}
-		let r = c.current;
-		if (r === e) return;
-		l.current = null;
-		let i = (n) => {
-			l.current === null && (l.current = n);
-			let o = n - l.current, s = Math.min(o / t, 1), d = 1 - (1 - s) ** 3;
-			a(r + (e - r) * d), s < 1 ? u.current = requestAnimationFrame(i) : c.current = e;
-		};
-		return u.current = requestAnimationFrame(i), () => {
-			u.current !== null && cancelAnimationFrame(u.current);
-		};
-	}, [
-		e,
-		t,
-		n,
-		d
-	]), r;
-}
-function C({ data: e, color: t }) {
-	if (e.length < 2) return null;
-	let r = Math.min(...e), i = Math.max(...e) - r || 1;
-	return n("svg", {
-		width: 80,
-		height: 24,
-		viewBox: "0 0 80 24",
-		"aria-hidden": "true"
-	}, n("polyline", {
-		points: e.map((t, n) => {
-			let a = n / (e.length - 1) * 80, o = 24 - (t - r) / i * 22 - 1;
-			return `${a.toFixed(1)},${o.toFixed(1)}`;
-		}).join(" "),
-		fill: "none",
-		stroke: t,
-		strokeWidth: 1.5,
-		strokeLinejoin: "round",
-		strokeLinecap: "round"
-	}));
-}
-function w({ trend: e, theme: t }) {
-	return e === "up" ? n("span", { style: {
-		color: t.success,
-		fontSize: 14,
-		fontWeight: 700
-	} }, "▲") : e === "down" ? n("span", { style: {
-		color: t.danger,
-		fontSize: 14,
-		fontWeight: 700
-	} }, "▼") : n("span", { style: {
-		color: t.textMuted,
-		fontSize: 14
-	} }, "→");
-}
-function T({ metric: e, animate: r, onMetricClick: a, theme: c }) {
-	let l = e.color ?? b(e.status, c), u = typeof e.value == "number" ? e.value : NaN, d = S(isNaN(u) ? 0 : u, 600, r && !isNaN(u)), [f, p] = s(!1), m = o(e.value);
-	i(() => {
-		if (m.current !== e.value) {
-			m.current = e.value, p(!0);
-			let t = window.setTimeout(() => p(!1), 700);
-			return () => clearTimeout(t);
-		}
-	}, [e.value]);
-	let h = e.previousValue !== void 0 && e.previousValue !== u, g = {
-		background: c.surface,
-		border: `1px solid ${c.border}`,
-		borderLeft: `4px solid ${l}`,
-		borderRadius: 8,
-		padding: "14px 16px",
-		cursor: a ? "pointer" : "default",
-		position: "relative",
-		overflow: "hidden",
-		boxSizing: "border-box"
-	}, _ = f ? {
-		position: "absolute",
-		inset: 0,
-		background: `linear-gradient(90deg, transparent 0%, ${l}22 50%, transparent 100%)`,
-		backgroundSize: "200% 100%",
-		animation: "tkx-metric-shimmer 0.6s ease-in-out",
-		pointerEvents: "none"
-	} : {}, v = isNaN(u) ? t(String(e.value)) : y(d, e.unit);
-	return n("div", {
-		style: g,
-		className: f ? "tkx-metric-shimmer" : void 0,
-		onClick: a ? () => a(e) : void 0,
-		role: a ? "button" : void 0,
-		tabIndex: a ? 0 : void 0
-	}, f && n("div", { style: _ }), n("div", { style: {
-		fontSize: 12,
-		color: c.textMuted,
-		marginBottom: 6,
-		fontWeight: 500,
-		letterSpacing: "0.03em"
-	} }, t(e.label)), n("div", { style: {
-		display: "flex",
-		alignItems: "flex-end",
-		gap: 6,
-		marginBottom: 6
-	} }, n("span", { style: {
-		fontSize: 28,
-		fontWeight: 700,
-		color: c.text,
-		lineHeight: 1
-	} }, v), e.unit && isNaN(u) && n("span", { style: {
-		fontSize: 14,
-		color: c.textMuted,
-		marginBottom: 2
-	} }, t(e.unit))), (e.trend || e.trendValue) && n("div", { style: {
-		display: "flex",
-		alignItems: "center",
-		gap: 4,
-		marginBottom: e.sparkline ? 8 : 0
-	} }, e.trend && n(w, {
-		trend: e.trend,
-		theme: c
-	}), e.trendValue && n("span", { style: {
-		fontSize: 12,
-		color: c.textMuted
-	} }, t(e.trendValue))), h && n("div", { style: {
-		fontSize: 11,
-		color: c.textMuted,
-		marginTop: 2
-	} }, `was ${y(e.previousValue)}`), e.sparkline && e.sparkline.length >= 2 && n("div", { style: { marginTop: 8 } }, n(C, {
-		data: e.sparkline,
-		color: l
-	})));
-}
-function E({ metrics: t, columns: r = 3, animate: i = !0, onMetricClick: a }) {
-	let o = e();
-	return v(), n("div", { style: {
-		display: "grid",
-		gridTemplateColumns: `repeat(${r}, minmax(0, 1fr))`,
-		gap: 16
-	} }, ...t.map((e) => n(T, {
-		key: e.id,
-		metric: e,
-		animate: i,
-		onMetricClick: a,
-		theme: o
-	})));
-}
-//#endregion
-//#region src/components/TkxRealTimeChart.tsx
-function D(e) {
-	let t = new Date(e);
-	return `${String(t.getHours()).padStart(2, "0")}:${String(t.getMinutes()).padStart(2, "0")}:${String(t.getSeconds()).padStart(2, "0")}`;
-}
-function O(e) {
-	return Math.abs(e) >= 1e6 ? `${(e / 1e6).toFixed(1)}M` : Math.abs(e) >= 1e3 ? `${(e / 1e3).toFixed(1)}k` : Number.isInteger(e) ? String(e) : e.toFixed(2);
-}
-function k({ data: c, maxPoints: l = 60, height: u = 200, width: d = "100%", color: f, fill: p = !0, showGrid: m = !0, showLabels: h = !0, showTooltip: g = !0, label: _, unit: v, animate: y = !0, yMin: b, yMax: x }) {
-	let S = e(), C = f ?? S.primary, w = o(null), [T, E] = s(600), [k, A] = s(null), [j, M] = s(0), N = o(c.length);
-	i(() => {
-		if (!w.current) return;
-		let e = new ResizeObserver((e) => {
-			let t = e[0];
-			t && E(t.contentRect.width);
-		});
-		return e.observe(w.current), E(w.current.offsetWidth), () => e.disconnect();
-	}, []);
-	let P = a(() => c.slice(-l), [c, l]);
-	i(() => {
-		P.length > N.current && M((e) => e + 1), N.current = P.length;
-	}, [P.length]);
-	let F = h ? 48 : 12, I = _ ? 28 : 12, L = Math.max(T - F - 12, 1), R = Math.max(u - I - 28, 1), z = P.length ? Math.min(...P.map((e) => e.value)) : 0, B = P.length ? Math.max(...P.map((e) => e.value)) : 1, V = B - z || 1, H = b === void 0 ? z - V * .1 : b, U = (x === void 0 ? B + V * .1 : x) - H || 1;
-	function W(e) {
-		return P.length < 2 ? L / 2 : e / (P.length - 1) * L;
-	}
-	function G(e) {
-		return R - (e - H) / U * R;
-	}
-	let K = P.length >= 2 ? P.map((e, t) => `${t === 0 ? "M" : "L"}${W(t).toFixed(2)},${G(e.value).toFixed(2)}`).join(" ") : "", q = K ? `${K} L${W(P.length - 1).toFixed(2)},${R} L${W(0).toFixed(2)},${R} Z` : "", J = [];
-	for (let e = 0; e <= 4; e++) J.push(e);
-	let Y = J.map((e) => {
-		let t = H + e / 4 * U;
-		return {
-			y: G(t),
-			text: O(t)
-		};
-	}), X = Math.min(4, P.length), ee = X > 0 ? Array.from({ length: X }, (e, t) => Math.round(t / Math.max(X - 1, 1) * (P.length - 1))) : [], te = r((e) => {
-		if (!g || P.length === 0) return;
-		let t = e.currentTarget.getBoundingClientRect(), n = e.clientX - t.left - F, r = 0, i = Infinity;
-		P.forEach((e, t) => {
-			let a = Math.abs(W(t) - n);
-			a < i && (i = a, r = t);
-		});
-		let a = P[r];
-		a && A({
-			x: W(r) + F,
-			y: G(a.value) + I,
-			point: a
-		});
-	}, [
-		P,
-		g,
-		F,
-		I
-	]), ne = r(() => A(null), []), Z = T, Q = u, $ = `tkx-chart-clip-${j}`;
-	return n("div", {
-		ref: w,
-		style: {
-			position: "relative",
-			width: typeof d == "number" ? `${d}px` : d,
-			background: S.surface,
-			border: `1px solid ${S.border}`,
-			borderRadius: 8,
-			overflow: "hidden",
-			boxSizing: "border-box"
-		}
-	}, n("svg", {
-		width: Z,
-		height: Q,
-		viewBox: `0 0 ${Z} ${Q}`,
-		onMouseMove: te,
-		onMouseLeave: ne,
-		style: {
-			display: "block",
-			userSelect: "none"
-		},
-		"aria-label": _ ? t(_) : "Real-time chart"
-	}, y && P.length >= 2 && n("defs", null, n("clipPath", { id: $ }, n("rect", {
-		x: 0,
-		y: 0,
-		width: L,
-		height: Q
-	}, n("animate", {
-		attributeName: "width",
-		from: Math.max(0, L - L / Math.max(P.length - 1, 1)),
-		to: L,
-		dur: "0.3s",
-		fill: "freeze"
-	})))), _ && n("text", {
-		x: F,
-		y: 18,
-		fill: S.textMuted,
-		fontSize: 12,
-		fontWeight: 500
-	}, t(_)), m && J.map((e) => {
-		let t = G(H + e / 4 * U) + I;
-		return n("line", {
-			key: `grid-${e}`,
-			x1: F,
-			y1: t,
-			x2: F + L,
-			y2: t,
-			stroke: S.border,
-			strokeWidth: 1,
-			strokeDasharray: "4 4"
-		});
-	}), h && Y.map((e, t) => n("text", {
-		key: `yl-${t}`,
-		x: F - 4,
-		y: e.y + I + 4,
-		fill: S.textMuted,
-		fontSize: 10,
-		textAnchor: "end"
-	}, e.text)), v && n("text", {
-		x: 4,
-		y: I + 10,
-		fill: S.textMuted,
-		fontSize: 9
-	}, t(v)), p && q && n("path", {
-		d: q,
-		fill: `${C}22`,
-		clipPath: y ? `url(#${$})` : void 0,
-		transform: `translate(${F}, ${I})`
-	}), K && n("path", {
-		d: K,
-		fill: "none",
-		stroke: C,
-		strokeWidth: 2,
-		strokeLinejoin: "round",
-		strokeLinecap: "round",
-		clipPath: y ? `url(#${$})` : void 0,
-		transform: `translate(${F}, ${I})`
-	}), ee.map((e) => {
-		let t = P[e];
-		return t ? n("text", {
-			key: `xl-${e}`,
-			x: F + W(e),
-			y: Q - 8,
-			fill: S.textMuted,
-			fontSize: 9,
-			textAnchor: "middle"
-		}, D(t.timestamp)) : null;
-	}), k && n("line", {
-		x1: k.x,
-		y1: I,
-		x2: k.x,
-		y2: I + R,
-		stroke: C,
-		strokeWidth: 1,
-		strokeDasharray: "3 3",
-		opacity: .6
-	}), k && n("circle", {
-		cx: k.x,
-		cy: k.y,
-		r: 4,
-		fill: C,
-		stroke: S.surface,
-		strokeWidth: 2
-	}), k && (() => {
-		let e = Math.min(k.x + 8, Z - 100), t = Math.max(k.y - 36, 4), r = `${O(k.point.value)}${v || ""}`, i = D(k.point.timestamp);
-		return n("g", null, n("rect", {
-			x: e - 4,
-			y: t - 2,
-			width: 90,
-			height: 34,
-			rx: 4,
-			fill: S.surfaceAlt,
-			stroke: S.border,
-			strokeWidth: 1
-		}), n("text", {
-			x: e,
-			y: t + 11,
-			fill: S.text,
-			fontSize: 12,
-			fontWeight: 700
-		}, r), n("text", {
-			x: e,
-			y: t + 26,
-			fill: S.textMuted,
-			fontSize: 10
-		}, i));
-	})()));
-}
-//#endregion
-//#region src/components/TkxLiveLog.tsx
-var A = 28, j = 8, M = {
-	debug: 0,
-	info: 1,
-	warn: 2,
-	error: 3,
-	fatal: 4
-}, N = !1;
-function P() {
-	if (N || typeof document > "u") return;
-	N = !0;
-	let e = document.createElement("style");
-	e.id = "tkx-live-log-styles", e.textContent = ".tkx-log-row:hover { filter: brightness(1.12); }\n.tkx-log-highlight { background: #ffbe0b55; border-radius: 2px; padding: 0 1px; }", document.head.appendChild(e);
-}
-function F(e) {
-	let t = new Date(e);
-	return `${String(t.getHours()).padStart(2, "0")}:${String(t.getMinutes()).padStart(2, "0")}:${String(t.getSeconds()).padStart(2, "0")}.${String(t.getMilliseconds()).padStart(3, "0")}`;
-}
-function I(e, t) {
-	switch (e) {
-		case "debug": return t.textMuted;
-		case "info": return t.info;
-		case "warn": return t.warning;
-		case "error": return t.danger;
-		case "fatal": return t.danger;
-		default: return t.textMuted;
-	}
-}
-function L(e, t) {
-	return e === "fatal" ? `${t.danger}22` : "transparent";
-}
-function R(e) {
-	return `[${e.toUpperCase().padEnd(5)}]`;
-}
-function z(e, r) {
-	if (!r) return [e];
-	let i = t(e), a = t(r);
-	if (!a) return [i];
-	try {
-		let e = RegExp(`(${a.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
-		return i.split(e).map((t, r) => e.test(t) ? n("mark", {
-			key: r,
-			className: "tkx-log-highlight"
-		}, t) : t);
-	} catch {
-		return [i];
-	}
-}
-function B({ entry: e, showLevel: r, showTimestamp: i, showSource: a, searchQuery: o, monospace: s, isExpanded: c, onToggle: l, onEntryClick: u, theme: d, style: f }) {
-	let p = I(e.level, d), m = L(e.level, d), h = e.metadata && Object.keys(e.metadata).length > 0;
-	return n("div", {
-		style: {
-			...f,
-			display: "flex",
-			alignItems: "center",
-			gap: 6,
-			padding: "0 10px",
-			fontSize: 12,
-			fontFamily: s ? "\"JetBrains Mono\", \"Fira Mono\", Consolas, monospace" : "inherit",
-			cursor: h || u ? "pointer" : "default",
-			background: m,
-			boxSizing: "border-box",
-			height: A,
-			overflow: "hidden",
-			whiteSpace: "nowrap",
-			borderBottom: `1px solid ${d.border}22`
-		},
-		className: "tkx-log-row",
-		onClick: () => {
-			h && l(), u && u(e);
-		},
-		role: h ? "button" : void 0,
-		tabIndex: h ? 0 : void 0,
-		onKeyDown: h ? (e) => {
-			(e.key === "Enter" || e.key === " ") && l();
-		} : void 0,
-		"aria-expanded": h ? c : void 0
-	}, i && n("span", { style: {
-		color: d.textMuted,
-		flexShrink: 0,
-		minWidth: 84
-	} }, F(e.timestamp)), r && n("span", { style: {
-		color: p,
-		flexShrink: 0,
-		fontWeight: e.level === "fatal" ? 700 : 500,
-		minWidth: 56
-	} }, R(e.level)), a && e.source && n("span", { style: {
-		background: d.surfaceAlt,
-		border: `1px solid ${d.border}`,
-		borderRadius: 10,
-		padding: "0 5px",
-		fontSize: 10,
-		color: d.textMuted,
-		flexShrink: 0,
-		maxWidth: 80,
-		overflow: "hidden",
-		textOverflow: "ellipsis"
-	} }, t(e.source)), n("span", { style: {
-		flex: 1,
-		color: d.text,
-		overflow: "hidden",
-		textOverflow: "ellipsis"
-	} }, ...z(e.message, o)), h && n("span", { style: {
-		color: d.textMuted,
-		fontSize: 10,
-		flexShrink: 0
-	} }, c ? "▲" : "▼"));
-}
-function V({ metadata: e, theme: r, style: i }) {
-	return n("div", { style: {
-		...i,
-		background: r.surfaceAlt,
-		borderBottom: `1px solid ${r.border}`,
-		padding: "6px 10px 6px 56px",
-		display: "flex",
-		flexWrap: "wrap",
-		gap: 6,
-		boxSizing: "border-box"
-	} }, ...Object.entries(e).map(([e, i]) => n("span", {
-		key: e,
-		style: {
-			fontSize: 11,
-			fontFamily: "monospace",
-			color: r.textMuted,
-			background: r.surface,
-			border: `1px solid ${r.border}`,
-			borderRadius: 4,
-			padding: "1px 6px"
-		}
-	}, n("span", { style: { color: r.info } }, `${t(e)}: `), t(String(i)))));
-}
-function H({ entries: t, maxEntries: c = 500, height: l = 400, autoScroll: u = !0, showLevel: d = !0, showTimestamp: f = !0, showSource: p = !0, filterLevel: m, searchQuery: h = "", monospace: g = !0, onEntryClick: _ }) {
-	let v = e();
-	P();
-	let y = o(null), [b, x] = s(0), [S, C] = s(/* @__PURE__ */ new Set()), [w, T] = s(!1), E = o(t.length), D = a(() => {
-		let e = t.slice(-c);
-		if (m !== void 0) {
-			let t = M[m];
-			e = e.filter((e) => M[e.level] >= t);
-		}
-		if (h) {
-			let t = h.toLowerCase();
-			e = e.filter((e) => e.message.toLowerCase().includes(t) || (e.source ?? "").toLowerCase().includes(t));
-		}
-		return e;
-	}, [
-		t,
-		c,
-		m,
-		h
-	]), O = typeof l == "number" ? l : 400, k = a(() => {
-		let e = [], t = 0;
-		for (let n of D) e.push(t), t += A + (S.has(n.id) ? 40 : 0);
-		return e.push(t), e;
-	}, [D, S]), N = k[k.length - 1] ?? 0;
-	i(() => {
-		!u || w || D.length !== E.current && (E.current = D.length, y.current && (y.current.scrollTop = y.current.scrollHeight));
-	}, [
-		D.length,
-		u,
-		w
-	]);
-	let F = r(() => {
-		if (!y.current) return;
-		let e = y.current;
-		T(!(e.scrollHeight - e.scrollTop - e.clientHeight < A * 2)), x(e.scrollTop);
-	}, []), I = r((e) => {
-		C((t) => {
-			let n = new Set(t);
-			return n.has(e) ? n.delete(e) : n.add(e), n;
-		});
-	}, []);
-	function L(e) {
-		let t = 0, n = D.length - 1;
-		for (; t < n;) {
-			let r = t + n >> 1;
-			(k[r + 1] ?? 0) <= e ? t = r + 1 : n = r;
-		}
-		return Math.max(0, t - j);
-	}
-	function R(e) {
-		let t = 0, n = D.length - 1;
-		for (; t < n;) {
-			let r = t + n + 1 >> 1;
-			(k[r] ?? 0) >= e + O ? n = r - 1 : t = r;
-		}
-		return Math.min(D.length - 1, t + j);
-	}
-	let z = D.length > 0 ? L(b) : 0, H = D.length > 0 ? R(b) : -1, U = {
-		position: "relative",
-		overflow: "auto",
-		height: typeof l == "number" ? `${l}px` : l,
-		background: v.bg,
-		border: `1px solid ${v.border}`,
-		borderRadius: 8,
-		boxSizing: "border-box"
-	}, W = {
-		position: "relative",
-		height: N,
-		minHeight: "100%"
-	};
-	if (D.length === 0) return n("div", { style: {
-		...U,
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center"
-	} }, n("span", { style: {
-		color: v.textMuted,
-		fontSize: 13,
-		fontFamily: "monospace"
-	} }, "No log entries."));
-	let G = [];
-	for (let e = z; e <= H; e++) {
-		let t = D[e];
-		if (!t) continue;
-		let r = k[e] ?? 0, i = S.has(t.id);
-		G.push(n(B, {
-			key: t.id,
-			entry: t,
-			showLevel: d,
-			showTimestamp: f,
-			showSource: p,
-			searchQuery: h,
-			monospace: g,
-			isExpanded: i,
-			onToggle: () => I(t.id),
-			onEntryClick: _,
-			theme: v,
-			style: {
-				position: "absolute",
-				top: r,
-				left: 0,
-				right: 0
-			}
-		})), i && t.metadata && Object.keys(t.metadata).length > 0 && G.push(n(V, {
-			key: `${t.id}-meta`,
-			metadata: t.metadata,
-			theme: v,
-			style: {
-				position: "absolute",
-				top: r + A,
-				left: 0,
-				right: 0,
-				height: 40
-			}
-		}));
-	}
-	return n("div", {
-		ref: y,
-		style: U,
-		onScroll: F,
-		role: "log",
-		"aria-live": "polite",
-		"aria-label": "Log viewer"
-	}, n("div", { style: W }, ...G));
-}
-//#endregion
-export { g as TkxLiveFeed, H as TkxLiveLog, E as TkxLiveMetrics, k as TkxRealTimeChart };
+import{f as e}from"./chunk-PJ50l0JC.js";import{E as t}from"./chunk-DnCXUUx5.js";import{createElement as n,useCallback as o,useEffect as i,useMemo as r,useRef as s,useState as a}from"react";var l=!1;function c({item:e,isNew:o,showTimestamps:i,onItemClick:r,renderItem:s,theme:a,style:l}){const c=function(e,t){switch(e){case"info":return t.info;case"success":return t.success;case"warning":return t.warning;case"error":return t.danger;default:return t.border}}(e.type,a);return s?n("div",{style:l,className:o?"tkx-feed-item-new":void 0},s(e)):n("div",{style:{...l,display:"flex",alignItems:"center",gap:10,padding:"0 12px",borderLeft:`3px solid ${c}`,cursor:r?"pointer":"default",boxSizing:"border-box",height:64,background:a.surface,transition:"background 0.15s"},className:o?"tkx-feed-item-new":void 0,onClick:r?()=>r(e):void 0,role:r?"button":void 0,tabIndex:r?0:void 0,onKeyDown:r?t=>{"Enter"!==t.key&&" "!==t.key||r(e)}:void 0},n("div",{style:{width:36,height:36,borderRadius:"50%",background:c,display:"flex",alignItems:"center",justifyContent:"center",fontSize:13,fontWeight:700,color:a.bg,flexShrink:0,overflow:"hidden"}},e.avatar?n("img",{src:e.avatar,alt:e.author??"",style:{width:"100%",height:"100%",objectFit:"cover"}}):(d=e.author)?d.split(" ").map(e=>e[0]??"").slice(0,2).join("").toUpperCase():"?"),n("div",{style:{flex:1,minWidth:0}},n("div",{style:{display:"flex",alignItems:"center",gap:6,marginBottom:2}},e.author&&n("span",{style:{fontWeight:600,fontSize:13,color:a.text}},t(e.author)),e.meta&&n("span",{style:{fontSize:11,color:a.textMuted,background:a.surfaceAlt,borderRadius:4,padding:"1px 5px"}},t(e.meta))),n("div",{style:{fontSize:13,color:a.text,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},t(e.content))),i&&n("div",{style:{fontSize:11,color:a.textMuted,flexShrink:0}},function(e){const t=Date.now()-e;return t<1e4?"just now":t<6e4?`${Math.floor(t/1e3)}s ago`:t<36e5?`${Math.floor(t/6e4)}m ago`:t<864e5?`${Math.floor(t/36e5)}h ago`:`${Math.floor(t/864e5)}d ago`}(e.timestamp)));var d}function d({items:d,maxItems:u=100,height:f=400,autoScroll:h=!0,showTimestamps:m=!0,onItemClick:p,emptyMessage:g="No activity yet.",pauseOnHover:y=!0,renderItem:x}){const b=e();!function(){if(l||"undefined"==typeof document)return;l=!0;const e=document.createElement("style");e.id="tkx-live-feed-styles",e.textContent="\n@keyframes tkx-feed-slide-in {\n  from { transform: translateY(-20px); opacity: 0; }\n  to   { transform: translateY(0);     opacity: 1; }\n}\n.tkx-feed-item-new {\n  animation: tkx-feed-slide-in 0.25s ease-out both;\n}\n  ".trim(),document.head.appendChild(e)}();const k=s(null),[v,w]=a(0),[S,$]=a(!1),[M,z]=a(/* @__PURE__ */new Set),N=s([]),W=r(()=>d.slice(-u),[d,u]),I="number"==typeof f?f:400,L=64*W.length;i(()=>{const e=new Set(N.current.map(e=>e.id)),t=W.filter(t=>!e.has(t.id)).map(e=>e.id);if(t.length>0){z(e=>{const n=new Set(e);return t.forEach(e=>n.add(e)),n});const e=window.setTimeout(()=>{z(e=>{const n=new Set(e);return t.forEach(e=>n.delete(e)),n})},400);return()=>clearTimeout(e)}},[W]),i(()=>{N.current=W},[W]);const C=h&&!(y&&S);i(()=>{if(!C||!k.current)return;const e=k.current;(e.scrollHeight-e.scrollTop-e.clientHeight<192||W.length<=5)&&(e.scrollTop=e.scrollHeight)},[W.length,C]);const T=o(()=>{k.current&&w(k.current.scrollTop)},[]),j=Math.max(0,Math.floor(v/64)-5),E=Math.min(W.length-1,Math.ceil((v+I)/64)+5),R={position:"relative",overflow:"auto",height:"number"==typeof f?`${f}px`:f,background:b.bg,border:`1px solid ${b.border}`,borderRadius:8,boxSizing:"border-box"},B={position:"relative",height:L,minHeight:"100%"};if(0===W.length)return n("div",{style:{...R,display:"flex",alignItems:"center",justifyContent:"center"}},n("span",{style:{color:b.textMuted,fontSize:14}},t(g)));const F=[];for(let e=j;e<=E;e++){const t=W[e];t&&F.push(n(c,{key:t.id,item:t,isNew:M.has(t.id),showTimestamps:m,onItemClick:p,renderItem:x,theme:b,style:{position:"absolute",top:64*e,left:0,right:0}}))}return n("div",{ref:k,style:R,onScroll:T,onMouseEnter:y?()=>$(!0):void 0,onMouseLeave:y?()=>$(!1):void 0,"aria-label":"Live feed",role:"feed"},n("div",{style:B},...F))}var u=!1;function f(e,t){if("string"==typeof e)return e;const n=e>=1e6?`${(e/1e6).toFixed(1)}M`:e>=1e3?`${(e/1e3).toFixed(1)}k`:String(Number.isInteger(e)?e:e.toFixed(2));return t?`${n}${t}`:n}function h({data:e,color:t}){if(e.length<2)return null;const o=Math.min(...e),i=Math.max(...e)-o||1,r=e.map((t,n)=>{const r=n/(e.length-1)*80,s=24-(t-o)/i*22-1;return`${r.toFixed(1)},${s.toFixed(1)}`});return n("svg",{width:80,height:24,viewBox:"0 0 80 24","aria-hidden":"true"},n("polyline",{points:r.join(" "),fill:"none",stroke:t,strokeWidth:1.5,strokeLinejoin:"round",strokeLinecap:"round"}))}function m({trend:e,theme:t}){return"up"===e?n("span",{style:{color:t.success,fontSize:14,fontWeight:700}},"▲"):"down"===e?n("span",{style:{color:t.danger,fontSize:14,fontWeight:700}},"▼"):n("span",{style:{color:t.textMuted,fontSize:14}},"→")}function p({metric:e,animate:o,onMetricClick:r,theme:l}){const c=e.color??function(e,t){switch(e){case"warning":return t.warning;case"critical":return t.danger;default:return t.primary}}(e.status,l),d="number"==typeof e.value?e.value:NaN,u=function(e,t,n){const[o,r]=a(e),l=s(e),c=s(null),d=s(null),u=function(){const[e,t]=a(()=>"undefined"!=typeof window&&window.matchMedia("(prefers-reduced-motion: reduce)").matches);return i(()=>{if("undefined"==typeof window)return;const e=window.matchMedia("(prefers-reduced-motion: reduce)"),n=e=>t(e.matches);return e.addEventListener("change",n),()=>e.removeEventListener("change",n)},[]),e}();return i(()=>{if(!n||u)return r(e),void(l.current=e);const t=l.current;if(t===e)return;c.current=null;const o=n=>{null===c.current&&(c.current=n);const i=n-c.current,s=Math.min(i/600,1),a=1-Math.pow(1-s,3);r(t+(e-t)*a),s<1?d.current=requestAnimationFrame(o):l.current=e};return d.current=requestAnimationFrame(o),()=>{null!==d.current&&cancelAnimationFrame(d.current)}},[e,600,n,u]),o}(isNaN(d)?0:d,0,o&&!isNaN(d)),[p,g]=a(!1),y=s(e.value);i(()=>{if(y.current!==e.value){y.current=e.value,g(!0);const t=window.setTimeout(()=>g(!1),700);return()=>clearTimeout(t)}},[e.value]);const x=void 0!==e.previousValue&&e.previousValue!==d,b={background:l.surface,border:`1px solid ${l.border}`,borderLeft:`4px solid ${c}`,borderRadius:8,padding:"14px 16px",cursor:r?"pointer":"default",position:"relative",overflow:"hidden",boxSizing:"border-box"},k=p?{position:"absolute",inset:0,background:`linear-gradient(90deg, transparent 0%, ${c}22 50%, transparent 100%)`,backgroundSize:"200% 100%",animation:"tkx-metric-shimmer 0.6s ease-in-out",pointerEvents:"none"}:{},v=isNaN(d)?t(String(e.value)):f(u,e.unit);return n("div",{style:b,className:p?"tkx-metric-shimmer":void 0,onClick:r?()=>r(e):void 0,role:r?"button":void 0,tabIndex:r?0:void 0},p&&n("div",{style:k}),n("div",{style:{fontSize:12,color:l.textMuted,marginBottom:6,fontWeight:500,letterSpacing:"0.03em"}},t(e.label)),n("div",{style:{display:"flex",alignItems:"flex-end",gap:6,marginBottom:6}},n("span",{style:{fontSize:28,fontWeight:700,color:l.text,lineHeight:1}},v),e.unit&&isNaN(d)&&n("span",{style:{fontSize:14,color:l.textMuted,marginBottom:2}},t(e.unit))),(e.trend||e.trendValue)&&n("div",{style:{display:"flex",alignItems:"center",gap:4,marginBottom:e.sparkline?8:0}},e.trend&&n(m,{trend:e.trend,theme:l}),e.trendValue&&n("span",{style:{fontSize:12,color:l.textMuted}},t(e.trendValue))),x&&n("div",{style:{fontSize:11,color:l.textMuted,marginTop:2}},`was ${f(e.previousValue)}`),e.sparkline&&e.sparkline.length>=2&&n("div",{style:{marginTop:8}},n(h,{data:e.sparkline,color:c})))}function g({metrics:t,columns:o=3,animate:i=!0,onMetricClick:r}){const s=e();return function(){if(u||"undefined"==typeof document)return;u=!0;const e=document.createElement("style");e.id="tkx-live-metrics-styles",e.textContent="\n@keyframes tkx-metric-pulse {\n  0%   { opacity: 1; }\n  40%  { opacity: 0.4; }\n  100% { opacity: 1; }\n}\n@keyframes tkx-metric-shimmer {\n  0%   { background-position: -200% 0; }\n  100% { background-position:  200% 0; }\n}\n.tkx-metric-shimmer {\n  animation: tkx-metric-shimmer 0.6s ease-in-out;\n}\n@media (prefers-reduced-motion: reduce) {\n  .tkx-metric-shimmer { animation: none; }\n  .tkx-metric-pulse   { animation: none; }\n}\n  ".trim(),document.head.appendChild(e)}(),n("div",{style:{display:"grid",gridTemplateColumns:`repeat(${o}, minmax(0, 1fr))`,gap:16}},...t.map(e=>n(p,{key:e.id,metric:e,animate:i,onMetricClick:r,theme:s})))}function y(e){const t=new Date(e);return`${String(t.getHours()).padStart(2,"0")}:${String(t.getMinutes()).padStart(2,"0")}:${String(t.getSeconds()).padStart(2,"0")}`}function x(e){return Math.abs(e)>=1e6?`${(e/1e6).toFixed(1)}M`:Math.abs(e)>=1e3?`${(e/1e3).toFixed(1)}k`:Number.isInteger(e)?String(e):e.toFixed(2)}function b({data:l,maxPoints:c=60,height:d=200,width:u="100%",color:f,fill:h=!0,showGrid:m=!0,showLabels:p=!0,showTooltip:g=!0,label:b,unit:k,animate:v=!0,yMin:w,yMax:S}){const $=e(),M=f??$.primary,z=s(null),[N,W]=a(600),[I,L]=a(null),[C,T]=a(0),j=s(l.length);i(()=>{if(!z.current)return;const e=new ResizeObserver(e=>{const t=e[0];t&&W(t.contentRect.width)});return e.observe(z.current),W(z.current.offsetWidth),()=>e.disconnect()},[]);const E=r(()=>l.slice(-c),[l,c]);i(()=>{E.length>j.current&&T(e=>e+1),j.current=E.length},[E.length]);const R=p?48:12,B=b?28:12,F=Math.max(N-R-12,1),O=Math.max(d-B-28,1),D=E.length?Math.min(...E.map(e=>e.value)):0,A=E.length?Math.max(...E.map(e=>e.value)):1,H=A-D||1,P=void 0!==w?w:D-.1*H,Q=(void 0!==S?S:A+.1*H)-P||1;function q(e){return E.length<2?F/2:e/(E.length-1)*F}function K(e){return O-(e-P)/Q*O}const Y=E.length>=2?E.map((e,t)=>`${0===t?"M":"L"}${q(t).toFixed(2)},${K(e.value).toFixed(2)}`).join(" "):"",G=Y?`${Y} L${q(E.length-1).toFixed(2)},${O} L${q(0).toFixed(2)},${O} Z`:"",J=[];for(let e=0;e<=4;e++)J.push(e);const Z=J.map(e=>{const t=P+e/4*Q;return{y:K(t),text:x(t)}}),U=Math.min(4,E.length),V=U>0?Array.from({length:U},(e,t)=>Math.round(t/Math.max(U-1,1)*(E.length-1))):[],X=o(e=>{if(!g||0===E.length)return;const t=e.currentTarget.getBoundingClientRect(),n=e.clientX-t.left-R;let o=0,i=1/0;E.forEach((e,t)=>{const r=Math.abs(q(t)-n);r<i&&(i=r,o=t)});const r=E[o];r&&L({x:q(o)+R,y:K(r.value)+B,point:r})},[E,g,R,B]),_=o(()=>L(null),[]),ee=N,te=d,ne=`tkx-chart-clip-${C}`;return n("div",{ref:z,style:{position:"relative",width:"number"==typeof u?`${u}px`:u,background:$.surface,border:`1px solid ${$.border}`,borderRadius:8,overflow:"hidden",boxSizing:"border-box"}},n("svg",{width:ee,height:te,viewBox:`0 0 ${ee} ${te}`,onMouseMove:X,onMouseLeave:_,style:{display:"block",userSelect:"none"},"aria-label":b?t(b):"Real-time chart"},v&&E.length>=2&&n("defs",null,n("clipPath",{id:ne},n("rect",{x:0,y:0,width:F,height:te},n("animate",{attributeName:"width",from:Math.max(0,F-F/Math.max(E.length-1,1)),to:F,dur:"0.3s",fill:"freeze"})))),b&&n("text",{x:R,y:18,fill:$.textMuted,fontSize:12,fontWeight:500},t(b)),m&&J.map(e=>{const t=K(P+e/4*Q)+B;return n("line",{key:`grid-${e}`,x1:R,y1:t,x2:R+F,y2:t,stroke:$.border,strokeWidth:1,strokeDasharray:"4 4"})}),p&&Z.map((e,t)=>n("text",{key:`yl-${t}`,x:R-4,y:e.y+B+4,fill:$.textMuted,fontSize:10,textAnchor:"end"},e.text)),k&&n("text",{x:4,y:B+10,fill:$.textMuted,fontSize:9},t(k)),h&&G&&n("path",{d:G,fill:`${M}22`,clipPath:v?`url(#${ne})`:void 0,transform:`translate(${R}, ${B})`}),Y&&n("path",{d:Y,fill:"none",stroke:M,strokeWidth:2,strokeLinejoin:"round",strokeLinecap:"round",clipPath:v?`url(#${ne})`:void 0,transform:`translate(${R}, ${B})`}),V.map(e=>{const t=E[e];return t?n("text",{key:`xl-${e}`,x:R+q(e),y:te-8,fill:$.textMuted,fontSize:9,textAnchor:"middle"},y(t.timestamp)):null}),I&&n("line",{x1:I.x,y1:B,x2:I.x,y2:B+O,stroke:M,strokeWidth:1,strokeDasharray:"3 3",opacity:.6}),I&&n("circle",{cx:I.x,cy:I.y,r:4,fill:M,stroke:$.surface,strokeWidth:2}),I&&(()=>{const e=Math.min(I.x+8,ee-100),t=Math.max(I.y-36,4),o=`${x(I.point.value)}${k||""}`,i=y(I.point.timestamp);return n("g",null,n("rect",{x:e-4,y:t-2,width:90,height:34,rx:4,fill:$.surfaceAlt,stroke:$.border,strokeWidth:1}),n("text",{x:e,y:t+11,fill:$.text,fontSize:12,fontWeight:700},o),n("text",{x:e,y:t+26,fill:$.textMuted,fontSize:10},i))})()))}var k={debug:0,info:1,warn:2,error:3,fatal:4},v=!1;function w({entry:e,showLevel:o,showTimestamp:i,showSource:r,searchQuery:s,monospace:a,isExpanded:l,onToggle:c,onEntryClick:d,theme:u,style:f}){const h=function(e,t){switch(e){case"debug":default:return t.textMuted;case"info":return t.info;case"warn":return t.warning;case"error":case"fatal":return t.danger}}(e.level,u),m=function(e,t){return"fatal"===e?`${t.danger}22`:"transparent"}(e.level,u),p=e.metadata&&Object.keys(e.metadata).length>0,g={...f,display:"flex",alignItems:"center",gap:6,padding:"0 10px",fontSize:12,fontFamily:a?'"JetBrains Mono", "Fira Mono", Consolas, monospace':"inherit",cursor:p||d?"pointer":"default",background:m,boxSizing:"border-box",height:28,overflow:"hidden",whiteSpace:"nowrap",borderBottom:`1px solid ${u.border}22`};return n("div",{style:g,className:"tkx-log-row",onClick:()=>{p&&c(),d&&d(e)},role:p?"button":void 0,tabIndex:p?0:void 0,onKeyDown:p?e=>{"Enter"!==e.key&&" "!==e.key||c()}:void 0,"aria-expanded":p?l:void 0},i&&n("span",{style:{color:u.textMuted,flexShrink:0,minWidth:84}},function(e){const t=new Date(e);return`${String(t.getHours()).padStart(2,"0")}:${String(t.getMinutes()).padStart(2,"0")}:${String(t.getSeconds()).padStart(2,"0")}.${String(t.getMilliseconds()).padStart(3,"0")}`}(e.timestamp)),o&&n("span",{style:{color:h,flexShrink:0,fontWeight:"fatal"===e.level?700:500,minWidth:56}},`[${e.level.toUpperCase().padEnd(5)}]`),r&&e.source&&n("span",{style:{background:u.surfaceAlt,border:`1px solid ${u.border}`,borderRadius:10,padding:"0 5px",fontSize:10,color:u.textMuted,flexShrink:0,maxWidth:80,overflow:"hidden",textOverflow:"ellipsis"}},t(e.source)),n("span",{style:{flex:1,color:u.text,overflow:"hidden",textOverflow:"ellipsis"}},...function(e,o){if(!o)return[e];const i=t(e),r=t(o);if(!r)return[i];try{const e=new RegExp(`(${r.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")})`,"gi");return i.split(e).map((t,o)=>e.test(t)?n("mark",{key:o,className:"tkx-log-highlight"},t):t)}catch{return[i]}}(e.message,s)),p&&n("span",{style:{color:u.textMuted,fontSize:10,flexShrink:0}},l?"▲":"▼"))}function S({metadata:e,theme:o,style:i}){return n("div",{style:{...i,background:o.surfaceAlt,borderBottom:`1px solid ${o.border}`,padding:"6px 10px 6px 56px",display:"flex",flexWrap:"wrap",gap:6,boxSizing:"border-box"}},...Object.entries(e).map(([e,i])=>n("span",{key:e,style:{fontSize:11,fontFamily:"monospace",color:o.textMuted,background:o.surface,border:`1px solid ${o.border}`,borderRadius:4,padding:"1px 6px"}},n("span",{style:{color:o.info}},`${t(e)}: `),t(String(i)))))}function $({entries:t,maxEntries:l=500,height:c=400,autoScroll:d=!0,showLevel:u=!0,showTimestamp:f=!0,showSource:h=!0,filterLevel:m,searchQuery:p="",monospace:g=!0,onEntryClick:y}){const x=e();!function(){if(v||"undefined"==typeof document)return;v=!0;const e=document.createElement("style");e.id="tkx-live-log-styles",e.textContent="\n.tkx-log-row:hover { filter: brightness(1.12); }\n.tkx-log-highlight { background: #ffbe0b55; border-radius: 2px; padding: 0 1px; }\n  ".trim(),document.head.appendChild(e)}();const b=s(null),[$,M]=a(0),[z,N]=a(/* @__PURE__ */new Set),[W,I]=a(!1),L=s(t.length),C=r(()=>{let e=t.slice(-l);if(void 0!==m){const t=k[m];e=e.filter(e=>k[e.level]>=t)}if(p){const t=p.toLowerCase();e=e.filter(e=>e.message.toLowerCase().includes(t)||(e.source??"").toLowerCase().includes(t))}return e},[t,l,m,p]),T="number"==typeof c?c:400,j=r(()=>{const e=[];let t=0;for(const n of C)e.push(t),t+=28+(z.has(n.id)?40:0);return e.push(t),e},[C,z]),E=j[j.length-1]??0;i(()=>{d&&!W&&C.length!==L.current&&(L.current=C.length,b.current&&(b.current.scrollTop=b.current.scrollHeight))},[C.length,d,W]);const R=o(()=>{if(!b.current)return;const e=b.current;I(!(e.scrollHeight-e.scrollTop-e.clientHeight<56)),M(e.scrollTop)},[]),B=o(e=>{N(t=>{const n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},[]),F=C.length>0?function(e){let t=0,n=C.length-1;for(;t<n;){const o=t+n>>1;(j[o+1]??0)<=e?t=o+1:n=o}return Math.max(0,t-8)}($):0,O=C.length>0?function(e){let t=0,n=C.length-1;for(;t<n;){const o=t+n+1>>1;(j[o]??0)>=e+T?n=o-1:t=o}return Math.min(C.length-1,t+8)}($):-1,D={position:"relative",overflow:"auto",height:"number"==typeof c?`${c}px`:c,background:x.bg,border:`1px solid ${x.border}`,borderRadius:8,boxSizing:"border-box"},A={position:"relative",height:E,minHeight:"100%"};if(0===C.length)return n("div",{style:{...D,display:"flex",alignItems:"center",justifyContent:"center"}},n("span",{style:{color:x.textMuted,fontSize:13,fontFamily:"monospace"}},"No log entries."));const H=[];for(let e=F;e<=O;e++){const t=C[e];if(!t)continue;const o=j[e]??0,i=z.has(t.id);H.push(n(w,{key:t.id,entry:t,showLevel:u,showTimestamp:f,showSource:h,searchQuery:p,monospace:g,isExpanded:i,onToggle:()=>B(t.id),onEntryClick:y,theme:x,style:{position:"absolute",top:o,left:0,right:0}})),i&&t.metadata&&Object.keys(t.metadata).length>0&&H.push(n(S,{key:`${t.id}-meta`,metadata:t.metadata,theme:x,style:{position:"absolute",top:o+28,left:0,right:0,height:40}}))}return n("div",{ref:b,style:D,onScroll:R,role:"log","aria-live":"polite","aria-label":"Log viewer"},n("div",{style:A},...H))}export{d as TkxLiveFeed,$ as TkxLiveLog,g as TkxLiveMetrics,b as TkxRealTimeChart};