@visulima/tui 0.0.1 → 1.0.0-alpha.2

package/dist/packem_shared/NAMED_COLORS-a4QBvb5r.js

@@ -0,0 +1,262 @@
+import Yoga from 'yoga-layout';
+
+const NAMED_COLORS = {
+  black: 0,
+  // bright variants
+  blackBright: 8,
+  blue: 4,
+  blueBright: 12,
+  cyan: 6,
+  cyanBright: 14,
+  gray: 8,
+  green: 2,
+  greenBright: 10,
+  grey: 8,
+  magenta: 5,
+  magentaBright: 13,
+  red: 1,
+  redBright: 9,
+  white: 7,
+  whiteBright: 15,
+  yellow: 3,
+  yellowBright: 11
+};
+function rgbToAnsi256(r, g, b) {
+  const ri = Math.round(r / 51);
+  const gi = Math.round(g / 51);
+  const bi = Math.round(b / 51);
+  return 16 + 36 * ri + 6 * gi + bi;
+}
+function resolveColor(color) {
+  if (color === void 0) {
+    return 255;
+  }
+  if (typeof color === "number") {
+    return color;
+  }
+  if (color in NAMED_COLORS) {
+    return NAMED_COLORS[color];
+  }
+  const ansiMatch = /^ansi256\(\s*(\d+)\s*\)$/.exec(color);
+  if (ansiMatch) {
+    return Number(ansiMatch[1]);
+  }
+  const hex3Match = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(color);
+  if (hex3Match) {
+    return rgbToAnsi256(
+      Number.parseInt(hex3Match[1] + hex3Match[1], 16),
+      Number.parseInt(hex3Match[2] + hex3Match[2], 16),
+      Number.parseInt(hex3Match[3] + hex3Match[3], 16)
+    );
+  }
+  const hexMatch = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(color);
+  if (hexMatch) {
+    return rgbToAnsi256(Number.parseInt(hexMatch[1], 16), Number.parseInt(hexMatch[2], 16), Number.parseInt(hexMatch[3], 16));
+  }
+  const rgbMatch = /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/.exec(color);
+  if (rgbMatch) {
+    return rgbToAnsi256(Number(rgbMatch[1]), Number(rgbMatch[2]), Number(rgbMatch[3]));
+  }
+  return 255;
+}
+const positionEdges = [
+  ["top", Yoga.EDGE_TOP],
+  ["right", Yoga.EDGE_RIGHT],
+  ["bottom", Yoga.EDGE_BOTTOM],
+  ["left", Yoga.EDGE_LEFT]
+];
+const applyPositionStyles = (node, style) => {
+  if ("position" in style) {
+    node.setPositionType(
+      style.position === "absolute" ? Yoga.POSITION_TYPE_ABSOLUTE : (
+        // static maps to relative because there is no static conceptually
+        Yoga.POSITION_TYPE_RELATIVE
+      )
+    );
+  }
+  for (const [property, edge] of positionEdges) {
+    if (property in style) {
+      const value = style[property];
+      if (typeof value === "string") {
+        node.setPositionPercent(edge, Number.parseFloat(value));
+      } else {
+        node.setPosition(edge, value);
+      }
+    }
+  }
+};
+const applyMarginStyles = (node, style) => {
+  if ("margin" in style)
+    node.setMargin(Yoga.EDGE_ALL, style.margin ?? 0);
+  if ("marginX" in style)
+    node.setMargin(Yoga.EDGE_HORIZONTAL, style.marginX ?? 0);
+  if ("marginY" in style)
+    node.setMargin(Yoga.EDGE_VERTICAL, style.marginY ?? 0);
+  if ("marginLeft" in style)
+    node.setMargin(Yoga.EDGE_LEFT, style.marginLeft ?? 0);
+  if ("marginRight" in style)
+    node.setMargin(Yoga.EDGE_RIGHT, style.marginRight ?? 0);
+  if ("marginTop" in style)
+    node.setMargin(Yoga.EDGE_TOP, style.marginTop ?? 0);
+  if ("marginBottom" in style)
+    node.setMargin(Yoga.EDGE_BOTTOM, style.marginBottom ?? 0);
+};
+const applyPaddingStyles = (node, style) => {
+  if ("padding" in style)
+    node.setPadding(Yoga.EDGE_ALL, style.padding ?? 0);
+  if ("paddingX" in style)
+    node.setPadding(Yoga.EDGE_HORIZONTAL, style.paddingX ?? 0);
+  if ("paddingY" in style)
+    node.setPadding(Yoga.EDGE_VERTICAL, style.paddingY ?? 0);
+  if ("paddingLeft" in style)
+    node.setPadding(Yoga.EDGE_LEFT, style.paddingLeft ?? 0);
+  if ("paddingRight" in style)
+    node.setPadding(Yoga.EDGE_RIGHT, style.paddingRight ?? 0);
+  if ("paddingTop" in style)
+    node.setPadding(Yoga.EDGE_TOP, style.paddingTop ?? 0);
+  if ("paddingBottom" in style)
+    node.setPadding(Yoga.EDGE_BOTTOM, style.paddingBottom ?? 0);
+};
+const applyFlexStyles = (node, style) => {
+  if ("flexGrow" in style)
+    node.setFlexGrow(style.flexGrow ?? 0);
+  if ("flexShrink" in style)
+    node.setFlexShrink(style.flexShrink ?? 1);
+  if ("flexWrap" in style) {
+    node.setFlexWrap(style.flexWrap === "nowrap" ? Yoga.WRAP_NO_WRAP : style.flexWrap === "wrap" ? Yoga.WRAP_WRAP : Yoga.WRAP_WRAP_REVERSE);
+  }
+  if ("flexDirection" in style) {
+    if (style.flexDirection === "row")
+      node.setFlexDirection(Yoga.FLEX_DIRECTION_ROW);
+    if (style.flexDirection === "row-reverse")
+      node.setFlexDirection(Yoga.FLEX_DIRECTION_ROW_REVERSE);
+    if (style.flexDirection === "column")
+      node.setFlexDirection(Yoga.FLEX_DIRECTION_COLUMN);
+    if (style.flexDirection === "column-reverse")
+      node.setFlexDirection(Yoga.FLEX_DIRECTION_COLUMN_REVERSE);
+  }
+  if ("flexBasis" in style) {
+    if (typeof style.flexBasis === "number")
+      node.setFlexBasis(style.flexBasis);
+    else if (typeof style.flexBasis === "string")
+      node.setFlexBasisPercent(Number.parseInt(style.flexBasis, 10));
+    else node.setFlexBasis(Number.NaN);
+  }
+  if ("alignItems" in style) {
+    const map = {
+      baseline: Yoga.ALIGN_BASELINE,
+      center: Yoga.ALIGN_CENTER,
+      "flex-end": Yoga.ALIGN_FLEX_END,
+      "flex-start": Yoga.ALIGN_FLEX_START,
+      stretch: Yoga.ALIGN_STRETCH
+    };
+    node.setAlignItems(map[style.alignItems || "stretch"]);
+  }
+  if ("alignSelf" in style) {
+    const map = {
+      auto: Yoga.ALIGN_AUTO,
+      baseline: Yoga.ALIGN_BASELINE,
+      center: Yoga.ALIGN_CENTER,
+      "flex-end": Yoga.ALIGN_FLEX_END,
+      "flex-start": Yoga.ALIGN_FLEX_START,
+      stretch: Yoga.ALIGN_STRETCH
+    };
+    node.setAlignSelf(map[style.alignSelf || "auto"]);
+  }
+  if ("alignContent" in style) {
+    const map = {
+      center: Yoga.ALIGN_CENTER,
+      "flex-end": Yoga.ALIGN_FLEX_END,
+      "flex-start": Yoga.ALIGN_FLEX_START,
+      "space-around": Yoga.ALIGN_SPACE_AROUND,
+      "space-between": Yoga.ALIGN_SPACE_BETWEEN,
+      stretch: Yoga.ALIGN_STRETCH
+    };
+    node.setAlignContent(map[style.alignContent || "flex-start"]);
+  }
+  if ("justifyContent" in style) {
+    const map = {
+      center: Yoga.JUSTIFY_CENTER,
+      "flex-end": Yoga.JUSTIFY_FLEX_END,
+      "flex-start": Yoga.JUSTIFY_FLEX_START,
+      "space-around": Yoga.JUSTIFY_SPACE_AROUND,
+      "space-between": Yoga.JUSTIFY_SPACE_BETWEEN,
+      "space-evenly": Yoga.JUSTIFY_SPACE_EVENLY
+    };
+    node.setJustifyContent(map[style.justifyContent || "flex-start"]);
+  }
+};
+const applyDimensionStyles = (node, style) => {
+  if ("width" in style) {
+    if (typeof style.width === "number")
+      node.setWidth(style.width);
+    else if (typeof style.width === "string")
+      node.setWidthPercent(Number.parseInt(style.width, 10));
+    else node.setWidthAuto();
+  }
+  if ("height" in style) {
+    if (typeof style.height === "number")
+      node.setHeight(style.height);
+    else if (typeof style.height === "string")
+      node.setHeightPercent(Number.parseInt(style.height, 10));
+    else node.setHeightAuto();
+  }
+  if ("minWidth" in style) {
+    if (typeof style.minWidth === "string")
+      node.setMinWidthPercent(Number.parseInt(style.minWidth, 10));
+    else node.setMinWidth(style.minWidth ?? 0);
+  }
+  if ("minHeight" in style) {
+    if (typeof style.minHeight === "string")
+      node.setMinHeightPercent(Number.parseInt(style.minHeight, 10));
+    else node.setMinHeight(style.minHeight ?? 0);
+  }
+  if ("maxWidth" in style) {
+    if (typeof style.maxWidth === "string")
+      node.setMaxWidthPercent(Number.parseInt(style.maxWidth, 10));
+    else node.setMaxWidth(style.maxWidth);
+  }
+  if ("maxHeight" in style) {
+    if (typeof style.maxHeight === "string")
+      node.setMaxHeightPercent(Number.parseInt(style.maxHeight, 10));
+    else node.setMaxHeight(style.maxHeight);
+  }
+  if ("aspectRatio" in style)
+    node.setAspectRatio(style.aspectRatio);
+};
+const applyDisplayStyles = (node, style) => {
+  if ("display" in style) {
+    node.setDisplay(style.display === "flex" ? Yoga.DISPLAY_FLEX : Yoga.DISPLAY_NONE);
+  }
+};
+const applyBorderStyles = (node, style, currentStyle) => {
+  const hasBorderChanges = "borderStyle" in style || "borderTop" in style || "borderBottom" in style || "borderLeft" in style || "borderRight" in style;
+  if (!hasBorderChanges) {
+    return;
+  }
+  const borderWidth = currentStyle.borderStyle ? 1 : 0;
+  node.setBorder(Yoga.EDGE_TOP, currentStyle.borderTop === false ? 0 : borderWidth);
+  node.setBorder(Yoga.EDGE_BOTTOM, currentStyle.borderBottom === false ? 0 : borderWidth);
+  node.setBorder(Yoga.EDGE_LEFT, currentStyle.borderLeft === false ? 0 : borderWidth);
+  node.setBorder(Yoga.EDGE_RIGHT, currentStyle.borderRight === false ? 0 : borderWidth);
+};
+const applyGapStyles = (node, style) => {
+  if ("gap" in style)
+    node.setGap(Yoga.GUTTER_ALL, style.gap ?? 0);
+  if ("columnGap" in style)
+    node.setGap(Yoga.GUTTER_COLUMN, style.columnGap ?? 0);
+  if ("rowGap" in style)
+    node.setGap(Yoga.GUTTER_ROW, style.rowGap ?? 0);
+};
+const applyStyles = (node, style = {}, currentStyle = style) => {
+  applyPositionStyles(node, style);
+  applyMarginStyles(node, style);
+  applyPaddingStyles(node, style);
+  applyFlexStyles(node, style);
+  applyDimensionStyles(node, style);
+  applyDisplayStyles(node, style);
+  applyBorderStyles(node, style, currentStyle);
+  applyGapStyles(node, style);
+};
+
+export { NAMED_COLORS, applyStyles, resolveColor };

