@lotics/ui 2.6.1 → 3.1.0

package/src/grid/use_virtual_grid.ts

@@ -1,383 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-  GridGroup,
-  GridRow,
-  GroupPath,
-  GroupPathKey,
-  groupPathToKey,
-  RowPath,
-  useGridLayout,
-} from "./layout";
-import { RecycledColumn, RecycledRow, useColumnsRecycler, useRowsRecycler } from "./recycling";
-import { ContentOffset, useScrollToCellOffset } from "./use_scroll_to_cell";
-import { getVisibleIndexRange } from "./visibility";
-
-export interface ScrollToOffsetParams extends Partial<ContentOffset> {
-  animated?: boolean;
-}
-
-export interface ScrollToCellParams {
-  rowPath?: RowPath;
-  column?: number;
-  animated?: boolean;
-}
-
-export interface GridRef {
-  scrollToOffset: (params: ScrollToOffsetParams) => void;
-  scrollToCell: (params: ScrollToCellParams) => void;
-}
-
-interface ColumnGroup {
-  width: number;
-  columns: RecycledColumn[];
-}
-
-interface UseVirtualGridProps {
-  columns: number[];
-  collapsedRows?: GroupPathKey[] | null;
-  frozenColumnCount: number;
-  footerHeight?: number;
-  groups: GridGroup[];
-  groupHeadingHeight?: number;
-  groupSummaryHeight?: number;
-  headerHeight?: number;
-  height: number;
-  leafRowHeight: number;
-  onEndReached?: () => void;
-  /** Fires when the visible row range changes. Used for viewport-driven page loading. */
-  onVisibleRangeChange?: (rowRange: [number, number]) => void;
-  rowOverscan?: number;
-  columnOverscan?: number;
-  spacerHeight?: number;
-  width: number;
-  /** Maximum width for frozen columns. If frozen columns exceed this, they will be scaled down proportionally. */
-  maxFrozenColumnsWidth?: number;
-}
-
-export interface UseVirtualGridResult {
-  api: GridRef;
-  layout: {
-    contentHeight: number;
-    contentWidth: number;
-    frozenColumnsWidth: number;
-    scrollableColumnsWidth: number;
-    scrollViewHeight: number;
-    scrollViewWidth: number;
-    totalHeight: number;
-    headerHeight: number;
-    footerHeight: number;
-  };
-  frozenColumns: ColumnGroup;
-  scrollableColumns: ColumnGroup;
-  recycledRows: RecycledRow[];
-  rows: GridRow[];
-  scrollViewRef: React.RefObject<HTMLDivElement | null>;
-  handleScroll: (event: React.UIEvent<HTMLDivElement, UIEvent>) => void;
-  isGroupCollapsed: (groupPathKey: GroupPathKey) => boolean;
-  /** Whether the grid is scrolled horizontally (scrollX > 0) */
-  isScrolledX: boolean;
-}
-
-export function useVirtualGrid(props: UseVirtualGridProps): UseVirtualGridResult {
-  const {
-    collapsedRows = null,
-    columns,
-    frozenColumnCount,
-    footerHeight = 0,
-    groups,
-    groupHeadingHeight = 0,
-    groupSummaryHeight = 0,
-    headerHeight = 0,
-    height,
-    leafRowHeight,
-    onEndReached,
-    onVisibleRangeChange,
-    rowOverscan = 0,
-    columnOverscan = 0,
-    spacerHeight = 0,
-    width,
-    maxFrozenColumnsWidth,
-  } = props;
-
-  const scrollViewRef = useRef<HTMLDivElement | null>(null);
-  const scrollPositionRef = useRef<ContentOffset>({ x: 0, y: 0 });
-  const onEndReachedRef = useRef(onEndReached);
-  onEndReachedRef.current = onEndReached;
-  const onVisibleRangeChangeRef = useRef(onVisibleRangeChange);
-  onVisibleRangeChangeRef.current = onVisibleRangeChange;
-  const endReachedFiredRef = useRef(false);
-  const visibleRangeRef = useRef<{
-    rowRange: [number, number];
-    columnRange: [number, number];
-  } | null>(null);
-  const rafIdRef = useRef<number | null>(null);
-
-  const [visibleRange, setVisibleRange] = useState<{
-    rowRange: [number, number];
-    columnRange: [number, number];
-  } | null>(null);
-
-  const isScrolledXRef = useRef(false);
-  const [isScrolledX, setIsScrolledX] = useState(isScrolledXRef.current);
-
-  const {
-    contentHeight,
-    contentWidth,
-    frozenColumns: transformerfrozenColumns,
-    frozenColumnsWidth,
-    scrollableColumns: transformerScrollableColumns,
-    scrollableColumnsWidth,
-    rows,
-  } = useGridLayout({
-    columns,
-    frozenColumnCount,
-    groups,
-    groupHeadingHeight,
-    groupSummaryHeight,
-    leafRowHeight,
-    spacerHeight,
-    collapsedRows,
-    maxFrozenColumnsWidth,
-  });
-
-  const scrollViewHeight = useMemo(
-    () => height - headerHeight - footerHeight,
-    [height, headerHeight, footerHeight],
-  );
-  const scrollViewWidth = useMemo(() => width - frozenColumnsWidth, [width, frozenColumnsWidth]);
-  const totalHeight = useMemo(
-    () => contentHeight + headerHeight + footerHeight,
-    [contentHeight, headerHeight, footerHeight],
-  );
-
-  const calculateVisibleRanges = useCallback(() => {
-    const scrollY = scrollPositionRef.current.y;
-    const scrollX = scrollPositionRef.current.x;
-
-    const rowRange = getVisibleIndexRange({
-      items: rows,
-      getItemOffset: (row) => row.y,
-      getItemSize: (row) => row.height,
-      scrollOffset: scrollY,
-      scrollViewSize: scrollViewHeight,
-      overscan: rowOverscan,
-    });
-
-    const columnRange = getVisibleIndexRange({
-      items: transformerScrollableColumns,
-      getItemOffset: (col) => col.x,
-      getItemSize: (col) => col.width,
-      scrollOffset: scrollX,
-      scrollViewSize: scrollViewWidth,
-      overscan: columnOverscan,
-    });
-
-    return { rowRange, columnRange };
-  }, [
-    rows,
-    transformerScrollableColumns,
-    scrollViewHeight,
-    scrollViewWidth,
-    rowOverscan,
-    columnOverscan,
-  ]);
-
-  const checkAndUpdateVisibleRange = useCallback(() => {
-    const newRange = calculateVisibleRanges();
-    const prevRange = visibleRangeRef.current;
-
-    if (
-      !prevRange ||
-      prevRange.rowRange[0] !== newRange.rowRange[0] ||
-      prevRange.rowRange[1] !== newRange.rowRange[1] ||
-      prevRange.columnRange[0] !== newRange.columnRange[0] ||
-      prevRange.columnRange[1] !== newRange.columnRange[1]
-    ) {
-      visibleRangeRef.current = newRange;
-      setVisibleRange(newRange);
-      onVisibleRangeChangeRef.current?.(newRange.rowRange);
-    }
-  }, [calculateVisibleRanges]);
-
-  const frozenColumnsEndIndex = useMemo(
-    () => Math.max(0, transformerfrozenColumns.length - 1),
-    [transformerfrozenColumns.length],
-  );
-
-  const recycledRows = useRowsRecycler({
-    rows,
-    startIndex: visibleRange?.rowRange[0] ?? 0,
-    endIndex: visibleRange?.rowRange[1] ?? 0,
-  });
-
-  const recycledfrozenColumns = useColumnsRecycler({
-    columns: transformerfrozenColumns,
-    startIndex: 0,
-    endIndex: frozenColumnsEndIndex,
-  });
-
-  const recycledScrollableColumns = useColumnsRecycler({
-    columns: transformerScrollableColumns,
-    startIndex: visibleRange?.columnRange[0] ?? 0,
-    endIndex: visibleRange?.columnRange[1] ?? 0,
-  });
-
-  const scrollXForScrollToCellRef = useRef({ current: 0 });
-  const scrollYForScrollToCellRef = useRef({ current: 0 });
-
-  useEffect(() => {
-    scrollXForScrollToCellRef.current.current = scrollPositionRef.current.x;
-    scrollYForScrollToCellRef.current.current = scrollPositionRef.current.y;
-  });
-
-  const getScrollToCellOffset = useScrollToCellOffset({
-    rows,
-    frozenColumnCount,
-    columns: transformerScrollableColumns,
-    scrollViewHeight,
-    scrollViewWidth,
-    scrollX: scrollXForScrollToCellRef.current,
-    scrollY: scrollYForScrollToCellRef.current,
-  });
-
-  const handleScrollToOffset = useCallback((params: ScrollToOffsetParams) => {
-    if (scrollViewRef.current && (params.x !== undefined || params.y !== undefined)) {
-      scrollViewRef.current.scrollTo({
-        left: params.x,
-        top: params.y,
-      });
-    }
-  }, []);
-
-  const handleScroll = useCallback(
-    (event: React.UIEvent<HTMLDivElement, UIEvent>) => {
-      const el = event.currentTarget;
-      const newY = el.scrollTop;
-      const newX = el.scrollLeft;
-
-      // Skip sub-pixel scrolling
-      const deltaY = Math.abs(newY - scrollPositionRef.current.y);
-      const deltaX = Math.abs(newX - scrollPositionRef.current.x);
-      if (deltaY < 1 && deltaX < 1) {
-        return;
-      }
-
-      scrollPositionRef.current = { y: newY, x: newX };
-
-      // Update horizontal scroll state for frozen column shadow (only if changed)
-      const newIsScrolledX = newX > 0;
-      if (isScrolledXRef.current !== newIsScrolledX) {
-        isScrolledXRef.current = newIsScrolledX;
-        setIsScrolledX(newIsScrolledX);
-      }
-
-      // Fire onEndReached when scroll nears the bottom (within 200px threshold)
-      const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
-      if (distanceFromBottom < 200 && !endReachedFiredRef.current) {
-        endReachedFiredRef.current = true;
-        onEndReachedRef.current?.();
-      } else if (distanceFromBottom >= 200) {
-        endReachedFiredRef.current = false;
-      }
-
-      if (rafIdRef.current === null) {
-        rafIdRef.current = requestAnimationFrame(() => {
-          rafIdRef.current = null;
-          checkAndUpdateVisibleRange();
-        });
-      }
-    },
-    [checkAndUpdateVisibleRange],
-  );
-
-  useEffect(() => {
-    checkAndUpdateVisibleRange();
-  }, [
-    checkAndUpdateVisibleRange,
-    rows,
-    transformerScrollableColumns,
-    scrollViewHeight,
-    scrollViewWidth,
-  ]);
-
-  useEffect(() => {
-    return () => {
-      if (rafIdRef.current !== null) {
-        cancelAnimationFrame(rafIdRef.current);
-      }
-    };
-  }, []);
-
-  const api = useMemo<GridRef>(
-    () => ({
-      scrollToOffset: handleScrollToOffset,
-      scrollToCell: (params: ScrollToCellParams) =>
-        handleScrollToOffset(getScrollToCellOffset(params)),
-    }),
-    [getScrollToCellOffset, handleScrollToOffset],
-  );
-
-  const frozenColumns: ColumnGroup = useMemo(
-    () => ({
-      width: frozenColumnsWidth,
-      columns: recycledfrozenColumns,
-    }),
-    [frozenColumnsWidth, recycledfrozenColumns],
-  );
-
-  const scrollableColumns: ColumnGroup = useMemo(
-    () => ({
-      width: scrollableColumnsWidth,
-      columns: recycledScrollableColumns,
-    }),
-    [scrollableColumnsWidth, recycledScrollableColumns],
-  );
-
-  const collapsedGroupKeys = useMemo(() => {
-    if (!collapsedRows || collapsedRows.length === 0) {
-      return null;
-    }
-    return new Set(collapsedRows);
-  }, [collapsedRows]);
-
-  const isGroupCollapsed = useCallback(
-    (groupPathKey: GroupPathKey) => collapsedGroupKeys?.has(groupPathKey) ?? false,
-    [collapsedGroupKeys],
-  );
-
-  return {
-    api,
-    frozenColumns,
-    scrollableColumns,
-    recycledRows,
-    rows,
-    scrollViewRef,
-    handleScroll,
-    isGroupCollapsed,
-    isScrolledX,
-    layout: useMemo(
-      () => ({
-        contentHeight,
-        contentWidth,
-        frozenColumnsWidth,
-        scrollableColumnsWidth,
-        scrollViewHeight,
-        scrollViewWidth,
-        totalHeight,
-        headerHeight,
-        footerHeight,
-      }),
-      [
-        contentHeight,
-        contentWidth,
-        frozenColumnsWidth,
-        scrollableColumnsWidth,
-        scrollViewHeight,
-        scrollViewWidth,
-        totalHeight,
-        headerHeight,
-        footerHeight,
-      ],
-    ),
-  };
-}

