@machina.ai/cell-cli 0.1.13-rc2

package/dist/src/ui/components/messages/ToolMessage.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+import { Box, Text } from 'ink';
+import { ToolCallStatus } from '../../types.js';
+import { DiffRenderer } from './DiffRenderer.js';
+import { Colors } from '../../colors.js';
+import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
+import { GeminiRespondingSpinner } from '../GeminiRespondingSpinner.js';
+import { MaxSizedBox } from '../shared/MaxSizedBox.js';
+const STATIC_HEIGHT = 1;
+const RESERVED_LINE_COUNT = 5; // for tool name, status, padding etc.
+const STATUS_INDICATOR_WIDTH = 3;
+const MIN_LINES_SHOWN = 2; // show at least this many lines
+// Large threshold to ensure we don't cause performance issues for very large
+// outputs that will get truncated further MaxSizedBox anyway.
+const MAXIMUM_RESULT_DISPLAY_CHARACTERS = 1000000;
+export const ToolMessage = ({ name, description, resultDisplay, status, availableTerminalHeight, terminalWidth, emphasis = 'medium', renderOutputAsMarkdown = true, }) => {
+    const availableHeight = availableTerminalHeight
+        ? Math.max(availableTerminalHeight - STATIC_HEIGHT - RESERVED_LINE_COUNT, MIN_LINES_SHOWN + 1)
+        : undefined;
+    // Long tool call response in MarkdownDisplay doesn't respect availableTerminalHeight properly,
+    // we're forcing it to not render as markdown when the response is too long, it will fallback
+    // to render as plain text, which is contained within the terminal using MaxSizedBox
+    if (availableHeight) {
+        renderOutputAsMarkdown = false;
+    }
+    const childWidth = terminalWidth - 3; // account for padding.
+    if (typeof resultDisplay === 'string') {
+        if (resultDisplay.length > MAXIMUM_RESULT_DISPLAY_CHARACTERS) {
+            // Truncate the result display to fit within the available width.
+            resultDisplay =
+                '...' + resultDisplay.slice(-MAXIMUM_RESULT_DISPLAY_CHARACTERS);
+        }
+    }
+    return (_jsxs(Box, { paddingX: 1, paddingY: 0, flexDirection: "column", children: [_jsxs(Box, { minHeight: 1, children: [_jsx(ToolStatusIndicator, { status: status }), _jsx(ToolInfo, { name: name, status: status, description: description, emphasis: emphasis }), emphasis === 'high' && _jsx(TrailingIndicator, {})] }), resultDisplay && (_jsx(Box, { paddingLeft: STATUS_INDICATOR_WIDTH, width: "100%", marginTop: 1, children: _jsxs(Box, { flexDirection: "column", children: [typeof resultDisplay === 'string' && renderOutputAsMarkdown && (_jsx(Box, { flexDirection: "column", children: _jsx(MarkdownDisplay, { text: resultDisplay, isPending: false, availableTerminalHeight: availableHeight, terminalWidth: childWidth }) })), typeof resultDisplay === 'string' && !renderOutputAsMarkdown && (_jsx(MaxSizedBox, { maxHeight: availableHeight, maxWidth: childWidth, children: _jsx(Box, { children: _jsx(Text, { wrap: "wrap", children: resultDisplay }) }) })), typeof resultDisplay !== 'string' && (_jsx(DiffRenderer, { diffContent: resultDisplay.fileDiff, filename: resultDisplay.fileName, availableTerminalHeight: availableHeight, terminalWidth: childWidth }))] }) }))] }));
+};
+const ToolStatusIndicator = ({ status, }) => (_jsxs(Box, { minWidth: STATUS_INDICATOR_WIDTH, children: [status === ToolCallStatus.Pending && (_jsx(Text, { color: Colors.AccentGreen, children: "o" })), status === ToolCallStatus.Executing && (_jsx(GeminiRespondingSpinner, { spinnerType: "toggle", nonRespondingDisplay: '⊷' })), status === ToolCallStatus.Success && (_jsx(Text, { color: Colors.AccentGreen, children: "\u2714" })), status === ToolCallStatus.Confirming && (_jsx(Text, { color: Colors.AccentYellow, children: "?" })), status === ToolCallStatus.Canceled && (_jsx(Text, { color: Colors.AccentYellow, bold: true, children: "-" })), status === ToolCallStatus.Error && (_jsx(Text, { color: Colors.AccentRed, bold: true, children: "x" }))] }));
+const ToolInfo = ({ name, description, status, emphasis, }) => {
+    const nameColor = React.useMemo(() => {
+        switch (emphasis) {
+            case 'high':
+                return Colors.Foreground;
+            case 'medium':
+                return Colors.Foreground;
+            case 'low':
+                return Colors.Gray;
+            default: {
+                const exhaustiveCheck = emphasis;
+                return exhaustiveCheck;
+            }
+        }
+    }, [emphasis]);
+    return (_jsx(Box, { children: _jsxs(Text, { wrap: "truncate-end", strikethrough: status === ToolCallStatus.Canceled, children: [_jsx(Text, { color: nameColor, bold: true, children: name }), ' ', _jsx(Text, { color: Colors.Gray, children: description })] }) }));
+};
+const TrailingIndicator = () => (_jsxs(Text, { color: Colors.Foreground, wrap: "truncate", children: [' ', "\u2190"] }));
+//# sourceMappingURL=ToolMessage.js.map

