linecraft 0.2.0 → 0.2.2

package/lib/layout/grid.js

@@ -1,17 +1,44 @@
 // CSS Grid-based layout system for terminal components
 // Simplified grid that eliminates circular measurement complexity
 import { applyStyle } from '../utils/colors';
+import { getTrimmedTextWidth, stripAnsi } from '../utils/text';
+import { callComponent, createChildContext } from '../component';
+/**
+ * Extract character and color from spaceBetween option for a specific gap index
+ * spaceBetween can be a FillChar, or an array of FillChar values
+ */
+function getSpaceBetweenChar(spaceBetween, gapIndex) {
+    if (typeof spaceBetween === 'string') {
+        return { char: spaceBetween };
+    }
+    if (Array.isArray(spaceBetween)) {
+        const item = spaceBetween[gapIndex] ?? spaceBetween[spaceBetween.length - 1];
+        if (typeof item === 'string') {
+            return { char: item };
+        }
+        return { char: item.char, color: item.color };
+    }
+    // Single object
+    return { char: spaceBetween.char, color: spaceBetween.color };
+}
 function parseTemplateEntry(entry) {
     if (typeof entry === 'number') {
         return { type: 'fixed', value: entry };
     }
+    if (entry === 'auto') {
+        return { type: 'auto', value: 0 };
+    }
     if (typeof entry === 'string') {
+        // Shorthand: '*' means '1*'
+        if (entry === '*') {
+            return { type: 'flex', value: 0, flexRatio: 1 };
+        }
         // Parse flex unit: '1*', '2*', etc.
         const match = entry.match(/^(\d+)\*$/);
         if (match) {
             return { type: 'flex', value: 0, flexRatio: parseInt(match[1], 10) };
         }
-        throw new Error(`Invalid flex unit: ${entry}. Use format like '1*', '2*'`);
+        throw new Error(`Invalid flex unit: ${entry}. Use format like '*', '1*', '2*'`);
     }
     // Minmax: { min: 40, width: '2*' }
     const match = entry.width.match(/^(\d+)\*$/);
@@ -28,24 +55,44 @@ function parseTemplateEntry(entry) {
  * Calculate column widths from template
  * Reference: https://www.w3.org/TR/css-grid-1/#track-sizing
  */
-function calculateColumnWidths(template, availableWidth, columnGap, numChildren) {
-    // Expand template if needed (repeat last value)
-    const expandedTemplate = [];
-    for (let i = 0; i < numChildren; i++) {
-        if (i < template.length) {
-            expandedTemplate.push(template[i]);
+function expandTemplate(columns, autoColumns, template, count) {
+    // Priority: if columns/autoColumns are specified, use those (new API)
+    // Otherwise, if template is specified, use it where last value acts as autoColumns
+    // Otherwise, default to empty columns with '1*' autoColumns
+    let explicitColumns;
+    let autoColumn;
+    if (columns !== undefined || autoColumns !== undefined) {
+        // New API: explicit columns and/or autoColumns
+        explicitColumns = columns ?? [];
+        autoColumn = autoColumns ?? '1*';
+    }
+    else if (template !== undefined) {
+        // Deprecated API: template where last value acts as autoColumns
+        explicitColumns = template;
+        autoColumn = template.length > 0 ? template[template.length - 1] : '1*';
+    }
+    else {
+        // No columns specified: default to empty with '1*' autoColumns
+        explicitColumns = [];
+        autoColumn = '1*';
+    }
+    const expanded = [];
+    for (let i = 0; i < count; i++) {
+        if (i < explicitColumns.length) {
+            expanded.push(explicitColumns[i]);
         }
         else {
-            // Repeat last template value
-            expandedTemplate.push(template[template.length - 1] ?? '1*');
+            // Apply the same autoColumn value to all implicitly created columns
+            // (CSS Grid's grid-auto-columns is a single value applied to all auto columns)
+            expanded.push(autoColumn);
         }
     }
-    // If template is empty, use equal flex for all
-    if (expandedTemplate.length === 0) {
-        expandedTemplate.push('1*');
+    if (expanded.length === 0) {
+        expanded.push('1*');
     }
-    // Parse all template entries
-    const tracks = expandedTemplate.map(parseTemplateEntry);
+    return expanded;
+}
+function calculateColumnWidths(tracks, availableWidth, columnGap, autoContentWidths) {
     // Step 1: Calculate fixed track sizes
     let fixedTotal = 0;
     let flexTotal = 0;
@@ -65,6 +112,11 @@ function calculateColumnWidths(template, availableWidth, columnGap, numChildren)
             fixedTotal += track.value;
             flexTotal += track.flexRatio ?? 1;
         }
+        else if (track.type === 'auto') {
+            const autoWidth = autoContentWidths[i] ?? 0;
+            widths[i] = autoWidth;
+            fixedTotal += autoWidth;
+        }
     }
     // Step 2: Calculate gap space
     const gapSpace = columnGap * (tracks.length - 1);
@@ -84,172 +136,213 @@ function calculateColumnWidths(template, availableWidth, columnGap, numChildren)
         }
     }
     // Step 4: Round to integers
-    return widths.map(w => Math.floor(w));
-}
-/**
- * Create a grid component that renders to region
- */
-export function createGrid(region, options, ...children) {
-    return {
-        getHeight() {
-            // Calculate height by rendering children and checking for multi-line
-            const { template, columnGap = 0 } = options;
-            const validChildren = children.filter(c => c !== null && c !== undefined);
-            if (validChildren.length === 0) {
-                return 0;
+    const rounded = widths.map(w => Math.max(0, Math.floor(w)));
+    // Step 5: Clamp total width to available space (minus gaps)
+    // CRITICAL: Preserve auto column widths - only adjust flex columns
+    const maxContentWidth = Math.max(0, availableWidth - gapSpace);
+    let totalRounded = rounded.reduce((sum, w) => sum + w, 0);
+    if (totalRounded > maxContentWidth && totalRounded > 0) {
+        // Calculate auto/fixed total (these should not be scaled)
+        let autoFixedTotal = 0;
+        for (let i = 0; i < tracks.length; i++) {
+            if (tracks[i].type === 'auto' || tracks[i].type === 'fixed') {
+                autoFixedTotal += rounded[i];
             }
-            const columnWidths = calculateColumnWidths(template, region.width, columnGap, validChildren.length);
-            let maxLines = 1;
-            for (let i = 0; i < validChildren.length; i++) {
-                const child = validChildren[i];
-                const width = columnWidths[i] ?? 0;
-                const childCtx = {
-                    availableWidth: width,
-                    region: region,
-                    columnIndex: i,
-                    rowIndex: 0,
-                };
-                const result = child(childCtx);
-                if (result !== null) {
-                    const lines = Array.isArray(result) ? result.length : 1;
-                    maxLines = Math.max(maxLines, lines);
+        }
+        // Only scale flex columns if needed
+        const flexTotal = totalRounded - autoFixedTotal;
+        if (flexTotal > 0) {
+            const availableForFlex = Math.max(0, maxContentWidth - autoFixedTotal);
+            const scale = availableForFlex / flexTotal;
+            let adjustedTotal = autoFixedTotal;
+            for (let i = 0; i < rounded.length; i++) {
+                if (tracks[i].type === 'flex' || tracks[i].type === 'minmax') {
+                    rounded[i] = Math.max(0, Math.floor(rounded[i] * scale));
+                    adjustedTotal += rounded[i];
                 }
             }
-            return maxLines;
-        },
-        render(x, y, width) {
-            const { template, columnGap = 0, spaceBetween, justify = 'start' } = options;
-            // Filter out null children
-            const validChildren = children.filter(c => c !== null && c !== undefined);
-            if (validChildren.length === 0) {
-                return;
-            }
-            // Calculate column widths
-            const columnWidths = calculateColumnWidths(template, width, columnGap, validChildren.length);
-            // Handle justify: 'space-between'
-            let startX = x;
-            let actualWidths = columnWidths;
-            if (justify === 'space-between' && validChildren.length > 1) {
-                const firstWidth = columnWidths[0];
-                const lastWidth = columnWidths[columnWidths.length - 1];
-                const middleTotal = columnWidths.slice(1, -1).reduce((sum, w) => sum + w, 0);
-                const middleFlex = width - firstWidth - lastWidth - (columnGap * (validChildren.length - 1));
-                actualWidths = [firstWidth];
-                for (let i = 1; i < columnWidths.length - 1; i++) {
-                    const ratio = middleTotal > 0 ? columnWidths[i] / middleTotal : 1 / (columnWidths.length - 2);
-                    actualWidths.push(Math.floor(middleFlex * ratio));
+            let remainder = maxContentWidth - adjustedTotal;
+            let idx = 0;
+            while (remainder > 0 && rounded.length > 0) {
+                const targetIndex = idx % rounded.length;
+                // Only add to flex columns
+                if (tracks[targetIndex].type === 'flex' || tracks[targetIndex].type === 'minmax') {
+                    rounded[targetIndex] += 1;
+                    remainder -= 1;
                 }
-                actualWidths.push(lastWidth);
+                idx++;
+                if (idx > rounded.length * 10)
+                    break; // Safety limit
             }
-            // Render each child and collect results
-            const results = [];
-            let currentX = startX;
-            for (let i = 0; i < validChildren.length; i++) {
-                const child = validChildren[i];
-                const childWidth = actualWidths[i] ?? 0;
-                // Create context for child
-                const childCtx = {
-                    availableWidth: childWidth,
-                    region: region,
-                    columnIndex: i,
-                    rowIndex: 0,
-                };
-                // Render child
-                const result = child(childCtx);
-                results.push(result);
-                // Handle spaceBetween
-                if (i < validChildren.length - 1 && spaceBetween) {
-                    const spaceChar = typeof spaceBetween === 'string'
-                        ? spaceBetween
-                        : Array.isArray(spaceBetween)
-                            ? (spaceBetween[i] ?? spaceBetween[spaceBetween.length - 1])
-                            : spaceBetween.char;
-                    const spaceColor = typeof spaceBetween === 'object' && !Array.isArray(spaceBetween)
-                        ? spaceBetween.color
-                        : undefined;
-                    const gapText = spaceChar.repeat(columnGap);
-                    results.push(spaceColor ? applyStyle(gapText, { color: spaceColor }) : gapText);
-                }
-                currentX += childWidth + columnGap;
-            }
-            // Handle multi-line: if any result is string[], expand grid vertically
-            const maxLines = Math.max(...results.map(r => Array.isArray(r) ? r.length : 1), 1);
-            // Render line by line
-            for (let lineIdx = 0; lineIdx < maxLines; lineIdx++) {
-                const lineParts = [];
-                let partIdx = 0;
-                for (let i = 0; i < validChildren.length; i++) {
-                    const result = results[partIdx];
-                    partIdx++;
-                    const columnWidth = actualWidths[i] ?? 0;
-                    if (result === null) {
-                        // Null result - pad to column width
-                        lineParts.push(' '.repeat(columnWidth));
-                        continue;
-                    }
-                    let columnContent;
-                    if (Array.isArray(result)) {
-                        columnContent = result[lineIdx] ?? '';
-                    }
-                    else {
-                        columnContent = lineIdx === 0 ? result : '';
+        }
+        else {
+            // No flex columns - scale down fixed and auto columns proportionally if needed
+            if (autoFixedTotal > maxContentWidth) {
+                const scale = maxContentWidth / autoFixedTotal;
+                let adjustedTotal = 0;
+                for (let i = 0; i < rounded.length; i++) {
+                    if (tracks[i].type === 'auto' || tracks[i].type === 'fixed') {
+                        rounded[i] = Math.max(0, Math.floor(rounded[i] * scale));
+                        adjustedTotal += rounded[i];
                     }
-                    // CRITICAL: Pad each column to its allocated width
-                    // This ensures flex columns actually fill their allocated space
-                    const plainContent = columnContent.replace(/\x1b\[[0-9;]*m/g, '');
-                    const paddedContent = plainContent.length < columnWidth
-                        ? columnContent + ' '.repeat(columnWidth - plainContent.length)
-                        : columnContent;
-                    lineParts.push(paddedContent);
-                    // Add gap (spaceBetween or spaces) if not last
-                    if (i < validChildren.length - 1 && columnGap > 0) {
-                        if (spaceBetween) {
-                            const spaceChar = typeof spaceBetween === 'string'
-                                ? spaceBetween
-                                : Array.isArray(spaceBetween)
-                                    ? (spaceBetween[i] ?? spaceBetween[spaceBetween.length - 1])
-                                    : spaceBetween.char;
-                            const spaceColor = typeof spaceBetween === 'object' && !Array.isArray(spaceBetween)
-                                ? spaceBetween.color
-                                : undefined;
-                            const gapText = spaceChar.repeat(columnGap);
-                            lineParts.push(spaceColor ? applyStyle(gapText, { color: spaceColor }) : gapText);
-                            partIdx++; // spaceBetween adds an extra result
-                        }
-                        else {
-                            // Just add spaces for columnGap
-                            lineParts.push(' '.repeat(columnGap));
-                        }
+                }
+                // Distribute remainder to fixed columns (prefer fixed over auto)
+                let remainder = maxContentWidth - adjustedTotal;
+                let idx = 0;
+                while (remainder > 0 && rounded.length > 0) {
+                    const targetIndex = idx % rounded.length;
+                    if (tracks[targetIndex].type === 'fixed' || tracks[targetIndex].type === 'auto') {
+                        rounded[targetIndex] += 1;
+                        remainder -= 1;
                     }
+                    idx++;
+                    if (idx > rounded.length * 10)
+                        break; // Safety limit
                 }
-                const line = lineParts.join('');
-                const lineY = y + lineIdx;
-                // CRITICAL: Pad line to full width to ensure grid fills the region
-                // This ensures grids are always full-width by default
-                const plainLine = line.replace(/\x1b\[[0-9;]*m/g, '');
-                const paddedLine = plainLine.length < width
-                    ? line + ' '.repeat(width - plainLine.length)
-                    : line;
-                // For now, just set the line (we can add merging later if needed)
-                region.setLine(lineY, paddedLine);
             }
-        },
-    };
+        }
+    }
+    return rounded;
+}
+function getRenderedWidth(result) {
+    if (result === null) {
+        return 0;
+    }
+    if (Array.isArray(result)) {
+        return result.reduce((max, line) => Math.max(max, getTrimmedTextWidth(line)), 0);
+    }
+    return getTrimmedTextWidth(result);
+}
+function measureAutoContentWidths(tracks, children, ctxFactory) {
+    const widths = new Array(tracks.length).fill(0);
+    for (let i = 0; i < tracks.length; i++) {
+        if (tracks[i].type !== 'auto') {
+            continue;
+        }
+        const result = children[i] ? callComponent(children[i], ctxFactory(i)) : null;
+        widths[i] = getRenderedWidth(result);
+    }
+    return widths;
 }
 /**
  * Create a grid component (function-based API)
  * This returns a Component that can be used in other grids
+ * Accepts Component children, strings (converted to Styled components), or objects with render methods
  */
 export function grid(options, ...children) {
+    // Convert children to Components
+    const convertedChildren = children.map(child => {
+        if (typeof child === 'string') {
+            // Import Styled dynamically to avoid circular dependency
+            const { Styled } = require('../components/styled');
+            return Styled({}, child);
+        }
+        // If it's an object with a render method, extract the render function
+        if (typeof child === 'object' && child !== null && 'render' in child && typeof child.render === 'function') {
+            return child.render;
+        }
+        // Otherwise it's already a Component
+        return child;
+    });
     return (ctx) => {
-        const { template, columnGap = 0, spaceBetween, justify = 'start' } = options;
+        const { columns, autoColumns, template, rows, autoRows = 1, columnGap = 0, rowGap = 0, spaceBetween, justify = 'start' } = options;
         // Filter out null children (from when conditions)
-        const validChildren = children.filter(c => c !== null && c !== undefined);
+        const validChildren = convertedChildren.filter(c => c !== null && c !== undefined);
         if (validChildren.length === 0) {
             return null;
         }
+        // Determine number of explicit columns
+        const explicitColumns = columns ?? template ?? [];
+        const numColumns = explicitColumns.length > 0 ? explicitColumns.length : 1;
+        // Group children into rows (wrap when exceeding numColumns)
+        const rowsData = [];
+        for (let i = 0; i < validChildren.length; i += numColumns) {
+            rowsData.push(validChildren.slice(i, i + numColumns));
+        }
+        // If we have multiple rows, render them separately and stack vertically
+        if (rowsData.length > 1) {
+            // Calculate column widths based on the first row (all rows use same column widths for alignment)
+            const firstRowChildren = rowsData[0] ?? [];
+            const expandedTemplate = expandTemplate(columns, autoColumns, template, firstRowChildren.length);
+            const tracks = expandedTemplate.map(parseTemplateEntry);
+            // Measure content widths for column sizing (use first row as reference)
+            const autoContentWidths = measureAutoContentWidths(tracks, firstRowChildren, (index) => createChildContext(ctx, {
+                availableWidth: Number.POSITIVE_INFINITY,
+                columnIndex: index,
+                rowIndex: 0,
+            }));
+            const columnWidths = calculateColumnWidths(tracks, ctx.availableWidth, columnGap, autoContentWidths);
+            // Render each row
+            const allRowLines = [];
+            for (let rowIdx = 0; rowIdx < rowsData.length; rowIdx++) {
+                const rowChildren = rowsData[rowIdx];
+                const rowHeight = rows?.[rowIdx] ?? autoRows;
+                // Render this row's children
+                const rowResults = [];
+                for (let colIdx = 0; colIdx < rowChildren.length; colIdx++) {
+                    const child = rowChildren[colIdx];
+                    const width = columnWidths[colIdx] ?? 0;
+                    const childCtx = createChildContext(ctx, {
+                        availableWidth: width,
+                        columnIndex: colIdx,
+                        rowIndex: rowIdx,
+                    });
+                    const result = callComponent(child, childCtx);
+                    rowResults.push(result);
+                }
+                // Build row lines (handle multi-line children)
+                const maxRowLines = Math.max(...rowResults.map(r => Array.isArray(r) ? r.length : 1), rowHeight);
+                for (let lineIdx = 0; lineIdx < maxRowLines; lineIdx++) {
+                    const lineParts = [];
+                    for (let colIdx = 0; colIdx < rowChildren.length; colIdx++) {
+                        const result = rowResults[colIdx];
+                        const columnWidth = columnWidths[colIdx] ?? 0;
+                        let columnContent;
+                        if (result === null) {
+                            columnContent = ' '.repeat(columnWidth);
+                        }
+                        else if (Array.isArray(result)) {
+                            columnContent = result[lineIdx] ?? '';
+                        }
+                        else {
+                            columnContent = lineIdx === 0 ? result : '';
+                        }
+                        const plainContent = stripAnsi(columnContent);
+                        const paddedContent = plainContent.length < columnWidth
+                            ? columnContent + ' '.repeat(columnWidth - plainContent.length)
+                            : columnContent;
+                        lineParts.push(paddedContent);
+                        // Add column gap
+                        if (colIdx < rowChildren.length - 1 && columnGap > 0) {
+                            lineParts.push(' '.repeat(columnGap));
+                        }
+                    }
+                    const line = lineParts.join('');
+                    const plainLine = stripAnsi(line);
+                    const paddedLine = plainLine.length < ctx.availableWidth
+                        ? line + ' '.repeat(ctx.availableWidth - plainLine.length)
+                        : line;
+                    allRowLines.push(paddedLine);
+                }
+                // Add row gap (except after last row)
+                if (rowIdx < rowsData.length - 1 && rowGap > 0) {
+                    for (let i = 0; i < rowGap; i++) {
+                        allRowLines.push(' '.repeat(ctx.availableWidth));
+                    }
+                }
+            }
+            return allRowLines;
+        }
+        // Single row rendering (original logic)
         // Calculate column widths
-        const columnWidths = calculateColumnWidths(template, ctx.availableWidth, columnGap, validChildren.length);
+        const expandedTemplate = expandTemplate(columns, autoColumns, template, validChildren.length);
+        const tracks = expandedTemplate.map(parseTemplateEntry);
+        const autoContentWidths = measureAutoContentWidths(tracks, validChildren, (index) => createChildContext(ctx, {
+            availableWidth: Number.POSITIVE_INFINITY,
+            columnIndex: index,
+            rowIndex: 0,
+        }));
+        const columnWidths = calculateColumnWidths(tracks, ctx.availableWidth, columnGap, autoContentWidths);
         // Handle justify: 'space-between'
         let startX = 0;
         let actualWidths = columnWidths;
@@ -269,31 +362,27 @@ export function grid(options, ...children) {
         }
         // Render each child
         const results = [];
+        let anyRenderableChild = false;
         let currentX = startX;
         for (let i = 0; i < validChildren.length; i++) {
             const child = validChildren[i];
             const width = actualWidths[i] ?? 0;
             // Create context for child
-            const childCtx = {
+            const childCtx = createChildContext(ctx, {
                 availableWidth: width,
-                region: ctx.region,
                 columnIndex: i,
                 rowIndex: 0,
-            };
+            });
             // Render child
-            const result = child(childCtx);
+            const result = callComponent(child, childCtx);
             results.push(result);
+            if (result !== null) {
+                anyRenderableChild = true;
+            }
             // Handle gap (spaceBetween or spaces)
             if (i < validChildren.length - 1 && columnGap > 0) {
                 if (spaceBetween) {
-                    const spaceChar = typeof spaceBetween === 'string'
-                        ? spaceBetween
-                        : Array.isArray(spaceBetween)
-                            ? (spaceBetween[i] ?? spaceBetween[spaceBetween.length - 1])
-                            : spaceBetween.char;
-                    const spaceColor = typeof spaceBetween === 'object' && !Array.isArray(spaceBetween)
-                        ? spaceBetween.color
-                        : undefined;
+                    const { char: spaceChar, color: spaceColor } = getSpaceBetweenChar(spaceBetween, i);
                     // Fill gap with space character
                     const gapText = spaceChar.repeat(columnGap);
                     results.push(spaceColor ? applyStyle(gapText, { color: spaceColor }) : gapText);
@@ -305,47 +394,149 @@ export function grid(options, ...children) {
             }
             currentX += width + columnGap;
         }
+        if (!anyRenderableChild) {
+            return null;
+        }
         // Handle multi-line: if any result is string[], expand grid vertically
         const maxLines = Math.max(...results.map(r => Array.isArray(r) ? r.length : 1), 1);
         if (maxLines === 1) {
-            // Single line - join all results with proper column padding
+            // Special handling for spaceBetween with auto columns (CSS justify-content: space-between)
+            const hasAutoColumns = tracks.some(t => t.type === 'auto');
+            const allAuto = tracks.every(t => t.type === 'auto' || t.type === 'flex');
+            if (spaceBetween && hasAutoColumns && allAuto) {
+                // Special case: spaceBetween with auto columns (CSS justify-content: space-between)
+                // Collect all auto column contents (skip gap results in results array)
+                const autoContents = [];
+                let totalAutoWidth = 0;
+                let partIdx = 0;
+                // Debug: log what we're working with
+                if (process.env.DEBUG_GRID) {
+                    console.log('DEBUG: spaceBetween with auto columns');
+                    console.log('DEBUG: validChildren.length:', validChildren.length);
+                    console.log('DEBUG: results.length:', results.length);
+                    console.log('DEBUG: tracks:', tracks.map(t => t.type));
+                }
+                for (let i = 0; i < validChildren.length; i++) {
+                    const track = tracks[i];
+                    if (track.type === 'auto') {
+                        if (process.env.DEBUG_GRID) {
+                            console.log(`DEBUG: Processing auto column ${i}, partIdx=${partIdx}, results[partIdx]=`, results[partIdx]);
+                        }
+                        const result = results[partIdx];
+                        partIdx++;
+                        const content = result === null ? '' : (typeof result === 'string' ? result : '');
+                        const plainContent = stripAnsi(content);
+                        totalAutoWidth += plainContent.length;
+                        autoContents.push(content);
+                        if (process.env.DEBUG_GRID) {
+                            console.log(`DEBUG: Collected auto column ${i}: "${plainContent}", totalAutoWidth=${totalAutoWidth}, autoContents.length=${autoContents.length}`);
+                        }
+                        // Skip gap result if present (spaceBetween adds gap results between columns)
+                        // Only skip if this is not the last column and there's a gap result
+                        if (i < validChildren.length - 1 && columnGap > 0 && partIdx < results.length) {
+                            if (process.env.DEBUG_GRID) {
+                                console.log(`DEBUG: Skipping gap result at partIdx=${partIdx}`);
+                            }
+                            partIdx++; // Skip the gap result
+                        }
+                    }
+                    else {
+                        // Not an auto column, skip it
+                        partIdx++;
+                        if (i < validChildren.length - 1 && columnGap > 0 && partIdx < results.length) {
+                            partIdx++; // Skip gap if present
+                        }
+                    }
+                }
+                if (process.env.DEBUG_GRID) {
+                    console.log('DEBUG: Final autoContents.length:', autoContents.length);
+                    console.log('DEBUG: Final totalAutoWidth:', totalAutoWidth);
+                }
+                // Calculate spaceBetween fill width
+                const spaceBetweenWidth = Math.max(0, ctx.availableWidth - totalAutoWidth);
+                const { char: spaceChar, color: spaceColor } = getSpaceBetweenChar(spaceBetween, 0);
+                const fillText = spaceChar.repeat(spaceBetweenWidth);
+                const spaceBetweenContent = spaceColor ? applyStyle(fillText, { color: spaceColor }) : fillText;
+                // Build line: first column + spaceBetween + remaining columns
+                const lineParts = [];
+                if (autoContents.length > 0) {
+                    lineParts.push(autoContents[0]);
+                    if (autoContents.length > 1) {
+                        lineParts.push(spaceBetweenContent);
+                        for (let i = 1; i < autoContents.length; i++) {
+                            lineParts.push(autoContents[i]);
+                        }
+                    }
+                }
+                const line = lineParts.join('');
+                // Pad to full width to ensure right column is at the end
+                const plainLine = stripAnsi(line);
+                const paddedLine = plainLine.length < ctx.availableWidth
+                    ? line + ' '.repeat(ctx.availableWidth - plainLine.length)
+                    : line;
+                return paddedLine;
+            }
+            // Standard rendering for other cases
             const lineParts = [];
             let partIdx = 0;
             for (let i = 0; i < validChildren.length; i++) {
                 const result = results[partIdx];
                 partIdx++;
                 const columnWidth = actualWidths[i] ?? 0;
+                const track = tracks[i];
+                const isAuto = track?.type === 'auto';
+                const isFlex = track?.type === 'flex' || track?.type === 'minmax';
                 if (result === null) {
                     // Null result - pad to column width
-                    lineParts.push(' '.repeat(columnWidth));
+                    // If spaceBetween is set, use it to fill empty columns (especially flex columns)
+                    if (!isAuto && spaceBetween && columnWidth > 0) {
+                        const { char: spaceChar, color: spaceColor } = getSpaceBetweenChar(spaceBetween, i);
+                        const fillText = spaceChar.repeat(columnWidth);
+                        lineParts.push(spaceColor ? applyStyle(fillText, { color: spaceColor }) : fillText);
+                    }
+                    else if (!isAuto) {
+                        lineParts.push(' '.repeat(columnWidth));
+                    }
+                    else {
+                        lineParts.push('');
+                    }
                 }
                 else {
                     const columnContent = typeof result === 'string' ? result : '';
-                    // CRITICAL: Pad each column to its allocated width
-                    // This ensures flex columns actually fill their allocated space
-                    const plainContent = columnContent.replace(/\x1b\[[0-9;]*m/g, '');
-                    const paddedContent = plainContent.length < columnWidth
-                        ? columnContent + ' '.repeat(columnWidth - plainContent.length)
-                        : columnContent;
-                    lineParts.push(paddedContent);
+                    if (isAuto) {
+                        lineParts.push(columnContent);
+                    }
+                    else {
+                        const plainContent = stripAnsi(columnContent);
+                        let paddedContent;
+                        // If content is empty and this is a flex column with spaceBetween, fill it
+                        if (plainContent.length === 0 && spaceBetween && columnWidth > 0 && isFlex) {
+                            const { char: spaceChar, color: spaceColor } = getSpaceBetweenChar(spaceBetween, i);
+                            const fillText = spaceChar.repeat(columnWidth);
+                            paddedContent = spaceColor ? applyStyle(fillText, { color: spaceColor }) : fillText;
+                        }
+                        else if (plainContent.length === 0 && spaceBetween && columnWidth > 0) {
+                            const { char: spaceChar, color: spaceColor } = getSpaceBetweenChar(spaceBetween, i);
+                            const fillText = spaceChar.repeat(columnWidth);
+                            paddedContent = spaceColor ? applyStyle(fillText, { color: spaceColor }) : fillText;
+                        }
+                        else {
+                            paddedContent = plainContent.length < columnWidth
+                                ? columnContent + ' '.repeat(columnWidth - plainContent.length)
+                                : columnContent;
+                        }
+                        lineParts.push(paddedContent);
+                    }
                 }
-                // Add gap (spaceBetween or spaces) if not last
+                // Skip gap result if present (gap results are added to results array between columns)
+                // Then add gap to lineParts if not using spaceBetween
                 if (i < validChildren.length - 1 && columnGap > 0) {
-                    if (spaceBetween) {
-                        const spaceChar = typeof spaceBetween === 'string'
-                            ? spaceBetween
-                            : Array.isArray(spaceBetween)
-                                ? (spaceBetween[i] ?? spaceBetween[spaceBetween.length - 1])
-                                : spaceBetween.char;
-                        const spaceColor = typeof spaceBetween === 'object' && !Array.isArray(spaceBetween)
-                            ? spaceBetween.color
-                            : undefined;
-                        const gapText = spaceChar.repeat(columnGap);
-                        lineParts.push(spaceColor ? applyStyle(gapText, { color: spaceColor }) : gapText);
-                        partIdx++; // spaceBetween adds an extra result
+                    // Skip the gap result in the results array
+                    if (partIdx < results.length) {
+                        partIdx++; // Skip the gap result
                     }
-                    else {
-                        // Just add spaces for columnGap
+                    // Add gap to line (unless spaceBetween is set, which handles gaps differently)
+                    if (!spaceBetween) {
                         lineParts.push(' '.repeat(columnGap));
                     }
                 }
@@ -367,9 +558,27 @@ export function grid(options, ...children) {
                 const result = results[partIdx];
                 partIdx++;
                 const columnWidth = actualWidths[i] ?? 0;
+                const track = tracks[i];
+                const isAuto = track?.type === 'auto';
+                const isFlex = track?.type === 'flex' || track?.type === 'minmax';
                 if (result === null) {
                     // Null result - pad to column width
-                    lineParts.push(' '.repeat(columnWidth));
+                    // If spaceBetween is set, use it to fill empty columns (especially flex columns)
+                    if (!isAuto && spaceBetween && columnWidth > 0) {
+                        const { char: spaceChar, color: spaceColor } = getSpaceBetweenChar(spaceBetween, i);
+                        const fillText = spaceChar.repeat(columnWidth);
+                        lineParts.push(spaceColor ? applyStyle(fillText, { color: spaceColor }) : fillText);
+                    }
+                    else if (!isAuto) {
+                        lineParts.push(' '.repeat(columnWidth));
+                    }
+                    else {
+                        lineParts.push('');
+                    }
+                    // Skip gap result if present
+                    if (i < validChildren.length - 1 && columnGap > 0 && partIdx < results.length) {
+                        partIdx++;
+                    }
                     continue;
                 }
                 let columnContent;
@@ -381,28 +590,40 @@ export function grid(options, ...children) {
                 }
                 // CRITICAL: Pad each column to its allocated width
                 // This ensures flex columns actually fill their allocated space
-                const plainContent = columnContent.replace(/\x1b\[[0-9;]*m/g, '');
-                const paddedContent = plainContent.length < columnWidth
-                    ? columnContent + ' '.repeat(columnWidth - plainContent.length)
-                    : columnContent;
-                lineParts.push(paddedContent);
-                // Add gap (spaceBetween or spaces) if not last
-                if (i < validChildren.length - 1 && columnGap > 0) {
-                    if (spaceBetween) {
-                        const spaceChar = typeof spaceBetween === 'string'
-                            ? spaceBetween
-                            : Array.isArray(spaceBetween)
-                                ? (spaceBetween[i] ?? spaceBetween[spaceBetween.length - 1])
-                                : spaceBetween.char;
-                        const spaceColor = typeof spaceBetween === 'object' && !Array.isArray(spaceBetween)
-                            ? spaceBetween.color
-                            : undefined;
-                        const gapText = spaceChar.repeat(columnGap);
-                        lineParts.push(spaceColor ? applyStyle(gapText, { color: spaceColor }) : gapText);
-                        partIdx++; // spaceBetween adds an extra result
+                // If spaceBetween is set and content is empty, fill with spaceBetween character
+                if (isAuto) {
+                    lineParts.push(columnContent);
+                }
+                else {
+                    const plainContent = columnContent.replace(/\x1b\[[0-9;]*m/g, '');
+                    let paddedContent;
+                    // If content is empty and this is a flex column with spaceBetween, fill it
+                    if (plainContent.length === 0 && spaceBetween && columnWidth > 0 && isFlex) {
+                        const { char: spaceChar, color: spaceColor } = getSpaceBetweenChar(spaceBetween, i);
+                        const fillText = spaceChar.repeat(columnWidth);
+                        paddedContent = spaceColor ? applyStyle(fillText, { color: spaceColor }) : fillText;
+                    }
+                    else if (plainContent.length === 0 && spaceBetween && columnWidth > 0) {
+                        const { char: spaceChar, color: spaceColor } = getSpaceBetweenChar(spaceBetween, i);
+                        const fillText = spaceChar.repeat(columnWidth);
+                        paddedContent = spaceColor ? applyStyle(fillText, { color: spaceColor }) : fillText;
                     }
                     else {
-                        // Just add spaces for columnGap
+                        paddedContent = plainContent.length < columnWidth
+                            ? columnContent + ' '.repeat(columnWidth - plainContent.length)
+                            : columnContent;
+                    }
+                    lineParts.push(paddedContent);
+                }
+                // Skip gap result if present (gap results are added to results array between columns)
+                // Then add gap to lineParts if not using spaceBetween
+                if (i < validChildren.length - 1 && columnGap > 0) {
+                    // Skip the gap result in the results array
+                    if (partIdx < results.length) {
+                        partIdx++; // Skip the gap result
+                    }
+                    // Add gap to line (unless spaceBetween is set, which handles gaps differently)
+                    if (!spaceBetween) {
                         lineParts.push(' '.repeat(columnGap));
                     }
                 }