tekivex-ui 2.5.7 → 2.5.8

package/dist/realtime.js

@@ -1,13 +1,13 @@
-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-CAXjeKoK.js";
-import { s as z } from "./security-loRa1HyV.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 = `
+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; }
@@ -15,34 +15,34 @@ function It() {
 .tkx-feed-item-new {
   animation: tkx-feed-slide-in 0.25s ease-out both;
 }
-  `.trim(), document.head.appendChild(t);
+  `.trim(), document.head.appendChild(e);
 }
-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 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 Lt(t, e) {
-  switch (t) {
+function Re(e, t) {
+  switch (e) {
     case "info":
-      return e.info;
+      return t.info;
     case "success":
-      return e.success;
+      return t.success;
     case "warning":
-      return e.warning;
+      return t.warning;
     case "error":
-      return e.danger;
+      return t.danger;
     default:
-      return e.border;
+      return t.border;
   }
 }
-function Rt(t) {
-  return t ? t.split(" ").map((e) => e[0] ?? "").slice(0, 2).join("").toUpperCase() : "?";
+function ze(e) {
+  return e ? e.split(" ").map((t) => t[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 = {
+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",
@@ -58,13 +58,13 @@ function Nt({ item: t, isNew: e, showTimestamps: o, onItemClick: r, renderItem:
   return n(
     "div",
     {
-      style: x,
-      className: e ? "tkx-feed-item-new" : void 0,
-      onClick: r ? () => r(t) : void 0,
+      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 ? (a) => {
-        (a.key === "Enter" || a.key === " ") && r(t);
+      onKeyDown: r ? (l) => {
+        (l.key === "Enter" || l.key === " ") && r(e);
       } : void 0
     },
     // Avatar
@@ -86,7 +86,7 @@ function Nt({ item: t, isNew: e, showTimestamps: o, onItemClick: r, renderItem:
           overflow: "hidden"
         }
       },
-      t.avatar ? n("img", { src: t.avatar, alt: t.author ?? "", style: { width: "100%", height: "100%", objectFit: "cover" } }) : Rt(t.author)
+      e.avatar ? n("img", { src: e.avatar, alt: e.author ?? "", style: { width: "100%", height: "100%", objectFit: "cover" } }) : ze(e.author)
     ),
     // Body
     n(
@@ -95,75 +95,75 @@ function Nt({ item: t, isNew: e, showTimestamps: o, onItemClick: r, renderItem:
       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))
+        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" } },
-        z(t.content)
+        L(e.content)
       )
     ),
     // Timestamp
     o && n(
       "div",
       { style: { fontSize: 11, color: s.textMuted, flexShrink: 0 } },
-      zt(t.timestamp)
+      Le(e.timestamp)
     )
   );
 }
-function qt({
-  items: t,
-  maxItems: e = 100,
+function Je({
+  items: e,
+  maxItems: t = 100,
   height: o = 400,
   autoScroll: r = !0,
-  showTimestamps: c = !0,
+  showTimestamps: a = !0,
   onItemClick: s,
   emptyMessage: f = "No activity yet.",
   pauseOnHover: u = !0,
-  renderItem: x
+  renderItem: h
 }) {
-  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);
+  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) {
-      E((j) => {
+      N((j) => {
         const F = new Set(j);
         return S.forEach((A) => F.add(A)), F;
       });
-      const N = window.setTimeout(() => {
-        E((j) => {
+      const E = window.setTimeout(() => {
+        N((j) => {
           const F = new Set(j);
           return S.forEach((A) => F.delete(A)), F;
         });
       }, 400);
-      return () => clearTimeout(N);
+      return () => clearTimeout(E);
     }
-  }, [L]), V(() => {
-    B.current = L;
-  }, [L]);
+  }, [R]), B(() => {
+    V.current = R;
+  }, [R]);
   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]);
+  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(() => {
-    m.current && k(m.current.scrollTop);
-  }, []), H = Math.max(0, Math.floor(v / _) - ut), g = Math.min(
-    L.length - 1,
-    Math.ceil((v + $) / _) + ut
+    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: a.bg,
-    border: `1px solid ${a.border}`,
+    background: l.bg,
+    border: `1px solid ${l.border}`,
     borderRadius: 8,
     boxSizing: "border-box"
   }, G = {
@@ -171,24 +171,24 @@ function qt({
     height: w,
     minHeight: "100%"
   };
-  if (L.length === 0)
+  if (R.length === 0)
     return n(
       "div",
       { style: { ...T, display: "flex", alignItems: "center", justifyContent: "center" } },
-      n("span", { style: { color: a.textMuted, fontSize: 14 } }, z(f))
+      n("span", { style: { color: l.textMuted, fontSize: 14 } }, L(f))
     );
-  const R = [];
+  const z = [];
   for (let I = H; I <= g; I++) {
-    const S = L[I];
-    S && R.push(
-      n(Nt, {
+    const S = R[I];
+    S && z.push(
+      n(Ee, {
         key: S.id,
         item: S,
-        isNew: W.has(S.id),
-        showTimestamps: c,
+        isNew: C.has(S.id),
+        showTimestamps: a,
         onItemClick: s,
-        renderItem: x,
-        theme: a,
+        renderItem: h,
+        theme: l,
         style: {
           position: "absolute",
           top: I * _,
@@ -201,23 +201,23 @@ function qt({
   return n(
     "div",
     {
-      ref: m,
+      ref: y,
       style: T,
       onScroll: Y,
-      onMouseEnter: u ? () => y(!0) : void 0,
-      onMouseLeave: u ? () => y(!1) : void 0,
+      onMouseEnter: u ? () => x(!0) : void 0,
+      onMouseLeave: u ? () => x(!1) : void 0,
       "aria-label": "Live feed",
       role: "feed"
     },
-    n("div", { style: G }, ...R)
+    n("div", { style: G }, ...z)
   );
 }
-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 = `
+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; }
@@ -230,48 +230,62 @@ function Et() {
 .tkx-metric-shimmer {
   animation: tkx-metric-shimmer 0.6s ease-in-out;
 }
-  `.trim(), document.head.appendChild(t);
+@media (prefers-reduced-motion: reduce) {
+  .tkx-metric-shimmer { animation: none; }
+  .tkx-metric-pulse   { animation: none; }
+}
+  `.trim(), document.head.appendChild(e);
 }
-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 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 Wt(t, e) {
-  switch (t) {
+function We(e, t) {
+  switch (e) {
     case "warning":
-      return e.warning;
+      return t.warning;
     case "critical":
-      return e.danger;
+      return t.danger;
     default:
-      return e.primary;
+      return t.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);
+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 x = s.current;
-    if (x === t) return;
+    const l = s.current;
+    if (l === e) 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;
+    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(a), () => {
+    return u.current = requestAnimationFrame(y), () => {
       u.current !== null && cancelAnimationFrame(u.current);
     };
-  }, [t, e, o]), r;
+  }, [e, t, o, h]), 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)}`;
+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",
@@ -279,29 +293,29 @@ function Ht({ data: t, color: e }) {
     n("polyline", {
       points: u.join(" "),
       fill: "none",
-      stroke: e,
+      stroke: t,
       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 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 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);
+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);
     }
-  }, [t.value]);
-  const m = t.previousValue !== void 0 && t.previousValue !== s, v = {
+  }, [e.value]);
+  const y = e.previousValue !== void 0 && e.previousValue !== s, v = {
     background: r.surface,
     border: `1px solid ${r.border}`,
-    borderLeft: `4px solid ${c}`,
+    borderLeft: `4px solid ${a}`,
     borderRadius: 8,
     padding: "14px 16px",
     cursor: o ? "pointer" : "default",
@@ -311,171 +325,171 @@ function At({ metric: t, animate: e, onMetricClick: o, theme: r }) {
   }, k = u ? {
     position: "absolute",
     inset: 0,
-    background: `linear-gradient(90deg, transparent 0%, ${c}22 50%, transparent 100%)`,
+    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) ? z(String(t.value)) : gt(f, t.unit);
+  } : {}, 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(t) : 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" } }, z(t.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),
-      t.unit && isNaN(s) && n("span", { style: { fontSize: 14, color: r.textMuted, marginBottom: 2 } }, z(t.unit))
+      e.unit && isNaN(s) && n("span", { style: { fontSize: 14, color: r.textMuted, marginBottom: 2 } }, L(e.unit))
     ),
     // Trend row
-    (t.trend || t.trendValue) && n(
+    (e.trend || e.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))
+      { 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
-    m && n(
+    y && n(
       "div",
       { style: { fontSize: 11, color: r.textMuted, marginTop: 2 } },
-      `was ${gt(t.previousValue)}`
+      `was ${ge(e.previousValue)}`
     ),
     // Sparkline
-    t.sparkline && t.sparkline.length >= 2 && n(
+    e.sparkline && e.sparkline.length >= 2 && n(
       "div",
       { style: { marginTop: 8 } },
-      n(Ht, { data: t.sparkline, color: c })
+      n(Fe, { data: e.sparkline, color: a })
     )
   );
 }
-function Jt({
-  metrics: t,
-  columns: e = 3,
+function Ze({
+  metrics: e,
+  columns: t = 3,
   animate: o = !0,
   onMetricClick: r
 }) {
-  const c = tt();
-  Et();
+  const a = ee();
+  Ne();
   const s = {
     display: "grid",
-    gridTemplateColumns: `repeat(${e}, minmax(0, 1fr))`,
+    gridTemplateColumns: `repeat(${t}, minmax(0, 1fr))`,
     gap: 16
   };
   return n(
     "div",
     { style: s },
-    ...t.map(
-      (f) => n(At, {
+    ...e.map(
+      (f) => n(De, {
         key: f.id,
         metric: f,
         animate: o,
         onMetricClick: r,
-        theme: c
+        theme: a
       })
     )
   );
 }
-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 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 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 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 Zt({
-  data: t,
-  maxPoints: e = 60,
+function Qe({
+  data: e,
+  maxPoints: t = 60,
   height: o = 200,
   width: r = "100%",
-  color: c,
+  color: a,
   fill: s = !0,
   showGrid: f = !0,
   showLabels: u = !0,
-  showTooltip: x = !0,
-  label: a,
-  unit: m,
+  showTooltip: h = !0,
+  label: l,
+  unit: y,
   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);
+  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(E.current), L(E.current.offsetWidth), () => i.disconnect();
+    return i.observe(N.current), R(N.current.offsetWidth), () => i.disconnect();
   }, []);
   const g = Q(
-    () => t.slice(-e),
-    [t, e]
+    () => e.slice(-t),
+    [e, t]
   );
-  V(() => {
+  B(() => {
     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;
+  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 X(i) {
-    return N - (i - d) / p * N;
+  function q(i) {
+    return E - (i - d) / p * E;
   }
-  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(
+  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 (!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);
+      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 st = g[U];
-      if (!st) return;
-      const $t = M(U) + T, Tt = X(st.value) + R;
-      w({ x: $t, y: Tt, point: st });
+      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, x, T, R]
-  ), wt = K(() => w(null), []), rt = B, J = o, it = `tkx-chart-clip-${P}`, Mt = {
+    [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: y.surface,
-    border: `1px solid ${y.border}`,
+    background: x.surface,
+    border: `1px solid ${x.border}`,
     borderRadius: 8,
     overflow: "hidden",
     boxSizing: "border-box"
   };
   return n(
     "div",
-    { ref: E, style: Mt },
+    { ref: N, style: Me },
     n(
       "svg",
       {
-        width: rt,
+        width: re,
         height: J,
-        viewBox: `0 0 ${rt} ${J}`,
-        onMouseMove: kt,
-        onMouseLeave: wt,
+        viewBox: `0 0 ${re} ${J}`,
+        onMouseMove: ke,
+        onMouseLeave: we,
         style: { display: "block", userSelect: "none" },
-        "aria-label": a ? z(a) : "Real-time chart"
+        "aria-label": l ? L(l) : "Real-time chart"
       },
       // Defs: clip for animation
       v && g.length >= 2 && n(
@@ -483,7 +497,7 @@ function Zt({
         null,
         n(
           "clipPath",
-          { id: it },
+          { id: ie },
           n(
             "rect",
             {
@@ -503,91 +517,91 @@ function Zt({
         )
       ),
       // Chart title
-      a && n(
+      l && n(
         "text",
         {
           x: T,
           y: 18,
-          fill: y.textMuted,
+          fill: x.textMuted,
           fontSize: 12,
           fontWeight: 500
         },
-        z(a)
+        L(l)
       ),
       // Grid lines
-      f && nt.map((i) => {
-        const h = X(d + i / et * p) + R;
+      f && ne.map((i) => {
+        const m = q(d + i / te * p) + z;
         return n("line", {
           key: `grid-${i}`,
           x1: T,
-          y1: h,
+          y1: m,
           x2: T + S,
-          y2: h,
-          stroke: y.border,
+          y2: m,
+          stroke: x.border,
           strokeWidth: 1,
           strokeDasharray: "4 4"
         });
       }),
       // Y axis labels
-      u && bt.map((i, h) => n(
+      u && be.map((i, m) => n(
         "text",
         {
-          key: `yl-${h}`,
+          key: `yl-${m}`,
           x: T - 4,
-          y: i.y + R + 4,
-          fill: y.textMuted,
+          y: i.y + z + 4,
+          fill: x.textMuted,
           fontSize: 10,
           textAnchor: "end"
         },
         i.text
       )),
       // Y axis unit
-      m && n(
+      y && n(
         "text",
-        { x: 4, y: R + 10, fill: y.textMuted, fontSize: 9 },
-        z(m)
+        { x: 4, y: z + 10, fill: x.textMuted, fontSize: 9 },
+        L(y)
       ),
       // Area fill
-      s && at && n("path", {
-        d: at,
-        fill: `${W}22`,
-        clipPath: v ? `url(#${it})` : void 0,
-        transform: `translate(${T}, ${R})`
+      s && ae && n("path", {
+        d: ae,
+        fill: `${C}22`,
+        clipPath: v ? `url(#${ie})` : void 0,
+        transform: `translate(${T}, ${z})`
       }),
       // Data line
-      q && n("path", {
-        d: q,
+      X && n("path", {
+        d: X,
         fill: "none",
-        stroke: W,
+        stroke: C,
         strokeWidth: 2,
         strokeLinejoin: "round",
         strokeLinecap: "round",
-        clipPath: v ? `url(#${it})` : void 0,
-        transform: `translate(${T}, ${R})`
+        clipPath: v ? `url(#${ie})` : void 0,
+        transform: `translate(${T}, ${z})`
       }),
       // X axis labels
-      St.map((i) => {
-        const h = g[i];
-        return h ? n(
+      Se.map((i) => {
+        const m = g[i];
+        return m ? n(
           "text",
           {
             key: `xl-${i}`,
             x: T + M(i),
             y: J - 8,
-            fill: y.textMuted,
+            fill: x.textMuted,
             fontSize: 9,
             textAnchor: "middle"
           },
-          xt(h.timestamp)
+          xe(m.timestamp)
         ) : null;
       }),
       // Tooltip vertical line
       $ && n("line", {
         x1: $.x,
-        y1: R,
+        y1: z,
         x2: $.x,
-        y2: R + N,
-        stroke: W,
+        y2: z + E,
+        stroke: C,
         strokeWidth: 1,
         strokeDasharray: "3 3",
         opacity: 0.6
@@ -597,190 +611,190 @@ function Zt({
         cx: $.x,
         cy: $.y,
         r: 4,
-        fill: W,
-        stroke: y.surface,
+        fill: C,
+        stroke: x.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);
+        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: h - 2,
+            y: m - 2,
             width: 90,
             height: 34,
             rx: 4,
-            fill: y.surfaceAlt,
-            stroke: y.border,
+            fill: x.surfaceAlt,
+            stroke: x.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)
+          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, yt = 8, mt = {
+const Z = 28, me = 8, ye = {
   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 = `
+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(t);
+  `.trim(), document.head.appendChild(e);
 }
-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 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 Bt(t, e) {
-  switch (t) {
+function Ve(e, t) {
+  switch (e) {
     case "debug":
-      return e.textMuted;
+      return t.textMuted;
     case "info":
-      return e.info;
+      return t.info;
     case "warn":
-      return e.warning;
+      return t.warning;
     case "error":
-      return e.danger;
+      return t.danger;
     case "fatal":
-      return e.danger;
+      return t.danger;
     default:
-      return e.textMuted;
+      return t.textMuted;
   }
 }
-function Vt(t, e) {
-  return t === "fatal" ? `${e.danger}22` : "transparent";
+function Oe(e, t) {
+  return e === "fatal" ? `${t.danger}22` : "transparent";
 }
-function Ot(t) {
-  return `[${t.toUpperCase().padEnd(5)}]`;
+function Pe(e) {
+  return `[${e.toUpperCase().padEnd(5)}]`;
 }
-function Pt(t, e) {
-  if (!e) return [t];
-  const o = z(t), r = z(e);
+function Ye(e, t) {
+  if (!t) return [e];
+  const o = L(e), r = L(t);
   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
+    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 Yt({
-  entry: t,
-  showLevel: e,
+function _e({
+  entry: e,
+  showLevel: t,
   showTimestamp: o,
   showSource: r,
-  searchQuery: c,
+  searchQuery: a,
   monospace: s,
   isExpanded: f,
   onToggle: u,
-  onEntryClick: x,
-  theme: a,
-  style: m
+  onEntryClick: h,
+  theme: l,
+  style: y
 }) {
-  const v = Bt(t.level, a), k = Vt(t.level, a), b = t.metadata && Object.keys(t.metadata).length > 0, y = {
-    ...m,
+  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 || x ? "pointer" : "default",
+    cursor: b || h ? "pointer" : "default",
     background: k,
     boxSizing: "border-box",
     height: Z,
     overflow: "hidden",
     whiteSpace: "nowrap",
-    borderBottom: `1px solid ${a.border}22`
+    borderBottom: `1px solid ${l.border}22`
   };
   return n(
     "div",
     {
-      style: y,
+      style: x,
       className: "tkx-log-row",
       onClick: () => {
-        b && u(), x && x(t);
+        b && u(), h && h(e);
       },
       role: b ? "button" : void 0,
       tabIndex: b ? 0 : void 0,
-      onKeyDown: b ? (E) => {
-        (E.key === "Enter" || E.key === " ") && u();
+      onKeyDown: b ? (N) => {
+        (N.key === "Enter" || N.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)
+      { style: { color: l.textMuted, flexShrink: 0, minWidth: 84 } },
+      Be(e.timestamp)
     ),
     // Level badge
-    e && n(
+    t && n(
       "span",
       {
         style: {
           color: v,
           flexShrink: 0,
-          fontWeight: t.level === "fatal" ? 700 : 500,
+          fontWeight: e.level === "fatal" ? 700 : 500,
           minWidth: 56
         }
       },
-      Ot(t.level)
+      Pe(e.level)
     ),
     // Source badge
-    r && t.source && n(
+    r && e.source && n(
       "span",
       {
         style: {
-          background: a.surfaceAlt,
-          border: `1px solid ${a.border}`,
+          background: l.surfaceAlt,
+          border: `1px solid ${l.border}`,
           borderRadius: 10,
           padding: "0 5px",
           fontSize: 10,
-          color: a.textMuted,
+          color: l.textMuted,
           flexShrink: 0,
           maxWidth: 80,
           overflow: "hidden",
           textOverflow: "ellipsis"
         }
       },
-      z(t.source)
+      L(e.source)
     ),
     // Message
     n(
       "span",
-      { style: { flex: 1, color: a.text, overflow: "hidden", textOverflow: "ellipsis" } },
-      ...Pt(t.message, c)
+      { style: { flex: 1, color: l.text, overflow: "hidden", textOverflow: "ellipsis" } },
+      ...Ye(e.message, a)
     ),
     // Expand indicator
     b && n(
       "span",
-      { style: { color: a.textMuted, fontSize: 10, flexShrink: 0 } },
+      { style: { color: l.textMuted, fontSize: 10, flexShrink: 0 } },
       f ? "▲" : "▼"
     )
   );
 }
-function _t({ metadata: t, theme: e, style: o }) {
+function Ge({ metadata: e, theme: t, style: o }) {
   const r = {
     ...o,
-    background: e.surfaceAlt,
-    borderBottom: `1px solid ${e.border}`,
+    background: t.surfaceAlt,
+    borderBottom: `1px solid ${t.border}`,
     padding: "6px 10px 6px 56px",
     display: "flex",
     flexWrap: "wrap",
@@ -790,92 +804,92 @@ function _t({ metadata: t, theme: e, style: o }) {
   return n(
     "div",
     { style: r },
-    ...Object.entries(t).map(
-      ([c, s]) => n(
+    ...Object.entries(e).map(
+      ([a, s]) => n(
         "span",
         {
-          key: c,
+          key: a,
           style: {
             fontSize: 11,
             fontFamily: "monospace",
-            color: e.textMuted,
-            background: e.surface,
-            border: `1px solid ${e.border}`,
+            color: t.textMuted,
+            background: t.surface,
+            border: `1px solid ${t.border}`,
             borderRadius: 4,
             padding: "1px 6px"
           }
         },
-        n("span", { style: { color: e.info } }, `${z(c)}: `),
-        z(String(s))
+        n("span", { style: { color: t.info } }, `${L(a)}: `),
+        L(String(s))
       )
     )
   );
 }
-function Qt({
-  entries: t,
-  maxEntries: e = 500,
+function et({
+  entries: e,
+  maxEntries: t = 500,
   height: o = 400,
   autoScroll: r = !0,
-  showLevel: c = !0,
+  showLevel: a = !0,
   showTimestamp: s = !0,
   showSource: f = !0,
   filterLevel: u,
-  searchQuery: x = "",
-  monospace: a = !0,
-  onEntryClick: m
+  searchQuery: h = "",
+  monospace: l = !0,
+  onEntryClick: y
 }) {
-  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);
+  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 l = mt[u];
-      d = d.filter((p) => mt[p.level] >= l);
+      const c = ye[u];
+      d = d.filter((p) => ye[p.level] >= c);
     }
-    if (x) {
-      const l = x.toLowerCase();
+    if (h) {
+      const c = h.toLowerCase();
       d = d.filter(
-        (p) => p.message.toLowerCase().includes(l) || (p.source ?? "").toLowerCase().includes(l)
+        (p) => p.message.toLowerCase().includes(c) || (p.source ?? "").toLowerCase().includes(c)
       );
     }
     return d;
-  }, [t, e, u, x]), P = typeof o == "number" ? o : 400, Y = 40, H = Q(() => {
+  }, [e, t, u, h]), P = typeof o == "number" ? o : 400, Y = 40, H = Q(() => {
     const d = [];
-    let l = 0;
+    let c = 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]);
+      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, l = d.scrollHeight - d.scrollTop - d.clientHeight < Z * 2;
-    L(!l), y(d.scrollTop);
+    const d = k.current, c = d.scrollHeight - d.scrollTop - d.clientHeight < Z * 2;
+    R(!c), x(d.scrollTop);
   }, []), G = K((d) => {
-    E((l) => {
-      const p = new Set(l);
+    N((c) => {
+      const p = new Set(c);
       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;
+  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, l - yt);
+    return Math.max(0, c - me);
   }
   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;
+    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, l + yt);
+    return Math.min(w.length - 1, c + me);
   }
-  const S = w.length > 0 ? R(b) : 0, N = w.length > 0 ? I(b) : -1, j = {
+  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,
@@ -895,29 +909,29 @@ function Qt({
       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);
+  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(Yt, {
-        key: l.id,
-        entry: l,
-        showLevel: c,
+      n(_e, {
+        key: c.id,
+        entry: c,
+        showLevel: a,
         showTimestamp: s,
         showSource: f,
-        searchQuery: x,
-        monospace: a,
+        searchQuery: h,
+        monospace: l,
         isExpanded: M,
-        onToggle: () => G(l.id),
-        onEntryClick: m,
+        onToggle: () => G(c.id),
+        onEntryClick: y,
         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,
+    ), 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 }
       })
@@ -937,8 +951,8 @@ function Qt({
   );
 }
 export {
-  qt as TkxLiveFeed,
-  Qt as TkxLiveLog,
-  Jt as TkxLiveMetrics,
-  Zt as TkxRealTimeChart
+  Je as TkxLiveFeed,
+  et as TkxLiveLog,
+  Ze as TkxLiveMetrics,
+  Qe as TkxRealTimeChart
 };