@vuer-ai/vuer-uikit 0.0.96 → 0.0.98

package/src/ui/waterfall/CursorOverlay.tsx

@@ -0,0 +1,96 @@
+import { Magnet } from "lucide-react";
+import React, { HTMLProps } from "react";
+
+import { cn } from "../../hooks";
+
+export interface TimelineCursorProps extends HTMLProps<HTMLDivElement> {
+  /** Position as percentage (0-100) */
+  left?: number;
+  /** Label text to display */
+  label?: string;
+  /** Cursor color */
+  color?: string;
+  /** Whether to show the readout tooltip */
+  showReadout?: boolean;
+  /** Whether to show magnet icon (only when showReadout is true) */
+  showMagnet?: boolean;
+  /** Readout variant - 'active' for interactive cursors, 'static' for fixed markers */
+  variant?: "active" | "static";
+  /** Additional CSS classes */
+  className?: string;
+  /** Z-index override */
+  zIndex?: number;
+}
+
+/**
+ * Simple timeline cursor component.
+ *
+ * @example
+ * // Simple cursor line
+ * <CursorOverlay left={50} color="blue" />
+ *
+ * // Cursor with readout
+ * <CursorOverlay left={50} label="2.5s" showReadout />
+ */
+export function CursorOverlay({
+  left = 0,
+  label,
+  color,
+  showReadout = false,
+  showMagnet = false,
+  variant = "active",
+  zIndex = 20,
+}: TimelineCursorProps) {
+  const leftValue = `${left}%`;
+
+  // Default colors based on variant
+  const lineColor = color || (variant === "active" ? "rgb(239 68 68)" : "rgb(148 163 184)");
+
+  return (
+    <>
+      {/* Cursor Line */}
+      <div
+        className="pointer-events-none absolute top-0 z-75 h-full w-px"
+        style={{
+          left: leftValue,
+          backgroundColor: lineColor,
+          zIndex,
+        }}
+      />
+
+      {/* Readout Tooltip */}
+      {showReadout && (
+        <div
+          className={cn(
+            "absolute top-1",
+            "flex items-center justify-center",
+            variant === "active" ? "pointer-events-none" : "pointer-events-auto",
+            "px-2 py-0.5",
+            "text-uk-sm z-80",
+            "border-line-primary/50",
+            variant === "active" && [
+              "bg-bg-primary rounded-uk-sm border",
+              "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+            ],
+            variant === "static" && [
+              "bg-bg-secondary backdrop-blur-sm",
+              "rounded-uk-sm",
+              "text-text-secondary",
+            ],
+          )}
+          style={{
+            left: leftValue,
+            transform: "translateX(-50%)",
+            minWidth: "11ch",
+            zIndex,
+          }}
+        >
+          {showMagnet && (
+            <Magnet className="text-text-secondary mr-1.5 size-3 transition-opacity" />
+          )}
+          <span className="font-mono tabular-nums">{label}</span>
+        </div>
+      )}
+    </>
+  );
+}

package/src/ui/waterfall/NavigationControls.tsx

@@ -0,0 +1,42 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import React from "react";
+
+import { formatDuration } from "./utils";
+
+// Component props interface
+export interface NavigationControlsProps {
+  viewDuration: number;
+  handlePan: (direction: "left" | "right") => void;
+  handleZoomDragStart: (e: React.MouseEvent) => void;
+}
+
+export function NavigationControls({
+  viewDuration,
+  handlePan,
+  handleZoomDragStart,
+}: NavigationControlsProps) {
+  return (
+    <div className="sticky left-1/2 z-20 w-max">
+      <div className="bg-bg-primary/75 flex items-center gap-2 rounded-full p-1 text-sm shadow-[0_4px_16px_0_var(--color-shadow-secondary)] backdrop-blur-[2px]">
+        <button
+          onClick={() => handlePan("left")}
+          className="hover:bg-bg-secondary rounded-full p-1"
+        >
+          <ChevronLeft className="size-4" />
+        </button>
+        <span
+          className="text-uk-sm hover:bg-bg-secondary/50 w-24 cursor-col-resize rounded px-1 py-0.5 text-center font-mono transition-colors select-none"
+          onMouseDown={handleZoomDragStart}
+        >
+          {formatDuration(viewDuration)}
+        </span>
+        <button
+          onClick={() => handlePan("right")}
+          className="hover:bg-bg-secondary rounded-full p-1"
+        >
+          <ChevronRight className="size-4" />
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/ui/waterfall/Tick.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+export interface TimelineTickProps {
+  /** Time value for this tick */
+  time: number;
+  /** Label to display */
+  label: string;
+  /** Function to convert time to percentage */
+  timeToPercent: (time: number) => number;
+  /** Z-index for layering */
+  zIndex?: number;
+}
+
+/**
+ * Timeline tick mark with label.
+ * Shows time divisions on the timeline ruler.
+ */
+export function Tick({ time, label, timeToPercent, zIndex = 10 }: TimelineTickProps) {
+  const naturalCenterPercent = timeToPercent(time);
+
+  if (naturalCenterPercent < -20 || naturalCenterPercent > 120) {
+    return null;
+  }
+
+  // Keep label visible even when tick is near edges
+  const labelHalfWidthPercent = 3;
+  const clampedCenterPercent = Math.min(
+    100 - labelHalfWidthPercent,
+    Math.max(labelHalfWidthPercent, naturalCenterPercent),
+  );
+
+  return (
+    <>
+      {/* Tick line */}
+      <div
+        className="bg-line-primary absolute top-0 h-full w-px"
+        style={{ left: `${naturalCenterPercent}%` }}
+      />
+      {/* Label */}
+      <div
+        className="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"
+        style={{
+          left: `${clampedCenterPercent}%`,
+          zIndex,
+        }}
+      >
+        {label}
+      </div>
+    </>
+  );
+}

package/src/ui/waterfall/TimeRuleEventDot.tsx

@@ -0,0 +1,19 @@
+export interface TimeRuleEventDotProps {
+  /** Position as percentage (0-100) */
+  percent: number;
+}
+
+/**
+ * Small dot indicator for key events on the timeline ruler.
+ * Shows where significant events occur for visual reference and snapping.
+ */
+export function TimeRuleEventDot({ percent }: TimeRuleEventDotProps) {
+  if (percent < 0 || percent > 100) return null;
+
+  return (
+    <div
+      className="bg-bg-tertiary absolute top-1/2 z-0 h-1 w-1 -translate-y-1/2 rounded-full"
+      style={{ left: `${percent}%` }}
+    />
+  );
+}

package/src/ui/waterfall/TimelineEvent.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+
+import { LogItemWithMeta } from "./types";
+import { colorClasses } from "./utils";
+import { cn } from "../../hooks";
+
+export interface TimelineEventProps {
+  item: LogItemWithMeta;
+  isHovered: boolean;
+  onMouseEnter: () => void;
+  onMouseLeave: () => void;
+  onClick?: (time: number) => void;
+  timeToPercent: (time: number) => number;
+  index?: number;
+}
+
+/**
+ * Timeline event component for instant events.
+ * Renders events that occur at a specific point in time (no duration).
+ * Displays as a diamond shape on the timeline.
+ */
+export function TimelineEvent({
+  item,
+  isHovered,
+  onMouseEnter,
+  onMouseLeave,
+  onClick,
+  timeToPercent,
+}: TimelineEventProps) {
+  // Only render if item has a time property (instant event)
+  if (item?.time === undefined || item?.time === null) return null;
+
+  return (
+    <div
+      className={cn("relative h-[32px]", isHovered && "bg-bg-secondary")}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      {/* Diamond shape for instant event */}
+      <div
+        className={cn(
+          "absolute top-1/2 -translate-x-1/2 -translate-y-1/2",
+          "border-bg-primary h-3 w-3 rotate-45 border-2",
+          item.color && colorClasses[item.color],
+          onClick && "cursor-pointer transition-transform hover:scale-110",
+        )}
+        style={{
+          left: `${timeToPercent(item.time)}%`,
+        }}
+        onClick={(e) => {
+          if (onClick && item.time !== undefined) {
+            e.stopPropagation();
+            onClick(item.time);
+          }
+        }}
+        title={item.label}
+      />
+    </div>
+  );
+}

package/src/ui/waterfall/TimelineProcessBar.tsx

@@ -0,0 +1,207 @@
+import React from "react";
+
+import { LogItemWithMeta } from "./types";
+import { borderColorClasses, colorClasses, formatDuration } from "./utils";
+import { cn } from "../../hooks";
+
+export interface TimelineEventBarProps {
+  item: LogItemWithMeta;
+  isHovered: boolean;
+  onMouseEnter: () => void;
+  onMouseLeave: () => void;
+  onClick?: (time: number) => void;
+  viewStart: number;
+  viewWindow: number;
+  timeToPercent: (time: number) => number;
+  index?: number;
+}
+
+/**
+ * Individual timeline event bar component.
+ * Renders a single event with its launch wait line and execution bar.
+ */
+export function TimelineProcessBar({
+  item,
+  isHovered,
+  onMouseEnter,
+  onMouseLeave,
+  onClick,
+  viewStart,
+  viewWindow,
+  timeToPercent,
+}: TimelineEventBarProps) {
+  const viewEnd = viewStart + viewWindow;
+  const isHaltedStep = item.isHaltedStep;
+  const barStart = item.startTime;
+  const barEnd =
+    item.startTime !== undefined && item.duration !== undefined
+      ? item.startTime + item.duration
+      : undefined;
+
+  return (
+    <div
+      className={cn("relative h-[32px] w-full", isHovered && "bg-bg-secondary")}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      {/* Launch Wait Line */}
+      {item.createTime !== undefined &&
+        item.startTime !== undefined &&
+        item.createTime < item.startTime &&
+        item.color && (
+          <div
+            className="absolute top-1/2 h-2 -translate-y-1/2"
+            style={{
+              left: `${timeToPercent(item.createTime)}%`,
+              width: `${((item.startTime - item.createTime) / viewWindow) * 100}%`,
+            }}
+          >
+            <div
+              className={cn(
+                "absolute top-1/2 left-0 h-2 w-px -translate-y-1/2",
+                colorClasses[item.color],
+              )}
+            />
+            <div
+              className={cn(
+                "absolute top-1/2 w-full -translate-y-1/2 border-t",
+                borderColorClasses[item.color],
+              )}
+            />
+            <div
+              className={cn(
+                "absolute top-1/2 right-0 h-2 w-px -translate-y-1/2",
+                colorClasses[item.color],
+              )}
+            />
+          </div>
+        )}
+
+      {/* Execution Bar */}
+      {item.startTime !== undefined && item.duration !== undefined && !isHaltedStep && (
+        <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)]",
+            onClick && "cursor-pointer",
+          )}
+          style={{
+            left: `${timeToPercent(item.startTime)}%`,
+            width: `${(item.duration / viewWindow) * 100}%`,
+          }}
+          onClick={(e) => {
+            if (onClick && item.startTime !== undefined) {
+              e.stopPropagation();
+              // Calculate click position within the bar
+              const rect = e.currentTarget.getBoundingClientRect();
+              const clickX = e.clientX - rect.left;
+              const clickPercent = clickX / rect.width;
+              const clickTime = item.startTime + item.duration! * clickPercent;
+              onClick(clickTime);
+            }
+          }}
+        />
+      )}
+
+      {/* Visible Label for Execution Bar */}
+      {item.startTime !== undefined &&
+        item.duration !== undefined &&
+        !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 / viewWindow) * 100;
+
+          if (visibleWidthPercent < 4) return null;
+
+          return (
+            <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}%`,
+              }}
+            >
+              <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-withbg",
+                )}
+              >
+                {formatDuration(item.duration)}
+              </span>
+            </div>
+          );
+        })()}
+
+      {/* Start Circle */}
+      {item.startTime !== undefined &&
+        item.duration !== undefined &&
+        !isHaltedStep &&
+        item.color && (
+          <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)}%`,
+            }}
+          />
+        )}
+
+      {/* Special Halted Step Visualization */}
+      {isHaltedStep && item.startTime !== undefined && item.duration !== undefined && (
+        <div
+          className="absolute top-1/2 flex h-full -translate-y-1/2 items-center"
+          style={{
+            left: `${timeToPercent(item.startTime)}%`,
+            width: `${(item.duration / viewWindow) * 100}%`,
+          }}
+        >
+          <div className="relative flex h-full w-full items-center justify-center">
+            <div className="bg-line-secondary absolute top-1/2 left-0 h-2 w-px -translate-y-1/2" />
+            <div className="bg-line-secondary w-full border-t border-dashed" />
+            <div className="bg-line-secondary absolute top-1/2 right-0 h-2 w-px -translate-y-1/2" />
+          </div>
+        </div>
+      )}
+
+      {/* Halted Step Label */}
+      {isHaltedStep &&
+        item.startTime !== undefined &&
+        item.duration !== undefined &&
+        (() => {
+          const visibleStart = Math.max(barStart!, viewStart);
+          const visibleEnd = Math.min(barEnd!, viewEnd);
+
+          if (visibleEnd <= visibleStart) return null;
+
+          const visibleDuration = visibleEnd - visibleStart;
+          const visibleWidthPercent = (visibleDuration / viewWindow) * 100;
+
+          if (visibleWidthPercent < 8) return null;
+
+          return (
+            <div
+              className="pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center justify-center"
+              style={{
+                left: `${timeToPercent(visibleStart)}%`,
+                width: `${visibleWidthPercent}%`,
+              }}
+            >
+              <span className="text-text-secondary text-xs italic">Halted</span>
+            </div>
+          );
+        })()}
+    </div>
+  );
+}

