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

package/dist/packem_shared/line-chart-VGU2l7pu.js

@@ -0,0 +1,139 @@
+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 DEFAULT_CHART_PALETTE = ["cyan", "magenta", "yellow", "green", "blue", "red"];
+const toPoints = (data) => {
+  if (data.length === 0) {
+    return [];
+  }
+  const first = data[0];
+  if (typeof first === "number") {
+    return data.map((y, x) => {
+      return { x, y };
+    });
+  }
+  return data;
+};
+const pickSeriesColor = (series, index, palette) => series.color ?? palette[index % palette.length] ?? "cyan";
+const computeExtents = (seriesList) => {
+  let xMin = Number.POSITIVE_INFINITY;
+  let xMax = Number.NEGATIVE_INFINITY;
+  let yMin = Number.POSITIVE_INFINITY;
+  let yMax = Number.NEGATIVE_INFINITY;
+  for (const { points } of seriesList) {
+    for (const point of points) {
+      if (point.x < xMin) {
+        xMin = point.x;
+      }
+      if (point.x > xMax) {
+        xMax = point.x;
+      }
+      if (point.y < yMin) {
+        yMin = point.y;
+      }
+      if (point.y > yMax) {
+        yMax = point.y;
+      }
+    }
+  }
+  return { xMax, xMin, yMax, yMin };
+};
+
+const DEFAULT_PALETTE = DEFAULT_CHART_PALETTE;
+const projectPoint = (point, config, pixelWidth, pixelHeight) => {
+  const xRange = config.xMax - config.xMin || 1;
+  const yRange = config.yMax - config.yMin || 1;
+  const nx = (point.x - config.xMin) / xRange;
+  const ny = (point.y - config.yMin) / yRange;
+  return {
+    px: Math.max(0, Math.min(pixelWidth - 1, Math.round(nx * (pixelWidth - 1)))),
+    py: Math.max(0, Math.min(pixelHeight - 1, Math.round((1 - ny) * (pixelHeight - 1))))
+  };
+};
+const drawSeriesOnCanvas = (context, mode, config) => {
+  context.clear();
+  const { axisColor, seriesList } = config;
+  const pixelWidth = Math.max(1, context.width * 2);
+  const pixelHeight = Math.max(1, context.height * 4);
+  for (let cellX = 0; cellX < context.width; cellX += 2) {
+    context.setCell(cellX, context.height - 1, "·", { color: axisColor, dim: true });
+  }
+  for (const { color, points } of seriesList) {
+    if (points.length === 0) {
+      continue;
+    }
+    const grid = createBrailleGrid(context.width, context.height);
+    if (mode === "scatter") {
+      for (const point of points) {
+        const projected = projectPoint(point, config, pixelWidth, pixelHeight);
+        grid.plotPoint(projected.px, projected.py);
+      }
+    } else {
+      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, { color });
+  }
+};
+function LineChart({
+  axisColor = "gray",
+  height = 10,
+  maxY,
+  minY,
+  palette = DEFAULT_PALETTE,
+  series,
+  showLegend = true,
+  width = 40
+}) {
+  const config = useMemo(() => {
+    const seriesList = series.map((input, index) => {
+      return {
+        color: pickSeriesColor(input, index, palette),
+        points: toPoints(input.data),
+        series: input
+      };
+    });
+    const extents = computeExtents(seriesList);
+    return {
+      axisColor,
+      palette,
+      seriesList,
+      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, axisColor, palette, minY, maxY]);
+  return jsxs(Box, { flexDirection: "column", children: [
+    jsx(
+      Canvas,
+      {
+        draw: (context) => {
+          drawSeriesOnCanvas(context, "line", config);
+        },
+        height,
+        version: [series, width, height, minY, maxY, axisColor, palette],
+        width
+      }
+    ),
+    showLegend ? jsx(Box, { gap: 2, marginTop: 1, children: config.seriesList.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: "●" }),
+        jsx(Text, { children: input.label ?? `Series ${index + 1}` })
+      ] }, `${index}:${input.label ?? ""}`)
+    )) }) : void 0
+  ] });
+}
+
+export { DEFAULT_CHART_PALETTE as D, LineChart as L, projectPoint as a, computeExtents as c, drawSeriesOnCanvas as d, pickSeriesColor as p, toPoints as t };

package/dist/packem_shared/{measure-element-Reza_yfC.js → measure-element-Bc6PEaIe.js}

