@visulima/tui 0.0.1 → 1.0.0-alpha.2

package/dist/packem_shared/SelectInput-BN2TMyxp.js

@@ -0,0 +1,260 @@
+import { createRequire as __cjs_createRequire } from "node:module";
+
+const __cjs_require = __cjs_createRequire(import.meta.url);
+
+const __cjs_getProcess = typeof globalThis !== "undefined" && typeof globalThis.process !== "undefined" ? globalThis.process : process;
+
+const __cjs_getBuiltinModule = (module) => {
+    // Check if we're in Node.js and version supports getBuiltinModule
+    if (typeof __cjs_getProcess !== "undefined" && __cjs_getProcess.versions && __cjs_getProcess.versions.node) {
+        const [major, minor] = __cjs_getProcess.versions.node.split(".").map(Number);
+        // Node.js 20.16.0+ and 22.3.0+
+        if (major > 22 || (major === 22 && minor >= 3) || (major === 20 && minor >= 16)) {
+            return __cjs_getProcess.getBuiltinModule(module);
+        }
+    }
+    // Fallback to createRequire
+    return __cjs_require(module);
+};
+
+import { jsx, jsxs } from 'react/jsx-runtime';
+const {
+  isDeepStrictEqual
+} = __cjs_getBuiltinModule("node:util");
+import { useReducer, useRef, useMemo, useEffect, useCallback, createElement } from 'react';
+import useInput from './useInput-Cfp5zB2s.js';
+import useWindowSize from './useWindowSize-ugEmGZJm.js';
+import Box from './Box-D_pSJ9Jp.js';
+import SelectInputIndicator from './SelectInputIndicator-DkRMoH_b.js';
+import SelectInputItem from './SelectInputItem-BF9LQgKu.js';
+import Text from './Text-DvAUdZcK.js';
+
+const isSeparator = (entry) => "isSeparator" in entry && entry.isSeparator;
+const EMPTY_ITEMS = [];
+const NUMBER_KEY_PATTERN = /^[1-9]$/;
+const NO_SELECTION = -1;
+const DEFAULT_SEPARATOR_LABEL = "───";
+const SEPARATOR_SENTINEL = /* @__PURE__ */ Symbol("separator");
+const selectionReducer = (state, action) => {
+  switch (action.type) {
+    case "navigate": {
+      return { rotateIndex: action.rotateIndex, selectedIndex: action.selectedIndex };
+    }
+    case "reset": {
+      return {
+        rotateIndex: 0,
+        selectedIndex: action.hasInitialSelection ? action.initialIndex : NO_SELECTION
+      };
+    }
+    case "set": {
+      return { rotateIndex: action.selectedIndex, selectedIndex: action.selectedIndex };
+    }
+    default: {
+      return state;
+    }
+  }
+};
+const rotateArray = (array, offset) => {
+  const { length } = array;
+  if (length === 0) {
+    return [];
+  }
+  const normalizedOffset = (offset % length + length) % length;
+  return [...array.slice(normalizedOffset), ...array.slice(0, normalizedOffset)];
+};
+const getVisibleItems = (items, hasLimit, currentRotateIndex, limit) => {
+  if (hasLimit) {
+    return rotateArray(items, currentRotateIndex).slice(0, limit);
+  }
+  return items;
+};
+const findNextSelectableIndex = (entries, fromIndex, direction) => {
+  const { length } = entries;
+  for (let step = 0; step < length; step += 1) {
+    const candidate = ((fromIndex + (step + 1) * direction) % length + length) % length;
+    if (!isSeparator(entries[candidate])) {
+      return candidate;
+    }
+  }
+  return NO_SELECTION;
+};
+const resolveSelectableIndex = (entries, targetIndex) => {
+  if (targetIndex < 0 || targetIndex >= entries.length) {
+    return NO_SELECTION;
+  }
+  const entry = entries[targetIndex];
+  if (entry && !isSeparator(entry)) {
+    return targetIndex;
+  }
+  return findNextSelectableIndex(entries, targetIndex - 1, 1);
+};
+function SelectInput({
+  accentColor = "blue",
+  defaultColor,
+  index,
+  indicatorComponent = SelectInputIndicator,
+  initialIndex,
+  isFocused = true,
+  itemComponent = SelectInputItem,
+  items = EMPTY_ITEMS,
+  limit: customLimit,
+  onHighlight,
+  onSelect,
+  resetOnItemsChange = true
+}) {
+  const { rows: terminalRows } = useWindowSize();
+  const effectiveLimit = typeof customLimit === "number" ? customLimit : terminalRows;
+  const hasLimit = items.length > effectiveLimit;
+  const limit = hasLimit ? Math.min(effectiveLimit, items.length) : items.length;
+  const lastIndex = limit - 1;
+  const hasInitialSelection = typeof index === "number" || typeof initialIndex === "number";
+  const rawInitial = typeof index === "number" ? index : initialIndex ?? NO_SELECTION;
+  const resolvedInitial = rawInitial === NO_SELECTION ? NO_SELECTION : resolveSelectableIndex(items, Math.min(rawInitial, lastIndex));
+  const [state, dispatch] = useReducer(selectionReducer, {
+    rotateIndex: resolvedInitial > lastIndex ? lastIndex - resolvedInitial : 0,
+    selectedIndex: resolvedInitial
+  });
+  const hasInitialSelectionRef = useRef(hasInitialSelection);
+  const resolvedInitialRef = useRef(resolvedInitial);
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  const onSelectRef = useRef(onSelect);
+  onSelectRef.current = onSelect;
+  const previousItems = useRef(items);
+  const itemValues = useMemo(
+    () => items.map((entry) => {
+      if (isSeparator(entry)) {
+        return SEPARATOR_SENTINEL;
+      }
+      return entry.value;
+    }),
+    [items]
+  );
+  const previousItemValues = useRef(itemValues);
+  hasInitialSelectionRef.current = hasInitialSelection;
+  resolvedInitialRef.current = resolvedInitial;
+  useEffect(() => {
+    if (resetOnItemsChange && !isDeepStrictEqual(previousItemValues.current, itemValues)) {
+      dispatch({
+        hasInitialSelection: hasInitialSelectionRef.current,
+        initialIndex: resolvedInitialRef.current,
+        type: "reset"
+      });
+    }
+    previousItemValues.current = itemValues;
+    previousItems.current = items;
+  }, [items, itemValues, resetOnItemsChange]);
+  useEffect(() => {
+    if (typeof index === "number") {
+      const safeIndex = resolveSelectableIndex(items, Math.min(index, lastIndex));
+      dispatch({ selectedIndex: safeIndex === NO_SELECTION ? 0 : safeIndex, type: "set" });
+    }
+  }, [index, items, lastIndex]);
+  const handleUpArrow = useCallback(
+    (currentRotateIndex, currentSelectedIndex) => {
+      const visibleItems = getVisibleItems(items, hasLimit, currentRotateIndex, limit);
+      if (currentSelectedIndex === NO_SELECTION) {
+        const activateIndex = findNextSelectableIndex(visibleItems, 0, -1);
+        if (activateIndex === NO_SELECTION) {
+          return;
+        }
+        dispatch({ rotateIndex: currentRotateIndex, selectedIndex: activateIndex, type: "navigate" });
+        if (typeof onHighlight === "function") {
+          onHighlight(visibleItems[activateIndex], activateIndex);
+        }
+        return;
+      }
+      const currentLastIndex = (hasLimit ? limit : items.length) - 1;
+      const atFirstIndex = currentSelectedIndex === 0;
+      const rawNextIndex = atFirstIndex ? currentLastIndex : currentSelectedIndex - 1;
+      const nextRotateIndex = atFirstIndex && hasLimit ? currentRotateIndex + 1 : currentRotateIndex;
+      const nextVisibleItems = getVisibleItems(items, hasLimit, nextRotateIndex, limit);
+      const nextSelectedIndex = isSeparator(nextVisibleItems[rawNextIndex]) ? findNextSelectableIndex(nextVisibleItems, rawNextIndex, -1) : rawNextIndex;
+      if (nextSelectedIndex === NO_SELECTION) {
+        return;
+      }
+      dispatch({ rotateIndex: nextRotateIndex, selectedIndex: nextSelectedIndex, type: "navigate" });
+      if (typeof onHighlight === "function") {
+        onHighlight(nextVisibleItems[nextSelectedIndex], nextSelectedIndex);
+      }
+    },
+    [hasLimit, limit, items, onHighlight]
+  );
+  const handleDownArrow = useCallback(
+    (currentRotateIndex, currentSelectedIndex) => {
+      const visibleItems = getVisibleItems(items, hasLimit, currentRotateIndex, limit);
+      if (currentSelectedIndex === NO_SELECTION) {
+        const activateIndex = findNextSelectableIndex(visibleItems, visibleItems.length - 1, 1);
+        if (activateIndex === NO_SELECTION) {
+          return;
+        }
+        dispatch({ rotateIndex: currentRotateIndex, selectedIndex: activateIndex, type: "navigate" });
+        if (typeof onHighlight === "function") {
+          onHighlight(visibleItems[activateIndex], activateIndex);
+        }
+        return;
+      }
+      const currentLastIndex = (hasLimit ? limit : items.length) - 1;
+      const atLastIndex = currentSelectedIndex === currentLastIndex;
+      const rawNextIndex = atLastIndex ? 0 : currentSelectedIndex + 1;
+      const nextRotateIndex = atLastIndex && hasLimit ? currentRotateIndex - 1 : currentRotateIndex;
+      const nextVisibleItems = getVisibleItems(items, hasLimit, nextRotateIndex, limit);
+      const nextSelectedIndex = isSeparator(nextVisibleItems[rawNextIndex]) ? findNextSelectableIndex(nextVisibleItems, rawNextIndex, 1) : rawNextIndex;
+      if (nextSelectedIndex === NO_SELECTION) {
+        return;
+      }
+      dispatch({ rotateIndex: nextRotateIndex, selectedIndex: nextSelectedIndex, type: "navigate" });
+      if (typeof onHighlight === "function") {
+        onHighlight(nextVisibleItems[nextSelectedIndex], nextSelectedIndex);
+      }
+    },
+    [hasLimit, limit, items, onHighlight]
+  );
+  useInput(
+    useCallback(
+      (input, key) => {
+        const { rotateIndex, selectedIndex } = stateRef.current;
+        if (input === "k" || key.upArrow) {
+          handleUpArrow(rotateIndex, selectedIndex);
+        }
+        if (input === "j" || key.downArrow) {
+          handleDownArrow(rotateIndex, selectedIndex);
+        }
+        if (NUMBER_KEY_PATTERN.test(input)) {
+          const targetIndex = Number.parseInt(input, 10) - 1;
+          const visibleItems = getVisibleItems(items, hasLimit, rotateIndex, limit);
+          if (targetIndex >= 0 && targetIndex < visibleItems.length) {
+            const selectedItem = visibleItems[targetIndex];
+            if (selectedItem && !isSeparator(selectedItem)) {
+              onSelectRef.current?.(selectedItem);
+              selectedItem.action?.();
+            }
+          }
+        }
+        if (key.return && selectedIndex !== NO_SELECTION) {
+          const slicedItems2 = getVisibleItems(items, hasLimit, rotateIndex, limit);
+          const selectedItem = slicedItems2[selectedIndex];
+          if (selectedItem && !isSeparator(selectedItem)) {
+            onSelectRef.current?.(selectedItem);
+            selectedItem.action?.();
+          }
+        }
+      },
+      [handleUpArrow, handleDownArrow, hasLimit, limit, items]
+    ),
+    { isActive: isFocused }
+  );
+  const slicedItems = getVisibleItems(items, hasLimit, state.rotateIndex, limit);
+  return jsx(Box, { flexDirection: "column", children: slicedItems.map((entry, itemIndex) => {
+    if (isSeparator(entry)) {
+      return jsx(Box, { children: jsx(Text, { dimColor: true, children: entry.label ?? DEFAULT_SEPARATOR_LABEL }) }, entry.key ?? `separator-${String(itemIndex)}`);
+    }
+    const isSelected = itemIndex === state.selectedIndex;
+    return jsxs(Box, { children: [
+      createElement(indicatorComponent, { accentColor, isFocused, isSelected }),
+      createElement(itemComponent, { ...entry, accentColor, defaultColor, isFocused, isSelected })
+    ] }, entry.key ?? String(entry.value));
+  }) });
+}
+
+export { SelectInput as default };

