@visulima/tui 0.0.1 → 1.0.0-alpha.2

package/dist/packem_shared/ControlledScrollView-BlOaxcsN.js

@@ -0,0 +1,286 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useLayoutEffect, isValidElement, useImperativeHandle, Fragment } from 'react';
+import { m as measureElement } from './measure-element-Reza_yfC.js';
+import Box from './Box-D_pSJ9Jp.js';
+
+const useStateRef = (initialValue) => {
+  const [state, setStateInternal] = useState(initialValue);
+  const ref = useRef(initialValue);
+  const setState = useCallback((update) => {
+    const nextValue = typeof update === "function" ? update(ref.current) : update;
+    ref.current = nextValue;
+    setStateInternal(nextValue);
+  }, []);
+  const getState = useCallback(() => ref.current, []);
+  return [state, setState, getState];
+};
+
+const MeasurableItem = ({
+  children,
+  index,
+  measureKey,
+  onMeasure,
+  width
+}) => {
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    if (ref.current) {
+      const { height } = measureElement(ref.current);
+      onMeasure(index, height);
+    }
+  }, [index, onMeasure, width, measureKey, children]);
+  return jsx(Box, { flexDirection: "column", flexShrink: 0, ref, width: "100%", children });
+};
+const toChildArray = (children) => {
+  if (children == null) {
+    return [];
+  }
+  if (Array.isArray(children)) {
+    const result = [];
+    for (let index = 0; index < children.length; index += 1) {
+      const child = children[index];
+      if (isValidElement(child) && child.type === Fragment) {
+        result.push(...toChildArray(child.props.children));
+      } else {
+        result.push(child);
+      }
+    }
+    return result;
+  }
+  if (isValidElement(children) && children.type === Fragment) {
+    return toChildArray(children.props.children);
+  }
+  return [children];
+};
+const ControlledScrollView = ({
+  children,
+  debug = false,
+  onContentHeightChange,
+  onItemHeightChange,
+  onViewportSizeChange,
+  overscan = 3,
+  ref,
+  scrollOffset,
+  virtualize = false,
+  ...boxProps
+}) => {
+  const hasMeasuredRef = useRef(false);
+  const [viewportSize, setViewportSize, getViewportSize] = useStateRef({
+    height: 0,
+    width: 0
+  });
+  const [contentHeight, setContentHeight, getContentHeight] = useStateRef(0);
+  const [itemMeasureKeys, setItemMeasureKeys] = useState({});
+  const viewportRef = useRef(null);
+  const previousContentHeightRef = useRef(0);
+  useLayoutEffect(() => {
+    if (contentHeight !== previousContentHeightRef.current) {
+      onContentHeightChange?.(contentHeight, previousContentHeightRef.current);
+      previousContentHeightRef.current = contentHeight;
+    }
+  }, [contentHeight, onContentHeightChange]);
+  const itemHeightsRef = useRef({});
+  const itemKeysRef = useRef([]);
+  const itemOffsetsRef = useRef([]);
+  const firstInvalidOffsetIndexRef = useRef(0);
+  const handleItemMeasure = useCallback(
+    (index, height) => {
+      const key = itemKeysRef.current[index] ?? index;
+      if (itemHeightsRef.current[key] !== height) {
+        const previousHeight = itemHeightsRef.current[key] ?? 0;
+        itemHeightsRef.current = {
+          ...itemHeightsRef.current,
+          [key]: height
+        };
+        let newTotalHeight = 0;
+        for (let i = 0; i < itemKeysRef.current.length; i += 1) {
+          const itemKey = itemKeysRef.current[i];
+          if (itemKey != null) {
+            newTotalHeight += itemHeightsRef.current[itemKey] ?? 0;
+          }
+        }
+        const currentHeight = getContentHeight();
+        if (newTotalHeight !== currentHeight) {
+          setContentHeight(newTotalHeight);
+        }
+        onItemHeightChange?.(index, height, previousHeight);
+        firstInvalidOffsetIndexRef.current = Math.min(firstInvalidOffsetIndexRef.current, index + 1);
+      }
+    },
+    [onItemHeightChange, getContentHeight, setContentHeight]
+  );
+  const measureViewport = useCallback(() => {
+    if (viewportRef.current) {
+      const { height, width } = measureElement(viewportRef.current);
+      const currentSize = getViewportSize();
+      if (width !== currentSize.width || height !== currentSize.height) {
+        onViewportSizeChange?.({ height, width }, currentSize);
+        setViewportSize({ height, width });
+      }
+    }
+  }, [viewportRef, onViewportSizeChange, getViewportSize, setViewportSize]);
+  useLayoutEffect(() => {
+    measureViewport();
+  });
+  const previousChildrenRef = useRef(null);
+  if (previousChildrenRef.current !== children) {
+    previousChildrenRef.current = children;
+    const newItemKeys = [];
+    const newItemHeights = {};
+    const childArray2 = toChildArray(children);
+    childArray2.forEach((child, index) => {
+      if (!child) {
+        return;
+      }
+      const key = isValidElement(child) ? child.key : null;
+      const effectiveKey = key ?? index;
+      newItemKeys[index] = effectiveKey;
+      const itemHeight = itemHeightsRef.current[effectiveKey] ?? 0;
+      newItemHeights[effectiveKey] = itemHeight;
+    });
+    itemHeightsRef.current = newItemHeights;
+    itemKeysRef.current = newItemKeys;
+    itemOffsetsRef.current = Array.from({ length: newItemKeys.length }).fill(0);
+    firstInvalidOffsetIndexRef.current = 0;
+    let newTotalHeight = 0;
+    newItemKeys.forEach((itemKey) => {
+      newTotalHeight += newItemHeights[itemKey] ?? 0;
+    });
+    const currentHeight = getContentHeight();
+    if (newTotalHeight !== currentHeight) {
+      setContentHeight(newTotalHeight);
+    }
+  }
+  useImperativeHandle(ref, () => {
+    return {
+      getBottomOffset: () => Math.max(0, getContentHeight() - getViewportSize().height),
+      getContentHeight,
+      getItemHeight: (index) => {
+        const key = itemKeysRef.current[index] ?? index;
+        return itemHeightsRef.current[key] ?? 0;
+      },
+      getItemPosition: (index) => {
+        if (index < 0 || index >= itemKeysRef.current.length) {
+          return null;
+        }
+        if (index >= firstInvalidOffsetIndexRef.current) {
+          let currentOffset = 0;
+          let startIndex = 0;
+          if (firstInvalidOffsetIndexRef.current > 0) {
+            startIndex = firstInvalidOffsetIndexRef.current;
+            const previousIndex = startIndex - 1;
+            const previousKey = itemKeysRef.current[previousIndex] ?? previousIndex;
+            const previousHeight = itemHeightsRef.current[previousKey] ?? 0;
+            currentOffset = (itemOffsetsRef.current[previousIndex] ?? 0) + previousHeight;
+          }
+          for (let i = startIndex; i <= index; i += 1) {
+            itemOffsetsRef.current[i] = currentOffset;
+            const key2 = itemKeysRef.current[i] ?? i;
+            const height2 = itemHeightsRef.current[key2] ?? 0;
+            currentOffset += height2;
+          }
+          firstInvalidOffsetIndexRef.current = index + 1;
+        }
+        const top = itemOffsetsRef.current[index] ?? 0;
+        const key = itemKeysRef.current[index] ?? index;
+        const height = itemHeightsRef.current[key] ?? 0;
+        return { height, top };
+      },
+      getViewportHeight: () => getViewportSize().height,
+      remeasure: measureViewport,
+      remeasureItem: (index) => {
+        setItemMeasureKeys((previous) => {
+          return {
+            ...previous,
+            [index]: (previous[index] ?? 0) + 1
+          };
+        });
+      }
+    };
+  }, [measureViewport, getContentHeight, getViewportSize, setItemMeasureKeys]);
+  const childArray = toChildArray(children);
+  if (!hasMeasuredRef.current && contentHeight > 0) {
+    hasMeasuredRef.current = true;
+  }
+  let firstRenderIndex = 0;
+  let lastRenderIndex = childArray.length - 1;
+  let aboveSpacerHeight = 0;
+  let belowSpacerHeight = 0;
+  const allItemsMeasured = childArray.length > 0 && childArray.every((_, index) => {
+    const key = itemKeysRef.current[index] ?? index;
+    return (itemHeightsRef.current[key] ?? 0) > 0;
+  });
+  const shouldVirtualize = virtualize && hasMeasuredRef.current && allItemsMeasured;
+  if (shouldVirtualize) {
+    const totalItems = itemKeysRef.current.length;
+    if (firstInvalidOffsetIndexRef.current < totalItems) {
+      let currentOffset = 0;
+      let startIndex = 0;
+      if (firstInvalidOffsetIndexRef.current > 0) {
+        startIndex = firstInvalidOffsetIndexRef.current;
+        const previousIndex = startIndex - 1;
+        const previousKey = itemKeysRef.current[previousIndex] ?? previousIndex;
+        const previousHeight = itemHeightsRef.current[previousKey] ?? 0;
+        currentOffset = (itemOffsetsRef.current[previousIndex] ?? 0) + previousHeight;
+      }
+      for (let i = startIndex; i < totalItems; i += 1) {
+        itemOffsetsRef.current[i] = currentOffset;
+        const key = itemKeysRef.current[i] ?? i;
+        currentOffset += itemHeightsRef.current[key] ?? 0;
+      }
+      firstInvalidOffsetIndexRef.current = totalItems;
+    }
+    const viewEnd = scrollOffset + viewportSize.height;
+    firstRenderIndex = childArray.length;
+    lastRenderIndex = -1;
+    for (let i = 0; i < totalItems; i += 1) {
+      const itemTop = itemOffsetsRef.current[i] ?? 0;
+      const key = itemKeysRef.current[i] ?? i;
+      const itemHeight = itemHeightsRef.current[key] ?? 0;
+      const itemBottom = itemTop + itemHeight;
+      if (itemBottom > scrollOffset && itemTop < viewEnd) {
+        if (i < firstRenderIndex) {
+          firstRenderIndex = i;
+        }
+        lastRenderIndex = i;
+      }
+    }
+    if (firstRenderIndex > lastRenderIndex) {
+      firstRenderIndex = 0;
+      lastRenderIndex = -1;
+    }
+    firstRenderIndex = Math.max(0, firstRenderIndex - overscan);
+    lastRenderIndex = Math.min(childArray.length - 1, Math.max(-1, lastRenderIndex) + overscan);
+    aboveSpacerHeight = itemOffsetsRef.current[firstRenderIndex] ?? 0;
+    if (lastRenderIndex < childArray.length - 1) {
+      const lastKey = itemKeysRef.current[lastRenderIndex] ?? lastRenderIndex;
+      const lastItemBottom = (itemOffsetsRef.current[lastRenderIndex] ?? 0) + (itemHeightsRef.current[lastKey] ?? 0);
+      belowSpacerHeight = contentHeight - lastItemBottom;
+    }
+  }
+  return jsx(Box, { ...boxProps, children: jsx(Box, { ref: viewportRef, width: "100%", children: jsx(Box, { overflow: debug ? void 0 : "hidden", width: "100%", children: jsxs(Box, { flexDirection: "column", marginTop: -scrollOffset, width: "100%", children: [
+    shouldVirtualize && aboveSpacerHeight > 0 && jsx(Box, { height: aboveSpacerHeight }),
+    childArray.map((child, index) => {
+      if (!child) {
+        return null;
+      }
+      if (shouldVirtualize && (index < firstRenderIndex || index > lastRenderIndex)) {
+        return null;
+      }
+      return jsx(
+        MeasurableItem,
+        {
+          index,
+          measureKey: itemMeasureKeys[index],
+          onMeasure: handleItemMeasure,
+          width: viewportSize.width,
+          children: child
+        },
+        isValidElement(child) ? child.key ?? index : index
+      );
+    }),
+    shouldVirtualize && belowSpacerHeight > 0 && jsx(Box, { height: belowSpacerHeight })
+  ] }) }) }) });
+};
+
+export { ControlledScrollView as C, useStateRef as u };

