@visulima/tui 0.0.1 → 1.0.0-alpha.2

package/dist/packem_shared/FocusContext-D5wFxSRz.js

@@ -0,0 +1,153 @@
+import React, { createContext, useRef, useState, useCallback, useMemo, useContext, useEffect } from 'react';
+
+const FocusContext = createContext({
+  activate() {
+  },
+  activeId: void 0,
+  add() {
+  },
+  deactivate() {
+  },
+  disableFocus() {
+  },
+  enableFocus() {
+  },
+  focus() {
+  },
+  focusNext() {
+  },
+  focusPrevious() {
+  },
+  remove() {
+  }
+});
+FocusContext.displayName = "TuiFocusContext";
+const FocusProvider = ({ children }) => {
+  const itemsRef = useRef([]);
+  const [activeId, setActiveId] = useState(void 0);
+  const [isEnabled, setIsEnabled] = useState(true);
+  const add = useCallback((id, options) => {
+    if (itemsRef.current.some((e) => e.id === id)) {
+      return;
+    }
+    const entry = { autoFocus: options.autoFocus, id, isActive: true };
+    itemsRef.current = [...itemsRef.current, entry];
+    setActiveId((previous) => {
+      if (options.autoFocus && previous === void 0) {
+        return id;
+      }
+      if (itemsRef.current.filter((e) => e.isActive).length === 1 && previous === void 0) {
+        return id;
+      }
+      return previous;
+    });
+  }, []);
+  const remove = useCallback((id) => {
+    itemsRef.current = itemsRef.current.filter((e) => e.id !== id);
+    setActiveId((previous) => previous === id ? void 0 : previous);
+  }, []);
+  const activate = useCallback((id) => {
+    itemsRef.current = itemsRef.current.map((e) => e.id === id ? { ...e, isActive: true } : e);
+  }, []);
+  const deactivate = useCallback((id) => {
+    itemsRef.current = itemsRef.current.map((e) => e.id === id ? { ...e, isActive: false } : e);
+    setActiveId((previous) => previous === id ? void 0 : previous);
+  }, []);
+  const enableFocus = useCallback(() => setIsEnabled(true), []);
+  const disableFocus = useCallback(() => {
+    setIsEnabled(false);
+    setActiveId(void 0);
+  }, []);
+  const focusNext = useCallback(() => {
+    if (!isEnabled) {
+      return;
+    }
+    const active = itemsRef.current.filter((e) => e.isActive);
+    if (active.length === 0) {
+      return;
+    }
+    setActiveId((previous) => {
+      if (previous === void 0) {
+        return active[0]?.id;
+      }
+      const index = active.findIndex((e) => e.id === previous);
+      return active[(index + 1) % active.length]?.id ?? active[0]?.id;
+    });
+  }, [isEnabled]);
+  const focusPrevious = useCallback(() => {
+    if (!isEnabled) {
+      return;
+    }
+    const active = itemsRef.current.filter((e) => e.isActive);
+    if (active.length === 0) {
+      return;
+    }
+    setActiveId((previous) => {
+      if (previous === void 0) {
+        return active.at(-1)?.id;
+      }
+      const index = active.findIndex((e) => e.id === previous);
+      return active[(index - 1 + active.length) % active.length]?.id ?? active.at(-1)?.id;
+    });
+  }, [isEnabled]);
+  const focus = useCallback(
+    (id) => {
+      if (!isEnabled) {
+        return;
+      }
+      if (itemsRef.current.some((e) => e.id === id && e.isActive)) {
+        setActiveId(id);
+      }
+    },
+    [isEnabled]
+  );
+  const value = useMemo(() => {
+    return {
+      activate,
+      activeId,
+      add,
+      deactivate,
+      disableFocus,
+      enableFocus,
+      focus,
+      focusNext,
+      focusPrevious,
+      remove
+    };
+  }, [activeId, add, remove, activate, deactivate, enableFocus, disableFocus, focusNext, focusPrevious, focus]);
+  return React.createElement(FocusContext.Provider, { value }, children);
+};
+const useFocus = ({ autoFocus = false, id: customId, isActive = true } = {}) => {
+  const { activate, activeId, add, deactivate, focus, remove } = useContext(FocusContext);
+  const id = useMemo(() => customId ?? Math.random().toString(36).slice(2, 7), [customId]);
+  useEffect(() => {
+    add(id, { autoFocus });
+    return () => {
+      remove(id);
+    };
+  }, [id, autoFocus]);
+  useEffect(() => {
+    if (isActive) {
+      activate(id);
+    } else {
+      deactivate(id);
+    }
+  }, [isActive, id]);
+  return {
+    focus,
+    isFocused: Boolean(id) && activeId === id
+  };
+};
+const useFocusManager = () => {
+  const context = useContext(FocusContext);
+  return {
+    activeId: context.activeId,
+    disableFocus: context.disableFocus,
+    enableFocus: context.enableFocus,
+    focus: context.focus,
+    focusNext: context.focusNext,
+    focusPrevious: context.focusPrevious
+  };
+};
+
+export { FocusContext, FocusProvider, useFocus, useFocusManager };