package/dist/packem_shared/Newline-DBtYEg8x.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+function Newline({ count = 1 }) {
+  return jsx("ink-text", { children: "\n".repeat(count) });
+}
+
+export { Newline as default };

package/dist/packem_shared/OrderedList-Cp7pXr6m.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Box from './Box-D_pSJ9Jp.js';
+import Text from './Text-DvAUdZcK.js';
+
+const renderList = (items, parentMarker) => {
+  const maxWidth = String(items.length).length;
+  return jsx(Box, { flexDirection: "column", children: items.map((item, index) => {
+    const paddedNumber = `${String(index + 1).padStart(maxWidth)}.`;
+    const marker = `${parentMarker}${paddedNumber}`;
+    return (
+      // eslint-disable-next-line react-x/no-array-index-key -- list entries have no unique key
+      jsxs(Box, { gap: 1, children: [
+        jsx(Text, { dimColor: true, children: marker }),
+        jsxs(Box, { flexDirection: "column", children: [
+          jsx(Text, { children: item.label }),
+          item.children ? renderList(item.children, marker) : void 0
+        ] })
+      ] }, index)
+    );
+  }) });
+};
+function OrderedList({ items }) {
+  return renderList(items, "");
+}
+
+export { OrderedList as default };

package/dist/packem_shared/Paginator-D1AuD-kj.js