package/dist/src/ui/components/messages/ToolMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolMessage.js","sourceRoot":"","sources":["../../../../../src/ui/components/messages/ToolMessage.tsx"],"names":[],"mappings":"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"}

package/dist/src/ui/components/messages/UserMessage.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+interface UserMessageProps {
+    text: string;
+}
+export declare const UserMessage: React.FC<UserMessageProps>;
+export {};

package/dist/src/ui/components/messages/UserMessage.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, Box } from 'ink';
+import { Colors } from '../../colors.js';
+export const UserMessage = ({ text }) => {
+    const prefix = '> ';
+    const prefixWidth = prefix.length;
+    return (_jsxs(Box, { borderStyle: "round", borderColor: Colors.Gray, flexDirection: "row", paddingX: 2, paddingY: 0, marginY: 1, alignSelf: "flex-start", children: [_jsx(Box, { width: prefixWidth, children: _jsx(Text, { color: Colors.Gray, children: prefix }) }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { wrap: "wrap", color: Colors.Gray, children: text }) })] }));
+};
+//# sourceMappingURL=UserMessage.js.map

package/dist/src/ui/components/messages/UserMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserMessage.js","sourceRoot":"","sources":["../../../../../src/ui/components/messages/UserMessage.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAMzC,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,MAAM,MAAM,GAAG,IAAI,CAAC;IACpB,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC;IAElC,OAAO,CACL,MAAC,GAAG,IACF,WAAW,EAAC,OAAO,EACnB,WAAW,EAAE,MAAM,CAAC,IAAI,EACxB,aAAa,EAAC,KAAK,EACnB,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,CAAC,EACV,SAAS,EAAC,YAAY,aAEtB,KAAC,GAAG,IAAC,KAAK,EAAE,WAAW,YACrB,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI,YAAG,MAAM,GAAQ,GACrC,EACN,KAAC,GAAG,IAAC,QAAQ,EAAE,CAAC,YACd,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,MAAM,CAAC,IAAI,YACjC,IAAI,GACA,GACH,IACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/ui/components/messages/UserShellMessage.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+interface UserShellMessageProps {
+    text: string;
+}
+export declare const UserShellMessage: React.FC<UserShellMessageProps>;
+export {};

package/dist/src/ui/components/messages/UserShellMessage.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { Colors } from '../../colors.js';
+export const UserShellMessage = ({ text }) => {
+    // Remove leading '!' if present, as App.tsx adds it for the processor.
+    const commandToDisplay = text.startsWith('!') ? text.substring(1) : text;
+    return (_jsxs(Box, { children: [_jsx(Text, { color: Colors.AccentCyan, children: "$ " }), _jsx(Text, { children: commandToDisplay })] }));
+};
+//# sourceMappingURL=UserShellMessage.js.map

