chordia-ui 3.4.1 → 3.4.2

package/dist/Timeline.es.js

@@ -1,556 +1,90 @@
-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
+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
 }) {
-  const [w, k] = H(null);
-  A(() => {
-    if (!w)
+  const [u, v] = L(null);
+  D(() => {
+    if (!u)
       return;
-    const r = setTimeout(() => k(null), 220);
-    return () => clearTimeout(r);
-  }, [w]);
-  const o = Math.max(
-    Number(h) || 0,
-    ...s.map((r) => Number(r.endTime) || 0),
+    const t = setTimeout(() => v(null), 220);
+    return () => clearTimeout(t);
+  }, [u]);
+  const a = Math.max(
+    Number(T) || 0,
+    ...d.map((t) => Number(t.endTime) || 0),
     1
-  ), 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)
+  ), 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)
       }));
-    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)
+    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)
     }));
-  }, [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)
+  }, [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)
       return;
-    const p = r.currentTarget.getBoundingClientRect();
-    if (!p.width)
+    const i = t.currentTarget.getBoundingClientRect();
+    if (!i.width)
       return;
-    const a = Math.max(0, Math.min((r.clientX - p.left) / p.width, 1));
-    b(a * o);
+    const e = Math.max(0, Math.min((t.clientX - i.left) / i.width, 1));
+    f(e * a);
   };