package/dist/packem_shared/SelectInputIndicator-DkRMoH_b.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import Box from './Box-D_pSJ9Jp.js';
+import Text from './Text-DvAUdZcK.js';
+
+function SelectInputIndicator({ accentColor = "blue", isFocused = true, isSelected = false }) {
+  return jsx(Box, { marginRight: 1, children: isSelected ? jsx(Text, { color: accentColor, dimColor: !isFocused, children: "❯" }) : jsx(Text, { children: " " }) });
+}
+
+export { SelectInputIndicator as default };

package/dist/packem_shared/SelectInputItem-BF9LQgKu.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import Text from './Text-DvAUdZcK.js';
+
+function SelectInputItem({ accentColor = "blue", defaultColor, isFocused = true, isSelected = false, label }) {
+  return jsx(Text, { color: isSelected ? accentColor : defaultColor, dimColor: isSelected && !isFocused, children: label });
+}
+
+export { SelectInputItem as default };

package/dist/packem_shared/Slider-BWD7xZX6.js

@@ -0,0 +1,116 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useCallback } from 'react';
+import useInput from './useInput-Cfp5zB2s.js';
+import Box from './Box-D_pSJ9Jp.js';
+import Text from './Text-DvAUdZcK.js';
+
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+function Slider({
+  accentColor = "green",
+  defaultColor = "gray",
+  defaultValue = 0,
+  emptyCharacter = "░",
+  filledCharacter = "█",
+  isDisabled = false,
+  isFocused = true,
+  max = 100,
+  min = 0,
+  onChange,
+  orientation = "horizontal",
+  step = 1,
+  thumbCharacter = "●",
+  value: controlledValue,
+  width = 20
+}) {
+  const safeMin = Math.min(min, max);
+  const safeMax = Math.max(min, max);
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = useState(clamp(defaultValue, safeMin, safeMax));
+  const current = isControlled ? clamp(controlledValue, safeMin, safeMax) : internalValue;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const currentRef = useRef(current);
+  currentRef.current = current;
+  const setValue = useCallback(
+    (next) => {
+      const clamped = clamp(next, safeMin, safeMax);
+      if (!isControlled) {
+        setInternalValue(clamped);
+      }
+      onChangeRef.current?.(clamped);
+    },
+    [safeMin, safeMax, isControlled]
+  );
+  const largeStep = step * 10;
+  const range = safeMax - safeMin;
+  const inputHandler = useCallback(
+    (input, key) => {
+      const isForward = orientation === "horizontal" ? key.rightArrow : key.upArrow;
+      const isBackward = orientation === "horizontal" ? key.leftArrow : key.downArrow;
+      if (isForward) {
+        setValue(currentRef.current + step);
+        return;
+      }
+      if (isBackward) {
+        setValue(currentRef.current - step);
+        return;
+      }
+      if (key.pageUp) {
+        setValue(currentRef.current + largeStep);
+        return;
+      }
+      if (key.pageDown) {
+        setValue(currentRef.current - largeStep);
+        return;
+      }
+      if (key.home) {
+        setValue(safeMin);
+        return;
+      }
+      if (key.end) {
+        setValue(safeMax);
+        return;
+      }
+      if (input >= "0" && input <= "9") {
+        const percent = Number.parseInt(input, 10) / 10;
+        setValue(safeMin + range * percent);
+      }
+    },
+    [step, largeStep, safeMin, safeMax, range, orientation, setValue]
+  );
+  useInput(inputHandler, { isActive: isFocused && !isDisabled });
+  const trackSize = Math.max(1, width);
+  const ratio = range === 0 ? 0 : (current - safeMin) / range;
+  const thumbPos = Math.round(ratio * (trackSize - 1));
+  if (orientation === "vertical") {
+    const rows = [];
+    for (let index = trackSize - 1; index >= 0; index--) {
+      const isThumb = index === thumbPos;
+      const isFilled = index <= thumbPos;
+      rows.push(
+        jsx(Box, { children: jsx(Text, { color: isDisabled ? void 0 : isFilled ? accentColor : defaultColor, dimColor: isDisabled, children: isThumb ? thumbCharacter : isFilled ? filledCharacter : emptyCharacter }) }, index)
+      );
+    }
+    return jsx(Box, { flexDirection: "column", children: rows });
+  }
+  let track = "";
+  for (let index = 0; index < trackSize; index++) {
+    if (index === thumbPos) {
+      track += thumbCharacter;
+    } else if (index < thumbPos) {
+      track += filledCharacter;
+    } else {
+      track += emptyCharacter;
+    }
+  }
+  const filledPart = track.slice(0, thumbPos);
+  const thumb = track[thumbPos] ?? "";
+  const emptyPart = track.slice(thumbPos + 1);
+  return jsxs(Box, { children: [
+    jsx(Text, { color: isDisabled ? void 0 : accentColor, dimColor: isDisabled, children: filledPart }),
+    jsx(Text, { bold: true, color: isDisabled ? void 0 : accentColor, dimColor: isDisabled, children: thumb }),
+    jsx(Text, { color: isDisabled ? void 0 : defaultColor, dimColor: isDisabled, children: emptyPart })
+  ] });
+}
+
+export { Slider as default };

package/dist/packem_shared/Spacer-Bs4ER-HK.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import Box from './Box-D_pSJ9Jp.js';
+
+function Spacer() {
+  return jsx(Box, { flexGrow: 1 });
+}
+
+export { Spacer as default };