@vuer-ai/vuer-uikit 0.0.120 → 0.1.0

package/src/ui/virtual-list/VirtualList.tsx

@@ -0,0 +1,207 @@
+import { forwardRef, useCallback, useEffect, useRef, useState, type ComponentProps } from "react";
+
+import type { VirtualListProps } from "./types";
+import { useVirtualList } from "./useVirtualList";
+import { cn } from "../../hooks";
+
+interface VirtualListComponentProps<T>
+  extends Omit<ComponentProps<"div">, "children" | "onScroll">,
+    VirtualListProps<T> {}
+
+/**
+ * VirtualList component - renders only visible items for efficient list rendering.
+ * Supports both fixed and dynamic item heights.
+ *
+ * @param items - Array of items to render
+ * @param itemHeight - Fixed height in pixels, or 'dynamic' for variable height items
+ * @param estimatedItemHeight - Estimated height for dynamic mode (default: 40)
+ * @param height - Container height (default: '100%')
+ * @param overscan - Number of extra items to render outside visible area (default: 3)
+ * @param getItemKey - Function to get a unique key for each item
+ * @param children - Render function for each item
+ * @param onScroll - Callback when scroll position changes
+ * @param onRangeChange - Callback when visible range changes
+ */
+function VirtualListInner<T>(
+  {
+    items,
+    itemHeight,
+    estimatedItemHeight = 40,
+    height = "100%",
+    overscan = 3,
+    getItemKey,
+    children,
+    onScroll,
+    onRangeChange,
+    className,
+    style,
+    ...props
+  }: VirtualListComponentProps<T>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(0);
+
+  // Combine refs
+  const setRefs = useCallback(
+    (node: HTMLDivElement | null) => {
+      (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref],
+  );
+
+  // Measure container height
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerHeight(entry.contentRect.height);
+      }
+    });
+
+    resizeObserver.observe(container);
+    setContainerHeight(container.clientHeight);
+
+    return () => resizeObserver.disconnect();
+  }, []);
+
+  const { visibleRange, totalHeight, getItemStyle, measureItem } = useVirtualList({
+    items,
+    itemHeight,
+    estimatedItemHeight,
+    containerHeight,
+    overscan,
+    scrollTop,
+  });
+
+  // Handle scroll
+  const handleScroll = useCallback(
+    (e: React.UIEvent<HTMLDivElement>) => {
+      const newScrollTop = e.currentTarget.scrollTop;
+      setScrollTop(newScrollTop);
+      onScroll?.(newScrollTop);
+    },
+    [onScroll],
+  );
+
+  // Notify range changes
+  const prevRangeRef = useRef({ start: -1, end: -1 });
+  useEffect(() => {
+    if (
+      visibleRange.start !== prevRangeRef.current.start ||
+      visibleRange.end !== prevRangeRef.current.end
+    ) {
+      prevRangeRef.current = visibleRange;
+      onRangeChange?.(visibleRange.start, visibleRange.end);
+    }
+  }, [visibleRange, onRangeChange]);
+
+  // Render visible items
+  const visibleItems = [];
+  const isDynamic = itemHeight === "dynamic";
+  // For dynamic mode, children should fill the wrapper
+  const dynamicChildStyle = { width: "100%" };
+
+  for (let i = visibleRange.start; i <= visibleRange.end && i < items.length; i++) {
+    const item = items[i];
+    const key = getItemKey ? getItemKey(item, i) : i;
+    const itemStyle = getItemStyle(i);
+
+    // For dynamic height, positioning is on wrapper, children just need width
+    // For fixed height, full style is passed to children render function
+    visibleItems.push(
+      <VirtualListItem
+        key={key}
+        index={i}
+        isDynamic={isDynamic}
+        measureItem={measureItem}
+        style={itemStyle}
+      >
+        {children(item, i, isDynamic ? dynamicChildStyle : itemStyle)}
+      </VirtualListItem>,
+    );
+  }
+
+  return (
+    <div
+      ref={setRefs}
+      className={cn("relative w-full overflow-auto", className)}
+      style={{
+        height,
+        ...style,
+      }}
+      onScroll={handleScroll}
+      {...props}
+    >
+      <div
+        style={{
+          height: totalHeight,
+          position: "relative",
+          width: "100%",
+        }}
+      >
+        {visibleItems}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Individual item wrapper that handles measurement for dynamic heights
+ */
+function VirtualListItem({
+  children,
+  index,
+  isDynamic,
+  measureItem,
+  style,
+}: {
+  children: React.ReactNode;
+  index: number;
+  isDynamic: boolean;
+  measureItem: (index: number, height: number) => void;
+  style: React.CSSProperties;
+}) {
+  const itemRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isDynamic || !itemRef.current) return;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        measureItem(index, entry.contentRect.height);
+      }
+    });
+
+    resizeObserver.observe(itemRef.current);
+    measureItem(index, itemRef.current.offsetHeight);
+
+    return () => resizeObserver.disconnect();
+  }, [index, isDynamic, measureItem]);
+
+  if (!isDynamic) {
+    return <>{children}</>;
+  }
+
+  // For dynamic height items, apply positioning to wrapper and let content define height
+  return (
+    <div ref={itemRef} style={style}>
+      {children}
+    </div>
+  );
+}
+
+// Use a generic forwardRef pattern
+export const VirtualList = forwardRef(VirtualListInner) as <T>(
+  props: VirtualListComponentProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> },
+) => React.ReactElement;
+
+export type { VirtualListProps };

