@vuer-ai/vuer-uikit 0.0.4 → 0.0.7

package/dist/chunk-XCCC7HVN.mjs

@@ -0,0 +1,603 @@
+import { TreeView } from './chunk-O4TK3AKI.mjs';
+import { cn } from './chunk-KTNZSZ5Y.mjs';
+import { Magnet, ChevronLeft, ChevronRight } from 'lucide-react';
+import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var formatDuration = (seconds) => {
+  const sign = seconds < 0 ? "-" : "";
+  const absSeconds = Math.abs(seconds);
+  if (absSeconds < 1) {
+    if (absSeconds < 5e-4) return "0s";
+    return `${sign}${Math.round(absSeconds * 1e3)}ms`;
+  }
+  if (absSeconds < 60) {
+    return `${sign}${absSeconds.toFixed(3)}s`;
+  }
+  const SECONDS_IN_MINUTE = 60;
+  const SECONDS_IN_HOUR = 3600;
+  const SECONDS_IN_DAY = 86400;
+  const SECONDS_IN_MONTH = 2592e3;
+  const SECONDS_IN_YEAR = 31536e3;
+  if (absSeconds < SECONDS_IN_HOUR) {
+    const m = Math.floor(absSeconds / SECONDS_IN_MINUTE);
+    const s = absSeconds % SECONDS_IN_MINUTE;
+    return `${sign}${m}m ${s.toFixed(2).padStart(5, "0")}s`;
+  }
+  if (absSeconds < SECONDS_IN_DAY) {
+    const h = Math.floor(absSeconds / SECONDS_IN_HOUR);
+    const m = Math.floor(absSeconds % SECONDS_IN_HOUR / SECONDS_IN_MINUTE);
+    const s = Math.floor(absSeconds % SECONDS_IN_MINUTE);
+    return `${sign}${h}h ${String(m).padStart(2, "0")}m ${String(s).padStart(2, "0")}s`;
+  }
+  if (absSeconds < SECONDS_IN_MONTH) {
+    const d2 = Math.floor(absSeconds / SECONDS_IN_DAY);
+    const h = Math.floor(absSeconds % SECONDS_IN_DAY / SECONDS_IN_HOUR);
+    const m = Math.floor(absSeconds % SECONDS_IN_HOUR / SECONDS_IN_MINUTE);
+    return `${sign}${d2}d ${String(h).padStart(2, "0")}h ${String(m).padStart(2, "0")}m`;
+  }
+  if (absSeconds < SECONDS_IN_YEAR) {
+    const mo2 = Math.floor(absSeconds / SECONDS_IN_MONTH);
+    const d2 = Math.floor(absSeconds % SECONDS_IN_MONTH / SECONDS_IN_DAY);
+    const h = Math.floor(absSeconds % SECONDS_IN_DAY / SECONDS_IN_HOUR);
+    return `${sign}${mo2}mo ${String(d2).padStart(3, "0")}d ${String(h).padStart(2, "0")}h`;
+  }
+  const y = Math.floor(absSeconds / SECONDS_IN_YEAR);
+  const mo = Math.floor(absSeconds % SECONDS_IN_YEAR / SECONDS_IN_MONTH);
+  const d = Math.floor(absSeconds % SECONDS_IN_MONTH / SECONDS_IN_DAY);
+  return `${sign}${y}y ${String(mo).padStart(2, "0")}mo ${String(d).padStart(3, "0")}d`;
+};
+var borderColorClasses = {
+  blue: "border-blue-500/85",
+  green: "border-green-500/85",
+  orange: "border-orange-500/85",
+  purple: "border-purple-500/85",
+  "gray-light": "border-line-secondary/20",
+  "gray-medium": "border-slate-500/85"
+};
+var colorClasses = {
+  blue: "bg-blue-500/85",
+  green: "bg-green-500/85",
+  orange: "bg-orange-500/85",
+  purple: "bg-purple-500/85",
+  "gray-light": "bg-line-secondary/20",
+  "gray-medium": "bg-slate-500/85"
+};
+var leftWedgeClasses = {
+  blue: "border-l-blue-500/85",
+  green: "border-l-green-500/85",
+  orange: "border-l-orange-500/85",
+  purple: "border-l-purple-500/85",
+  "gray-light": "border-l-slate-300",
+  "gray-medium": "border-l-slate-500/85"
+};
+var rightWedgeClasses = {
+  blue: "border-r-blue-500/85",
+  green: "border-r-green-500/85",
+  orange: "border-r-orange-500/85",
+  purple: "border-r-purple-500/85",
+  "gray-light": "border-r-slate-300",
+  "gray-medium": "border-r-slate-500/85"
+};
+function Timeline({ data, totalDuration, getIcon }) {
+  const [visibleData, setVisibleData] = useState([]);
+  const [hoveredId, setHoveredId] = useState(null);
+  const timelineContainerRef = useRef(null);
+  const [viewStart, setViewStart] = useState(-totalDuration * 0.25);
+  const [viewDuration, setViewDuration] = useState(totalDuration * 1.5);
+  const timeToPercent = useCallback(
+    (time) => (time - viewStart) / viewDuration * 100,
+    [viewStart, viewDuration]
+  );
+  const handlePan = (direction) => {
+    const panAmount = viewDuration * 0.1;
+    if (direction === "left") {
+      setViewStart((s) => s - panAmount);
+    } else {
+      setViewStart((s) => s + panAmount);
+    }
+  };
+  const timeMarkers = useMemo(() => {
+    const markers = [];
+    const niceIntervals = [
+      1e-3,
+      2e-3,
+      5e-3,
+      0.01,
+      0.02,
+      0.05,
+      0.1,
+      0.2,
+      0.5,
+      1,
+      2,
+      5,
+      10,
+      20,
+      50,
+      100
+    ];
+    const targetMarkerCount = 10;
+    const rawInterval = viewDuration / targetMarkerCount;
+    const interval = niceIntervals.find((i) => i > rawInterval) || niceIntervals[niceIntervals.length - 1];
+    const viewEnd = viewStart + viewDuration;
+    const shownSeconds = /* @__PURE__ */ new Set();
+    const formatTickLabel = (seconds) => {
+      const sign = seconds < 0 ? "-" : "";
+      const absSeconds = Math.abs(seconds);
+      let s = Math.floor(absSeconds);
+      let ms = Math.round((absSeconds - s) * 1e3);
+      if (ms >= 1e3) {
+        s += 1;
+        ms -= 1e3;
+      }
+      if (absSeconds < 1 && absSeconds > -1) {
+        return `${sign}${ms}ms`;
+      }
+      const baseSecond = s * (sign === "-" ? -1 : 1);
+      if (shownSeconds.has(baseSecond)) {
+        return ms > 0 ? `+${ms}ms` : "";
+      }
+      shownSeconds.add(baseSecond);
+      if (ms === 0) {
+        return `${sign}${s}s`;
+      }
+      return `${sign}${s}s`;
+    };
+    const firstMarkerTime = Math.floor(viewStart / interval) * interval;
+    const lastMarkerTime = Math.ceil(viewEnd / interval) * interval;
+    for (let time = firstMarkerTime; time <= lastMarkerTime; time += interval) {
+      const roundedTime = Number.parseFloat(time.toPrecision(15));
+      const label = formatTickLabel(roundedTime);
+      if (label) {
+        markers.push({ time: roundedTime, label });
+      }
+    }
+    return markers;
+  }, [viewStart, viewDuration]);
+  const keyEventTimes = useMemo(() => {
+    const events = [];
+    const timeSet = /* @__PURE__ */ new Set();
+    const addEvent = (time, type) => {
+      const key = `${time.toFixed(6)}-${type}`;
+      if (!timeSet.has(key)) {
+        events.push({ time, type });
+        timeSet.add(key);
+      }
+    };
+    visibleData.forEach((item) => {
+      if (item.createTime !== void 0) addEvent(item.createTime, "create");
+      if (item.startTime !== void 0) addEvent(item.startTime, "start");
+      if (item.startTime !== void 0 && item.duration !== void 0) {
+        addEvent(item.startTime + item.duration, "end");
+      }
+      if (item.time !== void 0) addEvent(item.time, "event");
+    });
+    return events.sort((a, b) => a.time - b.time);
+  }, [visibleData]);
+  const cursorContainerRef = useRef(null);
+  const lastClientX = useRef(0);
+  const isMouseOver = useRef(false);
+  const animationFrameRef = useRef(null);
+  const updateCursor = useCallback(() => {
+    if (!isMouseOver.current) return;
+    const timelineEl = timelineContainerRef.current;
+    const cursorEl = cursorContainerRef.current;
+    if (!timelineEl || !cursorEl) return;
+    const rect = timelineEl.getBoundingClientRect();
+    const cursorX = lastClientX.current - rect.left;
+    const rawHoverTime = viewStart + cursorX / timelineEl.offsetWidth * viewDuration;
+    const snapThresholdInPixels = 8;
+    const snapThresholdInTime = snapThresholdInPixels / timelineEl.offsetWidth * viewDuration;
+    let closestSnap = null;
+    let minDistance = Number.POSITIVE_INFINITY;
+    for (const event of keyEventTimes) {
+      const distance = Math.abs(event.time - rawHoverTime);
+      if (distance < minDistance && distance < snapThresholdInTime) {
+        minDistance = distance;
+        closestSnap = event;
+      }
+    }
+    const displayTime = (closestSnap == null ? void 0 : closestSnap.time) ?? rawHoverTime;
+    const percent = timeToPercent(displayTime);
+    cursorEl.style.setProperty("--cursor-left", `${percent}%`);
+    cursorEl.style.setProperty("--readout-text", `"${formatDuration(displayTime)}"`);
+    cursorEl.style.setProperty("--magnet-opacity", closestSnap ? "1" : "0");
+    cursorEl.classList.remove("opacity-0");
+  }, [viewStart, viewDuration, keyEventTimes, timeToPercent]);
+  useEffect(() => {
+    const timelineEl = timelineContainerRef.current;
+    if (!timelineEl) return;
+    const handleMouseMove = (e) => {
+      lastClientX.current = e.clientX;
+      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = requestAnimationFrame(updateCursor);
+    };
+    const handleMouseEnter = () => {
+      isMouseOver.current = true;
+    };
+    const handleMouseLeave = () => {
+      var _a;
+      isMouseOver.current = false;
+      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
+      (_a = cursorContainerRef.current) == null ? void 0 : _a.classList.add("opacity-0");
+    };
+    timelineEl.addEventListener("mousemove", handleMouseMove);
+    timelineEl.addEventListener("mouseenter", handleMouseEnter);
+    timelineEl.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      timelineEl.removeEventListener("mousemove", handleMouseMove);
+      timelineEl.removeEventListener("mouseenter", handleMouseEnter);
+      timelineEl.removeEventListener("mouseleave", handleMouseLeave);
+      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
+    };
+  }, [updateCursor]);
+  useEffect(() => {
+    const timelineEl = timelineContainerRef.current;
+    if (!timelineEl) return;
+    const wheelHandler = (e) => {
+      e.preventDefault();
+      const container = timelineContainerRef.current;
+      if (!container) return;
+      if (e.ctrlKey || e.altKey) {
+        const rect = container.getBoundingClientRect();
+        const cursorX = e.clientX - rect.left;
+        const timeAtCursor = viewStart + cursorX / container.offsetWidth * viewDuration;
+        const zoomFactor = 1.1;
+        const newDuration = e.deltaY < 0 ? viewDuration / zoomFactor : viewDuration * zoomFactor;
+        const minDuration = 0.01;
+        const maxDuration = totalDuration * 10;
+        if (newDuration < minDuration || newDuration > maxDuration) return;
+        const newViewStart = timeAtCursor - cursorX / container.offsetWidth * newDuration;
+        setViewDuration(newDuration);
+        setViewStart(newViewStart);
+      } else {
+        const panX = e.deltaX / container.offsetWidth * viewDuration;
+        const panY = e.deltaY / container.offsetWidth * viewDuration;
+        setViewStart((s) => s + panX + panY);
+      }
+    };
+    timelineEl.addEventListener("wheel", wheelHandler, { passive: false });
+    return () => {
+      timelineEl.removeEventListener("wheel", wheelHandler);
+    };
+  }, [viewStart, viewDuration, totalDuration]);
+  useEffect(() => {
+    if (isMouseOver.current) {
+      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = requestAnimationFrame(updateCursor);
+    }
+  }, [viewStart, viewDuration, updateCursor]);
+  return /* @__PURE__ */ jsx("div", { className: "bg-bg-primary text-text-primary border-line-secondary/20 rounded-uk-md mx-auto w-full max-w-7xl overflow-hidden border font-sans shadow-2xl", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(300px,30%)_1fr]", children: [
+    /* @__PURE__ */ jsx(
+      TreeView,
+      {
+        data,
+        getIcon,
+        onVisibleDataChange: setVisibleData,
+        onItemHover: setHoveredId,
+        hoveredId
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "border-line-secondary/20 scrollbar-hide relative cursor-crosshair overflow-x-auto border-l active:cursor-grabbing",
+          ref: timelineContainerRef,
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "bg-bg-primary sticky top-0 z-10", children: /* @__PURE__ */ jsxs("div", { className: "border-line-secondary/20 relative h-8 border-b", children: [
+              keyEventTimes.map(({ time }, tickIndex) => {
+                const percent = timeToPercent(time);
+                if (percent < 0 || percent > 100) return null;
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "bg-line-secondary/20 absolute top-1/2 z-0 h-1 w-1 -translate-y-1/2 rounded-full",
+                    style: { left: `${percent}%` }
+                  },
+                  `snap-${time}-${tickIndex}`
+                );
+              }),
+              timeMarkers.map((marker, ind) => {
+                const naturalCenterPercent = timeToPercent(marker.time);
+                if (naturalCenterPercent < -20 || naturalCenterPercent > 120) {
+                  return null;
+                }
+                const labelHalfWidthPercent = 3;
+                const clampedCenterPercent = Math.min(
+                  100 - labelHalfWidthPercent,
+                  Math.max(labelHalfWidthPercent, naturalCenterPercent)
+                );
+                const zInd = ind < timeMarkers.length - 1 ? "10" : "0";
+                return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "bg-border bg-line-secondary/20 absolute top-0 h-full w-px",
+                      style: { left: `${naturalCenterPercent}%` }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "bg-bg-primary text-text-secondary rounded-uk-xs text-uk-sm pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 px-1 backdrop-blur-sm",
+                        "z-" + zInd
+                      ),
+                      style: { left: `${clampedCenterPercent}%` },
+                      children: marker.label
+                    }
+                  )
+                ] }, marker.time);
+              })
+            ] }) }),
+            /* @__PURE__ */ jsx("div", { className: "relative pb-12", children: visibleData.map((item) => {
+              const isHaltedStep = item.isHalted;
+              const barStart = item.startTime;
+              const barEnd = item.startTime !== void 0 && item.duration !== void 0 ? item.startTime + item.duration : void 0;
+              const viewEnd = viewStart + viewDuration;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "relative h-[32px]",
+                    hoveredId === item.id && "bg-bg-secondary/80"
+                  ),
+                  onMouseEnter: () => setHoveredId(item.id),
+                  onMouseLeave: () => setHoveredId(null),
+                  children: [
+                    item.createTime !== void 0 && item.startTime !== void 0 && item.createTime < item.startTime && item.color && /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: "absolute top-1/2 h-2 -translate-y-1/2",
+                        style: {
+                          left: `${timeToPercent(item.createTime)}%`,
+                          width: `${(item.startTime - item.createTime) / viewDuration * 100}%`
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: cn(
+                                "absolute top-1/2 left-0 h-2 w-px -translate-y-1/2",
+                                colorClasses[item.color]
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: cn(
+                                "absolute top-1/2 w-full -translate-y-1/2 border-t",
+                                borderColorClasses[item.color]
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: cn(
+                                "absolute top-1/2 right-0 h-2 w-px -translate-y-1/2",
+                                colorClasses[item.color]
+                              )
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    item.startTime !== void 0 && item.duration !== void 0 && !isHaltedStep && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "rounded-uk-xs absolute top-1/2 flex h-5 -translate-y-1/2 items-center justify-center overflow-hidden",
+                          item.color && colorClasses[item.color],
+                          item.hasStripes && "bg-[repeating-linear-gradient(-45deg,transparent,transparent_4px,rgba(0,0,0,0.1)_4px,rgba(0,0,0,0.1)_8px)]"
+                        ),
+                        style: {
+                          left: `${timeToPercent(item.startTime)}%`,
+                          width: `${item.duration / viewDuration * 100}%`
+                        }
+                      }
+                    ),
+                    item.startTime !== void 0 && item.duration !== void 0 && !isHaltedStep && (() => {
+                      const visibleStart = Math.max(barStart || 0, viewStart);
+                      const visibleEnd = Math.min(barEnd || 0, viewEnd);
+                      if (visibleEnd <= visibleStart) return null;
+                      const visibleDuration = visibleEnd - visibleStart;
+                      const visibleWidthPercent = visibleDuration / viewDuration * 100;
+                      if (visibleWidthPercent < 4) return null;
+                      return /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "pointer-events-none absolute top-1/2 flex h-5 -translate-y-1/2 items-center justify-center",
+                          style: {
+                            left: `${timeToPercent(visibleStart)}%`,
+                            width: `${visibleWidthPercent}%`
+                          },
+                          children: /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: cn(
+                                "text-uk-sm font-medium whitespace-nowrap",
+                                item.color === "gray-light" || item.color === "gray-medium" ? "text-slate-600 dark:text-slate-300" : "text-text-highlight"
+                              ),
+                              children: formatDuration(item.duration)
+                            }
+                          )
+                        }
+                      );
+                    })(),
+                    item.startTime !== void 0 && item.duration !== void 0 && !isHaltedStep && item.color && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "bg-bg-primary absolute top-1/2 z-10 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full border-2",
+                          borderColorClasses[item.color]
+                        ),
+                        style: {
+                          left: `${timeToPercent(item.startTime)}%`
+                        }
+                      }
+                    ),
+                    isHaltedStep && item.startTime !== void 0 && item.duration !== void 0 && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "absolute top-1/2 flex h-full -translate-y-1/2 items-center",
+                        style: {
+                          left: `${timeToPercent(item.startTime)}%`,
+                          width: `${item.duration / viewDuration * 100}%`
+                        },
+                        children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-full w-full items-center justify-center", children: [
+                          /* @__PURE__ */ jsx("div", { className: "bg-line-secondary absolute top-1/2 left-0 h-2 w-px -translate-y-1/2" }),
+                          /* @__PURE__ */ jsx("div", { className: "border-line-secondary w-full border-t border-dashed" }),
+                          /* @__PURE__ */ jsx("div", { className: "bg-line-secondary absolute top-1/2 right-0 h-2 w-px -translate-y-1/2" })
+                        ] })
+                      }
+                    ),
+                    isHaltedStep && item.startTime !== void 0 && item.duration !== void 0 && (() => {
+                      const visibleStart = Math.max(barStart || 0, viewStart);
+                      const visibleEnd = Math.min(barEnd || 0, viewEnd);
+                      if (visibleEnd <= visibleStart) return null;
+                      const visibleDuration = visibleEnd - visibleStart;
+                      const visibleWidthPercent = visibleDuration / viewDuration * 100;
+                      if (visibleWidthPercent < 4) return null;
+                      return /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "pointer-events-none absolute top-1/2 flex h-5 -translate-y-1/2 items-center justify-center",
+                          style: {
+                            left: `${timeToPercent(visibleStart)}%`,
+                            width: `${visibleWidthPercent}%`
+                          },
+                          children: /* @__PURE__ */ jsx("div", { className: "text-text-highlight text-uk-sm flex h-5 items-center rounded-full bg-orange-500/85 px-2 font-medium whitespace-nowrap", children: formatDuration(item.duration) })
+                        }
+                      );
+                    })(),
+                    item.time !== void 0 && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "absolute top-1/2 size-4 -translate-y-1/2 rounded-full",
+                        style: {
+                          left: `calc(${timeToPercent(item.time)}% - 4px)`
+                        },
+                        children: getIcon(item)
+                      }
+                    )
+                  ]
+                },
+                item.id
+              );
+            }) }),
+            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute top-0 left-0 z-10 h-full w-2", children: visibleData.map((item, index) => {
+              const barEnd = item.startTime !== void 0 && item.duration !== void 0 ? item.startTime + item.duration : void 0;
+              const isOffscreenLeft = barEnd !== void 0 && barEnd < viewStart || item.time !== void 0 && item.time < viewStart;
+              if (isOffscreenLeft && item.color) {
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute h-0 w-0 border-y-[6px] border-r-[5px] border-y-transparent",
+                      rightWedgeClasses[item.color]
+                    ),
+                    style: {
+                      top: `${32 + index * 32 + 16}px`,
+                      transform: "translateY(-50%)"
+                    }
+                  },
+                  `left-wedge-${item.id}`
+                );
+              }
+              return null;
+            }) }),
+            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute top-0 right-0 z-10 h-full w-2", children: visibleData.map((item, index) => {
+              const barStart = item.startTime;
+              const viewEnd = viewStart + viewDuration;
+              const isOffscreenRight = barStart !== void 0 && barStart > viewEnd || item.time !== void 0 && item.time > viewEnd;
+              if (isOffscreenRight && item.color) {
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute h-0 w-0 border-y-[6px] border-l-[5px] border-y-transparent",
+                      leftWedgeClasses[item.color]
+                    ),
+                    style: {
+                      top: `${32 + index * 32 + 16}px`,
+                      transform: "translateY(-50%)"
+                    }
+                  },
+                  `right-wedge-${item.id}`
+                );
+              }
+              return null;
+            }) }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: cursorContainerRef,
+                className: "pointer-events-none absolute top-0 left-0 z-10 h-full w-full opacity-0 transition-opacity duration-150",
+                style: {
+                  "--cursor-left": "0%",
+                  "--readout-text": '""',
+                  "--magnet-opacity": "0"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "absolute top-0 h-full w-px bg-red-500",
+                      style: { left: "var(--cursor-left)" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "bg-bg-primary border-line-secondary/20 rounded-uk-sm text-uk-sm absolute top-1 flex items-center justify-center border px-2 py-0.5 whitespace-nowrap shadow-lg",
+                      style: {
+                        left: "var(--cursor-left)",
+                        transform: "translateX(-50%)",
+                        minWidth: "11ch"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Magnet,
+                          {
+                            className: "text-text-secondary mr-1.5 size-3 transition-opacity",
+                            style: { opacity: "var(--magnet-opacity)" }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "font-mono tabular-nums after:content-[var(--readout-text)]" })
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-1/2 z-20 w-max -translate-x-1/2", children: /* @__PURE__ */ jsxs("div", { className: "bg-bg-primary/75 flex items-center gap-2 rounded-full p-1 shadow-lg backdrop-blur-[2px]", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => handlePan("left"),
+            className: "hover:bg-bg-secondary rounded-full p-1",
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-uk-sm w-24 text-center font-mono", children: formatDuration(viewDuration) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => handlePan("right"),
+            className: "hover:bg-bg-secondary rounded-full p-1",
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+          }
+        )
+      ] }) })
+    ] })
+  ] }) });
+}
+
+export { Timeline };

