@visulima/tui 1.0.0-alpha.5 → 1.0.0-alpha.7

package/dist/packem_shared/FocusContext-D5wFxSRz.js

@@ -1,153 +0,0 @@
-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/FormField-BSG16cnA.js

@@ -1,29 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import Box from './Box-W1w_NGin.js';
-import Text from './Text-CtUwV89_.js';
-
-const FormField = ({ children, description, error, isDisabled = false, label, required = false }) => jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
-  jsxs(Box, { children: [
-    jsx(Text, { bold: true, dimColor: isDisabled, children: label }),
-    required ? jsx(Text, { color: "red", children: " *" }) : void 0
-  ] }),
-  jsx(Box, { marginTop: 0, children }),
-  error === void 0 ? description === void 0 ? void 0 : jsx(Text, { dimColor: true, children: description }) : jsx(Text, { color: "red", children: error })
-] });
-const Form = Object.assign(
-  ({ accentColor = "blue", bordered = true, children, description, footer, title, width }) => {
-    const content = jsxs(Box, { flexDirection: "column", children: [
-      title === void 0 ? void 0 : jsx(Box, { marginBottom: 1, children: jsx(Text, { bold: true, color: accentColor, children: title }) }),
-      description === void 0 ? void 0 : jsx(Box, { marginBottom: 1, children: jsx(Text, { dimColor: true, children: description }) }),
-      jsx(Box, { flexDirection: "column", children }),
-      footer === void 0 ? void 0 : jsx(Box, { marginTop: 1, children: footer })
-    ] });
-    if (!bordered) {
-      return jsx(Box, { flexDirection: "column", width, children: content });
-    }
-    return jsx(Box, { borderColor: accentColor, borderStyle: "round", flexDirection: "column", paddingX: 1, paddingY: 1, width, children: content });
-  },
-  { Field: FormField }
-);
-
-export { FormField, Form as default };

package/dist/packem_shared/Fullscreen-DO7voOq5.js

@@ -1,11 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import 'react';
-import Box from './Box-W1w_NGin.js';
-import useWindowSize from './useWindowSize-D3UU41mv.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/Gauge-CKXUXxft.js