@@ -0,0 +1,104 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback } from 'react';
+import useInput from './useInput-Cfp5zB2s.js';
+import Box from './Box-D_pSJ9Jp.js';
+import Text from './Text-DvAUdZcK.js';
+
+function Paginator({
+  children,
+  defaultPage = 0,
+  indicatorColor = "cyan",
+  isFocused = true,
+  items,
+  onChange,
+  page: controlledPage,
+  pageSize,
+  style = "dots"
+}) {
+  const isControlled = controlledPage !== void 0;
+  const [internalPage, setInternalPage] = useState(defaultPage);
+  const currentPage = isControlled ? controlledPage : internalPage;
+  const totalPages = Math.max(1, Math.ceil(items.length / pageSize));
+  const safePage = Math.max(0, Math.min(currentPage, totalPages - 1));
+  useEffect(() => {
+    if (isControlled) {
+      setInternalPage(controlledPage);
+    }
+  }, [isControlled, controlledPage]);
+  const setPage = useCallback(
+    (newPage) => {
+      const clamped = Math.max(0, Math.min(newPage, totalPages - 1));
+      if (!isControlled) {
+        setInternalPage(clamped);
+      }
+      onChange?.(clamped);
+    },
+    [totalPages, isControlled, onChange]
+  );
+  useInput(
+    useCallback(
+      (_input, key) => {
+        if (key.leftArrow || key.pageUp) {
+          setPage(safePage - 1);
+        } else if (key.rightArrow || key.pageDown) {
+          setPage(safePage + 1);
+        } else if (key.home) {
+          setPage(0);
+        } else if (key.end) {
+          setPage(totalPages - 1);
+        }
+      },
+      [safePage, totalPages, setPage]
+    ),
+    { isActive: isFocused }
+  );
+  const startIndex = safePage * pageSize;
+  const endIndex = Math.min(startIndex + pageSize, items.length);
+  const pageItems = items.slice(startIndex, endIndex);
+  const meta = {
+    currentPage: safePage,
+    endIndex,
+    isFirstPage: safePage === 0,
+    isLastPage: safePage === totalPages - 1,
+    startIndex,
+    totalPages
+  };
+  return jsxs(Box, { flexDirection: "column", children: [
+    children(pageItems, meta),
+    totalPages > 1 && jsx(Indicator, { color: indicatorColor, currentPage: safePage, style, totalPages })
+  ] });
+}
+function Indicator({
+  color,
+  currentPage,
+  style,
+  totalPages
+}) {
+  if (style === "fraction") {
+    return jsxs(Text, { children: [
+      jsx(Text, { color, children: currentPage + 1 }),
+      jsxs(Text, { dimColor: true, children: [
+        "/",
+        totalPages
+      ] })
+    ] });
+  }
+  if (style === "numeric") {
+    return jsxs(Box, { children: [
+      currentPage > 0 ? jsx(Text, { color, children: "‹ " }) : jsx(Text, { dimColor: true, children: "‹ " }),
+      jsx(Text, { color, children: currentPage + 1 }),
+      jsxs(Text, { dimColor: true, children: [
+        " / ",
+        totalPages
+      ] }),
+      currentPage < totalPages - 1 ? jsx(Text, { color, children: " ›" }) : jsx(Text, { dimColor: true, children: " ›" })
+    ] });
+  }
+  const dots = Array.from(
+    { length: totalPages },
+    (_, i) => i === currentPage ? jsx(Text, { color, children: "●" }, i) : jsx(Text, { dimColor: true, children: "○" }, i)
+  );
+  return jsx(Box, { gap: 1, children: dots });
+}
+
+export { Paginator as default };