package/dist/packem_shared/ControlledScrollView-DfAhcufF.js

@@ -0,0 +1,5 @@
+import 'react/jsx-runtime';
+import 'react';
+import './measure-element-Reza_yfC.js';
+import './Box-D_pSJ9Jp.js';
+export { C as ControlledScrollView } from './ControlledScrollView-BlOaxcsN.js';

package/dist/packem_shared/Cursor-DiW7YoSK.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+
+function Cursor({ anchorRef, x = 0, y = 0 }) {
+  const normalizedAnchorReference = anchorRef ?? void 0;
+  const isInline = normalizedAnchorReference === void 0 && x === 0 && y === 0;
+  const internalCursor = useMemo(() => {
+    return {
+      anchorRef: normalizedAnchorReference,
+      inline: isInline,
+      x,
+      y
+    };
+  }, [normalizedAnchorReference, isInline, x, y]);
+  return jsx("ink-cursor", { internal_cursor: internalCursor });
+}
+
+export { Cursor as default };

package/dist/packem_shared/CursorContext-JxRzlqAx.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+const CursorContext = createContext({
+  setCursorPosition() {
+  }
+});
+CursorContext.displayName = "InternalCursorContext";
+
+export { CursorContext as C };

package/dist/packem_shared/DevTools-aMPIsaHx.js

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { useWindowSize, useTuiContext } from './TuiContext-CqEjMyXd.js';
+import { _Box, _Spacer, _Text } from './render-Bpjhf0lD.js';
+
+function useFpsCounter() {
+  const { app } = useTuiContext();
+  const [fps, setFps] = useState(0);
+  const frames = useRef(0);
+  const windowStart = useRef(Date.now());
+  const idleTimer = useRef(null);
+  useEffect(() => {
+    const onRender = () => {
+      if (idleTimer.current)
+        clearTimeout(idleTimer.current);
+      idleTimer.current = setTimeout(() => {
+        setFps(0);
+        frames.current = 0;
+        windowStart.current = Date.now();
+      }, 2e3);
+      frames.current++;
+      const now = Date.now();
+      const elapsed = now - windowStart.current;
+      if (elapsed >= 500) {
+        setFps(Math.round(frames.current / elapsed * 1e3));
+        frames.current = 0;
+        windowStart.current = now;
+      }
+    };
+    const unsub = app.onBeforeFlush(() => {
+      onRender();
+    });
+    return () => {
+      unsub();
+      if (idleTimer.current)
+        clearTimeout(idleTimer.current);
+    };
+  }, [app]);
+  return fps;
+}
+const FpsHud = ({ fps }) => {
+  const label = fps === 0 ? "--" : String(fps);
+  return jsx(_Box, { borderColor: "gray", borderStyle: "round", paddingX: 1, children: jsxs(_Text, { dim: true, children: [
+    label,
+    " ",
+    "updates/sec"
+  ] }) });
+};
+const DevTools = ({ children, enabled = true }) => {
+  const fps = useFpsCounter();
+  const { columns, rows } = useWindowSize();
+  return jsxs(_Box, { flexDirection: "column", height: rows, width: columns, children: [
+    jsx(_Box, { flexGrow: 1, children }),
+    enabled && jsxs(_Box, { flexDirection: "row", flexShrink: 0, children: [
+      jsx(_Spacer, {}),
+      jsx(FpsHud, { fps })
+    ] })
+  ] });
+};
+
+export { DevTools };