@@ -1,122 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import { c as createBrailleGrid } from './braille-BoEWoH2I.js';
-import Box from './Box-W1w_NGin.js';
-import Canvas from './Canvas-COttmLPX.js';
-import Text from './Text-CtUwV89_.js';
-
-const SIZES = {
-  large: { cols: 40, rows: 10 },
-  medium: { cols: 24, rows: 6 },
-  small: { cols: 16, rows: 4 }
-};
-const NEEDLE_RATIO = 0.9;
-const ARC_ANGLE_STEPS_PER_PIXEL = 2;
-const defaultFormat = (value) => String(Math.round(value));
-const thresholdAtRatio = (thresholds, min, max, ratio) => {
-  const value = min + (max - min) * ratio;
-  for (const threshold of thresholds) {
-    if (value <= threshold.max) {
-      return threshold;
-    }
-  }
-  return thresholds[thresholds.length - 1];
-};
-function Gauge({
-  backgroundColor = "gray",
-  formatValue = defaultFormat,
-  label,
-  max = 100,
-  min = 0,
-  showLegend = false,
-  showValue = true,
-  size = "medium",
-  thresholds,
-  value
-}) {
-  const { cols, rows } = SIZES[size];
-  const clampedValue = Math.max(min, Math.min(max, value));
-  const range = max - min || 1;
-  const ratio = (clampedValue - min) / range;
-  const sortedThresholds = useMemo(() => {
-    if (thresholds === void 0 || thresholds.length === 0) {
-      return void 0;
-    }
-    return [...thresholds].sort((a, b) => a.max - b.max);
-  }, [thresholds]);
-  const activeThreshold = useMemo(() => {
-    if (sortedThresholds === void 0) {
-      return void 0;
-    }
-    return thresholdAtRatio(sortedThresholds, min, max, ratio);
-  }, [sortedThresholds, min, max, ratio]);
-  const readout = formatValue(clampedValue);
-  return jsxs(Box, { flexDirection: "column", children: [
-    jsx(
-      Canvas,
-      {
-        draw: (context) => {
-          context.clear();
-          const pixelWidth = context.width * 2;
-          const pixelHeight = context.height * 4;
-          const cx = pixelWidth / 2;
-          const cy = pixelHeight - 1;
-          const rx = pixelWidth / 2 - 1;
-          const ry = pixelHeight - 1;
-          const radius = Math.max(1, Math.min(rx, ry));
-          const gridsByColor = /* @__PURE__ */ new Map();
-          const gridFor = (color) => {
-            const existing = gridsByColor.get(color);
-            if (existing !== void 0) {
-              return existing;
-            }
-            const grid = createBrailleGrid(context.width, context.height);
-            gridsByColor.set(color, grid);
-            return grid;
-          };
-          const arcSteps = Math.max(32, Math.round(Math.PI * radius) * ARC_ANGLE_STEPS_PER_PIXEL);
-          for (let step = 0; step <= arcSteps; step += 1) {
-            const stepRatio = step / arcSteps;
-            const angle = Math.PI * (1 - stepRatio);
-            const px = Math.round(cx + radius * Math.cos(angle));
-            const py = Math.round(cy - radius * Math.sin(angle));
-            let color;
-            if (stepRatio > ratio) {
-              color = backgroundColor;
-            } else if (sortedThresholds) {
-              const segment = thresholdAtRatio(sortedThresholds, min, max, stepRatio);
-              color = segment?.color ?? "cyan";
-            } else {
-              color = "cyan";
-            }
-            const grid = gridFor(color);
-            grid.plotPoint(px, py);
-          }
-          const needleRadius = radius * NEEDLE_RATIO;
-          const needleAngle = Math.PI * (1 - ratio);
-          const nx = Math.round(cx + needleRadius * Math.cos(needleAngle));
-          const ny = Math.round(cy - needleRadius * Math.sin(needleAngle));
-          const needleColor = activeThreshold?.color ?? "white";
-          const needleGrid = gridFor(needleColor);
-          needleGrid.plotLine(Math.round(cx), Math.round(cy), nx, ny);
-          for (const [color, grid] of gridsByColor) {
-            grid.flush(context, { color });
-          }
-        },
-        height: rows,
-        version: [value, min, max, size, thresholds, backgroundColor],
-        width: cols
-      }
-    ),
-    showValue || label ? jsxs(Box, { flexDirection: "column", children: [
-      label === void 0 ? void 0 : jsx(Box, { justifyContent: "center", children: jsx(Text, { dimColor: true, children: label }) }),
-      showValue ? jsx(Box, { justifyContent: "center", children: jsx(Text, { bold: true, color: activeThreshold?.color ?? "white", children: readout }) }) : void 0
-    ] }) : void 0,
-    showLegend && thresholds && thresholds.length > 0 ? jsx(Box, { gap: 2, justifyContent: "center", marginTop: 1, children: thresholds.map((threshold, index) => jsxs(Box, { gap: 1, children: [
-      jsx(Text, { color: threshold.color, children: "●" }),
-      jsx(Text, { dimColor: true, children: threshold.label ?? `≤ ${threshold.max}` })
-    ] }, index)) }) : void 0
-  ] });
-}
-
-export { Gauge as default };

package/dist/packem_shared/Gradient-Dg0NezWc.js

@@ -1,136 +0,0 @@
-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-W1w_NGin.js';
-import Text from './Text-CtUwV89_.js';
-import Transform from './Transform-Cfyva2wd.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/Heading-BnR7McmP.js