package/dist/packem_shared/Fullscreen-DrElAE1o.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import Box from './Box-D_pSJ9Jp.js';
+import useWindowSize from './useWindowSize-ugEmGZJm.js';
+
+const Fullscreen = ({ children }) => {
+  const { columns, rows } = useWindowSize();
+  return jsx(Box, { flexGrow: 1, height: rows, width: columns, children });
+};
+
+export { Fullscreen as default };

package/dist/packem_shared/Gradient-Ql5P0GUd.js

@@ -0,0 +1,136 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { strip } from '@visulima/ansi';
+import { multilineGradient } from '@visulima/colorize/gradient';
+import { useMemo, Children, isValidElement, cloneElement } from 'react';
+import Box from './Box-D_pSJ9Jp.js';
+import Text from './Text-DvAUdZcK.js';
+import Transform from './Transform-BHxY_dAM.js';
+
+const presets = {
+  atlas: { colors: ["#feac5e", "#c779d0", "#4bc0c8"] },
+  cristal: { colors: ["#bdfff3", "#4ac29a"] },
+  fruit: { colors: ["#ff4e50", "#f9d423"] },
+  instagram: { colors: ["#833ab4", "#fd1d1d", "#fcb045"] },
+  mind: { colors: ["#473b7b", "#3584a7", "#30d2be"] },
+  morning: { colors: ["#ff5f6d", "#ffc371"], options: { interpolation: "hsv" } },
+  passion: { colors: ["#f43b47", "#453a94"] },
+  pastel: { colors: ["#74ebd5", "#74ecd5"], options: { hsvSpin: "long", interpolation: "hsv" } },
+  rainbow: { colors: ["#ff0000", "#ff0100"], options: { hsvSpin: "long", interpolation: "hsv" } },
+  retro: { colors: ["#3f51b1", "#5a55ae", "#7b5fac", "#8f6aae", "#a86aa4", "#cc6b8e", "#f18271", "#f3a469", "#f7c978"] },
+  summer: { colors: ["#fdbb2d", "#22c1c3"] },
+  teen: { colors: ["#77a1d3", "#79cbca", "#e684ae"] },
+  vice: { colors: ["#5ee7df", "#b490ca"], options: { interpolation: "hsv" } }
+};
+const containsBoxDescendant = (nodeChildren) => {
+  let hasBox = false;
+  const search = (value) => {
+    Children.forEach(value, (child) => {
+      if (hasBox) {
+        return;
+      }
+      if (!isValidElement(child)) {
+        return;
+      }
+      if (child.type === Box) {
+        hasBox = true;
+        return;
+      }
+      const childProps = child.props;
+      if (Object.hasOwn(childProps, "children")) {
+        search(childProps["children"]);
+      }
+    });
+  };
+  search(nodeChildren);
+  return hasBox;
+};
+const hasChildrenProp = (properties) => Object.hasOwn(properties, "children");
+const isPlainTextNode = (node) => typeof node === "string" || typeof node === "number";
+const isNonRenderableChild = (node) => node === null || node === void 0 || typeof node === "boolean";
+function Gradient({ children, colors, name }) {
+  if (name && colors) {
+    throw new Error("The `name` and `colors` props are mutually exclusive");
+  }
+  if (!name && !colors) {
+    throw new Error("Either `name` or `colors` prop must be provided");
+  }
+  const gradientFunction = useMemo(
+    () => name ? multilineGradient(presets[name].colors, presets[name].options) : multilineGradient(colors ?? []),
+    [name, colors]
+  );
+  const applyGradient = (text) => gradientFunction(strip(text));
+  const childrenCount = Children.count(children);
+  if (isPlainTextNode(children)) {
+    return jsx(Transform, { transform: applyGradient, children });
+  }
+  if (childrenCount === 1 && !containsBoxDescendant(children)) {
+    return jsx(Transform, { transform: applyGradient, children });
+  }
+  const applyGradientToChildren = (nodeChildren) => {
+    const nodes = [];
+    let bufferedText = "";
+    let nodeIndex = 0;
+    const createKey = () => {
+      const key = `gradient-node-${String(nodeIndex)}`;
+      nodeIndex += 1;
+      return key;
+    };
+    const pushTransformed = (node, key) => {
+      nodes.push(
+        jsx(Transform, { transform: applyGradient, children: node }, key)
+      );
+    };
+    const flushText = () => {
+      if (bufferedText === "") {
+        return;
+      }
+      const text = bufferedText;
+      bufferedText = "";
+      pushTransformed(jsx(Text, { children: text }), createKey());
+    };
+    Children.forEach(nodeChildren, (child) => {
+      if (isNonRenderableChild(child)) {
+        return;
+      }
+      if (isPlainTextNode(child)) {
+        bufferedText += String(child);
+        return;
+      }
+      flushText();
+      if (isValidElement(child)) {
+        const childKey = child.key ?? createKey();
+        const childProps = child.props;
+        if (child.type === Text) {
+          pushTransformed(child, childKey);
+          return;
+        }
+        if (child.type === Box) {
+          if (hasChildrenProp(childProps)) {
+            const childChildren = childProps["children"];
+            nodes.push(cloneElement(child, { key: childKey }, applyGradientToChildren(childChildren)));
+            return;
+          }
+          nodes.push(cloneElement(child, { key: childKey }));
+          return;
+        }
+        if (hasChildrenProp(childProps)) {
+          const childChildren = childProps["children"];
+          if (!containsBoxDescendant(childChildren)) {
+            pushTransformed(child, childKey);
+            return;
+          }
+          nodes.push(cloneElement(child, { key: childKey }, applyGradientToChildren(childChildren)));
+          return;
+        }
+        pushTransformed(child, childKey);
+        return;
+      }
+      nodes.push(child);
+    });
+    flushText();
+    return nodes;
+  };
+  return jsx(Fragment, { children: applyGradientToChildren(children) });
+}
+
+export { Gradient as default };

