ink-hud 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -1371,6 +1371,43 @@ var GridContext = React6.createContext({
   // Fallback
 });
 var GridItemContext = React6.createContext(null);
+function calculateItemWidths(children, totalWidth, columns, gap) {
+  const childArray = React6__default.default.Children.toArray(children);
+  const itemWidths = [];
+  const totalGapWidth = Math.max(0, (columns - 1) * gap);
+  const availableWidth = Math.max(0, totalWidth - totalGapWidth);
+  const baseColWidth = Math.floor(availableWidth / columns);
+  const remainder = availableWidth % columns;
+  let currentCol = 0;
+  let remainingExtra = remainder;
+  for (const child of childArray) {
+    const span = React6__default.default.isValidElement(child) && typeof child.props.span === "number" ? Math.min(Math.max(1, child.props.span), columns) : 1;
+    let itemExtra = 0;
+    const startCol = currentCol;
+    const endCol = Math.min(currentCol + span, columns);
+    for (let col = startCol; col < endCol && remainingExtra > 0; col++) {
+      if (col < remainder) {
+        itemExtra++;
+        remainingExtra--;
+      }
+    }
+    itemExtra = 0;
+    for (let col = currentCol; col < currentCol + span && col < columns; col++) {
+      if (col < remainder) {
+        itemExtra++;
+      }
+    }
+    const itemGapWidth = Math.max(0, (span - 1) * gap);
+    const itemWidth = baseColWidth * span + itemExtra + itemGapWidth;
+    itemWidths.push(itemWidth);
+    currentCol += span;
+    if (currentCol >= columns) {
+      currentCol = 0;
+      remainingExtra = remainder;
+    }
+  }
+  return itemWidths;
+}
 var Grid = ({
   columns = 12,
   gap = 0,
@@ -1389,9 +1426,19 @@ var Grid = ({
       stdout.off("resize", onResize);
     };
   }, [stdout]);
-  const defaultWidth = terminalWidth > 2 ? terminalWidth - 2 : terminalWidth;
+  const safetyMargin = widthOffset > 0 ? 0 : 2;
+  const defaultWidth = terminalWidth > safetyMargin ? terminalWidth - safetyMargin : terminalWidth;
   const totalWidth = propsWidth ?? Math.max(0, defaultWidth - widthOffset);
-  return /* @__PURE__ */ React6__default.default.createElement(GridContext.Provider, { value: { columns, gap, totalWidth, rowHeight } }, /* @__PURE__ */ React6__default.default.createElement(
+  const itemWidths = calculateItemWidths(children, totalWidth, columns, gap);
+  const childrenWithIndex = React6__default.default.Children.map(children, (child, index) => {
+    if (React6__default.default.isValidElement(child)) {
+      return React6__default.default.cloneElement(child, {
+        _gridIndex: index
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ React6__default.default.createElement(GridContext.Provider, { value: { columns, gap, totalWidth, rowHeight, itemWidths } }, /* @__PURE__ */ React6__default.default.createElement(
     ink.Box,
     {
       flexDirection: "row",
@@ -1400,7 +1447,7 @@ var Grid = ({
       rowGap: gap,
       width: totalWidth
     },
-    children
+    childrenWithIndex
   ));
 };
 var GridItem = ({
@@ -1408,20 +1455,32 @@ var GridItem = ({
   height,
   minHeight,
   overflow,
-  children
+  children,
+  _gridIndex
 }) => {
-  const { columns, gap, totalWidth, rowHeight: contextRowHeight } = React6.useContext(GridContext);
-  const totalGapWidth = Math.max(0, (columns - 1) * gap);
-  const availableWidth = Math.max(0, totalWidth - totalGapWidth);
-  const colWidth = availableWidth / columns;
-  const itemGapWidth = Math.max(0, (span - 1) * gap);
-  const basisWidth = Math.floor(colWidth * span + itemGapWidth);
+  const {
+    columns,
+    gap,
+    totalWidth,
+    rowHeight: contextRowHeight,
+    itemWidths
+  } = React6.useContext(GridContext);
+  let basisWidth;
+  if (itemWidths !== void 0 && _gridIndex !== void 0 && _gridIndex < itemWidths.length) {
+    basisWidth = itemWidths[_gridIndex] ?? 0;
+  } else {
+    const totalGapWidth = Math.max(0, (columns - 1) * gap);
+    const availableWidth = Math.max(0, totalWidth - totalGapWidth);
+    const colWidth = availableWidth / columns;
+    const itemGapWidth = Math.max(0, (span - 1) * gap);
+    basisWidth = Math.floor(colWidth * span + itemGapWidth);
+  }
   const effectiveHeight = height ?? contextRowHeight;
   return /* @__PURE__ */ React6__default.default.createElement(GridItemContext.Provider, { value: { width: basisWidth, height: effectiveHeight } }, /* @__PURE__ */ React6__default.default.createElement(
     ink.Box,
     {
-      flexGrow: 1,
-      flexShrink: 1,
+      flexGrow: 0,
+      flexShrink: 0,
       flexBasis: basisWidth,
       flexDirection: "column",
       ...effectiveHeight !== void 0 && { height: effectiveHeight },
@@ -1458,11 +1517,12 @@ function useChartLayout(props, config) {
     yTickCount = 5,
     yTickFormat,
     defaultWidth = 60,
+    defaultHeight = 15,
     min,
     max
   } = config;
   const gridContext = React6.useContext(GridItemContext);
-  const totalHeight = props.height ?? (typeof gridContext?.height === "number" ? gridContext.height : 15);
+  const totalHeight = props.height ?? (typeof gridContext?.height === "number" ? gridContext.height : defaultHeight);
   let totalWidth = props.width;
   if (totalWidth === void 0) {
     if (gridContext?.width) {
@@ -1742,8 +1802,8 @@ var ChartContainer = ({
   legendItems = [],
   children
 }) => {
-  const { totalWidth, plotWidth, plotHeight, yAxisWidth } = layout;
-  return /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column", width: totalWidth }, showLegend && legendPosition === "top" && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginBottom: 1, marginLeft: showYAxis ? yAxisWidth + 1 : 0 }, /* @__PURE__ */ React6__default.default.createElement(Legend, { items: legendItems, position: "horizontal" })), /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "row" }, showYAxis && yAxisConfig && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginRight: 1, width: yAxisWidth }, /* @__PURE__ */ React6__default.default.createElement(Axis, { type: "y", length: plotHeight, ...yAxisConfig })), /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column" }, children), showLegend && legendPosition === "right" && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginLeft: 2 }, /* @__PURE__ */ React6__default.default.createElement(Legend, { items: legendItems, position: "vertical" }))), showXAxis && xAxisConfig && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginLeft: showYAxis ? yAxisWidth + 1 : 0 }, /* @__PURE__ */ React6__default.default.createElement(Axis, { type: "x", length: plotWidth, ...xAxisConfig })), showLegend && legendPosition === "bottom" && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginTop: 1, marginLeft: showYAxis ? yAxisWidth + 1 : 0 }, /* @__PURE__ */ React6__default.default.createElement(Legend, { items: legendItems, position: "horizontal" })));
+  const { totalWidth, totalHeight, plotWidth, plotHeight, yAxisWidth } = layout;
+  return /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column", width: totalWidth, height: totalHeight }, showLegend && legendPosition === "top" && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginBottom: 1, marginLeft: showYAxis ? yAxisWidth + 1 : 0 }, /* @__PURE__ */ React6__default.default.createElement(Legend, { items: legendItems, position: "horizontal" })), /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "row" }, showYAxis && yAxisConfig && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginRight: 1, width: yAxisWidth }, /* @__PURE__ */ React6__default.default.createElement(Axis, { type: "y", length: plotHeight, ...yAxisConfig })), /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column" }, children), showLegend && legendPosition === "right" && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginLeft: 2 }, /* @__PURE__ */ React6__default.default.createElement(Legend, { items: legendItems, position: "vertical" }))), showXAxis && xAxisConfig && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginLeft: showYAxis ? yAxisWidth + 1 : 0 }, /* @__PURE__ */ React6__default.default.createElement(Axis, { type: "x", length: plotWidth, ...xAxisConfig })), showLegend && legendPosition === "bottom" && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginTop: 1, marginLeft: showYAxis ? yAxisWidth + 1 : 0 }, /* @__PURE__ */ React6__default.default.createElement(Legend, { items: legendItems, position: "horizontal" })));
 };
 function useChartCore(props) {
   const { series: seriesProp, data, seriesName, colors: colorsProp, colorPalette } = props;
@@ -2441,7 +2501,7 @@ var PieChart = ({
   if (coloredLines.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column", width: totalWidth, alignItems: "center" }, /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "row" }, /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column" }, coloredLines.map((segments, i) => /* @__PURE__ */ React6__default.default.createElement(ink.Text, { key: `chart-line-${i}` }, segments.map((segment, j) => /* @__PURE__ */ React6__default.default.createElement(
+  return /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column", width: totalWidth, height: layout.totalHeight }, /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "row", justifyContent: "center" }, /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column", width: canvasWidth }, coloredLines.map((segments, i) => /* @__PURE__ */ React6__default.default.createElement(ink.Text, { key: `chart-line-${i}` }, segments.map((segment, j) => /* @__PURE__ */ React6__default.default.createElement(
     ink.Text,
     {
       key: `seg-${i}-${j}`,
@@ -2513,9 +2573,11 @@ var Panel = ({
   const childContext = React6__default.default.useMemo(
     () => ({
       ...innerWidth !== void 0 ? { width: innerWidth } : {},
-      height: innerHeight
+      // Pass innerHeight if calculated, or pass the raw effectiveHeight for reference
+      // This allows children to know at least that a height constraint exists
+      height: innerHeight ?? (typeof effectiveHeight === "string" ? effectiveHeight : void 0)
     }),
-    [innerWidth, innerHeight]
+    [innerWidth, innerHeight, effectiveHeight]
   );
   return /* @__PURE__ */ React6__default.default.createElement(GridItemContext.Provider, { value: childContext }, /* @__PURE__ */ React6__default.default.createElement(ink.Box, { ...boxProps }, title && /* @__PURE__ */ React6__default.default.createElement(
     ink.Box,