@sia.soul/sia-react-ui 0.1.63 → 0.1.65

package/dist/index.cjs

@@ -2543,147 +2543,537 @@ function toggleTreeCheck(nodes, keys, node, strictly = false) {
 }
 
 // src/components/FloatingDisplay.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var FLOATING_GAP = 9;
-var FLOATING_VIEWPORT_PADDING = 8;
-var FLOATING_ARROW_EDGE_OFFSET = 16;
-var activeTooltipClose;
-function clampFloating(value, min, max) {
-  return Math.min(Math.max(value, min), Math.max(min, max));
+
+// src/components/FloatingScrollbarProvider.tsx
+var import_react15 = require("react");
+
+// src/components/useScrollbarProximity.ts
+var import_react14 = require("react");
+var users = 0;
+var cleanup;
+function useScrollbarProximity() {
+  (0, import_react14.useEffect)(() => {
+    if (users++ === 0) {
+      let frame = 0;
+      let x = -Infinity;
+      let y = -Infinity;
+      const nearby = /* @__PURE__ */ new Set();
+      const clear = () => {
+        nearby.forEach((track) => track.removeAttribute("data-scrollbar-near"));
+        nearby.clear();
+      };
+      const update = () => {
+        frame = 0;
+        const next = /* @__PURE__ */ new Set();
+        document.querySelectorAll(".sia-scrollbar-track").forEach((track) => {
+          const rect = track.getBoundingClientRect();
+          const proximity = Number.parseFloat(getComputedStyle(track).getPropertyValue("--sia-scrollbar-proximity")) || 16;
+          if (rect.width && rect.height && x >= rect.left - proximity && x <= rect.right + proximity && y >= rect.top - proximity && y <= rect.bottom + proximity) {
+            next.add(track);
+            if (!nearby.has(track)) track.setAttribute("data-scrollbar-near", "true");
+          }
+        });
+        nearby.forEach((track) => {
+          if (!next.has(track)) track.removeAttribute("data-scrollbar-near");
+        });
+        nearby.clear();
+        next.forEach((track) => nearby.add(track));
+      };
+      const move = (event) => {
+        if (event.pointerType === "touch") return;
+        x = event.clientX;
+        y = event.clientY;
+        if (!frame) frame = requestAnimationFrame(update);
+      };
+      const leave = () => {
+        x = y = -Infinity;
+        clear();
+      };
+      document.addEventListener("pointermove", move, { passive: true });
+      document.documentElement.addEventListener("pointerleave", leave);
+      window.addEventListener("blur", leave);
+      cleanup = () => {
+        if (frame) cancelAnimationFrame(frame);
+        document.removeEventListener("pointermove", move);
+        document.documentElement.removeEventListener("pointerleave", leave);
+        window.removeEventListener("blur", leave);
+        clear();
+      };
+    }
+    return () => {
+      if (--users === 0) {
+        cleanup?.();
+        cleanup = void 0;
+      }
+    };
+  }, []);
 }
-function normalizeFloatingPlacement(placement) {
-  const aliases = {
-    topLeft: "top-start",
-    topRight: "top-end",
-    bottomLeft: "bottom-start",
-    bottomRight: "bottom-end",
-    leftTop: "left-start",
-    leftBottom: "left-end",
-    rightTop: "right-start",
-    rightBottom: "right-end"
-  };
-  return aliases[placement] ?? placement;
+
+// src/components/FloatingScrollbarProvider.tsx
+var scrollableOverflow = /* @__PURE__ */ new Set(["auto", "scroll", "overlay"]);
+var clippingOverflow = /* @__PURE__ */ new Set(["auto", "scroll", "overlay", "hidden", "clip"]);
+function isRootScroller(target) {
+  return target === document.scrollingElement || target === document.documentElement;
 }
-function resolveFloatingPosition(trigger, overlay, placement, pointAtCenter, adjust) {
-  const viewportWidth = document.documentElement.clientWidth;
-  const viewportHeight = document.documentElement.clientHeight;
-  let resolvedPlacement = normalizeFloatingPlacement(placement);
-  const side = resolvedPlacement.split("-")[0];
-  const available = { top: trigger.top, bottom: viewportHeight - trigger.bottom, left: trigger.left, right: viewportWidth - trigger.right };
-  const opposite = { top: "bottom", bottom: "top", left: "right", right: "left" };
-  const preferred = side;
-  const other = opposite[preferred];
-  const needed = (side === "top" || side === "bottom" ? overlay.height : overlay.width) + FLOATING_GAP + FLOATING_VIEWPORT_PADDING;
-  if (adjust && available[preferred] < needed && available[other] > available[preferred]) {
-    resolvedPlacement = resolvedPlacement.replace(preferred, other);
-  }
-  const vertical = resolvedPlacement.startsWith("top") || resolvedPlacement.startsWith("bottom");
-  const start = resolvedPlacement.endsWith("-start");
-  const end = resolvedPlacement.endsWith("-end");
-  let top = vertical ? resolvedPlacement.startsWith("top") ? trigger.top - overlay.height - FLOATING_GAP : trigger.bottom + FLOATING_GAP : start ? trigger.top : end ? trigger.bottom - overlay.height : trigger.top + (trigger.height - overlay.height) / 2;
-  let left = vertical ? start ? trigger.left : end ? trigger.right - overlay.width : trigger.left + (trigger.width - overlay.width) / 2 : resolvedPlacement.startsWith("left") ? trigger.left - overlay.width - FLOATING_GAP : trigger.right + FLOATING_GAP;
-  if (adjust) {
-    if (vertical) left = clampFloating(left, FLOATING_VIEWPORT_PADDING, viewportWidth - overlay.width - FLOATING_VIEWPORT_PADDING);
-    else top = clampFloating(top, FLOATING_VIEWPORT_PADDING, viewportHeight - overlay.height - FLOATING_VIEWPORT_PADDING);
+function canScroll(target, axis) {
+  if (target.matches(".sia-table__viewport, [data-sia-native-scrollbar]")) return false;
+  if (isRootScroller(target)) {
+    return axis === "horizontal" ? target.scrollWidth > target.clientWidth + 1 : target.scrollHeight > target.clientHeight + 1;
   }
-  const result = { top, left, placement: resolvedPlacement };
-  const size = vertical ? trigger.width : trigger.height;
-  const anchorStart = vertical ? trigger.left : trigger.top;
-  const edge = Math.min(size / 2, FLOATING_ARROW_EDGE_OFFSET + 4);
-  const target = anchorStart + (pointAtCenter || !start && !end ? size / 2 : start ? edge : size - edge);
-  if (vertical) result.arrowX = clampFloating(target - left - 4, 8, overlay.width - 16);
-  else result.arrowY = clampFloating(target - top - 4, 8, overlay.height - 16);
-  return result;
+  const style = getComputedStyle(target);
+  const overflow = axis === "horizontal" ? style.overflowX : style.overflowY;
+  const hasOverflow = axis === "horizontal" ? target.scrollWidth > target.clientWidth + 1 : target.scrollHeight > target.clientHeight + 1;
+  return hasOverflow && scrollableOverflow.has(overflow);
 }
-function isFloatingAnchorHidden(anchor, rect) {
-  let left = 0, top = 0, right = document.documentElement.clientWidth, bottom = document.documentElement.clientHeight;
-  for (let parent = anchor.parentElement; parent; parent = parent.parentElement) {
-    const css = getComputedStyle(parent);
-    const bounds = parent.getBoundingClientRect();
-    if (/(auto|scroll|hidden|clip)/.test(css.overflowX)) {
-      left = Math.max(left, bounds.left);
-      right = Math.min(right, bounds.right);
-    }
-    if (/(auto|scroll|hidden|clip)/.test(css.overflowY)) {
-      top = Math.max(top, bounds.top);
-      bottom = Math.min(bottom, bounds.bottom);
-    }
+function visibleRect(target) {
+  if (isRootScroller(target)) {
+    return { top: 0, right: window.innerWidth, bottom: window.innerHeight, left: 0, width: window.innerWidth, height: window.innerHeight };
   }
-  return rect.right <= left || rect.left >= right || rect.bottom <= top || rect.top >= bottom;
-}
-function Floating({
-  children,
-  content,
-  placement = "top",
-  trigger = "hover",
-  open,
-  defaultOpen = false,
-  mouseEnterDelay = 0.1,
-  mouseLeaveDelay = 0.1,
-  arrow = true,
-  autoAdjustOverflow = true,
-  color,
-  className = "",
-  overlayClassName = "",
-  role = "tooltip",
-  onOpenChange
-}) {
-  const rootRef = (0, import_react14.useRef)(null);
-  const triggerElementRef = (0, import_react14.useRef)(null);
-  const overlayRef = (0, import_react14.useRef)(null);
-  const enterTimer = (0, import_react14.useRef)();
-  const leaveTimer = (0, import_react14.useRef)();
-  const contentId = (0, import_react14.useId)();
-  const triggers = Array.isArray(trigger) ? trigger : [trigger];
-  const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
-  const [position, setPosition] = (0, import_react14.useState)();
-  const [portalContainer, setPortalContainer] = (0, import_react14.useState)(null);
-  (0, import_react14.useLayoutEffect)(() => {
-    if (!visible) return;
-    setPortalContainer(rootRef.current?.closest(".sia-modal-root, .sia-drawer-root") ?? document.body);
-  });
-  const setVisibleRef = (0, import_react14.useRef)(setVisible);
-  setVisibleRef.current = setVisible;
-  const closeSelfRef = (0, import_react14.useRef)();
-  if (!closeSelfRef.current) closeSelfRef.current = () => setVisibleRef.current(false);
-  const exclusiveTooltip = role === "tooltip" && triggers.includes("hover");
-  function openNow() {
-    if (exclusiveTooltip && activeTooltipClose !== closeSelfRef.current) {
-      activeTooltipClose?.();
-      activeTooltipClose = closeSelfRef.current;
+  const ownRect = target.getBoundingClientRect();
+  let top = Math.max(0, ownRect.top);
+  let right = Math.min(window.innerWidth, ownRect.right);
+  let bottom = Math.min(window.innerHeight, ownRect.bottom);
+  let left = Math.max(0, ownRect.left);
+  let parent = target.parentElement;
+  while (parent && parent !== document.body && parent !== document.documentElement) {
+    const style = getComputedStyle(parent);
+    const clipX = clippingOverflow.has(style.overflowX);
+    const clipY = clippingOverflow.has(style.overflowY);
+    if (clipX || clipY) {
+      const rect = parent.getBoundingClientRect();
+      if (clipX) {
+        left = Math.max(left, rect.left);
+        right = Math.min(right, rect.right);
+      }
+      if (clipY) {
+        top = Math.max(top, rect.top);
+        bottom = Math.min(bottom, rect.bottom);
+      }
     }
-    setVisible(true);
-  }
-  function closeNow() {
-    if (activeTooltipClose === closeSelfRef.current) activeTooltipClose = void 0;
-    setVisible(false);
-  }
-  function clearTimers() {
-    window.clearTimeout(enterTimer.current);
-    window.clearTimeout(leaveTimer.current);
-  }
-  function show(delay = 0) {
-    clearTimers();
-    if (delay <= 0) openNow();
-    else enterTimer.current = window.setTimeout(openNow, delay * 1e3);
-  }
-  function hide(delay = 0) {
-    clearTimers();
-    if (delay <= 0) closeNow();
-    else leaveTimer.current = window.setTimeout(closeNow, delay * 1e3);
+    parent = parent.parentElement;
   }
-  (0, import_react14.useEffect)(() => {
-    if (!visible || !triggers.includes("click")) return;
-    const close = (event) => {
-      const target = event.target;
-      if (!rootRef.current?.contains(target) && !overlayRef.current?.contains(target)) closeNow();
+  return {
+    top,
+    right,
+    bottom,
+    left,
+    width: Math.max(0, right - left),
+    height: Math.max(0, bottom - top)
+  };
+}
+function createTrack(axis) {
+  const track = document.createElement("div");
+  const thumb = document.createElement("div");
+  track.className = `sia-scrollbar-track sia-floating-scrollbar sia-floating-scrollbar--${axis}`;
+  thumb.className = "sia-floating-scrollbar__thumb";
+  track.dataset.axis = axis;
+  track.setAttribute("aria-hidden", "true");
+  track.append(thumb);
+  return { track, thumb };
+}
+function FloatingScrollbarProvider({ disabled = false, targetRef }) {
+  useScrollbarProximity();
+  (0, import_react15.useEffect)(() => {
+    if (disabled) return;
+    const layer = document.createElement("div");
+    layer.className = "sia-floating-scrollbar-layer";
+    layer.setAttribute("aria-hidden", "true");
+    document.body.append(layer);
+    const entries = /* @__PURE__ */ new Map();
+    let scanFrame = 0;
+    let updateFrame = 0;
+    const setEntryVisible = (entry, visible) => {
+      entry.horizontalTrack.classList.toggle("sia-floating-scrollbar--visible", visible);
+      entry.verticalTrack.classList.toggle("sia-floating-scrollbar--visible", visible);
     };
-    document.addEventListener("pointerdown", close);
-    return () => document.removeEventListener("pointerdown", close);
-  }, [triggers.join("|"), visible]);
-  (0, import_react14.useLayoutEffect)(() => {
+    const showEntry = (entry) => {
+      if (entry.hideTimer !== null) window.clearTimeout(entry.hideTimer);
+      entry.hideTimer = null;
+      setEntryVisible(entry, true);
+    };
+    const scheduleHide = (entry, delay = 500) => {
+      if (entry.hideTimer !== null) window.clearTimeout(entry.hideTimer);
+      entry.hideTimer = window.setTimeout(() => {
+        entry.hideTimer = null;
+        if (!entry.hoveringTarget && !entry.hoveringTrack && !entry.dragging) setEntryVisible(entry, false);
+      }, delay);
+    };
+    const updateEntry = (entry) => {
+      const { target, horizontalTrack, horizontalThumb, verticalTrack, verticalThumb } = entry;
+      const hasHorizontal = canScroll(target, "horizontal");
+      const hasVertical = canScroll(target, "vertical");
+      const rect = visibleRect(target);
+      const thickness = 10;
+      horizontalTrack.hidden = !hasHorizontal || rect.width <= thickness || rect.height <= 0;
+      verticalTrack.hidden = !hasVertical || rect.height <= thickness || rect.width <= 0;
+      if (!horizontalTrack.hidden) {
+        const trackWidth = Math.max(0, rect.width - (hasVertical ? thickness : 0));
+        const thumbWidth = Math.max(24, Math.min(trackWidth, trackWidth * target.clientWidth / target.scrollWidth));
+        const travel = Math.max(0, trackWidth - thumbWidth);
+        const maxScroll = Math.max(1, target.scrollWidth - target.clientWidth);
+        horizontalTrack.style.left = `${rect.left}px`;
+        horizontalTrack.style.top = `${rect.bottom - thickness}px`;
+        horizontalTrack.style.width = `${trackWidth}px`;
+        horizontalTrack.style.height = `${thickness}px`;
+        horizontalThumb.style.width = `${thumbWidth}px`;
+        horizontalThumb.style.transform = `translate3d(${travel * target.scrollLeft / maxScroll}px, 0, 0)`;
+      }
+      if (!verticalTrack.hidden) {
+        const trackHeight = Math.max(0, rect.height - (hasHorizontal ? thickness : 0));
+        const thumbHeight = Math.max(24, Math.min(trackHeight, trackHeight * target.clientHeight / target.scrollHeight));
+        const travel = Math.max(0, trackHeight - thumbHeight);
+        const maxScroll = Math.max(1, target.scrollHeight - target.clientHeight);
+        verticalTrack.style.left = `${rect.right - thickness}px`;
+        verticalTrack.style.top = `${rect.top}px`;
+        verticalTrack.style.width = `${thickness}px`;
+        verticalTrack.style.height = `${trackHeight}px`;
+        verticalThumb.style.height = `${thumbHeight}px`;
+        verticalThumb.style.transform = `translate3d(0, ${travel * target.scrollTop / maxScroll}px, 0)`;
+      }
+    };
+    const scheduleUpdateAll = () => {
+      if (updateFrame) return;
+      updateFrame = window.requestAnimationFrame(() => {
+        updateFrame = 0;
+        entries.forEach(updateEntry);
+      });
+    };
+    const bindTrackDrag = (entry, axis, track, thumb) => {
+      const target = entry.target;
+      const onTrackPointerEnter = () => {
+        entry.hoveringTrack = true;
+        showEntry(entry);
+      };
+      const onTrackPointerLeave = () => {
+        entry.hoveringTrack = false;
+        scheduleHide(entry);
+      };
+      const onTrackPointerDown = (event) => {
+        if (event.target === thumb || event.button !== 0) return;
+        event.preventDefault();
+        event.stopPropagation();
+        const trackRect = track.getBoundingClientRect();
+        const thumbRect = thumb.getBoundingClientRect();
+        const trackLength = axis === "vertical" ? trackRect.height : trackRect.width;
+        const thumbLength = axis === "vertical" ? thumbRect.height : thumbRect.width;
+        const pointer = axis === "vertical" ? event.clientY - trackRect.top : event.clientX - trackRect.left;
+        const ratio = Math.max(0, Math.min(1, (pointer - thumbLength / 2) / Math.max(1, trackLength - thumbLength)));
+        if (axis === "vertical") target.scrollTop = ratio * (target.scrollHeight - target.clientHeight);
+        else target.scrollLeft = ratio * (target.scrollWidth - target.clientWidth);
+      };
+      const onThumbPointerDown = (event) => {
+        if (event.button !== 0) return;
+        event.preventDefault();
+        event.stopPropagation();
+        entry.dragging = true;
+        showEntry(entry);
+        thumb.setPointerCapture(event.pointerId);
+        const startPointer = axis === "vertical" ? event.clientY : event.clientX;
+        const startScroll = axis === "vertical" ? target.scrollTop : target.scrollLeft;
+        const trackRect = track.getBoundingClientRect();
+        const thumbRect = thumb.getBoundingClientRect();
+        const trackLength = axis === "vertical" ? trackRect.height : trackRect.width;
+        const thumbLength = axis === "vertical" ? thumbRect.height : thumbRect.width;
+        const maxScroll = axis === "vertical" ? target.scrollHeight - target.clientHeight : target.scrollWidth - target.clientWidth;
+        const travel = Math.max(1, trackLength - thumbLength);
+        const onPointerMove = (moveEvent) => {
+          if (moveEvent.pointerId !== event.pointerId) return;
+          const pointer = axis === "vertical" ? moveEvent.clientY : moveEvent.clientX;
+          const nextScroll = startScroll + (pointer - startPointer) * maxScroll / travel;
+          if (axis === "vertical") target.scrollTop = nextScroll;
+          else target.scrollLeft = nextScroll;
+        };
+        const onPointerUp = (upEvent) => {
+          if (upEvent.pointerId !== event.pointerId) return;
+          entry.dragging = false;
+          thumb.releasePointerCapture(event.pointerId);
+          window.removeEventListener("pointermove", onPointerMove);
+          window.removeEventListener("pointerup", onPointerUp);
+          window.removeEventListener("pointercancel", onPointerUp);
+          scheduleHide(entry);
+        };
+        window.addEventListener("pointermove", onPointerMove);
+        window.addEventListener("pointerup", onPointerUp);
+        window.addEventListener("pointercancel", onPointerUp);
+      };
+      track.addEventListener("pointerenter", onTrackPointerEnter);
+      track.addEventListener("pointerleave", onTrackPointerLeave);
+      track.addEventListener("pointerdown", onTrackPointerDown);
+      thumb.addEventListener("pointerdown", onThumbPointerDown);
+      return () => {
+        track.removeEventListener("pointerenter", onTrackPointerEnter);
+        track.removeEventListener("pointerleave", onTrackPointerLeave);
+        track.removeEventListener("pointerdown", onTrackPointerDown);
+        thumb.removeEventListener("pointerdown", onThumbPointerDown);
+      };
+    };
+    const resizeObserver = new ResizeObserver((observedEntries) => {
+      observedEntries.forEach(({ target }) => {
+        const entry = entries.get(target);
+        if (entry) updateEntry(entry);
+      });
+    });
+    const addTarget = (target) => {
+      if (entries.has(target)) return;
+      const horizontal = createTrack("horizontal");
+      const vertical = createTrack("vertical");
+      layer.append(horizontal.track, vertical.track);
+      const onPointerEnter = () => {
+        const entry2 = entries.get(target);
+        if (!entry2) return;
+        entry2.hoveringTarget = true;
+        showEntry(entry2);
+      };
+      const onPointerLeave = () => {
+        const entry2 = entries.get(target);
+        if (!entry2) return;
+        entry2.hoveringTarget = false;
+        scheduleHide(entry2);
+      };
+      const onScroll = () => {
+        const entry2 = entries.get(target);
+        if (!entry2) return;
+        updateEntry(entry2);
+        showEntry(entry2);
+        scheduleHide(entry2, 700);
+      };
+      target.addEventListener("pointerenter", onPointerEnter);
+      target.addEventListener("pointerleave", onPointerLeave);
+      target.addEventListener("scroll", onScroll, { passive: true });
+      const entry = {
+        target,
+        horizontalTrack: horizontal.track,
+        horizontalThumb: horizontal.thumb,
+        verticalTrack: vertical.track,
+        verticalThumb: vertical.thumb,
+        hideTimer: null,
+        hoveringTarget: target.matches(":hover"),
+        hoveringTrack: false,
+        dragging: false,
+        cleanup: () => void 0
+      };
+      const cleanupHorizontal = bindTrackDrag(entry, "horizontal", horizontal.track, horizontal.thumb);
+      const cleanupVertical = bindTrackDrag(entry, "vertical", vertical.track, vertical.thumb);
+      entry.cleanup = () => {
+        if (entry.hideTimer !== null) window.clearTimeout(entry.hideTimer);
+        cleanupHorizontal();
+        cleanupVertical();
+        target.removeEventListener("pointerenter", onPointerEnter);
+        target.removeEventListener("pointerleave", onPointerLeave);
+        target.removeEventListener("scroll", onScroll);
+        resizeObserver.unobserve(target);
+        target.removeAttribute("data-sia-floating-scrollbar");
+        horizontal.track.remove();
+        vertical.track.remove();
+      };
+      entries.set(target, entry);
+      target.setAttribute("data-sia-floating-scrollbar", "");
+      resizeObserver.observe(target);
+      updateEntry(entry);
+      if (entry.hoveringTarget) showEntry(entry);
+    };
+    const removeTarget = (target) => {
+      const entry = entries.get(target);
+      if (!entry) return;
+      entry.cleanup();
+      entries.delete(target);
+    };
+    const scanTargets = () => {
+      scanFrame = 0;
+      const managedSelector = ".sia-table__viewport, [data-sia-native-scrollbar], .sia-scrollbar-track, .sia-floating-scrollbar-layer";
+      const discovered = [];
+      if (!targetRef) {
+        const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, {
+          acceptNode: (node) => node.matches(managedSelector) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT
+        });
+        for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+          if (node instanceof HTMLElement) discovered.push(node);
+        }
+      }
+      const candidates = (targetRef ? [targetRef.current] : [document.scrollingElement, ...discovered]).filter((target) => target instanceof HTMLElement);
+      const nextTargets = /* @__PURE__ */ new Set();
+      candidates.forEach((target) => {
+        if (canScroll(target, "horizontal") || canScroll(target, "vertical")) {
+          nextTargets.add(target);
+          if (entries.has(target) || !target.hasAttribute("data-sia-floating-scrollbar")) addTarget(target);
+        }
+      });
+      entries.forEach((_entry, target) => {
+        if (!target.isConnected || !nextTargets.has(target)) removeTarget(target);
+        else updateEntry(_entry);
+      });
+    };
+    const scheduleScan = () => {
+      if (scanFrame) return;
+      scanFrame = window.requestAnimationFrame(scanTargets);
+    };
+    const mutationObserver = new MutationObserver((mutations) => {
+      if (mutations.some((mutation) => {
+        const target = mutation.target instanceof Element ? mutation.target : mutation.target.parentElement;
+        return target && !layer.contains(target) && !target.closest(".sia-table__viewport, [data-sia-native-scrollbar], .sia-scrollbar-track");
+      })) scheduleScan();
+    });
+    mutationObserver.observe(document.documentElement, { subtree: true, childList: true, attributes: true, attributeFilter: ["class", "style", "hidden"] });
+    window.addEventListener("resize", scheduleScan);
+    window.addEventListener("scroll", scheduleUpdateAll, true);
+    scheduleScan();
+    return () => {
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", scheduleScan);
+      window.removeEventListener("scroll", scheduleUpdateAll, true);
+      if (scanFrame) window.cancelAnimationFrame(scanFrame);
+      if (updateFrame) window.cancelAnimationFrame(updateFrame);
+      entries.forEach((entry) => entry.cleanup());
+      entries.clear();
+      layer.remove();
+    };
+  }, [disabled, targetRef]);
+  return null;
+}
+
+// src/components/FloatingDisplay.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var FLOATING_GAP = 9;
+var FLOATING_VIEWPORT_PADDING = 8;
+var FLOATING_ARROW_EDGE_OFFSET = 16;
+var activeTooltipClose;
+function clampFloating(value, min, max) {
+  return Math.min(Math.max(value, min), Math.max(min, max));
+}
+function normalizeFloatingPlacement(placement) {
+  const aliases = {
+    topLeft: "top-start",
+    topRight: "top-end",
+    bottomLeft: "bottom-start",
+    bottomRight: "bottom-end",
+    leftTop: "left-start",
+    leftBottom: "left-end",
+    rightTop: "right-start",
+    rightBottom: "right-end"
+  };
+  return aliases[placement] ?? placement;
+}
+function resolveFloatingPosition(trigger, overlay, placement, pointAtCenter, adjust) {
+  const viewportWidth = document.documentElement.clientWidth;
+  const viewportHeight = document.documentElement.clientHeight;
+  let resolvedPlacement = normalizeFloatingPlacement(placement);
+  const side = resolvedPlacement.split("-")[0];
+  const available = { top: trigger.top, bottom: viewportHeight - trigger.bottom, left: trigger.left, right: viewportWidth - trigger.right };
+  const opposite = { top: "bottom", bottom: "top", left: "right", right: "left" };
+  const preferred = side;
+  const other = opposite[preferred];
+  const needed = (side === "top" || side === "bottom" ? overlay.height : overlay.width) + FLOATING_GAP + FLOATING_VIEWPORT_PADDING;
+  if (adjust && available[preferred] < needed && available[other] > available[preferred]) {
+    resolvedPlacement = resolvedPlacement.replace(preferred, other);
+  }
+  const vertical = resolvedPlacement.startsWith("top") || resolvedPlacement.startsWith("bottom");
+  const start = resolvedPlacement.endsWith("-start");
+  const end = resolvedPlacement.endsWith("-end");
+  let top = vertical ? resolvedPlacement.startsWith("top") ? trigger.top - overlay.height - FLOATING_GAP : trigger.bottom + FLOATING_GAP : start ? trigger.top : end ? trigger.bottom - overlay.height : trigger.top + (trigger.height - overlay.height) / 2;
+  let left = vertical ? start ? trigger.left : end ? trigger.right - overlay.width : trigger.left + (trigger.width - overlay.width) / 2 : resolvedPlacement.startsWith("left") ? trigger.left - overlay.width - FLOATING_GAP : trigger.right + FLOATING_GAP;
+  if (adjust) {
+    if (vertical) left = clampFloating(left, FLOATING_VIEWPORT_PADDING, viewportWidth - overlay.width - FLOATING_VIEWPORT_PADDING);
+    else top = clampFloating(top, FLOATING_VIEWPORT_PADDING, viewportHeight - overlay.height - FLOATING_VIEWPORT_PADDING);
+  }
+  const result = { top, left, placement: resolvedPlacement };
+  const size = vertical ? trigger.width : trigger.height;
+  const anchorStart = vertical ? trigger.left : trigger.top;
+  const edge = Math.min(size / 2, FLOATING_ARROW_EDGE_OFFSET + 4);
+  const target = anchorStart + (pointAtCenter || !start && !end ? size / 2 : start ? edge : size - edge);
+  if (vertical) result.arrowX = clampFloating(target - left - 4, 8, overlay.width - 16);
+  else result.arrowY = clampFloating(target - top - 4, 8, overlay.height - 16);
+  return result;
+}
+function isFloatingAnchorHidden(anchor, rect) {
+  let left = 0, top = 0, right = document.documentElement.clientWidth, bottom = document.documentElement.clientHeight;
+  for (let parent = anchor.parentElement; parent; parent = parent.parentElement) {
+    const css = getComputedStyle(parent);
+    const bounds = parent.getBoundingClientRect();
+    if (/(auto|scroll|hidden|clip)/.test(css.overflowX)) {
+      left = Math.max(left, bounds.left);
+      right = Math.min(right, bounds.right);
+    }
+    if (/(auto|scroll|hidden|clip)/.test(css.overflowY)) {
+      top = Math.max(top, bounds.top);
+      bottom = Math.min(bottom, bounds.bottom);
+    }
+  }
+  return rect.right <= left || rect.left >= right || rect.bottom <= top || rect.top >= bottom;
+}
+function Floating({
+  children,
+  content,
+  placement = "top",
+  trigger = "hover",
+  open,
+  defaultOpen = false,
+  mouseEnterDelay = 0.1,
+  mouseLeaveDelay = 0.1,
+  arrow = true,
+  autoAdjustOverflow = true,
+  color,
+  className = "",
+  overlayClassName = "",
+  role = "tooltip",
+  onOpenChange
+}) {
+  const rootRef = (0, import_react16.useRef)(null);
+  const triggerElementRef = (0, import_react16.useRef)(null);
+  const overlayRef = (0, import_react16.useRef)(null);
+  const enterTimer = (0, import_react16.useRef)();
+  const leaveTimer = (0, import_react16.useRef)();
+  const contentId = (0, import_react16.useId)();
+  const triggers = Array.isArray(trigger) ? trigger : [trigger];
+  const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
+  const [position, setPosition] = (0, import_react16.useState)();
+  const [portalContainer, setPortalContainer] = (0, import_react16.useState)(null);
+  (0, import_react16.useLayoutEffect)(() => {
+    if (!visible) return;
+    setPortalContainer(rootRef.current?.closest(".sia-modal-root, .sia-drawer-root") ?? document.body);
+  });
+  const setVisibleRef = (0, import_react16.useRef)(setVisible);
+  setVisibleRef.current = setVisible;
+  const closeSelfRef = (0, import_react16.useRef)();
+  if (!closeSelfRef.current) closeSelfRef.current = () => setVisibleRef.current(false);
+  const exclusiveTooltip = role === "tooltip" && triggers.includes("hover");
+  function openNow() {
+    if (exclusiveTooltip && activeTooltipClose !== closeSelfRef.current) {
+      activeTooltipClose?.();
+      activeTooltipClose = closeSelfRef.current;
+    }
+    setVisible(true);
+  }
+  function closeNow() {
+    if (activeTooltipClose === closeSelfRef.current) activeTooltipClose = void 0;
+    setVisible(false);
+  }
+  function clearTimers() {
+    window.clearTimeout(enterTimer.current);
+    window.clearTimeout(leaveTimer.current);
+  }
+  function show(delay = 0) {
+    clearTimers();
+    if (delay <= 0) openNow();
+    else enterTimer.current = window.setTimeout(openNow, delay * 1e3);
+  }
+  function hide(delay = 0) {
+    clearTimers();
+    if (delay <= 0) closeNow();
+    else leaveTimer.current = window.setTimeout(closeNow, delay * 1e3);
+  }
+  (0, import_react16.useEffect)(() => {
+    if (!visible || !triggers.includes("click")) return;
+    const close = (event) => {
+      const target = event.target;
+      if (!rootRef.current?.contains(target) && !overlayRef.current?.contains(target)) closeNow();
+    };
+    document.addEventListener("pointerdown", close);
+    return () => document.removeEventListener("pointerdown", close);
+  }, [triggers.join("|"), visible]);
+  (0, import_react16.useLayoutEffect)(() => {
     if (!visible) {
       setPosition(void 0);
       return;
@@ -2721,11 +3111,11 @@ function Floating({
       observer.disconnect();
     };
   }, [children, content, placement, visible, portalContainer, autoAdjustOverflow, typeof arrow === "object" && arrow.pointAtCenter]);
-  (0, import_react14.useEffect)(() => () => {
+  (0, import_react16.useEffect)(() => () => {
     clearTimers();
     if (activeTooltipClose === closeSelfRef.current) activeTooltipClose = void 0;
   }, []);
-  const child = (0, import_react14.cloneElement)(children, {
+  const child = (0, import_react16.cloneElement)(children, {
     ...triggers.includes("hover") ? { onMouseEnter: (event) => {
       triggerElementRef.current = event.currentTarget;
       children.props.onMouseEnter?.(event);
@@ -2783,652 +3173,366 @@ function Floating({
   ] });
 }
 function Tooltip(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Floating, { ...props, content: props.title });
-}
-function Popover({ title, content, trigger = "click", overlayClassName = "", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Floating, { ...props, trigger, role: "dialog", overlayClassName: `sia-popover ${overlayClassName}`.trim(), content: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    title ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { className: "sia-popover__title", children: title }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-popover__content", children: content })
-  ] }) });
-}
-function Timeline({ items = [], mode = "left", pending = false, pendingDot, reverse = false, className = "", ...props }) {
-  const values = [...items, ...pending ? [{ children: pending === true ? "\u52A0\u8F7D\u4E2D..." : pending, dot: pendingDot ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "loader", className: "sia-spin-icon" }) }] : []];
-  if (reverse) values.reverse();
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: `sia-timeline sia-timeline--${mode} ${className}`.trim(), ...withTitleTooltip(props), children: values.map((item, index) => {
-    const position = item.position ?? (mode === "alternate" ? index % 2 ? "right" : "left" : mode);
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("li", { className: `sia-timeline__item sia-timeline__item--${position}`, children: [
-      item.label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-timeline__label", children: item.label }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-timeline__rail", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-timeline__dot", style: { color: item.color && !["blue", "red", "green", "gray"].includes(item.color) ? item.color : void 0 }, "data-color": item.color ?? "blue", children: item.dot }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-timeline__content", children: item.children })
-    ] }, index);
-  }) });
-}
-function collectKeys(nodes, branchOnly = false, result = []) {
-  nodes.forEach((node) => {
-    if (!branchOnly || node.children?.length) result.push(node.key);
-    if (node.children) collectKeys(node.children, branchOnly, result);
-  });
-  return result;
-}
-function Tree({
-  treeData,
-  selectedKeys,
-  defaultSelectedKeys = [],
-  expandedKeys,
-  defaultExpandedKeys = [],
-  defaultExpandAll = false,
-  checkedKeys,
-  defaultCheckedKeys = [],
-  loadingKeys = [],
-  checkable = false,
-  checkStrictly = false,
-  multiple = false,
-  selectable = true,
-  showLine = false,
-  showIcon = false,
-  blockNode = false,
-  indentSize = 20,
-  switcherWidth = 24,
-  stickyAncestors = false,
-  stickyRowHeight = 34,
-  draggable = false,
-  loadData,
-  onSelect,
-  onCheck,
-  onExpand,
-  onDrop,
-  className = "",
-  ...props
-}) {
-  const [selected, setSelected] = useControllableState({ value: selectedKeys, defaultValue: defaultSelectedKeys });
-  const [expanded, setExpanded] = useControllableState({ value: expandedKeys, defaultValue: defaultExpandAll ? collectKeys(treeData, true) : defaultExpandedKeys });
-  const [checked, setChecked] = useControllableState({ value: checkedKeys, defaultValue: defaultCheckedKeys });
-  const [loading, setLoading] = (0, import_react14.useState)(/* @__PURE__ */ new Set());
-  const controlledLoading = (0, import_react14.useMemo)(() => new Set(loadingKeys), [loadingKeys]);
-  const selectedKeySet = (0, import_react14.useMemo)(() => new Set(selected), [selected]);
-  const selectedAncestorKeys = (0, import_react14.useMemo)(() => {
-    const ancestors = /* @__PURE__ */ new Set();
-    const visit = (nodes, parentKeys) => {
-      nodes.forEach((node) => {
-        if (selectedKeySet.has(node.key)) parentKeys.forEach((key) => ancestors.add(key));
-        if (node.children?.length) visit(node.children, [...parentKeys, node.key]);
-      });
-    };
-    visit(treeData, []);
-    return ancestors;
-  }, [selectedKeySet, treeData]);
-  const dragNodeRef = (0, import_react14.useRef)();
-  const pointerDragRef = (0, import_react14.useRef)();
-  const suppressClickRef = (0, import_react14.useRef)(false);
-  const [dragOver, setDragOver] = (0, import_react14.useState)();
-  const normalizedSwitcherWidth = Math.max(0, switcherWidth);
-  async function toggleExpand(node) {
-    const nextExpanded = !expanded.includes(node.key);
-    if (nextExpanded && node.loaded !== true && !node.children?.length && node.isLeaf === false && loadData) {
-      setLoading((keys) => new Set(keys).add(node.key));
-      try {
-        await loadData(node);
-      } finally {
-        setLoading((keys) => {
-          const next2 = new Set(keys);
-          next2.delete(node.key);
-          return next2;
-        });
-      }
-    }
-    const next = nextExpanded ? [...expanded, node.key] : expanded.filter((key) => key !== node.key);
-    setExpanded(next);
-    onExpand?.([...next], { expanded: nextExpanded, node });
-  }
-  const checkState = (0, import_react14.useMemo)(() => getTreeCheckState(treeData, checked, checkStrictly), [treeData, checked, checkStrictly]);
-  function check(node) {
-    const next = toggleTreeCheck(treeData, checked, node, checkStrictly);
-    setChecked([...next.checked]);
-    onCheck?.([...next.checked], { checked: next.checkedValue, halfCheckedKeys: [...next.halfChecked], node });
-  }
-  function select(node, event) {
-    if (!selectable || node.selectable === false || node.disabled) return;
-    const exists = selected.includes(node.key);
-    const next = multiple ? exists ? selected.filter((key) => key !== node.key) : [...selected, node.key] : exists ? [] : [node.key];
-    setSelected(next);
-    onSelect?.([...next], { selected: !exists, node, nativeEvent: event });
-  }
-  function selectForContextMenu(node, event) {
-    if (!selectable || node.selectable === false || node.disabled || selected.includes(node.key)) return;
-    const next = [node.key];
-    setSelected(next);
-    onSelect?.(next, { selected: true, node, nativeEvent: event });
-  }
-  function findNode2(key, nodes = treeData) {
-    for (const node of nodes) {
-      if (String(node.key) === key) return node;
-      const child = node.children?.length ? findNode2(key, node.children) : void 0;
-      if (child) return child;
-    }
-    return void 0;
-  }
-  function getPointerDropTarget(clientX, clientY, dragNode) {
-    const targetElement = document.elementFromPoint(clientX, clientY)?.closest("[data-sia-tree-drop-key]");
-    if (!targetElement) return void 0;
-    const targetNode = targetElement?.dataset.siaTreeDropKey ? findNode2(targetElement.dataset.siaTreeDropKey) : void 0;
-    if (!targetNode || targetNode.key === dragNode.key || targetNode.disabled || targetNode.droppable === false) return void 0;
-    const bounds = targetElement.getBoundingClientRect();
-    const relativeY = bounds.height > 0 ? (clientY - bounds.top) / bounds.height : 0.5;
-    const dropPosition = relativeY < 0.25 ? "before" : relativeY > 0.75 ? "after" : "inside";
-    return { node: targetNode, dropPosition };
-  }
-  function beginPointerDrag(node, event) {
-    if (event.button !== 0) return;
-    pointerDragRef.current = {
-      node,
-      pointerId: event.pointerId,
-      startX: event.clientX,
-      startY: event.clientY,
-      active: false
-    };
-    event.currentTarget.setPointerCapture(event.pointerId);
-  }
-  function movePointerDrag(event) {
-    const pointerDrag = pointerDragRef.current;
-    if (!pointerDrag || pointerDrag.pointerId !== event.pointerId) return;
-    if (!pointerDrag.active && Math.hypot(event.clientX - pointerDrag.startX, event.clientY - pointerDrag.startY) < 5) return;
-    pointerDrag.active = true;
-    dragNodeRef.current = pointerDrag.node;
-    event.preventDefault();
-    const target = getPointerDropTarget(event.clientX, event.clientY, pointerDrag.node);
-    setDragOver(target ? { key: target.node.key, position: target.dropPosition } : void 0);
-  }
-  function finishPointerDrag(event) {
-    const pointerDrag = pointerDragRef.current;
-    if (!pointerDrag || pointerDrag.pointerId !== event.pointerId) return;
-    if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
-    if (pointerDrag.active) {
-      event.preventDefault();
-      suppressClickRef.current = true;
-      const target = getPointerDropTarget(event.clientX, event.clientY, pointerDrag.node);
-      if (target) onDrop?.({ dragNode: pointerDrag.node, node: target.node, dropPosition: target.dropPosition });
-      window.setTimeout(() => {
-        suppressClickRef.current = false;
-      }, 0);
-    }
-    pointerDragRef.current = void 0;
-    dragNodeRef.current = void 0;
-    setDragOver(void 0);
-  }
-  function cancelPointerDrag(event) {
-    const pointerDrag = pointerDragRef.current;
-    if (!pointerDrag || pointerDrag.pointerId !== event.pointerId) return;
-    pointerDragRef.current = void 0;
-    dragNodeRef.current = void 0;
-    setDragOver(void 0);
-  }
-  function render(nodes, depth = 0) {
-    return nodes.map((node) => {
-      const open = expanded.includes(node.key);
-      const isSelected = selected.includes(node.key);
-      const isSelectedAncestor = selectedAncestorKeys.has(node.key);
-      const isChecked = checkState.checked.has(node.key);
-      const isHalfChecked = checkState.halfChecked.has(node.key);
-      const hasChildren = Boolean(node.children?.length || node.isLeaf === false);
-      const nodeLoading = loading.has(node.key) || controlledLoading.has(node.key);
-      const sticky = stickyAncestors && hasChildren && open;
-      const canDrag = draggable && node.draggable !== false && !node.disabled;
-      const { className: rowClassName = "", style: rowStyle, onClick: onRowClick, ...rowProps } = node.rowProps ?? {};
-      const unloaded = hasChildren && node.loaded === false;
-      const dropPosition = dragOver?.key === node.key ? dragOver.position : void 0;
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `sia-tree__node${isSelected ? " is-selected" : ""}${isSelectedAncestor ? " is-selected-ancestor" : ""}${dropPosition ? ` is-drag-over-${dropPosition}` : ""}${node.disabled ? " is-disabled" : ""}${unloaded ? " is-unloaded" : ""}`, role: "treeitem", "aria-expanded": hasChildren ? open : void 0, "aria-selected": isSelected, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          "div",
-          {
-            ...withTitleTooltip(rowProps),
-            className: `sia-tree__row${blockNode ? " sia-tree__row--block" : ""}${sticky ? " sia-tree__row--sticky" : ""} ${rowClassName}`.trim(),
-            style: {
-              ...rowStyle,
-              paddingInlineStart: depth * Math.max(0, indentSize),
-              top: sticky ? depth * Math.max(1, stickyRowHeight) : rowStyle?.top,
-              zIndex: sticky ? Math.max(1, 100 - depth) : rowStyle?.zIndex
-            },
-            "aria-busy": nodeLoading || void 0,
-            "data-sia-tree-drop-key": String(node.key),
-            "data-sia-tree-draggable": canDrag || void 0,
-            onClick: (event) => {
-              onRowClick?.(event);
-              if (event.defaultPrevented || suppressClickRef.current || node.disabled) return;
-              select(node, event);
-              if (hasChildren) void toggleExpand(node);
-            },
-            children: (() => {
-              const content = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "sia-tree__context-content", children: [
-                hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: "sia-tree__switcher", "aria-label": open ? "\u6536\u8D77\u8282\u70B9" : "\u5C55\u5F00\u8282\u70B9", "aria-expanded": open, style: { width: normalizedSwitcherWidth, flexBasis: normalizedSwitcherWidth }, disabled: node.disabled, onClick: (event) => {
-                  event.stopPropagation();
-                  void toggleExpand(node);
-                }, children: nodeLoading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "loader", className: "sia-spin-icon", size: 13 }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: open ? "chevron-down" : "chevron-right", size: 13 }) }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-tree__switcher", "aria-label": open ? "\u6536\u8D77\u8282\u70B9" : "\u5C55\u5F00\u8282\u70B9", "aria-expanded": open, style: { width: normalizedSwitcherWidth, flexBasis: normalizedSwitcherWidth }, "aria-hidden": "true" }),
-                checkable || node.checkable ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Checkbox2, { checked: isChecked, indeterminate: isHalfChecked, disabled: node.disabled || node.disableCheckbox, onChange: () => check(node) }) }) : null,
-                node.prefix ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-tree__prefix", onClick: (event) => event.stopPropagation(), children: node.prefix }) : null,
-                showIcon ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-tree__icon", children: node.icon ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: hasChildren ? "folder" : "file", size: 15 }) }) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    className: "sia-tree__title",
-                    disabled: node.disabled,
-                    onPointerDown: canDrag ? (event) => beginPointerDrag(node, event) : void 0,
-                    onPointerMove: canDrag ? movePointerDrag : void 0,
-                    onPointerUp: canDrag ? finishPointerDrag : void 0,
-                    onPointerCancel: canDrag ? cancelPointerDrag : void 0,
-                    children: node.title
-                  }
-                ),
-                nodeLoading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-tree__loading-text", role: "status", children: node.loadingText ?? "\u6B63\u5728\u52A0\u8F7D\u2026" }) : null,
-                node.extra ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-tree__extra", onClick: (event) => event.stopPropagation(), children: node.extra }) : null
-              ] });
-              return node.contextMenu ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                Dropdown,
-                {
-                  className: "sia-tree__context-trigger",
-                  popupClassName: node.contextMenuPopupClassName,
-                  trigger: ["contextMenu"],
-                  menu: node.contextMenu,
-                  onContextMenu: (event) => selectForContextMenu(node, event),
-                  children: content
-                }
-              ) : content;
-            })()
-          }
-        ),
-        open && node.children?.length ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "sia-tree__children", role: "group", children: render(node.children, depth + 1) }) : null
-      ] }, node.key);
-    });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `sia-tree${showLine ? " sia-tree--line" : ""}${stickyAncestors ? " sia-tree--sticky-ancestors" : ""} ${className}`.trim(), role: "tree", "aria-multiselectable": multiple || void 0, ...withTitleTooltip(props), children: render(treeData) });
-}
-
-// src/components/FloatingScrollbarProvider.tsx
-var import_react16 = require("react");
-
-// src/components/useScrollbarProximity.ts
-var import_react15 = require("react");
-var users = 0;
-var cleanup;
-function useScrollbarProximity() {
-  (0, import_react15.useEffect)(() => {
-    if (users++ === 0) {
-      let frame = 0;
-      let x = -Infinity;
-      let y = -Infinity;
-      const nearby = /* @__PURE__ */ new Set();
-      const clear = () => {
-        nearby.forEach((track) => track.removeAttribute("data-scrollbar-near"));
-        nearby.clear();
-      };
-      const update = () => {
-        frame = 0;
-        const next = /* @__PURE__ */ new Set();
-        document.querySelectorAll(".sia-scrollbar-track").forEach((track) => {
-          const rect = track.getBoundingClientRect();
-          const proximity = Number.parseFloat(getComputedStyle(track).getPropertyValue("--sia-scrollbar-proximity")) || 16;
-          if (rect.width && rect.height && x >= rect.left - proximity && x <= rect.right + proximity && y >= rect.top - proximity && y <= rect.bottom + proximity) {
-            next.add(track);
-            if (!nearby.has(track)) track.setAttribute("data-scrollbar-near", "true");
-          }
-        });
-        nearby.forEach((track) => {
-          if (!next.has(track)) track.removeAttribute("data-scrollbar-near");
-        });
-        nearby.clear();
-        next.forEach((track) => nearby.add(track));
-      };
-      const move = (event) => {
-        if (event.pointerType === "touch") return;
-        x = event.clientX;
-        y = event.clientY;
-        if (!frame) frame = requestAnimationFrame(update);
-      };
-      const leave = () => {
-        x = y = -Infinity;
-        clear();
-      };
-      document.addEventListener("pointermove", move, { passive: true });
-      document.documentElement.addEventListener("pointerleave", leave);
-      window.addEventListener("blur", leave);
-      cleanup = () => {
-        if (frame) cancelAnimationFrame(frame);
-        document.removeEventListener("pointermove", move);
-        document.documentElement.removeEventListener("pointerleave", leave);
-        window.removeEventListener("blur", leave);
-        clear();
-      };
-    }
-    return () => {
-      if (--users === 0) {
-        cleanup?.();
-        cleanup = void 0;
-      }
-    };
-  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Floating, { ...props, content: props.title });
 }
-
-// src/components/FloatingScrollbarProvider.tsx
-var scrollableOverflow = /* @__PURE__ */ new Set(["auto", "scroll", "overlay"]);
-var clippingOverflow = /* @__PURE__ */ new Set(["auto", "scroll", "overlay", "hidden", "clip"]);
-function isRootScroller(target) {
-  return target === document.scrollingElement || target === document.documentElement;
+function Popover({ title, content, trigger = "click", overlayClassName = "", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Floating, { ...props, trigger, role: "dialog", overlayClassName: `sia-popover ${overlayClassName}`.trim(), content: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { className: "sia-popover__title", children: title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-popover__content", children: content })
+  ] }) });
 }