package/src/grid/visibility.test.ts

@@ -1,208 +0,0 @@
-import { getVisibleIndexRange } from "./visibility";
-
-test("getVisibleIndexRange - basic visibility", () => {
-  const items = [
-    { size: 100, offset: 0 },
-    { size: 200, offset: 100 },
-    { size: 100, offset: 300 },
-    { size: 200, offset: 400 },
-    { size: 100, offset: 600 },
-    { size: 200, offset: 700 },
-  ];
-
-  const scrollViewSize = 400;
-
-  const table = [
-    [0, 0, 2],
-    [100, 1, 3],
-    [350, 2, 5],
-    [500, 3, 5],
-  ];
-
-  for (let i = 0; i < table.length; i++) {
-    const [scrollOffset, startIndex, endIndex] = table[i];
-
-    const result = getVisibleIndexRange({
-      items,
-      scrollOffset,
-      scrollViewSize,
-      getItemOffset: (column) => column.offset,
-      getItemSize: (column) => column.size,
-    });
-
-    expect(result).toEqual([startIndex, endIndex]);
-  }
-});
-
-test("getVisibleIndexRange - empty items", () => {
-  const result = getVisibleIndexRange<{ offset: number; size: number }>({
-    items: [],
-    scrollOffset: 0,
-    scrollViewSize: 400,
-    getItemOffset: (item) => item.offset,
-    getItemSize: (item) => item.size,
-  });
-
-  expect(result).toEqual([0, 0]);
-});
-
-test("getVisibleIndexRange - single item visible", () => {
-  const items = [
-    { size: 100, offset: 0 },
-    { size: 100, offset: 100 },
-    { size: 100, offset: 200 },
-  ];
-
-  const result = getVisibleIndexRange({
-    items,
-    scrollOffset: 100,
-    scrollViewSize: 100,
-    getItemOffset: (item) => item.offset,
-    getItemSize: (item) => item.size,
-  });
-
-  expect(result).toEqual([1, 1]);
-});
-
-test("getVisibleIndexRange - with overscan in middle", () => {
-  const items = [
-    { size: 100, offset: 0 },
-    { size: 100, offset: 100 },
-    { size: 100, offset: 200 },
-    { size: 100, offset: 300 },
-    { size: 100, offset: 400 },
-  ];
-
-  // In the middle: visible item is index 2 (offset 200-300)
-  // With overscan=1: should overscan backward to [1] and forward to [3]
-  const result = getVisibleIndexRange({
-    items,
-    scrollOffset: 200,
-    scrollViewSize: 100,
-    getItemOffset: (item) => item.offset,
-    getItemSize: (item) => item.size,
-    overscan: 1,
-  });
-
-  // Without overscan: [2, 2] (only item 2 visible)
-  // With overscan=1: [1, 3] (overscans 1 backward and 1 forward)
-  expect(result).toEqual([1, 3]);
-});
-
-test("getVisibleIndexRange - overscan in middle with larger overscan", () => {
-  const items = [
-    { size: 100, offset: 0 },
-    { size: 100, offset: 100 },
-    { size: 100, offset: 200 },
-    { size: 100, offset: 300 },
-    { size: 100, offset: 400 },
-    { size: 100, offset: 500 },
-  ];
-
-  // In the middle: visible item is index 2 (offset 200-300)
-  // With overscan=2: should overscan backward to [0, 1] and forward to [3, 4]
-  const result = getVisibleIndexRange({
-    items,
-    scrollOffset: 200,
-    scrollViewSize: 100,
-    getItemOffset: (item) => item.offset,
-    getItemSize: (item) => item.size,
-    overscan: 2,
-  });
-
-  // Visible: [2, 2]
-  // With overscan=2: [max(2-2, 0), min(2+2, 5)] = [0, 4]
-  expect(result).toEqual([0, 4]);
-});
-
-test("getVisibleIndexRange - overscan at boundaries", () => {
-  const items = [
-    { size: 100, offset: 0 },
-    { size: 100, offset: 100 },
-    { size: 100, offset: 200 },
-  ];
-
-  // At start - overscan forward is possible (items exist after visible range)
-  const resultStart = getVisibleIndexRange({
-    items,
-    scrollOffset: 0,
-    scrollViewSize: 100,
-    getItemOffset: (item) => item.offset,
-    getItemSize: (item) => item.size,
-    overscan: 5,
-  });
-
-  // Can't overscan backward (already at 0), but can overscan forward
-  // Visible: [0], with overscan: [0, min(0+5, 2)] = [0, 2]
-  expect(resultStart).toEqual([0, 2]);
-
-  // At end - overscan backward is possible (items exist before visible range)
-  const resultEnd = getVisibleIndexRange({
-    items,
-    scrollOffset: 200,
-    scrollViewSize: 100,
-    getItemOffset: (item) => item.offset,
-    getItemSize: (item) => item.size,
-    overscan: 5,
-  });
-
-  // Can't overscan forward (already at end), but can overscan backward
-  // Visible: [2], with overscan: [max(2-5, 0), 2] = [0, 2]
-  expect(resultEnd).toEqual([0, 2]);
-});
-
-test("getVisibleIndexRange - item spans viewport boundary", () => {
-  const items = [
-    { size: 100, offset: 0 },
-    { size: 300, offset: 100 }, // Large item that spans multiple positions
-    { size: 100, offset: 400 },
-  ];
-
-  const result = getVisibleIndexRange({
-    items,
-    scrollOffset: 50,
-    scrollViewSize: 200,
-    getItemOffset: (item) => item.offset,
-    getItemSize: (item) => item.size,
-  });
-
-  // Should include the large item that crosses the boundary
-  expect(result).toEqual([0, 1]);
-});
-
-test("getVisibleIndexRange - all items visible", () => {
-  const items = [
-    { size: 50, offset: 0 },
-    { size: 50, offset: 50 },
-    { size: 50, offset: 100 },
-  ];
-
-  const result = getVisibleIndexRange({
-    items,
-    scrollOffset: 0,
-    scrollViewSize: 200, // Larger than all items
-    getItemOffset: (item) => item.offset,
-    getItemSize: (item) => item.size,
-  });
-
-  expect(result).toEqual([0, 2]);
-});
-
-test("getVisibleIndexRange - scrolled past all items", () => {
-  const items = [
-    { size: 100, offset: 0 },
-    { size: 100, offset: 100 },
-    { size: 100, offset: 200 },
-  ];
-
-  const result = getVisibleIndexRange({
-    items,
-    scrollOffset: 500, // Way past all items
-    scrollViewSize: 100,
-    getItemOffset: (item) => item.offset,
-    getItemSize: (item) => item.size,
-  });
-
-  // Should return last item
-  expect(result).toEqual([2, 2]);
-});

