tekivex-ui 2.5.2 → 2.5.3

package/dist/realtime.js

@@ -0,0 +1,944 @@
+import { useRef as D, useState as C, useMemo as Q, useEffect as V, useCallback as K, createElement as n } from "react";
+import { u as tt } from "./index-eT_U4qB2.js";
+import { s as z } from "./security-CzAmaMqa.js";
+const _ = 64, ut = 5;
+let ft = !1;
+function It() {
+  if (ft || typeof document > "u") return;
+  ft = !0;
+  const t = document.createElement("style");
+  t.id = "tkx-live-feed-styles", t.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(t);
+}
+function zt(t) {
+  const e = Date.now() - t;
+  return e < 1e4 ? "just now" : e < 6e4 ? `${Math.floor(e / 1e3)}s ago` : e < 36e5 ? `${Math.floor(e / 6e4)}m ago` : e < 864e5 ? `${Math.floor(e / 36e5)}h ago` : `${Math.floor(e / 864e5)}d ago`;
+}
+function Lt(t, e) {
+  switch (t) {
+    case "info":
+      return e.info;
+    case "success":
+      return e.success;
+    case "warning":
+      return e.warning;
+    case "error":
+      return e.danger;
+    default:
+      return e.border;
+  }
+}
+function Rt(t) {
+  return t ? t.split(" ").map((e) => e[0] ?? "").slice(0, 2).join("").toUpperCase() : "?";
+}
+function Nt({ item: t, isNew: e, showTimestamps: o, onItemClick: r, renderItem: c, theme: s, style: f }) {
+  const u = Lt(t.type, s);
+  if (c)
+    return n("div", { style: f, className: e ? "tkx-feed-item-new" : void 0 }, c(t));
+  const x = {
+    ...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: x,
+      className: e ? "tkx-feed-item-new" : void 0,
+      onClick: r ? () => r(t) : void 0,
+      role: r ? "button" : void 0,
+      tabIndex: r ? 0 : void 0,
+      onKeyDown: r ? (a) => {
+        (a.key === "Enter" || a.key === " ") && r(t);
+      } : 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"
+        }
+      },
+      t.avatar ? n("img", { src: t.avatar, alt: t.author ?? "", style: { width: "100%", height: "100%", objectFit: "cover" } }) : Rt(t.author)
+    ),
+    // Body
+    n(
+      "div",
+      { style: { flex: 1, minWidth: 0 } },
+      n(
+        "div",
+        { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 2 } },
+        t.author && n("span", { style: { fontWeight: 600, fontSize: 13, color: s.text } }, z(t.author)),
+        t.meta && n("span", { style: { fontSize: 11, color: s.textMuted, background: s.surfaceAlt, borderRadius: 4, padding: "1px 5px" } }, z(t.meta))
+      ),
+      n(
+        "div",
+        { style: { fontSize: 13, color: s.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } },
+        z(t.content)
+      )
+    ),
+    // Timestamp
+    o && n(
+      "div",
+      { style: { fontSize: 11, color: s.textMuted, flexShrink: 0 } },
+      zt(t.timestamp)
+    )
+  );
+}
+function qt({
+  items: t,
+  maxItems: e = 100,
+  height: o = 400,
+  autoScroll: r = !0,
+  showTimestamps: c = !0,
+  onItemClick: s,
+  emptyMessage: f = "No activity yet.",
+  pauseOnHover: u = !0,
+  renderItem: x
+}) {
+  const a = tt();
+  It();
+  const m = D(null), [v, k] = C(0), [b, y] = C(!1), [W, E] = C(/* @__PURE__ */ new Set()), B = D([]), L = Q(
+    () => t.slice(-e),
+    [t, e]
+  ), $ = typeof o == "number" ? o : 400, w = L.length * _;
+  V(() => {
+    const I = new Set(B.current.map((N) => N.id)), S = L.filter((N) => !I.has(N.id)).map((N) => N.id);
+    if (S.length > 0) {
+      E((j) => {
+        const F = new Set(j);
+        return S.forEach((A) => F.add(A)), F;
+      });
+      const N = window.setTimeout(() => {
+        E((j) => {
+          const F = new Set(j);
+          return S.forEach((A) => F.delete(A)), F;
+        });
+      }, 400);
+      return () => clearTimeout(N);
+    }
+  }, [L]), V(() => {
+    B.current = L;
+  }, [L]);
+  const P = r && !(u && b);
+  V(() => {
+    if (!P || !m.current) return;
+    const I = m.current;
+    (I.scrollHeight - I.scrollTop - I.clientHeight < _ * 3 || L.length <= 5) && (I.scrollTop = I.scrollHeight);
+  }, [L.length, P]);
+  const Y = K(() => {
+    m.current && k(m.current.scrollTop);
+  }, []), H = Math.max(0, Math.floor(v / _) - ut), g = Math.min(
+    L.length - 1,
+    Math.ceil((v + $) / _) + ut
+  ), T = {
+    position: "relative",
+    overflow: "auto",
+    height: typeof o == "number" ? `${o}px` : o,
+    background: a.bg,
+    border: `1px solid ${a.border}`,
+    borderRadius: 8,
+    boxSizing: "border-box"
+  }, G = {
+    position: "relative",
+    height: w,
+    minHeight: "100%"
+  };
+  if (L.length === 0)
+    return n(
+      "div",
+      { style: { ...T, display: "flex", alignItems: "center", justifyContent: "center" } },
+      n("span", { style: { color: a.textMuted, fontSize: 14 } }, z(f))
+    );
+  const R = [];
+  for (let I = H; I <= g; I++) {
+    const S = L[I];
+    S && R.push(
+      n(Nt, {
+        key: S.id,
+        item: S,
+        isNew: W.has(S.id),
+        showTimestamps: c,
+        onItemClick: s,
+        renderItem: x,
+        theme: a,
+        style: {
+          position: "absolute",
+          top: I * _,
+          left: 0,
+          right: 0
+        }
+      })
+    );
+  }
+  return n(
+    "div",
+    {
+      ref: m,
+      style: T,
+      onScroll: Y,
+      onMouseEnter: u ? () => y(!0) : void 0,
+      onMouseLeave: u ? () => y(!1) : void 0,
+      "aria-label": "Live feed",
+      role: "feed"
+    },
+    n("div", { style: G }, ...R)
+  );
+}
+let pt = !1;
+function Et() {
+  if (pt || typeof document > "u") return;
+  pt = !0;
+  const t = document.createElement("style");
+  t.id = "tkx-live-metrics-styles", t.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;
+}
+  `.trim(), document.head.appendChild(t);
+}
+function gt(t, e) {
+  if (typeof t == "string") return t;
+  const o = t >= 1e6 ? `${(t / 1e6).toFixed(1)}M` : t >= 1e3 ? `${(t / 1e3).toFixed(1)}k` : String(Number.isInteger(t) ? t : t.toFixed(2));
+  return e ? `${o}${e}` : o;
+}
+function Wt(t, e) {
+  switch (t) {
+    case "warning":
+      return e.warning;
+    case "critical":
+      return e.danger;
+    default:
+      return e.primary;
+  }
+}
+function Ct(t, e, o) {
+  const [r, c] = C(t), s = D(t), f = D(null), u = D(null);
+  return V(() => {
+    if (!o) {
+      c(t);
+      return;
+    }
+    const x = s.current;
+    if (x === t) return;
+    f.current = null;
+    const a = (m) => {
+      f.current === null && (f.current = m);
+      const v = m - f.current, k = Math.min(v / e, 1), b = 1 - Math.pow(1 - k, 3);
+      c(x + (t - x) * b), k < 1 ? u.current = requestAnimationFrame(a) : s.current = t;
+    };
+    return u.current = requestAnimationFrame(a), () => {
+      u.current !== null && cancelAnimationFrame(u.current);
+    };
+  }, [t, e, o]), r;
+}
+function Ht({ data: t, color: e }) {
+  if (t.length < 2) return null;
+  const o = 80, r = 24, c = Math.min(...t), f = Math.max(...t) - c || 1, u = t.map((x, a) => {
+    const m = a / (t.length - 1) * o, v = r - (x - c) / f * (r - 2) - 1;
+    return `${m.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: e,
+      strokeWidth: 1.5,
+      strokeLinejoin: "round",
+      strokeLinecap: "round"
+    })
+  );
+}
+function Ft({ trend: t, theme: e }) {
+  return t === "up" ? n("span", { style: { color: e.success, fontSize: 14, fontWeight: 700 } }, "▲") : t === "down" ? n("span", { style: { color: e.danger, fontSize: 14, fontWeight: 700 } }, "▼") : n("span", { style: { color: e.textMuted, fontSize: 14 } }, "→");
+}
+function At({ metric: t, animate: e, onMetricClick: o, theme: r }) {
+  const c = t.color ?? Wt(t.status, r), s = typeof t.value == "number" ? t.value : NaN, f = Ct(isNaN(s) ? 0 : s, 600, e && !isNaN(s)), [u, x] = C(!1), a = D(t.value);
+  V(() => {
+    if (a.current !== t.value) {
+      a.current = t.value, x(!0);
+      const y = window.setTimeout(() => x(!1), 700);
+      return () => clearTimeout(y);
+    }
+  }, [t.value]);
+  const m = t.previousValue !== void 0 && t.previousValue !== s, v = {
+    background: r.surface,
+    border: `1px solid ${r.border}`,
+    borderLeft: `4px solid ${c}`,
+    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%, ${c}22 50%, transparent 100%)`,
+    backgroundSize: "200% 100%",
+    animation: "tkx-metric-shimmer 0.6s ease-in-out",
+    pointerEvents: "none"
+  } : {}, b = isNaN(s) ? z(String(t.value)) : gt(f, t.unit);
+  return n(
+    "div",
+    {
+      style: v,
+      className: u ? "tkx-metric-shimmer" : void 0,
+      onClick: o ? () => o(t) : 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" } }, z(t.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),
+      t.unit && isNaN(s) && n("span", { style: { fontSize: 14, color: r.textMuted, marginBottom: 2 } }, z(t.unit))
+    ),
+    // Trend row
+    (t.trend || t.trendValue) && n(
+      "div",
+      { style: { display: "flex", alignItems: "center", gap: 4, marginBottom: t.sparkline ? 8 : 0 } },
+      t.trend && n(Ft, { trend: t.trend, theme: r }),
+      t.trendValue && n("span", { style: { fontSize: 12, color: r.textMuted } }, z(t.trendValue))
+    ),
+    // Previous value
+    m && n(
+      "div",
+      { style: { fontSize: 11, color: r.textMuted, marginTop: 2 } },
+      `was ${gt(t.previousValue)}`
+    ),
+    // Sparkline
+    t.sparkline && t.sparkline.length >= 2 && n(
+      "div",
+      { style: { marginTop: 8 } },
+      n(Ht, { data: t.sparkline, color: c })
+    )
+  );
+}
+function Jt({
+  metrics: t,
+  columns: e = 3,
+  animate: o = !0,
+  onMetricClick: r
+}) {
+  const c = tt();
+  Et();
+  const s = {
+    display: "grid",
+    gridTemplateColumns: `repeat(${e}, minmax(0, 1fr))`,
+    gap: 16
+  };
+  return n(
+    "div",
+    { style: s },
+    ...t.map(
+      (f) => n(At, {
+        key: f.id,
+        metric: f,
+        animate: o,
+        onMetricClick: r,
+        theme: c
+      })
+    )
+  );
+}
+function xt(t) {
+  const e = new Date(t), o = String(e.getHours()).padStart(2, "0"), r = String(e.getMinutes()).padStart(2, "0"), c = String(e.getSeconds()).padStart(2, "0");
+  return `${o}:${r}:${c}`;
+}
+function ht(t) {
+  return Math.abs(t) >= 1e6 ? `${(t / 1e6).toFixed(1)}M` : Math.abs(t) >= 1e3 ? `${(t / 1e3).toFixed(1)}k` : Number.isInteger(t) ? String(t) : t.toFixed(2);
+}
+function Zt({
+  data: t,
+  maxPoints: e = 60,
+  height: o = 200,
+  width: r = "100%",
+  color: c,
+  fill: s = !0,
+  showGrid: f = !0,
+  showLabels: u = !0,
+  showTooltip: x = !0,
+  label: a,
+  unit: m,
+  animate: v = !0,
+  yMin: k,
+  yMax: b
+}) {
+  const y = tt(), W = c ?? y.primary, E = D(null), [B, L] = C(600), [$, w] = C(null), [P, Y] = C(0), H = D(t.length);
+  V(() => {
+    if (!E.current) return;
+    const i = new ResizeObserver((h) => {
+      const O = h[0];
+      O && L(O.contentRect.width);
+    });
+    return i.observe(E.current), L(E.current.offsetWidth), () => i.disconnect();
+  }, []);
+  const g = Q(
+    () => t.slice(-e),
+    [t, e]
+  );
+  V(() => {
+    g.length > H.current && Y((i) => i + 1), H.current = g.length;
+  }, [g.length]);
+  const T = u ? 48 : 12, G = 12, R = a ? 28 : 12, I = 28, S = Math.max(B - T - G, 1), N = Math.max(o - R - 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 X(i) {
+    return N - (i - d) / p * N;
+  }
+  const q = g.length >= 2 ? g.map((i, h) => `${h === 0 ? "M" : "L"}${M(h).toFixed(2)},${X(i.value).toFixed(2)}`).join(" ") : "", at = q ? `${q} L${M(g.length - 1).toFixed(2)},${N} L${M(0).toFixed(2)},${N} Z` : "", et = 4, nt = [];
+  for (let i = 0; i <= et; i++)
+    nt.push(i);
+  const bt = nt.map((i) => {
+    const h = d + i / et * p;
+    return { y: X(h), text: ht(h) };
+  }), ot = Math.min(4, g.length), St = ot > 0 ? Array.from(
+    { length: ot },
+    (i, h) => Math.round(h / Math.max(ot - 1, 1) * (g.length - 1))
+  ) : [], kt = K(
+    (i) => {
+      if (!x || g.length === 0) return;
+      const h = i.currentTarget.getBoundingClientRect(), O = i.clientX - h.left - T;
+      let U = 0, lt = 1 / 0;
+      g.forEach((Gt, ct) => {
+        const dt = Math.abs(M(ct) - O);
+        dt < lt && (lt = dt, U = ct);
+      });
+      const st = g[U];
+      if (!st) return;
+      const $t = M(U) + T, Tt = X(st.value) + R;
+      w({ x: $t, y: Tt, point: st });
+    },
+    [g, x, T, R]
+  ), wt = K(() => w(null), []), rt = B, J = o, it = `tkx-chart-clip-${P}`, Mt = {
+    position: "relative",
+    width: typeof r == "number" ? `${r}px` : r,
+    background: y.surface,
+    border: `1px solid ${y.border}`,
+    borderRadius: 8,
+    overflow: "hidden",
+    boxSizing: "border-box"
+  };
+  return n(
+    "div",
+    { ref: E, style: Mt },
+    n(
+      "svg",
+      {
+        width: rt,
+        height: J,
+        viewBox: `0 0 ${rt} ${J}`,
+        onMouseMove: kt,
+        onMouseLeave: wt,
+        style: { display: "block", userSelect: "none" },
+        "aria-label": a ? z(a) : "Real-time chart"
+      },
+      // Defs: clip for animation
+      v && g.length >= 2 && n(
+        "defs",
+        null,
+        n(
+          "clipPath",
+          { id: it },
+          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
+      a && n(
+        "text",
+        {
+          x: T,
+          y: 18,
+          fill: y.textMuted,
+          fontSize: 12,
+          fontWeight: 500
+        },
+        z(a)
+      ),
+      // Grid lines
+      f && nt.map((i) => {
+        const h = X(d + i / et * p) + R;
+        return n("line", {
+          key: `grid-${i}`,
+          x1: T,
+          y1: h,
+          x2: T + S,
+          y2: h,
+          stroke: y.border,
+          strokeWidth: 1,
+          strokeDasharray: "4 4"
+        });
+      }),
+      // Y axis labels
+      u && bt.map((i, h) => n(
+        "text",
+        {
+          key: `yl-${h}`,
+          x: T - 4,
+          y: i.y + R + 4,
+          fill: y.textMuted,
+          fontSize: 10,
+          textAnchor: "end"
+        },
+        i.text
+      )),
+      // Y axis unit
+      m && n(
+        "text",
+        { x: 4, y: R + 10, fill: y.textMuted, fontSize: 9 },
+        z(m)
+      ),
+      // Area fill
+      s && at && n("path", {
+        d: at,
+        fill: `${W}22`,
+        clipPath: v ? `url(#${it})` : void 0,
+        transform: `translate(${T}, ${R})`
+      }),
+      // Data line
+      q && n("path", {
+        d: q,
+        fill: "none",
+        stroke: W,
+        strokeWidth: 2,
+        strokeLinejoin: "round",
+        strokeLinecap: "round",
+        clipPath: v ? `url(#${it})` : void 0,
+        transform: `translate(${T}, ${R})`
+      }),
+      // X axis labels
+      St.map((i) => {
+        const h = g[i];
+        return h ? n(
+          "text",
+          {
+            key: `xl-${i}`,
+            x: T + M(i),
+            y: J - 8,
+            fill: y.textMuted,
+            fontSize: 9,
+            textAnchor: "middle"
+          },
+          xt(h.timestamp)
+        ) : null;
+      }),
+      // Tooltip vertical line
+      $ && n("line", {
+        x1: $.x,
+        y1: R,
+        x2: $.x,
+        y2: R + N,
+        stroke: W,
+        strokeWidth: 1,
+        strokeDasharray: "3 3",
+        opacity: 0.6
+      }),
+      // Tooltip dot
+      $ && n("circle", {
+        cx: $.x,
+        cy: $.y,
+        r: 4,
+        fill: W,
+        stroke: y.surface,
+        strokeWidth: 2
+      }),
+      // Tooltip box
+      $ && (() => {
+        const i = Math.min($.x + 8, rt - 100), h = Math.max($.y - 36, 4), O = `${ht($.point.value)}${m || ""}`, U = xt($.point.timestamp);
+        return n(
+          "g",
+          null,
+          n("rect", {
+            x: i - 4,
+            y: h - 2,
+            width: 90,
+            height: 34,
+            rx: 4,
+            fill: y.surfaceAlt,
+            stroke: y.border,
+            strokeWidth: 1
+          }),
+          n("text", { x: i, y: h + 11, fill: y.text, fontSize: 12, fontWeight: 700 }, O),
+          n("text", { x: i, y: h + 26, fill: y.textMuted, fontSize: 10 }, U)
+        );
+      })()
+    )
+  );
+}
+const Z = 28, yt = 8, mt = {
+  debug: 0,
+  info: 1,
+  warn: 2,
+  error: 3,
+  fatal: 4
+};
+let vt = !1;
+function Dt() {
+  if (vt || typeof document > "u") return;
+  vt = !0;
+  const t = document.createElement("style");
+  t.id = "tkx-live-log-styles", t.textContent = `
+.tkx-log-row:hover { filter: brightness(1.12); }
+.tkx-log-highlight { background: #ffbe0b55; border-radius: 2px; padding: 0 1px; }
+  `.trim(), document.head.appendChild(t);
+}
+function jt(t) {
+  const e = new Date(t), o = String(e.getHours()).padStart(2, "0"), r = String(e.getMinutes()).padStart(2, "0"), c = String(e.getSeconds()).padStart(2, "0"), s = String(e.getMilliseconds()).padStart(3, "0");
+  return `${o}:${r}:${c}.${s}`;
+}
+function Bt(t, e) {
+  switch (t) {
+    case "debug":
+      return e.textMuted;
+    case "info":
+      return e.info;
+    case "warn":
+      return e.warning;
+    case "error":
+      return e.danger;
+    case "fatal":
+      return e.danger;
+    default:
+      return e.textMuted;
+  }
+}
+function Vt(t, e) {
+  return t === "fatal" ? `${e.danger}22` : "transparent";
+}
+function Ot(t) {
+  return `[${t.toUpperCase().padEnd(5)}]`;
+}
+function Pt(t, e) {
+  if (!e) return [t];
+  const o = z(t), r = z(e);
+  if (!r) return [o];
+  try {
+    const c = new RegExp(`(${r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
+    return o.split(c).map(
+      (f, u) => c.test(f) ? n("mark", { key: u, className: "tkx-log-highlight" }, f) : f
+    );
+  } catch {
+    return [o];
+  }
+}
+function Yt({
+  entry: t,
+  showLevel: e,
+  showTimestamp: o,
+  showSource: r,
+  searchQuery: c,
+  monospace: s,
+  isExpanded: f,
+  onToggle: u,
+  onEntryClick: x,
+  theme: a,
+  style: m
+}) {
+  const v = Bt(t.level, a), k = Vt(t.level, a), b = t.metadata && Object.keys(t.metadata).length > 0, y = {
+    ...m,
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "0 10px",
+    fontSize: 12,
+    fontFamily: s ? '"JetBrains Mono", "Fira Mono", Consolas, monospace' : "inherit",
+    cursor: b || x ? "pointer" : "default",
+    background: k,
+    boxSizing: "border-box",
+    height: Z,
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    borderBottom: `1px solid ${a.border}22`
+  };
+  return n(
+    "div",
+    {
+      style: y,
+      className: "tkx-log-row",
+      onClick: () => {
+        b && u(), x && x(t);
+      },
+      role: b ? "button" : void 0,
+      tabIndex: b ? 0 : void 0,
+      onKeyDown: b ? (E) => {
+        (E.key === "Enter" || E.key === " ") && u();
+      } : void 0,
+      "aria-expanded": b ? f : void 0
+    },
+    // Timestamp
+    o && n(
+      "span",
+      { style: { color: a.textMuted, flexShrink: 0, minWidth: 84 } },
+      jt(t.timestamp)
+    ),
+    // Level badge
+    e && n(
+      "span",
+      {
+        style: {
+          color: v,
+          flexShrink: 0,
+          fontWeight: t.level === "fatal" ? 700 : 500,
+          minWidth: 56
+        }
+      },
+      Ot(t.level)
+    ),
+    // Source badge
+    r && t.source && n(
+      "span",
+      {
+        style: {
+          background: a.surfaceAlt,
+          border: `1px solid ${a.border}`,
+          borderRadius: 10,
+          padding: "0 5px",
+          fontSize: 10,
+          color: a.textMuted,
+          flexShrink: 0,
+          maxWidth: 80,
+          overflow: "hidden",
+          textOverflow: "ellipsis"
+        }
+      },
+      z(t.source)
+    ),
+    // Message
+    n(
+      "span",
+      { style: { flex: 1, color: a.text, overflow: "hidden", textOverflow: "ellipsis" } },
+      ...Pt(t.message, c)
+    ),
+    // Expand indicator
+    b && n(
+      "span",
+      { style: { color: a.textMuted, fontSize: 10, flexShrink: 0 } },
+      f ? "▲" : "▼"
+    )
+  );
+}
+function _t({ metadata: t, theme: e, style: o }) {
+  const r = {
+    ...o,
+    background: e.surfaceAlt,
+    borderBottom: `1px solid ${e.border}`,
+    padding: "6px 10px 6px 56px",
+    display: "flex",
+    flexWrap: "wrap",
+    gap: 6,
+    boxSizing: "border-box"
+  };
+  return n(
+    "div",
+    { style: r },
+    ...Object.entries(t).map(
+      ([c, s]) => n(
+        "span",
+        {
+          key: c,
+          style: {
+            fontSize: 11,
+            fontFamily: "monospace",
+            color: e.textMuted,
+            background: e.surface,
+            border: `1px solid ${e.border}`,
+            borderRadius: 4,
+            padding: "1px 6px"
+          }
+        },
+        n("span", { style: { color: e.info } }, `${z(c)}: `),
+        z(String(s))
+      )
+    )
+  );
+}
+function Qt({
+  entries: t,
+  maxEntries: e = 500,
+  height: o = 400,
+  autoScroll: r = !0,
+  showLevel: c = !0,
+  showTimestamp: s = !0,
+  showSource: f = !0,
+  filterLevel: u,
+  searchQuery: x = "",
+  monospace: a = !0,
+  onEntryClick: m
+}) {
+  const v = tt();
+  Dt();
+  const k = D(null), [b, y] = C(0), [W, E] = C(/* @__PURE__ */ new Set()), [B, L] = C(!1), $ = D(t.length), w = Q(() => {
+    let d = t.slice(-e);
+    if (u !== void 0) {
+      const l = mt[u];
+      d = d.filter((p) => mt[p.level] >= l);
+    }
+    if (x) {
+      const l = x.toLowerCase();
+      d = d.filter(
+        (p) => p.message.toLowerCase().includes(l) || (p.source ?? "").toLowerCase().includes(l)
+      );
+    }
+    return d;
+  }, [t, e, u, x]), P = typeof o == "number" ? o : 400, Y = 40, H = Q(() => {
+    const d = [];
+    let l = 0;
+    for (const p of w)
+      d.push(l), l += Z + (W.has(p.id) ? Y : 0);
+    return d.push(l), d;
+  }, [w, W]), g = H[H.length - 1] ?? 0;
+  V(() => {
+    !r || B || w.length !== $.current && ($.current = w.length, k.current && (k.current.scrollTop = k.current.scrollHeight));
+  }, [w.length, r, B]);
+  const T = K(() => {
+    if (!k.current) return;
+    const d = k.current, l = d.scrollHeight - d.scrollTop - d.clientHeight < Z * 2;
+    L(!l), y(d.scrollTop);
+  }, []), G = K((d) => {
+    E((l) => {
+      const p = new Set(l);
+      return p.has(d) ? p.delete(d) : p.add(d), p;
+    });
+  }, []);
+  function R(d) {
+    let l = 0, p = w.length - 1;
+    for (; l < p; ) {
+      const M = l + p >> 1;
+      (H[M + 1] ?? 0) <= d ? l = M + 1 : p = M;
+    }
+    return Math.max(0, l - yt);
+  }
+  function I(d) {
+    let l = 0, p = w.length - 1;
+    for (; l < p; ) {
+      const M = l + p + 1 >> 1;
+      (H[M] ?? 0) >= d + P ? p = M - 1 : l = M;
+    }
+    return Math.min(w.length - 1, l + yt);
+  }
+  const S = w.length > 0 ? R(b) : 0, N = 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 <= N; d++) {
+    const l = w[d];
+    if (!l) continue;
+    const p = H[d] ?? 0, M = W.has(l.id);
+    A.push(
+      n(Yt, {
+        key: l.id,
+        entry: l,
+        showLevel: c,
+        showTimestamp: s,
+        showSource: f,
+        searchQuery: x,
+        monospace: a,
+        isExpanded: M,
+        onToggle: () => G(l.id),
+        onEntryClick: m,
+        theme: v,
+        style: { position: "absolute", top: p, left: 0, right: 0 }
+      })
+    ), M && l.metadata && Object.keys(l.metadata).length > 0 && A.push(
+      n(_t, {
+        key: `${l.id}-meta`,
+        metadata: l.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 {
+  qt as TkxLiveFeed,
+  Qt as TkxLiveLog,
+  Jt as TkxLiveMetrics,
+  Zt as TkxRealTimeChart
+};