-function canScroll(target, axis) {
-  if (target.matches(".sia-table__viewport, [data-sia-native-scrollbar]")) return false;
-  if (isRootScroller(target)) {
-    return axis === "horizontal" ? target.scrollWidth > target.clientWidth + 1 : target.scrollHeight > target.clientHeight + 1;
-  }
-  const style = getComputedStyle(target);
-  const overflow = axis === "horizontal" ? style.overflowX : style.overflowY;
-  const hasOverflow = axis === "horizontal" ? target.scrollWidth > target.clientWidth + 1 : target.scrollHeight > target.clientHeight + 1;
-  return hasOverflow && scrollableOverflow.has(overflow);
+function Timeline({ items = [], mode = "left", pending = false, pendingDot, reverse = false, className = "", ...props }) {
+  const values = [...items, ...pending ? [{ children: pending === true ? "\u52A0\u8F7D\u4E2D..." : pending, dot: pendingDot ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "loader", className: "sia-spin-icon" }) }] : []];
+  if (reverse) values.reverse();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: `sia-timeline sia-timeline--${mode} ${className}`.trim(), ...withTitleTooltip(props), children: values.map((item, index) => {
+    const position = item.position ?? (mode === "alternate" ? index % 2 ? "right" : "left" : mode);
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("li", { className: `sia-timeline__item sia-timeline__item--${position}`, children: [
+      item.label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-timeline__label", children: item.label }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-timeline__rail", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-timeline__dot", style: { color: item.color && !["blue", "red", "green", "gray"].includes(item.color) ? item.color : void 0 }, "data-color": item.color ?? "blue", children: item.dot }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-timeline__content", children: item.children })
+    ] }, index);
+  }) });
 }
