@vuer-ai/vuer-uikit 0.0.121 → 0.1.0

package/dist/{chunk-Z7PWETGZ.mjs → chunk-LHP7FLGK.mjs}

@@ -1,4 +1,4 @@
-import { VectorInput } from './chunk-HUPECWNG.mjs';
+import { VectorInput } from './chunk-V4THHKSO.mjs';
 import { forwardRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-LJYIEOGQ.mjs → chunk-LLFE3UHZ.mjs}

@@ -1,17 +1,17 @@
 import { useTimelineState } from './chunk-JWKOW2OV.mjs';
 import { useViewport } from './chunk-VPQ5SSY3.mjs';
-import { TimelineEvent } from './chunk-EZ536NLQ.mjs';
-import { TimelineProcessBar } from './chunk-7TD77VF4.mjs';
 import { LeftWedge, RightWedge } from './chunk-OW653F7T.mjs';
 import { WheelZoomContext } from './chunk-CIPI2V54.mjs';
-import { TreeView } from './chunk-7RRQ2HHL.mjs';
-import { useTreeState, useTreeSearch } from './chunk-NKUK73WB.mjs';
 import { CursorOverlay } from './chunk-ZQOQB6GF.mjs';
 import { NavigationControls } from './chunk-D5H4XX6Q.mjs';
-import { rightWedgeClasses, leftWedgeClasses, TOTAL_DURATION } from './chunk-4U232QAX.mjs';
 import { Tick } from './chunk-JVV7W3TP.mjs';
 import { TimeRuleEventDot } from './chunk-OC4HRPZU.mjs';
+import { TimelineEvent } from './chunk-EZ536NLQ.mjs';
+import { TimelineProcessBar } from './chunk-7TD77VF4.mjs';
+import { rightWedgeClasses, leftWedgeClasses, TOTAL_DURATION } from './chunk-4U232QAX.mjs';
 import { TreeSearchBar } from './chunk-XZTEU7ME.mjs';
+import { TreeView } from './chunk-YRNI7ZJ7.mjs';
+import { useTreeState, useTreeSearch } from './chunk-NKUK73WB.mjs';
 import { TooltipProvider } from './chunk-IPMWGCAI.mjs';
 import { SyncScroll, SyncDragY, SyncScrollSlave } from './chunk-EGJLY5VZ.mjs';
 import { cn } from './chunk-HBEU2PU2.mjs';

package/dist/chunk-NUBFD3YP.mjs

