@visulima/tui 0.0.1 → 1.0.0-alpha.2

package/dist/packem_shared/ScrollBarBox-DTNNlh7R.js

@@ -0,0 +1,72 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from './Box-D_pSJ9Jp.js';
+import { ScrollBar } from './ScrollBar-EWAs2Uc7.js';
+
+const ScrollBarBox = ({
+  borderColor,
+  borderDimColor,
+  borderLeftColor,
+  borderLeftDimColor,
+  borderRightColor,
+  borderRightDimColor,
+  borderStyle = "single",
+  children,
+  contentHeight,
+  height,
+  scrollBarAutoHide = false,
+  scrollBarPosition = "right",
+  scrollOffset,
+  thumbChar,
+  viewportHeight,
+  ...boxProps
+}) => {
+  const isLeft = scrollBarPosition === "left";
+  const scrollBarPlacement = isLeft ? "left" : "right";
+  const scrollBarColor = isLeft ? borderLeftColor ?? borderColor : borderRightColor ?? borderColor;
+  const scrollBarDimColor = isLeft ? borderLeftDimColor ?? borderDimColor : borderRightDimColor ?? borderDimColor;
+  return jsxs(Box, { flexDirection: "row", height, ...boxProps, children: [
+    isLeft && jsx(
+      ScrollBar,
+      {
+        autoHide: scrollBarAutoHide,
+        color: scrollBarColor,
+        contentHeight,
+        dimColor: scrollBarDimColor,
+        placement: scrollBarPlacement,
+        scrollOffset,
+        style: borderStyle,
+        thumbChar,
+        viewportHeight
+      }
+    ),
+    jsx(
+      Box,
+      {
+        borderColor,
+        borderDimColor,
+        borderLeft: !isLeft,
+        borderRight: isLeft,
+        borderStyle,
+        flexGrow: 1,
+        overflow: "hidden",
+        children
+      }
+    ),
+    !isLeft && jsx(
+      ScrollBar,
+      {
+        autoHide: scrollBarAutoHide,
+        color: scrollBarColor,
+        contentHeight,
+        dimColor: scrollBarDimColor,
+        placement: scrollBarPlacement,
+        scrollOffset,
+        style: borderStyle,
+        thumbChar,
+        viewportHeight
+      }
+    )
+  ] });
+};
+
+export { ScrollBarBox, ScrollBarBox as default };

package/dist/packem_shared/ScrollList-DCeIFL8M.js