-function visibleRect(target) {
-  if (isRootScroller(target)) {
-    return { top: 0, right: window.innerWidth, bottom: window.innerHeight, left: 0, width: window.innerWidth, height: window.innerHeight };
-  }
-  const ownRect = target.getBoundingClientRect();
-  let top = Math.max(0, ownRect.top);
-  let right = Math.min(window.innerWidth, ownRect.right);
-  let bottom = Math.min(window.innerHeight, ownRect.bottom);
-  let left = Math.max(0, ownRect.left);
-  let parent = target.parentElement;
-  while (parent && parent !== document.body && parent !== document.documentElement) {
-    const style = getComputedStyle(parent);
-    const clipX = clippingOverflow.has(style.overflowX);
-    const clipY = clippingOverflow.has(style.overflowY);
-    if (clipX || clipY) {
-      const rect = parent.getBoundingClientRect();
-      if (clipX) {
-        left = Math.max(left, rect.left);
-        right = Math.min(right, rect.right);
-      }
-      if (clipY) {
-        top = Math.max(top, rect.top);
-        bottom = Math.min(bottom, rect.bottom);
-      }
-    }
-    parent = parent.parentElement;
-  }
-  return {
-    top,
-    right,
-    bottom,
-    left,
-    width: Math.max(0, right - left),
-    height: Math.max(0, bottom - top)
-  };
+function collectKeys(nodes, branchOnly = false, result = []) {
+  nodes.forEach((node) => {
+    if (!branchOnly || node.children?.length) result.push(node.key);
+    if (node.children) collectKeys(node.children, branchOnly, result);
+  });
+  return result;
 }
-function createTrack(axis) {
-  const track = document.createElement("div");
-  const thumb = document.createElement("div");
-  track.className = `sia-scrollbar-track sia-floating-scrollbar sia-floating-scrollbar--${axis}`;
-  thumb.className = "sia-floating-scrollbar__thumb";
-  track.dataset.axis = axis;
-  track.setAttribute("aria-hidden", "true");
-  track.append(thumb);
-  return { track, thumb };
+function flattenVisibleTree(nodes, expandedKeys, depth = 0, ancestorKeys = [], result = []) {
+  nodes.forEach((node, siblingIndex) => {
+    result.push({ node, depth, ancestorKeys, index: result.length, positionInSet: siblingIndex + 1, setSize: nodes.length });
+    if (expandedKeys.has(node.key) && node.children?.length) {
+      flattenVisibleTree(node.children, expandedKeys, depth + 1, [...ancestorKeys, node.key], result);
+    }
+  });
+  return result;
 }
-function FloatingScrollbarProvider({ disabled = false, targetRef }) {
-  useScrollbarProximity();
-  (0, import_react16.useEffect)(() => {
-    if (disabled) return;
-    const layer = document.createElement("div");
-    layer.className = "sia-floating-scrollbar-layer";
-    layer.setAttribute("aria-hidden", "true");
-    document.body.append(layer);
-    const entries = /* @__PURE__ */ new Map();
-    let scanFrame = 0;
-    let updateFrame = 0;
-    const setEntryVisible = (entry, visible) => {
-      entry.horizontalTrack.classList.toggle("sia-floating-scrollbar--visible", visible);
-      entry.verticalTrack.classList.toggle("sia-floating-scrollbar--visible", visible);
-    };
-    const showEntry = (entry) => {
-      if (entry.hideTimer !== null) window.clearTimeout(entry.hideTimer);
-      entry.hideTimer = null;
-      setEntryVisible(entry, true);
-    };
-    const scheduleHide = (entry, delay = 500) => {
-      if (entry.hideTimer !== null) window.clearTimeout(entry.hideTimer);
-      entry.hideTimer = window.setTimeout(() => {
-        entry.hideTimer = null;
-        if (!entry.hoveringTarget && !entry.hoveringTrack && !entry.dragging) setEntryVisible(entry, false);
-      }, delay);
-    };
-    const updateEntry = (entry) => {
-      const { target, horizontalTrack, horizontalThumb, verticalTrack, verticalThumb } = entry;
-      const hasHorizontal = canScroll(target, "horizontal");
-      const hasVertical = canScroll(target, "vertical");
-      const rect = visibleRect(target);
-      const thickness = 10;
-      horizontalTrack.hidden = !hasHorizontal || rect.width <= thickness || rect.height <= 0;
-      verticalTrack.hidden = !hasVertical || rect.height <= thickness || rect.width <= 0;
-      if (!horizontalTrack.hidden) {
-        const trackWidth = Math.max(0, rect.width - (hasVertical ? thickness : 0));
-        const thumbWidth = Math.max(24, Math.min(trackWidth, trackWidth * target.clientWidth / target.scrollWidth));
-        const travel = Math.max(0, trackWidth - thumbWidth);
-        const maxScroll = Math.max(1, target.scrollWidth - target.clientWidth);
-        horizontalTrack.style.left = `${rect.left}px`;
-        horizontalTrack.style.top = `${rect.bottom - thickness}px`;
-        horizontalTrack.style.width = `${trackWidth}px`;
-        horizontalTrack.style.height = `${thickness}px`;
-        horizontalThumb.style.width = `${thumbWidth}px`;
-        horizontalThumb.style.transform = `translate3d(${travel * target.scrollLeft / maxScroll}px, 0, 0)`;
-      }
-      if (!verticalTrack.hidden) {
-        const trackHeight = Math.max(0, rect.height - (hasHorizontal ? thickness : 0));
-        const thumbHeight = Math.max(24, Math.min(trackHeight, trackHeight * target.clientHeight / target.scrollHeight));
-        const travel = Math.max(0, trackHeight - thumbHeight);
-        const maxScroll = Math.max(1, target.scrollHeight - target.clientHeight);
-        verticalTrack.style.left = `${rect.right - thickness}px`;
-        verticalTrack.style.top = `${rect.top}px`;
-        verticalTrack.style.width = `${thickness}px`;
-        verticalTrack.style.height = `${trackHeight}px`;
-        verticalThumb.style.height = `${thumbHeight}px`;
-        verticalThumb.style.transform = `translate3d(0, ${travel * target.scrollTop / maxScroll}px, 0)`;
-      }
-    };
-    const scheduleUpdateAll = () => {
-      if (updateFrame) return;
-      updateFrame = window.requestAnimationFrame(() => {
-        updateFrame = 0;
-        entries.forEach(updateEntry);
-      });
-    };
-    const bindTrackDrag = (entry, axis, track, thumb) => {
-      const target = entry.target;
-      const onTrackPointerEnter = () => {
-        entry.hoveringTrack = true;
-        showEntry(entry);
-      };
-      const onTrackPointerLeave = () => {
-        entry.hoveringTrack = false;
-        scheduleHide(entry);
-      };
-      const onTrackPointerDown = (event) => {
-        if (event.target === thumb || event.button !== 0) return;
-        event.preventDefault();
-        event.stopPropagation();
-        const trackRect = track.getBoundingClientRect();
-        const thumbRect = thumb.getBoundingClientRect();
-        const trackLength = axis === "vertical" ? trackRect.height : trackRect.width;
-        const thumbLength = axis === "vertical" ? thumbRect.height : thumbRect.width;
-        const pointer = axis === "vertical" ? event.clientY - trackRect.top : event.clientX - trackRect.left;
-        const ratio = Math.max(0, Math.min(1, (pointer - thumbLength / 2) / Math.max(1, trackLength - thumbLength)));
-        if (axis === "vertical") target.scrollTop = ratio * (target.scrollHeight - target.clientHeight);
-        else target.scrollLeft = ratio * (target.scrollWidth - target.clientWidth);
-      };
-      const onThumbPointerDown = (event) => {
-        if (event.button !== 0) return;
-        event.preventDefault();
-        event.stopPropagation();
-        entry.dragging = true;
-        showEntry(entry);
-        thumb.setPointerCapture(event.pointerId);
-        const startPointer = axis === "vertical" ? event.clientY : event.clientX;
-        const startScroll = axis === "vertical" ? target.scrollTop : target.scrollLeft;
-        const trackRect = track.getBoundingClientRect();
-        const thumbRect = thumb.getBoundingClientRect();
-        const trackLength = axis === "vertical" ? trackRect.height : trackRect.width;
-        const thumbLength = axis === "vertical" ? thumbRect.height : thumbRect.width;
-        const maxScroll = axis === "vertical" ? target.scrollHeight - target.clientHeight : target.scrollWidth - target.clientWidth;
-        const travel = Math.max(1, trackLength - thumbLength);
-        const onPointerMove = (moveEvent) => {
-          if (moveEvent.pointerId !== event.pointerId) return;
-          const pointer = axis === "vertical" ? moveEvent.clientY : moveEvent.clientX;
-          const nextScroll = startScroll + (pointer - startPointer) * maxScroll / travel;
-          if (axis === "vertical") target.scrollTop = nextScroll;
-          else target.scrollLeft = nextScroll;
-        };
-        const onPointerUp = (upEvent) => {
-          if (upEvent.pointerId !== event.pointerId) return;
-          entry.dragging = false;
-          thumb.releasePointerCapture(event.pointerId);
-          window.removeEventListener("pointermove", onPointerMove);
-          window.removeEventListener("pointerup", onPointerUp);
-          window.removeEventListener("pointercancel", onPointerUp);
-          scheduleHide(entry);
-        };
-        window.addEventListener("pointermove", onPointerMove);
-        window.addEventListener("pointerup", onPointerUp);
-        window.addEventListener("pointercancel", onPointerUp);
-      };
-      track.addEventListener("pointerenter", onTrackPointerEnter);
-      track.addEventListener("pointerleave", onTrackPointerLeave);
-      track.addEventListener("pointerdown", onTrackPointerDown);
-      thumb.addEventListener("pointerdown", onThumbPointerDown);
-      return () => {
-        track.removeEventListener("pointerenter", onTrackPointerEnter);
-        track.removeEventListener("pointerleave", onTrackPointerLeave);
-        track.removeEventListener("pointerdown", onTrackPointerDown);
-        thumb.removeEventListener("pointerdown", onThumbPointerDown);
-      };
+function Tree({
+  treeData,
+  selectedKeys,
+  defaultSelectedKeys = [],
+  expandedKeys,
+  defaultExpandedKeys = [],
+  defaultExpandAll = false,
+  checkedKeys,
+  defaultCheckedKeys = [],
+  loadingKeys = [],
+  checkable = false,
+  checkStrictly = false,
+  multiple = false,
+  selectable = true,
+  showLine = false,
+  showIcon = false,
+  blockNode = false,
+  indentSize = 20,
+  switcherWidth = 24,
+  stickyAncestors = false,
+  stickyRowHeight = 34,
+  virtual = true,
+  virtualThreshold = 100,
+  virtualItemHeight,
+  draggable = false,
+  loadData,
+  onSelect,
+  onCheck,
+  onExpand,
+  onDrop,
+  className = "",
+  ...props
+}) {
+  const scrollRef = (0, import_react16.useRef)(null);
+  const [selected, setSelected] = useControllableState({ value: selectedKeys, defaultValue: defaultSelectedKeys });
+  const [expanded, setExpanded] = useControllableState({ value: expandedKeys, defaultValue: defaultExpandAll ? collectKeys(treeData, true) : defaultExpandedKeys });
+  const [checked, setChecked] = useControllableState({ value: checkedKeys, defaultValue: defaultCheckedKeys });
+  const [loading, setLoading] = (0, import_react16.useState)(/* @__PURE__ */ new Set());
+  const controlledLoading = (0, import_react16.useMemo)(() => new Set(loadingKeys), [loadingKeys]);
+  const selectedKeySet = (0, import_react16.useMemo)(() => new Set(selected), [selected]);
+  const expandedKeySet = (0, import_react16.useMemo)(() => new Set(expanded), [expanded]);
+  const flatNodes = (0, import_react16.useMemo)(() => flattenVisibleTree(treeData, expandedKeySet), [expandedKeySet, treeData]);
+  const normalizedVirtualThreshold = Math.max(1, Math.floor(virtualThreshold));
+  const normalizedVirtualItemHeight = Math.max(1, virtualItemHeight ?? stickyRowHeight);
+  const wantsVirtualScroll = virtual && flatNodes.length >= normalizedVirtualThreshold;
+  const [virtualViewport, setVirtualViewport] = (0, import_react16.useState)({ height: 0, scrollTop: 0, ownsScroll: true });
+  (0, import_react16.useLayoutEffect)(() => {
+    if (!wantsVirtualScroll) return void 0;
+    const element = scrollRef.current;
+    if (!element) return void 0;
+    let animationFrame = 0;
+    const updateViewport = () => {
+      animationFrame = 0;
+      const overflowY = window.getComputedStyle(element).overflowY;
+      const ownsScroll = overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay";
+      const next = { height: element.clientHeight, scrollTop: element.scrollTop, ownsScroll };
+      setVirtualViewport((current) => current.height === next.height && current.scrollTop === next.scrollTop && current.ownsScroll === next.ownsScroll ? current : next);
     };
-    const resizeObserver = new ResizeObserver((observedEntries) => {
-      observedEntries.forEach(({ target }) => {
-        const entry = entries.get(target);
-        if (entry) updateEntry(entry);
-      });
-    });
-    const addTarget = (target) => {
-      if (entries.has(target)) return;
-      const horizontal = createTrack("horizontal");
-      const vertical = createTrack("vertical");
-      layer.append(horizontal.track, vertical.track);
-      const onPointerEnter = () => {
-        const entry2 = entries.get(target);
-        if (!entry2) return;
-        entry2.hoveringTarget = true;
-        showEntry(entry2);
-      };
-      const onPointerLeave = () => {
-        const entry2 = entries.get(target);
-        if (!entry2) return;
-        entry2.hoveringTarget = false;
-        scheduleHide(entry2);
-      };
-      const onScroll = () => {
-        const entry2 = entries.get(target);
-        if (!entry2) return;
-        updateEntry(entry2);
-        showEntry(entry2);
-        scheduleHide(entry2, 700);
-      };
-      target.addEventListener("pointerenter", onPointerEnter);
-      target.addEventListener("pointerleave", onPointerLeave);
-      target.addEventListener("scroll", onScroll, { passive: true });
-      const entry = {
-        target,
-        horizontalTrack: horizontal.track,
-        horizontalThumb: horizontal.thumb,
-        verticalTrack: vertical.track,
-        verticalThumb: vertical.thumb,
-        hideTimer: null,
-        hoveringTarget: target.matches(":hover"),
-        hoveringTrack: false,
-        dragging: false,
-        cleanup: () => void 0
-      };
-      const cleanupHorizontal = bindTrackDrag(entry, "horizontal", horizontal.track, horizontal.thumb);
-      const cleanupVertical = bindTrackDrag(entry, "vertical", vertical.track, vertical.thumb);
-      entry.cleanup = () => {
-        if (entry.hideTimer !== null) window.clearTimeout(entry.hideTimer);
-        cleanupHorizontal();
-        cleanupVertical();
-        target.removeEventListener("pointerenter", onPointerEnter);
-        target.removeEventListener("pointerleave", onPointerLeave);
-        target.removeEventListener("scroll", onScroll);
-        resizeObserver.unobserve(target);
-        target.removeAttribute("data-sia-floating-scrollbar");
-        horizontal.track.remove();
-        vertical.track.remove();
-      };
-      entries.set(target, entry);
-      target.setAttribute("data-sia-floating-scrollbar", "");
-      resizeObserver.observe(target);
-      updateEntry(entry);
-      if (entry.hoveringTarget) showEntry(entry);
+    const scheduleViewportUpdate = () => {
+      if (!animationFrame) animationFrame = window.requestAnimationFrame(updateViewport);
     };
-    const removeTarget = (target) => {
-      const entry = entries.get(target);
-      if (!entry) return;
-      entry.cleanup();
-      entries.delete(target);
+    updateViewport();
+    element.addEventListener("scroll", scheduleViewportUpdate, { passive: true });
+    const resizeObserver = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(scheduleViewportUpdate);
+    resizeObserver?.observe(element);
+    return () => {
+      element.removeEventListener("scroll", scheduleViewportUpdate);
+      resizeObserver?.disconnect();
+      if (animationFrame) window.cancelAnimationFrame(animationFrame);
     };
-    const scanTargets = () => {
-      scanFrame = 0;
-      const managedSelector = ".sia-table__viewport, [data-sia-native-scrollbar], .sia-scrollbar-track, .sia-floating-scrollbar-layer";
-      const discovered = [];
-      if (!targetRef) {
-        const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, {
-          acceptNode: (node) => node.matches(managedSelector) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT
-        });
-        for (let node = walker.nextNode(); node; node = walker.nextNode()) {
-          if (node instanceof HTMLElement) discovered.push(node);
-        }
-      }
-      const candidates = (targetRef ? [targetRef.current] : [document.scrollingElement, ...discovered]).filter((target) => target instanceof HTMLElement);
-      const nextTargets = /* @__PURE__ */ new Set();
-      candidates.forEach((target) => {
-        if (canScroll(target, "horizontal") || canScroll(target, "vertical")) {
-          nextTargets.add(target);
-          if (entries.has(target) || !target.hasAttribute("data-sia-floating-scrollbar")) addTarget(target);
-        }
-      });
-      entries.forEach((_entry, target) => {
-        if (!target.isConnected || !nextTargets.has(target)) removeTarget(target);
-        else updateEntry(_entry);
+  }, [className, props.style, wantsVirtualScroll]);
+  const virtualEnabled = wantsVirtualScroll && virtualViewport.ownsScroll;
+  const virtualWindow = (0, import_react16.useMemo)(() => {
+    if (!virtualEnabled) return { start: 0, end: flatNodes.length };
+    const overscan = 8;
+    const viewportHeight = virtualViewport.height || normalizedVirtualItemHeight * 12;
+    const maxStart = Math.max(0, flatNodes.length - 1);
+    const start = Math.min(maxStart, Math.max(0, Math.floor(virtualViewport.scrollTop / normalizedVirtualItemHeight) - overscan));
+    const end = Math.min(flatNodes.length, Math.ceil((virtualViewport.scrollTop + viewportHeight) / normalizedVirtualItemHeight) + overscan);
+    return { start, end };
+  }, [flatNodes.length, normalizedVirtualItemHeight, virtualEnabled, virtualViewport.height, virtualViewport.scrollTop]);
+  const flatNodeByKey = (0, import_react16.useMemo)(() => new Map(flatNodes.map((item) => [item.node.key, item])), [flatNodes]);
+  const virtualStickyNodes = (0, import_react16.useMemo)(() => {
+    if (!virtualEnabled || !stickyAncestors || !flatNodes.length) return [];
+    const anchorIndex = Math.min(flatNodes.length - 1, Math.max(0, Math.floor(virtualViewport.scrollTop / normalizedVirtualItemHeight)));
+    return flatNodes[anchorIndex].ancestorKeys.map((key) => flatNodeByKey.get(key)).filter((item) => Boolean(item));
+  }, [flatNodeByKey, flatNodes, normalizedVirtualItemHeight, stickyAncestors, virtualEnabled, virtualViewport.scrollTop]);
+  const selectedAncestorKeys = (0, import_react16.useMemo)(() => {
+    const ancestors = /* @__PURE__ */ new Set();
+    const visit = (nodes, parentKeys) => {
+      nodes.forEach((node) => {
+        if (selectedKeySet.has(node.key)) parentKeys.forEach((key) => ancestors.add(key));
+        if (node.children?.length) visit(node.children, [...parentKeys, node.key]);
       });
     };
-    const scheduleScan = () => {
-      if (scanFrame) return;
-      scanFrame = window.requestAnimationFrame(scanTargets);
-    };
-    const mutationObserver = new MutationObserver((mutations) => {
-      if (mutations.some((mutation) => {
-        const target = mutation.target instanceof Element ? mutation.target : mutation.target.parentElement;
-        return target && !layer.contains(target) && !target.closest(".sia-table__viewport, [data-sia-native-scrollbar], .sia-scrollbar-track");
-      })) scheduleScan();
-    });
-    mutationObserver.observe(document.documentElement, { subtree: true, childList: true, attributes: true, attributeFilter: ["class", "style", "hidden"] });
-    window.addEventListener("resize", scheduleScan);
-    window.addEventListener("scroll", scheduleUpdateAll, true);
-    scheduleScan();
-    return () => {
-      mutationObserver.disconnect();
-      resizeObserver.disconnect();
-      window.removeEventListener("resize", scheduleScan);
-      window.removeEventListener("scroll", scheduleUpdateAll, true);
-      if (scanFrame) window.cancelAnimationFrame(scanFrame);
-      if (updateFrame) window.cancelAnimationFrame(updateFrame);
-      entries.forEach((entry) => entry.cleanup());
-      entries.clear();
-      layer.remove();
+    visit(treeData, []);
+    return ancestors;
+  }, [selectedKeySet, treeData]);
+  const dragNodeRef = (0, import_react16.useRef)();
+  const pointerDragRef = (0, import_react16.useRef)();
+  const suppressClickRef = (0, import_react16.useRef)(false);
+  const [dragOver, setDragOver] = (0, import_react16.useState)();
+  const normalizedSwitcherWidth = Math.max(0, switcherWidth);
+  async function toggleExpand(node) {
+    const nextExpanded = !expanded.includes(node.key);
+    if (nextExpanded && node.loaded !== true && !node.children?.length && node.isLeaf === false && loadData) {
+      setLoading((keys) => new Set(keys).add(node.key));
+      try {
+        await loadData(node);
+      } finally {
+        setLoading((keys) => {
+          const next2 = new Set(keys);
+          next2.delete(node.key);
+          return next2;
+        });
+      }
+    }
+    const next = nextExpanded ? [...expanded, node.key] : expanded.filter((key) => key !== node.key);
+    setExpanded(next);
+    onExpand?.([...next], { expanded: nextExpanded, node });
+  }
+  const checkState = (0, import_react16.useMemo)(() => getTreeCheckState(treeData, checked, checkStrictly), [treeData, checked, checkStrictly]);
+  function check(node) {
+    const next = toggleTreeCheck(treeData, checked, node, checkStrictly);
+    setChecked([...next.checked]);
+    onCheck?.([...next.checked], { checked: next.checkedValue, halfCheckedKeys: [...next.halfChecked], node });
+  }
+  function select(node, event) {
+    if (!selectable || node.selectable === false || node.disabled) return;
+    const exists = selected.includes(node.key);
+    const next = multiple ? exists ? selected.filter((key) => key !== node.key) : [...selected, node.key] : exists ? [] : [node.key];
+    setSelected(next);
+    onSelect?.([...next], { selected: !exists, node, nativeEvent: event });
+  }
+  function selectForContextMenu(node, event) {
+    if (!selectable || node.selectable === false || node.disabled || selected.includes(node.key)) return;
+    const next = [node.key];
+    setSelected(next);
+    onSelect?.(next, { selected: true, node, nativeEvent: event });
+  }
+  function findNode2(key, nodes = treeData) {
+    for (const node of nodes) {
+      if (String(node.key) === key) return node;
+      const child = node.children?.length ? findNode2(key, node.children) : void 0;
+      if (child) return child;
+    }
+    return void 0;
+  }
+  function getPointerDropTarget(clientX, clientY, dragNode) {
+    const targetElement = document.elementFromPoint(clientX, clientY)?.closest("[data-sia-tree-drop-key]");
+    if (!targetElement) return void 0;
+    const targetNode = targetElement?.dataset.siaTreeDropKey ? findNode2(targetElement.dataset.siaTreeDropKey) : void 0;
+    if (!targetNode || targetNode.key === dragNode.key || targetNode.disabled || targetNode.droppable === false) return void 0;
+    const bounds = targetElement.getBoundingClientRect();
+    const relativeY = bounds.height > 0 ? (clientY - bounds.top) / bounds.height : 0.5;
+    const dropPosition = relativeY < 0.25 ? "before" : relativeY > 0.75 ? "after" : "inside";
+    return { node: targetNode, dropPosition };
+  }
+  function beginPointerDrag(node, event) {
+    if (event.button !== 0) return;
+    pointerDragRef.current = {
+      node,
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      active: false
     };
-  }, [disabled, targetRef]);
-  return null;
+    event.currentTarget.setPointerCapture(event.pointerId);
+  }
+  function movePointerDrag(event) {
+    const pointerDrag = pointerDragRef.current;
+    if (!pointerDrag || pointerDrag.pointerId !== event.pointerId) return;
+    if (!pointerDrag.active && Math.hypot(event.clientX - pointerDrag.startX, event.clientY - pointerDrag.startY) < 5) return;
+    pointerDrag.active = true;
+    dragNodeRef.current = pointerDrag.node;
+    event.preventDefault();
+    const target = getPointerDropTarget(event.clientX, event.clientY, pointerDrag.node);
+    setDragOver(target ? { key: target.node.key, position: target.dropPosition } : void 0);
+  }
+  function finishPointerDrag(event) {
+    const pointerDrag = pointerDragRef.current;
+    if (!pointerDrag || pointerDrag.pointerId !== event.pointerId) return;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+    if (pointerDrag.active) {
+      event.preventDefault();
+      suppressClickRef.current = true;
+      const target = getPointerDropTarget(event.clientX, event.clientY, pointerDrag.node);
+      if (target) onDrop?.({ dragNode: pointerDrag.node, node: target.node, dropPosition: target.dropPosition });
+      window.setTimeout(() => {
+        suppressClickRef.current = false;
+      }, 0);
+    }
+    pointerDragRef.current = void 0;
+    dragNodeRef.current = void 0;
+    setDragOver(void 0);
+  }
+  function cancelPointerDrag(event) {
+    const pointerDrag = pointerDragRef.current;
+    if (!pointerDrag || pointerDrag.pointerId !== event.pointerId) return;
+    pointerDragRef.current = void 0;
+    dragNodeRef.current = void 0;
+    setDragOver(void 0);
+  }
+  function renderNode(node, depth, options = {}) {
+    const open = expandedKeySet.has(node.key);
+    const isSelected = selected.includes(node.key);
+    const isSelectedAncestor = selectedAncestorKeys.has(node.key);
+    const isChecked = checkState.checked.has(node.key);
+    const isHalfChecked = checkState.halfChecked.has(node.key);
+    const hasChildren = Boolean(node.children?.length || node.isLeaf === false);
+    const nodeLoading = loading.has(node.key) || controlledLoading.has(node.key);
+    const virtualizedNode = options.virtualTop !== void 0 || options.stickySlot !== void 0;
+    const sticky = !virtualizedNode && stickyAncestors && hasChildren && open;
+    const canDrag = draggable && node.draggable !== false && !node.disabled;
+    const { className: rowClassName = "", style: rowStyle, onClick: onRowClick, ...rowProps } = node.rowProps ?? {};
+    const unloaded = hasChildren && node.loaded === false;
+    const dropPosition = dragOver?.key === node.key ? dragOver.position : void 0;
+    const virtualNodeClassName = options.stickySlot !== void 0 ? " sia-tree__virtual-sticky-node" : options.virtualTop !== void 0 ? " sia-tree__virtual-node" : "";
+    const virtualNodeStyle = options.stickySlot !== void 0 ? { top: options.stickySlot * normalizedVirtualItemHeight, height: normalizedVirtualItemHeight } : options.virtualTop !== void 0 ? { transform: `translateY(${options.virtualTop}px)`, height: normalizedVirtualItemHeight } : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        className: `sia-tree__node${virtualNodeClassName}${isSelected ? " is-selected" : ""}${isSelectedAncestor ? " is-selected-ancestor" : ""}${dropPosition ? ` is-drag-over-${dropPosition}` : ""}${node.disabled ? " is-disabled" : ""}${unloaded ? " is-unloaded" : ""}`,
+        style: virtualNodeStyle,
+        role: "treeitem",
+        "aria-expanded": hasChildren ? open : void 0,
+        "aria-selected": isSelected,
+        "aria-level": depth + 1,
+        "aria-posinset": options.positionInSet,
+        "aria-setsize": options.setSize,
+        children: [
+          virtualizedNode && showLine && depth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-tree__virtual-guides", "aria-hidden": "true", children: Array.from({ length: depth }, (_, guideDepth) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-tree__virtual-guide", style: { insetInlineStart: (guideDepth + 1) * Math.max(0, indentSize) } }, guideDepth)) }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "div",
+            {
+              ...withTitleTooltip(rowProps),
+              className: `sia-tree__row${blockNode ? " sia-tree__row--block" : ""}${sticky ? " sia-tree__row--sticky" : ""} ${rowClassName}`.trim(),
+              style: {
+                ...rowStyle,
+                height: virtualizedNode ? "100%" : rowStyle?.height,
+                paddingInlineStart: depth * Math.max(0, indentSize),
+                top: sticky ? depth * Math.max(1, stickyRowHeight) : rowStyle?.top,
+                zIndex: sticky ? Math.max(1, 100 - depth) : rowStyle?.zIndex
+              },
+              "aria-busy": nodeLoading || void 0,
+              "data-sia-tree-drop-key": String(node.key),
+              "data-sia-tree-draggable": canDrag || void 0,
+              onClick: (event) => {
+                onRowClick?.(event);
+                if (event.defaultPrevented || suppressClickRef.current || node.disabled) return;
+                select(node, event);
+                if (hasChildren) void toggleExpand(node);
+              },
+              children: (() => {
+                const content = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "sia-tree__context-content", children: [
+                  hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: "sia-tree__switcher", "aria-label": open ? "\u6536\u8D77\u8282\u70B9" : "\u5C55\u5F00\u8282\u70B9", "aria-expanded": open, style: { width: normalizedSwitcherWidth, flexBasis: normalizedSwitcherWidth }, disabled: node.disabled, onClick: (event) => {
+                    event.stopPropagation();
+                    void toggleExpand(node);
+                  }, children: nodeLoading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "loader", className: "sia-spin-icon", size: 13 }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: open ? "chevron-down" : "chevron-right", size: 13 }) }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-tree__switcher", "aria-label": open ? "\u6536\u8D77\u8282\u70B9" : "\u5C55\u5F00\u8282\u70B9", "aria-expanded": open, style: { width: normalizedSwitcherWidth, flexBasis: normalizedSwitcherWidth }, "aria-hidden": "true" }),
+                  checkable || node.checkable ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Checkbox2, { checked: isChecked, indeterminate: isHalfChecked, disabled: node.disabled || node.disableCheckbox, onChange: () => check(node) }) }) : null,
+                  node.prefix ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-tree__prefix", onClick: (event) => event.stopPropagation(), children: node.prefix }) : null,
+                  showIcon ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-tree__icon", children: node.icon ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: hasChildren ? "folder" : "file", size: 15 }) }) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      className: "sia-tree__title",
+                      disabled: node.disabled,
+                      onPointerDown: canDrag ? (event) => beginPointerDrag(node, event) : void 0,
+                      onPointerMove: canDrag ? movePointerDrag : void 0,
+                      onPointerUp: canDrag ? finishPointerDrag : void 0,
+                      onPointerCancel: canDrag ? cancelPointerDrag : void 0,
+                      children: node.title
+                    }
+                  ),
+                  nodeLoading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-tree__loading-text", role: "status", children: node.loadingText ?? "\u6B63\u5728\u52A0\u8F7D\u2026" }) : null,
+                  node.extra ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-tree__extra", onClick: (event) => event.stopPropagation(), children: node.extra }) : null
+                ] });
+                return node.contextMenu ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  Dropdown,
+                  {
+                    className: "sia-tree__context-trigger",
+                    popupClassName: node.contextMenuPopupClassName,
+                    trigger: ["contextMenu"],
+                    menu: node.contextMenu,
+                    onContextMenu: (event) => selectForContextMenu(node, event),
+                    children: content
+                  }
+                ) : content;
+              })()
+            }
+          ),
+          options.children
+        ]
+      },
+      options.reactKey ?? node.key
+    );
+  }
+  function render(nodes, depth = 0) {
+    return nodes.map((node, siblingIndex) => renderNode(node, depth, {
+      positionInSet: siblingIndex + 1,
+      setSize: nodes.length,
+      children: expandedKeySet.has(node.key) && node.children?.length ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "sia-tree__children", role: "group", children: render(node.children, depth + 1) }) : null
+    }));
+  }
+  const stickyVirtualKeySet = new Set(virtualStickyNodes.map((item) => item.node.key));
+  const virtualContent = virtualEnabled ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "sia-tree__virtual-space", style: { height: flatNodes.length * normalizedVirtualItemHeight }, children: [
+    virtualStickyNodes.length ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "sia-tree__virtual-sticky-layer", children: virtualStickyNodes.map((item, stickySlot) => renderNode(item.node, item.depth, {
+      reactKey: `sticky-${String(item.node.key)}`,
+      stickySlot,
+      positionInSet: item.positionInSet,
+      setSize: item.setSize
+    })) }) : null,
+    flatNodes.slice(virtualWindow.start, virtualWindow.end).filter((item) => !stickyVirtualKeySet.has(item.node.key)).map((item) => renderNode(item.node, item.depth, {
+      reactKey: `virtual-${String(item.node.key)}`,
+      virtualTop: item.index * normalizedVirtualItemHeight,
+      positionInSet: item.positionInSet,
+      setSize: item.setSize
+    }))
+  ] }) : render(treeData);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ref: scrollRef, className: `sia-tree${showLine ? " sia-tree--line" : ""}${stickyAncestors ? " sia-tree--sticky-ancestors" : ""}${virtualEnabled ? " sia-tree--virtual" : ""} ${className}`.trim(), role: "tree", "aria-multiselectable": multiple || void 0, "data-sia-tree-virtualized": virtualEnabled || void 0, ...withTitleTooltip(props), children: [
+    virtualContent,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FloatingScrollbarProvider, { targetRef: scrollRef })
+  ] });
 }
 
 // src/components/SelectionPanel.tsx
