chordia-ui 3.4.2 → 3.4.4

package/dist/Timeline.es.js

@@ -1,90 +1,556 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { useState as L, useEffect as D, useMemo as P } from "react";
-import { RotateCcw as S, Pause as X, Play as A, RotateCw as N } from "lucide-react";
-function J({
-  segments: d = [],
-  durationSeconds: T = 0,
-  actorRows: b = [],
-  currentTimeSeconds: w = 0,
-  onSeek: f,
-  showControls: M = !1,
-  hasRecording: m = !1,
-  timelinePlaying: x = !1,
-  playbackRate: k = 1,
-  speedOptions: E = [1, 1.25, 1.5, 2],
-  onTogglePlay: I,
-  onSeekBack: h,
-  onSeekForward: y,
-  onSetPlaybackRate: g,
-  totalDurationLabel: F
+import { jsx as t, jsxs as u } from "react/jsx-runtime";
+import { useEffect as A, useState as H, useRef as W, useMemo as X } from "react";
+import { Pause as F, Play as D, RotateCcw as Y, RotateCw as _ } from "lucide-react";
+const P = {
+  customer: {
+    label: "Customer",
+    railColor: "var(--rail-discovery)",
+    cardBg: "var(--card-customer)",
+    cardBgHighlight: "rgba(94, 136, 176, 0.12)",
+    borderColor: "var(--border-subtle)"
+  },
+  agent: {
+    label: "Agent",
+    railColor: "var(--rail-outcome)",
+    cardBg: "var(--card-agent)",
+    cardBgHighlight: "rgba(107, 124, 147, 0.10)",
+    borderColor: "var(--border-subtle)"
+  },
+  assistant: {
+    label: "AI Assistant",
+    railColor: "var(--rail-purple)",
+    cardBg: "var(--card-assistant)",
+    cardBgHighlight: "rgba(155, 122, 168, 0.10)",
+    borderColor: "var(--border-subtle)"
+  },
+  system: {
+    label: "System",
+    railColor: "var(--text-faint)",
+    cardBg: "transparent",
+    cardBgHighlight: "transparent",
+    borderColor: "transparent"
+  }
+}, j = "conversation-turn-keyframes";
+function K() {
+  if (typeof document > "u" || document.getElementById(j))
+    return;
+  const s = document.createElement("style");
+  s.id = j, s.textContent = `
+    @keyframes turn-playing-pulse {
+      0%, 100% { opacity: 0.4; }
+      50% { opacity: 0.9; }
+    }
+  `, document.head.appendChild(s);
+}
+function O({
+  role: s = "agent",
+  text: h,
+  actorLabel: f,
+  actorRailColor: B,
+  actionKicker: b,
+  toolBadges: y,
+  streaming: g = !1,
+  meta: S,
+  timeRange: E,
+  isHighlighted: T = !1,
+  highlightRailColor: n,
+  observations: i,
+  onObservationClick: x,
+  children: R
+}) {
+  A(() => {
+    K();
+  }, []);
+  const C = P[s] || P.agent, w = f || C.label, k = B || C.railColor, o = T || g;
+  return s === "system" ? /* @__PURE__ */ t(
+    "div",
+    {
+      style: {
+        textAlign: "center",
+        padding: "6px 0",
+        flexShrink: 0,
+        fontSize: "var(--text-sm, 11px)",
+        color: "var(--text-faint, rgba(30,33,37,0.36))",
+        fontWeight: 500,
+        letterSpacing: "0.02em"
+      },
+      children: h
+    }
+  ) : /* @__PURE__ */ u(
+    "div",
+    {
+      style: {
+        position: "relative",
+        padding: "10px 14px 10px 18px",
+        borderRadius: 10,
+        overflow: "hidden",
+        flexShrink: 0,
+        background: o ? C.cardBgHighlight : C.cardBg,
+        border: `1px solid ${g ? k : C.borderColor}`,
+        boxShadow: g ? `0 0 8px ${C.cardBgHighlight}` : "none",
+        transition: "background 0.2s, border-color 0.2s, box-shadow 0.2s"
+      },
+      children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              bottom: 0,
+              width: "var(--rail-width-thin, 4px)",
+              backgroundColor: k,
+              borderRadius: "10px 0 0 10px"
+            }
+          }
+        ),
+        /* @__PURE__ */ u(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-start",
+              justifyContent: "space-between",
+              gap: 8,
+              marginBottom: 4
+            },
+            children: [
+              /* @__PURE__ */ u("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+                b ? /* @__PURE__ */ t(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "var(--text-xs-plus, 10.5px)",
+                      fontWeight: 650,
+                      textTransform: "uppercase",
+                      letterSpacing: "var(--tracking-label, 0.16em)",
+                      color: k
+                    },
+                    children: b
+                  }
+                ) : null,
+                /* @__PURE__ */ t(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "var(--text-xs-plus, 10.5px)",
+                      fontWeight: 650,
+                      textTransform: "uppercase",
+                      letterSpacing: "var(--tracking-label, 0.16em)",
+                      color: "var(--text-faint, rgba(30,33,37,0.36))"
+                    },
+                    children: w
+                  }
+                )
+              ] }),
+              y && y.length > 0 ? /* @__PURE__ */ t("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, flexShrink: 0, justifyContent: "flex-end" }, children: y.map((e, l) => {
+                const d = e.pending, c = !d && e.success === !1;
+                return /* @__PURE__ */ u(
+                  "span",
+                  {
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: 5,
+                      fontSize: "var(--text-xs, 10px)",
+                      padding: "2px 8px 2px 6px",
+                      borderRadius: 999,
+                      background: "var(--paper, rgba(255,255,255,0.78))",
+                      border: "1px solid var(--border-subtle, rgba(52,58,64,0.08))",
+                      color: "var(--text-faint, rgba(30,33,37,0.36))",
+                      fontWeight: 500,
+                      fontFamily: "var(--font-fira-code, var(--font-mono, monospace))",
+                      letterSpacing: "0.01em",
+                      lineHeight: 1.4,
+                      whiteSpace: "nowrap"
+                    },
+                    children: [
+                      /* @__PURE__ */ t(
+                        "span",
+                        {
+                          style: {
+                            width: 5,
+                            height: 5,
+                            borderRadius: "50%",
+                            backgroundColor: d ? "var(--rail-discovery, #5E88B0)" : c ? "var(--rail-compliance, #C98A5A)" : "var(--text-xfaint, rgba(30,33,37,0.28))",
+                            flexShrink: 0
+                          }
+                        }
+                      ),
+                      e.name
+                    ]
+                  },
+                  l
+                );
+              }) }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ u(
+          "div",
+          {
+            style: {
+              fontSize: "var(--text-md, 13px)",
+              lineHeight: "var(--leading-normal, 1.5)",
+              color: g ? "var(--text-strong, rgba(30,33,37,0.92))" : "var(--text-base, rgba(30,33,37,0.78))",
+              fontWeight: g ? 550 : 400
+            },
+            children: [
+              h,
+              g ? /* @__PURE__ */ t(
+                "span",
+                {
+                  style: {
+                    display: "inline-block",
+                    width: 6,
+                    height: 14,
+                    background: k,
+                    marginLeft: 2,
+                    borderRadius: 1,
+                    animation: "cursorBlink 0.8s ease-in-out infinite",
+                    verticalAlign: "text-bottom"
+                  }
+                }
+              ) : null
+            ]
+          }
+        ),
+        E || R || i && i.length > 0 ? /* @__PURE__ */ u("div", { style: { marginTop: 6, display: "flex", alignItems: "center", gap: 6 }, children: [
+          R,
+          E ? /* @__PURE__ */ t(
+            "span",
+            {
+              style: {
+                fontSize: "var(--text-sm, 11px)",
+                padding: "2px 8px",
+                borderRadius: 999,
+                border: "1px solid var(--border, rgba(52,58,64,0.12))",
+                background: "var(--timestamp-bg, rgba(255,255,255,0.70))",
+                color: "var(--text-muted, rgba(30,33,37,0.56))",
+                fontFamily: "var(--font-mono, monospace)"
+              },
+              children: E
+            }
+          ) : null,
+          i && i.length > 0 ? /* @__PURE__ */ t("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, marginLeft: "auto" }, children: i.map((e, l) => /* @__PURE__ */ u(
+            "span",
+            {
+              onClick: e.onClick || (x ? () => x(e) : void 0),
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 4,
+                fontSize: "var(--text-xs, 10px)",
+                padding: "2px 8px",
+                borderRadius: 999,
+                background: `color-mix(in srgb, ${e.color || "var(--state-present)"} 12%, transparent)`,
+                border: `1px solid color-mix(in srgb, ${e.color || "var(--state-present)"} 25%, transparent)`,
+                color: e.color || "var(--state-present)",
+                fontWeight: 550,
+                lineHeight: 1.4,
+                whiteSpace: "nowrap",
+                cursor: e.onClick || x ? "pointer" : "default",
+                transition: "background 0.15s"
+              },
+              title: e.reason || e.label,
+              children: [
+                /* @__PURE__ */ t("span", { style: {
+                  width: 4,
+                  height: 4,
+                  borderRadius: "50%",
+                  backgroundColor: e.color || "var(--state-present)",
+                  flexShrink: 0,
+                  opacity: 0.7
+                } }),
+                e.label
+              ]
+            },
+            l
+          )) }) : null
+        ] }) : null,
+        S ? /* @__PURE__ */ t(
+          "div",
+          {
+            style: {
+              marginTop: 6,
+              fontSize: "var(--text-xs-plus, 10.5px)",
+              color: "var(--text-faint, rgba(30,33,37,0.36))",
+              fontFamily: "var(--font-mono, monospace)"
+            },
+            children: S
+          }
+        ) : null,
+        o && n ? /* @__PURE__ */ t(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              right: 8,
+              top: 8,
+              bottom: 8,
+              width: 6,
+              borderRadius: 4,
+              backgroundColor: n,
+              opacity: 0.7,
+              animation: "turn-playing-pulse 1.5s ease-in-out infinite"
+            }
+          }
+        ) : null
+      ]
+    }
+  );
+}
+const V = (s) => {
+  const [h, f] = s.split("–").map((B) => {
+    const [b, y] = B.split(":").map(Number);
+    return b * 60 + y;
+  });
+  return { start: h, end: f };
+}, q = (s) => ({
+  customer: "customer",
+  agent: "agent",
+  third_party: "agent",
+  system: "system",
+  assistant: "assistant"
+})[s] || "agent";
+function U({
+  turns: s,
+  audioUrl: h,
+  activeTurnIndex: f = -1,
+  autoScrollActiveTurn: B = !1,
+  isExternalPlaying: b = !1,
+  onTurnPlayPause: y
+}) {
+  const [g, S] = H(null), [E, T] = H(!1), n = W(null), i = W(null), x = W([]), R = W(null), C = W(-1), w = typeof y == "function", k = b !== void 0;
+  A(() => {
+    if (h)
+      return n.current = new Audio(h), n.current.preload = "auto", () => {
+        n.current && (n.current.pause(), n.current = null);
+      };
+  }, [h]), A(() => () => {
+    n.current && (n.current.pause(), i.current && n.current.removeEventListener("timeupdate", i.current));
+  }, []), A(() => {
+    if (!B || f < 0)
+      return;
+    const e = R.current, l = x.current[f];
+    if (!l || !e)
+      return;
+    const d = e.getBoundingClientRect(), c = l.getBoundingClientRect(), v = 12, m = c.top >= d.top + v && c.bottom <= d.bottom - 8;
+    if (!(C.current === f) || !m) {
+      const M = c.top - d.top + e.scrollTop;
+      e.scrollTop = Math.max(M - v, 0);
+    }
+    C.current = f;
+  }, [f, B]);
+  const o = (e, l) => {
+    if (w) {
+      y(s[l], l);
+      return;
+    }
+    if (g === l && E)
+      n.current && (n.current.pause(), i.current && (n.current.removeEventListener("timeupdate", i.current), i.current = null)), T(!1);
+    else {
+      const d = g;
+      if (S(l), h && n.current) {
+        const { start: c, end: v } = V(e);
+        d !== null && d !== l && (n.current.pause(), i.current && (n.current.removeEventListener("timeupdate", i.current), i.current = null));
+        const m = () => {
+          if (n.current) {
+            if (n.current.currentTime = c, v) {
+              const $ = () => {
+                n.current && n.current.currentTime >= v && (n.current.pause(), T(!1), S(null), i.current && (n.current.removeEventListener("timeupdate", i.current), i.current = null));
+              };
+              i.current = $, n.current.addEventListener("timeupdate", $);
+            }
+            n.current.play().then(() => T(!0)).catch(($) => {
+              $ && $.name === "AbortError" || (T(!1), S(null));
+            });
+          }
+        };
+        n.current.readyState >= 2 ? m() : (n.current.addEventListener("loadedmetadata", m, { once: !0 }), n.current.load());
+      } else
+        T(!0);
+    }
+  };
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      ref: R,
+      className: "custom-thin-scrollbar-library",
+      style: {
+        maxHeight: 560,
+        overflowY: "auto",
+        scrollBehavior: "smooth",
+        border: "1px solid var(--border, rgba(52,58,64,0.12))",
+        // borderRadius: "var(--radius-lg, 12px)",
+        borderRadius: "12px 0px 0px 12px",
+        background: "var(--paper-elevated, rgba(255,255,255,0.82))",
+        padding: 16
+      },
+      children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            style: {
+              fontSize: "var(--text-xs-plus, 10.5px)",
+              fontWeight: 650,
+              textTransform: "uppercase",
+              letterSpacing: "var(--tracking-label, 0.16em)",
+              color: "var(--text-faint, rgba(30,33,37,0.36))",
+              marginBottom: 12
+            },
+            children: "Transcript"
+          }
+        ),
+        /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: s.map((e, l) => {
+          const d = w || k ? !!b && f === l : g === l && E, c = !!e.isHighlighted || d, v = q(e.actorType);
+          return /* @__PURE__ */ t(
+            "div",
+            {
+              ref: (m) => {
+                x.current[l] = m;
+              },
+              children: /* @__PURE__ */ t(
+                O,
+                {
+                  role: v,
+                  text: e.text,
+                  actorLabel: e.actor,
+                  actorRailColor: e.actorColor,
+                  timeRange: e.timeRange,
+                  isHighlighted: c,
+                  highlightRailColor: d ? e.highlightColor || (v === "agent" ? "var(--rail-outcome)" : "var(--rail-discovery)") : e.highlightColor,
+                  toolBadges: e.toolBadges,
+                  observations: e.observations,
+                  onObservationClick: e.onObservationClick,
+                  children: e.timeRange ? /* @__PURE__ */ t(
+                    "button",
+                    {
+                      onClick: () => o(e.timeRange, l),
+                      style: {
+                        width: 24,
+                        height: 24,
+                        borderRadius: "50%",
+                        border: "1px solid var(--border, rgba(52,58,64,0.12))",
+                        background: d ? "var(--rail-discovery, #5E88B0)" : "var(--paper, rgba(255,255,255,0.78))",
+                        display: "inline-flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        cursor: "pointer",
+                        padding: 0,
+                        transition: "all 0.15s"
+                      },
+                      "aria-label": d ? `Pause segment ${e.timeRange}` : `Play segment ${e.timeRange}`,
+                      children: d ? /* @__PURE__ */ t(
+                        F,
+                        {
+                          style: { width: 12, height: 12, color: "var(--paper, #fff)", fill: "var(--paper, #fff)" },
+                          strokeWidth: 0
+                        }
+                      ) : /* @__PURE__ */ t(
+                        D,
+                        {
+                          style: { width: 12, height: 12, color: "var(--text-muted, rgba(30,33,37,0.56))", fill: "var(--text-muted, rgba(30,33,37,0.56))", marginLeft: 1 },
+                          strokeWidth: 0
+                        }
+                      )
+                    }
+                  ) : null
+                }
+              )
+            },
+            l
+          );
+        }) })
+      ]
+    }
+  );
+}
+function tt({
+  segments: s = [],
+  durationSeconds: h = 0,
+  actorRows: f = [],
+  currentTimeSeconds: B = 0,
+  onSeek: b,
+  showControls: y = !1,
+  hasRecording: g = !1,
+  timelinePlaying: S = !1,
+  playbackRate: E = 1,
+  speedOptions: T = [1, 1.25, 1.5, 2],
+  onTogglePlay: n,
+  onSeekBack: i,
+  onSeekForward: x,
+  onSetPlaybackRate: R,
+  totalDurationLabel: C
 }) {
-  const [u, v] = L(null);
-  D(() => {
-    if (!u)
+  const [w, k] = H(null);
+  A(() => {
+    if (!w)
       return;
-    const t = setTimeout(() => v(null), 220);
-    return () => clearTimeout(t);
-  }, [u]);
-  const a = Math.max(
-    Number(T) || 0,
-    ...d.map((t) => Number(t.endTime) || 0),
+    const r = setTimeout(() => k(null), 220);
+    return () => clearTimeout(r);
+  }, [w]);
+  const o = Math.max(
+    Number(h) || 0,
+    ...s.map((r) => Number(r.endTime) || 0),
     1
-  ), C = Math.max(0, Math.min(Number(w) || 0, a)), $ = a > 0 ? C / a * 100 : 0, z = `calc(${$}% + ${(5 * (1 - $ / 100)).toFixed(4)}rem)`, n = (t) => {
-    const i = Math.floor(t / 60), e = Math.floor(t % 60);
-    return `${i.toString().padStart(2, "0")}:${e.toString().padStart(2, "0")}`;
-  }, B = P(() => {
-    if (b.length)
-      return b.map((e) => ({
-        ...e,
-        segments: d.filter((c) => c.actor === e.key)
+  ), e = Math.max(0, Math.min(Number(B) || 0, o)), l = o > 0 ? e / o * 100 : 0, d = `calc(${l}% + ${(5 * (1 - l / 100)).toFixed(4)}rem)`, c = (r) => {
+    const p = Math.floor(r / 60), a = Math.floor(r % 60);
+    return `${p.toString().padStart(2, "0")}:${a.toString().padStart(2, "0")}`;
+  }, v = X(() => {
+    if (f.length)
+      return f.map((a) => ({
+        ...a,
+        segments: s.filter((I) => I.actor === a.key)
       }));
-    const t = Array.from(new Set(d.map((e) => e.actor))), i = new Map(d.map((e) => [e.actor, e.actorColor]));
-    return t.map((e) => ({
-      key: e,
-      label: e,
-      color: i.get(e) || "#6B7C93",
-      segments: d.filter((c) => c.actor === e)
+    const r = Array.from(new Set(s.map((a) => a.actor))), p = new Map(s.map((a) => [a.actor, a.actorColor]));
+    return r.map((a) => ({
+      key: a,
+      label: a,
+      color: p.get(a) || "#6B7C93",
+      segments: s.filter((I) => I.actor === a)
     }));
-  }, [b, d]), l = [], j = 120;
-  for (let t = 0; t <= a; t += j)
-    l.push(t);
-  (!l.length || l[l.length - 1] < a) && l.push(a);
-  const R = (t) => {
-    if (!f)
+  }, [f, s]), m = [], $ = 120;
+  for (let r = 0; r <= o; r += $)
+    m.push(r);
+  (!m.length || m[m.length - 1] < o) && m.push(o);
+  const M = (r) => {
+    if (!b)
       return;
-    const i = t.currentTarget.getBoundingClientRect();
-    if (!i.width)
+    const p = r.currentTarget.getBoundingClientRect();
+    if (!p.width)
       return;
-    const e = Math.max(0, Math.min((t.clientX - i.left) / i.width, 1));
-    f(e * a);
+    const a = Math.max(0, Math.min((r.clientX - p.left) / p.width, 1));
+    b(a * o);
   };
-  return /* @__PURE__ */ o("div", { style: {
+  return /* @__PURE__ */ u("div", { style: {
     padding: "10px 0"
   }, children: [
-    M && /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }, children: [
-      /* @__PURE__ */ o("div", { style: {
+    y && /* @__PURE__ */ u("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }, children: [
+      /* @__PURE__ */ u("div", { style: {
         fontSize: "var(--text-sm, 11px)",
         fontFamily: "var(--font-mono, monospace)",
         color: "var(--text-muted, rgba(30,33,37,0.56))",
         fontWeight: 500,
         minWidth: 70
       }, children: [
-        n(C),
+        c(e),
         " ",
-        /* @__PURE__ */ o("span", { style: { color: "var(--text-faint, rgba(30,33,37,0.36))" }, children: [
+        /* @__PURE__ */ u("span", { style: { color: "var(--text-faint, rgba(30,33,37,0.36))" }, children: [
           "/ ",
-          n(a)
+          c(o)
         ] })
       ] }),
-      /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-        /* @__PURE__ */ r(
+      /* @__PURE__ */ u("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+        /* @__PURE__ */ t(
           "button",
           {
             type: "button",
             onClick: () => {
-              v("rewind"), h == null || h();
+              k("rewind"), i == null || i();
             },
-            disabled: !m,
+            disabled: !g,
             title: "Rewind 15s",
             style: {
               display: "inline-flex",
@@ -93,20 +559,20 @@ function J({
               width: 28,
               height: 28,
               borderRadius: "50%",
-              border: `1px solid ${u === "rewind" ? "var(--rail-discovery, #5E88B0)" : "var(--border, rgba(52,58,64,0.12))"}`,
+              border: `1px solid ${w === "rewind" ? "var(--rail-discovery, #5E88B0)" : "var(--border, rgba(52,58,64,0.12))"}`,
               background: "var(--paper, rgba(255,255,255,0.78))",
               cursor: "pointer",
               padding: 0
             },
-            children: /* @__PURE__ */ r(S, { size: 13, stroke: "var(--rail-discovery, #5E88B0)" })
+            children: /* @__PURE__ */ t(Y, { size: 13, stroke: "var(--rail-discovery, #5E88B0)" })
           }
         ),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ t(
           "button",
           {
             type: "button",
-            onClick: I,
-            disabled: !m,
+            onClick: n,
+            disabled: !g,
             style: {
               display: "inline-flex",
               alignItems: "center",
@@ -120,18 +586,18 @@ function J({
               cursor: "pointer",
               padding: 0
             },
-            "aria-label": x ? "Pause recording" : "Play recording",
-            children: x ? /* @__PURE__ */ r(X, { size: 14 }) : /* @__PURE__ */ r(A, { size: 14, style: { marginLeft: 1 } })
+            "aria-label": S ? "Pause recording" : "Play recording",
+            children: S ? /* @__PURE__ */ t(F, { size: 14 }) : /* @__PURE__ */ t(D, { size: 14, style: { marginLeft: 1 } })
           }
         ),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ t(
           "button",
           {
             type: "button",
             onClick: () => {
-              v("forward"), y == null || y();
+              k("forward"), x == null || x();
             },
-            disabled: !m,
+            disabled: !g,
             title: "Forward 15s",
             style: {
               display: "inline-flex",
@@ -140,23 +606,23 @@ function J({
               width: 28,
               height: 28,
               borderRadius: "50%",
-              border: `1px solid ${u === "forward" ? "var(--rail-discovery, #5E88B0)" : "var(--border, rgba(52,58,64,0.12))"}`,
+              border: `1px solid ${w === "forward" ? "var(--rail-discovery, #5E88B0)" : "var(--border, rgba(52,58,64,0.12))"}`,
               background: "var(--paper, rgba(255,255,255,0.78))",
               cursor: "pointer",
               padding: 0
             },
-            children: /* @__PURE__ */ r(N, { size: 13, stroke: "var(--rail-discovery, #5E88B0)" })
+            children: /* @__PURE__ */ t(_, { size: 13, stroke: "var(--rail-discovery, #5E88B0)" })
           }
         ),
-        /* @__PURE__ */ r("div", { style: { display: "inline-flex", alignItems: "center", gap: 4, borderRadius: 999, border: "1px solid var(--border, rgba(52,58,64,0.12))", padding: "2px 3px", background: "var(--paper, rgba(255,255,255,0.78))", marginLeft: 4 }, children: E.map((t) => {
-          const i = k === t;
-          return /* @__PURE__ */ r(
+        /* @__PURE__ */ t("div", { style: { display: "inline-flex", alignItems: "center", gap: 4, borderRadius: 999, border: "1px solid var(--border, rgba(52,58,64,0.12))", padding: "2px 3px", background: "var(--paper, rgba(255,255,255,0.78))", marginLeft: 4 }, children: T.map((r) => {
+          const p = E === r;
+          return /* @__PURE__ */ t(
             "button",
             {
               type: "button",
-              onClick: () => g == null ? void 0 : g(t),
-              disabled: !m,
-              title: `Speed: ${t}x`,
+              onClick: () => R == null ? void 0 : R(r),
+              disabled: !g,
+              title: `Speed: ${r}x`,
               style: {
                 display: "inline-flex",
                 alignItems: "center",
@@ -165,49 +631,49 @@ function J({
                 minWidth: 38,
                 padding: "0 6px",
                 borderRadius: 999,
-                border: `1px solid ${i ? "var(--rail-discovery, #5E88B0)" : "transparent"}`,
-                background: i ? "var(--rail-discovery, #5E88B0)" : "transparent",
-                color: i ? "#fff" : "var(--text-muted, rgba(30,33,37,0.56))",
+                border: `1px solid ${p ? "var(--rail-discovery, #5E88B0)" : "transparent"}`,
+                background: p ? "var(--rail-discovery, #5E88B0)" : "transparent",
+                color: p ? "#fff" : "var(--text-muted, rgba(30,33,37,0.56))",
                 fontSize: "var(--text-xs, 10px)",
                 fontWeight: 600,
                 cursor: "pointer"
               },
-              children: t === 1.5 ? "1.50x" : `${t}x`
+              children: r === 1.5 ? "1.50x" : `${r}x`
             },
-            t
+            r
           );
         }) })
       ] })
     ] }),
-    /* @__PURE__ */ r("div", { style: {
+    /* @__PURE__ */ t("div", { style: {
       background: "var(--paper, rgba(255,255,255,0.78))",
       border: "1px solid var(--border, rgba(52,58,64,0.12))",
       borderRadius: 10,
       padding: "12px 16px 10px"
-    }, children: /* @__PURE__ */ o("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", marginBottom: 6, height: 16 }, children: [
-        /* @__PURE__ */ r("div", { style: { width: "5rem", flexShrink: 0 } }),
-        /* @__PURE__ */ r("div", { style: { position: "relative", flex: 1 }, children: l.map((t) => {
-          const i = a > 0 ? t / a * 100 : 0;
-          return /* @__PURE__ */ r(
+    }, children: /* @__PURE__ */ u("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ u("div", { style: { display: "flex", alignItems: "center", marginBottom: 6, height: 16 }, children: [
+        /* @__PURE__ */ t("div", { style: { width: "5rem", flexShrink: 0 } }),
+        /* @__PURE__ */ t("div", { style: { position: "relative", flex: 1 }, children: m.map((r) => {
+          const p = o > 0 ? r / o * 100 : 0;
+          return /* @__PURE__ */ t(
             "div",
             {
               style: {
                 position: "absolute",
                 fontSize: "var(--text-xs, 10px)",
                 color: "var(--text-faint, rgba(30,33,37,0.36))",
-                left: `${i}%`,
+                left: `${p}%`,
                 transform: "translateX(-50%)",
                 fontFamily: "var(--font-mono, monospace)",
                 whiteSpace: "nowrap"
               },
-              children: n(t)
+              children: c(r)
             },
-            t
+            r
           );
         }) })
       ] }),
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ t(
         "div",
         {
           style: {
@@ -219,29 +685,29 @@ function J({
             width: "calc(100% - 5rem)",
             zIndex: 20
           },
-          children: l.map((t) => {
-            const i = a > 0 ? t / a * 100 : 0;
-            return /* @__PURE__ */ r(
+          children: m.map((r) => {
+            const p = o > 0 ? r / o * 100 : 0;
+            return /* @__PURE__ */ t(
               "div",
               {
                 style: {
                   position: "absolute",
                   top: 0,
                   bottom: 0,
-                  left: `${i}%`,
+                  left: `${p}%`,
                   borderLeft: "1px dashed var(--border, rgba(52,58,64,0.12))",
                   transform: "translateX(-1px)"
                 }
               },
-              t
+              r
             );
           })
         }
       ),
-      /* @__PURE__ */ r("div", { style: { display: "flex", flexDirection: "column", gap: 10, marginTop: 8 }, children: B.map((t) => {
-        const i = t.key === "system" || t.label === "System";
-        return /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center" }, children: [
-          /* @__PURE__ */ r(
+      /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 10, marginTop: 8 }, children: v.map((r) => {
+        const p = r.key === "system" || r.label === "System";
+        return /* @__PURE__ */ u("div", { style: { display: "flex", alignItems: "center" }, children: [
+          /* @__PURE__ */ t(
             "div",
             {
               style: {
@@ -253,10 +719,10 @@ function J({
                 fontFamily: "var(--font-sans, system-ui, sans-serif)",
                 paddingRight: 8
               },
-              children: t.label
+              children: r.label
             }
           ),
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ t(
             "div",
             {
               style: {
@@ -267,54 +733,54 @@ function J({
                 backgroundColor: "var(--paper-secondary, rgba(244,241,230,0.6))",
                 border: "1px solid var(--border-subtle, rgba(52,58,64,0.08))"
               },
-              children: t.segments.map((e, c) => {
-                let s = a > 0 ? e.startTime / a * 100 : 0, p = a > 0 ? (e.endTime - e.startTime) / a * 100 : 0;
-                s = Math.max(0, Math.min(100, s)), s + p > 100 && (p = 100 - s), p = Math.max(0, p);
-                const W = e.endTime - e.startTime;
-                return i && W <= 5 ? /* @__PURE__ */ r(
+              children: r.segments.map((a, I) => {
+                let z = o > 0 ? a.startTime / o * 100 : 0, L = o > 0 ? (a.endTime - a.startTime) / o * 100 : 0;
+                z = Math.max(0, Math.min(100, z)), z + L > 100 && (L = 100 - z), L = Math.max(0, L);
+                const N = a.endTime - a.startTime;
+                return p && N <= 5 ? /* @__PURE__ */ t(
                   "div",
                   {
                     style: {
                       position: "absolute",
                       cursor: "pointer",
-                      left: `${s}%`,
+                      left: `${z}%`,
                       top: "50%",
                       transform: "translateY(-50%)",
                       width: 10,
                       height: 10,
                       borderRadius: "50%",
-                      backgroundColor: t.color,
+                      backgroundColor: r.color,
                       opacity: 0.85
                     },
-                    title: `${t.label}: ${n(e.startTime)}-${n(e.endTime)}`
+                    title: `${r.label}: ${c(a.startTime)}-${c(a.endTime)}`
                   },
-                  c
-                ) : /* @__PURE__ */ r(
+                  I
+                ) : /* @__PURE__ */ t(
                   "div",
                   {
                     style: {
                       position: "absolute",
                       top: 0,
                       bottom: 0,
-                      left: `${s}%`,
-                      width: `${Math.max(p, 0.7)}%`,
-                      maxWidth: `${100 - s}%`,
-                      backgroundColor: t.color,
+                      left: `${z}%`,
+                      width: `${Math.max(L, 0.7)}%`,
+                      maxWidth: `${100 - z}%`,
+                      backgroundColor: r.color,
                       opacity: 0.85,
                       borderRadius: 2,
                       cursor: "pointer",
                       transition: "opacity 0.15s"
                     },
-                    title: `${t.label}: ${n(e.startTime)}-${n(e.endTime)}`
+                    title: `${r.label}: ${c(a.startTime)}-${c(a.endTime)}`
                   },
-                  c
+                  I
                 );
               })
             }
           )
-        ] }, t.key);
+        ] }, r.key);
       }) }),
-      /* @__PURE__ */ r(
+      /* @__PURE__ */ t(
         "div",
         {
           style: {
@@ -327,16 +793,16 @@ function J({
             backgroundColor: "var(--rail-discovery, #5E88B0)",
             opacity: 0.55,
             boxShadow: "0 0 0 1px rgba(94,136,176,0.10)",
-            left: z,
+            left: d,
             transform: "translateX(-50%)"
           }
         }
       ),
-      f ? /* @__PURE__ */ r(
+      b ? /* @__PURE__ */ t(
         "button",
         {
           type: "button",
-          onClick: R,
+          onClick: M,
           style: {
             position: "absolute",
             cursor: "pointer",
@@ -359,6 +825,8 @@ function J({
   ] });
 }
 export {
-  J as T
+  O as C,
+  U as T,
+  tt as a
 };
 //# sourceMappingURL=Timeline.es.js.map