package/dist/{chunk-A2Z57NAA.js → chunk-XUQ5A7ZA.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkUWO6RBCE_js = require('./chunk-UWO6RBCE.js');
+var chunkXXWQ4RVP_js = require('./chunk-XXWQ4RVP.js');
 var chunkCLTLT5XW_js = require('./chunk-CLTLT5XW.js');
 var react = require('react');
 var reactDom = require('react-dom');
@@ -186,7 +186,7 @@ var CursorProvider = ({
       Component,
       {
         ...props,
-        className: chunkUWO6RBCE_js.cn(className),
+        className: chunkXXWQ4RVP_js.cn(className),
         style: {
           cursor: isMouseInside && !hoveredElementId ? "none" : "auto",
           ...props.style

package/dist/chunk-XXWQ4RVP.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+
+// src/utils/cn.ts
+var twMerge = tailwindMerge.extendTailwindMerge({
+  override: {
+    classGroups: {
+      "font-size": [
+        "text-uk-xs",
+        "text-uk-sm",
+        "text-uk-md",
+        "text-uk-lg",
+        "text-uk-xl",
+        "text-uk-xxl"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx.clsx(inputs));
+}
+
+exports.cn = cn;

package/dist/{chunk-FYS6YECN.js → chunk-Y5I2GI4V.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkUWO6RBCE_js = require('./chunk-UWO6RBCE.js');
+var chunkXXWQ4RVP_js = require('./chunk-XXWQ4RVP.js');
 var reactSlot = require('@radix-ui/react-slot');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -15,7 +15,7 @@ function Layout({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Com,
     {
-      className: chunkUWO6RBCE_js.cn(
+      className: chunkXXWQ4RVP_js.cn(
         {
           "gap-xs flex flex-col": orientation === "horizontal",
           "gap-xs grid grid-cols-[1fr_2fr] text-center": orientation === "vertical",