package/src/ui/virtual-list/index.ts

@@ -0,0 +1,8 @@
+export { VirtualList } from "./VirtualList";
+export type {
+  VirtualListProps,
+  ItemHeight,
+  UseVirtualListOptions,
+  UseVirtualListResult,
+} from "./types";
+export { useVirtualList } from "./useVirtualList";

package/src/ui/virtual-list/types.ts

@@ -0,0 +1,54 @@
+import type { CSSProperties, ReactNode } from "react";
+
+export type ItemHeight = number | "dynamic";
+
+export interface VirtualListProps<T> {
+  /** Array of items to render */
+  items: T[];
+  /** Fixed height in pixels, or 'dynamic' for variable height items */
+  itemHeight: ItemHeight;
+  /** Estimated height for dynamic mode initial calculation (default: 40) */
+  estimatedItemHeight?: number;
+  /** Container height (default: '100%') */
+  height?: number | string;
+  /** Number of extra items to render outside visible area (default: 3) */
+  overscan?: number;
+  /** Function to get a unique key for each item */
+  getItemKey?: (item: T, index: number) => string | number;
+  /** Render function for each item - receives item, index, and style to apply */
+  children: (item: T, index: number, style: CSSProperties) => ReactNode;
+  /** Callback when scroll position changes */
+  onScroll?: (scrollTop: number) => void;
+  /** Callback when visible range changes */
+  onRangeChange?: (startIndex: number, endIndex: number) => void;
+  /** Additional className for the container */
+  className?: string;
+}
+
+export interface VirtualListState {
+  scrollTop: number;
+  startIndex: number;
+  endIndex: number;
+}
+
+export interface ItemMeasurement {
+  offset: number;
+  height: number;
+}
+
+export interface UseVirtualListOptions<T> {
+  items: T[];
+  itemHeight: ItemHeight;
+  estimatedItemHeight: number;
+  containerHeight: number;
+  overscan: number;
+  scrollTop: number;
+}
+
+export interface UseVirtualListResult {
+  visibleRange: { start: number; end: number };
+  totalHeight: number;
+  getItemStyle: (index: number) => CSSProperties;
+  measureItem: (index: number, height: number) => void;
+  measurements: Map<number, ItemMeasurement>;
+}

package/src/ui/virtual-list/useVirtualList.ts

