@photon-ai/pho-ui 4.7.1 → 4.8.0

package/dist/chunks/{trace-CjOi3_IP.js → trace-D1fOFzJt.js}

@@ -1,17 +1,18 @@
 "use client";
-import { t as P } from "./cn-ChIgwEl3.js";
-import { t as U } from "./createReactComponent-BqCmnqfX.js";
-import { t as Se } from "./IconChevronDown-CZilB71T.js";
-import { t as Ge } from "./IconChevronRight-CzoJnYNI.js";
-import { t as Ie } from "./IconChevronUp-CrpWSgIl.js";
-import { t as Xe } from "./IconX-pZ9vrtSr.js";
-import { t as fe } from "./collapsible-Dv306QOT.js";
-import { t as He } from "./ghost-search-AmVXd0zE.js";
-import { i as Ze, r as Je } from "./badge-DlLJPLeZ.js";
-import { createContext as de, useCallback as F, useContext as ue, useEffect as ae, useId as Ye, useMemo as L, useRef as he, useState as Y } from "react";
-import { Fragment as _e, jsx as o, jsxs as w } from "react/jsx-runtime";
+import { t as S } from "./cn-ChIgwEl3.js";
+import { t as j } from "./createReactComponent-BqCmnqfX.js";
+import { t as Ie } from "./IconChevronDown-CZilB71T.js";
+import { t as He } from "./IconChevronRight-CzoJnYNI.js";
+import { t as Te } from "./IconChevronUp-CrpWSgIl.js";
+import { t as Ze } from "./IconX-pZ9vrtSr.js";
+import { t as ge } from "./collapsible-Dv306QOT.js";
+import { t as he } from "./skeleton-DwjSl4vC.js";
+import { a as Je, i as Ye, n as Qe, r as qe, t as et } from "./ghost-search-CNVs9k1o.js";
+import { i as tt, r as nt } from "./badge-DlLJPLeZ.js";
+import { createContext as de, useCallback as F, useContext as ue, useEffect as ae, useId as at, useMemo as O, useRef as fe, useState as Y } from "react";
+import { Fragment as Ee, jsx as s, jsxs as N } from "react/jsx-runtime";
 import { useRender as q } from "@base-ui/react/use-render";