package/src/ui/waterfall/Wedges.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+
+import { LogItemWithMeta } from "./types";
+import { cn } from "../../hooks";
+
+interface LeftWedgeProps {
+  item: LogItemWithMeta;
+  classes: Record<string, string>;
+  viewStart: number;
+  index: number;
+}
+
+interface RightWedgeProps {
+  item: LogItemWithMeta;
+  classes: Record<string, string>;
+  viewEnd: number;
+  index: number;
+}
+
+export function LeftWedge({ item, classes, viewStart }: LeftWedgeProps) {
+  const barEnd =
+    item.startTime !== undefined && item.duration !== undefined
+      ? item.startTime + item.duration
+      : undefined;
+  const isOffscreenLeft =
+    (barEnd !== undefined && barEnd < viewStart) ||
+    (item.time !== undefined && item.time < viewStart);
+
+  return (
+    <div
+      key={`left-wedge=${item.id}`}
+      className={cn("relative flex h-[32px] w-0 flex-row justify-items-center")}
+    >
+      {isOffscreenLeft && item.color ? (
+        <div
+          className={cn(
+            "my-auto border-y-[6px] border-r-[5px] border-y-transparent",
+            classes[item.color],
+          )}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+export function RightWedge({ item, classes, viewEnd }: RightWedgeProps) {
+  const barStart = item.startTime;
+  const isOffscreenRight =
+    (barStart !== undefined && barStart > viewEnd) ||
+    (item.time !== undefined && item.time > viewEnd);
+
+  return (
+    <div
+      key={`right-wedge=${item.id}`}
+      className={cn("relative flex h-[32px] w-0 flex-row justify-items-center")}
+    >
+      {isOffscreenRight && item.color ? (
+        <div
+          className={cn(
+            "my-auto border-y-[6px] border-l-[5px] border-y-transparent",
+            classes[item.color],
+          )}
+        />
+      ) : null}
+    </div>
+  );
+}

package/src/ui/waterfall/WheelZoomContext.tsx

@@ -0,0 +1,128 @@
+import React, { useCallback, useEffect, useRef, type HTMLProps, RefObject } from "react";
+
+export interface WheelZoomContextProps extends HTMLProps<HTMLDivElement> {
+  /** Current view start position */
+  viewStart: number;
+  /** Current view duration/viewWindow */
+  viewDuration: number;
+  /** Callback when view start changes */
+  onViewStartChange: (newStart: number) => void;
+  /** Callback when view duration/viewWindow changes */
+  onWindowChange: (newDuration: number) => void;
+  /** Minimum zoom viewWindow duration in seconds (default: 0.01) */
+  minWindow?: number;
+  /** Maximum zoom viewWindow duration in seconds (default: Infinity) */
+  maxWindow?: number;
+  /** Zoom factor for mouse wheel zoom (default: 1.1) */
+  zoomFactor?: number;
+  /** Enable wheel handling for pan and zoom (default: true) */
+  enabled?: boolean;
+  /** Children elements to wrap with wheel zoom functionality */
+  children: React.ReactNode;
+  /** Additional CSS classes for the wrapper */
+  className?: string;
+}
+
+/**
+ * Wrapper component that provides wheel zoom and pan functionality to its children.
+ * Uses both React synthetic events and native events for proper scroll prevention.
+ *
+ * - Normal wheel: Pan horizontally and vertically
+ * - Shift/Alt + wheel: Zoom in/out while maintaining cursor position
+ *
+ * @example
+ * ```tsx
+ * <WheelZoomContext
+ *   viewStart={viewStart}
+ *   viewWindow={viewWindow}
+ *   onViewStartChange={setViewStart}
+ *   onWindowChange={setViewDuration}
+ *   minWindow={0.01}
+ *   maxWindow={100}
+ * >
+ *   <TimelineContent />
+ * </WheelZoomContext>
+ * ```
+ */
+export function WheelZoomContext({
+  ref,
+  className,
+  viewStart,
+  viewDuration,
+  onViewStartChange,
+  onWindowChange,
+  minWindow = 0.01,
+  maxWindow = Infinity,
+  zoomFactor = 1.1,
+  enabled = true,
+  children,
+}: WheelZoomContextProps) {
+  const localRef = useRef<HTMLDivElement>(null);
+  const containerRef = (ref as RefObject<HTMLDivElement>) || localRef;
+
+  // Native event listener to prevent default scrolling
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !enabled) return;
+
+    const preventScroll = (e: WheelEvent) => {
+      e.preventDefault();
+    };
+
+    // Add passive: false to ensure preventDefault works
+    container.addEventListener("wheel", preventScroll, { passive: false });
+
+    return () => {
+      container.removeEventListener("wheel", preventScroll);
+    };
+  }, [enabled]);
+
+  const handleWheel = useCallback(
+    (e: React.WheelEvent<HTMLDivElement>) => {
+      if (!enabled) return;
+
+      const container = containerRef.current;
+      if (!container) return;
+
+      if (e.shiftKey || e.altKey) {
+        // Zoom: maintain cursor position
+        const rect = container.getBoundingClientRect();
+        const cursorX = e.clientX - rect.left;
+        const cursorRatio = cursorX / container.offsetWidth;
+        const timeAtCursor = viewStart + cursorRatio * viewDuration;
+
+        // Calculate new duration
+        const scaleFactor = e.deltaY < 0 ? 1 / zoomFactor : zoomFactor;
+        const newDuration = Math.max(minWindow, Math.min(maxWindow, viewDuration * scaleFactor));
+
+        if (newDuration === viewDuration) return;
+
+        // Adjust view start to keep cursor position stable
+        const newViewStart = timeAtCursor - cursorRatio * newDuration;
+
+        onWindowChange(newDuration);
+        onViewStartChange(newViewStart);
+      } else {
+        // Pan: convert wheel delta to time offset
+        const panAmount = ((e.deltaX + e.deltaY) / container.offsetWidth) * viewDuration;
+        onViewStartChange(viewStart + panAmount);
+      }
+    },
+    [
+      enabled,
+      viewStart,
+      viewDuration,
+      onViewStartChange,
+      onWindowChange,
+      minWindow,
+      maxWindow,
+      zoomFactor,
+    ],
+  );
+
+  return (
+    <div ref={containerRef} className={className} onWheel={handleWheel}>
+      {children}
+    </div>
+  );
+}