package/src/grid/visibility.ts

@@ -1,77 +0,0 @@
-import { max, min } from "./helpers";
-
-interface GetVisibleIndexRangeParams<T> {
-  items: T[];
-  scrollOffset: number;
-  scrollViewSize: number;
-  getItemOffset: (item: T) => number;
-  getItemSize: (item: T) => number;
-  overscan?: number;
-}
-
-type VisibleIndexRange = [startIndex: number, endIndex: number];
-
-export function getVisibleIndexRange<T>(params: GetVisibleIndexRangeParams<T>): VisibleIndexRange {
-  const { items, scrollOffset, scrollViewSize, getItemOffset, getItemSize, overscan = 0 } = params;
-
-  if (items.length === 0) {
-    return [0, 0];
-  }
-
-  // Binary search for start index
-  let left = 0;
-  let right = items.length - 1;
-  let startIndex = 0;
-
-  while (left <= right) {
-    const mid = Math.floor((left + right) / 2);
-    const offset = getItemOffset(items[mid]);
-
-    if (offset <= scrollOffset) {
-      startIndex = mid;
-      left = mid + 1;
-    } else {
-      right = mid - 1;
-    }
-  }
-
-  // Binary search for end index
-  const scrollEnd = scrollOffset + scrollViewSize;
-  left = startIndex;
-  right = items.length - 1;
-  let endIndex = startIndex;
-
-  while (left <= right) {
-    const mid = Math.floor((left + right) / 2);
-    const item = items[mid];
-    const itemEnd = getItemOffset(item) + getItemSize(item);
-
-    if (itemEnd < scrollEnd) {
-      endIndex = mid;
-      left = mid + 1;
-    } else {
-      right = mid - 1;
-    }
-  }
-
-  // Ensure we include the item that crosses the boundary
-  if (endIndex < items.length - 1) {
-    const nextItem = items[endIndex + 1];
-    if (getItemOffset(nextItem) < scrollEnd) {
-      endIndex++;
-    }
-  }
-
-  // Apply overscan in both directions when possible
-  if (overscan > 0) {
-    if (startIndex > 0) {
-      startIndex = max(startIndex - overscan, 0);
-    }
-
-    if (endIndex < items.length - 1) {
-      endIndex = min(endIndex + overscan, items.length - 1);
-    }
-  }
-
-  return [startIndex, endIndex];
-}

package/src/kanban/constants.ts

@@ -1,18 +0,0 @@
-// Column layout
-export const DEFAULT_COLUMN_WIDTH = 280;
-export const MINIMIZED_COLUMN_WIDTH = 44;
-export const DEFAULT_COLUMN_GAP = 16;
-export const DEFAULT_ITEM_GAP = 8;
-export const COLUMN_CONTENT_PADDING = 12;
-
-// Auto-scroll behavior
-export const AUTO_SCROLL_THRESHOLD = 60;
-export const AUTO_SCROLL_SPEED = 8;
-
-// Drag detection
-export const DRAG_THRESHOLD = 5;
-
-// Touch-specific drag activation (like dnd-kit's delay activation)
-// On touch devices, require a hold before drag can start to distinguish from tap
-export const TOUCH_DRAG_DELAY = 200; // ms - hold time before drag activates on touch
-export const TOUCH_TOLERANCE = 10; // px - max movement allowed during delay period