@@ -1,5 +1,5 @@
 import Yoga from 'yoga-layout';
-import { getScrollTop, getScrollLeft } from './getScrollHeight-BubfU_df.js';
+import { getScrollTop, getScrollLeft } from './getScrollHeight-Cz3CDQN2.js';
 import squashTextNodes from './squashTextNodesWithMap-iqm6OMMT.js';
 
 const getAbsoluteBorderPosition = (node) => {
@@ -71,10 +71,10 @@ const processLayout = (node, callbacks) => {
 const measureElement = (node) => {
   const position = getAbsolutePosition(node);
   return {
-    height: node.yogaNode?.getComputedHeight() ?? 0,
-    width: node.yogaNode?.getComputedWidth() ?? 0,
-    x: position?.x ?? 0,
-    y: position?.y ?? 0
+    height: Math.round(node.yogaNode?.getComputedHeight() ?? 0),
+    width: Math.round(node.yogaNode?.getComputedWidth() ?? 0),
+    x: Math.round(position?.x ?? 0),
+    y: Math.round(position?.y ?? 0)
   };
 };
 const getInnerWidth = (node) => {
@@ -85,7 +85,7 @@ const getInnerWidth = (node) => {
   const width = yogaNode.getComputedWidth() ?? 0;
   const borderLeft = yogaNode.getComputedBorder(Yoga.EDGE_LEFT);
   const borderRight = yogaNode.getComputedBorder(Yoga.EDGE_RIGHT);
-  return width - borderLeft - borderRight;
+  return Math.round(width - borderLeft - borderRight);
 };
 const getInnerHeight = (node) => {
   const { yogaNode } = node;
@@ -95,7 +95,7 @@ const getInnerHeight = (node) => {
   const height = yogaNode.getComputedHeight() ?? 0;
   const borderTop = yogaNode.getComputedBorder(Yoga.EDGE_TOP);
   const borderBottom = yogaNode.getComputedBorder(Yoga.EDGE_BOTTOM);
-  return height - borderTop - borderBottom;
+  return Math.round(height - borderTop - borderBottom);
 };
 const getBoundingBox = (node) => {
   const { yogaNode } = node;
@@ -123,7 +123,12 @@ const getBoundingBox = (node) => {
     }
     parent = parent.parentNode;
   }
-  return { height, width, x, y };
+  return {
+    height: Math.round(height),
+    width: Math.round(width),
+    x: Math.round(x),
+    y: Math.round(y)
+  };
 };
 const getAddedScrollHeight = (node) => {
   const scrollHeight = node.internal_scrollState?.scrollHeight ?? 0;
@@ -280,7 +285,7 @@ const getRelativeTop = (node, ancestor) => {
   if (ancestor !== void 0 && parent !== ancestor) {
     return void 0;
   }
-  return top;
+  return Math.round(top);
 };
 const getRelativeLeft = (node, ancestor) => {
   if (!node.yogaNode || node === ancestor) {
@@ -297,7 +302,7 @@ const getRelativeLeft = (node, ancestor) => {
   if (ancestor !== void 0 && parent !== ancestor) {
     return void 0;
   }
-  return left;
+  return Math.round(left);
 };
 const getText = (node) => {
   if (node.nodeName === "#text") {
@@ -325,14 +330,14 @@ const collectSortedFragments = (node) => {
       if (currentSelectable) {
         const text = getText(currentNode);
         fragments.push({
-          height: currentNode.yogaNode?.getComputedHeight() ?? 0,
+          height: Math.round(currentNode.yogaNode?.getComputedHeight() ?? 0),
           node: currentNode,
           text,
-          visualX,
-          visualY,
-          width: currentNode.yogaNode?.getComputedWidth() ?? 0,
-          x,
-          y
+          visualX: Math.round(visualX),
+          visualY: Math.round(visualY),
+          width: Math.round(currentNode.yogaNode?.getComputedWidth() ?? 0),
+          x: Math.round(x),
+          y: Math.round(y)
         });
         return { h: 0, hasContent: true, v: 0 };
       }
@@ -390,7 +395,11 @@ const collectSortedFragments = (node) => {
     }
     return a.x - b.x;
   });
-  return { fragments, removedHorizontal: h, removedVertical: v };
+  return {
+    fragments,
+    removedHorizontal: Math.round(h),
+    removedVertical: Math.round(v)
+  };
 };
 
 export { calculateScrollbarThumb as a, collectSortedFragments as b, calculateScrollbarLayout as c, getBoundingBox as d, getHorizontalScrollbarBoundingBox as e, getInnerHeight as f, getAddedScrollHeight as g, getInnerWidth as h, getRelativeLeft as i, getRelativeTop as j, getText as k, getVerticalScrollbarBoundingBox as l, measureElement as m, getAbsoluteContentPosition as n, getAbsolutePosition as o, processLayout as p };

package/dist/packem_shared/{measure-text-DItZYotK.js → measure-text-BdOhbOeh.js}

@@ -206,6 +206,9 @@ class StyledLine {
       }
     }
     this.charData[index] = start | (isFullWidth ? FULL_WIDTH_FLAG : 0);
+    if (this.trySetStyleAtIndex(index, cleanFormatFlags, fgColor, bgColor, link)) {
+      return;
+    }
     this.splitSpansAt(index);
     this.splitSpansAt(index + 1);
     let current = 0;
@@ -257,8 +260,7 @@ class StyledLine {
       }
       this.charData[index] = start | (isFullWidth ? FULL_WIDTH_FLAG : 0);
     }
-    const existingSpan = this.getSpan(index);
-    if (existingSpan?.formatFlags === cleanFormatFlags && existingSpan.fgColor === fgColor && existingSpan.bgColor === bgColor && existingSpan.link === link) {
+    if (this.trySetStyleAtIndex(index, cleanFormatFlags, fgColor, bgColor, link)) {
       return;
     }
     this.splitSpansAt(index);
@@ -475,11 +477,13 @@ class StyledLine {
       currentChar += line.length;
       currentOffset += lineText.length;
     }
-    result.spans = allLines.flatMap((l) => l.getSpans().map((s) => {
-      return {
-        ...s
-      };
-    }));
+    result.spans = allLines.flatMap(
+      (l) => l.getSpans().map((s) => {
+        return {
+          ...s
+        };
+      })
+    );
     result.mergeSpans();
     return result;
   }
@@ -674,6 +678,63 @@ class StyledLine {
       current += span.length;
     }
   }
+  /**
+   * Try to apply a single-char style at `index` by matching or merging
+   * with an adjacent span, avoiding splitSpansAt + mergeSpans.
+   *
+   * Returns true if the style was applied (or was already correct),
+   * false if the caller must fall through to the split/update/merge path.
+   *
+   * Ported from jacob314/ink PR #123 (Google LLC, Apache-2.0).
+   */
+  trySetStyleAtIndex(index, formatFlags, fgColor, bgColor, link) {
+    if (!this.spans) {
+      return false;
+    }
+    let currentOffset = 0;
+    let spanIndex = -1;
+    let span;
+    for (let i = 0; i < this.spans.length; i++) {
+      const s = this.spans[i];
+      if (currentOffset <= index && currentOffset + s.length > index) {
+        spanIndex = i;
+        span = s;
+        break;
+      }
+      currentOffset += s.length;
+    }
+    if (!span) {
+      return false;
+    }
+    if (span.formatFlags === formatFlags && span.fgColor === fgColor && span.bgColor === bgColor && span.link === link) {
+      return true;
+    }
+    if (index === currentOffset && spanIndex > 0) {
+      const previousSpan = this.spans[spanIndex - 1];
+      if (previousSpan.formatFlags === formatFlags && previousSpan.fgColor === fgColor && previousSpan.bgColor === bgColor && previousSpan.link === link) {
+        previousSpan.length += 1;
+        if (span.length === 1) {
+          this.spans.splice(spanIndex, 1);
+        } else {
+          span.length -= 1;
+        }
+        return true;
+      }
+    }
+    if (index === currentOffset + span.length - 1 && spanIndex < this.spans.length - 1) {
+      const nextSpan = this.spans[spanIndex + 1];
+      if (nextSpan.formatFlags === formatFlags && nextSpan.fgColor === fgColor && nextSpan.bgColor === bgColor && nextSpan.link === link) {
+        nextSpan.length += 1;
+        if (span.length === 1) {
+          this.spans.splice(spanIndex, 1);
+        } else {
+          span.length -= 1;
+        }
+        return true;
+      }
+    }
+    return false;
+  }
   mergeSpans() {
     if (this.spans === void 0) {
       return;
@@ -1101,6 +1162,12 @@ const clearStringWidthCache = () => {
   styledLineCache.clear();
 };
 const inkCharacterWidth = (text) => {
+  if (text.length === 1) {
+    const code = text.codePointAt(0);
+    if (code !== void 0 && code >= 32 && code < 127) {
+      return 1;
+    }
+  }
   const cached = widthCache.get(text);
   if (cached !== void 0) {
     return cached;

package/dist/packem_shared/{measureElement-CTgFCmKd.js → measureElement-DTELRaij.js}

@@ -1,4 +1,4 @@
 import 'yoga-layout';
-export { c as calculateScrollbarLayout, a as calculateScrollbarThumb, b as collectSortedFragments, m as default, g as getAddedScrollHeight, d as getBoundingBox, e as getHorizontalScrollbarBoundingBox, f as getInnerHeight, h as getInnerWidth, i as getRelativeLeft, j as getRelativeTop, k as getText, l as getVerticalScrollbarBoundingBox } from './measure-element-Reza_yfC.js';
-import './getScrollHeight-BubfU_df.js';
+export { c as calculateScrollbarLayout, a as calculateScrollbarThumb, b as collectSortedFragments, m as default, g as getAddedScrollHeight, d as getBoundingBox, e as getHorizontalScrollbarBoundingBox, f as getInnerHeight, h as getInnerWidth, i as getRelativeLeft, j as getRelativeTop, k as getText, l as getVerticalScrollbarBoundingBox } from './measure-element-Bc6PEaIe.js';
+import './getScrollHeight-Cz3CDQN2.js';
 import './squashTextNodesWithMap-iqm6OMMT.js';

package/dist/packem_shared/parseSgrMouse-4hpBJBsW.js

@@ -0,0 +1 @@
+export { p as parseSgrMouse } from './ansi-parser-BOP8fNdT.js';

package/dist/packem_shared/{processLayout-BQ9kXfd3.js → processLayout-B0Coz0Ua.js}

@@ -1,2 +1,2 @@
 import 'yoga-layout';
-export { n as getAbsoluteContentPosition, o as getAbsolutePosition, p as processLayout } from './measure-element-Reza_yfC.js';
+export { n as getAbsoluteContentPosition, o as getAbsolutePosition, p as processLayout } from './measure-element-Bc6PEaIe.js';

package/dist/packem_shared/{reconciler-gfmqURLy.js → reconciler-Dd7Z0A97.js}

@@ -10,7 +10,7 @@ import createReconciler from 'react-reconciler';
 import { NoEventPriority, DefaultEventPriority } from 'react-reconciler/constants.js';
 import { unstable_shouldYield, unstable_scheduleCallback, unstable_now, unstable_cancelCallback } from 'scheduler';
 import Yoga from 'yoga-layout';
-import { b as insertBeforeNode, d as appendChildNode, s as setTextNodeValue, e as emitLayoutListeners, r as removeChildNode, f as createTextNode, c as createNode, h as setStyle, j as setAttribute } from './dom-DvzhsAez.js';
+import { b as insertBeforeNode, d as appendChildNode, s as setTextNodeValue, m as markNodeAsDirty, e as emitLayoutListeners, r as removeChildNode, f as createTextNode, c as createNode, h as setStyle, j as setAttribute } from './dom-CrbpQgat.js';
 
 const positionEdges = [
   ["top", Yoga.EDGE_TOP],
@@ -419,62 +419,76 @@ const reconcilerInstance = createReconciler({
     if (!props && !style) {
       return;
     }
+    let shouldMarkDirty = Boolean(style);
     if (props) {
       for (const [key, value] of Object.entries(props)) {
+        if (key === "children") {
+          continue;
+        }
         if (key === "style") {
           setStyle(node, value);
           continue;
         }
         if (key === "internal_transform") {
           node.internal_transform = value;
+          shouldMarkDirty = true;
           continue;
         }
         if (key === "internal_cursor") {
           node.internal_cursor = value;
+          shouldMarkDirty = true;
           continue;
         }
         if (key === "internal_static") {
           node.internal_static = true;
+          shouldMarkDirty = true;
           continue;
         }
         if (key === "sticky") {
           node.internal_sticky = value;
+          shouldMarkDirty = true;
           continue;
         }
         if (key === "internalStickyAlternate") {
           node.internal_stickyAlternate = value;
+          shouldMarkDirty = true;
           continue;
         }
         if (key === "opaque") {
           node.internal_opaque = value;
+          shouldMarkDirty = true;
           continue;
         }
         if (key === "scrollbar") {
           node.internal_scrollbar = value;
+          shouldMarkDirty = true;
           continue;
         }
         if (key === "internal_terminalCursorFocus") {
           node.internal_terminalCursorFocus = value;
+          shouldMarkDirty = true;
           continue;
         }
         if (key === "internal_terminalCursorPosition") {
           node.internal_terminalCursorPosition = value;
-          continue;
-        }
-        if (key === "internal_static") {
-          node.internal_static = true;
+          shouldMarkDirty = true;
           continue;
         }
         if (key === "cachedRender") {
           node.cachedRender = value;
+          shouldMarkDirty = true;
           continue;
         }
         setAttribute(node, key, value);
+        shouldMarkDirty = true;
       }
     }
     if (style && node.yogaNode) {
       styles(node.yogaNode, style, newProps["style"] ?? {});
     }
+    if (shouldMarkDirty) {
+      markNodeAsDirty(node);
+    }
   },
   createInstance(originalType, newProps, rootNode, hostContext) {
     if (hostContext.isInsideText && originalType === "ink-box") {
@@ -578,6 +592,7 @@ const reconcilerInstance = createReconciler({
   hideInstance(node) {
     node.internal_hidden = true;
     node.yogaNode?.setDisplay(Yoga.DISPLAY_NONE);
+    markNodeAsDirty(node);
   },
   hideTextInstance(node) {
     setTextNodeValue(node, "");
@@ -668,6 +683,7 @@ const reconcilerInstance = createReconciler({
   unhideInstance(node) {
     node.internal_hidden = false;
     node.yogaNode?.setDisplay(Yoga.DISPLAY_FLEX);
+    markNodeAsDirty(node);
   },
   unhideTextInstance(node, text) {
     setTextNodeValue(node, text);

package/dist/packem_shared/{reconciler-BXf6miSS.js → reconciler-mzMwSOft.js}

@@ -2,9 +2,9 @@ import { createContext } from 'react';
 import createReconciler from 'react-reconciler';
 import { NoEventPriority, DiscreteEventPriority, DefaultEventPriority } from 'react-reconciler/constants.js';
 import { unstable_shouldYield, unstable_scheduleCallback, unstable_now, unstable_cancelCallback } from 'scheduler';
-import { LayoutNode } from './LayoutNode-Cjnsodiy.js';
-import { applyStyles, resolveColor } from './NAMED_COLORS-a4QBvb5r.js';
-import { g as getStringWidth } from './text-width-DhuarWcB.js';
+import { LayoutNode } from './LayoutNode-DAkKg9TE.js';
+import { applyStyles, resolveColor } from './NAMED_COLORS-DcI3erCu.js';
+import { g as getStringWidth } from './text-width-Db-AxMea.js';
 
 let onAfterCommit = null;
 function setOnAfterCommit(function_) {
@@ -17,22 +17,30 @@ function resolveNodeColors(props) {
   let styles;
   if (props.styles === void 0) {
     styles = 0;
-    if (props.bold)
+    if (props.bold) {
       styles |= 1;
-    if (props.dim || props.dimColor)
+    }
+    if (props.dim || props.dimColor) {
       styles |= 2;
-    if (props.italic)
+    }
+    if (props.italic) {
       styles |= 4;
-    if (props.underline)
+    }
+    if (props.underline) {
       styles |= 8;
-    if (props.blink)
+    }
+    if (props.blink) {
       styles |= 16;
-    if (props.inverse)
+    }
+    if (props.inverse) {
       styles |= 32;
-    if (props.hidden)
+    }
+    if (props.hidden) {
       styles |= 64;
-    if (props.strikethrough)
+    }
+    if (props.strikethrough) {
       styles |= 128;
+    }
   } else {
     styles = props.styles;
   }
@@ -125,8 +133,9 @@ const hostConfig = {
   },
   HostTransitionContext: createContext(null),
   insertBefore(parentInstance, child, beforeChild) {
-    if (child.parent)
+    if (child.parent) {
       child.remove();
+    }
     const index = parentInstance.children.indexOf(beforeChild);
     parentInstance.insertChild(child, index);
   },
@@ -165,8 +174,9 @@ const hostConfig = {
   requestPostPaintCallback: () => {
   },
   resetAfterCommit(containerInfo) {
-    if (typeof onAfterCommit === "function")
+    if (typeof onAfterCommit === "function") {
       onAfterCommit();
+    }
   },
   resolveEventTimeStamp: () => -1.1,
   resolveEventType: () => null,