package/dist/packem_shared/ProgressBar-DOfpVagn.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import useWindowSize from './useWindowSize-ugEmGZJm.js';
+import Text from './Text-DvAUdZcK.js';
+
+function ProgressBar({
+  character = "█",
+  columns: columnsProp = 0,
+  left = 0,
+  percent = 1,
+  right = 0,
+  rightPad = false,
+  ...textProps
+}) {
+  const { columns: terminalColumns } = useWindowSize();
+  const screen = columnsProp || terminalColumns || 80;
+  const space = Math.max(0, screen - right - left);
+  const filled = Math.min(Math.floor(space * Math.max(0, Math.min(1, percent))), space);
+  const bar = character.repeat(filled) + (rightPad ? " ".repeat(space - filled) : "");
+  return jsx(Text, { ...textProps, children: bar });
+}
+
+export { ProgressBar as default };

package/dist/packem_shared/Renderer-zZ5O3vxc.js

@@ -0,0 +1,31 @@
+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);
+};
+
+const {
+  createRequire
+} = __cjs_getBuiltinModule("node:module");
+
+const require$1 = createRequire(import.meta.url);
+const native = require$1("../../index.js");
+const _native = native;
+const Renderer = _native.Renderer;
+const TerminalGuard = _native.TerminalGuard;
+const terminalSize = _native.terminalSize;
+
+export { Renderer, TerminalGuard, terminalSize };