package/dist/packem_shared/Help-6wanGG38.js

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import useWindowSize from './useWindowSize-ugEmGZJm.js';
+import Box from './Box-D_pSJ9Jp.js';
+import Text from './Text-DvAUdZcK.js';
+
+const keyLabels = {
+  backspace: "backspace",
+  delete: "del",
+  downArrow: "↓",
+  end: "end",
+  escape: "esc",
+  home: "home",
+  leftArrow: "←",
+  pageDown: "pgdn",
+  pageUp: "pgup",
+  return: "enter",
+  rightArrow: "→",
+  tab: "tab",
+  upArrow: "↑"
+};
+function formatKeyLabel(spec) {
+  const plusIndex = spec.indexOf("+");
+  if (plusIndex !== -1) {
+    const modifier = spec.slice(0, plusIndex);
+    const rest = spec.slice(plusIndex + 1);
+    return `${modifier}+${keyLabels[rest] ?? rest}`;
+  }
+  return keyLabels[spec] ?? spec;
+}
+function formatKeys(key) {
+  const keys = typeof key === "string" ? [key] : key;
+  return keys.map((k) => formatKeyLabel(k)).join("/");
+}
+function Help({
+  bindings,
+  descriptionColor,
+  keyColor = "cyan",
+  maxColumns = 3,
+  mode = "short",
+  separator = " · "
+}) {
+  const { columns } = useWindowSize();
+  if (mode === "full") {
+    return renderFull(bindings, { columns, descriptionColor, keyColor, maxColumns });
+  }
+  return renderShort(bindings, { columns, descriptionColor, keyColor, separator });
+}
+function renderShort(bindings, options) {
+  const items = [];
+  let totalWidth = 0;
+  for (const [index, binding] of bindings.entries()) {
+    const keys = formatKeys(binding.key);
+    const pairText = `${keys} ${binding.description}`;
+    const separatorWidth = index > 0 ? options.separator.length : 0;
+    const pairWidth = separatorWidth + pairText.length;
+    if (totalWidth + pairWidth > options.columns && items.length > 0) {
+      break;
+    }
+    if (index > 0) {
+      items.push(
+        jsx(Text, { dimColor: true, children: options.separator }, `sep-${index}`)
+      );
+    }
+    items.push(
+      jsxs(Box, { children: [
+        jsx(Text, { color: options.keyColor, children: keys }),
+        jsx(Text, { children: " " }),
+        options.descriptionColor ? jsx(Text, { color: options.descriptionColor, children: binding.description }) : jsx(Text, { dimColor: true, children: binding.description })
+      ] }, `pair-${index}`)
+    );
+    totalWidth += pairWidth;
+  }
+  return jsx(Box, { flexDirection: "row", children: items });
+}
+function renderFull(bindings, options) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const binding of bindings) {
+    const group = binding.group ?? "";
+    if (!groups.has(group)) {
+      groups.set(group, []);
+    }
+    groups.get(group).push(binding);
+  }
+  const groupEntries = [...groups.entries()];
+  const columnCount = Math.min(options.maxColumns, groupEntries.length || 1);
+  const columnWidth = Math.floor(options.columns / columnCount);
+  const columnNodes = [];
+  for (const [index, [groupName, groupBindings]] of groupEntries.entries()) {
+    const rows = [];
+    if (groupName) {
+      rows.push(
+        jsx(Text, { bold: true, children: groupName }, "title")
+      );
+    }
+    for (const [bIndex, binding] of groupBindings.entries()) {
+      const keys = formatKeys(binding.key);
+      rows.push(
+        jsxs(Box, { children: [
+          jsx(Text, { color: options.keyColor, children: keys }),
+          jsx(Text, { children: " " }),
+          options.descriptionColor ? jsx(Text, { color: options.descriptionColor, children: binding.description }) : jsx(Text, { dimColor: true, children: binding.description })
+        ] }, `b-${bIndex}`)
+      );
+    }
+    columnNodes.push(
+      jsx(Box, { flexDirection: "column", width: columnWidth, children: rows }, `col-${index}`)
+    );
+  }
+  return jsx(Box, { flexDirection: "row", children: columnNodes });
+}
+
+export { Help as default };