package/dist/src/ui/components/messages/UserShellMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserShellMessage.js","sourceRoot":"","sources":["../../../../../src/ui/components/messages/UserShellMessage.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAMzC,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC5E,uEAAuE;IACvE,MAAM,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAEzE,OAAO,CACL,MAAC,GAAG,eACF,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,UAAU,mBAAW,EACzC,KAAC,IAAI,cAAE,gBAAgB,GAAQ,IAC3B,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/ui/components/shared/MaxSizedBox.d.ts

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+/**
+ * Minimum height for the MaxSizedBox component.
+ * This ensures there is room for at least one line of content as well as the
+ * message that content was truncated.
+ */
+export declare const MINIMUM_MAX_HEIGHT = 2;
+export declare function setMaxSizedBoxDebugging(value: boolean): void;
+interface MaxSizedBoxProps {
+    children?: React.ReactNode;
+    maxWidth?: number;
+    maxHeight: number | undefined;
+    overflowDirection?: 'top' | 'bottom';
+    additionalHiddenLinesCount?: number;
+}
+/**
+ * A React component that constrains the size of its children and provides
+ * content-aware truncation when the content exceeds the specified `maxHeight`.
+ *
+ * `MaxSizedBox` requires a specific structure for its children to correctly
+ * measure and render the content:
+ *
+ * 1.  **Direct children must be `<Box>` elements.** Each `<Box>` represents a
+ *     single row of content.
+ * 2.  **Row `<Box>` elements must contain only `<Text>` elements.** These
+ *     `<Text>` elements can be nested and there are no restrictions to Text
+ *     element styling other than that non-wrapping text elements must be
+ *     before wrapping text elements.
+ *
+ * **Constraints:**
+ * - **Box Properties:** Custom properties on the child `<Box>` elements are
+ *   ignored. In debug mode, runtime checks will report errors for any
+ *   unsupported properties.
+ * - **Text Wrapping:** Within a single row, `<Text>` elements with no wrapping
+ *   (e.g., headers, labels) must appear before any `<Text>` elements that wrap.
+ * - **Element Types:** Runtime checks will warn if unsupported element types
+ *   are used as children.
+ *
+ * @example
+ * <MaxSizedBox maxWidth={80} maxHeight={10}>
+ *   <Box>
+ *     <Text>This is the first line.</Text>
+ *   </Box>
+ *   <Box>
+ *     <Text color="cyan" wrap="truncate">Non-wrapping Header: </Text>
+ *     <Text>This is the rest of the line which will wrap if it's too long.</Text>
+ *   </Box>
+ *   <Box>
+ *     <Text>
+ *       Line 3 with <Text color="yellow">nested styled text</Text> inside of it.
+ *     </Text>
+ *   </Box>
+ * </MaxSizedBox>
+ */
+export declare const MaxSizedBox: React.FC<MaxSizedBoxProps>;
+export {};

package/dist/src/ui/components/shared/MaxSizedBox.js