package/dist/packem_shared/Dialog-DsSNAVgC.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import useTerminalPalette from './useTerminalPalette-BaWO2c4Q.js';
+import useWindowSize from './useWindowSize-ugEmGZJm.js';
+import Box from './Box-D_pSJ9Jp.js';
+import Text from './Text-DvAUdZcK.js';
+import { ScrollView } from './ScrollView-v3MCNIyX.js';
+
+const Dialog = ({
+  backgroundColor: backgroundColorProp,
+  borderColor = "cyan",
+  borderStyle = "round",
+  children,
+  columns: columnsProp,
+  footer,
+  maxHeight: maxHeightProp = 0.8,
+  paddingX = 2,
+  paddingY = 1,
+  rows: rowsProp,
+  scrollbarStyle: scrollbarStyleProp = "block",
+  scrollRef: externalScrollRef,
+  title,
+  visible = true,
+  width = 60
+}) => {
+  const windowSize = useWindowSize();
+  const { isLoading: paletteLoading, palette } = useTerminalPalette();
+  const internalScrollRef = useRef(null);
+  const scrollViewRef = externalScrollRef ?? internalScrollRef;
+  if (!visible) {
+    return null;
+  }
+  const cols = columnsProp ?? (windowSize.columns || 80);
+  const termRows = rowsProp ?? (windowSize.rows || 24);
+  const bg = backgroundColorProp ?? (paletteLoading ? "black" : palette?.background ?? "black");
+  const resolvedMaxHeight = maxHeightProp <= 1 ? Math.floor(termRows * maxHeightProp) : Math.min(maxHeightProp, termRows - 2);
+  const titleElement = typeof title === "string" ? jsx(Box, { marginBottom: 1, children: jsx(Text, { bold: true, color: borderColor, children: title }) }) : title ?? null;
+  return jsx(Box, { alignItems: "center", height: termRows, justifyContent: "center", position: "absolute", width: cols, children: jsxs(
+    Box,
+    {
+      backgroundColor: bg,
+      borderBackgroundColor: bg,
+      borderColor,
+      borderStyle,
+      flexDirection: "column",
+      maxHeight: resolvedMaxHeight,
+      opaque: true,
+      paddingY,
+      width: Math.min(width, cols - 4),
+      children: [
+        titleElement != null && jsx(Box, { flexShrink: 0, paddingX, children: titleElement }),
+        jsx(
+          ScrollView,
+          {
+            flexGrow: 1,
+            flexShrink: 1,
+            paddingX,
+            ref: scrollViewRef,
+            scrollbar: true,
+            scrollbarColor: borderColor,
+            scrollbarStyle: scrollbarStyleProp,
+            children
+          }
+        ),
+        footer != null && jsx(Box, { alignItems: "center", flexDirection: "column", flexShrink: 0, marginTop: 1, paddingX, children: footer })
+      ]
+    }
+  ) });
+};
+
+export { Dialog as default };