@valyrianjs/terminal 0.2.1 → 0.2.2

package/dist/render.js

@@ -1,9 +1,10 @@
 import { constrainFrame, createFrame, cropFrame, fitFrame, getFrameHeight, getFrameWidth, mergeHorizontal, mergeVertical, overlayFrame, shiftFrame } from "./layout.js";
 import { getSelectionRange, normalizeInputState } from "./events.js";
+import { markFullFrameSpan, markFullRowSpan } from "./frame-style.js";
 import { createEditorState } from "./editor-state.js";
 import { isFocusable, textContent } from "./tree.js";
 import { renderValyrianTerminal } from "./runtime.js";
-import { plainText } from "./text.js";
+import { cursorCellOffset, padEndTerminalCells, plainText, sliceTerminalCells, terminalCellToStringIndex, terminalCellWidth, terminalGraphemes } from "./text.js";
 import { resolveTerminalStyle } from "./theme.js";
 function validateRenderContextDimension(name, value) {
     if (!Number.isInteger(value) || value < 1) {
@@ -148,7 +149,7 @@ function fullFrameSpans(kinds, width, height) {
     const spans = [];
     for (const kind of kinds) {
         for (let y = 1; y <= height; y += 1) {
-            spans.push({ kind, x1: 1, x2: width + 1, y });
+            spans.push(markFullFrameSpan({ kind, x1: 1, x2: width + 1, y }));
         }
     }
     return spans;
@@ -184,7 +185,7 @@ function padFrameSides(frame, padding) {
     const bottomLines = new Array(padding.bottom).fill(" ".repeat(contentWidth));
     const lines = [
         ...topLines,
-        ...frame.lines.map((line) => `${" ".repeat(padding.left)}${line.padEnd(width, " ")}${" ".repeat(padding.right)}`),
+        ...frame.lines.map((line) => `${" ".repeat(padding.left)}${padEndTerminalCells(line, width)}${" ".repeat(padding.right)}`),
         ...bottomLines
     ];
     return shiftFrame(createFrame(lines, frame.hitboxes, frame.cursor, frame.spans), padding.left, padding.top);
@@ -202,7 +203,7 @@ function addBorder(frame, border) {
         lines.push(`${border.left ? chars.topLeft : chars.horizontal}${chars.horizontal.repeat(Math.max(0, width - left - right))}${border.right ? chars.topRight : chars.horizontal}`.slice(0, width));
     }
     for (const line of frame.lines) {
-        lines.push(`${border.left ? chars.vertical : ""}${line.padEnd(innerWidth, " ")}${border.right ? chars.vertical : ""}`);
+        lines.push(`${border.left ? chars.vertical : ""}${padEndTerminalCells(line, innerWidth)}${border.right ? chars.vertical : ""}`);
     }
     if (border.bottom) {
         lines.push(`${border.left ? chars.bottomLeft : chars.horizontal}${chars.horizontal.repeat(Math.max(0, width - left - right))}${border.right ? chars.bottomRight : chars.horizontal}`.slice(0, width));
@@ -226,7 +227,7 @@ function addFullFrameSpans(frame, kinds) {
     const spans = frame.spans.slice();
     for (const span of kinds) {
         for (let y = 1; y <= height; y += 1) {
-            spans.push({ ...span, x1: 1, x2: width + 1, y });
+            spans.push(markFullFrameSpan({ ...span, x1: 1, x2: width + 1, y }));
         }
     }
     return createFrame(frame.lines, frame.hitboxes, frame.cursor, spans);
@@ -288,8 +289,14 @@ function wrapPlainText(value, width) {
             continue;
         }
         let remaining = sourceRow;
-        while (remaining.length > width) {
-            const slice = remaining.slice(0, width);
+        while (terminalCellWidth(remaining) > width) {
+            const slice = sliceTerminalCells(remaining, width);
+            if (slice.length === 0) {
+                const [firstGrapheme = ""] = terminalGraphemes(remaining);
+                rows.push(firstGrapheme);
+                remaining = remaining.slice(firstGrapheme.length);
+                continue;
+            }
             const breakAt = slice.lastIndexOf(" ");
             if (breakAt > 0 && breakAt >= Math.floor(width * 0.6)) {
                 rows.push(remaining.slice(0, breakAt));
@@ -297,7 +304,7 @@ function wrapPlainText(value, width) {
             }
             else {
                 rows.push(slice);
-                remaining = remaining.slice(width);
+                remaining = remaining.slice(slice.length);
             }
         }
         rows.push(remaining);
@@ -412,7 +419,8 @@ function decorateContainerFrame(frame, node, options = {}, context) {
         if ((typeof width === "number" && width > 0) || (typeof height === "number" && height > 0)) {
             next = constrainFrame(next, {
                 width: typeof width === "number" && width > 0 ? width : undefined,
-                height: typeof height === "number" && height > 0 ? height : undefined
+                height: typeof height === "number" && height > 0 ? height : undefined,
+                expandFullFrameSpans: true
             });
         }
     }
@@ -421,7 +429,8 @@ function decorateContainerFrame(frame, node, options = {}, context) {
     if (options.constrain) {
         next = constrainFrame(next, {
             width: typeof options.width === "undefined" ? positiveDimension(node.props.width, "width") : options.width,
-            height: typeof options.height === "undefined" ? positiveDimension(node.props.height, "height") : options.height
+            height: typeof options.height === "undefined" ? positiveDimension(node.props.height, "height") : options.height,
+            expandFullFrameSpans: true
         });
     }
     next = addContainerStyleSpans(next, node, resolved);
@@ -473,6 +482,16 @@ function resolveContainerChildContext(node, dimensions, context) {
         theme: context?.theme
     };
 }
+function interactiveTextMetadata(value) {
+    const textLength = value.length;
+    const textCellToStringIndex = terminalCellToStringIndex(value);
+    const usesLinearIndexes = textCellToStringIndex.length === textLength + 1
+        && textCellToStringIndex.every((index, cellOffset) => index === cellOffset);
+    if (usesLinearIndexes) {
+        return { textLength };
+    }
+    return { textLength, textCellToStringIndex };
+}
 function renderInputLine(value, inputState, padding = { top: 0, right: 0, bottom: 0, left: 0 }) {
     const state = normalizeInputState(inputState, value.length);
     const { start, end } = getSelectionRange(state);
@@ -481,11 +500,27 @@ function renderInputLine(value, inputState, padding = { top: 0, right: 0, bottom
     const textStart = padding.left + 1;
     return {
         line: paddedLine,
-        cursor: { x: textStart + state.cursor, y: 1 },
-        spans: start === end ? [] : [{ kind: "input.selection", x1: textStart + start, x2: textStart + end, y: 1 }]
+        cursor: { x: textStart + cursorCellOffset(value, state.cursor), y: 1 },
+        spans: start === end ? [] : [{ kind: "input.selection", x1: textStart + cursorCellOffset(value, start), x2: textStart + cursorCellOffset(value, end), y: 1 }]
+    };
+}
+function resolveEditorDimensions(node, context) {
+    const explicitWidth = positiveDimension(node.props.width, "width");
+    const explicitHeight = positiveDimension(node.props.height, "height");
+    return {
+        width: typeof explicitWidth !== "undefined"
+            ? explicitWidth
+            : node.props.fill === true
+                ? fillContextDimension(context, "width", "Editor")
+                : undefined,
+        height: typeof explicitHeight !== "undefined"
+            ? explicitHeight
+            : node.props.fill === true
+                ? fillContextDimension(context, "height", "Editor")
+                : undefined
     };
 }
-function renderEditorFrame(node) {
+function renderEditorFrame(node, context) {
     const value = typeof node.props.value !== "undefined" ? plainText(node.props.value) : "";
     const placeholder = typeof node.props.placeholder !== "undefined" ? plainText(node.props.placeholder) : "";
     const displayValue = value.length === 0 && !node.props.__focused && placeholder ? placeholder : value;
@@ -499,21 +534,26 @@ function renderEditorFrame(node) {
         }
         return `> ${line.slice(0, focusedColumn)}|${line.slice(focusedColumn)}`;
     });
-    const width = lines.reduce((max, line) => Math.max(max, line.length), 0);
-    const cursor = node.props.__focused ? { x: 3 + focusedColumn, y: focusedLine + 1 } : null;
-    const spans = node.props.__focused ? [{ kind: "focus", x1: 1, x2: Math.max(2, lines[focusedLine].length + 1), y: focusedLine + 1 }] : [];
-    const height = typeof node.props.height === "undefined" ? undefined : positiveDimension(node.props.height, "height");
+    const width = lines.reduce((max, line) => Math.max(max, terminalCellWidth(line)), 0);
+    const cursor = node.props.__focused ? { x: 3 + cursorCellOffset(focusedState.lines[focusedLine], focusedColumn), y: focusedLine + 1 } : null;
+    const spans = node.props.__focused ? [{ kind: "focus", x1: 1, x2: Math.max(2, terminalCellWidth(lines[focusedLine]) + 1), y: focusedLine + 1 }] : [];
+    const dimensions = resolveEditorDimensions(node, context);
     const frame = createFrame(lines, [], cursor, spans);
-    const scrollOffset = node.props.__focused && typeof height !== "undefined"
-        ? Math.min(Math.max(0, focusedLine - height + 1), Math.max(0, lines.length - height))
+    const scrollOffset = node.props.__focused && typeof dimensions.height !== "undefined"
+        ? Math.min(Math.max(0, focusedLine - dimensions.height + 1), Math.max(0, lines.length - dimensions.height))
         : 0;
-    const constrainedFrame = typeof height === "undefined"
+    const croppedFrame = typeof dimensions.height === "undefined"
         ? frame
-        : constrainFrame(scrollOffset > 0 ? cropFrame(frame, scrollOffset, height) : frame, { height });
+        : scrollOffset > 0
+            ? cropFrame(frame, scrollOffset, dimensions.height)
+            : frame;
+    const constrainedFrame = typeof dimensions.width === "undefined" && typeof dimensions.height === "undefined"
+        ? croppedFrame
+        : constrainFrame(croppedFrame, { ...dimensions, expandFullFrameSpans: true });
     if (!node.props.id) {
         return constrainedFrame;
     }
-    return createFrame(constrainedFrame.lines, [{ id: node.props.id, tag: node.tag, x1: 1, x2: Math.max(1, getFrameWidth(constrainedFrame), width), y1: 1, y2: getFrameHeight(constrainedFrame), textStartX: 3, textLength: value.length }], constrainedFrame.cursor, constrainedFrame.spans);
+    return createFrame(constrainedFrame.lines, [{ id: node.props.id, tag: node.tag, x1: 1, x2: Math.max(1, getFrameWidth(constrainedFrame)), y1: 1, y2: getFrameHeight(constrainedFrame), textStartX: 3, ...interactiveTextMetadata(value) }], constrainedFrame.cursor, constrainedFrame.spans);
 }
 function notifyLayoutContextProbe(node, context) {
     if (context && typeof node.props.__layoutContextProbe === "function") {
@@ -543,12 +583,11 @@ function renderTableFrame(node, context) {
         const cells = new Array(columnCount).fill(createFrame([""])).map((cell, index) => row[index] || cell);
         const rowHeight = cells.reduce((max, cell) => Math.max(max, getFrameHeight(cell)), 0);
         const normalized = cells.map((cell, index) => ({
-            frame: cell,
-            width: columnWidths[index],
-            lines: [...cell.lines.map((line) => line.padEnd(columnWidths[index], " ")), ...new Array(Math.max(0, rowHeight - getFrameHeight(cell))).fill(" ".repeat(columnWidths[index]))]
+            frame: fitFrame(cell, columnWidths[index], rowHeight, { expandFullFrameSpans: true }),
+            width: columnWidths[index]
         }));
         for (let rowIndex = 0; rowIndex < rowHeight; rowIndex += 1) {
-            lines.push(normalized.map((cell) => cell.lines[rowIndex]).join(" | "));
+            lines.push(normalized.map((cell) => cell.frame.lines[rowIndex]).join(" | "));
         }
         let xOffset = 0;
         for (let index = 0; index < normalized.length; index += 1) {
@@ -694,7 +733,7 @@ function renderSplitFrame(node, context) {
         if (cellWidth <= 0 || cellHeight <= 0) {
             continue;
         }
-        frames.push(constrainFrame(renderSplitChildFrame(node.children[index], cellWidth, cellHeight, context), { width: cellWidth, height: cellHeight }));
+        frames.push(constrainFrame(renderSplitChildFrame(node.children[index], cellWidth, cellHeight, context), { width: cellWidth, height: cellHeight, expandFullFrameSpans: true }));
     }
     const frame = frames.length
         ? direction === "row" ? mergeHorizontal(frames, { gap }) : mergeVertical(frames, { gap })
@@ -728,7 +767,7 @@ function renderBodyFrame(children, props, context) {
     return direction === "row" ? mergeHorizontal(frames, { gap }) : mergeVertical(frames, { gap });
 }
 function renderFixedChildFrame(node, width, height) {
-    return constrainFrame(renderBodyFrame(node.children, {}, { cols: width, rows: height }), { width, height });
+    return constrainFrame(renderBodyFrame(node.children, {}, { cols: width, rows: height }), { width, height, expandFullFrameSpans: true });
 }
 function renderFixedCompositionFrame(node, width, height) {
     if (!Number.isFinite(width) || !Number.isInteger(width) || width <= 0 || !Number.isFinite(height) || !Number.isInteger(height) || height <= 0) {
@@ -766,12 +805,12 @@ function renderFixedCompositionFrame(node, width, height) {
         const leftFrames = fixedNodes.left.map((fixed) => renderFixedChildFrame(fixed, positiveInteger(fixed.props.size, "Fixed size"), middleHeight));
         const rightFrames = fixedNodes.right.map((fixed) => renderFixedChildFrame(fixed, positiveInteger(fixed.props.size, "Fixed size"), middleHeight));
         const bodyFrames = bodyWidth > 0
-            ? [constrainFrame(renderBodyFrame(bodyChildren, node.props, { cols: bodyWidth, rows: middleHeight }), { width: bodyWidth, height: middleHeight })]
+            ? [constrainFrame(renderBodyFrame(bodyChildren, node.props, { cols: bodyWidth, rows: middleHeight }), { width: bodyWidth, height: middleHeight, expandFullRowSpans: true })]
             : [];
-        middleFrames.push(constrainFrame(mergeHorizontal([...leftFrames, ...bodyFrames, ...rightFrames]), { width, height: middleHeight }));
+        middleFrames.push(constrainFrame(mergeHorizontal([...leftFrames, ...bodyFrames, ...rightFrames]), { width, height: middleHeight, expandFullRowSpans: true }));
     }
     const frame = mergeVertical([...topFrames, ...middleFrames, ...bottomFrames]);
-    return constrainFrame(frame, { width, height });
+    return constrainFrame(frame, { width, height, expandFullFrameSpans: true });
 }
 function renderStandaloneFixedFrame(node, context) {
     const position = fixedPosition(node.props.position);
@@ -832,7 +871,7 @@ function overlayGeometry(node, width, height) {
 }
 function renderOverlayChildFrame(node, width, height, context) {
     const geometry = overlayGeometry(node, width, height);
-    let frame = constrainFrame(renderBodyFrame(node.children, {}, { cols: geometry.width, rows: geometry.height, theme: context?.theme }), { width: geometry.width, height: geometry.height });
+    let frame = constrainFrame(renderBodyFrame(node.children, {}, { cols: geometry.width, rows: geometry.height, theme: context?.theme }), { width: geometry.width, height: geometry.height, expandFullRowSpans: true });
     frame = addContainerStyleSpans(frame, node, resolveNodeStyle(node, context));
     if (node.props.id && isFocusable(node)) {
         frame = addFocusableHitbox(frame, node);
@@ -883,7 +922,7 @@ function renderScreenFrame(node, context) {
         }
         base = mergeVertical(parts);
         if (context && overlays.length) {
-            base = constrainFrame(base, { width: context.cols, height: context.rows });
+            base = constrainFrame(base, { width: context.cols, height: context.rows, expandFullRowSpans: true });
         }
     }
     return overlays.length ? applyDirectOverlays(base, overlays, context) : base;
@@ -949,13 +988,13 @@ function renderLogViewFrame(node, context) {
             }
         }
         if (typeof innerWidth !== "undefined") {
-            frame = constrainFrame(frame, { width: innerWidth, height: innerHeight });
+            frame = constrainFrame(frame, { width: innerWidth, height: innerHeight, expandFullFrameSpans: true });
         }
     }
     frame = padFrameSides(frame, padding);
     frame = addBorder(frame, border);
     if (typeof dimensions.width !== "undefined") {
-        frame = constrainFrame(frame, { width: dimensions.width, height: dimensions.height });
+        frame = constrainFrame(frame, { width: dimensions.width, height: dimensions.height, expandFullFrameSpans: true });
     }
     else if (typeof dimensions.height !== "undefined") {
         frame = cropFrame(frame, 0, dimensions.height);
@@ -984,18 +1023,18 @@ function renderSeparatedRowFrame(frames, separator = " | ") {
         const frame = frames[index];
         const width = widths[index];
         for (let row = 0; row < height; row += 1) {
-            lines[row] += (frame.lines[row] || "").padEnd(width, " ");
+            lines[row] += padEndTerminalCells(frame.lines[row] || "", width);
             if (index < frames.length - 1) {
                 lines[row] += separator;
             }
         }
-        const shifted = shiftFrame(frame, xOffset, 0);
+        const shifted = shiftFrame(fitFrame(frame, width, height, { expandFullFrameSpans: true }), xOffset, 0);
         hitboxes.push(...shifted.hitboxes);
         spans.push(...shifted.spans);
         if (!cursor && frame.cursor) {
             cursor = { x: frame.cursor.x + xOffset, y: frame.cursor.y };
         }
-        xOffset += width + (index < frames.length - 1 ? separator.length : 0);
+        xOffset += width + (index < frames.length - 1 ? terminalCellWidth(separator) : 0);
     }
     return createFrame(lines, hitboxes, cursor, spans);
 }
@@ -1023,7 +1062,7 @@ function renderElementFrame(node, context) {
             if (node.tag === "terminal-scroll") {
                 const offset = numeric(node.props.__scrollOffset, 0);
                 if (typeof dimensions.width !== "undefined") {
-                    frame = constrainFrame(frame, { width: dimensions.width });
+                    frame = constrainFrame(frame, { width: dimensions.width, expandFullFrameSpans: true });
                 }
                 const height = numeric(dimensions.height ?? node.props.height, getFrameHeight(frame));
                 frame = cropFrame(frame, offset, height || getFrameHeight(frame));
@@ -1032,7 +1071,7 @@ function renderElementFrame(node, context) {
                 const spans = frame.spans.slice();
                 for (let index = 0; index < frame.lines.length; index += 1) {
                     const row = index + 1;
-                    const width = frame.lines[index].length + 1;
+                    const width = terminalCellWidth(frame.lines[index]) + 1;
                     if (highlightRows.includes(row)) {
                         spans.push({ kind: "highlight", x1: 1, x2: width, y: row });
                     }
@@ -1111,15 +1150,15 @@ function renderElementFrame(node, context) {
             for (let index = 0; index < frameLines.length; index += 1) {
                 const sourceIndex = frameItemIndexes[index];
                 const y = itemY + index;
-                spans.push({ kind: "list.base", x1: 1, x2: width + 1, y });
+                spans.push(markFullRowSpan({ kind: "list.base", x1: 1, x2: width + 1, y }));
                 if (selectedIndex !== null && selectedIndex !== activeIndex && sourceIndex === selectedIndex) {
-                    spans.push({ kind: "list.selected", x1: 1, x2: width + 1, y });
+                    spans.push(markFullRowSpan({ kind: "list.selected", x1: 1, x2: width + 1, y }));
                 }
                 if (sourceIndex === activeIndex) {
-                    spans.push({ kind: "list.current", x1: 1, x2: width + 1, y });
+                    spans.push(markFullRowSpan({ kind: "list.current", x1: 1, x2: width + 1, y }));
                 }
                 if (sourceIndex === hoveredIndex) {
-                    spans.push({ kind: "list.hover", x1: 1, x2: width + 1, y });
+                    spans.push(markFullRowSpan({ kind: "list.hover", x1: 1, x2: width + 1, y }));
                 }
             }
             const listHitboxes = [];
@@ -1159,7 +1198,7 @@ function renderElementFrame(node, context) {
             }
             const frame = createFrame(decorated.lines, [...listHitboxes, ...itemHitboxes, ...decorated.hitboxes], decorated.cursor, spans);
             const styled = addFullFrameSpans(frame, resolveNodeStyle(node, context, { includeBase: false }).spanKinds);
-            return typeof frameHeight === "number" ? constrainFrame(styled, { height: frameHeight }) : styled;
+            return typeof frameHeight === "number" ? constrainFrame(styled, { height: frameHeight, expandFullFrameSpans: true }) : styled;
         }
         case "terminal-table":
             return renderTableFrame(node, context);
@@ -1193,7 +1232,7 @@ function renderElementFrame(node, context) {
                 const decorated = addBorder(createFrame([line]), inputBorder);
                 const width = Math.max(1, getFrameWidth(decorated));
                 const height = Math.max(1, getFrameHeight(decorated));
-                const hitboxes = node.props.id ? [{ id: node.props.id, tag: node.tag, x1: 1, x2: width, y1: 1, y2: height, textStartX, textLength: stringValue.length }] : [];
+                const hitboxes = node.props.id ? [{ id: node.props.id, tag: node.tag, x1: 1, x2: width, y1: 1, y2: height, textStartX, ...interactiveTextMetadata(stringValue) }] : [];
                 const spans = fullFrameSpans(["input.base"], width, height);
                 return addFullFrameSpans(createFrame(decorated.lines, hitboxes, decorated.cursor, spans), resolveNodeStyle(node, context, { includeBase: false }).spanKinds);
             }
@@ -1201,12 +1240,12 @@ function renderElementFrame(node, context) {
             const decorated = addBorder(createFrame([rendered.line], [], rendered.cursor, rendered.spans), inputBorder);
             const width = Math.max(1, getFrameWidth(decorated));
             const height = Math.max(1, getFrameHeight(decorated));
-            const hitboxes = node.props.id ? [{ id: node.props.id, tag: node.tag, x1: 1, x2: width, y1: 1, y2: height, textStartX, textLength: stringValue.length }] : [];
+            const hitboxes = node.props.id ? [{ id: node.props.id, tag: node.tag, x1: 1, x2: width, y1: 1, y2: height, textStartX, ...interactiveTextMetadata(stringValue) }] : [];
             const spans = [...fullFrameSpans(["input.base", "input.focus"], width, height), ...decorated.spans];
             return addFullFrameSpans(createFrame(decorated.lines, hitboxes, decorated.cursor, spans), resolveNodeStyle(node, context, { includeBase: false }).spanKinds);
         }
         case "terminal-editor":
-            return addFullFrameSpans(renderEditorFrame(node), resolveNodeStyle(node, context).spanKinds);
+            return addFullFrameSpans(renderEditorFrame(node, context), resolveNodeStyle(node, context).spanKinds);
         case "terminal-button": {
             const label = typeof node.props.label !== "undefined" ? plainText(node.props.label) : plainText(node.children.map(textContent).join(""));
             const layoutStyle = resolveLayoutStyle("button.base", node, context);