tekivex-ui 2.5.10 → 2.5.12

package/dist/realtime.js

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