@visulima/tui 1.0.0-alpha.2 → 1.0.0-alpha.4

package/dist/packem_shared/ApprovalPrompt-BXdPros1.js

@@ -0,0 +1,104 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import useFocus from './useFocus-DLoGQJd9.js';
+import useInput from './useInput-DKZbqMRc.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+const RISK_COLOR = {
+  high: "red",
+  low: "green",
+  medium: "yellow"
+};
+const RISK_LABEL = {
+  high: "HIGH RISK",
+  low: "LOW RISK",
+  medium: "MEDIUM RISK"
+};
+const formatParameterValue = (value) => {
+  if (value === null) {
+    return "null";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+};
+function ApprovalPrompt({
+  accentColor,
+  autoFocus = true,
+  children,
+  description,
+  isDisabled = false,
+  onDecision,
+  params,
+  risk = "medium",
+  tool
+}) {
+  const riskColor = RISK_COLOR[risk];
+  const color = accentColor ?? riskColor;
+  const { isFocused } = useFocus({ autoFocus, isActive: !isDisabled });
+  useInput(
+    useCallback(
+      (input, key) => {
+        const typed = input.toLowerCase();
+        if (typed === "y" || key.return) {
+          onDecision("allow-once");
+          return;
+        }
+        if (typed === "a") {
+          onDecision("allow-always");
+          return;
+        }
+        if (typed === "n" || key.escape) {
+          onDecision("deny");
+        }
+      },
+      [onDecision]
+    ),
+    { isActive: !isDisabled && isFocused }
+  );
+  const parameterEntries = params === void 0 ? [] : Object.entries(params);
+  return jsxs(Box, { borderColor: riskColor, borderStyle: "round", flexDirection: "column", paddingX: 1, children: [
+    jsxs(Box, { children: [
+      jsxs(Text, { backgroundColor: riskColor, color: "black", children: [
+        " ",
+        RISK_LABEL[risk],
+        " "
+      ] }),
+      jsxs(Text, { children: [
+        " ",
+        jsx(Text, { bold: true, children: tool })
+      ] })
+    ] }),
+    description === void 0 ? void 0 : jsx(Box, { marginTop: 1, children: jsx(Text, { children: description }) }),
+    parameterEntries.length === 0 ? void 0 : jsx(Box, { flexDirection: "column", marginTop: 1, children: parameterEntries.map(([name, value]) => jsxs(Box, { children: [
+      jsxs(Text, { color: "cyan", children: [
+        name,
+        "="
+      ] }),
+      jsx(Text, { wrap: "truncate-end", children: formatParameterValue(value) })
+    ] }, name)) }),
+    children === void 0 ? void 0 : jsx(Box, { marginTop: 1, children }),
+    jsx(Box, { marginTop: 1, children: jsxs(Text, { children: [
+      "Allow? [",
+      jsx(Text, { bold: true, color, children: "y" }),
+      "es /",
+      " ",
+      jsx(Text, { bold: true, color, children: "a" }),
+      "lways /",
+      " ",
+      jsx(Text, { bold: true, color, children: "n" }),
+      "o ]"
+    ] }) })
+  ] });
+}
+
+export { ApprovalPrompt as default };

package/dist/packem_shared/AreaChart-CmTcxLum.js

@@ -0,0 +1,116 @@
+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 { t as toPoints, p as pickSeriesColor, c as computeExtents, D as DEFAULT_CHART_PALETTE, a as projectPoint } from './line-chart-VGU2l7pu.js';
+import Text from './Text-CtUwV89_.js';
+
+const DEFAULT_PALETTE = DEFAULT_CHART_PALETTE;
+const FILL_GLYPH = {
+  heavy: "▓",
+  light: "░",
+  medium: "▒"
+};
+function AreaChart({
+  axisColor = "gray",
+  fillDensity = "medium",
+  height = 10,
+  maxY,
+  minY,
+  palette = DEFAULT_PALETTE,
+  series,
+  showLegend = true,
+  width = 40
+}) {
+  const prepared = useMemo(() => {
+    const list = series.map((input, index) => {
+      return {
+        color: pickSeriesColor(input, index, palette),
+        points: toPoints(input.data),
+        series: input
+      };
+    });
+    const extents = computeExtents(list);
+    return {
+      list,
+      xMax: extents.xMax === Number.NEGATIVE_INFINITY ? 1 : extents.xMax,
+      xMin: extents.xMin === Number.POSITIVE_INFINITY ? 0 : extents.xMin,
+      yMax: maxY ?? (extents.yMax === Number.NEGATIVE_INFINITY ? 1 : extents.yMax),
+      yMin: minY ?? (extents.yMin === Number.POSITIVE_INFINITY ? 0 : extents.yMin)
+    };
+  }, [series, palette, minY, maxY]);
+  const glyph = FILL_GLYPH[fillDensity];
+  return jsxs(Box, { flexDirection: "column", children: [
+    jsx(
+      Canvas,
+      {
+        draw: (context) => {
+          context.clear();
+          const pixelWidth = context.width * 2;
+          const pixelHeight = context.height * 4;
+          const config = {
+            xMax: prepared.xMax,
+            xMin: prepared.xMin,
+            yMax: prepared.yMax,
+            yMin: prepared.yMin
+          };
+          for (const { color, points } of prepared.list) {
+            if (points.length === 0) {
+              continue;
+            }
+            for (let cellX = 0; cellX < context.width; cellX += 1) {
+              let sampleY;
+              for (const point of points) {
+                const { px, py } = projectPoint(point, config, pixelWidth, pixelHeight);
+                const candidateCellX = Math.floor(px / 2);
+                if (candidateCellX === cellX) {
+                  const candidateCellY = Math.floor(py / 4);
+                  if (sampleY === void 0 || candidateCellY < sampleY) {
+                    sampleY = candidateCellY;
+                  }
+                }
+              }
+              if (sampleY === void 0) {
+                continue;
+              }
+              for (let cellY = sampleY + 1; cellY < context.height; cellY += 1) {
+                context.setCell(cellX, cellY, glyph, { color, dim: true });
+              }
+            }
+          }
+          for (let cellX = 0; cellX < context.width; cellX += 2) {
+            context.setCell(cellX, context.height - 1, "·", { color: axisColor, dim: true });
+          }
+          for (const { color, points } of prepared.list) {
+            if (points.length === 0) {
+              continue;
+            }
+            const grid = createBrailleGrid(context.width, context.height);
+            let previous = projectPoint(points[0], config, pixelWidth, pixelHeight);
+            grid.plotPoint(previous.px, previous.py);
+            for (let index = 1; index < points.length; index += 1) {
+              const current = projectPoint(points[index], config, pixelWidth, pixelHeight);
+              grid.plotLine(previous.px, previous.py, current.px, current.py);
+              previous = current;
+            }
+            grid.flush(context, { bold: true, color });
+          }
+        },
+        height,
+        version: [series, width, height, minY, maxY, fillDensity, axisColor, palette],
+        width
+      }
+    ),
+    showLegend ? jsx(Box, { gap: 2, marginTop: 1, children: prepared.list.map(({ color, series: input }, index) => (
+      // Composite key: series index plus label so two
+      // series sharing a label don't collide.
+      jsxs(Box, { gap: 1, children: [
+        jsx(Text, { color, children: glyph }),
+        jsx(Text, { children: input.label ?? `Series ${index + 1}` })
+      ] }, `${index}:${input.label ?? ""}`)
+    )) }) : void 0
+  ] });
+}
+
+export { AreaChart as default };

package/dist/packem_shared/{Badge-Dk7EGGM6.js → Badge-CUfbXwAB.js}

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import Text from './Text-DvAUdZcK.js';
+import Text from './Text-CtUwV89_.js';
 
 function Badge({ children, color = "magenta" }) {
   const formattedChildren = typeof children === "string" ? children.toUpperCase() : children;

package/dist/packem_shared/BarChart-DWRae67P.js

@@ -0,0 +1,87 @@
+import { jsx, jsxs } 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 = ["cyan", "magenta", "yellow", "green", "blue", "red"];
+const findMax = (data, userMax) => {
+  if (userMax !== void 0) {
+    return userMax;
+  }
+  if (data.length === 0) {
+    return 0;
+  }
+  let max = data[0].value;
+  for (let index = 1; index < data.length; index += 1) {
+    const { value } = data[index];
+    if (value > max) {
+      max = value;
+    }
+  }
+  return max;
+};
+const colorFor = (index, palette, datum) => datum.color ?? palette[index % palette.length] ?? "cyan";
+function BarChart({
+  data,
+  height = 10,
+  max: maxOverride,
+  orientation = "vertical",
+  palette = DEFAULT_PALETTE,
+  showLabels = true,
+  showValues = false,
+  width: widthOverride
+}) {
+  const computedMax = useMemo(() => findMax(data, maxOverride), [data, maxOverride]);
+  if (orientation === "horizontal") {
+    const plotWidth2 = widthOverride ?? 24;
+    return jsx(Box, { flexDirection: "column", children: data.map((datum, index) => {
+      const ratio = computedMax === 0 ? 0 : datum.value / computedMax;
+      const color = colorFor(index, palette, datum);
+      return jsxs(Box, { gap: 1, children: [
+        showLabels && datum.label !== void 0 ? jsx(Box, { flexShrink: 0, minWidth: 8, children: jsx(Text, { dimColor: true, wrap: "truncate-end", children: datum.label }) }) : void 0,
+        jsx(Box, { flexGrow: 1, flexShrink: 1, children: jsx(
+          Canvas,
+          {
+            draw: (context) => {
+              context.clear();
+              context.drawHBar(0, 0, plotWidth2, ratio, { color });
+            },
+            height: 1,
+            version: [datum.value, computedMax, color, plotWidth2],
+            width: plotWidth2
+          }
+        ) }),
+        showValues ? jsx(Box, { flexShrink: 0, children: jsx(Text, { children: String(datum.value) }) }) : void 0
+      ] }, index);
+    }) });
+  }
+  const barWidth = 2;
+  const gap = 1;
+  const plotWidth = widthOverride ?? Math.max(data.length * (barWidth + gap), 1);
+  return jsxs(Box, { flexDirection: "column", children: [
+    jsx(
+      Canvas,
+      {
+        draw: (context) => {
+          context.clear();
+          data.forEach((datum, index) => {
+            const ratio = computedMax === 0 ? 0 : datum.value / computedMax;
+            const color = colorFor(index, palette, datum);
+            const x = index * (barWidth + gap);
+            for (let column = 0; column < barWidth; column += 1) {
+              context.drawVBar(x + column, 0, height, ratio, { color });
+            }
+          });
+        },
+        height,
+        version: [data, computedMax, palette, barWidth, gap, height],
+        width: plotWidth
+      }
+    ),
+    showValues ? jsx(Box, { children: data.map((datum, index) => jsx(Box, { width: barWidth + gap, children: jsx(Text, { dimColor: true, children: String(datum.value).padEnd(barWidth + gap, " ") }) }, index)) }) : void 0,
+    showLabels ? jsx(Box, { children: data.map((datum, index) => jsx(Box, { width: barWidth + gap, children: jsx(Text, { dimColor: true, wrap: "truncate-end", children: (datum.label ?? "").padEnd(barWidth + gap, " ") }) }, index)) }) : void 0
+  ] });
+}
+
+export { BarChart as default };

package/dist/packem_shared/{BigText-CjMdY63X.js → BigText-CVq2X7B5.js}

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import CFonts from 'cfonts';
 import { useMemo } from 'react';
-import Text from './Text-DvAUdZcK.js';
+import Text from './Text-CtUwV89_.js';
 
 const defaults = {
   align: "left",

package/dist/packem_shared/BlinkDot-CrbHMR3L.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import useAnimation from './useAnimation-DV22qxiJ.js';
+import Text from './Text-CtUwV89_.js';
+
+function BlinkDot({ character = "●", color = "red", interval = 800, isActive = true }) {
+  const { frame } = useAnimation({ interval: Math.max(1, Math.floor(interval / 2)), isActive });
+  const visible = !isActive || frame % 2 === 0;
+  return jsx(Text, { color, children: visible ? character : " " });
+}
+
+export { BlinkDot as default };

package/dist/packem_shared/{Box-D_pSJ9Jp.js → Box-W1w_NGin.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
-import { a as accessibilityContext } from './AccessibilityContext-BLelHhNU.js';
-import { b as backgroundContext } from './BackgroundContext-BAUaxfOb.js';
+import { a as accessibilityContext } from './accessibility-context-BLelHhNU.js';
+import { b as backgroundContext } from './background-context-BAUaxfOb.js';
 
 const BOX_BASE_STYLE = {
   flexDirection: "row",
@@ -25,16 +25,14 @@ const Box = forwardRef(
   }, ref) => {
     const { isScreenReaderEnabled } = useContext(accessibilityContext);
     const label = ariaLabel ? jsx("ink-text", { children: ariaLabel }) : void 0;
+    const accessibility = role || ariaState ? { role, state: ariaState } : void 0;
     if (isScreenReaderEnabled && ariaHidden) {
       return null;
     }
     const boxElement = jsxs(
       "ink-box",
       {
-        internal_accessibility: {
-          role,
-          state: ariaState
-        },
+        internal_accessibility: accessibility,
         opaque,
         ref,
         scrollbar,

package/dist/packem_shared/Breadcrumb-CPdNxVYs.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+function Breadcrumb({ currentColor = "blue", items, separator = "›" }) {
+  return jsx(Box, { children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    return jsxs(Fragment, { children: [
+      index > 0 ? jsxs(Text, { dimColor: true, children: [
+        " ",
+        separator,
+        " "
+      ] }) : void 0,
+      jsxs(Text, { bold: isLast, color: isLast ? currentColor : void 0, dimColor: !isLast, children: [
+        item.icon === void 0 ? void 0 : jsxs(Fragment$1, { children: [
+          item.icon,
+          " "
+        ] }),
+        item.label
+      ] })
+    ] }, item.key ?? `${index}:${item.label}`);
+  }) });
+}
+
+export { Breadcrumb as default };

package/dist/packem_shared/Button-CBmTbJ_D.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import useFocus from './useFocus-DLoGQJd9.js';
+import useInput from './useInput-DKZbqMRc.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+const BORDER_STYLE = "round";
+const resolveTextColor = (variant, isFocused, isDisabled, accentColor) => {
+  if (isDisabled) {
+    return void 0;
+  }
+  if (variant === "primary" && isFocused) {
+    return "black";
+  }
+  if (isFocused) {
+    return accentColor;
+  }
+  return void 0;
+};
+function Button({ accentColor = "blue", autoFocus = false, children, isDisabled = false, onPress, variant = "primary" }) {
+  const { isFocused } = useFocus({ autoFocus, isActive: !isDisabled });
+  useInput(
+    useCallback(
+      (input, key) => {
+        if (!isFocused) {
+          return;
+        }
+        if (key.return || input === " ") {
+          onPress?.();
+        }
+      },
+      [isFocused, onPress]
+    ),
+    { isActive: !isDisabled && isFocused }
+  );
+  const textColor = resolveTextColor(variant, isFocused, isDisabled, accentColor);
+  if (variant === "ghost") {
+    return jsx(Box, { paddingX: 1, children: jsxs(Text, { bold: isFocused, color: textColor, dimColor: isDisabled, children: [
+      isFocused ? "▸ " : "  ",
+      children
+    ] }) });
+  }
+  const borderColor = (() => {
+    if (variant === "outline") {
+      return isFocused ? accentColor : "gray";
+    }
+    if (variant === "secondary") {
+      return accentColor;
+    }
+    return isFocused ? accentColor : void 0;
+  })();
+  const fillBackground = variant === "primary" && isFocused ? accentColor : void 0;
+  return jsx(Box, { backgroundColor: fillBackground, borderColor, borderStyle: BORDER_STYLE, paddingX: 1, children: jsx(Text, { bold: isFocused, color: textColor, dimColor: isDisabled, children }) });
+}
+
+export { Button as default };

package/dist/packem_shared/Calendar-C2Qxt-LA.js

@@ -0,0 +1,139 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, useState, useRef, useCallback } from 'react';
+import useFocus from './useFocus-DLoGQJd9.js';
+import useInput from './useInput-DKZbqMRc.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+
+const MONTH_NAMES = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+const WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+const startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+const shiftMonth = (date, delta) => {
+  const targetYear = date.getFullYear();
+  const targetMonth = date.getMonth() + delta;
+  const lastDay = new Date(targetYear, targetMonth + 1, 0).getDate();
+  const day = Math.min(date.getDate(), lastDay);
+  return new Date(targetYear, targetMonth, day);
+};
+const isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+const isOutOfRange = (date, minDate, maxDate) => {
+  if (minDate !== void 0 && date < startOfDay(minDate)) {
+    return true;
+  }
+  if (maxDate !== void 0 && date > startOfDay(maxDate)) {
+    return true;
+  }
+  return false;
+};
+const buildWeeks = (year, month, firstDayOfWeek) => {
+  const firstOfMonth = new Date(year, month, 1);
+  const firstDow = firstOfMonth.getDay();
+  const leadingBlanks = (firstDow - firstDayOfWeek + 7) % 7;
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const cells = [];
+  for (let index = 0; index < leadingBlanks; index += 1) {
+    cells.push(void 0);
+  }
+  for (let day = 1; day <= daysInMonth; day += 1) {
+    cells.push(new Date(year, month, day));
+  }
+  while (cells.length % 7 !== 0) {
+    cells.push(void 0);
+  }
+  const weeks = [];
+  for (let row = 0; row < cells.length; row += 7) {
+    weeks.push(cells.slice(row, row + 7));
+  }
+  return weeks;
+};
+function Calendar({
+  accentColor = "blue",
+  autoFocus = false,
+  defaultValue,
+  firstDayOfWeek = 1,
+  isDisabled = false,
+  maxDate,
+  minDate,
+  onChange,
+  onSubmit,
+  selectedColor = "green",
+  value
+}) {
+  const { isFocused } = useFocus({ autoFocus, isActive: !isDisabled });
+  const today = useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const initial = startOfDay(value ?? defaultValue ?? today);
+  const [internalCursor, setInternalCursor] = useState(initial);
+  const cursor = value ? startOfDay(value) : internalCursor;
+  const cursorRef = useRef(cursor);
+  cursorRef.current = cursor;
+  const weekdayLabels = useMemo(() => [...WEEKDAYS.slice(firstDayOfWeek), ...WEEKDAYS.slice(0, firstDayOfWeek)], [firstDayOfWeek]);
+  const weeks = useMemo(() => buildWeeks(cursor.getFullYear(), cursor.getMonth(), firstDayOfWeek), [cursor, firstDayOfWeek]);
+  const moveCursor = useCallback(
+    (next) => {
+      const clamped = startOfDay(next);
+      if (isOutOfRange(clamped, minDate, maxDate)) {
+        return;
+      }
+      if (value === void 0) {
+        setInternalCursor(clamped);
+      }
+      onChange?.(clamped);
+    },
+    [value, onChange, minDate, maxDate]
+  );
+  useInput(
+    useCallback(
+      (_, key) => {
+        if (!isFocused) {
+          return;
+        }
+        const { current } = cursorRef;
+        if (key.leftArrow) {
+          moveCursor(new Date(current.getFullYear(), current.getMonth(), current.getDate() - 1));
+        } else if (key.rightArrow) {
+          moveCursor(new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1));
+        } else if (key.upArrow) {
+          moveCursor(new Date(current.getFullYear(), current.getMonth(), current.getDate() - 7));
+        } else if (key.downArrow) {
+          moveCursor(new Date(current.getFullYear(), current.getMonth(), current.getDate() + 7));
+        } else if (key.pageUp) {
+          moveCursor(shiftMonth(current, -1));
+        } else if (key.pageDown) {
+          moveCursor(shiftMonth(current, 1));
+        } else if (key.return) {
+          onSubmit?.(current);
+        }
+      },
+      [isFocused, moveCursor, onSubmit]
+    ),
+    { isActive: !isDisabled && isFocused }
+  );
+  const monthLabel = `${MONTH_NAMES[cursor.getMonth()]} ${cursor.getFullYear()}`;
+  return jsxs(Box, { borderColor: isFocused ? accentColor : void 0, borderStyle: "round", flexDirection: "column", paddingX: 1, children: [
+    jsx(Box, { justifyContent: "center", children: jsx(Text, { bold: true, color: accentColor, children: monthLabel }) }),
+    jsx(Box, { marginTop: 1, children: weekdayLabels.map((name) => jsx(Box, { width: 3, children: jsx(Text, { dimColor: true, children: name.padEnd(2, " ") }) }, name)) }),
+    weeks.map((week, weekIndex) => jsx(Box, { children: week.map((day, dayIndex) => {
+      if (day === void 0) {
+        return jsx(Box, { width: 3, children: jsx(Text, { children: "   " }) }, dayIndex);
+      }
+      const isToday = isSameDay(day, today);
+      const isCursor = isSameDay(day, cursor);
+      const outOfRange = isOutOfRange(day, minDate, maxDate);
+      return jsx(Box, { width: 3, children: jsxs(
+        Text,
+        {
+          backgroundColor: isCursor && isFocused ? accentColor : void 0,
+          bold: isToday,
+          color: isCursor && isFocused ? "black" : isToday ? selectedColor : void 0,
+          dimColor: outOfRange || isDisabled,
+          children: [
+            String(day.getDate()).padStart(2, " "),
+            " "
+          ]
+        }
+      ) }, dayIndex);
+    }) }, weekIndex))
+  ] });
+}
+
+export { Calendar as default };