@valyrianjs/terminal 0.2.3 → 0.2.4

package/src/ansi.ts

@@ -29,12 +29,28 @@ function spanLayerPriority(span: TerminalStyleSpan) {
   return span.kind === "focus" ? 0 : 1;
 }
 
-function lineSpans(spans: TerminalStyleSpan[], y: number) {
+type RowSpanEntry = {
+  span: TerminalStyleSpan;
+  index: number;
+};
+
+function compareSpanStart(a: RowSpanEntry, b: RowSpanEntry) {
+  return a.span.x1 - b.span.x1 || compareSpanPaintOrder(a, b) || b.span.x2 - a.span.x2;
+}
+
+function compareSpanPaintOrder(a: RowSpanEntry, b: RowSpanEntry) {
+  return spanLayerPriority(a.span) - spanLayerPriority(b.span) || a.index - b.index;
+}
+
+function lineSpanEntries(spans: TerminalStyleSpan[], y: number) {
   return spans
     .map((span, index) => ({ span, index }))
     .filter(({ span }) => span.y === y)
-    .sort((a, b) => a.span.x1 - b.span.x1 || spanLayerPriority(a.span) - spanLayerPriority(b.span) || b.span.x2 - a.span.x2 || a.index - b.index)
-    .map(({ span }) => span);
+    .sort(compareSpanStart);
+}
+
+function lineSpans(spans: TerminalStyleSpan[], y: number) {
+  return lineSpanEntries(spans, y).map(({ span }) => span);
 }
 
 function tokenStyle(token: ReturnType<typeof resolveTerminalStyleToken>) {
@@ -95,65 +111,110 @@ function colorAnsi(value: string | undefined, background: boolean) {
   return `\u001b[${background ? 48 : 38};2;${red};${green};${blue}m`;
 }
 
-function renderAnsiLine(line: string, spans: TerminalStyleSpan[], y: number, theme?: TerminalTheme) {
-  let output = "";
-  let visibleColumn = 1;
-  const rowSpans = lineSpans(spans, y);
-  let activeSpanIndex = 0;
+function sameActiveAnsiStack(previous: RowSpanEntry[], next: RowSpanEntry[]) {
+  if (previous.length !== next.length) {
+    return false;
+  }
+  return previous.every((entry, index) => entry.index === next[index]?.index);
+}
 
-  for (const grapheme of terminalGraphemes(line)) {
-    while (rowSpans[activeSpanIndex]?.x1 === visibleColumn) {
-      output += spanAnsiOpen(rowSpans[activeSpanIndex], theme);
-      activeSpanIndex += 1;
-    }
+function spanContains(container: TerminalStyleSpan, contained: TerminalStyleSpan) {
+  return container.y === contained.y && container.x1 <= contained.x1 && container.x2 >= contained.x2 && (container.x1 < contained.x1 || container.x2 > contained.x2);
+}
 
-    if (grapheme === "|") {
-      continue;
-    }
+function hasLaterContainedSpan(entry: RowSpanEntry, rowEntries: RowSpanEntry[]) {
+  return rowEntries.some((candidate) => candidate.index > entry.index && spanContains(entry.span, candidate.span));
+}
 
-    output += grapheme;
-    visibleColumn += terminalCellWidth(grapheme);
+function compareActiveSpanPaintOrder(rowEntries: RowSpanEntry[], a: RowSpanEntry, b: RowSpanEntry) {
+  const priority = spanLayerPriority(a.span) - spanLayerPriority(b.span);
+  if (priority !== 0) {
+    return priority;
+  }
 
-    let closedSpan = false;
-    for (const span of rowSpans) {
-      if (span.x2 === visibleColumn) {
-        if (span.kind !== "focus") {
-          output += spanAnsiClose(span, theme);
-          closedSpan = true;
-        }
-      }
-    }
-    for (const span of rowSpans) {
-      if (span.x2 === visibleColumn && span.kind === "focus") {
-        output += spanAnsiClose(span, theme);
-        closedSpan = true;
-      }
+  const aContainsB = spanContains(a.span, b.span);
+  const bContainsA = spanContains(b.span, a.span);
+  if (aContainsB && !bContainsA) {
+    if (a.index < b.index) {
+      return -1;
     }
-    if (closedSpan && visibleColumn <= terminalCellWidth(line)) {
-      for (const span of rowSpans) {
-        if (span.x1 < visibleColumn && span.x2 > visibleColumn) {
-          output += spanAnsiOpen(span, theme);
-        }
-      }
+    return hasLaterContainedSpan(a, rowEntries) ? 1 : -1;
+  }
+  if (bContainsA && !aContainsB) {
+    if (b.index < a.index) {
+      return 1;
     }
+    return hasLaterContainedSpan(b, rowEntries) ? -1 : 1;
   }
 
-  for (const span of rowSpans) {
-    if (span.x1 < visibleColumn && span.x2 > visibleColumn) {
-      if (span.kind !== "focus") {
-        output += spanAnsiClose(span, theme);
-      }
+  return a.index - b.index;
+}
+
+function activeAnsiStack(rowEntries: RowSpanEntry[], column: number) {
+  return rowEntries
+    .filter(({ span }) => span.x1 <= column && span.x2 > column)
+    .sort((a, b) => compareActiveSpanPaintOrder(rowEntries, a, b));
+}
+
+function commonAnsiStackPrefixLength(previous: RowSpanEntry[], next: RowSpanEntry[]) {
+  const length = Math.min(previous.length, next.length);
+  for (let index = 0; index < length; index += 1) {
+    if (previous[index]?.index !== next[index]?.index) {
+      return index;
     }
   }
-  for (const span of rowSpans) {
-    if (span.x1 < visibleColumn && span.x2 > visibleColumn && span.kind === "focus") {
-      output += spanAnsiClose(span, theme);
+  return length;
+}
+
+function compareAnsiCloseOrder(a: RowSpanEntry, b: RowSpanEntry) {
+  const aFocus = a.span.kind === "focus" ? 1 : 0;
+  const bFocus = b.span.kind === "focus" ? 1 : 0;
+  return aFocus - bFocus || a.index - b.index;
+}
+
+function switchAnsiStack(previous: RowSpanEntry[], next: RowSpanEntry[], theme?: TerminalTheme) {
+  if (sameActiveAnsiStack(previous, next)) {
+    return "";
+  }
+
+  const commonPrefixLength = commonAnsiStackPrefixLength(previous, next);
+  const removed = previous.slice(commonPrefixLength).sort(compareAnsiCloseOrder);
+  const commonPrefix = previous.slice(0, commonPrefixLength);
+  return [
+    ...removed.map(({ span }) => spanAnsiClose(span, theme)),
+    ...(removed.length > 0 ? commonPrefix.map(({ span }) => spanAnsiOpen(span, theme)) : []),
+    ...next.slice(commonPrefixLength).map(({ span }) => spanAnsiOpen(span, theme))
+  ].join("");
+}
+
+function renderAnsiLineFromColumn(line: string, spans: TerminalStyleSpan[], y: number, startColumn: number, theme?: TerminalTheme) {
+  let output = "";
+  let visibleColumn = Math.max(1, startColumn);
+  const rowEntries = lineSpanEntries(spans, y);
+  let currentStack: RowSpanEntry[] = [];
+
+  for (const grapheme of terminalGraphemes(dropTerminalCells(line, visibleColumn - 1))) {
+    const nextStack = activeAnsiStack(rowEntries, visibleColumn);
+    output += switchAnsiStack(currentStack, nextStack, theme);
+    currentStack = nextStack;
+
+    if (grapheme === "|") {
+      continue;
     }
+
+    output += grapheme;
+    visibleColumn += terminalCellWidth(grapheme);
   }
 
+  output += switchAnsiStack(currentStack, [], theme);
+
   return output;
 }
 
+function renderAnsiLine(line: string, spans: TerminalStyleSpan[], y: number, theme?: TerminalTheme) {
+  return renderAnsiLineFromColumn(line, spans, y, 1, theme);
+}
+
 function hasPlainAffordance(token: ReturnType<typeof resolveTerminalStyleToken>) {
   return typeof token !== "undefined" && ("plainPrefix" in token || "plainSuffix" in token);
 }
@@ -253,71 +314,7 @@ function commonPrefixCellWidth(previousLine: string, nextLine: string) {
 }
 
 function renderAnsiLineSuffix(line: string, spans: TerminalStyleSpan[], y: number, startColumn: number, theme?: TerminalTheme) {
-  let output = "";
-  let visibleColumn = Math.max(1, startColumn);
-  const rowSpans = lineSpans(spans, y);
-  let activeSpanIndex = rowSpans.findIndex((span) => span.x1 >= visibleColumn);
-  if (activeSpanIndex < 0) {
-    activeSpanIndex = rowSpans.length;
-  }
-
-  for (const span of rowSpans) {
-    if (span.x1 <= visibleColumn && span.x2 > visibleColumn) {
-      output += spanAnsiOpen(span, theme);
-    }
-  }
-
-  for (const grapheme of terminalGraphemes(dropTerminalCells(line, visibleColumn - 1))) {
-    while (rowSpans[activeSpanIndex]?.x1 === visibleColumn) {
-      output += spanAnsiOpen(rowSpans[activeSpanIndex], theme);
-      activeSpanIndex += 1;
-    }
-
-    if (grapheme === "|") {
-      continue;
-    }
-
-    output += grapheme;
-    visibleColumn += terminalCellWidth(grapheme);
-
-    let closedSpan = false;
-    for (const span of rowSpans) {
-      if (span.x2 === visibleColumn) {
-        if (span.kind !== "focus") {
-          output += spanAnsiClose(span, theme);
-          closedSpan = true;
-        }
-      }
-    }
-    for (const span of rowSpans) {
-      if (span.x2 === visibleColumn && span.kind === "focus") {
-        output += spanAnsiClose(span, theme);
-        closedSpan = true;
-      }
-    }
-    if (closedSpan && visibleColumn <= terminalCellWidth(line)) {
-      for (const span of rowSpans) {
-        if (span.x1 < visibleColumn && span.x2 > visibleColumn) {
-          output += spanAnsiOpen(span, theme);
-        }
-      }
-    }
-  }
-
-  for (const span of rowSpans) {
-    if (span.x1 < visibleColumn && span.x2 > visibleColumn) {
-      if (span.kind !== "focus") {
-        output += spanAnsiClose(span, theme);
-      }
-    }
-  }
-  for (const span of rowSpans) {
-    if (span.x1 < visibleColumn && span.x2 > visibleColumn && span.kind === "focus") {
-      output += spanAnsiClose(span, theme);
-    }
-  }
-
-  return output;
+  return renderAnsiLineFromColumn(line, spans, y, startColumn, theme);
 }
 
 

package/src/layout.ts

@@ -242,6 +242,8 @@ function overlayMetric(value: number, name: string) {
   return metric;
 }
 
+const MODAL_OVERLAY_HITBOX_ID = "\u0000valyrian-overlay-modal-shield";
+
 function nextPointerLayer(hitboxes: TerminalHitbox[]) {
   let layer = 0;
   for (const box of hitboxes) {
@@ -250,7 +252,7 @@ function nextPointerLayer(hitboxes: TerminalHitbox[]) {
   return layer + 1;
 }
 
-export function overlayFrame(base: TerminalFrame, overlay: TerminalFrame, options: { x: number; y: number; width: number; height: number }): TerminalFrame {
+export function overlayFrame(base: TerminalFrame, overlay: TerminalFrame, options: { x: number; y: number; width: number; height: number; backdropSpans?: TerminalStyleSpan[] }): TerminalFrame {
   const x = overlayMetric(options.x, "Overlay x");
   const y = overlayMetric(options.y, "Overlay y");
   const width = overlayMetric(options.width, "Overlay width");
@@ -289,9 +291,18 @@ export function overlayFrame(base: TerminalFrame, overlay: TerminalFrame, option
     ...box,
     pointerLayer: overlayLayer + (box.pointerLayer ?? 0)
   }));
+  const overlayShield = {
+    id: MODAL_OVERLAY_HITBOX_ID,
+    tag: "terminal-overlay" as const,
+    x1: 1,
+    x2: Math.max(1, getFrameWidth(base)),
+    y1: 1,
+    y2: Math.max(1, getFrameHeight(base)),
+    pointerLayer: overlayLayer - 0.5
+  };
   const cursor = visibleOverlay.cursor || base.cursor;
 
-  return createFrame(lines, [...overlayHitboxes, ...base.hitboxes], cursor, [...base.spans, ...visibleOverlay.spans]);
+  return createFrame(lines, [...overlayHitboxes, overlayShield, ...base.hitboxes], cursor, [...base.spans, ...(options.backdropSpans ?? []), ...visibleOverlay.spans]);
 }
 
 export function cropFrame(frame: TerminalFrame, offset: number, height: number) {

package/src/render-internal.ts

@@ -7,7 +7,7 @@ import { renderValyrianTerminal } from "./runtime.js";
 import { cursorCellOffset, dropTerminalCells, padEndTerminalCells, plainText, sliceTerminalCells, terminalCellToStringIndex, terminalCellWidth, terminalGraphemes } from "./text.js";
 import { resolveTerminalStyle } from "./theme.js";
 
-import type { InputInteractionState, TerminalButtonPressEventPayload, TerminalElementNode, TerminalFocusNode, TerminalFrame, TerminalHitbox, TerminalNode, TerminalSpacing, TerminalSplitBreakpoint, TerminalSplitSize, TerminalStyleDefinition, TerminalStyleSpan, TerminalTheme, TerminalVisualState } from "./types.js";
+import type { InputInteractionState, TerminalButtonPressEventPayload, TerminalElementNode, TerminalFocusNode, TerminalFrame, TerminalHitbox, TerminalNode, TerminalSpacing, TerminalSplitBreakpoint, TerminalSplitSize, TerminalStyleDefinition, TerminalStyleSpan, TerminalStyleValue, TerminalTheme, TerminalVisualState } from "./types.js";
 
 export interface TerminalRenderContext {
   cols: number;
@@ -579,6 +579,24 @@ function renderInputLine(value: string, inputState: InputInteractionState, paddi
   };
 }
 
+function scrollFocusedInputLine(rendered: ReturnType<typeof renderInputLine>, visibleWidth: number) {
+  const width = Math.max(1, Math.trunc(visibleWidth));
+  const scrollOffset = Math.max(0, rendered.cursor.x - width);
+  if (scrollOffset === 0) {
+    return rendered;
+  }
+
+  return {
+    line: dropTerminalCells(rendered.line, scrollOffset),
+    cursor: { x: rendered.cursor.x - scrollOffset, y: rendered.cursor.y },
+    spans: rendered.spans.map((span) => ({
+      ...span,
+      x1: span.x1 - scrollOffset,
+      x2: span.x2 - scrollOffset
+    }))
+  };
+}
+
 function resolveEditorDimensions(node: TerminalElementNode, context?: TerminalRenderContext) {
   const explicitWidth = positiveDimension(node.props.width, "width");
   const explicitHeight = positiveDimension(node.props.height, "height");
@@ -587,7 +605,7 @@ function resolveEditorDimensions(node: TerminalElementNode, context?: TerminalRe
       ? explicitWidth
       : node.props.fill === true
         ? fillContextDimension(context, "width", "Editor")
-        : undefined,
+        : contextBackedDimension(context, "width", "Editor"),
     height: typeof explicitHeight !== "undefined"
       ? explicitHeight
       : node.props.fill === true
@@ -596,6 +614,93 @@ function resolveEditorDimensions(node: TerminalElementNode, context?: TerminalRe
   };
 }
 
+type WrappedEditorSegment = { text: string; sourceLine: number; start: number; end: number };
+
+function wrapEditorLineSegments(value: string, width: number, sourceLine: number): WrappedEditorSegment[] {
+  if (!Number.isFinite(width) || !Number.isInteger(width) || width <= 0) {
+    return [{ text: "", sourceLine, start: 0, end: 0 }];
+  }
+  if (value.length === 0) {
+    return [{ text: "", sourceLine, start: 0, end: 0 }];
+  }
+
+  const segments: WrappedEditorSegment[] = [];
+  let remaining = value;
+  let offset = 0;
+  while (terminalCellWidth(remaining) > width) {
+    const slice = sliceTerminalCells(remaining, width);
+    if (slice.length === 0) {
+      const [firstGrapheme = ""] = terminalGraphemes(remaining);
+      segments.push({ text: firstGrapheme, sourceLine, start: offset, end: offset + firstGrapheme.length });
+      remaining = remaining.slice(firstGrapheme.length);
+      offset += firstGrapheme.length;
+      continue;
+    }
+
+    const breakAt = slice.lastIndexOf(" ");
+    const useWordBreak = breakAt > 0 && breakAt >= Math.floor(width * 0.6);
+    const segmentText = useWordBreak ? remaining.slice(0, breakAt) : slice;
+    segments.push({ text: segmentText, sourceLine, start: offset, end: offset + segmentText.length });
+    const consumed = useWordBreak ? breakAt + 1 : slice.length;
+    remaining = remaining.slice(consumed);
+    offset += consumed;
+  }
+  segments.push({ text: remaining, sourceLine, start: offset, end: offset + remaining.length });
+  return segments;
+}
+
+function wrapEditorLines(lines: string[], width: number): WrappedEditorSegment[] {
+  return lines.flatMap((line, sourceLine) => wrapEditorLineSegments(line, width, sourceLine));
+}
+
+function insertTrailingEditorCursorSegment(segments: WrappedEditorSegment[], line: number, column: number, contentWidth?: number) {
+  if (typeof contentWidth !== "number") {
+    return segments;
+  }
+
+  for (let index = 0; index < segments.length; index += 1) {
+    const segment = segments[index];
+    if (segment.sourceLine !== line || column !== segment.end || segment.start === segment.end) {
+      continue;
+    }
+
+    const nextSegment = segments[index + 1];
+    if (nextSegment && nextSegment.sourceLine === line && nextSegment.start === column) {
+      return segments;
+    }
+
+    if (terminalCellWidth(segment.text) < contentWidth) {
+      return segments;
+    }
+
+    const cursorSegment = { text: "", sourceLine: line, start: column, end: column };
+    return [...segments.slice(0, index + 1), cursorSegment, ...segments.slice(index + 1)];
+  }
+
+  return segments;
+}
+
+function visualEditorCursor(segments: WrappedEditorSegment[], line: number, column: number) {
+  for (let index = 0; index < segments.length; index += 1) {
+    const segment = segments[index];
+    if (segment.sourceLine !== line) {
+      continue;
+    }
+
+    const nextSegment = segments[index + 1];
+    if (column === segment.end && nextSegment && nextSegment.sourceLine === line && nextSegment.start === column) {
+      return { index: index + 1, column: 0 };
+    }
+
+    const containsCursor = column >= segment.start && column <= segment.end;
+    const isTrailingEmpty = segment.start === segment.end && column === segment.start;
+    if (containsCursor || isTrailingEmpty) {
+      return { index, column: Math.max(0, Math.min(column - segment.start, segment.text.length)) };
+    }
+  }
+  return { index: Math.max(0, segments.length - 1), column: 0 };
+}
+
 function renderEditorFrame(node: TerminalElementNode, context?: TerminalRenderContext) {
   const value = typeof node.props.value !== "undefined" ? plainText(node.props.value) : "";
   const placeholder = typeof node.props.placeholder !== "undefined" ? plainText(node.props.placeholder) : "";
@@ -604,29 +709,24 @@ function renderEditorFrame(node: TerminalElementNode, context?: TerminalRenderCo
   const focusedState = createEditorState(value, node.props.__editorState?.cursor);
   const focusedLine = focusedState.cursor.line;
   const focusedColumn = focusedState.cursor.column;
-  const lines = state.lines.map((line, index) => {
-    if (!node.props.__focused || index !== focusedLine) {
-      return `  ${line}`;
+  const dimensions = resolveEditorDimensions(node, context);
+  const contentWidth = typeof dimensions.width === "number" ? Math.max(1, dimensions.width - 2) : undefined;
+  const baseSegments = typeof contentWidth === "number" ? wrapEditorLines(state.lines, contentWidth) : state.lines.map((line, sourceLine) => ({ text: line, sourceLine, start: 0, end: line.length }));
+  const segments = node.props.__focused ? insertTrailingEditorCursorSegment(baseSegments, focusedLine, focusedColumn, contentWidth) : baseSegments;
+  const focusedVisualCursor = visualEditorCursor(segments, focusedLine, focusedColumn);
+  const lines = segments.map((segment, index) => {
+    if (!node.props.__focused || index !== focusedVisualCursor.index) {
+      return `  ${segment.text}`;
     }
 
-    return `  ${line.slice(0, focusedColumn)}|${line.slice(focusedColumn)}`;
+    return `  ${segment.text.slice(0, focusedVisualCursor.column)}|${segment.text.slice(focusedVisualCursor.column)}`;
   });
-  const dimensions = resolveEditorDimensions(node, context);
-  let renderedLines = lines;
-  let cursor = node.props.__focused ? { x: 3 + cursorCellOffset(focusedState.lines[focusedLine], focusedColumn), y: focusedLine + 1 } : null;
-  let spans: TerminalStyleSpan[] = node.props.__focused ? [{ kind: "focus", x1: 1, x2: Math.max(2, terminalCellWidth(lines[focusedLine]) + 1), y: focusedLine + 1 }] : [];
-
-  const availableWidth = dimensions.width ?? context?.cols;
-  if (node.props.__focused && cursor && typeof availableWidth === "number" && cursor.x > availableWidth) {
-    const horizontalOffset = cursor.x - availableWidth;
-    renderedLines = lines.map((line) => dropTerminalCells(line, horizontalOffset));
-    cursor = { x: availableWidth, y: cursor.y };
-    spans = [{ kind: "focus", x1: 1, x2: Math.max(2, Math.min(availableWidth + 1, terminalCellWidth(renderedLines[focusedLine]) + 1)), y: focusedLine + 1 }];
-  }
+  const cursor = node.props.__focused ? { x: 3 + cursorCellOffset(segments[focusedVisualCursor.index]?.text ?? "", focusedVisualCursor.column), y: focusedVisualCursor.index + 1 } : null;
+  const spans: TerminalStyleSpan[] = node.props.__focused ? [{ kind: "editor.focus", x1: 1, x2: Math.max(2, terminalCellWidth(lines[focusedVisualCursor.index] ?? "") + 1), y: focusedVisualCursor.index + 1 }] : [];
 
-  const frame = createFrame(renderedLines, [], cursor, spans);
+  const frame = createFrame(lines, [], cursor, spans);
   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))
+    ? Math.min(Math.max(0, focusedVisualCursor.index - dimensions.height + 1), Math.max(0, lines.length - dimensions.height))
     : 0;
   const croppedFrame = typeof dimensions.height === "undefined"
     ? frame
@@ -1004,6 +1104,18 @@ function overlayGeometry(node: TerminalElementNode, width: number, height: numbe
   };
 }
 
+function resolveOverlayBackdropSpans(node: TerminalElementNode, width: number, height: number, context?: TerminalRenderContext) {
+  const backdrop = node.props.backdrop;
+  if (backdrop === false || typeof backdrop === "undefined") {
+    return [];
+  }
+
+  const styleValue: TerminalStyleValue = backdrop === true ? "overlay.backdrop" : backdrop;
+  const resolvedStyle = resolveTerminalStyle(styleValue, context?.theme);
+  const span = typeof styleValue === "string" ? styleSpan(styleValue) : styleSpan("#style", resolvedStyle);
+  return fullFrameSpans([span.kind], width, height).map((fullSpan) => (typeof span.style === "undefined" ? fullSpan : { ...fullSpan, style: span.style }));
+}
+
 function renderOverlayChildFrame(node: TerminalElementNode, width: number, height: number, context?: TerminalRenderContext) {
   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, expandFullRowSpans: true });
@@ -1024,7 +1136,10 @@ function applyDirectOverlays(base: TerminalFrame, overlays: TerminalElementNode[
   const height = Math.max(1, getFrameHeight(base));
   for (const overlay of orderedDirectOverlays(overlays)) {
     const rendered = renderOverlayChildFrame(overlay, width, height, context);
-    frame = overlayFrame(frame, rendered.frame, rendered.geometry);
+    frame = overlayFrame(frame, rendered.frame, {
+      ...rendered.geometry,
+      backdropSpans: resolveOverlayBackdropSpans(overlay, width, height, context)
+    });
   }
   return frame;
 }
@@ -1383,24 +1498,33 @@ function renderElementFrame(node: TerminalElementNode, context?: TerminalRenderC
       const layoutStyle = resolveLayoutStyle("input.base", node, context);
       const inputPadding = normalizeSpacing(layoutStyle.padding, "Input padding");
       const inputBorder = normalizeBorder(layoutStyle.border);
+      const dimensions = {
+        width: positiveDimension(node.props.width, "width") ?? contextBackedDimension(context, "width", "Input")
+      };
       const textStartX = (inputBorder.left ? 1 : 0) + inputPadding.left + 1;
       if (!node.props.__focused) {
         const line = `${" ".repeat(inputPadding.left)}${displayValue}${" ".repeat(inputPadding.right)}`;
         const decorated = addBorder(createFrame([line]), inputBorder);
-        const width = Math.max(1, getFrameWidth(decorated));
-        const height = Math.max(1, getFrameHeight(decorated));
+        const constrained = typeof dimensions.width === "number" ? constrainFrame(decorated, { width: dimensions.width, expandFullFrameSpans: true }) : decorated;
+        const width = Math.max(1, getFrameWidth(constrained));
+        const height = Math.max(1, getFrameHeight(constrained));
         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);
+        return addFullFrameSpans(createFrame(constrained.lines, hitboxes, constrained.cursor, spans), resolveNodeStyle(node, context, { includeBase: false }).spanKinds);
       }
 
       const rendered = renderInputLine(stringValue, node.props.__inputState || { cursor: stringValue.length, anchor: stringValue.length }, inputPadding);
-      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 visibleInputWidth = typeof dimensions.width === "number"
+        ? Math.max(1, dimensions.width - (inputBorder.left ? 1 : 0) - (inputBorder.right ? 1 : 0))
+        : getFrameWidth(createFrame([rendered.line]));
+      const visibleRendered = scrollFocusedInputLine(rendered, visibleInputWidth);
+      const decorated = addBorder(createFrame([visibleRendered.line], [], visibleRendered.cursor, visibleRendered.spans), inputBorder);
+      const constrained = typeof dimensions.width === "number" ? constrainFrame(decorated, { width: dimensions.width, expandFullFrameSpans: true }) : decorated;
+      const width = Math.max(1, getFrameWidth(constrained));
+      const height = Math.max(1, getFrameHeight(constrained));
       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);
+      const spans = [...fullFrameSpans(["input.base", "input.focus"], width, height), ...constrained.spans];
+      return addFullFrameSpans(createFrame(constrained.lines, hitboxes, constrained.cursor, spans), resolveNodeStyle(node, context, { includeBase: false }).spanKinds);
     }
     case "terminal-editor":
       return addFullFrameSpans(renderEditorFrame(node, context), resolveNodeStyle(node, context).spanKinds);

package/src/render.ts

@@ -3,6 +3,8 @@ import { renderTerminalFrame as renderTerminalFrameInternal } from "./render-int
 
 import type { TerminalFrame, TerminalHitbox, TerminalNode, TerminalTheme } from "./types.js";
 
+const MODAL_OVERLAY_HITBOX_ID = "\u0000valyrian-overlay-modal-shield";
+
 export interface TerminalRenderContext {
   cols: number;
   rows: number;
@@ -41,7 +43,9 @@ function stripDoubleUnderscoreFields<T extends Record<string, any>>(value: T): R
 function publicTerminalFrame(frame: TerminalFrame): TerminalFrame {
   return {
     lines: frame.lines,
-    hitboxes: frame.hitboxes.map((hitbox) => stripDoubleUnderscoreFields(hitbox) as TerminalHitbox),
+    hitboxes: frame.hitboxes
+      .filter((hitbox) => hitbox.id !== MODAL_OVERLAY_HITBOX_ID)
+      .map((hitbox) => stripDoubleUnderscoreFields(hitbox) as TerminalHitbox),
     cursor: frame.cursor ? { ...frame.cursor } : null,
     spans: frame.spans
   };