package/dist/packem_shared/IMECompositionBuffer-Dl3S0KnF.js

@@ -0,0 +1,55 @@
+const isIMEInput = (data) => {
+  if (data.length === 0) {
+    return false;
+  }
+  for (const character of data) {
+    const codePoint = character.codePointAt(0) ?? 0;
+    if (codePoint <= 127) {
+      return false;
+    }
+    if (codePoint <= 255) {
+      return false;
+    }
+    return true;
+  }
+  return false;
+};
+class IMECompositionBuffer {
+  buffer = "";
+  timer;
+  onFlush;
+  timeout;
+  constructor({ onFlush, timeout }) {
+    this.onFlush = onFlush;
+    this.timeout = timeout;
+  }
+  add(text) {
+    this.buffer += text;
+    if (this.timer !== void 0) {
+      clearTimeout(this.timer);
+    }
+    this.timer = setTimeout(() => {
+      this.flush();
+    }, this.timeout);
+  }
+  flush() {
+    if (this.timer !== void 0) {
+      clearTimeout(this.timer);
+      this.timer = void 0;
+    }
+    if (this.buffer.length > 0) {
+      const text = this.buffer;
+      this.buffer = "";
+      this.onFlush(text);
+    }
+  }
+  destroy() {
+    if (this.timer !== void 0) {
+      clearTimeout(this.timer);
+      this.timer = void 0;
+    }
+    this.buffer = "";
+  }
+}
+
+export { IMECompositionBuffer, isIMEInput };

package/dist/packem_shared/InputParser-BKHpWfvN.js