package/dist/packem_shared/ResizeObserverEntry-Br4seLeQ.js

@@ -0,0 +1,102 @@
+class ResizeObserverEntry {
+  constructor(target, contentRect) {
+    this.target = target;
+    this.contentRect = contentRect;
+  }
+  target;
+  contentRect;
+}
+class ResizeObserver {
+  callback;
+  observedElements = /* @__PURE__ */ new Set();
+  constructor(callback) {
+    this.callback = callback;
+  }
+  observe(element) {
+    if (this.observedElements.has(element)) {
+      return;
+    }
+    this.observedElements.add(element);
+    element.resizeObservers ??= /* @__PURE__ */ new Set();
+    element.resizeObservers.add(this);
+    let lastMeasuredSize = element.internal_lastMeasuredSize;
+    if (lastMeasuredSize === void 0 && element.yogaNode) {
+      const width = element.yogaNode.getComputedWidth();
+      const height = element.yogaNode.getComputedHeight();
+      if (!Number.isNaN(width) && !Number.isNaN(height)) {
+        lastMeasuredSize = { height, width };
+        element.internal_lastMeasuredSize = lastMeasuredSize;
+      }
+    }
+    if (lastMeasuredSize) {
+      const entry = new ResizeObserverEntry(element, lastMeasuredSize);
+      try {
+        this.callback([entry], this);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  }
+  unobserve(element) {
+    this.observedElements.delete(element);
+    element.resizeObservers?.delete(this);
+  }
+  disconnect() {
+    for (const element of this.observedElements) {
+      element.resizeObservers?.delete(this);
+    }
+    this.observedElements.clear();
+  }
+  /**
+   * Internal method called by the layout engine after computing layout.
+   */
+  internalTrigger(entries) {
+    try {
+      this.callback(entries, this);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}
+function measureAndExtractObservers(node, observerEntries, forceCache = false) {
+  const hasObservers = node.resizeObservers && node.resizeObservers.size > 0;
+  if ((hasObservers || forceCache) && node.yogaNode) {
+    const width = node.yogaNode.getComputedWidth();
+    const height = node.yogaNode.getComputedHeight();
+    if (!Number.isNaN(width) && !Number.isNaN(height)) {
+      const lastSize = node.internal_lastMeasuredSize;
+      if (lastSize?.width !== width || lastSize.height !== height) {
+        node.internal_lastMeasuredSize = { height, width };
+        if (hasObservers) {
+          const entry = new ResizeObserverEntry(node, { height, width });
+          for (const observer of node.resizeObservers) {
+            if (!observerEntries.has(observer)) {
+              observerEntries.set(observer, []);
+            }
+            observerEntries.get(observer).push(entry);
+          }
+        }
+      }
+    }
+  }
+}
+function triggerResizeObservers(node, forceCache = false) {
+  const observerEntries = /* @__PURE__ */ new Map();
+  function traverse(n) {
+    measureAndExtractObservers(n, observerEntries, forceCache);
+    if (n.internal_static) {
+      return;
+    }
+    for (const child of n.childNodes) {
+      if (child.nodeName !== "#text") {
+        traverse(child);
+      }
+    }
+  }
+  traverse(node);
+  for (const [observer, entries] of observerEntries) {
+    observer.internalTrigger(entries);
+  }
+}
+
+export { ResizeObserverEntry, ResizeObserver as default, measureAndExtractObservers, triggerResizeObservers };

package/dist/packem_shared/ScrollBar-EWAs2Uc7.js

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import Box from './Box-D_pSJ9Jp.js';
+import Text from './Text-DvAUdZcK.js';
+
+const STYLE_CHARS = {
+  arrow: { lowerThumb: "╽", thumb: "┃", track: "|", upperThumb: "╿" },
+  block: { thumb: "█", track: "░" },
+  bold: { lowerThumb: "╿", thumb: "│", track: "┃", upperThumb: "╽" },
+  classic: { thumb: "┃", track: "|" },
+  dots: { thumb: "●", track: "·" },
+  double: { thumb: "┃", track: "║" },
+  doubleSingle: { lowerThumb: "╽", thumb: "┃", track: "│", upperThumb: "╿" },
+  line: { thumb: "│", track: " " },
+  round: { lowerThumb: "╽", thumb: "┃", track: "│", upperThumb: "╿" },
+  single: { lowerThumb: "╽", thumb: "┃", track: "│", upperThumb: "╿" },
+  singleDouble: { thumb: "┃", track: "║" },
+  thick: { thumb: "┃", track: "╏" }
+};
+const CORNER_CHARS = {
+  arrow: { bottomLeft: "└", bottomRight: "┘", topLeft: "┌", topRight: "┐" },
+  bold: { bottomLeft: "┗", bottomRight: "┛", topLeft: "┏", topRight: "┓" },
+  classic: { bottomLeft: "+", bottomRight: "+", topLeft: "+", topRight: "+" },
+  double: { bottomLeft: "╚", bottomRight: "╝", topLeft: "╔", topRight: "╗" },
+  doubleSingle: { bottomLeft: "╘", bottomRight: "╛", topLeft: "╒", topRight: "╕" },
+  round: { bottomLeft: "╰", bottomRight: "╯", topLeft: "╭", topRight: "╮" },
+  single: { bottomLeft: "└", bottomRight: "┘", topLeft: "┌", topRight: "┐" },
+  singleDouble: { bottomLeft: "╙", bottomRight: "╜", topLeft: "╓", topRight: "╖" }
+};
+const getStyleChars = (style) => {
+  const key = typeof style === "string" ? style : "single";
+  return STYLE_CHARS[key] ?? STYLE_CHARS["single"] ?? { thumb: "┃", track: "│" };
+};
+const getCornerChars = (style) => {
+  const key = typeof style === "string" ? style : "single";
+  return CORNER_CHARS[key] ?? CORNER_CHARS["single"] ?? { bottomLeft: "└", bottomRight: "┘", topLeft: "┌", topRight: "┐" };
+};
+const ScrollBar = ({
+  autoHide = false,
+  color,
+  contentHeight,
+  dimColor,
+  placement = "right",
+  scrollOffset,
+  style,
+  thumbChar,
+  trackChar,
+  viewportHeight
+}) => {
+  const chars = useMemo(() => {
+    const effectiveContentHeight = Math.max(contentHeight, viewportHeight);
+    if (autoHide && effectiveContentHeight <= viewportHeight) {
+      return null;
+    }
+    const styleChars = getStyleChars(style);
+    const resolvedThumbChar = thumbChar ?? styleChars.thumb;
+    const resolvedTrackChar = trackChar ?? styleChars.track;
+    const totalHalfSteps = viewportHeight * 2;
+    const viewportRatio = Math.min(viewportHeight / effectiveContentHeight, 1);
+    const thumbLengthHalf = Math.max(2, Math.round(totalHalfSteps * viewportRatio));
+    const maxScrollOffset = effectiveContentHeight - viewportHeight;
+    const scrollProgress = maxScrollOffset > 0 ? Math.min(Math.max(scrollOffset / maxScrollOffset, 0), 1) : 0;
+    const maxThumbStartHalf = totalHalfSteps - thumbLengthHalf;
+    const thumbStartHalf = Math.round(scrollProgress * maxThumbStartHalf);
+    const thumbEndHalf = thumbStartHalf + thumbLengthHalf;
+    const result = [];
+    for (let row = 0; row < viewportHeight; row += 1) {
+      const upperHalf = row * 2;
+      const lowerHalf = row * 2 + 1;
+      const upperIsThumb = upperHalf >= thumbStartHalf && upperHalf < thumbEndHalf;
+      const lowerIsThumb = lowerHalf >= thumbStartHalf && lowerHalf < thumbEndHalf;
+      if (upperIsThumb && lowerIsThumb) {
+        result.push(resolvedThumbChar);
+      } else if (upperIsThumb && !lowerIsThumb) {
+        result.push(styleChars.lowerThumb ?? resolvedThumbChar);
+      } else if (!upperIsThumb && lowerIsThumb) {
+        result.push(styleChars.upperThumb ?? resolvedThumbChar);
+      } else {
+        result.push(resolvedTrackChar);
+      }
+    }
+    return result;
+  }, [contentHeight, viewportHeight, scrollOffset, style, thumbChar, trackChar, autoHide]);
+  if (chars === null) {
+    return null;
+  }
+  if (placement === "inset") {
+    return jsx(Box, { flexDirection: "column", flexShrink: 0, width: 1, children: chars.map((char, index) => (
+      // eslint-disable-next-line react-x/no-array-index-key
+      jsx(Text, { color, dimColor, children: char }, index)
+    )) });
+  }
+  const cornerChars = getCornerChars(style);
+  const topCorner = placement === "left" ? cornerChars.topLeft : cornerChars.topRight;
+  const bottomCorner = placement === "left" ? cornerChars.bottomLeft : cornerChars.bottomRight;
+  return jsxs(Box, { flexDirection: "column", flexShrink: 0, width: 1, children: [
+    jsx(Text, { color, dimColor, children: topCorner }),
+    chars.map((char, index) => (
+      // eslint-disable-next-line react-x/no-array-index-key
+      jsx(Text, { color, dimColor, children: char }, index)
+    )),
+    jsx(Text, { color, dimColor, children: bottomCorner })
+  ] });
+};
+
+export { ScrollBar, ScrollBar as default };