@@ -0,0 +1,227 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, useCallback, useImperativeHandle } from 'react';
+import useScrollInput from './useScrollInput-D3CpBq_a.js';
+import { C as ControlledScrollView } from './ControlledScrollView-BlOaxcsN.js';
+
+const ScrollList = (props) => {
+  const {
+    children,
+    keyboard = false,
+    onContentHeightChange,
+    onItemHeightChange,
+    onScroll,
+    onViewportSizeChange,
+    overscan,
+    ref,
+    scrollAlignment = "auto",
+    selectedIndex,
+    vimBindings = false,
+    virtualize,
+    ...boxProps
+  } = props;
+  const scrollViewRef = useRef(null);
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const scrollOffsetRef = useRef(0);
+  useEffect(() => {
+    scrollOffsetRef.current = scrollOffset;
+  }, [scrollOffset]);
+  const updateScroll = useCallback(
+    (newOffset) => {
+      if (newOffset !== scrollOffsetRef.current) {
+        setScrollOffset(newOffset);
+        onScroll?.(newOffset);
+      }
+    },
+    [onScroll]
+  );
+  const selectedIndexRef = useRef(selectedIndex);
+  selectedIndexRef.current = selectedIndex;
+  const getSelectionVisibleBounds = useCallback(() => {
+    const currentSelectedIndex = selectedIndexRef.current;
+    if (currentSelectedIndex === void 0 || currentSelectedIndex < 0) {
+      return null;
+    }
+    const position = scrollViewRef.current?.getItemPosition(currentSelectedIndex);
+    if (!position) {
+      return null;
+    }
+    const viewportHeight = scrollViewRef.current?.getViewportHeight() ?? 0;
+    const contentHeight = scrollViewRef.current?.getContentHeight() ?? 0;
+    let minOffset = position.top + position.height - viewportHeight;
+    let maxOffset = position.top;
+    if (minOffset > maxOffset) {
+      [minOffset, maxOffset] = [maxOffset, minOffset];
+    }
+    const globalMaxScroll = Math.max(0, contentHeight - viewportHeight);
+    return {
+      max: Math.min(globalMaxScroll, maxOffset),
+      min: Math.max(0, minOffset)
+    };
+  }, []);
+  const clampToSelectionBounds = useCallback(
+    (targetOffset) => {
+      const contentHeight = scrollViewRef.current?.getContentHeight() ?? 0;
+      const viewportHeight = scrollViewRef.current?.getViewportHeight() ?? 0;
+      const globalMaxScroll = Math.max(0, contentHeight - viewportHeight);
+      let clampedOffset = Math.max(0, Math.min(targetOffset, globalMaxScroll));
+      const selectionBounds = getSelectionVisibleBounds();
+      if (selectionBounds) {
+        clampedOffset = Math.max(selectionBounds.min, Math.min(clampedOffset, selectionBounds.max));
+      }
+      return clampedOffset;
+    },
+    [getSelectionVisibleBounds]
+  );
+  const getConstrainedScrollOffset = useCallback((index, currentOffset, mode, viewportHeightOverride) => {
+    const position = scrollViewRef.current?.getItemPosition(index);
+    if (!position) {
+      return currentOffset;
+    }
+    const viewportHeight = viewportHeightOverride ?? scrollViewRef.current?.getViewportHeight() ?? 0;
+    const contentHeight = scrollViewRef.current?.getContentHeight() ?? 0;
+    let target = currentOffset;
+    switch (mode) {
+      case "bottom": {
+        target = position.top + position.height - viewportHeight;
+        break;
+      }
+      case "center": {
+        target = position.top + position.height / 2 - viewportHeight / 2;
+        break;
+      }
+      case "top": {
+        target = position.top;
+        break;
+      }
+      default: {
+        const itemBottom = position.top + position.height;
+        const isFillingViewport = position.top <= currentOffset && itemBottom >= currentOffset + viewportHeight;
+        if (isFillingViewport) {
+          target = currentOffset;
+        } else if (position.top < currentOffset) {
+          target = position.top;
+        } else if (itemBottom > currentOffset + viewportHeight) {
+          target = itemBottom - viewportHeight;
+        }
+      }
+    }
+    const maxScroll = Math.max(0, contentHeight - viewportHeight);
+    return Math.max(0, Math.min(target, maxScroll));
+  }, []);
+  let renderScrollOffset = scrollOffset;
+  if (selectedIndex !== void 0 && selectedIndex >= 0) {
+    renderScrollOffset = getConstrainedScrollOffset(selectedIndex, scrollOffset, scrollAlignment);
+  }
+  useEffect(() => {
+    if (renderScrollOffset !== scrollOffset) {
+      updateScroll(renderScrollOffset);
+    }
+  }, [renderScrollOffset, scrollOffset, updateScroll]);
+  const handleViewportSizeChange = useCallback(
+    (size, previousSize) => {
+      if (selectedIndexRef.current !== void 0 && selectedIndexRef.current >= 0) {
+        const newOffset = getConstrainedScrollOffset(selectedIndexRef.current, scrollOffset, scrollAlignment, size.height);
+        updateScroll(newOffset);
+      }
+      onViewportSizeChange?.(size, previousSize);
+    },
+    [onViewportSizeChange, getConstrainedScrollOffset, scrollOffset, scrollAlignment, updateScroll]
+  );
+  const handleItemHeightChange = useCallback(
+    (index, height, previousHeight) => {
+      const currentSelectedIndex = selectedIndexRef.current;
+      if (currentSelectedIndex !== void 0 && currentSelectedIndex >= 0) {
+        if (index < currentSelectedIndex) {
+          const newOffset = clampToSelectionBounds(scrollOffset + (height - previousHeight));
+          updateScroll(newOffset);
+        } else if (index === currentSelectedIndex) {
+          const newOffset = getConstrainedScrollOffset(index, scrollOffset, scrollAlignment);
+          updateScroll(newOffset);
+        }
+      }
+      onItemHeightChange?.(index, height, previousHeight);
+    },
+    [onItemHeightChange, getConstrainedScrollOffset, scrollAlignment, scrollOffset, clampToSelectionBounds, updateScroll]
+  );
+  const handleContentHeightChange = useCallback(
+    (height, previousHeight) => {
+      if (selectedIndexRef.current !== void 0 && selectedIndexRef.current >= 0) {
+        const newOffset = getConstrainedScrollOffset(selectedIndexRef.current, scrollOffset, scrollAlignment);
+        updateScroll(newOffset);
+      }
+      onContentHeightChange?.(height, previousHeight);
+    },
+    [onContentHeightChange, getConstrainedScrollOffset, scrollOffset, scrollAlignment, updateScroll]
+  );
+  const viewportHeightRef = useRef(0);
+  const scrollByImperative = useCallback(
+    (delta) => {
+      const currentOffset = scrollOffsetRef.current;
+      const clampedY = clampToSelectionBounds(currentOffset + delta);
+      updateScroll(clampedY);
+    },
+    [clampToSelectionBounds, updateScroll]
+  );
+  const scrollToBottomImperative = useCallback(() => {
+    const contentHeight = scrollViewRef.current?.getContentHeight() ?? 0;
+    const viewportHeight = scrollViewRef.current?.getViewportHeight() ?? 0;
+    const maxScroll = Math.max(0, contentHeight - viewportHeight);
+    const clampedY = clampToSelectionBounds(maxScroll);
+    updateScroll(clampedY);
+  }, [clampToSelectionBounds, updateScroll]);
+  const scrollToTopImperative = useCallback(() => {
+    const clampedY = clampToSelectionBounds(0);
+    updateScroll(clampedY);
+  }, [clampToSelectionBounds, updateScroll]);
+  const getViewportHeight = useCallback(() => viewportHeightRef.current, []);
+  useScrollInput({
+    getViewportHeight,
+    isActive: keyboard,
+    scrollBy: scrollByImperative,
+    scrollToBottom: scrollToBottomImperative,
+    scrollToTop: scrollToTopImperative,
+    vimBindings
+  });
+  useImperativeHandle(ref, () => {
+    return {
+      getBottomOffset: () => scrollViewRef.current?.getBottomOffset() ?? 0,
+      getContentHeight: () => scrollViewRef.current?.getContentHeight() ?? 0,
+      getItemHeight: (index) => scrollViewRef.current?.getItemHeight(index) ?? 0,
+      getItemPosition: (index) => scrollViewRef.current?.getItemPosition(index) ?? null,
+      getScrollOffset: () => scrollOffsetRef.current,
+      getViewportHeight: () => scrollViewRef.current?.getViewportHeight() ?? 0,
+      remeasure: () => scrollViewRef.current?.remeasure(),
+      remeasureItem: (index) => scrollViewRef.current?.remeasureItem(index),
+      scrollBy: scrollByImperative,
+      scrollTo: (y) => {
+        const clampedY = clampToSelectionBounds(y);
+        updateScroll(clampedY);
+      },
+      scrollToBottom: scrollToBottomImperative,
+      scrollToTop: scrollToTopImperative
+    };
+  }, [clampToSelectionBounds, updateScroll, scrollByImperative, scrollToBottomImperative, scrollToTopImperative]);
+  const handleViewportSizeChangeWithTracking = useCallback(
+    (size, previousSize) => {
+      viewportHeightRef.current = size.height;
+      handleViewportSizeChange(size, previousSize);
+    },
+    [handleViewportSizeChange]
+  );
+  return jsx(
+    ControlledScrollView,
+    {
+      onContentHeightChange: handleContentHeightChange,
+      onItemHeightChange: handleItemHeightChange,
+      onViewportSizeChange: handleViewportSizeChangeWithTracking,
+      overscan,
+      ref: scrollViewRef,
+      scrollOffset: renderScrollOffset,
+      virtualize,
+      ...boxProps,
+      children
+    }
+  );
+};
+
+export { ScrollList };