@@ -1,29 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import Box from './Box-W1w_NGin.js';
-import Text from './Text-CtUwV89_.js';
-
-const LEVEL_COLOR = {
-  1: "blueBright",
-  2: "cyanBright",
-  3: "magentaBright",
-  4: "yellowBright",
-  5: "green",
-  6: "white"
-};
-const LEVEL_PREFIX = {
-  1: "# ",
-  2: "## ",
-  3: "### ",
-  4: "#### ",
-  5: "##### ",
-  6: "###### "
-};
-function Heading({ children, color, level = 1, underline = false }) {
-  const resolvedColor = color ?? LEVEL_COLOR[level];
-  return jsx(Box, { flexDirection: "column", children: jsxs(Text, { bold: level <= 2, color: resolvedColor, underline, children: [
-    LEVEL_PREFIX[level],
-    children
-  ] }) });
-}
-
-export { Heading as default };

package/dist/packem_shared/Heatmap-_jqISOU0.js

@@ -1,79 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import Box from './Box-W1w_NGin.js';
-import Canvas from './Canvas-COttmLPX.js';
-import Text from './Text-CtUwV89_.js';
-
-const DEFAULT_PALETTE = ["#0b1e4f", "#1f3b96", "#3258c8", "#4e84ec", "#78b0ff"];
-function Heatmap({
-  cellWidth = 2,
-  character = "█",
-  columnLabels,
-  data,
-  max: maxOverride,
-  min: minOverride,
-  palette = DEFAULT_PALETTE,
-  rowLabels,
-  textColor
-}) {
-  const { cols, colWidth, extent, rows } = useMemo(() => {
-    const rowCount = data.length;
-    const colCount = data.reduce((widest, row) => Math.max(widest, row.length), 0);
-    let min = minOverride ?? Infinity;
-    let max = maxOverride ?? -Infinity;
-    if (minOverride === void 0 || maxOverride === void 0) {
-      for (const row of data) {
-        for (const value of row) {
-          if (minOverride === void 0 && value < min) {
-            min = value;
-          }
-          if (maxOverride === void 0 && value > max) {
-            max = value;
-          }
-        }
-      }
-    }
-    return {
-      cols: colCount,
-      colWidth: cellWidth,
-      extent: { max, min },
-      rows: rowCount
-    };
-  }, [data, minOverride, maxOverride, cellWidth]);
-  const width = cols * colWidth;
-  const height = rows;
-  return jsxs(Box, { children: [
-    rowLabels === void 0 ? void 0 : jsx(Box, { flexDirection: "column", marginRight: 1, children: Array.from({ length: rows }, (_, index) => jsx(Text, { dimColor: true, children: rowLabels[index] ?? "" }, index)) }),
-    jsxs(Box, { flexDirection: "column", children: [
-      jsx(
-        Canvas,
-        {
-          draw: (context) => {
-            context.clear();
-            const { max, min } = extent;
-            const range = max - min || 1;
-            const paletteLast = palette.length - 1;
-            for (let row = 0; row < rows; row += 1) {
-              for (let col = 0; col < cols; col += 1) {
-                const value = data[row]?.[col];
-                const background = value === void 0 ? void 0 : palette[Math.max(0, Math.min(paletteLast, Math.round((value - min) / range * paletteLast)))];
-                for (let offset = 0; offset < colWidth; offset += 1) {
-                  context.setCell(col * colWidth + offset, row, character, {
-                    background,
-                    color: textColor
-                  });
-                }
-              }
-            }
-          },
-          height,
-          version: [data, palette, cellWidth, minOverride, maxOverride],
-          width
-        }
-      ),
-      columnLabels === void 0 ? void 0 : jsx(Box, { children: columnLabels.map((label, index) => jsx(Box, { width: colWidth, children: jsx(Text, { dimColor: true, wrap: "truncate-end", children: label }) }, index)) })
-    ] })
-  ] });
-}
-
-export { Heatmap as default };

package/dist/packem_shared/Help-0yZ_IcQg.js

@@ -1,105 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import useWindowSize from './useWindowSize-D3UU41mv.js';
-import Box from './Box-W1w_NGin.js';
-import Text from './Text-CtUwV89_.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 };