-var Qe = [
+var rt = [
   ["path", {
     d: "M5 12l14 0",
     key: "svg-0"
@@ -24,25 +25,25 @@ var Qe = [
     d: "M15 8l4 4",
     key: "svg-2"
   }]
-], qe = U("outline", "arrow-narrow-right", "ArrowNarrowRight", Qe), et = [["path", {
+], st = j("outline", "arrow-narrow-right", "ArrowNarrowRight", rt), ot = [["path", {
   d: "M7 10h14l-4 -4",
   key: "svg-0"
 }], ["path", {
   d: "M17 14h-14l4 4",
   key: "svg-1"
-}]], tt = U("outline", "arrows-exchange", "ArrowsExchange", et), nt = [["path", {
+}]], it = j("outline", "arrows-exchange", "ArrowsExchange", ot), lt = [["path", {
   d: "M7 7l5 5l5 -5",
   key: "svg-0"
 }], ["path", {
   d: "M7 13l5 5l5 -5",
   key: "svg-1"
-}]], at = U("outline", "chevrons-down", "ChevronsDown", nt), rt = [["path", {
+}]], ct = j("outline", "chevrons-down", "ChevronsDown", lt), dt = [["path", {
   d: "M7 11l5 -5l5 5",
   key: "svg-0"
 }], ["path", {
   d: "M7 17l5 -5l5 5",
   key: "svg-1"
-}]], st = U("outline", "chevrons-up", "ChevronsUp", rt), ot = [
+}]], ut = j("outline", "chevrons-up", "ChevronsUp", dt), pt = [
   ["path", {
     d: "M4 6a8 3 0 1 0 16 0a8 3 0 1 0 -16 0",
     key: "svg-0"
@@ -55,7 +56,7 @@ var Qe = [
     d: "M4 12v6a8 3 0 0 0 16 0v-6",
     key: "svg-2"
   }]
-], it = U("outline", "database", "Database", ot), lt = [
+], ht = j("outline", "database", "Database", pt), mt = [
   ["path", {
     d: "M14 3v4a1 1 0 0 0 1 1h4",
     key: "svg-0"
@@ -72,7 +73,7 @@ var Qe = [
     d: "M18.5 19.5l2.5 2.5",
     key: "svg-3"
   }]
-], ct = U("outline", "file-search", "FileSearch", lt), dt = [
+], ft = j("outline", "file-search", "FileSearch", mt), vt = [
   ["path", {
     d: "M8 9h8",
     key: "svg-0"
@@ -85,7 +86,7 @@ var Qe = [
     d: "M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12",
     key: "svg-2"
   }]
-], ut = U("outline", "message", "Message", dt), pt = [
+], gt = j("outline", "message", "Message", vt), bt = [
   ["path", {
     d: "M6 6a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2l0 -4",
     key: "svg-0"
@@ -122,13 +123,13 @@ var Qe = [
     d: "M14 8v.01",
     key: "svg-8"
   }]
-], ht = U("outline", "robot", "Robot", pt), mt = [["path", {
+], xt = j("outline", "robot", "Robot", bt), yt = [["path", {
   d: "M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6",
   key: "svg-0"
-}]], ve = U("outline", "sparkles", "Sparkles", mt), ft = [["path", {
+}]], be = j("outline", "sparkles", "Sparkles", yt), wt = [["path", {
   d: "M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5",
   key: "svg-0"
-}]], vt = U("outline", "tool", "Tool", ft), bt = [
+}]], Nt = j("outline", "tool", "Tool", wt), kt = [
   ["path", {
     d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0",
     key: "svg-0"
@@ -149,61 +150,61 @@ var Qe = [
     d: "M12.5 3a17 17 0 0 1 0 18",
     key: "svg-4"
   }]
-], gt = U("outline", "world", "World", bt), be = [0, 1], J = 1e-3, X = (e) => typeof e == "number" && Number.isFinite(e);
-function xt(e) {
+], Mt = j("outline", "world", "World", kt), xe = [0, 1], J = 1e-3, X = (e) => typeof e == "number" && Number.isFinite(e);
+function At(e) {
   const t = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Set();
   for (const r of e.values()) r.parentSpanId != null && e.has(r.parentSpanId) ? t.set(r.id, r.parentSpanId) : (t.set(r.id, null), r.parentSpanId != null && n.add(r.id));
   const a = /* @__PURE__ */ new Set();
   for (const r of e.keys()) {
     if (a.has(r)) continue;
-    const s = [], l = /* @__PURE__ */ new Set();
+    const o = [], l = /* @__PURE__ */ new Set();
     let i = r;
     for (; i !== null && !a.has(i); ) {
       if (l.has(i)) {
         t.set(i, null), n.add(i);
         break;
       }
-      s.push(i), l.add(i), i = t.get(i) ?? null;
+      o.push(i), l.add(i), i = t.get(i) ?? null;
     }
-    for (const d of s) a.add(d);
+    for (const c of o) a.add(c);
   }
   return {
     parents: t,
     orphans: n
   };
 }
-function Te(e) {
-  const t = new Map(e.map((h) => [h.id, h])), { parents: n, orphans: a } = xt(t), r = /* @__PURE__ */ new Map();
+function $e(e) {
+  const t = new Map(e.map((h) => [h.id, h])), { parents: n, orphans: a } = At(t), r = /* @__PURE__ */ new Map();
   for (const h of t.values()) {
-    const v = n.get(h.id) ?? null, M = r.get(v) ?? [];
-    M.push(h), r.set(v, M);
+    const g = n.get(h.id) ?? null, M = r.get(g) ?? [];
+    M.push(h), r.set(g, M);
   }
-  let s = 1 / 0;
-  for (const h of t.values()) X(h.startedAt) && h.startedAt < s && (s = h.startedAt);
-  s === 1 / 0 && (s = 0);
-  const l = (h, v) => {
+  let o = 1 / 0;
+  for (const h of t.values()) X(h.startedAt) && h.startedAt < o && (o = h.startedAt);
+  o === 1 / 0 && (o = 0);
+  const l = (h, g) => {
     let M = !1, m = h.startedAt;
-    X(m) || (m = v ?? s, M = !0);
-    let g = h.endedAt;
-    g != null && (!X(g) || g < m) && (g = m, M = !0);
-    const N = X(h.latencyMs) && h.latencyMs >= 0 ? h.latencyMs : null;
+    X(m) || (m = g ?? o, M = !0);
+    let b = h.endedAt;
+    b != null && (!X(b) || b < m) && (b = m, M = !0);
+    const k = X(h.latencyMs) && h.latencyMs >= 0 ? h.latencyMs : null;
     return {
       startedAt: m,
-      endedAt: g,
-      latencyMs: N,
+      endedAt: b,
+      latencyMs: k,
       repaired: M
     };
-  }, i = [], d = /* @__PURE__ */ new Map();
-  let c = 0;
-  const k = (h, v, M) => {
-    const m = l(h, M), g = r.get(h.id) ?? [], N = {
+  }, i = [], c = /* @__PURE__ */ new Map();
+  let d = 0;
+  const x = (h, g, M) => {
+    const m = l(h, M), b = r.get(h.id) ?? [], k = {
       ...h,
       parentSpanId: n.get(h.id) ?? null,
       startedAt: m.startedAt,
       endedAt: m.endedAt,
       latencyMs: m.latencyMs,
-      depth: v,
-      hasChildren: g.length > 0,
+      depth: g,
+      hasChildren: b.length > 0,
       isCollapsed: !1,
       descendants: 0,
       descendantErrors: 0,
@@ -211,32 +212,32 @@ function Te(e) {
       repaired: m.repaired,
       serverChildId: null
     };
-    m.repaired && (c += 1), i.push(N), d.set(N.id, N);
-    const x = g.map((E) => ({
-      kid: E,
-      start: X(E.startedAt) ? E.startedAt : m.startedAt
+    m.repaired && (d += 1), i.push(k), c.set(k.id, k);
+    const y = b.map(($) => ({
+      kid: $,
+      start: X($.startedAt) ? $.startedAt : m.startedAt
     }));
-    x.sort((E, T) => E.start - T.start);
-    let _ = 0, D = 0;
-    for (const { kid: E } of x) {
-      const T = k(E, v + 1, m.startedAt);
-      _ += 1 + T.descendants, D += (T.status === "failed" ? 1 : 0) + T.descendantErrors, N.kind === "client" && N.serverChildId == null && T.kind === "server" && (N.serverChildId = T.id);
+    y.sort(($, E) => $.start - E.start);
+    let T = 0, z = 0;
+    for (const { kid: $ } of y) {
+      const E = x($, g + 1, m.startedAt);
+      T += 1 + E.descendants, z += (E.status === "failed" ? 1 : 0) + E.descendantErrors, k.kind === "client" && k.serverChildId == null && E.kind === "server" && (k.serverChildId = E.id);
     }
-    return N.descendants = _, N.descendantErrors = D, N;
-  }, b = (r.get(null) ?? []).map((h) => ({
+    return k.descendants = T, k.descendantErrors = z, k;
+  }, v = (r.get(null) ?? []).map((h) => ({
     root: h,
-    start: X(h.startedAt) ? h.startedAt : s
+    start: X(h.startedAt) ? h.startedAt : o
   }));
-  b.sort((h, v) => h.start - v.start);
-  for (const { root: h } of b) k(h, 0, null);
+  v.sort((h, g) => h.start - g.start);
+  for (const { root: h } of v) x(h, 0, null);
   return {
     spans: i,
-    byId: d,
+    byId: c,
     orphans: a.size,
-    repaired: c
+    repaired: d
   };
 }
-function Ee(e, t) {
+function Pe(e, t) {
   const n = [];
   let a = null;
   for (const r of e.spans) {
@@ -251,42 +252,42 @@ function Ee(e, t) {
   }
   return n;
 }
-function Wn(e, t = /* @__PURE__ */ new Set()) {
-  return Ee(Te(e), t);
+function Hn(e, t = /* @__PURE__ */ new Set()) {
+  return Pe($e(e), t);
 }
-function yt(e, t) {
+function Ct(e, t) {
   const n = [];
   let a = e.get(t)?.parentSpanId ?? null;
   for (; a != null && !n.includes(a); )
     n.push(a), a = e.get(a)?.parentSpanId ?? null;
   return n;
 }
-function wt(e) {
+function St(e) {
   return e.filter((t) => t.hasChildren).map((t) => t.id);
 }
-function Nt(e, t) {
+function _t(e, t) {
   return e.filter((n) => n.hasChildren).every((n) => t.has(n.id));
 }
-function kt(e, t) {
+function It(e, t) {
   const n = new Set(t);
   let a;
   for (const r of e) a && r.depth <= a.depth ? (n.add(a.id), a = r.hasChildren && !n.has(r.id) ? r : void 0) : r.hasChildren && !n.has(r.id) && (a = r);
   return a && n.add(a.id), Array.from(n);
 }
-function Mt(e, t) {
+function Tt(e, t) {
   const n = new Set(t);
   let a = -1, r = !0;
-  for (const s of e)
-    s.depth <= a && (r = !0), r && n.has(s.id) && (n.delete(s.id), r = !1, a = s.depth);
+  for (const o of e)
+    o.depth <= a && (r = !0), r && n.has(o.id) && (n.delete(o.id), r = !1, a = o.depth);
   return Array.from(n);
 }
-function At(e, t) {
+function Et(e, t) {
   let n = 1 / 0, a = -1 / 0;
   for (const r of e) {
     if (!X(r.startedAt)) continue;
     r.startedAt < n && (n = r.startedAt);
-    const s = X(r.endedAt) ? r.endedAt : t ?? r.startedAt;
-    s > a && (a = s);
+    const o = X(r.endedAt) ? r.endedAt : t ?? r.startedAt;
+    o > a && (a = o);
   }
   return n === 1 / 0 ? {
     min: 0,
@@ -305,42 +306,42 @@ function ie(e) {
   }
   return [t, n];
 }
-function Ct(e, t) {
+function $t(e, t) {
   const n = e.max - e.min;
   return {
     min: e.min + t[0] * n,
     max: e.min + t[1] * n
   };
 }
-function St(e, t, n = 0.5) {
-  const [a, r] = e, s = r - a, l = Math.min(1, Math.max(J, s * t));
-  let i = a + n * s - n * l;
+function Pt(e, t, n = 0.5) {
+  const [a, r] = e, o = r - a, l = Math.min(1, Math.max(J, o * t));
+  let i = a + n * o - n * l;
   return i = Math.min(Math.max(i, 0), 1 - l), ie([i, i + l]);
 }
-function It(e, t) {
+function Dt(e, t) {
   const [n, a] = e, r = a - n;
-  let s = n + t * r;
-  return s = Math.min(Math.max(s, 0), 1 - r), ie([s, s + r]);
+  let o = n + t * r;
+  return o = Math.min(Math.max(o, 0), 1 - r), ie([o, o + r]);
 }
-function Kn(e, t) {
+function Zn(e, t) {
   return e[0] + t * (e[1] - e[0]);
 }
-function _t(e) {
+function Rt(e) {
   return e[0] <= 0 && e[1] >= 1;
 }
-function Tt({ startedAt: e, endedAt: t, timeRange: n, now: a }) {
-  const r = Math.max(1, n.max - n.min), s = t ?? a ?? n.max, l = (e - n.min) / r * 100, i = (s - n.min) / r * 100, d = Math.min(100, Math.max(0, l)), c = Math.min(100, Math.max(d, i));
+function zt({ startedAt: e, endedAt: t, timeRange: n, now: a }) {
+  const r = Math.max(1, n.max - n.min), o = t ?? a ?? n.max, l = (e - n.min) / r * 100, i = (o - n.min) / r * 100, c = Math.min(100, Math.max(0, l)), d = Math.min(100, Math.max(c, i));
   return {
-    leftPercent: d,
-    endPercent: c,
-    widthPercent: c - d,
-    durationMs: Math.max(0, s - e),
-    effectiveEnd: s,
+    leftPercent: c,
+    endPercent: d,
+    widthPercent: d - c,
+    durationMs: Math.max(0, o - e),
+    effectiveEnd: o,
     clippedStart: l < 0 && i > 0,
     clippedEnd: i > 100 && l < 100
   };
 }
-function Et(e) {
+function Lt(e) {
   if (e == null) return "";
   if (typeof e == "object") try {
     return JSON.stringify(e);
@@ -349,32 +350,32 @@ function Et(e) {
   }
   return String(e);
 }
-function $t(e, t) {
+function Ot(e, t) {
   if (e == null || e.trim() === "") return null;
   const n = [], a = [];
   for (const i of e.match(/[^\s"]+|"([^"]*)"/g) ?? []) {
-    const d = i.replace(/^"(.*)"$/, "$1").toLowerCase();
-    d && (d.startsWith("-") && d.length > 1 ? a.push(d.slice(1)) : n.push(d));
+    const c = i.replace(/^"(.*)"$/, "$1").toLowerCase();
+    c && (c.startsWith("-") && c.length > 1 ? a.push(c.slice(1)) : n.push(c));
   }
   if (n.length === 0) return /* @__PURE__ */ new Set();
   const r = (i) => {
-    const d = i.toLowerCase();
-    return n.some((c) => d.includes(c));
-  }, s = (i) => {
-    const d = i.toLowerCase();
-    return a.some((c) => d.includes(c));
+    const c = i.toLowerCase();
+    return n.some((d) => c.includes(d));
+  }, o = (i) => {
+    const c = i.toLowerCase();
+    return a.some((d) => c.includes(d));
   }, l = /* @__PURE__ */ new Set();
   for (const i of t) {
-    if (r(i.name) || i.service != null && r(i.service) || i.type !== "" && r(i.type) || i.kind != null && r(i.kind) || n.some((c) => c === i.id.toLowerCase())) {
+    if (r(i.name) || i.service != null && r(i.service) || i.type !== "" && r(i.type) || i.kind != null && r(i.kind) || n.some((d) => d === i.id.toLowerCase())) {
       l.add(i.id);
       continue;
     }
-    const d = i.attributes;
-    if (d != null)
-      for (const c of Object.keys(d)) {
-        if (s(c)) continue;
-        const k = Et(d[c]);
-        if (k !== "" && (r(c) || r(k) || r(`${c}=${k}`))) {
+    const c = i.attributes;
+    if (c != null)
+      for (const d of Object.keys(c)) {
+        if (o(d)) continue;
+        const x = Lt(c[d]);
+        if (x !== "" && (r(d) || r(x) || r(`${d}=${x}`))) {
           l.add(i.id);
           break;
         }
@@ -382,115 +383,115 @@ function $t(e, t) {
   }
   return l;
 }
-var $e = de(null), Pe = de(null), ze = de(null);
+var De = de(null), Re = de(null), ze = de(null);
 function G() {
-  const e = ue($e);
+  const e = ue(De);
   if (e == null) throw new Error("SpanPrimitive parts render inside SpanPrimitive.Provider.");
   return e;
 }
 function ee() {
-  const e = ue(Pe);
+  const e = ue(Re);
   if (e == null) throw new Error("SpanPrimitive parts render inside SpanPrimitive.Children.");
   return e;
 }
-var ge = [];
-function Pt({ spans: e, defaultCollapsed: t, collapsed: n, onCollapsedChange: a, now: r, query: s = "", keepFoldsOnMatch: l = !1, defaultView: i, view: d, onViewChange: c, children: k }) {
-  const b = L(() => Te(e), [e]), [h, v] = Y(() => t ?? ge), M = n ?? h, m = L(() => new Set(M), [M]), g = F((I) => {
-    const $ = Array.from(new Set(I));
-    n == null && v($), a?.($);
-  }, [n, a]), N = F((I) => {
-    const $ = new Set(m);
-    $.has(I) ? $.delete(I) : $.add(I), g(Array.from($));
-  }, [m, g]), { spans: x, byId: _ } = b, D = F(() => g(ge), [g]), E = F(() => g(wt(x)), [x, g]), T = F(() => g(Mt(x, m)), [
-    x,
+var ye = [];
+function Ft({ spans: e, defaultCollapsed: t, collapsed: n, onCollapsedChange: a, now: r, query: o = "", keepFoldsOnMatch: l = !1, defaultView: i, view: c, onViewChange: d, children: x }) {
+  const v = O(() => $e(e), [e]), [h, g] = Y(() => t ?? ye), M = n ?? h, m = O(() => new Set(M), [M]), b = F((I) => {
+    const P = Array.from(new Set(I));
+    n == null && g(P), a?.(P);
+  }, [n, a]), k = F((I) => {
+    const P = new Set(m);
+    P.has(I) ? P.delete(I) : P.add(I), b(Array.from(P));
+  }, [m, b]), { spans: y, byId: T } = v, z = F(() => b(ye), [b]), $ = F(() => b(St(y)), [y, b]), E = F(() => b(Tt(y, m)), [
+    y,
     m,
-    g
-  ]), C = F(() => g(kt(x, m)), [
-    x,
+    b
+  ]), C = F(() => b(It(y, m)), [
+    y,
     m,
-    g
-  ]), S = !Nt(x, m), O = x.some((I) => I.hasChildren && m.has(I.id)), p = L(() => $t(s, x), [s, x]);
+    b
+  ]), _ = !_t(y, m), L = y.some((I) => I.hasChildren && m.has(I.id)), p = O(() => Ot(o, y), [o, y]);
   ae(() => {
     if (l || p == null || p.size === 0) return;
     const I = /* @__PURE__ */ new Set();
-    for (const $ of p) for (const Z of yt(_, $)) m.has(Z) && I.add(Z);
-    I.size !== 0 && g(M.filter(($) => !I.has($)));
+    for (const P of p) for (const Z of Ct(T, P)) m.has(Z) && I.add(Z);
+    I.size !== 0 && b(M.filter((P) => !I.has(P)));
   }, [
     p,
     l,
-    _,
+    T,
     m,
     M,
-    g
+    b
   ]);
-  const f = L(() => Ee(b, m), [b, m]), y = L(() => At(x, r), [x, r]), [A, te] = Y(() => ie(i ?? be)), z = L(() => ie(d ?? A), [d, A]), R = F((I) => {
-    const $ = ie(I);
-    d == null && te($), c?.($);
-  }, [d, c]), V = F((I, $) => R(St(z, I, $)), [z, R]), W = F((I) => R(It(z, I)), [z, R]), ne = F(() => R(be), [R]), j = L(() => Ct(y, z), [y, z]), re = L(() => ({
+  const f = O(() => Pe(v, m), [v, m]), w = O(() => Et(y, r), [y, r]), [A, te] = Y(() => ie(i ?? xe)), D = O(() => ie(c ?? A), [c, A]), R = F((I) => {
+    const P = ie(I);
+    c == null && te(P), d?.(P);
+  }, [c, d]), B = F((I, P) => R(Pt(D, I, P)), [D, R]), W = F((I) => R(Dt(D, I)), [D, R]), ne = F(() => R(xe), [R]), V = O(() => $t(w, D), [w, D]), re = O(() => ({
     spans: f,
-    all: x,
-    byId: _,
-    orphans: b.orphans,
-    repaired: b.repaired,
-    range: y,
-    view: z,
-    viewRange: j,
-    zoomed: !_t(z),
+    all: y,
+    byId: T,
+    orphans: v.orphans,
+    repaired: v.repaired,
+    range: w,
+    view: D,
+    viewRange: V,
+    zoomed: !Rt(D),
     now: r,
     collapsed: m,
-    toggle: N,
-    setCollapsed: g,
-    expandAll: D,
-    collapseAll: E,
-    expandOne: T,
+    toggle: k,
+    setCollapsed: b,
+    expandAll: z,
+    collapseAll: $,
+    expandOne: E,
     collapseOne: C,
-    canExpand: O,
-    canCollapse: S,
-    query: s,
+    canExpand: L,
+    canCollapse: _,
+    query: o,
     matches: p,
     setView: R,
-    zoom: V,
+    zoom: B,
     pan: W,
     resetView: ne
   }), [
     f,
-    x,
-    _,
-    b.orphans,
-    b.repaired,
     y,
-    z,
-    j,
+    T,
+    v.orphans,
+    v.repaired,
+    w,
+    D,
+    V,
     r,
     m,
-    N,
-    g,
-    D,
+    k,
+    b,
+    z,
+    $,
     E,
-    T,
     C,
-    O,
-    S,
-    s,
+    L,
+    _,
+    o,
     p,
     R,
-    V,
+    B,
     W,
     ne
   ]);
-  return /* @__PURE__ */ o($e.Provider, {
+  return /* @__PURE__ */ s(De.Provider, {
     value: re,
-    children: k
+    children: x
   });
 }
-function zt({ children: e }) {
+function Wt({ children: e }) {
   const { spans: t } = G();
-  return t.map((n) => /* @__PURE__ */ o(Pe.Provider, {
+  return t.map((n) => /* @__PURE__ */ s(Re.Provider, {
     value: n,
     children: e(n)
   }, n.id));
 }
-function Rt({ render: e, ref: t, ...n }) {
+function Kt({ render: e, ref: t, ...n }) {
   const a = ee(), { matches: r } = G();
   return q({
     render: e,
@@ -509,14 +510,14 @@ function Rt({ render: e, ref: t, ...n }) {
     }
   });
 }
-function Dt({ render: e, ref: t, baseIndent: n = 8, indentPerLevel: a = 12, style: r, ...s }) {
+function Bt({ render: e, ref: t, baseIndent: n = 8, indentPerLevel: a = 12, style: r, ...o }) {
   const l = ee();
   return q({
     render: e,
     ref: t,
     defaultTagName: "div",
     props: {
-      ...s,
+      ...o,
       style: {
         ...r,
         paddingLeft: n + l.depth * a
@@ -525,8 +526,8 @@ function Dt({ render: e, ref: t, baseIndent: n = 8, indentPerLevel: a = 12, styl
     }
   });
 }
-function Ot({ render: e, ref: t, onClick: n, ...a }) {
-  const r = ee(), { toggle: s } = G();
+function Vt({ render: e, ref: t, onClick: n, ...a }) {
+  const r = ee(), { toggle: o } = G();
   return q({
     render: e,
     ref: t,
@@ -537,12 +538,12 @@ function Ot({ render: e, ref: t, onClick: n, ...a }) {
       ...a,
       "data-collapsed": r.isCollapsed ? "" : void 0,
       onClick: (l) => {
-        l.stopPropagation(), s(r.id), n?.(l);
+        l.stopPropagation(), o(r.id), n?.(l);
       }
     }
   });
 }
-function Lt({ render: e, ref: t, ...n }) {
+function Ut({ render: e, ref: t, ...n }) {
   const a = ee();
   return q({
     render: e,
@@ -555,7 +556,7 @@ function Lt({ render: e, ref: t, ...n }) {
     }
   });
 }
-function Ft({ render: e, ref: t, children: n, ...a }) {
+function jt({ render: e, ref: t, children: n, ...a }) {
   const r = ee();
   return q({
     render: e,
@@ -568,7 +569,7 @@ function Ft({ render: e, ref: t, children: n, ...a }) {
     }
   });
 }
-function Wt({ render: e, ref: t, children: n, ...a }) {
+function Gt({ render: e, ref: t, children: n, ...a }) {
   const r = ee();
   return q({
     render: e,
@@ -580,86 +581,86 @@ function Wt({ render: e, ref: t, children: n, ...a }) {
     }
   });
 }
-function Kt({ render: e, ref: t, timeRange: n, paddingEnd: a = 0, style: r, ...s }) {
-  const l = G(), i = L(() => {
-    const b = n ?? l.viewRange, h = Math.max(1, b.max - b.min);
+function Xt({ render: e, ref: t, timeRange: n, paddingEnd: a = 0, style: r, ...o }) {
+  const l = G(), i = O(() => {
+    const v = n ?? l.viewRange, h = Math.max(1, v.max - v.min);
     return {
-      min: b.min,
-      max: b.max + h * Math.max(0, a)
+      min: v.min,
+      max: v.max + h * Math.max(0, a)
     };
   }, [
     n,
     l.viewRange,
     a
-  ]), d = Math.max(1, i.max - i.min), c = {
+  ]), c = Math.max(1, i.max - i.min), d = {
     ...r,
     "--span-timeline-min-ms": i.min,
     "--span-timeline-max-ms": i.max,
-    "--span-timeline-range-ms": d
-  }, k = q({
+    "--span-timeline-range-ms": c
+  }, x = q({
     render: e,
     ref: t,
     defaultTagName: "div",
     props: {
-      ...s,
-      style: c,
+      ...o,
+      style: d,
       "data-span-timeline": ""
     }
   });
-  return /* @__PURE__ */ o(ze.Provider, {
+  return /* @__PURE__ */ s(ze.Provider, {
     value: i,
-    children: k
+    children: x
   });
 }
-function Vt({ render: e, ref: t, now: n, timeRange: a, style: r, ...s }) {
-  const l = ee(), i = G(), d = ue(ze), c = Tt({
+function Ht({ render: e, ref: t, now: n, timeRange: a, style: r, ...o }) {
+  const l = ee(), i = G(), c = ue(ze), d = zt({
     startedAt: l.startedAt,
     endedAt: l.endedAt,
-    timeRange: a ?? d ?? i.viewRange,
+    timeRange: a ?? c ?? i.viewRange,
     now: n ?? i.now
-  }), k = {
+  }), x = {
     ...r,
     position: "absolute",
     insetInlineStart: "var(--span-timeline-left)",
     inlineSize: "max(var(--span-timeline-width), var(--span-timeline-min-width, 0px))",
-    "--span-timeline-left": `${c.leftPercent}%`,
-    "--span-timeline-end": `${c.endPercent}%`,
-    "--span-timeline-width": `${c.widthPercent}%`,
-    "--span-timeline-duration-ms": c.durationMs
+    "--span-timeline-left": `${d.leftPercent}%`,
+    "--span-timeline-end": `${d.endPercent}%`,
+    "--span-timeline-width": `${d.widthPercent}%`,
+    "--span-timeline-duration-ms": d.durationMs
   };
   return q({
     render: e,
     ref: t,
     defaultTagName: "div",
     props: {
-      ...s,
-      style: k,
+      ...o,
+      style: x,
       "data-span-status": l.status,
       "data-span-type": l.type,
       "data-span-running": l.endedAt === null ? "" : void 0,
-      "data-clipped-start": c.clippedStart ? "" : void 0,
-      "data-clipped-end": c.clippedEnd ? "" : void 0
+      "data-clipped-start": d.clippedStart ? "" : void 0,
+      "data-clipped-end": d.clippedEnd ? "" : void 0
     }
   });
 }
 var H = {
-  Provider: Pt,
-  Children: zt,
-  Root: Rt,
-  Indent: Dt,
-  CollapseToggle: Ot,
-  StatusIndicator: Lt,
-  TypeBadge: Ft,
-  Name: Wt,
-  Timeline: Kt,
-  TimelineBar: Vt
-}, jt = (e) => {
+  Provider: Ft,
+  Children: Wt,
+  Root: Kt,
+  Indent: Bt,
+  CollapseToggle: Vt,
+  StatusIndicator: Ut,
+  TypeBadge: jt,
+  Name: Gt,
+  Timeline: Xt,
+  TimelineBar: Ht
+}, Zt = (e) => {
   const t = Number(e.trim());
   return t >= 500 && t < 600;
-}, Re = [
+}, Le = [
   {
     namespace: "db",
-    icon: it,
+    icon: ht,
     pills: [{
       label: "db.system",
       keys: ["db.system.name", "db.system"]
@@ -667,11 +668,11 @@ var H = {
   },
   {
     namespace: "http",
-    icon: gt,
+    icon: Mt,
     pills: [{
       label: "http.status_code",
       keys: ["http.response.status_code", "http.status_code"],
-      error: jt
+      error: Zt
     }, {
       label: "http.method",
       keys: ["http.request.method", "http.method"]
@@ -679,11 +680,11 @@ var H = {
   },
   {
     namespace: "messaging",
-    icon: ut
+    icon: gt
   },
   {
     namespace: "rpc",
-    icon: tt,
+    icon: it,
     pills: [{
       label: "rpc.system",
       keys: ["rpc.system.name", "rpc.system"]
@@ -696,28 +697,28 @@ var H = {
       keys: ["gen_ai.request.model"]
     }]
   }
-], Bt = {
+], Jt = {
   agent: {
-    icon: ht,
+    icon: xt,
     label: "Agent"
   },
   llm: {
-    icon: ve,
+    icon: be,
     label: "LLM call"
   },
   tool: {
-    icon: vt,
+    icon: Nt,
     label: "Tool call"
   },
   retrieval: {
-    icon: ct,
+    icon: ft,
     label: "Retrieval"
   },
   generic: {
-    icon: ve,
+    icon: be,
     label: "GenAI span"
   }
-}, Ut = {
+}, Yt = {
   chat: "llm",
   text_completion: "llm",
   generate_content: "llm",
@@ -727,7 +728,7 @@ var H = {
   embeddings: "retrieval",
   retrieve: "retrieval"
 };
-function Gt(e) {
+function Qt(e) {
   if (e == null) return "";
   if (e instanceof Uint8Array) return JSON.stringify(Array.from(e));
   if (typeof e == "object") try {
@@ -737,50 +738,50 @@ function Gt(e) {
   }
   return String(e).trim();
 }
-function me(e, t) {
+function ve(e, t) {
   if (e == null) return null;
   for (const n of t) {
     if (!(n in e)) continue;
-    const a = Gt(e[n]);
+    const a = Qt(e[n]);
     if (a !== "") return a;
   }
   return null;
 }
-function Xt(e) {
+function qt(e) {
   if (e == null) return null;
-  const t = me(e, ["gen_ai.operation.name"]);
-  return t != null ? Ut[t.toLowerCase()] ?? "generic" : Object.keys(e).some((n) => n.startsWith("gen_ai.")) ? "generic" : null;
+  const t = ve(e, ["gen_ai.operation.name"]);
+  return t != null ? Yt[t.toLowerCase()] ?? "generic" : Object.keys(e).some((n) => n.startsWith("gen_ai.")) ? "generic" : null;
 }
-function Ht(e) {
-  const t = Xt(e);
-  if (t != null) return Bt[t];
+function en(e) {
+  const t = qt(e);
+  if (t != null) return Jt[t];
   if (e == null) return null;
   const n = /* @__PURE__ */ new Set();
   for (const a of Object.keys(e)) {
     const r = a.indexOf(".");
     r > 0 && n.add(a.slice(0, r));
   }
-  for (const a of Re) if (a.icon && n.has(a.namespace)) return { icon: a.icon };
+  for (const a of Le) if (a.icon && n.has(a.namespace)) return { icon: a.icon };
   return null;
 }
-function Zt(e) {
+function tn(e) {
   const t = [];
   if (e == null) return t;
-  for (const n of Re) for (const a of n.pills ?? []) {
-    const r = me(e, a.keys);
+  for (const n of Le) for (const a of n.pills ?? []) {
+    const r = ve(e, a.keys);
     if (r == null) continue;
-    const s = {
+    const o = {
       label: a.label,
       value: r
     };
-    a.error?.(r) && (s.error = !0), t.push(s);
+    a.error?.(r) && (o.error = !0), t.push(o);
   }
   return t;
 }
-function Jt(e) {
-  return me(e, ["peer.service", "server.address"]);
+function nn(e) {
+  return ve(e, ["peer.service", "server.address"]);
 }
-function Yt(e) {
+function an(e) {
   return e.map((t) => {
     const n = t.endedAt ?? null, a = {
       id: t.id,
@@ -795,18 +796,18 @@ function Yt(e) {
     return t.kind != null && (a.kind = t.kind), t.service != null && (a.service = t.service), t.attributes != null && (a.attributes = t.attributes), a;
   });
 }
-function Qt(e, t) {
+function rn(e, t) {
   return e.latencyMs != null ? Math.max(0, e.latencyMs) : e.endedAt != null ? Math.max(0, e.endedAt - e.startedAt) : t != null ? Math.max(0, t - e.startedAt) : null;
 }
-var xe = (e) => Math.min(1, Math.max(0, e));
-function ye(e, t, n) {
-  const a = Math.max(1, t.max - t.min), r = e.endedAt ?? n ?? t.max, s = xe((e.startedAt - t.min) / a);
+var we = (e) => Math.min(1, Math.max(0, e));
+function Ne(e, t, n) {
+  const a = Math.max(1, t.max - t.min), r = e.endedAt ?? n ?? t.max, o = we((e.startedAt - t.min) / a);
   return {
-    left: s,
-    width: xe(Math.max(s, (r - t.min) / a)) - s
+    left: o,
+    width: we(Math.max(o, (r - t.min) / a)) - o
   };
 }
-function qt(e, t = 6) {
+function sn(e, t = 6) {
   if (e <= 0) return 1;
   const n = e / t, a = 10 ** Math.floor(Math.log10(n));
   for (const r of [
@@ -817,14 +818,14 @@ function qt(e, t = 6) {
   ]) if (r * a >= n) return r * a;
   return 10 * a;
 }
-function en(e, t) {
+function on(e, t) {
   const n = t - e;
   if (!(n > 0)) return [{
     at: 0,
     ms: e
   }];
-  const a = qt(n), r = [], s = Math.ceil(e / a - 1e-9) * a;
-  for (let l = s; l <= t + 1e-9; l += a) {
+  const a = sn(n), r = [], o = Math.ceil(e / a - 1e-9) * a;
+  for (let l = o; l <= t + 1e-9; l += a) {
     const i = Number(l.toFixed(6));
     r.push({
       at: (i - e) / n,
@@ -838,28 +839,28 @@ function Q(e) {
   const t = Math.abs(e);
   return t < 10 ? `${e.toFixed(2)} ms` : t < 100 ? `${e.toFixed(1)} ms` : t < 1e3 ? `${Math.round(e)} ms` : t < 6e4 ? `${(e / 1e3).toFixed(2)} s` : `${(e / 6e4).toFixed(1)} min`;
 }
-function De(e) {
+function Oe(e) {
   return e === 0 ? "0" : e >= 1e3 ? `${Number((e / 1e3).toFixed(2))} s` : `${Number(e.toFixed(2))} ms`;
 }
-var tn = 7.5, oe = 4, nn = 4;
-function Oe(e, t) {
+var ln = 7.5, oe = 4, cn = 4;
+function Fe(e, t) {
   if (e.length === 0 || t <= 0) return [];
   const n = [];
   for (const a of e) {
-    const r = De(a.ms), s = Math.max(r.length * tn, 8), l = a.at * t, i = l + oe + s > t, d = i ? "end" : "start", c = i ? l - oe - s : l + oe, k = i ? l - oe : l + oe + s;
-    let b = !1;
-    for (; n.length > 0 && !(c >= n[n.length - 1].right + nn); ) {
+    const r = Oe(a.ms), o = Math.max(r.length * ln, 8), l = a.at * t, i = l + oe + o > t, c = i ? "end" : "start", d = i ? l - oe - o : l + oe, x = i ? l - oe : l + oe + o;
+    let v = !1;
+    for (; n.length > 0 && !(d >= n[n.length - 1].right + cn); ) {
       if (!i) {
-        b = !0;
+        v = !0;
         break;
       }
       n.pop();
     }
-    b || n.push({
+    v || n.push({
       tick: a,
-      align: d,
-      left: c,
-      right: k
+      align: c,
+      left: d,
+      right: x
     });
   }
   return n.map(({ tick: a, align: r }) => ({
@@ -867,141 +868,141 @@ function Oe(e, t) {
     align: r
   }));
 }
-function Vn(e, t) {
-  return Oe(e, t).map((n) => n.ms);
+function Jn(e, t) {
+  return Fe(e, t).map((n) => n.ms);
 }
 function K(e) {
   return `${Number((e * 100).toFixed(4))}%`;
 }
-var Le = "rounded-base border border-pho-secondary bg-pho-primary overflow-hidden", Fe = "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]", an = "absolute inset-y-0 left-5 right-5", We = 20, Ke = 16, rn = 26;
-function sn(e) {
-  return `${We + e * Ke + rn}px`;
+var We = S(Ye, "overflow-hidden"), Ke = "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)]", dn = "absolute inset-y-0 left-5 right-5", Be = 20, Ve = 16, un = 26;
+function pn(e) {
+  return `${Be + e * Ve + un}px`;
 }
-var on = 250, we = 0.8, Ne = 0.5, ln = 0.1, cn = 0.3, dn = 5e-3, un = {
+var hn = 250, ke = 0.8, Me = 0.5, mn = 0.1, fn = 0.3, vn = 5e-3, gn = {
   completed: "bg-pho-inverse/25",
   failed: "bg-pho-error-ink",
   running: "bg-pho-inverse/15 motion-safe:animate-pulse",
   skipped: "border-pho-secondary border border-dashed bg-transparent"
-}, ke = {
+}, Ae = {
   completed: "bg-pho-inverse",
   failed: "bg-pho-error-ink",
   running: "bg-pho-inverse/40",
   skipped: "border-pho-secondary border bg-transparent"
-}, pn = "border-pho-error-ink border bg-transparent", hn = {
+}, bn = "border-pho-error-ink border bg-transparent", xn = {
   completed: null,
   failed: "Failed.",
   running: "Running.",
   skipped: "Skipped."
-}, se = "text-pho-secondary outline-pho-brand hover:bg-pho-ghost-hover hover:text-pho-secondary-hover flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-100 ease-linear focus-visible:outline-2 disabled:pointer-events-none disabled:opacity-40", Me = (e) => ({ backgroundImage: `linear-gradient(to ${e === "left" ? "right" : "left"}, color-mix(in srgb, var(--background-color-pho-inverse) 18%, transparent), transparent)` }), ce = (e, t, n = `${t}s`) => `${e} ${e === 1 ? t : n}`;
-function Ve({ className: e, clippedStart: t, clippedEnd: n, children: a }) {
-  return /* @__PURE__ */ w("div", {
-    className: P("border-pho-secondary relative border-l", e),
+}, se = "text-pho-secondary outline-pho-brand hover:bg-pho-ghost-hover hover:text-pho-secondary-hover flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-100 ease-linear focus-visible:outline-2 disabled:pointer-events-none disabled:opacity-40", Ce = (e) => ({ backgroundImage: `linear-gradient(to ${e === "left" ? "right" : "left"}, color-mix(in srgb, var(--background-color-pho-inverse) 18%, transparent), transparent)` }), ce = (e, t, n = `${t}s`) => `${e} ${e === 1 ? t : n}`;
+function Ue({ className: e, clippedStart: t, clippedEnd: n, children: a }) {
+  return /* @__PURE__ */ N("div", {
+    className: S("border-pho-secondary relative border-l", e),
     children: [
-      /* @__PURE__ */ o("div", {
+      /* @__PURE__ */ s("div", {
         "data-trace-track": "",
-        className: an,
+        className: dn,
         children: a
       }),
-      t ? /* @__PURE__ */ o("span", {
+      t ? /* @__PURE__ */ s("span", {
         "aria-hidden": !0,
         "data-trace-clipped": "start",
         className: "pointer-events-none absolute top-1/2 left-0 h-4 w-2 -translate-y-1/2",
-        style: Me("left")
+        style: Ce("left")
       }) : null,
-      n ? /* @__PURE__ */ o("span", {
+      n ? /* @__PURE__ */ s("span", {
         "aria-hidden": !0,
         "data-trace-clipped": "end",
         className: "pointer-events-none absolute top-1/2 right-0 h-4 w-2 -translate-y-1/2",
-        style: Me("right")
+        style: Ce("right")
       }) : null
     ]
   });
 }
-function mn(e, t) {
+function yn(e, t) {
   return t > 0.5 ? "inside" : e + t > 0.8 ? "before" : "after";
 }
-function fn(e) {
+function wn(e) {
   if (!(e instanceof HTMLElement)) return !1;
   const t = e.tagName;
   return t === "INPUT" || t === "TEXTAREA" || t === "SELECT" || e.isContentEditable;
 }
 var je = de(null);
-function Be() {
+function Ge() {
   const e = ue(je);
   if (e == null) throw new Error("Trace rows render inside Trace.Waterfall only.");
   return e;
 }
-function vn() {
-  const e = Be(), t = ee(), { viewRange: n, now: a, byId: r, matches: s } = G(), { id: l, name: i, type: d, status: c, depth: k, isCollapsed: b, hasChildren: h } = t, v = e.spans.get(l), M = e.selectedId != null && e.selectedId === l, m = M && v != null ? e.renderSpanDetail?.(v) ?? null : null, g = e.renderSpanDetail != null ? `${e.idBase}-span-${l}` : void 0, N = e.onSelect ? () => e.onSelect?.(M ? null : l) : void 0, { left: x, width: _ } = ye(t, n, a), D = t.endedAt ?? a ?? n.max, E = t.startedAt < n.min && D > n.min, T = D > n.max && t.startedAt < n.max, C = D <= n.min, S = C || t.startedAt >= n.max, O = C ? "before" : "after", p = mn(x, _), f = Qt(t, a), y = f == null ? null : Q(f), A = [t.service, d].filter(Boolean).join(", "), te = b ? t.descendants : 0, z = b ? t.descendantErrors : 0, R = hn[c], V = c === "failed", W = Ht(t.attributes), ne = Zt(t.attributes), j = b && t.kind === "client" && t.serverChildId != null ? r.get(t.serverChildId) : void 0, re = j != null ? j.service ?? j.name : !h && (t.kind === "client" || t.kind === "producer") ? Jt(t.attributes) : null, I = j ? ye(j, n, a) : null, $ = s?.has(l) ?? !1, Z = e.activeMatchId === l, pe = (u) => u === "after" ? {
-    left: `calc(${K(x + _)} + 0.375rem)`,
-    maxWidth: `calc(${K(1 - x - _)} - 0.375rem)`
+function Nn() {
+  const e = Ge(), t = ee(), { viewRange: n, now: a, byId: r, matches: o } = G(), { id: l, name: i, type: c, status: d, depth: x, isCollapsed: v, hasChildren: h } = t, g = e.spans.get(l), M = e.selectedId != null && e.selectedId === l, m = M && g != null ? e.renderSpanDetail?.(g) ?? null : null, b = e.renderSpanDetail != null ? `${e.idBase}-span-${l}` : void 0, k = e.onSelect ? () => e.onSelect?.(M ? null : l) : void 0, { left: y, width: T } = Ne(t, n, a), z = t.endedAt ?? a ?? n.max, $ = t.startedAt < n.min && z > n.min, E = z > n.max && t.startedAt < n.max, C = z <= n.min, _ = C || t.startedAt >= n.max, L = C ? "before" : "after", p = yn(y, T), f = rn(t, a), w = f == null ? null : Q(f), A = [t.service, c].filter(Boolean).join(", "), te = v ? t.descendants : 0, D = v ? t.descendantErrors : 0, R = xn[d], B = d === "failed", W = en(t.attributes), ne = tn(t.attributes), V = v && t.kind === "client" && t.serverChildId != null ? r.get(t.serverChildId) : void 0, re = V != null ? V.service ?? V.name : !h && (t.kind === "client" || t.kind === "producer") ? nn(t.attributes) : null, I = V ? Ne(V, n, a) : null, P = o?.has(l) ?? !1, Z = e.activeMatchId === l, pe = (u) => u === "after" ? {
+    left: `calc(${K(y + T)} + 0.375rem)`,
+    maxWidth: `calc(${K(1 - y - T)} - 0.375rem)`
   } : {
-    right: `calc(${K(1 - x)} + 0.375rem)`,
-    maxWidth: `calc(${K(x)} - 0.375rem)`
+    right: `calc(${K(1 - y)} + 0.375rem)`,
+    maxWidth: `calc(${K(y)} - 0.375rem)`
   };
-  return /* @__PURE__ */ w("li", {
+  return /* @__PURE__ */ N("li", {
     className: "m-0",
-    style: { "--trace-indent": sn(k) },
-    children: [/* @__PURE__ */ w(H.Root, {
+    style: { "--trace-indent": pn(x) },
+    children: [/* @__PURE__ */ N(H.Root, {
       "data-trace-row": "",
       "data-selected": M || void 0,
       "data-active-match": Z || void 0,
-      className: P(Fe, "relative min-h-9 items-center transition-colors", "has-[[data-trace-select]:focus-visible]:outline-pho-brand has-[[data-trace-select]:focus-visible]:outline-2 has-[[data-trace-select]:focus-visible]:-outline-offset-2", N != null && "hover:bg-pho-primary-hover", $ && "bg-pho-brand-secondary", Z && "ring-pho-brand ring-1 ring-inset", M && "bg-pho-primary-hover"),
-      children: [/* @__PURE__ */ w(H.Indent, {
-        baseIndent: We,
-        indentPerLevel: Ke,
+      className: S(Ke, "relative min-h-9 items-center transition-colors", "has-[[data-trace-select]:focus-visible]:outline-pho-brand has-[[data-trace-select]:focus-visible]:outline-2 has-[[data-trace-select]:focus-visible]:-outline-offset-2", k != null && "hover:bg-pho-primary-hover", P && "bg-pho-brand-secondary", Z && "ring-pho-brand ring-1 ring-inset", M && "bg-pho-primary-hover"),
+      children: [/* @__PURE__ */ N(H.Indent, {
+        baseIndent: Be,
+        indentPerLevel: Ve,
         className: "flex min-w-0 items-center gap-1.5 py-1.5 pr-5",
         children: [
-          h ? /* @__PURE__ */ o(H.CollapseToggle, {
-            "aria-expanded": !b,
-            "aria-label": `${b ? "Expand" : "Collapse"} ${i}`,
+          h ? /* @__PURE__ */ s(H.CollapseToggle, {
+            "aria-expanded": !v,
+            "aria-label": `${v ? "Expand" : "Collapse"} ${i}`,
             className: "text-pho-secondary outline-pho-brand hover:bg-pho-ghost-hover hover:text-pho-secondary-hover relative z-10 flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-[color,background-color,transform] duration-100 ease-linear focus-visible:outline-2",
-            children: /* @__PURE__ */ o(Ge, {
+            children: /* @__PURE__ */ s(He, {
               "aria-hidden": !0,
-              className: P("size-4 transition-transform duration-150 ease-out", !b && "rotate-90")
+              className: S("size-4 transition-transform duration-150 ease-out", !v && "rotate-90")
             })
-          }) : /* @__PURE__ */ o("span", {
+          }) : /* @__PURE__ */ s("span", {
             "aria-hidden": !0,
             className: "size-5 shrink-0"
           }),
-          /* @__PURE__ */ o(H.StatusIndicator, {
+          /* @__PURE__ */ s(H.StatusIndicator, {
             "aria-hidden": !0,
-            className: P("size-1.5 shrink-0 rounded-full", V ? ke.failed : z > 0 ? pn : ke[c])
+            className: S("size-1.5 shrink-0 rounded-full", B ? Ae.failed : D > 0 ? bn : Ae[d])
           }),
-          W ? /* @__PURE__ */ o(W.icon, {
+          W ? /* @__PURE__ */ s(W.icon, {
             "data-trace-icon": "",
             role: W.label ? "img" : void 0,
             "aria-label": W.label,
             "aria-hidden": W.label ? void 0 : !0,
             className: "text-pho-description size-3.5 shrink-0"
           }) : null,
-          /* @__PURE__ */ w(bn, {
+          /* @__PURE__ */ N(kn, {
             selected: M,
             expanded: e.renderSpanDetail != null ? m != null : void 0,
-            controls: m != null ? g : void 0,
-            onSelect: N,
+            controls: m != null ? b : void 0,
+            onSelect: k,
             children: [
-              /* @__PURE__ */ o(H.Name, { className: "text-pho-primary truncate text-base" }),
-              re ? /* @__PURE__ */ w("span", {
+              /* @__PURE__ */ s(H.Name, { className: "text-pho-primary truncate text-base" }),
+              re ? /* @__PURE__ */ N("span", {
                 "data-trace-callee": "",
                 className: "text-pho-description flex shrink-0 items-center gap-0.5 text-xs",
                 children: [
-                  /* @__PURE__ */ o(qe, {
+                  /* @__PURE__ */ s(st, {
                     "aria-hidden": !0,
                     className: "size-3"
                   }),
-                  /* @__PURE__ */ o("span", {
+                  /* @__PURE__ */ s("span", {
                     className: "sr-only",
                     children: "calls "
                   }),
                   re
                 ]
               }) : null,
-              A ? /* @__PURE__ */ o("span", {
+              A ? /* @__PURE__ */ s("span", {
                 className: "text-pho-description shrink-[3] truncate text-xs",
                 children: A
               }) : null,
-              ne.map((u) => /* @__PURE__ */ o(Je, {
+              ne.map((u) => /* @__PURE__ */ s(nt, {
                 size: "xs",
                 contrast: "low",
                 color: u.error ? "error" : "gray",
@@ -1012,43 +1013,43 @@ function vn() {
                 className: "max-w-32 shrink-0 truncate",
                 children: u.value
               }, u.label)),
-              te > 0 ? /* @__PURE__ */ w("span", {
+              te > 0 ? /* @__PURE__ */ N("span", {
                 className: "text-pho-description shrink-0 text-xs tabular-nums",
                 children: [
                   "(",
                   te,
-                  z > 0 ? `, ${ce(z, "error")}` : "",
+                  D > 0 ? `, ${ce(D, "error")}` : "",
                   ")"
                 ]
               }) : null,
-              R ? /* @__PURE__ */ o("span", {
+              R ? /* @__PURE__ */ s("span", {
                 className: "sr-only",
                 children: R
               }) : null,
-              z > 0 ? /* @__PURE__ */ w("span", {
+              D > 0 ? /* @__PURE__ */ N("span", {
                 className: "sr-only",
-                children: [ce(z, "error"), " hidden."]
+                children: [ce(D, "error"), " hidden."]
               }) : null
             ]
           })
         ]
-      }), /* @__PURE__ */ w(Ve, {
+      }), /* @__PURE__ */ N(Ue, {
         className: "h-9",
-        clippedStart: E,
-        clippedEnd: T,
+        clippedStart: $,
+        clippedEnd: E,
         children: [
-          /* @__PURE__ */ o(H.TimelineBar, {
+          /* @__PURE__ */ s(H.TimelineBar, {
             "aria-hidden": !0,
             "data-trace-bar": "",
-            className: P("top-1/2 h-4 -translate-y-1/2 rounded-sm transition-[inset-inline-start,inline-size] duration-200 ease-out motion-reduce:transition-none", un[c], E && "-ml-5 box-content rounded-l-none pl-5", T && "box-content rounded-r-none pr-5", S && "invisible"),
+            className: S("top-1/2 h-4 -translate-y-1/2 rounded-sm transition-[inset-inline-start,inline-size] duration-200 ease-out motion-reduce:transition-none", gn[d], $ && "-ml-5 box-content rounded-l-none pl-5", E && "box-content rounded-r-none pr-5", _ && "invisible"),
             style: { "--span-timeline-min-width": "2px" },
-            children: p === "inside" && y ? /* @__PURE__ */ o("span", {
+            children: p === "inside" && w ? /* @__PURE__ */ s("span", {
               "data-trace-label": "short",
-              className: P("absolute inset-y-0 flex items-center text-xs whitespace-nowrap tabular-nums", T ? "right-[1.625rem]" : "right-1.5", V ? "text-pho-on-brand" : "text-pho-primary"),
-              children: y
+              className: S("absolute inset-y-0 flex items-center text-xs whitespace-nowrap tabular-nums", E ? "right-[1.625rem]" : "right-1.5", B ? "text-pho-on-brand" : "text-pho-primary"),
+              children: w
             }) : null
           }),
-          j && I ? /* @__PURE__ */ o("span", {
+          V && I ? /* @__PURE__ */ s("span", {
             "aria-hidden": !0,
             "data-trace-rpc": "",
             className: "bg-pho-inverse/45 absolute top-1/2 h-2 -translate-y-1/2 rounded-sm",
@@ -1058,32 +1059,32 @@ function vn() {
               minWidth: "2px"
             }
           }) : null,
-          S && y ? /* @__PURE__ */ o("span", {
+          _ && w ? /* @__PURE__ */ s("span", {
             "aria-hidden": !0,
             "data-trace-label": "outside",
-            "data-side": O,
-            className: P("text-pho-description absolute top-1/2 -translate-y-1/2 text-xs whitespace-nowrap tabular-nums opacity-60", O === "before" ? "left-0" : "right-0"),
-            children: O === "before" ? `‹ ${y}` : `${y} ›`
+            "data-side": L,
+            className: S("text-pho-description absolute top-1/2 -translate-y-1/2 text-xs whitespace-nowrap tabular-nums opacity-60", L === "before" ? "left-0" : "right-0"),
+            children: L === "before" ? `‹ ${w}` : `${w} ›`
           }) : null,
-          !S && p !== "inside" && y ? /* @__PURE__ */ o("span", {
+          !_ && p !== "inside" && w ? /* @__PURE__ */ s("span", {
             "aria-hidden": !0,
             "data-trace-label": "short",
             className: "text-pho-description absolute top-1/2 -translate-y-1/2 truncate text-xs tabular-nums",
             style: pe(p),
-            children: y
+            children: w
           }) : null,
-          y ? /* @__PURE__ */ o("span", {
+          w ? /* @__PURE__ */ s("span", {
             className: "sr-only",
-            children: y
+            children: w
           }) : null
         ]
       })]
-    }), m != null ? /* @__PURE__ */ o(fe.Root, {
+    }), m != null ? /* @__PURE__ */ s(ge.Root, {
       open: !0,
-      children: /* @__PURE__ */ o(fe.Panel, {
+      children: /* @__PURE__ */ s(ge.Panel, {
         className: "motion-reduce:transition-none",
-        children: /* @__PURE__ */ o("section", {
-          id: g,
+        children: /* @__PURE__ */ s("section", {
+          id: b,
           "data-trace-detail": "",
           className: "border-pho-secondary bg-pho-page border-t py-3 pr-5",
           style: { paddingLeft: "var(--trace-indent)" },
@@ -1093,144 +1094,144 @@ function vn() {
     }) : null]
   });
 }
-function bn({ selected: e, expanded: t, controls: n, onSelect: a, children: r }) {
-  const s = "flex min-w-0 flex-1 items-baseline gap-2 text-left";
-  return a == null ? /* @__PURE__ */ o("span", {
-    className: s,
+function kn({ selected: e, expanded: t, controls: n, onSelect: a, children: r }) {
+  const o = "flex min-w-0 flex-1 items-baseline gap-2 text-left";
+  return a == null ? /* @__PURE__ */ s("span", {
+    className: o,
     children: r
-  }) : /* @__PURE__ */ o("button", {
+  }) : /* @__PURE__ */ s("button", {
     type: "button",
     "data-trace-select": "",
     "aria-current": e ? "true" : void 0,
     "aria-expanded": t,
     "aria-controls": n,
     onClick: a,
-    className: P(s, "cursor-pointer outline-none after:absolute after:inset-0 after:content-['']"),
+    className: S(o, "cursor-pointer outline-none after:absolute after:inset-0 after:content-['']"),
     children: r
   });
 }
-function gn(e) {
+function Mn(e) {
   const [t, n] = Y(void 0);
   return ae(() => {
     if (!e) return;
     n(Date.now());
-    const a = setInterval(() => n(Date.now()), on);
+    const a = setInterval(() => n(Date.now()), hn);
     return () => clearInterval(a);
   }, [e]), e ? t : void 0;
 }
-function xn({ spans: e, now: t, selectedId: n, onSelect: a, renderSpanDetail: r, defaultCollapsed: s, collapsed: l, onCollapsedChange: i, foldControls: d = !0, search: c, query: k, onQueryChange: b, defaultView: h, view: v, onViewChange: M, shortcuts: m = "focus", footer: g, className: N, ...x }) {
-  const _ = L(() => Yt(e), [e]), D = L(() => new Map(e.map((y) => [y.id, y])), [e]), E = gn(_.some((y) => y.endedAt == null) && t === void 0), T = t ?? E, [C, S] = Y(""), O = k ?? C, p = F((y) => {
-    k == null && S(y), b?.(y);
-  }, [k, b]), f = L(() => _.filter((y) => y.status === "failed").length, [_]);
-  return /* @__PURE__ */ o(H.Provider, {
-    spans: _,
-    now: T,
-    defaultCollapsed: s,
+function An({ spans: e, now: t, selectedId: n, onSelect: a, renderSpanDetail: r, defaultCollapsed: o, collapsed: l, onCollapsedChange: i, foldControls: c = !0, search: d, query: x, onQueryChange: v, defaultView: h, view: g, onViewChange: M, shortcuts: m = "focus", footer: b, className: k, ...y }) {
+  const T = O(() => an(e), [e]), z = O(() => new Map(e.map((w) => [w.id, w])), [e]), $ = Mn(T.some((w) => w.endedAt == null) && t === void 0), E = t ?? $, [C, _] = Y(""), L = x ?? C, p = F((w) => {
+    x == null && _(w), v?.(w);
+  }, [x, v]), f = O(() => T.filter((w) => w.status === "failed").length, [T]);
+  return /* @__PURE__ */ s(H.Provider, {
+    spans: T,
+    now: E,
+    defaultCollapsed: o,
     collapsed: l,
     onCollapsedChange: i,
-    query: O,
+    query: L,
     defaultView: h,
-    view: v,
+    view: g,
     onViewChange: M,
-    children: /* @__PURE__ */ o(yn, {
-      sources: D,
-      spanCount: _.length,
+    children: /* @__PURE__ */ s(Cn, {
+      sources: z,
+      spanCount: T.length,
       errorCount: f,
       selectedId: n,
       onSelect: a,
       renderSpanDetail: r,
-      foldControls: d,
-      search: c,
-      query: O,
+      foldControls: c,
+      search: d,
+      query: L,
       setQuery: p,
       shortcuts: m,
-      footer: g,
-      className: N,
-      ...x
+      footer: b,
+      className: k,
+      ...y
     })
   });
 }
-function yn({ sources: e, spanCount: t, errorCount: n, selectedId: a, onSelect: r, renderSpanDetail: s, foldControls: l, search: i, query: d, setQuery: c, shortcuts: k, footer: b, className: h, ref: v, ...M }) {
-  const { all: m, matches: g, zoomed: N, zoom: x, pan: _, resetView: D, expandAll: E, collapseAll: T, expandOne: C, collapseOne: S } = G(), O = Ye(), p = he(null), f = he(null), y = F((u) => {
-    p.current = u, typeof v == "function" ? v(u) : v != null && (v.current = u);
-  }, [v]), A = L(() => g == null ? [] : m.filter((u) => g.has(u.id)).map((u) => u.id), [m, g]), [te, z] = Y(0);
-  ae(() => z(0), [d]);
-  const R = A.length > 0 ? A[te % A.length] ?? null : null, V = F((u) => {
-    A.length !== 0 && z((B) => (B + u + A.length) % A.length);
+function Cn({ sources: e, spanCount: t, errorCount: n, selectedId: a, onSelect: r, renderSpanDetail: o, foldControls: l, search: i, query: c, setQuery: d, shortcuts: x, footer: v, className: h, ref: g, ...M }) {
+  const { all: m, matches: b, zoomed: k, zoom: y, pan: T, resetView: z, expandAll: $, collapseAll: E, expandOne: C, collapseOne: _ } = G(), L = at(), p = fe(null), f = fe(null), w = F((u) => {
+    p.current = u, typeof g == "function" ? g(u) : g != null && (g.current = u);
+  }, [g]), A = O(() => b == null ? [] : m.filter((u) => b.has(u.id)).map((u) => u.id), [m, b]), [te, D] = Y(0);
+  ae(() => D(0), [c]);
+  const R = A.length > 0 ? A[te % A.length] ?? null : null, B = F((u) => {
+    A.length !== 0 && D((U) => (U + u + A.length) % A.length);
   }, [A.length]);
   ae(() => {
     if (R == null) return;
     const u = typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(R) : R.replace(/"/g, '\\"');
     p.current?.querySelector(`[data-trace-row][data-span-id="${u}"]`)?.scrollIntoView?.({ block: "nearest" });
   }, [R]);
-  const W = d !== "", ne = a != null && r != null;
+  const W = c !== "", ne = a != null && r != null;
   ae(() => {
-    if (!W && !N && !ne || k === !1) return;
-    const u = (B) => {
-      B.key === "Escape" && (k === "focus" && !(B.target instanceof Node && p.current?.contains(B.target)) || (B.preventDefault(), B.stopPropagation(), W ? c("") : N ? D() : r?.(null)));
+    if (!W && !k && !ne || x === !1) return;
+    const u = (U) => {
+      U.key === "Escape" && (x === "focus" && !(U.target instanceof Node && p.current?.contains(U.target)) || (U.preventDefault(), U.stopPropagation(), W ? d("") : k ? z() : r?.(null)));
     };
     return document.addEventListener("keydown", u, !0), () => document.removeEventListener("keydown", u, !0);
   }, [
     W,
-    N,
-    ne,
     k,
-    c,
-    D,
+    ne,
+    x,
+    d,
+    z,
     r
   ]);
-  const j = F((u) => {
-    if (u.metaKey || u.ctrlKey || u.altKey || fn(u.target)) return !1;
+  const V = F((u) => {
+    if (u.metaKey || u.ctrlKey || u.altKey || wn(u.target)) return !1;
     switch (u.key) {
       case "[":
-        return E(), !0;
+        return $(), !0;
       case "]":
-        return T(), !0;
+        return E(), !0;
       case "o":
         return C(), !0;
       case "p":
-        return S(), !0;
+        return _(), !0;
       case "ArrowUp":
-        return x(u.shiftKey ? Ne : we), !0;
+        return y(u.shiftKey ? Me : ke), !0;
       case "ArrowDown":
-        return N ? (x(u.shiftKey ? 1 / Ne : 1 / we), !0) : !1;
+        return k ? (y(u.shiftKey ? 1 / Me : 1 / ke), !0) : !1;
       case "ArrowLeft":
-        return N ? (_(u.shiftKey ? -0.3 : -0.1), !0) : !1;
+        return k ? (T(u.shiftKey ? -0.3 : -0.1), !0) : !1;
       case "ArrowRight":
-        return N ? (_(u.shiftKey ? cn : ln), !0) : !1;
+        return k ? (T(u.shiftKey ? fn : mn), !0) : !1;
       case "/":
         return f.current == null ? !1 : (f.current.focus(), !0);
       case "f":
-        return A.length === 0 ? !1 : (V(1), !0);
+        return A.length === 0 ? !1 : (B(1), !0);
       case "b":
-        return A.length === 0 ? !1 : (V(-1), !0);
+        return A.length === 0 ? !1 : (B(-1), !0);
       default:
         return !1;
     }
   }, [
+    $,
     E,
-    T,
     C,
-    S,
-    x,
     _,
-    N,
+    y,
+    T,
+    k,
     A.length,
-    V
+    B
   ]);
   ae(() => {
-    if (k === !1) return;
-    const u = (B) => {
-      k === "focus" && !(B.target instanceof Node && p.current?.contains(B.target)) || j(B) && B.preventDefault();
+    if (x === !1) return;
+    const u = (U) => {
+      x === "focus" && !(U.target instanceof Node && p.current?.contains(U.target)) || V(U) && U.preventDefault();
     };
     return document.addEventListener("keydown", u), () => document.removeEventListener("keydown", u);
-  }, [k, j]);
-  const re = L(() => ({
+  }, [x, V]);
+  const re = O(() => ({
     spans: e,
     selectedId: a,
     onSelect: r,
-    renderSpanDetail: s,
-    idBase: O,
+    renderSpanDetail: o,
+    idBase: L,
     spanCount: t,
     errorCount: n,
     activeMatchId: R
@@ -1238,163 +1239,163 @@ function yn({ sources: e, spanCount: t, errorCount: n, selectedId: a, onSelect:
     e,
     a,
     r,
-    s,
-    O,
+    o,
+    L,
     t,
     n,
     R
-  ]), I = m.some((u) => u.hasChildren), $ = i === !0 || typeof i == "string", Z = typeof i == "string" ? i : "Search spans", pe = b === void 0 ? t > 0 ? /* @__PURE__ */ o(Ue, {}) : null : b;
-  return /* @__PURE__ */ o(je.Provider, {
+  ]), I = m.some((u) => u.hasChildren), P = i === !0 || typeof i == "string", Z = typeof i == "string" ? i : "Search spans", pe = v === void 0 ? t > 0 ? /* @__PURE__ */ s(Xe, {}) : null : v;
+  return /* @__PURE__ */ s(je.Provider, {
     value: re,
-    children: /* @__PURE__ */ w("section", {
-      ref: y,
+    children: /* @__PURE__ */ N("section", {
+      ref: w,
       "data-trace": "",
-      "data-zoomed": N || void 0,
+      "data-zoomed": k || void 0,
       "aria-label": "Trace",
-      tabIndex: k === "focus" ? -1 : void 0,
-      className: P(Le, "min-w-0 outline-none", h),
+      tabIndex: x === "focus" ? -1 : void 0,
+      className: S(We, "min-w-0 outline-none", h),
       ...M,
       children: [
-        $ ? /* @__PURE__ */ w("div", {
+        P ? /* @__PURE__ */ N("div", {
           "data-trace-toolbar": "",
           className: "border-pho-secondary flex min-h-10 items-center gap-3 border-b px-5",
-          children: [/* @__PURE__ */ o(He, {
+          children: [/* @__PURE__ */ s(et, {
             ref: f,
-            value: d,
-            onChange: c,
+            value: c,
+            onChange: d,
             placeholder: Z,
             "aria-label": Z,
             onKeyDown: (u) => {
-              u.key === "Enter" ? (u.preventDefault(), V(u.shiftKey ? -1 : 1)) : u.key === "Escape" && d !== "" && (u.preventDefault(), c(""));
+              u.key === "Enter" ? (u.preventDefault(), B(u.shiftKey ? -1 : 1)) : u.key === "Escape" && c !== "" && (u.preventDefault(), d(""));
             }
-          }), W ? /* @__PURE__ */ w(_e, { children: [/* @__PURE__ */ o("span", {
+          }), W ? /* @__PURE__ */ N(Ee, { children: [/* @__PURE__ */ s("span", {
             "data-trace-match-count": "",
             "aria-live": "polite",
             className: "text-pho-description shrink-0 text-xs tabular-nums",
             children: A.length === 0 ? "No matches" : `${te % A.length + 1} of ${A.length}`
-          }), /* @__PURE__ */ w("span", {
+          }), /* @__PURE__ */ N("span", {
             className: "flex shrink-0 items-center",
-            children: [/* @__PURE__ */ o("button", {
+            children: [/* @__PURE__ */ s("button", {
               type: "button",
               "aria-label": "Previous match",
               title: "Previous match (b)",
               disabled: A.length === 0,
-              onClick: () => V(-1),
+              onClick: () => B(-1),
               className: se,
-              children: /* @__PURE__ */ o(Ie, {
+              children: /* @__PURE__ */ s(Te, {
                 "aria-hidden": !0,
                 className: "size-4"
               })
-            }), /* @__PURE__ */ o("button", {
+            }), /* @__PURE__ */ s("button", {
               type: "button",
               "aria-label": "Next match",
               title: "Next match (f)",
               disabled: A.length === 0,
-              onClick: () => V(1),
+              onClick: () => B(1),
               className: se,
-              children: /* @__PURE__ */ o(Se, {
+              children: /* @__PURE__ */ s(Ie, {
                 "aria-hidden": !0,
                 className: "size-4"
               })
             })]
           })] }) : null]
         }) : null,
-        /* @__PURE__ */ w("div", {
+        /* @__PURE__ */ N("div", {
           "data-trace-axis": "",
-          className: P(Fe, "border-pho-secondary h-10 border-b"),
-          children: [/* @__PURE__ */ w("div", {
+          className: S(Ke, "border-pho-secondary h-10 border-b"),
+          children: [/* @__PURE__ */ N("div", {
             className: "flex h-10 min-w-0 items-center gap-2 px-5",
-            children: [N ? /* @__PURE__ */ o(wn, {}) : null, l && I ? /* @__PURE__ */ o(Nn, {}) : null]
-          }), /* @__PURE__ */ o(kn, {})]
+            children: [k ? /* @__PURE__ */ s(Sn, {}) : null, l && I ? /* @__PURE__ */ s(_n, {}) : null]
+          }), /* @__PURE__ */ s(In, {})]
         }),
-        /* @__PURE__ */ o(H.Timeline, {
-          render: /* @__PURE__ */ o("ol", {
+        /* @__PURE__ */ s(H.Timeline, {
+          render: /* @__PURE__ */ s("ol", {
             "aria-label": "Spans",
             className: "m-0 list-none p-0"
           }),
-          children: /* @__PURE__ */ o(H.Children, { children: () => /* @__PURE__ */ o(vn, {}) })
+          children: /* @__PURE__ */ s(H.Children, { children: () => /* @__PURE__ */ s(Nn, {}) })
         }),
         pe
       ]
     })
   });
 }
-function wn() {
+function Sn() {
   const { range: e, viewRange: t, resetView: n } = G(), a = `${Q(t.min - e.min)} – ${Q(t.max - e.min)}`;
-  return /* @__PURE__ */ w("button", {
+  return /* @__PURE__ */ N("button", {
     type: "button",
     "data-trace-zoom-chip": "",
     onClick: n,
     title: "Reset zoom (Esc)",
     "aria-label": `Zoomed to ${a}. Reset zoom`,
-    className: P(Ze({
+    className: S(tt({
       size: "xs",
       contrast: "low",
       color: "brand"
     }), "outline-pho-brand shrink-0 cursor-pointer focus-visible:outline-2"),
-    children: [/* @__PURE__ */ o("span", {
+    children: [/* @__PURE__ */ s("span", {
       "aria-hidden": !0,
       children: a
-    }), /* @__PURE__ */ o(Xe, {
+    }), /* @__PURE__ */ s(Ze, {
       "aria-hidden": !0,
       className: "size-3"
     })]
   });
 }
-function Nn() {
-  const { canExpand: e, canCollapse: t, expandAll: n, collapseAll: a, expandOne: r, collapseOne: s } = G();
-  return /* @__PURE__ */ w("fieldset", {
+function _n() {
+  const { canExpand: e, canCollapse: t, expandAll: n, collapseAll: a, expandOne: r, collapseOne: o } = G();
+  return /* @__PURE__ */ N("fieldset", {
     "data-trace-fold-controls": "",
     className: "m-0 ml-auto flex min-w-0 shrink-0 items-center border-0 p-0",
     children: [
-      /* @__PURE__ */ o("legend", {
+      /* @__PURE__ */ s("legend", {
         className: "sr-only",
         children: "Fold"
       }),
-      /* @__PURE__ */ o("button", {
+      /* @__PURE__ */ s("button", {
         type: "button",
         "aria-label": "Expand one level",
         title: "Expand one level (o)",
         disabled: !e,
         onClick: r,
         className: se,
-        children: /* @__PURE__ */ o(Se, {
+        children: /* @__PURE__ */ s(Ie, {
           "aria-hidden": !0,
           className: "size-4"
         })
       }),
-      /* @__PURE__ */ o("button", {
+      /* @__PURE__ */ s("button", {
         type: "button",
         "aria-label": "Collapse one level",
         title: "Collapse one level (p)",
         disabled: !t,
-        onClick: s,
+        onClick: o,
         className: se,
-        children: /* @__PURE__ */ o(Ie, {
+        children: /* @__PURE__ */ s(Te, {
           "aria-hidden": !0,
           className: "size-4"
         })
       }),
-      /* @__PURE__ */ o("button", {
+      /* @__PURE__ */ s("button", {
         type: "button",
         "aria-label": "Expand all",
         title: "Expand all ([)",
         disabled: !e,
         onClick: n,
         className: se,
-        children: /* @__PURE__ */ o(at, {
+        children: /* @__PURE__ */ s(ct, {
           "aria-hidden": !0,
           className: "size-4"
         })
       }),
-      /* @__PURE__ */ o("button", {
+      /* @__PURE__ */ s("button", {
         type: "button",
         "aria-label": "Collapse all",
         title: "Collapse all (])",
         disabled: !t,
         onClick: a,
         className: se,
-        children: /* @__PURE__ */ o(st, {
+        children: /* @__PURE__ */ s(ut, {
           "aria-hidden": !0,
           className: "size-4"
         })
@@ -1402,61 +1403,61 @@ function Nn() {
     ]
   });
 }
-function kn() {
-  const { range: e, view: t, zoomed: n, setView: a, resetView: r } = G(), s = e.max - e.min, l = L(() => en(0, s), [s]), [i, d] = Y(280), c = he(null);
+function In() {
+  const { range: e, view: t, zoomed: n, setView: a, resetView: r } = G(), o = e.max - e.min, l = O(() => on(0, o), [o]), [i, c] = Y(280), d = fe(null);
   ae(() => {
-    const p = c.current;
+    const p = d.current;
     if (p == null) return;
     const f = () => {
       const A = p.clientWidth;
-      A > 0 && d(A);
+      A > 0 && c(A);
     };
     f();
-    const y = new ResizeObserver(f);
-    return y.observe(p), () => y.disconnect();
+    const w = new ResizeObserver(f);
+    return w.observe(p), () => w.disconnect();
   }, []);
-  const k = new Map(Oe(l, i).map((p) => [p.ms, p.align])), [b, h] = Y(null), [v, M] = Y(null), m = (p) => {
-    const f = c.current?.getBoundingClientRect();
+  const x = new Map(Fe(l, i).map((p) => [p.ms, p.align])), [v, h] = Y(null), [g, M] = Y(null), m = (p) => {
+    const f = d.current?.getBoundingClientRect();
     return f == null || f.width <= 0 ? 0 : Math.min(1, Math.max(0, (p.clientX - f.left) / f.width));
-  }, g = (p, f) => {
-    c.current?.setPointerCapture?.(p.pointerId), M(f);
-  }, N = (p) => {
+  }, b = (p, f) => {
+    d.current?.setPointerCapture?.(p.pointerId), M(f);
+  }, k = (p) => {
     if (p.button !== 0) return;
     const f = m(p);
-    g(p, {
+    b(p, {
       kind: "select",
       from: f,
       to: f
     });
-  }, x = (p) => (f) => {
-    f.button === 0 && (f.stopPropagation(), g(f, {
+  }, y = (p) => (f) => {
+    f.button === 0 && (f.stopPropagation(), b(f, {
       kind: "resize",
       edge: p
     }));
-  }, _ = (p) => {
+  }, T = (p) => {
     const f = m(p);
-    if (v == null) {
+    if (g == null) {
       h(f);
       return;
     }
-    v.kind === "select" ? M({
-      ...v,
+    g.kind === "select" ? M({
+      ...g,
       to: f
-    }) : a(v.edge === "start" ? [Math.min(f, t[1] - J), t[1]] : [t[0], Math.max(f, t[0] + J)]);
-  }, D = (p) => {
-    if (v == null) return;
+    }) : a(g.edge === "start" ? [Math.min(f, t[1] - J), t[1]] : [t[0], Math.max(f, t[0] + J)]);
+  }, z = (p) => {
+    if (g == null) return;
     const f = m(p);
-    if (M(null), v.kind !== "select") {
-      a(v.edge === "start" ? [Math.min(f, t[1] - J), t[1]] : [t[0], Math.max(f, t[0] + J)]);
+    if (M(null), g.kind !== "select") {
+      a(g.edge === "start" ? [Math.min(f, t[1] - J), t[1]] : [t[0], Math.max(f, t[0] + J)]);
       return;
     }
-    const [y, A] = v.from < f ? [v.from, f] : [f, v.from];
-    A - y < dn || a([y, A]);
-  }, E = () => {
+    const [w, A] = g.from < f ? [g.from, f] : [f, g.from];
+    A - w < vn || a([w, A]);
+  }, $ = () => {
     h(null), M(null);
-  }, T = () => {
-    h(null), v?.kind === "select" && M(null);
-  }, C = v?.kind === "select" ? v : null, S = C != null ? C.from < C.to ? {
+  }, E = () => {
+    h(null), g?.kind === "select" && M(null);
+  }, C = g?.kind === "select" ? g : null, _ = C != null ? C.from < C.to ? {
     left: C.from,
     width: C.to - C.from
   } : {
@@ -1465,242 +1466,252 @@ function kn() {
   } : n ? {
     left: t[0],
     width: t[1] - t[0]
-  } : null, O = (p) => p * s;
-  return /* @__PURE__ */ o(Ve, {
+  } : null, L = (p) => p * o;
+  return /* @__PURE__ */ s(Ue, {
     className: "h-10",
-    children: /* @__PURE__ */ w("div", {
-      ref: c,
+    children: /* @__PURE__ */ N("div", {
+      ref: d,
       "aria-hidden": !0,
       role: "presentation",
       "data-trace-axis-track": "",
       title: "Drag to zoom, double-click to reset",
       className: "absolute inset-0 cursor-crosshair touch-none select-none",
-      onPointerDown: N,
-      onPointerMove: _,
-      onPointerUp: D,
-      onPointerCancel: E,
-      onPointerLeave: T,
+      onPointerDown: k,
+      onPointerMove: T,
+      onPointerUp: z,
+      onPointerCancel: $,
+      onPointerLeave: E,
       onDoubleClick: r,
       children: [
         l.map((p) => {
-          const f = k.get(p.ms);
-          return /* @__PURE__ */ w("span", {
+          const f = x.get(p.ms);
+          return /* @__PURE__ */ N("span", {
             "data-trace-tick": "",
             "data-labeled": f != null || void 0,
             className: "text-pho-description absolute inset-y-0 text-xs tabular-nums",
             style: { left: K(p.at) },
-            children: [/* @__PURE__ */ o("span", { className: "bg-pho-secondary absolute bottom-0 left-0 h-1.5 w-px" }), f != null ? /* @__PURE__ */ o("span", {
-              className: P("absolute inset-y-0 flex items-center whitespace-nowrap", f === "end" ? "right-1" : "left-1"),
-              children: De(p.ms)
+            children: [/* @__PURE__ */ s("span", { className: "bg-pho-secondary absolute bottom-0 left-0 h-1.5 w-px" }), f != null ? /* @__PURE__ */ s("span", {
+              className: S("absolute inset-y-0 flex items-center whitespace-nowrap", f === "end" ? "right-1" : "left-1"),
+              children: Oe(p.ms)
             }) : null]
           }, p.ms);
         }),
-        b != null && v == null ? /* @__PURE__ */ o("span", {
+        v != null && g == null ? /* @__PURE__ */ s("span", {
           "data-trace-cursor": "",
           className: "bg-pho-inverse/40 pointer-events-none absolute inset-y-0 w-px",
-          style: { left: K(b) },
-          children: /* @__PURE__ */ o("span", {
-            className: P("bg-pho-primary text-pho-secondary absolute top-1/2 z-10 -translate-y-1/2 rounded-sm px-1 text-[10px] whitespace-nowrap tabular-nums", b > 0.8 ? "right-1" : "left-1"),
-            children: Q(O(b))
+          style: { left: K(v) },
+          children: /* @__PURE__ */ s("span", {
+            className: S("bg-pho-primary text-pho-secondary absolute top-1/2 z-10 -translate-y-1/2 rounded-sm px-1 text-[10px] whitespace-nowrap tabular-nums", v > 0.8 ? "right-1" : "left-1"),
+            children: Q(L(v))
           })
         }) : null,
-        S ? /* @__PURE__ */ w(_e, { children: [
-          /* @__PURE__ */ o("span", {
+        _ ? /* @__PURE__ */ N(Ee, { children: [
+          /* @__PURE__ */ s("span", {
             "data-trace-selection-shade": "start",
             className: "bg-pho-inverse/10 pointer-events-none absolute inset-y-0 left-0",
-            style: { width: K(S.left) }
+            style: { width: K(_.left) }
           }),
-          /* @__PURE__ */ o("span", {
+          /* @__PURE__ */ s("span", {
             "data-trace-selection-shade": "end",
             className: "bg-pho-inverse/10 pointer-events-none absolute inset-y-0 right-0",
-            style: { width: K(1 - S.left - S.width) }
+            style: { width: K(1 - _.left - _.width) }
           }),
-          /* @__PURE__ */ o("span", {
+          /* @__PURE__ */ s("span", {
             "data-trace-selection": "",
             "data-selecting": C != null || void 0,
             className: "border-pho-ink bg-pho-primary pointer-events-none absolute inset-y-0 flex items-center justify-center border-x-2",
             style: {
-              left: K(S.left),
-              width: K(S.width)
+              left: K(_.left),
+              width: K(_.width)
             },
-            children: /* @__PURE__ */ w("span", {
+            children: /* @__PURE__ */ N("span", {
               className: "bg-pho-primary text-pho-primary z-10 rounded-sm px-1 text-[10px] whitespace-nowrap tabular-nums",
               children: [
-                Q(O(S.left)),
+                Q(L(_.left)),
                 " –",
                 " ",
-                Q(O(S.left + S.width))
+                Q(L(_.left + _.width))
               ]
             })
           }),
-          /* @__PURE__ */ o(Ae, {
-            at: S.left,
+          /* @__PURE__ */ s(Se, {
+            at: _.left,
             "data-trace-selection-handle": "start",
-            className: P(C == null && "cursor-ew-resize"),
-            onPointerDown: C == null ? x("start") : void 0
+            className: S(C == null && "cursor-ew-resize"),
+            onPointerDown: C == null ? y("start") : void 0
           }),
-          /* @__PURE__ */ o(Ae, {
-            at: S.left + S.width,
+          /* @__PURE__ */ s(Se, {
+            at: _.left + _.width,
             "data-trace-selection-handle": "end",
-            className: P(C == null && "cursor-ew-resize"),
-            onPointerDown: C == null ? x("end") : void 0
+            className: S(C == null && "cursor-ew-resize"),
+            onPointerDown: C == null ? y("end") : void 0
           })
         ] }) : null
       ]
     })
   });
 }
-function Ae({ at: e, className: t, ...n }) {
-  return /* @__PURE__ */ w("span", {
+function Se({ at: e, className: t, ...n }) {
+  return /* @__PURE__ */ N("span", {
     "aria-hidden": !0,
-    className: P("border-pho-ink bg-pho-primary absolute top-1/2 z-10 flex h-5 w-2.5 -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-0.5 rounded-sm border shadow-sm", t),
+    className: S("border-pho-ink bg-pho-primary absolute top-1/2 z-10 flex h-5 w-2.5 -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-0.5 rounded-sm border shadow-sm", t),
     style: { left: K(e) },
     ...n,
-    children: [/* @__PURE__ */ o("span", { className: "bg-pho-inverse h-2.5 w-px" }), /* @__PURE__ */ o("span", { className: "bg-pho-inverse h-2.5 w-px" })]
+    children: [/* @__PURE__ */ s("span", { className: "bg-pho-inverse h-2.5 w-px" }), /* @__PURE__ */ s("span", { className: "bg-pho-inverse h-2.5 w-px" })]
   });
 }
-function Mn({ spanCount: e, errorCount: t, orphanCount: n = 0, durationMs: a }) {
+function Tn({ spanCount: e, errorCount: t, orphanCount: n = 0, durationMs: a }) {
   const r = [ce(e, "span")];
   return t > 0 && r.push(ce(t, "error")), n > 0 && r.push(`${n} missing ${n === 1 ? "parent" : "parents"}`), r.push(`${Q(a)} total`), r;
 }
-function Ue({ className: e, ...t }) {
-  const { spanCount: n, errorCount: a } = Be(), { range: r, orphans: s } = G(), l = Mn({
+function Xe({ className: e, ...t }) {
+  const { spanCount: n, errorCount: a } = Ge(), { range: r, orphans: o } = G(), l = Tn({
     spanCount: n,
     errorCount: a,
-    orphanCount: s,
+    orphanCount: o,
     durationMs: r.max - r.min
   });
-  return /* @__PURE__ */ w("div", {
+  return /* @__PURE__ */ N("div", {
     "data-trace-footer": "",
-    className: P("border-pho-secondary text-pho-description @container flex h-10 items-center justify-between gap-3 border-t px-5 text-xs", e),
+    className: S("border-pho-secondary text-pho-description @container flex h-10 items-center justify-between gap-3 border-t px-5 text-xs", e),
     ...t,
-    children: [/* @__PURE__ */ w("ul", {
+    children: [/* @__PURE__ */ N("ul", {
       "data-trace-legend": "",
       className: "hidden shrink-0 items-center gap-3 @2xl:flex",
-      children: [/* @__PURE__ */ o(Ce, {
+      children: [/* @__PURE__ */ s(_e, {
         className: "bg-pho-inverse/25",
         label: "Span"
-      }), /* @__PURE__ */ o(Ce, {
+      }), /* @__PURE__ */ s(_e, {
         className: "bg-pho-error-ink",
         label: "Error"
       })]
-    }), /* @__PURE__ */ o("ul", {
+    }), /* @__PURE__ */ s("ul", {
       className: "flex min-w-0 items-center gap-3 overflow-hidden tabular-nums",
-      children: l.map((i) => /* @__PURE__ */ o("li", {
+      children: l.map((i) => /* @__PURE__ */ s("li", {
         className: "shrink-0 last:min-w-0 last:truncate",
         children: i
       }, i))
     })]
   });
 }
-function Ce({ className: e, label: t }) {
-  return /* @__PURE__ */ w("li", {
+function _e({ className: e, label: t }) {
+  return /* @__PURE__ */ N("li", {
     className: "flex items-center gap-1.5",
-    children: [/* @__PURE__ */ o("span", {
+    children: [/* @__PURE__ */ s("span", {
       "aria-hidden": !0,
-      className: P("size-2.5 shrink-0 rounded-sm", e)
+      className: S("size-2.5 shrink-0 rounded-sm", e)
     }), t]
   });
 }
-var An = {
+var En = {
   debug: "text-pho-description",
   info: "text-pho-secondary",
   warn: "text-pho-warning",
   error: "text-pho-error"
-};
-function Cn({ logs: e, spans: t, title: n = "Logs", className: a, ...r }) {
-  const s = L(() => new Map((t ?? []).map((l) => [l.id, l.name])), [t]);
-  return e == null || e.length === 0 ? null : /* @__PURE__ */ w("section", {
+}, me = "grid grid-cols-[5rem_3.5rem_minmax(0,1fr)] gap-3 px-5", $n = 5;
+function Pn({ logs: e, spans: t, loading: n, title: a, className: r, ...o }) {
+  const l = O(() => new Map((t ?? []).map((c) => [c.id, c.name])), [t]), i = n ? Array.from({ length: n === !0 ? $n : n }) : [];
+  return i.length === 0 && (e == null || e.length === 0) ? null : /* @__PURE__ */ N("section", {
+    ...o,
     "data-trace-logs": "",
-    className: P(Le, "min-w-0", a),
-    ...r,
-    children: [/* @__PURE__ */ w("div", {
-      className: "border-pho-secondary flex min-h-10 items-center justify-between gap-3 border-b px-5",
-      children: [/* @__PURE__ */ o("div", {
-        className: "text-pho-secondary min-w-0 truncate text-xs font-medium",
-        children: n
-      }), /* @__PURE__ */ w("div", {
-        className: "text-pho-description shrink-0 text-xs tabular-nums",
+    "aria-busy": i.length > 0 ? !0 : void 0,
+    className: S(We, "min-w-0", Je.sm, r),
+    children: [
+      a ? /* @__PURE__ */ s("span", {
+        className: "sr-only",
+        children: a
+      }) : null,
+      /* @__PURE__ */ N("div", {
+        "data-trace-logs-header": "",
+        className: S(me, qe, "items-center"),
         children: [
-          e.length,
-          " ",
-          e.length === 1 ? "line" : "lines"
+          /* @__PURE__ */ s("span", { children: "Offset" }),
+          /* @__PURE__ */ s("span", { children: "Level" }),
+          /* @__PURE__ */ s("span", { children: "Message" })
         ]
-      })]
-    }), /* @__PURE__ */ o("ol", {
-      className: "divide-pho-secondary m-0 list-none divide-y p-0 font-mono text-xs",
-      children: e.map((l, i) => {
-        const d = l.level ?? "info", c = l.spanId ? s.get(l.spanId) : void 0;
-        return /* @__PURE__ */ w("li", {
-          className: "grid grid-cols-[5rem_3.5rem_minmax(0,1fr)] items-baseline gap-3 px-5 py-1.5",
+      }),
+      /* @__PURE__ */ s("ol", {
+        className: S(Qe, "m-0 list-none p-0 font-mono"),
+        children: i.length > 0 ? i.map((c, d) => /* @__PURE__ */ N("li", {
+          className: S(me, "h-10 items-center"),
           children: [
-            /* @__PURE__ */ w("span", {
-              className: "text-pho-description tabular-nums",
-              children: ["+", Q(l.offsetMs)]
-            }),
-            /* @__PURE__ */ o("span", {
-              className: P("truncate", An[d]),
-              children: d.charAt(0).toUpperCase() + d.slice(1)
-            }),
-            /* @__PURE__ */ w("span", {
-              className: "text-pho-primary [overflow-wrap:anywhere] whitespace-pre-wrap",
-              children: [l.message, c ? /* @__PURE__ */ w("span", {
-                className: "text-pho-description",
-                children: [" ", c]
-              }) : null]
-            })
+            /* @__PURE__ */ s(he, { className: "h-3.5 w-14" }),
+            /* @__PURE__ */ s(he, { className: "h-3.5 w-9" }),
+            /* @__PURE__ */ s(he, { className: "h-3.5 w-64 max-w-full" })
           ]
-        }, l.id ?? i);
+        }, d)) : e.map((c, d) => {
+          const x = c.level ?? "info", v = c.spanId ? l.get(c.spanId) : void 0;
+          return /* @__PURE__ */ N("li", {
+            className: S(me, "items-baseline py-1.5"),
+            children: [
+              /* @__PURE__ */ N("span", {
+                className: "text-pho-description tabular-nums",
+                children: ["+", Q(c.offsetMs)]
+              }),
+              /* @__PURE__ */ s("span", {
+                className: S("truncate", En[x]),
+                children: x.charAt(0).toUpperCase() + x.slice(1)
+              }),
+              /* @__PURE__ */ N("span", {
+                className: "text-pho-primary [overflow-wrap:anywhere] whitespace-pre-wrap",
+                children: [c.message, v ? /* @__PURE__ */ N("span", {
+                  className: "text-pho-description",
+                  children: [" ", v]
+                }) : null]
+              })
+            ]
+          }, c.id ?? d);
+        })
       })
-    })]
+    ]
   });
 }
-var Sn = Object.assign(xn, { Footer: Ue }), jn = {
-  Waterfall: Sn,
-  Logs: Cn
+var Dn = Object.assign(An, { Footer: Xe }), Yn = {
+  Waterfall: Dn,
+  Logs: Pn
 };
 export {
-  kt as A,
-  Ee as B,
-  be as C,
-  Wn as D,
-  yt as E,
-  It as F,
-  Tt as I,
-  At as L,
-  Mt as M,
-  $t as N,
+  It as A,
+  Pe as B,
+  xe as C,
+  Hn as D,
+  Ct as E,
+  Dt as F,
+  zt as I,
+  Et as L,
+  Tt as M,
+  Ot as N,
   ie as O,
-  _t as P,
-  Kn as R,
+  Rt as P,
+  Zn as R,
   G as S,
-  Nt as T,
-  St as V,
-  Jt as _,
-  ye as a,
+  _t as T,
+  Pt as V,
+  nn as _,
+  Ne as a,
   H as b,
-  Vn as c,
-  Yt as d,
-  Qt as f,
-  Xt as g,
-  Gt as h,
-  en as i,
-  Te as j,
-  wt as k,
-  Oe as l,
-  me as m,
-  Mn as n,
+  Jn as c,
+  an as d,
+  rn as f,
+  qt as g,
+  Qt as h,
+  on as i,
+  $e as j,
+  St as k,
+  Fe as l,
+  ve as m,
+  Tn as n,
   Q as o,
-  Bt as p,
-  sn as r,
-  De as s,
-  jn as t,
-  qt as u,
-  Ht as v,
+  Jt as p,
+  pn as r,
+  Oe as s,
+  Yn as t,
+  sn as u,
+  en as v,
   J as w,
   ee as x,
-  Zt as y,
-  Ct as z
+  tn as y,
+  $t as z
 };
 
-//# sourceMappingURL=trace-CjOi3_IP.js.map
+//# sourceMappingURL=trace-D1fOFzJt.js.map