@@ -0,0 +1,451 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React, { Fragment, useEffect, useId } from 'react';
+import { Box, Text } from 'ink';
+import stringWidth from 'string-width';
+import { Colors } from '../../colors.js';
+import { toCodePoints } from '../../utils/textUtils.js';
+import { useOverflowActions } from '../../contexts/OverflowContext.js';
+let enableDebugLog = false;
+/**
+ * Minimum height for the MaxSizedBox component.
+ * This ensures there is room for at least one line of content as well as the
+ * message that content was truncated.
+ */
+export const MINIMUM_MAX_HEIGHT = 2;
+export function setMaxSizedBoxDebugging(value) {
+    enableDebugLog = value;
+}
+function debugReportError(message, element) {
+    if (!enableDebugLog)
+        return;
+    if (!React.isValidElement(element)) {
+        console.error(message, `Invalid element: '${String(element)}' typeof=${typeof element}`);
+        return;
+    }
+    let sourceMessage = '<Unknown file>';
+    try {
+        const elementWithSource = element;
+        const fileName = elementWithSource._source?.fileName;
+        const lineNumber = elementWithSource._source?.lineNumber;
+        sourceMessage = fileName ? `${fileName}:${lineNumber}` : '<Unknown file>';
+    }
+    catch (error) {
+        console.error('Error while trying to get file name:', error);
+    }
+    console.error(message, `${String(element.type)}. Source: ${sourceMessage}`);
+}
+/**
+ * A React component that constrains the size of its children and provides
+ * content-aware truncation when the content exceeds the specified `maxHeight`.
+ *
+ * `MaxSizedBox` requires a specific structure for its children to correctly
+ * measure and render the content:
+ *
+ * 1.  **Direct children must be `<Box>` elements.** Each `<Box>` represents a
+ *     single row of content.
+ * 2.  **Row `<Box>` elements must contain only `<Text>` elements.** These
+ *     `<Text>` elements can be nested and there are no restrictions to Text
+ *     element styling other than that non-wrapping text elements must be
+ *     before wrapping text elements.
+ *
+ * **Constraints:**
+ * - **Box Properties:** Custom properties on the child `<Box>` elements are
+ *   ignored. In debug mode, runtime checks will report errors for any
+ *   unsupported properties.
+ * - **Text Wrapping:** Within a single row, `<Text>` elements with no wrapping
+ *   (e.g., headers, labels) must appear before any `<Text>` elements that wrap.
+ * - **Element Types:** Runtime checks will warn if unsupported element types
+ *   are used as children.
+ *
+ * @example
+ * <MaxSizedBox maxWidth={80} maxHeight={10}>
+ *   <Box>
+ *     <Text>This is the first line.</Text>
+ *   </Box>
+ *   <Box>
+ *     <Text color="cyan" wrap="truncate">Non-wrapping Header: </Text>
+ *     <Text>This is the rest of the line which will wrap if it's too long.</Text>
+ *   </Box>
+ *   <Box>
+ *     <Text>
+ *       Line 3 with <Text color="yellow">nested styled text</Text> inside of it.
+ *     </Text>
+ *   </Box>
+ * </MaxSizedBox>
+ */
+export const MaxSizedBox = ({ children, maxWidth, maxHeight, overflowDirection = 'top', additionalHiddenLinesCount = 0, }) => {
+    const id = useId();
+    const { addOverflowingId, removeOverflowingId } = useOverflowActions() || {};
+    const laidOutStyledText = [];
+    const targetMaxHeight = Math.max(Math.round(maxHeight ?? Number.MAX_SAFE_INTEGER), MINIMUM_MAX_HEIGHT);
+    if (maxWidth === undefined) {
+        throw new Error('maxWidth must be defined when maxHeight is set.');
+    }
+    function visitRows(element) {
+        if (!React.isValidElement(element)) {
+            return;
+        }
+        if (element.type === Fragment) {
+            React.Children.forEach(element.props.children, visitRows);
+            return;
+        }
+        if (element.type === Box) {
+            layoutInkElementAsStyledText(element, maxWidth, laidOutStyledText);
+            return;
+        }
+        debugReportError('MaxSizedBox children must be <Box> elements', element);
+    }
+    React.Children.forEach(children, visitRows);
+    const contentWillOverflow = (targetMaxHeight !== undefined &&
+        laidOutStyledText.length > targetMaxHeight) ||
+        additionalHiddenLinesCount > 0;
+    const visibleContentHeight = contentWillOverflow && targetMaxHeight !== undefined
+        ? targetMaxHeight - 1
+        : targetMaxHeight;
+    const hiddenLinesCount = visibleContentHeight !== undefined
+        ? Math.max(0, laidOutStyledText.length - visibleContentHeight)
+        : 0;
+    const totalHiddenLines = hiddenLinesCount + additionalHiddenLinesCount;
+    useEffect(() => {
+        if (totalHiddenLines > 0) {
+            addOverflowingId?.(id);
+        }
+        else {
+            removeOverflowingId?.(id);
+        }
+        return () => {
+            removeOverflowingId?.(id);
+        };
+    }, [id, totalHiddenLines, addOverflowingId, removeOverflowingId]);
+    const visibleStyledText = hiddenLinesCount > 0
+        ? overflowDirection === 'top'
+            ? laidOutStyledText.slice(hiddenLinesCount, laidOutStyledText.length)
+            : laidOutStyledText.slice(0, visibleContentHeight)
+        : laidOutStyledText;
+    const visibleLines = visibleStyledText.map((line, index) => (_jsx(Box, { children: line.length > 0 ? (line.map((segment, segIndex) => (_jsx(Text, { ...segment.props, children: segment.text }, segIndex)))) : (_jsx(Text, { children: " " })) }, index)));
+    return (_jsxs(Box, { flexDirection: "column", width: maxWidth, flexShrink: 0, children: [totalHiddenLines > 0 && overflowDirection === 'top' && (_jsxs(Text, { color: Colors.Gray, wrap: "truncate", children: ["... first ", totalHiddenLines, " line", totalHiddenLines === 1 ? '' : 's', ' ', "hidden ..."] })), visibleLines, totalHiddenLines > 0 && overflowDirection === 'bottom' && (_jsxs(Text, { color: Colors.Gray, wrap: "truncate", children: ["... last ", totalHiddenLines, " line", totalHiddenLines === 1 ? '' : 's', ' ', "hidden ..."] }))] }));
+};
+/**
+ * Flattens the child elements of MaxSizedBox into an array of `Row` objects.
+ *
+ * This function expects a specific child structure to function correctly:
+ * 1. The top-level child of `MaxSizedBox` should be a single `<Box>`. This
+ *    outer box is primarily for structure and is not directly rendered.
+ * 2. Inside the outer `<Box>`, there should be one or more children. Each of
+ *    these children must be a `<Box>` that represents a row.
+ * 3. Inside each "row" `<Box>`, the children must be `<Text>` components.
+ *
+ * The structure should look like this:
+ * <MaxSizedBox>
+ *   <Box> // Row 1
+ *     <Text>...</Text>
+ *     <Text>...</Text>
+ *   </Box>
+ *   <Box> // Row 2
+ *     <Text>...</Text>
+ *   </Box>
+ * </MaxSizedBox>
+ *
+ * It is an error for a <Text> child without wrapping to appear after a
+ * <Text> child with wrapping within the same row Box.
+ *
+ * @param element The React node to flatten.
+ * @returns An array of `Row` objects.
+ */
+function visitBoxRow(element) {
+    if (!React.isValidElement(element) ||
+        element.type !== Box) {
+        debugReportError(`All children of MaxSizedBox must be <Box> elements`, element);
+        return {
+            noWrapSegments: [{ text: '<ERROR>', props: {} }],
+            segments: [],
+        };
+    }
+    if (enableDebugLog) {
+        const boxProps = element.props;
+        // Ensure the Box has no props other than the default ones and key.
+        let maxExpectedProps = 4;
+        if (boxProps.children !== undefined) {
+            // Allow the key prop, which is automatically added by React.
+            maxExpectedProps += 1;
+        }
+        if (boxProps.flexDirection !== undefined &&
+            boxProps.flexDirection !== 'row') {
+            debugReportError('MaxSizedBox children must have flexDirection="row".', element);
+        }
+        if (Object.keys(boxProps).length > maxExpectedProps) {
+            debugReportError(`Boxes inside MaxSizedBox must not have additional props. ${Object.keys(boxProps).join(', ')}`, element);
+        }
+    }
+    const row = {
+        noWrapSegments: [],
+        segments: [],
+    };
+    let hasSeenWrapped = false;
+    function visitRowChild(element, parentProps) {
+        if (element === null) {
+            return;
+        }
+        if (typeof element === 'string' || typeof element === 'number') {
+            const text = String(element);
+            // Ignore empty strings as they don't need to be rendered.
+            if (!text) {
+                return;
+            }
+            const segment = { text, props: parentProps ?? {} };
+            // Check the 'wrap' property from the merged props to decide the segment type.
+            if (parentProps === undefined || parentProps.wrap === 'wrap') {
+                hasSeenWrapped = true;
+                row.segments.push(segment);
+            }
+            else {
+                if (!hasSeenWrapped) {
+                    row.noWrapSegments.push(segment);
+                }
+                else {
+                    // put in the wrapped segment as the row is already stuck in wrapped mode.
+                    row.segments.push(segment);
+                    debugReportError('Text elements without wrapping cannot appear after elements with wrapping in the same row.', element);
+                }
+            }
+            return;
+        }
+        if (!React.isValidElement(element)) {
+            debugReportError('Invalid element.', element);
+            return;
+        }
+        if (element.type === Fragment) {
+            React.Children.forEach(element.props.children, (child) => visitRowChild(child, parentProps));
+            return;
+        }
+        if (element.type !== Text) {
+            debugReportError('Children of a row Box must be <Text> elements.', element);
+            return;
+        }
+        // Merge props from parent <Text> elements. Child props take precedence.
+        const { children, ...currentProps } = element.props;
+        const mergedProps = parentProps === undefined
+            ? currentProps
+            : { ...parentProps, ...currentProps };
+        React.Children.forEach(children, (child) => visitRowChild(child, mergedProps));
+    }
+    React.Children.forEach(element.props.children, (child) => visitRowChild(child, undefined));
+    return row;
+}
+function layoutInkElementAsStyledText(element, maxWidth, output) {
+    const row = visitBoxRow(element);
+    if (row.segments.length === 0 && row.noWrapSegments.length === 0) {
+        // Return a single empty line if there are no segments to display
+        output.push([]);
+        return;
+    }
+    const lines = [];
+    const nonWrappingContent = [];
+    let noWrappingWidth = 0;
+    // First, lay out the non-wrapping segments
+    row.noWrapSegments.forEach((segment) => {
+        nonWrappingContent.push(segment);
+        noWrappingWidth += stringWidth(segment.text);
+    });
+    if (row.segments.length === 0) {
+        // This is a bit of a special case when there are no segments that allow
+        // wrapping. It would be ideal to unify.
+        const lines = [];
+        let currentLine = [];
+        nonWrappingContent.forEach((segment) => {
+            const textLines = segment.text.split('\n');
+            textLines.forEach((text, index) => {
+                if (index > 0) {
+                    lines.push(currentLine);
+                    currentLine = [];
+                }
+                if (text) {
+                    currentLine.push({ text, props: segment.props });
+                }
+            });
+        });
+        if (currentLine.length > 0 ||
+            (nonWrappingContent.length > 0 &&
+                nonWrappingContent[nonWrappingContent.length - 1].text.endsWith('\n'))) {
+            lines.push(currentLine);
+        }
+        for (const line of lines) {
+            output.push(line);
+        }
+        return;
+    }
+    const availableWidth = maxWidth - noWrappingWidth;
+    if (availableWidth < 1) {
+        // No room to render the wrapping segments. Truncate the non-wrapping
+        // content and append an ellipsis so the line always fits within maxWidth.
+        // Handle line breaks in non-wrapping content when truncating
+        const lines = [];
+        let currentLine = [];
+        let currentLineWidth = 0;
+        for (const segment of nonWrappingContent) {
+            const textLines = segment.text.split('\n');
+            textLines.forEach((text, index) => {
+                if (index > 0) {
+                    // New line encountered, finish current line and start new one
+                    lines.push(currentLine);
+                    currentLine = [];
+                    currentLineWidth = 0;
+                }
+                if (text) {
+                    const textWidth = stringWidth(text);
+                    // When there's no room for wrapping content, be very conservative
+                    // For lines after the first line break, show only ellipsis if the text would be truncated
+                    if (index > 0 && textWidth > 0) {
+                        // This is content after a line break - just show ellipsis to indicate truncation
+                        currentLine.push({ text: '…', props: {} });
+                        currentLineWidth = stringWidth('…');
+                    }
+                    else {
+                        // This is the first line or a continuation, try to fit what we can
+                        const maxContentWidth = Math.max(0, maxWidth - stringWidth('…'));
+                        if (textWidth <= maxContentWidth && currentLineWidth === 0) {
+                            // Text fits completely on this line
+                            currentLine.push({ text, props: segment.props });
+                            currentLineWidth += textWidth;
+                        }
+                        else {
+                            // Text needs truncation
+                            const codePoints = toCodePoints(text);
+                            let truncatedWidth = currentLineWidth;
+                            let sliceEndIndex = 0;
+                            for (const char of codePoints) {
+                                const charWidth = stringWidth(char);
+                                if (truncatedWidth + charWidth > maxContentWidth) {
+                                    break;
+                                }
+                                truncatedWidth += charWidth;
+                                sliceEndIndex++;
+                            }
+                            const slice = codePoints.slice(0, sliceEndIndex).join('');
+                            if (slice) {
+                                currentLine.push({ text: slice, props: segment.props });
+                            }
+                            currentLine.push({ text: '…', props: {} });
+                            currentLineWidth = truncatedWidth + stringWidth('…');
+                        }
+                    }
+                }
+            });
+        }
+        // Add the last line if it has content or if the last segment ended with \n
+        if (currentLine.length > 0 ||
+            (nonWrappingContent.length > 0 &&
+                nonWrappingContent[nonWrappingContent.length - 1].text.endsWith('\n'))) {
+            lines.push(currentLine);
+        }
+        // If we don't have any lines yet, add an ellipsis line
+        if (lines.length === 0) {
+            lines.push([{ text: '…', props: {} }]);
+        }
+        for (const line of lines) {
+            output.push(line);
+        }
+        return;
+    }
+    // Now, lay out the wrapping segments
+    let wrappingPart = [];
+    let wrappingPartWidth = 0;
+    function addWrappingPartToLines() {
+        if (lines.length === 0) {
+            lines.push([...nonWrappingContent, ...wrappingPart]);
+        }
+        else {
+            if (noWrappingWidth > 0) {
+                lines.push([
+                    ...[{ text: ' '.repeat(noWrappingWidth), props: {} }],
+                    ...wrappingPart,
+                ]);
+            }
+            else {
+                lines.push(wrappingPart);
+            }
+        }
+        wrappingPart = [];
+        wrappingPartWidth = 0;
+    }
+    function addToWrappingPart(text, props) {
+        if (wrappingPart.length > 0 &&
+            wrappingPart[wrappingPart.length - 1].props === props) {
+            wrappingPart[wrappingPart.length - 1].text += text;
+        }
+        else {
+            wrappingPart.push({ text, props });
+        }
+    }
+    row.segments.forEach((segment) => {
+        const linesFromSegment = segment.text.split('\n');
+        linesFromSegment.forEach((lineText, lineIndex) => {
+            if (lineIndex > 0) {
+                addWrappingPartToLines();
+            }
+            const words = lineText.split(/(\s+)/); // Split by whitespace
+            words.forEach((word) => {
+                if (!word)
+                    return;
+                const wordWidth = stringWidth(word);
+                if (wrappingPartWidth + wordWidth > availableWidth &&
+                    wrappingPartWidth > 0) {
+                    addWrappingPartToLines();
+                    if (/^\s+$/.test(word)) {
+                        return;
+                    }
+                }
+                if (wordWidth > availableWidth) {
+                    // Word is too long, needs to be split across lines
+                    const wordAsCodePoints = toCodePoints(word);
+                    let remainingWordAsCodePoints = wordAsCodePoints;
+                    while (remainingWordAsCodePoints.length > 0) {
+                        let splitIndex = 0;
+                        let currentSplitWidth = 0;
+                        for (const char of remainingWordAsCodePoints) {
+                            const charWidth = stringWidth(char);
+                            if (wrappingPartWidth + currentSplitWidth + charWidth >
+                                availableWidth) {
+                                break;
+                            }
+                            currentSplitWidth += charWidth;
+                            splitIndex++;
+                        }
+                        if (splitIndex > 0) {
+                            const part = remainingWordAsCodePoints
+                                .slice(0, splitIndex)
+                                .join('');
+                            addToWrappingPart(part, segment.props);
+                            wrappingPartWidth += stringWidth(part);
+                            remainingWordAsCodePoints =
+                                remainingWordAsCodePoints.slice(splitIndex);
+                        }
+                        if (remainingWordAsCodePoints.length > 0) {
+                            addWrappingPartToLines();
+                        }
+                    }
+                }
+                else {
+                    addToWrappingPart(word, segment.props);
+                    wrappingPartWidth += wordWidth;
+                }
+            });
+        });
+        // Split omits a trailing newline, so we need to handle it here
+        if (segment.text.endsWith('\n')) {
+            addWrappingPartToLines();
+        }
+    });
+    if (wrappingPart.length > 0) {
+        addWrappingPartToLines();
+    }
+    for (const line of lines) {
+        output.push(line);
+    }
+}
+//# sourceMappingURL=MaxSizedBox.js.map