@@ -0,0 +1,203 @@
+import { useCallback, useMemo, useRef, type CSSProperties } from "react";
+
+import type {
+  ItemHeight,
+  ItemMeasurement,
+  UseVirtualListOptions,
+  UseVirtualListResult,
+} from "./types";
+
+/**
+ * Binary search to find the start index for a given scroll position
+ */
+function findStartIndex(
+  measurements: Map<number, ItemMeasurement>,
+  itemCount: number,
+  scrollTop: number,
+  itemHeight: ItemHeight,
+  estimatedItemHeight: number,
+): number {
+  if (itemCount === 0) return 0;
+
+  if (typeof itemHeight === "number") {
+    return Math.floor(scrollTop / itemHeight);
+  }
+
+  // For dynamic heights, use binary search on measured items
+  let low = 0;
+  let high = itemCount - 1;
+
+  while (low <= high) {
+    const mid = Math.floor((low + high) / 2);
+    const measurement = measurements.get(mid);
+    const offset = measurement?.offset ?? mid * estimatedItemHeight;
+
+    if (offset < scrollTop) {
+      low = mid + 1;
+    } else if (offset > scrollTop) {
+      high = mid - 1;
+    } else {
+      return mid;
+    }
+  }
+
+  return Math.max(0, low - 1);
+}
+
+/**
+ * Hook for virtualizing a list of items
+ */
+export function useVirtualList<T>({
+  items,
+  itemHeight,
+  estimatedItemHeight,
+  containerHeight,
+  overscan,
+  scrollTop,
+}: UseVirtualListOptions<T>): UseVirtualListResult {
+  const measurementsRef = useRef<Map<number, ItemMeasurement>>(new Map());
+  const measurements = measurementsRef.current;
+
+  const isFixed = typeof itemHeight === "number";
+
+  // Calculate total height
+  const totalHeight = useMemo(() => {
+    if (isFixed) {
+      return items.length * itemHeight;
+    }
+
+    // For dynamic heights, use measured heights + estimated for unmeasured
+    let height = 0;
+    for (let i = 0; i < items.length; i++) {
+      const measurement = measurements.get(i);
+      height += measurement?.height ?? estimatedItemHeight;
+    }
+    return height;
+  }, [items.length, itemHeight, isFixed, estimatedItemHeight, measurements]);
+
+  // Calculate visible range
+  const visibleRange = useMemo(() => {
+    if (items.length === 0) {
+      return { start: 0, end: 0 };
+    }
+
+    const startIndex = findStartIndex(
+      measurements,
+      items.length,
+      scrollTop,
+      itemHeight,
+      estimatedItemHeight,
+    );
+
+    let endIndex: number;
+    if (isFixed) {
+      endIndex = Math.min(items.length - 1, Math.ceil((scrollTop + containerHeight) / itemHeight));
+    } else {
+      // For dynamic, scan forward until we exceed container
+      let accumulatedHeight = 0;
+      endIndex = startIndex;
+
+      // Get starting offset
+      const startMeasurement = measurements.get(startIndex);
+      const startOffset = startMeasurement?.offset ?? startIndex * estimatedItemHeight;
+      accumulatedHeight = startOffset - scrollTop;
+
+      while (endIndex < items.length - 1 && accumulatedHeight < containerHeight) {
+        const measurement = measurements.get(endIndex);
+        accumulatedHeight += measurement?.height ?? estimatedItemHeight;
+        endIndex++;
+      }
+    }
+
+    // Apply overscan
+    const start = Math.max(0, startIndex - overscan);
+    const end = Math.min(items.length - 1, endIndex + overscan);
+
+    return { start, end };
+  }, [
+    items.length,
+    scrollTop,
+    containerHeight,
+    overscan,
+    itemHeight,
+    isFixed,
+    estimatedItemHeight,
+    measurements,
+  ]);
+
+  // Get style for an item at a given index
+  const getItemStyle = useCallback(
+    (index: number): CSSProperties => {
+      let top: number;
+
+      if (isFixed) {
+        top = index * (itemHeight as number);
+      } else {
+        const measurement = measurements.get(index);
+        if (measurement) {
+          top = measurement.offset;
+        } else {
+          // Estimate offset based on previous measurements
+          let offset = 0;
+          for (let i = 0; i < index; i++) {
+            const m = measurements.get(i);
+            offset += m?.height ?? estimatedItemHeight;
+          }
+          top = offset;
+        }
+      }
+
+      return {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        transform: `translateY(${top}px)`,
+        ...(isFixed && { height: itemHeight as number }),
+      };
+    },
+    [itemHeight, isFixed, estimatedItemHeight, measurements],
+  );
+
+  // Measure an item (for dynamic heights)
+  const measureItem = useCallback(
+    (index: number, height: number) => {
+      const currentMeasurement = measurements.get(index);
+
+      // Only update if height changed
+      if (currentMeasurement?.height === height) {
+        return;
+      }
+
+      // Calculate offset based on previous items
+      let offset = 0;
+      for (let i = 0; i < index; i++) {
+        const m = measurements.get(i);
+        offset += m?.height ?? estimatedItemHeight;
+      }
+
+      measurements.set(index, { offset, height });
+
+      // Update offsets for subsequent measured items
+      let currentOffset = offset + height;
+      for (let i = index + 1; i < items.length; i++) {
+        const m = measurements.get(i);
+        if (m) {
+          measurements.set(i, { ...m, offset: currentOffset });
+          currentOffset += m.height;
+        } else {
+          break;
+        }
+      }
+    },
+    [items.length, estimatedItemHeight, measurements],
+  );
+
+  return {
+    visibleRange,
+    totalHeight,
+    getItemStyle,
+    measureItem,
+    measurements,
+  };
+}