@@ -0,0 +1,156 @@
+import EventEmitter from 'eventemitter3';
+
+class InputParser extends EventEmitter {
+  constructor(stdin) {
+    super();
+    this.stdin = stdin;
+  }
+  stdin;
+  _boundHandleData = null;
+  _pasteBuffer = null;
+  start() {
+    if (typeof this.stdin.setRawMode === "function") {
+      this.stdin.setRawMode(true);
+    }
+    this.stdin.resume();
+    this.stdin.setEncoding("utf8");
+    this._boundHandleData = this.handleData.bind(this);
+    this.stdin.on("data", this._boundHandleData);
+  }
+  stop() {
+    if (typeof this.stdin.setRawMode === "function") {
+      this.stdin.setRawMode(false);
+    }
+    this.stdin.pause();
+    if (this._boundHandleData) {
+      this.stdin.removeListener("data", this._boundHandleData);
+      this._boundHandleData = null;
+    }
+  }
+  handleData(data) {
+    if (data === "") {
+      this.emit("exit");
+      return;
+    }
+    if (data.includes("\x1B[200~") || this._pasteBuffer !== null) {
+      if (this._pasteBuffer === null) {
+        this._pasteBuffer = data.replace("\x1B[200~", "");
+      } else {
+        this._pasteBuffer += data;
+      }
+      if (this._pasteBuffer.includes("\x1B[201~")) {
+        const text = this._pasteBuffer.replace("\x1B[201~", "");
+        this._pasteBuffer = null;
+        this.emit("paste", text);
+        if (this.listenerCount("paste") === 0) {
+          this.emit("data", text);
+        }
+      }
+      return;
+    }
+    if (data.length === 1) {
+      const code = data.charCodeAt(0);
+      if (code >= 1 && code <= 26 && code !== 3 && code !== 9 && code !== 10 && code !== 13) {
+        const letter = String.fromCharCode(code + 96);
+        this.emit("ctrl", letter);
+        this.emit("data", data, { ctrl: true });
+        return;
+      }
+    }
+    if (data === "\x1B[A") {
+      this.emit("keydown", "up");
+      return;
+    }
+    if (data === "\x1B[B") {
+      this.emit("keydown", "down");
+      return;
+    }
+    if (data === "\x1B[C") {
+      this.emit("keydown", "right");
+      return;
+    }
+    if (data === "\x1B[D") {
+      this.emit("keydown", "left");
+      return;
+    }
+    if (data === "	") {
+      this.emit("keydown", "tab");
+      return;
+    }
+    if (data === "\x1B[Z") {
+      this.emit("keydown", "shift-tab");
+      return;
+    }
+    if (data === "\x1B") {
+      this.emit("keydown", "escape");
+      return;
+    }
+    if (data === "\r" || data === "\n") {
+      this.emit("keydown", "enter");
+      return;
+    }
+    if (data === "") {
+      this.emit("keydown", "backspace");
+      return;
+    }
+    if (data === "\x1B[3~") {
+      this.emit("keydown", "delete");
+      return;
+    }
+    if (data === "\x1B[5~") {
+      this.emit("keydown", "pageUp");
+      return;
+    }
+    if (data === "\x1B[6~") {
+      this.emit("keydown", "pageDown");
+      return;
+    }
+    if (data === "\x1B[H" || data === "\x1B[1~") {
+      this.emit("keydown", "home");
+      return;
+    }
+    if (data === "\x1B[F" || data === "\x1B[4~") {
+      this.emit("keydown", "end");
+      return;
+    }
+    if (data.length === 2 && data[0] === "\x1B") {
+      this.emit("meta", data[1]);
+      this.emit("data", data, { meta: true });
+      return;
+    }
+    if (data.startsWith("\x1B[<")) {
+      const match = data.match(/\u001B\[<(\d+);(\d+);(\d+)(M)/i);
+      if (match) {
+        const buttonCode = Number.parseInt(match[1]);
+        const x = Number.parseInt(match[2]) - 1;
+        const y = Number.parseInt(match[3]) - 1;
+        const isRelease = match[4] === "m";
+        const shift = (buttonCode & 4) !== 0;
+        const meta = (buttonCode & 8) !== 0;
+        const ctrl = (buttonCode & 16) !== 0;
+        const base = buttonCode & -29;
+        let button = null;
+        if (base === 0 && !isRelease)
+          button = "left";
+        else if (base === 1 && !isRelease)
+          button = "middle";
+        else if (base === 2 && !isRelease)
+          button = "right";
+        else if (base === 64)
+          button = "scrollUp";
+        else if (base === 65)
+          button = "scrollDown";
+        if (button) {
+          const event = { button, ctrl, meta, shift, x, y };
+          this.emit("mouse", event);
+          if (button === "left")
+            this.emit("click", { x, y });
+        }
+      }
+      return;
+    }
+    this.emit("data", data);
+  }
+}
+
+export { InputParser };