@@ -0,0 +1,117 @@
+import { InputRoot, InputSlot } from './chunk-HGTL7DFT.mjs';
+import { cn } from './chunk-HBEU2PU2.mjs';
+import { forwardRef, useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ColorInput = forwardRef(function ColorInput2({ className, value, defaultValue, onChange, onValueChange, ...props }, ref) {
+  const normalizeColor = (colorValue) => {
+    if (colorValue === void 0 || colorValue === null) {
+      return "ffffff";
+    }
+    if (typeof colorValue === "number") {
+      if (colorValue > 16777215) {
+        const hex = colorValue.toString(16).padStart(8, "0");
+        return hex.slice(0, 6);
+      }
+      return colorValue.toString(16).padStart(6, "0");
+    }
+    if (typeof colorValue === "string") {
+      const trimmed = colorValue.trim().toLowerCase();
+      if (trimmed.startsWith("0x")) {
+        const hex = trimmed.slice(2);
+        if (hex.length > 6) {
+          return hex.slice(0, 6);
+        }
+        return hex.padStart(6, "0");
+      }
+      if (trimmed.startsWith("#")) {
+        const hex = trimmed.slice(1);
+        if (hex.length === 3) {
+          return hex.split("").map((c) => c + c).join("");
+        }
+        if (hex.length === 4) {
+          return hex.slice(0, 3).split("").map((c) => c + c).join("");
+        }
+        if (hex.length > 6) {
+          return hex.slice(0, 6);
+        }
+        return hex;
+      }
+      const rgbMatch = trimmed.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+      if (rgbMatch) {
+        const r = Math.min(255, parseInt(rgbMatch[1], 10)).toString(16).padStart(2, "0");
+        const g = Math.min(255, parseInt(rgbMatch[2], 10)).toString(16).padStart(2, "0");
+        const b = Math.min(255, parseInt(rgbMatch[3], 10)).toString(16).padStart(2, "0");
+        return r + g + b;
+      }
+      if (/^[0-9a-f]+$/i.test(trimmed)) {
+        if (trimmed.length === 3) {
+          return trimmed.split("").map((c) => c + c).join("");
+        }
+        if (trimmed.length > 6) {
+          return trimmed.slice(0, 6);
+        }
+        return trimmed.padStart(6, "0");
+      }
+      return trimmed;
+    }
+    return "ffffff";
+  };
+  const [color, setColor] = useState(normalizeColor(value || defaultValue));
+  useEffect(() => {
+    if (value !== void 0) {
+      setColor(normalizeColor(value));
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsxs("div", { className: "gap-sm flex", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "color",
+        value: `#${color}`,
+        onChange: (e) => {
+          const newColor = e.currentTarget.value.replace(/^#/, "");
+          setColor(newColor);
+          onValueChange?.(newColor);
+          onChange?.(e);
+        },
+        className: cn(
+          [
+            "h-6",
+            "w-6",
+            "flex-none",
+            "cursor-pointer",
+            "rounded-1",
+            "[appearance:none]",
+            "[&::-webkit-color-swatch-wrapper]:p-0",
+            "[&::-webkit-color-swatch]:border-line-primary",
+            "[&::-webkit-color-swatch]:rounded-lg",
+            "[&::-moz-color-swatch]:border-line-primary",
+            "[&::-moz-color-swatch]:rounded-lg"
+          ],
+          className
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InputRoot,
+      {
+        ...props,
+        size: "sm",
+        type: "text",
+        className: "flex-1",
+        value: color,
+        onChange: (e) => {
+          const newColor = e.currentTarget.value;
+          setColor(newColor);
+          onValueChange?.(newColor);
+          onChange?.(e);
+        },
+        children: /* @__PURE__ */ jsx(InputSlot, { children: "#" })
+      }
+    )
+  ] });
+});
+
+export { ColorInput };

package/dist/{chunk-COL2MXGC.cjs → chunk-OX5FXH6W.cjs}

@@ -4,9 +4,9 @@ var chunk6LTCLQH3_cjs = require('./chunk-6LTCLQH3.cjs');
 var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 
-var PACKAGE_VERSION = "0.0.121" ;
+var PACKAGE_VERSION = "0.1.0" ;
 var PACKAGE_NAME = "@vuer-ai/vuer-uikit" ;
-var GIT_HASH = "f63c177" ;
+var GIT_HASH = "75def5e" ;
 function PackageBadge({
   className,
   packageName,

package/dist/{chunk-COJRGW3A.cjs → chunk-P7J7XHDE.cjs}

@@ -1,12 +1,12 @@
 'use strict';
 
-var chunkDG2EVWIW_cjs = require('./chunk-DG2EVWIW.cjs');
+var chunkUZTOUPJ7_cjs = require('./chunk-UZTOUPJ7.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 var DegInput = react.forwardRef(function DegInput2({ value = 0, onChange, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkDG2EVWIW_cjs.InputNumbers,
+    chunkUZTOUPJ7_cjs.InputNumbers,
     {
       ref,
       value: [value],

package/dist/chunk-PHRZ5JE6.mjs

@@ -0,0 +1 @@
+

package/dist/chunk-PMYOKSO3.mjs

@@ -0,0 +1,30 @@
+import { Button } from './chunk-5JYH7TXY.mjs';
+import { IconRenderer } from './chunk-6YMDD5CU.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DialButton = ({
+  name,
+  label,
+  icon,
+  onClick,
+  variant = "secondary",
+  disabled = false
+}) => {
+  const displayLabel = label || name.charAt(0).toUpperCase() + name.slice(1);
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant,
+      size: "sm",
+      onClick,
+      disabled,
+      className: "w-full justify-center gap-2",
+      children: [
+        /* @__PURE__ */ jsx(IconRenderer, { iconName: icon, size: 14 }),
+        displayLabel
+      ]
+    }
+  );
+};
+
+export { DialButton };

package/dist/chunk-PTUZYCOY.mjs

@@ -0,0 +1,314 @@
+import { CursorContext } from './chunk-3FR3WKI4.mjs';
+import { cn } from './chunk-HBEU2PU2.mjs';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var SPRING_CONFIG = {
+  stiffness: 0.15,
+  // How snappy (higher = faster)
+  damping: 0.75};
+var SQUISH_CONFIG = {
+  maxSquish: 0.15,
+  // Maximum squish amount (0.15 = 15% squish)
+  velocityScale: 8e-3,
+  // How much velocity affects squish
+  recovery: 0.15
+  // How fast squish recovers
+};
+var CursorProvider = ({
+  children,
+  maxOffsetX = 5,
+  maxOffsetY = 20,
+  cursorSize = 20,
+  boundaryThreshold = 4,
+  outerThreshold = 8,
+  cursorClassName,
+  className,
+  as: Component = "div",
+  ...props
+}) => {
+  const [isClient, setIsClient] = useState(false);
+  const [isMouseInside, setIsMouseInside] = useState(false);
+  const cursorRef = useRef(null);
+  const cursorInnerRef = useRef(null);
+  const mousePositionRef = useRef({ x: 0, y: 0 });
+  const prevMousePositionRef = useRef({ x: 0, y: 0 });
+  const hoveredElementIdRef = useRef(null);
+  const hoveredElementRef = useRef(null);
+  const elementDimensionsRef = useRef({ width: 0, height: 0, x: 0, y: 0, right: 0, bottom: 0 });
+  const elementBorderRadiusRef = useRef("9999px");
+  const animationFrameRef = useRef(null);
+  const springRef = useRef({
+    x: 0,
+    y: 0,
+    width: cursorSize,
+    height: cursorSize,
+    velocityX: 0,
+    velocityY: 0,
+    velocityW: 0,
+    velocityH: 0,
+    scaleX: 1,
+    scaleY: 1
+  });
+  const targetRef = useRef({
+    x: 0,
+    y: 0,
+    width: cursorSize,
+    height: cursorSize
+  });
+  const [hoveredElementId, setHoveredElementId] = useState(null);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  const updateTarget = useCallback(() => {
+    const mouse = mousePositionRef.current;
+    const dims = elementDimensionsRef.current;
+    const isHovering = hoveredElementIdRef.current !== null;
+    if (isHovering && dims.width > 0) {
+      const distFromLeft = mouse.x - dims.x;
+      const distFromRight = dims.x + dims.width - mouse.x;
+      const distFromTop = mouse.y - dims.y;
+      const distFromBottom = dims.y + dims.height - mouse.y;
+      const totalThreshold = boundaryThreshold + outerThreshold;
+      let offsetX = 0;
+      let offsetY = 0;
+      if (distFromLeft < boundaryThreshold) {
+        const progress = Math.min(1, (boundaryThreshold - distFromLeft) / totalThreshold);
+        offsetX = -maxOffsetX * progress;
+      } else if (distFromRight < boundaryThreshold) {
+        const progress = Math.min(1, (boundaryThreshold - distFromRight) / totalThreshold);
+        offsetX = maxOffsetX * progress;
+      }
+      if (distFromTop < boundaryThreshold) {
+        const progress = Math.min(1, (boundaryThreshold - distFromTop) / totalThreshold);
+        offsetY = -maxOffsetY * progress;
+      } else if (distFromBottom < boundaryThreshold) {
+        const progress = Math.min(1, (boundaryThreshold - distFromBottom) / totalThreshold);
+        offsetY = maxOffsetY * progress;
+      }
+      targetRef.current = {
+        x: dims.x + offsetX,
+        y: dims.y + offsetY,
+        width: dims.width,
+        height: dims.height
+      };
+    } else {
+      targetRef.current = {
+        x: mouse.x - cursorSize / 2,
+        y: mouse.y - cursorSize / 2,
+        width: cursorSize,
+        height: cursorSize
+      };
+    }
+  }, [cursorSize, maxOffsetX, maxOffsetY, boundaryThreshold, outerThreshold]);
+  const animate = useCallback(() => {
+    const cursor = cursorRef.current;
+    const cursorInner = cursorInnerRef.current;
+    if (!cursor || !cursorInner) {
+      animationFrameRef.current = requestAnimationFrame(animate);
+      return;
+    }
+    const spring = springRef.current;
+    const target = targetRef.current;
+    const { stiffness, damping } = SPRING_CONFIG;
+    const mouse = mousePositionRef.current;
+    const prevMouse = prevMousePositionRef.current;
+    const mouseVelocityX = mouse.x - prevMouse.x;
+    const mouseVelocityY = mouse.y - prevMouse.y;
+    prevMousePositionRef.current = { ...mouse };
+    const forceX = (target.x - spring.x) * stiffness;
+    const forceY = (target.y - spring.y) * stiffness;
+    spring.velocityX = (spring.velocityX + forceX) * damping;
+    spring.velocityY = (spring.velocityY + forceY) * damping;
+    spring.x += spring.velocityX;
+    spring.y += spring.velocityY;
+    const forceW = (target.width - spring.width) * stiffness;
+    const forceH = (target.height - spring.height) * stiffness;
+    spring.velocityW = (spring.velocityW + forceW) * damping;
+    spring.velocityH = (spring.velocityH + forceH) * damping;
+    spring.width += spring.velocityW;
+    spring.height += spring.velocityH;
+    const targetScaleX = 1 - Math.abs(mouseVelocityY) * SQUISH_CONFIG.velocityScale;
+    const targetScaleY = 1 - Math.abs(mouseVelocityX) * SQUISH_CONFIG.velocityScale;
+    const clampedTargetScaleX = Math.max(1 - SQUISH_CONFIG.maxSquish, Math.min(1, targetScaleX));
+    const clampedTargetScaleY = Math.max(1 - SQUISH_CONFIG.maxSquish, Math.min(1, targetScaleY));
+    spring.scaleX += (clampedTargetScaleX - spring.scaleX) * SQUISH_CONFIG.recovery;
+    spring.scaleY += (clampedTargetScaleY - spring.scaleY) * SQUISH_CONFIG.recovery;
+    const bounceSquishX = 1 - Math.abs(spring.velocityY) * 0.02;
+    const bounceSquishY = 1 - Math.abs(spring.velocityX) * 0.02;
+    const finalScaleX = Math.max(0.85, spring.scaleX * bounceSquishX);
+    const finalScaleY = Math.max(0.85, spring.scaleY * bounceSquishY);
+    cursor.style.transform = `translate3d(${spring.x}px, ${spring.y}px, 0)`;
+    cursor.style.width = `${spring.width}px`;
+    cursor.style.height = `${spring.height}px`;
+    cursorInner.style.transform = `scale(${finalScaleX}, ${finalScaleY})`;
+    const isHovering = hoveredElementIdRef.current !== null;
+    if (isHovering) {
+      cursorInner.style.borderRadius = elementBorderRadiusRef.current;
+    } else {
+      cursorInner.style.borderRadius = "9999px";
+    }
+    animationFrameRef.current = requestAnimationFrame(animate);
+  }, []);
+  useEffect(() => {
+    if (!isClient) return;
+    animationFrameRef.current = requestAnimationFrame(animate);
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [isClient, animate]);
+  useEffect(() => {
+    if (!isClient) return;
+    const handleMouseMove = (e) => {
+      mousePositionRef.current = { x: e.clientX, y: e.clientY };
+      updateTarget();
+    };
+    document.addEventListener("mousemove", handleMouseMove, { passive: true });
+    return () => document.removeEventListener("mousemove", handleMouseMove);
+  }, [isClient, updateTarget]);
+  const handleMouseEnter = useCallback(() => {
+    setIsMouseInside(true);
+    const mouse = mousePositionRef.current;
+    springRef.current.x = mouse.x - cursorSize / 2;
+    springRef.current.y = mouse.y - cursorSize / 2;
+    updateTarget();
+  }, [cursorSize, updateTarget]);
+  const handleMouseLeave = useCallback(() => {
+    setIsMouseInside(false);
+    hoveredElementIdRef.current = null;
+    hoveredElementRef.current = null;
+    setHoveredElementId(null);
+    updateTarget();
+  }, [updateTarget]);
+  const checkMouseInElement = useCallback(() => {
+    if (!hoveredElementRef.current || !hoveredElementIdRef.current) return;
+    const rect = hoveredElementRef.current.getBoundingClientRect();
+    const mouse = mousePositionRef.current;
+    elementDimensionsRef.current = {
+      width: rect.width,
+      height: rect.height,
+      x: rect.left,
+      y: rect.top,
+      right: rect.right,
+      bottom: rect.bottom
+    };
+    const isInside = mouse.x >= rect.left && mouse.x <= rect.right && mouse.y >= rect.top && mouse.y <= rect.bottom;
+    if (!isInside) {
+      hoveredElementIdRef.current = null;
+      hoveredElementRef.current = null;
+      setHoveredElementId(null);
+    }
+    updateTarget();
+  }, [updateTarget]);
+  useEffect(() => {
+    if (!isClient) return;
+    const handleScroll = () => checkMouseInElement();
+    document.addEventListener("scroll", handleScroll, { passive: true, capture: true });
+    return () => document.removeEventListener("scroll", handleScroll, { capture: true });
+  }, [checkMouseInElement, isClient]);
+  const registerHoveredElement = useCallback(
+    (id, dimensions, element) => {
+      hoveredElementIdRef.current = id;
+      elementDimensionsRef.current = {
+        width: dimensions.width,
+        height: dimensions.height,
+        x: dimensions.left,
+        y: dimensions.top,
+        right: dimensions.right,
+        bottom: dimensions.bottom
+      };
+      if (element) {
+        hoveredElementRef.current = element;
+        const computedStyle = window.getComputedStyle(element);
+        elementBorderRadiusRef.current = computedStyle.borderRadius || "8px";
+      }
+      setHoveredElementId(id);
+      updateTarget();
+    },
+    [updateTarget]
+  );
+  const unregisterHoveredElement = useCallback(() => {
+    hoveredElementIdRef.current = null;
+    hoveredElementRef.current = null;
+    elementBorderRadiusRef.current = "9999px";
+    setHoveredElementId(null);
+    updateTarget();
+  }, [updateTarget]);
+  const updateElementDimensions = useCallback(
+    (dimensions) => {
+      if (hoveredElementIdRef.current) {
+        elementDimensionsRef.current = {
+          width: dimensions.width,
+          height: dimensions.height,
+          x: dimensions.left,
+          y: dimensions.top,
+          right: dimensions.right,
+          bottom: dimensions.bottom
+        };
+        updateTarget();
+      }
+    },
+    [updateTarget]
+  );
+  const contextValue = useMemo(
+    () => ({
+      mousePosition: mousePositionRef.current,
+      hoveredElementId,
+      elementDimensions: elementDimensionsRef.current,
+      registerHoveredElement,
+      unregisterHoveredElement,
+      updateElementDimensions
+    }),
+    [hoveredElementId, registerHoveredElement, unregisterHoveredElement, updateElementDimensions]
+  );
+  const cursorElement = isClient && /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: cursorRef,
+      className: "pointer-events-none fixed z-50",
+      style: {
+        left: 0,
+        top: 0,
+        width: cursorSize,
+        height: cursorSize,
+        display: isMouseInside ? "block" : "none",
+        willChange: "transform, width, height"
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: cursorInnerRef,
+          className: cn("h-full w-full border border-white/50", cursorClassName),
+          style: {
+            backgroundColor: "rgba(156, 163, 175, 0.2)",
+            boxShadow: "0 0 25px rgba(255, 255, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5)",
+            borderRadius: "9999px",
+            transformOrigin: "center center"
+          }
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isClient && typeof document !== "undefined" && document.body && createPortal(cursorElement, document.body),
+    /* @__PURE__ */ jsx(CursorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      Component,
+      {
+        ...props,
+        className: cn(className),
+        style: {
+          cursor: isMouseInside && !hoveredElementId ? "none" : "auto",
+          ...props.style
+        },
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children
+      }
+    ) })
+  ] });
+};
+
+export { CursorProvider };

package/dist/{chunk-WQT7JQN4.cjs → chunk-PZZW3E5D.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkDG2EVWIW_cjs = require('./chunk-DG2EVWIW.cjs');
+var chunkUZTOUPJ7_cjs = require('./chunk-UZTOUPJ7.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -22,7 +22,7 @@ var IntInput = react.forwardRef(function IntInput2({ value = 0, onChange, ...pro
     [onChange]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkDG2EVWIW_cjs.InputNumbers,
+    chunkUZTOUPJ7_cjs.InputNumbers,
     {
       ref,
       value: [value],

package/dist/chunk-Q3UN25WC.mjs

@@ -0,0 +1,141 @@
+import { useVirtualList } from './chunk-DKWLF3KW.mjs';
+import { cn } from './chunk-HBEU2PU2.mjs';
+import { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+function VirtualListInner({
+  items,
+  itemHeight,
+  estimatedItemHeight = 40,
+  height = "100%",
+  overscan = 3,
+  getItemKey,
+  children,
+  onScroll,
+  onRangeChange,
+  className,
+  style,
+  ...props
+}, ref) {
+  const containerRef = useRef(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(0);
+  const setRefs = useCallback(
+    (node) => {
+      containerRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  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
+  });
+  const handleScroll = useCallback(
+    (e) => {
+      const newScrollTop = e.currentTarget.scrollTop;
+      setScrollTop(newScrollTop);
+      onScroll?.(newScrollTop);
+    },
+    [onScroll]
+  );
+  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]);
+  const visibleItems = [];
+  const isDynamic = itemHeight === "dynamic";
+  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);
+    visibleItems.push(
+      /* @__PURE__ */ jsx(
+        VirtualListItem,
+        {
+          index: i,
+          isDynamic,
+          measureItem,
+          style: itemStyle,
+          children: children(item, i, isDynamic ? dynamicChildStyle : itemStyle)
+        },
+        key
+      )
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setRefs,
+      className: cn("relative w-full overflow-auto", className),
+      style: {
+        height,
+        ...style
+      },
+      onScroll: handleScroll,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            height: totalHeight,
+            position: "relative",
+            width: "100%"
+          },
+          children: visibleItems
+        }
+      )
+    }
+  );
+}
+function VirtualListItem({
+  children,
+  index,
+  isDynamic,
+  measureItem,
+  style
+}) {
+  const itemRef = useRef(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 /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx("div", { ref: itemRef, style, children });
+}
+var VirtualList = forwardRef(VirtualListInner);
+
+export { VirtualList };