package/src/ui/waterfall/TimelineProcessBar.tsx

@@ -4,6 +4,8 @@ import { LogItemWithMeta } from "./types";
 import { borderColorClasses, colorClasses, formatDuration } from "./utils";
 import { cn } from "../../hooks";
 
+const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
+
 export interface TimelineEventBarProps {
   item: LogItemWithMeta;
   isHovered: boolean;
@@ -188,17 +190,21 @@ export function TimelineProcessBar({
           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"
+              className="pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center justify-center overflow-hidden"
               style={{
                 left: `${timeToPercent(visibleStart)}%`,
                 width: `${visibleWidthPercent}%`,
+                zoom: clamp(visibleWidthPercent, 6, 12) / 12,
               }}
             >
-              <span className="text-text-secondary text-xs italic">Halted</span>
+              {visibleWidthPercent > 7 && (
+                <span className="rounded-full bg-orange-500 px-2 py-0.5 text-xs text-white">
+                  Halted
+                </span>
+              )}
+              {visibleWidthPercent < 7 && <span className="h-3 w-3 rounded-full bg-orange-500" />}
             </div>
           );
         })()}

package/dist/auth/components/index.cjs

@@ -1,128 +0,0 @@
-'use strict';
-
-require('../../chunk-NK7L5H2Y.cjs');
-var chunkL2XJ5Q7T_cjs = require('../../chunk-L2XJ5Q7T.cjs');
-require('../../chunk-EMXEFZEB.cjs');
-require('../../chunk-RSBVQ7SJ.cjs');
-require('../../chunk-OOHCJIRV.cjs');
-require('../../chunk-7R5HY3IM.cjs');
-require('../../chunk-Q76WU4DL.cjs');
-require('../../chunk-3WMO5QJJ.cjs');
-require('../../chunk-X3H6FYAM.cjs');
-require('../../chunk-YWECB5GR.cjs');
-require('../../chunk-6D7FGGSX.cjs');
-require('../../chunk-WJL5HMO6.cjs');
-require('../../chunk-RJ7I6ZQK.cjs');
-require('../../chunk-7H7U2X45.cjs');
-require('../../chunk-QWBMDS3S.cjs');
-require('../../chunk-Z6UDRPC2.cjs');
-require('../../chunk-YJ6X6T5K.cjs');
-require('../../chunk-G5NT42YF.cjs');
-require('../../chunk-EEGQLTSQ.cjs');
-require('../../chunk-VOTZLQ6J.cjs');
-require('../../chunk-S37MJNNP.cjs');
-require('../../chunk-UTS56UA5.cjs');
-require('../../chunk-JWVH6R35.cjs');
-require('../../chunk-MVAFOQ67.cjs');
-require('../../chunk-RW4T7UBU.cjs');
-require('../../chunk-G2ZYONQO.cjs');
-require('../../chunk-E6G4MTX3.cjs');
-require('../../chunk-4AE2TOOL.cjs');
-require('../../chunk-EXXV3BXT.cjs');
-require('../../chunk-EBFPZBUQ.cjs');
-require('../../chunk-WX7SLJUA.cjs');
-require('../../chunk-RTYZO2AC.cjs');
-require('../../chunk-S7CCCMMU.cjs');
-require('../../chunk-LGOEGWMJ.cjs');
-require('../../chunk-H7RH4CZ7.cjs');
-require('../../chunk-KR7VBV3B.cjs');
-require('../../chunk-WHV4VATL.cjs');
-require('../../chunk-LYGYXV7S.cjs');
-require('../../chunk-EK3BTKZP.cjs');
-require('../../chunk-4H5EXSBN.cjs');
-require('../../chunk-63OJOP6W.cjs');
-require('../../chunk-DECFNBXU.cjs');
-require('../../chunk-QBAZ6TKZ.cjs');
-require('../../chunk-MXGPFCLN.cjs');
-require('../../chunk-SAXISARG.cjs');
-require('../../chunk-IU65XB2K.cjs');
-require('../../chunk-HB65PF7F.cjs');
-require('../../chunk-CH3BSVL4.cjs');
-require('../../chunk-WDSOII5A.cjs');
-require('../../chunk-NKGUQZTD.cjs');
-require('../../chunk-CKGEV2JL.cjs');
-require('../../chunk-FZAGJSW2.cjs');
-require('../../chunk-LVIZRMYN.cjs');
-require('../../chunk-EY6PKK4X.cjs');
-require('../../chunk-MNCBTS63.cjs');
-require('../../chunk-4PMXRQXC.cjs');
-require('../../chunk-66NKH2SV.cjs');
-require('../../chunk-7AEOJFD4.cjs');
-require('../../chunk-ASZIBFA6.cjs');
-require('../../chunk-DAVMLI3P.cjs');
-require('../../chunk-KQAZ6BRD.cjs');
-require('../../chunk-ZZDIW5JV.cjs');
-require('../../chunk-SBTB5YJV.cjs');
-require('../../chunk-XSKUAK23.cjs');
-require('../../chunk-T737IFFK.cjs');
-require('../../chunk-DAA2GQAS.cjs');
-require('../../chunk-ZS7ESTKH.cjs');
-require('../../chunk-PV6CEMTT.cjs');
-require('../../chunk-KPGZOX2A.cjs');
-require('../../chunk-ND3WJ63Z.cjs');
-require('../../chunk-N4Y5CBOI.cjs');
-require('../../chunk-VYINXXYX.cjs');
-require('../../chunk-JNV3UBBP.cjs');
-require('../../chunk-V5T6XOSB.cjs');
-require('../../chunk-5ARBIWXX.cjs');
-require('../../chunk-DM43KZU7.cjs');
-require('../../chunk-U5W4ZALG.cjs');
-require('../../chunk-BI4QZVVB.cjs');
-require('../../chunk-GTBXRWCK.cjs');
-require('../../chunk-SLXM4F24.cjs');
-require('../../chunk-K2BQNNEX.cjs');
-require('../../chunk-V75PKBIV.cjs');
-require('../../chunk-CWS5PF67.cjs');
-require('../../chunk-CR6JOOO3.cjs');
-require('../../chunk-JQYMF2FW.cjs');
-require('../../chunk-2CD4D2BR.cjs');
-require('../../chunk-Q7WCKEXG.cjs');
-require('../../chunk-JOOURIX7.cjs');
-require('../../chunk-X6WOCNBX.cjs');
-require('../../chunk-5OZS5UJX.cjs');
-require('../../chunk-BUAWPPXA.cjs');
-require('../../chunk-LGFWHV23.cjs');
-require('../../chunk-3ZEQVODC.cjs');
-require('../../chunk-42WQWP6X.cjs');
-require('../../chunk-F2LEYFWW.cjs');
-require('../../chunk-GRXUYMZJ.cjs');
-require('../../chunk-7AAMQGY2.cjs');
-require('../../chunk-XS5IUI62.cjs');
-require('../../chunk-KQW3YARN.cjs');
-require('../../chunk-PRNBDGOF.cjs');
-require('../../chunk-4OUQ6NSX.cjs');
-require('../../chunk-F3HOBNGR.cjs');
-require('../../chunk-5AKVDZMA.cjs');
-require('../../chunk-JYYAGDLZ.cjs');
-require('../../chunk-T3G35JSP.cjs');
-require('../../chunk-JMCH2AFN.cjs');
-require('../../chunk-W3IHFG4B.cjs');
-require('../../chunk-QN4N4I3Z.cjs');
-require('../../chunk-LBWMTA5T.cjs');
-require('../../chunk-Q7E73DVJ.cjs');
-require('../../chunk-JR4TVE43.cjs');
-require('../../chunk-VXZURKMQ.cjs');
-require('../../chunk-Q4XH2Z5M.cjs');
-require('../../chunk-6BOWMGFG.cjs');
-require('../../chunk-YZIR6LIY.cjs');
-require('../../chunk-GEGPGQVH.cjs');
-require('../../chunk-CRX2ZCM2.cjs');
-require('../../chunk-G4FJGNY5.cjs');
-require('../../chunk-F4Z5KATZ.cjs');
-
-
-
-Object.defineProperty(exports, "UserAvatar", {
-  enumerable: true,
-  get: function () { return chunkL2XJ5Q7T_cjs.UserAvatar; }
-});

package/dist/auth/components/index.d.cts

@@ -1,2 +0,0 @@
-export { UserAvatar } from './user-avatar/index.cjs';
-import 'react/jsx-runtime';

package/dist/auth/components/index.d.ts

@@ -1,2 +0,0 @@
-export { UserAvatar } from './user-avatar/index.js';
-import 'react/jsx-runtime';