@vuer-ai/vuer-uikit 0.0.84 → 0.0.86

package/dist/chunk-AHNVEAOM.cjs

@@ -1,855 +0,0 @@
-'use strict';
-
-var chunkD4W2G6CY_cjs = require('./chunk-D4W2G6CY.cjs');
-var chunkLCCNBVKZ_cjs = require('./chunk-LCCNBVKZ.cjs');
-var chunkOHIB3TEN_cjs = require('./chunk-OHIB3TEN.cjs');
-var lucideReact = require('lucide-react');
-var react = require('react');
-var jsxRuntime = require('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-primary/50",
-  "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,
-  getPointEventIcon,
-  pointEventTypeColorMap
-}) {
-  const [visibleData, setVisibleData] = react.useState([]);
-  const [hoveredId, setHoveredId] = react.useState(null);
-  const [hoveredBarInfo, setHoveredBarInfo] = react.useState(
-    null
-  );
-  const timelineContainerRef = react.useRef(null);
-  const [timelineWidth, setTimelineWidth] = react.useState(0);
-  const [viewStart, setViewStart] = react.useState(-totalDuration * 0.25);
-  const [viewDuration, setViewDuration] = react.useState(totalDuration * 1.5);
-  const timeToPercent = react.useCallback(
-    (time) => (time - viewStart) / viewDuration * 100,
-    [viewStart, viewDuration]
-  );
-  const iconVisibleEvents = react.useMemo(() => {
-    const iconEvents = /* @__PURE__ */ new Set();
-    if (timelineWidth === 0) return iconEvents;
-    const ICON_SPACING_PX = 16;
-    const minTimeGap = ICON_SPACING_PX / timelineWidth * viewDuration;
-    const showIconsInGeneral = viewDuration / totalDuration < 2;
-    if (!showIconsInGeneral) return iconEvents;
-    visibleData.forEach((item) => {
-      const { pointEvents } = item;
-      if (!pointEvents || pointEvents.length === 0) return;
-      const isDense = new Array(pointEvents.length).fill(false);
-      for (let i = 0; i < pointEvents.length - 1; i++) {
-        if (pointEvents[i + 1].time - pointEvents[i].time < minTimeGap) {
-          isDense[i] = true;
-          isDense[i + 1] = true;
-        }
-      }
-      pointEvents.forEach((event, index) => {
-        if (!isDense[index]) {
-          const eventId = `${item.id}-event-${index}`;
-          iconEvents.add(eventId);
-        }
-      });
-    });
-    return iconEvents;
-  }, [visibleData, viewDuration, timelineWidth, totalDuration]);
-  const baseBarLayouts = react.useMemo(() => {
-    const layouts = {};
-    visibleData.forEach((item) => {
-      if (!item.bars || item.bars.length === 0) {
-        return;
-      }
-      const itemLayouts = Array(item.bars.length);
-      const indexedBars = item.bars.map((b, i) => ({
-        ...b,
-        originalIndex: i,
-        endTime: b.startTime + b.duration
-      }));
-      const adj = Array(item.bars.length).fill(0).map(() => []);
-      for (let i = 0; i < indexedBars.length; i++) {
-        for (let j = i + 1; j < indexedBars.length; j++) {
-          const bar1 = indexedBars[i];
-          const bar2 = indexedBars[j];
-          if (bar1.startTime < bar2.endTime && bar2.startTime < bar1.endTime) {
-            adj[i].push(j);
-            adj[j].push(i);
-          }
-        }
-      }
-      const visited = /* @__PURE__ */ new Set();
-      const groups = [];
-      for (let i = 0; i < indexedBars.length; i++) {
-        if (!visited.has(i)) {
-          const component = [];
-          const queue = [i];
-          visited.add(i);
-          while (queue.length > 0) {
-            const u = queue.shift();
-            component.push(indexedBars[u]);
-            adj[u].forEach((v) => {
-              if (!visited.has(v)) {
-                visited.add(v);
-                queue.push(v);
-              }
-            });
-          }
-          groups.push(component.sort((a, b) => a.startTime - b.startTime));
-        }
-      }
-      groups.forEach((group) => {
-        const n = group.length;
-        if (n === 1) {
-          const bar = group[0];
-          itemLayouts[bar.originalIndex] = {
-            top: "50%",
-            height: "20px",
-            transform: "translateY(-50%)",
-            zIndex: 10
-          };
-        } else {
-          const barHeight = 20 / n;
-          const totalHeight = barHeight * n;
-          const startTop = (32 - totalHeight) / 2;
-          group.forEach((bar, indexInGroup) => {
-            itemLayouts[bar.originalIndex] = {
-              height: `${barHeight}px`,
-              top: `${startTop + indexInGroup * barHeight}px`,
-              zIndex: 10
-            };
-          });
-        }
-      });
-      layouts[item.id] = itemLayouts;
-    });
-    return layouts;
-  }, [visibleData]);
-  const hoverBarLayouts = react.useMemo(() => {
-    if (!hoveredBarInfo) return {};
-    const layouts = {};
-    const hoveredItem = visibleData.find((item) => item.id === hoveredBarInfo.itemId);
-    if (!hoveredItem || !hoveredItem.bars) return {};
-    const itemLayouts = Array(hoveredItem.bars.length);
-    const indexedBars = hoveredItem.bars.map((b, i) => ({
-      ...b,
-      originalIndex: i,
-      endTime: b.startTime + b.duration
-    }));
-    const hoveredBar = indexedBars[hoveredBarInfo.barIndex];
-    if (!hoveredBar) return {};
-    const overlappingBars = indexedBars.filter(
-      (bar) => bar.originalIndex !== hoveredBar.originalIndex && bar.startTime < hoveredBar.endTime && hoveredBar.startTime < bar.endTime
-    );
-    if (overlappingBars.length === 0) return {};
-    const allBarsInGroup = [hoveredBar, ...overlappingBars].sort(
-      (a, b) => a.startTime - b.startTime
-    );
-    const hoveredGroupIndex = allBarsInGroup.findIndex(
-      (bar) => bar.originalIndex === hoveredBar.originalIndex
-    );
-    const n = allBarsInGroup.length;
-    const hoveredBarHeight = 16;
-    const remainingHeight = 20 - hoveredBarHeight;
-    const otherBarHeight = remainingHeight / (n - 1);
-    const totalHeight = hoveredBarHeight + (n - 1) * otherBarHeight;
-    const startTop = (32 - totalHeight) / 2;
-    allBarsInGroup.forEach((bar, indexInGroup) => {
-      if (indexInGroup === hoveredGroupIndex) {
-        const barsBeforeHovered = hoveredGroupIndex;
-        const topForHovered = startTop + barsBeforeHovered * otherBarHeight;
-        itemLayouts[bar.originalIndex] = {
-          height: `${hoveredBarHeight}px`,
-          top: `${topForHovered}px`,
-          zIndex: 20
-        };
-      } else if (indexInGroup < hoveredGroupIndex) {
-        itemLayouts[bar.originalIndex] = {
-          height: `${otherBarHeight}px`,
-          top: `${startTop + indexInGroup * otherBarHeight}px`,
-          zIndex: 10
-        };
-      } else {
-        itemLayouts[bar.originalIndex] = {
-          height: `${otherBarHeight}px`,
-          top: `${startTop + hoveredBarHeight + (indexInGroup - hoveredGroupIndex - 1) * otherBarHeight}px`,
-          zIndex: 10
-        };
-      }
-    });
-    layouts[hoveredBarInfo.itemId] = itemLayouts;
-    return layouts;
-  }, [visibleData, hoveredBarInfo]);
-  const barLayouts = react.useMemo(() => {
-    const merged = { ...baseBarLayouts };
-    Object.keys(hoverBarLayouts).forEach((itemId) => {
-      if (merged[itemId]) {
-        merged[itemId] = { ...merged[itemId], ...hoverBarLayouts[itemId] };
-      }
-    });
-    return merged;
-  }, [baseBarLayouts, hoverBarLayouts]);
-  const timeStyles = react.useMemo(() => {
-    const styles = {};
-    visibleData.forEach((item) => {
-      if (!item.bars) return;
-      const itemStyles = {};
-      item.bars.forEach((bar, index) => {
-        itemStyles[index] = {
-          left: `${timeToPercent(bar.startTime)}%`,
-          width: `${bar.duration / viewDuration * 100}%`
-        };
-      });
-      styles[item.id] = itemStyles;
-    });
-    return styles;
-  }, [visibleData, timeToPercent, viewDuration]);
-  const pointEventPositions = react.useMemo(() => {
-    const positions = {};
-    visibleData.forEach((item) => {
-      if (!item.pointEvents) return;
-      const itemPositions = {};
-      item.pointEvents.forEach((event, index) => {
-        const percent = timeToPercent(event.time);
-        const eventId = `${item.id}-event-${index}`;
-        const showIcon = iconVisibleEvents.has(eventId);
-        itemPositions[index] = {
-          percent,
-          left: showIcon ? `calc(${percent}% - 8px)` : `calc(${percent}% - 3px)`
-        };
-      });
-      positions[item.id] = itemPositions;
-    });
-    return positions;
-  }, [visibleData, timeToPercent, iconVisibleEvents]);
-  const getBarHeight = react.useCallback(
-    (itemId, barIndex) => {
-      const layout = barLayouts[itemId]?.[barIndex];
-      if (!layout) return 20;
-      const heightStr = layout.height;
-      if (typeof heightStr === "string") {
-        if (heightStr.endsWith("px")) {
-          return parseFloat(heightStr);
-        } else if (heightStr.endsWith("%")) {
-          return parseFloat(heightStr) / 100 * 32;
-        }
-      }
-      return 20;
-    },
-    [barLayouts]
-  );
-  react.useEffect(() => {
-    const container = timelineContainerRef.current;
-    if (!container) return;
-    const resizeObserver = new ResizeObserver((entries) => {
-      if (entries[0]) {
-        setTimelineWidth(entries[0].contentRect.width);
-      }
-    });
-    resizeObserver.observe(container);
-    setTimelineWidth(container.offsetWidth);
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
-  const handlePan = (direction) => {
-    const panAmount = viewDuration * 0.1;
-    if (direction === "left") {
-      setViewStart((s) => s - panAmount);
-    } else {
-      setViewStart((s) => s + panAmount);
-    }
-  };
-  const timeMarkers = react.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 = react.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) => {
-      (item.bars || []).forEach((bar) => {
-        if (bar.createTime !== void 0) addEvent(bar.createTime, "create");
-        addEvent(bar.startTime, "start");
-        addEvent(bar.startTime + bar.duration, "end");
-      });
-      item.pointEvents?.forEach((event) => {
-        addEvent(event.time, event.type);
-      });
-    });
-    return events.sort((a, b) => a.time - b.time);
-  }, [visibleData]);
-  const cursorContainerRef = react.useRef(null);
-  const lastClientX = react.useRef(0);
-  const isMouseOver = react.useRef(false);
-  const animationFrameRef = react.useRef(null);
-  const updateCursor = react.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?.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]);
-  react.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 = () => {
-      isMouseOver.current = false;
-      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
-      cursorContainerRef.current?.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]);
-  react.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]);
-  react.useEffect(() => {
-    if (isMouseOver.current) {
-      if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
-      animationFrameRef.current = requestAnimationFrame(updateCursor);
-    }
-  }, [viewStart, viewDuration, updateCursor]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-bg-primary text-text-primary border-line-primary/50 rounded-uk-md mx-auto w-full overflow-hidden border font-sans shadow-[0_4px_16px_0_var(--color-shadow-secondary)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[minmax(300px,30%)_1fr]", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      chunkD4W2G6CY_cjs.TreeView,
-      {
-        data,
-        getIcon,
-        onVisibleDataChange: setVisibleData,
-        onItemHover: setHoveredId,
-        hoveredId
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: "border-line-primary/50 scrollbar-hide relative cursor-crosshair overflow-x-auto border-l active:cursor-grabbing",
-          ref: timelineContainerRef,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-bg-primary sticky top-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-line-primary/50 relative h-8 border-b", children: [
-              keyEventTimes.map(({ time }, tickIndex) => {
-                const percent = timeToPercent(time);
-                if (percent < 0 || percent > 100) return null;
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: "bg-bg-tertiary 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__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: "bg-line-primary absolute top-0 h-full w-px",
-                      style: { left: `${naturalCenterPercent}%` }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: chunkOHIB3TEN_cjs.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__ */ jsxRuntime.jsx("div", { className: "relative pb-12", children: visibleData.map((item) => {
-              const viewEnd = viewStart + viewDuration;
-              const itemBarLayouts = barLayouts[item.id] || [];
-              return /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: chunkOHIB3TEN_cjs.cn(
-                    "relative h-[32px]",
-                    hoveredId === item.id && "bg-bg-secondary/80"
-                  ),
-                  onMouseEnter: () => setHoveredId(item.id),
-                  onMouseLeave: () => setHoveredId(null),
-                  children: [
-                    (item.bars || []).map((bar, index) => {
-                      const barStart = bar.startTime;
-                      const barEnd = bar.startTime + bar.duration;
-                      const isHaltedStep = bar.isHalted;
-                      const layoutStyle = itemBarLayouts[index] || {};
-                      const timeStyle = timeStyles[item.id]?.[index] || {};
-                      const combinedStyle = { ...timeStyle, ...layoutStyle };
-                      return /* @__PURE__ */ jsxRuntime.jsxs(
-                        "div",
-                        {
-                          className: "absolute",
-                          style: {
-                            ...combinedStyle
-                          },
-                          onMouseEnter: () => setHoveredBarInfo({ itemId: item.id, barIndex: index }),
-                          onMouseLeave: () => setHoveredBarInfo(null),
-                          children: [
-                            bar.createTime !== void 0 && bar.createTime < bar.startTime && bar.color && /* @__PURE__ */ jsxRuntime.jsxs(
-                              "div",
-                              {
-                                className: "absolute top-1/2 right-full h-2 -translate-y-1/2",
-                                style: {
-                                  width: `${(bar.startTime - bar.createTime) / viewDuration * 100}%`
-                                },
-                                children: [
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    "div",
-                                    {
-                                      className: chunkOHIB3TEN_cjs.cn(
-                                        "absolute top-1/2 left-0 h-2 w-px -translate-y-1/2",
-                                        colorClasses[bar.color]
-                                      )
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    "div",
-                                    {
-                                      className: chunkOHIB3TEN_cjs.cn(
-                                        "absolute top-1/2 w-full -translate-y-1/2 border-t",
-                                        borderColorClasses[bar.color]
-                                      )
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsxRuntime.jsx(
-                                    "div",
-                                    {
-                                      className: chunkOHIB3TEN_cjs.cn(
-                                        "absolute top-1/2 right-0 h-2 w-px -translate-y-1/2",
-                                        colorClasses[bar.color]
-                                      )
-                                    }
-                                  )
-                                ]
-                              }
-                            ),
-                            !isHaltedStep && /* @__PURE__ */ jsxRuntime.jsx(
-                              "div",
-                              {
-                                className: chunkOHIB3TEN_cjs.cn(
-                                  "rounded-uk-xs absolute top-0 left-0 flex h-full w-full items-center justify-center overflow-hidden",
-                                  bar.color && colorClasses[bar.color],
-                                  bar.hasStripes && "bg-[repeating-linear-gradient(-45deg,transparent,transparent_4px,rgba(0,0,0,0.1)_4px,rgba(0,0,0,0.1)_8px)]"
-                                )
-                              }
-                            ),
-                            !isHaltedStep && (() => {
-                              const visibleStart = Math.max(barStart, viewStart);
-                              const visibleEnd = Math.min(barEnd, viewEnd);
-                              if (visibleEnd <= visibleStart) return null;
-                              const visibleDuration = visibleEnd - visibleStart;
-                              const visibleWidthPercent = visibleDuration / viewDuration * 100;
-                              if (visibleWidthPercent < 4) return null;
-                              const barHeight = getBarHeight(item.id, index);
-                              if (barHeight < 12) return null;
-                              return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute top-0 left-0 flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                "span",
-                                {
-                                  className: chunkOHIB3TEN_cjs.cn(
-                                    "text-uk-sm font-medium whitespace-nowrap",
-                                    bar.color === "gray-light" || bar.color === "gray-medium" ? "text-slate-600 dark:text-slate-300" : "text-text-highlight"
-                                  ),
-                                  children: formatDuration(bar.duration)
-                                }
-                              ) });
-                            })(),
-                            !isHaltedStep && bar.color && /* @__PURE__ */ jsxRuntime.jsx(
-                              "div",
-                              {
-                                className: chunkOHIB3TEN_cjs.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[bar.color]
-                                ),
-                                style: {
-                                  left: "0%"
-                                }
-                              }
-                            ),
-                            isHaltedStep && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 flex h-full w-full items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-full w-full items-center justify-center", children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-line-secondary absolute top-1/2 left-0 h-2 w-px -translate-y-1/2" }),
-                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-line-secondary w-full border-t border-dashed" }),
-                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-line-secondary absolute top-1/2 right-0 h-2 w-px -translate-y-1/2" })
-                            ] }) }),
-                            isHaltedStep && (() => {
-                              const visibleStart = Math.max(barStart, viewStart);
-                              const visibleEnd = Math.min(barEnd, viewEnd);
-                              if (visibleEnd <= visibleStart) return null;
-                              const visibleDuration = visibleEnd - visibleStart;
-                              const visibleWidthPercent = visibleDuration / viewDuration * 100;
-                              if (visibleWidthPercent < 4) return null;
-                              const barHeight = getBarHeight(item.id, index);
-                              if (barHeight < 12) return null;
-                              return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute top-0 left-0 flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.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(bar.duration) }) });
-                            })()
-                          ]
-                        },
-                        index
-                      );
-                    }),
-                    item.pointEvents?.map((event, index) => {
-                      const position = pointEventPositions[item.id]?.[index];
-                      if (!position || position.percent < 0 || position.percent > 100) return null;
-                      const eventId = `${item.id}-event-${index}`;
-                      const showIcon = iconVisibleEvents.has(eventId);
-                      const colorName = event.color || pointEventTypeColorMap[event.type];
-                      return /* @__PURE__ */ jsxRuntime.jsx(chunkLCCNBVKZ_cjs.TooltipProvider, { delayDuration: 100, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkLCCNBVKZ_cjs.Tooltip, { children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(chunkLCCNBVKZ_cjs.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                          "div",
-                          {
-                            className: "absolute top-1/2 -translate-y-1/2",
-                            style: { left: position.left },
-                            children: showIcon ? getPointEventIcon(event) : /* @__PURE__ */ jsxRuntime.jsx(
-                              "div",
-                              {
-                                className: chunkOHIB3TEN_cjs.cn("size-1.5 rounded-full"),
-                                style: { backgroundColor: colorName }
-                              }
-                            )
-                          }
-                        ) }),
-                        /* @__PURE__ */ jsxRuntime.jsx(chunkLCCNBVKZ_cjs.TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: event.type }) })
-                      ] }) }, `${item.id}-event-${index}`);
-                    })
-                  ]
-                },
-                item.id
-              );
-            }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute top-0 left-0 z-10 h-full w-2", children: visibleData.map((item, index) => {
-              const bars = item.bars || [];
-              const offscreenBar = bars.find((bar) => bar.startTime + bar.duration < viewStart);
-              const pointEventsStart = item.pointEvents?.reduce(
-                (max, event) => Math.min(max, event.time),
-                Infinity
-              );
-              const hasPointEventOffscreenLeft = pointEventsStart !== void 0 && pointEventsStart < viewStart;
-              const wedgeColor = offscreenBar?.color || (hasPointEventOffscreenLeft ? item.color : void 0);
-              if (wedgeColor) {
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: chunkOHIB3TEN_cjs.cn(
-                      "absolute h-0 w-0 border-y-[6px] border-r-[5px] border-y-transparent",
-                      rightWedgeClasses[wedgeColor]
-                    ),
-                    style: {
-                      top: `${32 + index * 32 + 16}px`,
-                      transform: "translateY(-50%)"
-                    }
-                  },
-                  `left-wedge-${item.id}`
-                );
-              }
-              return null;
-            }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute top-0 right-0 z-10 h-full w-2", children: visibleData.map((item, index) => {
-              const bars = item.bars || [];
-              const viewEnd = viewStart + viewDuration;
-              const offscreenBar = bars.find((bar) => bar.startTime > viewEnd);
-              const pointEventsEnd = item.pointEvents?.reduce(
-                (min, event) => Math.max(min, event.time),
-                -Infinity
-              );
-              const hasPointEventOffscreenRight = pointEventsEnd !== void 0 && pointEventsEnd > viewEnd;
-              const wedgeColor = offscreenBar?.color || (hasPointEventOffscreenRight ? item.color : void 0);
-              if (wedgeColor) {
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: chunkOHIB3TEN_cjs.cn(
-                      "absolute h-0 w-0 border-y-[6px] border-l-[5px] border-y-transparent",
-                      leftWedgeClasses[wedgeColor]
-                    ),
-                    style: {
-                      top: `${32 + index * 32 + 16}px`,
-                      transform: "translateY(-50%)"
-                    }
-                  },
-                  `right-wedge-${item.id}`
-                );
-              }
-              return null;
-            }) }),
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: "absolute top-0 h-full w-px bg-red-500",
-                      style: { left: "var(--cursor-left)" }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    "div",
-                    {
-                      className: "bg-bg-primary border-line-primary/50 rounded-uk-sm text-uk-sm absolute top-1 flex items-center justify-center border px-2 py-0.5 whitespace-nowrap shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
-                      style: {
-                        left: "var(--cursor-left)",
-                        transform: "translateX(-50%)",
-                        minWidth: "11ch"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          lucideReact.Magnet,
-                          {
-                            className: "text-text-secondary mr-1.5 size-3 transition-opacity",
-                            style: { opacity: "var(--magnet-opacity)" }
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono tabular-nums after:content-[var(--readout-text)]" })
-                      ]
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 left-1/2 z-20 w-max -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-bg-primary/75 flex items-center gap-2 rounded-full p-1 shadow-[0_4px_16px_0_var(--color-shadow-secondary)] backdrop-blur-[2px]", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => handlePan("left"),
-            className: "hover:bg-bg-secondary rounded-full p-1",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "size-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-uk-sm w-24 text-center font-mono", children: formatDuration(viewDuration) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => handlePan("right"),
-            className: "hover:bg-bg-secondary rounded-full p-1",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "size-4" })
-          }
-        )
-      ] }) })
-    ] })
-  ] }) });
-}
-
-exports.Timeline = Timeline;