package/dist/packem_shared/ScrollView-v3MCNIyX.js

@@ -0,0 +1,196 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useImperativeHandle } from 'react';
+import useScrollInput from './useScrollInput-D3CpBq_a.js';
+import Box from './Box-D_pSJ9Jp.js';
+import { u as useStateRef, C as ControlledScrollView } from './ControlledScrollView-BlOaxcsN.js';
+import { ScrollBar } from './ScrollBar-EWAs2Uc7.js';
+
+const ScrollView = ({
+  children,
+  debug = false,
+  followOutput = false,
+  followThreshold = 3,
+  keyboard = false,
+  onContentHeightChange,
+  onItemHeightChange,
+  onReachEnd,
+  onReachStart,
+  onScroll,
+  onViewportSizeChange,
+  overscan,
+  reachThreshold = 5,
+  ref,
+  scrollbar = false,
+  scrollbarColor,
+  scrollbarStyle: scrollbarStyleProp = "line",
+  vimBindings = false,
+  virtualize,
+  ...boxProps
+}) => {
+  const [scrollOffset, setScrollOffset, getScrollOffset] = useStateRef(0);
+  const innerRef = useRef(null);
+  const contentHeightRef = useRef(0);
+  const viewportHeightRef = useRef(0);
+  const [scrollbarContentHeight, setScrollbarContentHeight] = useState(0);
+  const [scrollbarViewportHeight, setScrollbarViewportHeight] = useState(0);
+  const reachEndFiredRef = useRef(false);
+  const reachStartFiredRef = useRef(false);
+  const getBottomOffset = useCallback(() => Math.max(0, contentHeightRef.current - viewportHeightRef.current), []);
+  const checkReachBounds = useCallback(
+    (offset) => {
+      const bottomOffset = getBottomOffset();
+      if (onReachEnd && offset >= bottomOffset - reachThreshold && !reachEndFiredRef.current) {
+        reachEndFiredRef.current = true;
+        onReachEnd();
+      } else if (offset < bottomOffset - reachThreshold) {
+        reachEndFiredRef.current = false;
+      }
+      if (onReachStart && offset <= reachThreshold && !reachStartFiredRef.current) {
+        reachStartFiredRef.current = true;
+        onReachStart();
+      } else if (offset > reachThreshold) {
+        reachStartFiredRef.current = false;
+      }
+    },
+    [onReachEnd, onReachStart, reachThreshold, getBottomOffset]
+  );
+  const applyScroll = useCallback(
+    (newOffset) => {
+      if (newOffset !== getScrollOffset()) {
+        setScrollOffset(newOffset);
+        onScroll?.(newOffset);
+        checkReachBounds(newOffset);
+      }
+    },
+    [getScrollOffset, setScrollOffset, onScroll, checkReachBounds]
+  );
+  const handleContentHeightChange = useCallback(
+    (height, previousHeight) => {
+      const wasAtBottom = getScrollOffset() >= getBottomOffset() - followThreshold;
+      contentHeightRef.current = height;
+      setScrollbarContentHeight(height);
+      onContentHeightChange?.(height, previousHeight);
+      if (followOutput && wasAtBottom && height > previousHeight) {
+        const newBottom = Math.max(0, height - viewportHeightRef.current);
+        applyScroll(newBottom);
+      } else {
+        const maxOffset = Math.max(0, height - viewportHeightRef.current);
+        if (getScrollOffset() > maxOffset) {
+          applyScroll(maxOffset);
+        }
+      }
+    },
+    [onContentHeightChange, followOutput, followThreshold, getScrollOffset, getBottomOffset, applyScroll]
+  );
+  const handleViewportSizeChange = useCallback(
+    (size, previousSize) => {
+      viewportHeightRef.current = size.height;
+      setScrollbarViewportHeight(size.height);
+      onViewportSizeChange?.(size, previousSize);
+    },
+    [onViewportSizeChange]
+  );
+  const scrollByImperative = useCallback(
+    (delta) => {
+      if (typeof delta !== "number" || Number.isNaN(delta)) {
+        return;
+      }
+      const maxOffset = Math.max(0, contentHeightRef.current - viewportHeightRef.current);
+      const newScrollTop = Math.max(0, Math.min(getScrollOffset() + delta, maxOffset));
+      applyScroll(newScrollTop);
+    },
+    [getScrollOffset, applyScroll]
+  );
+  const scrollToImperative = useCallback(
+    (offset) => {
+      if (typeof offset !== "number" || Number.isNaN(offset)) {
+        return;
+      }
+      const maxOffset = Math.max(0, contentHeightRef.current - viewportHeightRef.current);
+      const newScrollTop = Math.max(0, Math.min(offset, maxOffset));
+      applyScroll(newScrollTop);
+    },
+    [applyScroll]
+  );
+  const scrollToBottomImperative = useCallback(() => {
+    const bottomOffset = getBottomOffset();
+    applyScroll(bottomOffset);
+  }, [getBottomOffset, applyScroll]);
+  const scrollToTopImperative = useCallback(() => {
+    applyScroll(0);
+  }, [applyScroll]);
+  const getViewportHeight = useCallback(() => viewportHeightRef.current, []);
+  useScrollInput({
+    getViewportHeight,
+    isActive: keyboard,
+    scrollBy: scrollByImperative,
+    scrollToBottom: scrollToBottomImperative,
+    scrollToTop: scrollToTopImperative,
+    vimBindings
+  });
+  useImperativeHandle(ref, () => {
+    return {
+      getBottomOffset,
+      getContentHeight: () => contentHeightRef.current,
+      getItemHeight: (index) => innerRef.current?.getItemHeight(index) ?? 0,
+      getItemPosition: (index) => innerRef.current?.getItemPosition(index) ?? null,
+      getScrollOffset,
+      getViewportHeight: () => viewportHeightRef.current,
+      remeasure: () => innerRef.current?.remeasure(),
+      remeasureItem: (index) => innerRef.current?.remeasureItem(index),
+      scrollBy: scrollByImperative,
+      scrollTo: scrollToImperative,
+      scrollToBottom: scrollToBottomImperative,
+      scrollToTop: scrollToTopImperative
+    };
+  }, [getBottomOffset, getScrollOffset, scrollByImperative, scrollToImperative, scrollToBottomImperative, scrollToTopImperative]);
+  const showScrollbar = scrollbar && scrollbarContentHeight > scrollbarViewportHeight && scrollbarViewportHeight > 0;
+  if (showScrollbar) {
+    return jsxs(Box, { flexDirection: "row", flexGrow: boxProps.flexGrow, flexShrink: boxProps.flexShrink, overflow: "hidden", children: [
+      jsx(
+        ControlledScrollView,
+        {
+          children,
+          debug,
+          onContentHeightChange: handleContentHeightChange,
+          onItemHeightChange,
+          onViewportSizeChange: handleViewportSizeChange,
+          overscan,
+          ref: innerRef,
+          scrollOffset,
+          virtualize,
+          ...boxProps,
+          flexGrow: 1
+        }
+      ),
+      jsx(
+        ScrollBar,
+        {
+          color: scrollbarColor,
+          contentHeight: scrollbarContentHeight,
+          placement: "inset",
+          scrollOffset,
+          style: scrollbarStyleProp,
+          viewportHeight: scrollbarViewportHeight
+        }
+      )
+    ] });
+  }
+  return jsx(
+    ControlledScrollView,
+    {
+      children,
+      debug,
+      onContentHeightChange: handleContentHeightChange,
+      onItemHeightChange,
+      onViewportSizeChange: handleViewportSizeChange,
+      overscan,
+      ref: innerRef,
+      scrollOffset,
+      virtualize,
+      ...boxProps
+    }
+  );
+};
+
+export { ScrollView };