-  return /* @__PURE__ */ u("div", { style: {
+  return /* @__PURE__ */ o("div", { style: {
     padding: "10px 0"
   }, children: [
-    y && /* @__PURE__ */ u("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }, children: [
-      /* @__PURE__ */ u("div", { style: {
+    M && /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }, children: [
+      /* @__PURE__ */ o("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: [
-        c(e),
+        n(C),
         " ",
-        /* @__PURE__ */ u("span", { style: { color: "var(--text-faint, rgba(30,33,37,0.36))" }, children: [
+        /* @__PURE__ */ o("span", { style: { color: "var(--text-faint, rgba(30,33,37,0.36))" }, children: [
           "/ ",
-          c(o)
+          n(a)
         ] })
       ] }),
-      /* @__PURE__ */ u("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-        /* @__PURE__ */ t(
+      /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+        /* @__PURE__ */ r(
           "button",
           {
             type: "button",
             onClick: () => {
-              k("rewind"), i == null || i();
+              v("rewind"), h == null || h();
             },
-            disabled: !g,
+            disabled: !m,
             title: "Rewind 15s",
             style: {
               display: "inline-flex",
@@ -559,20 +93,20 @@ function tt({
               width: 28,
               height: 28,
               borderRadius: "50%",
-              border: `1px solid ${w === "rewind" ? "var(--rail-discovery, #5E88B0)" : "var(--border, rgba(52,58,64,0.12))"}`,
+              border: `1px solid ${u === "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__ */ t(Y, { size: 13, stroke: "var(--rail-discovery, #5E88B0)" })
+            children: /* @__PURE__ */ r(S, { size: 13, stroke: "var(--rail-discovery, #5E88B0)" })
           }
         ),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ r(
           "button",
           {
             type: "button",
-            onClick: n,
-            disabled: !g,
+            onClick: I,
+            disabled: !m,
             style: {
               display: "inline-flex",
               alignItems: "center",
@@ -586,18 +120,18 @@ function tt({
               cursor: "pointer",
               padding: 0
             },
-            "aria-label": S ? "Pause recording" : "Play recording",
-            children: S ? /* @__PURE__ */ t(F, { size: 14 }) : /* @__PURE__ */ t(D, { size: 14, style: { marginLeft: 1 } })
+            "aria-label": x ? "Pause recording" : "Play recording",
+            children: x ? /* @__PURE__ */ r(X, { size: 14 }) : /* @__PURE__ */ r(A, { size: 14, style: { marginLeft: 1 } })
           }
         ),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ r(
           "button",
           {
             type: "button",
             onClick: () => {
-              k("forward"), x == null || x();
+              v("forward"), y == null || y();
             },
-            disabled: !g,
+            disabled: !m,
             title: "Forward 15s",
             style: {
               display: "inline-flex",
@@ -606,23 +140,23 @@ function tt({
               width: 28,
               height: 28,
               borderRadius: "50%",
-              border: `1px solid ${w === "forward" ? "var(--rail-discovery, #5E88B0)" : "var(--border, rgba(52,58,64,0.12))"}`,
+              border: `1px solid ${u === "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__ */ t(_, { size: 13, stroke: "var(--rail-discovery, #5E88B0)" })
+            children: /* @__PURE__ */ r(N, { size: 13, stroke: "var(--rail-discovery, #5E88B0)" })
           }
         ),
-        /* @__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(
+        /* @__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(
             "button",
             {
               type: "button",
-              onClick: () => R == null ? void 0 : R(r),
-              disabled: !g,
-              title: `Speed: ${r}x`,
+              onClick: () => g == null ? void 0 : g(t),
+              disabled: !m,
+              title: `Speed: ${t}x`,
               style: {
                 display: "inline-flex",
                 alignItems: "center",
@@ -631,49 +165,49 @@ function tt({
                 minWidth: 38,
                 padding: "0 6px",
                 borderRadius: 999,
-                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))",
+                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))",
                 fontSize: "var(--text-xs, 10px)",
                 fontWeight: 600,
                 cursor: "pointer"
               },
-              children: r === 1.5 ? "1.50x" : `${r}x`
+              children: t === 1.5 ? "1.50x" : `${t}x`
             },
-            r
+            t
           );
         }) })
       ] })
     ] }),
-    /* @__PURE__ */ t("div", { style: {
+    /* @__PURE__ */ r("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__ */ 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(
+    }, 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(
             "div",
             {
               style: {
                 position: "absolute",
                 fontSize: "var(--text-xs, 10px)",
                 color: "var(--text-faint, rgba(30,33,37,0.36))",
-                left: `${p}%`,
+                left: `${i}%`,
                 transform: "translateX(-50%)",
                 fontFamily: "var(--font-mono, monospace)",
                 whiteSpace: "nowrap"
               },
-              children: c(r)
+              children: n(t)
             },
-            r
+            t
           );
         }) })
       ] }),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ r(
         "div",
         {
           style: {
@@ -685,29 +219,29 @@ function tt({
             width: "calc(100% - 5rem)",
             zIndex: 20
           },
-          children: m.map((r) => {
-            const p = o > 0 ? r / o * 100 : 0;
-            return /* @__PURE__ */ t(
+          children: l.map((t) => {
+            const i = a > 0 ? t / a * 100 : 0;
+            return /* @__PURE__ */ r(
               "div",
               {
                 style: {
                   position: "absolute",
                   top: 0,
                   bottom: 0,
-                  left: `${p}%`,
+                  left: `${i}%`,
                   borderLeft: "1px dashed var(--border, rgba(52,58,64,0.12))",
                   transform: "translateX(-1px)"
                 }
               },
-              r
+              t
             );
           })
         }
       ),
-      /* @__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(
+      /* @__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(
             "div",
             {
               style: {
@@ -719,10 +253,10 @@ function tt({
                 fontFamily: "var(--font-sans, system-ui, sans-serif)",
                 paddingRight: 8
               },
-              children: r.label
+              children: t.label
             }
           ),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ r(
             "div",
             {
               style: {
@@ -733,54 +267,54 @@ function tt({
                 backgroundColor: "var(--paper-secondary, rgba(244,241,230,0.6))",
                 border: "1px solid var(--border-subtle, rgba(52,58,64,0.08))"
               },
-              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(
+              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(
                   "div",
                   {
                     style: {
                       position: "absolute",
                       cursor: "pointer",
-                      left: `${z}%`,
+                      left: `${s}%`,
                       top: "50%",
                       transform: "translateY(-50%)",
                       width: 10,
                       height: 10,
                       borderRadius: "50%",
-                      backgroundColor: r.color,
+                      backgroundColor: t.color,
                       opacity: 0.85
                     },
-                    title: `${r.label}: ${c(a.startTime)}-${c(a.endTime)}`
+                    title: `${t.label}: ${n(e.startTime)}-${n(e.endTime)}`
                   },
-                  I
-                ) : /* @__PURE__ */ t(
+                  c
+                ) : /* @__PURE__ */ r(
                   "div",
                   {
                     style: {
                       position: "absolute",
                       top: 0,
                       bottom: 0,
-                      left: `${z}%`,
-                      width: `${Math.max(L, 0.7)}%`,
-                      maxWidth: `${100 - z}%`,
-                      backgroundColor: r.color,
+                      left: `${s}%`,
+                      width: `${Math.max(p, 0.7)}%`,
+                      maxWidth: `${100 - s}%`,
+                      backgroundColor: t.color,
                       opacity: 0.85,
                       borderRadius: 2,
                       cursor: "pointer",
                       transition: "opacity 0.15s"
                     },
-                    title: `${r.label}: ${c(a.startTime)}-${c(a.endTime)}`
+                    title: `${t.label}: ${n(e.startTime)}-${n(e.endTime)}`
                   },
-                  I
+                  c
                 );
               })
             }
           )
-        ] }, r.key);
+        ] }, t.key);
       }) }),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ r(
         "div",
         {
           style: {
@@ -793,16 +327,16 @@ function tt({
             backgroundColor: "var(--rail-discovery, #5E88B0)",
             opacity: 0.55,
             boxShadow: "0 0 0 1px rgba(94,136,176,0.10)",
-            left: d,
+            left: z,
             transform: "translateX(-50%)"
           }
         }
       ),
-      b ? /* @__PURE__ */ t(
+      f ? /* @__PURE__ */ r(
         "button",
         {
           type: "button",
-          onClick: M,
+          onClick: R,
           style: {
             position: "absolute",
             cursor: "pointer",
@@ -825,8 +359,6 @@ function tt({
   ] });
 }
 export {
-  O as C,
-  U as T,
-  tt as a
+  J as T
 };
 //# sourceMappingURL=Timeline.es.js.map