@@ -6413,6 +6517,7 @@ function FormRoot({
       "data-required-mark": requiredMark,
       onSubmit: (event) => {
         event.preventDefault();
+        event.stopPropagation();
         instance.submit();
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("fieldset", { disabled, children })
@@ -12987,7 +13092,6 @@ function TableSelectedItemsPanel({
 }
 function createSelectionPlugin(options = {}) {
   const { mode = "multiple", childrenColumnName = "children" } = options;
-  const preservedRows = /* @__PURE__ */ new Map();
   function selected(context) {
     return options.selectedKeys ?? context.state.selectedKeys ?? [];
   }
@@ -12998,6 +13102,7 @@ function createSelectionPlugin(options = {}) {
     return flattenRecords(context.sourceData, childrenColumnName);
   }
   function entriesForKeys(keys, context) {
+    const preservedRows = context.state.preservedRows;
     const records = allRecords(context);
     const currentRows = new Map(
       records.map(
@@ -13032,7 +13137,7 @@ function createSelectionPlugin(options = {}) {
     return entriesForKeys(keys, context).map((entry) => entry.record);
   }
   function setKeys(keys, context) {
-    if (keys.length === 0) preservedRows.clear();
+    if (keys.length === 0) context.state.preservedRows.clear();
     context.setState((state) => ({
       ...state,
       selectedKeys: keys,
@@ -13048,7 +13153,7 @@ function createSelectionPlugin(options = {}) {
         (key) => pageKeys.has(key)
       );
       setKeys(currentPageKeys, context);
-      preservedRows.clear();
+      context.state.preservedRows.clear();
     }
     context.setState((state) => ({
       ...state,
@@ -13070,11 +13175,13 @@ function createSelectionPlugin(options = {}) {
   return {
     id: "selection",
     order: 20,
-    initialState: {
+    // 用工厂给每个表格创建独立缓存，避免同一插件对象被多个表格复用时串数据。
+    initialState: () => ({
+      preservedRows: /* @__PURE__ */ new Map(),
       selectedKeys: options.defaultSelectedKeys ?? [],
       preserveSelectedRowKeys: options.preserveSelectedRowKeys ?? false,
       panelOpen: false
-    },
+    }),
     transformColumns(columns, context) {
       if (mode === "row") return columns;
       const selectionColumn = {
@@ -13222,7 +13329,7 @@ function createSelectionPlugin(options = {}) {
           const records = allRecords(context);
           const record = records.find(
             (item, index) => Object.is(context.getRowKey(item, index), key)
-          ) ?? preservedRows.get(key);
+          ) ?? context.state.preservedRows.get(key);
           if (record) toggle(key, record, context, checked);
         },
         getSelectedRows: () => rowsForKeys(selected(context), context),