@fairyhunter13/opentui-core 0.1.112 → 0.1.114

package/src/renderables/__tests__/Textarea.rendering.test.ts

@@ -0,0 +1,1866 @@
+import { describe, expect, it, beforeEach, afterEach } from "bun:test"
+import { createTestRenderer, type TestRenderer, type MockInput } from "../../testing/test-renderer.js"
+import { createTextareaRenderable } from "./renderable-test-utils.js"
+import { RGBA } from "../../lib/RGBA.js"
+import { SyntaxStyle } from "../../syntax-style.js"
+import { OptimizedBuffer } from "../../buffer.js"
+import { fg, t } from "../../lib/index.js"
+import { BoxRenderable } from "../Box.js"
+import { TextareaRenderable } from "../Textarea.js"
+import { TextRenderable } from "../Text.js"
+
+let currentRenderer: TestRenderer
+let renderOnce: () => Promise<void>
+let currentMockInput: MockInput
+let captureFrame: () => string
+let resize: (width: number, height: number) => void
+
+describe("Textarea - Rendering Tests", () => {
+  beforeEach(async () => {
+    ;({
+      renderer: currentRenderer,
+      renderOnce,
+      captureCharFrame: captureFrame,
+      mockInput: currentMockInput,
+      resize,
+    } = await createTestRenderer({
+      width: 80,
+      height: 24,
+    }))
+  })
+
+  afterEach(() => {
+    currentRenderer.destroy()
+  })
+
+  describe("Wrapping", () => {
+    it("should move cursor down through all wrapped visual lines at column 0", async () => {
+      // Create a long line that will wrap into multiple visual lines
+      const longText =
+        "This is a very long line that will definitely wrap into multiple visual lines when the viewport is small"
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: longText,
+        width: 20, // Small viewport to force wrapping
+        height: 10,
+        wrapMode: "word",
+      })
+
+      editor.focus()
+
+      // Set cursor at the beginning (0, 0) - logical position
+      editor.editBuffer.setCursor(0, 0)
+      await renderOnce()
+
+      // Get initial visual cursor position - should be at visual 0, 0
+      let visualCursor = editor.editorView.getVisualCursor()
+      expect(visualCursor.visualRow).toBe(0)
+      expect(visualCursor.visualCol).toBe(0)
+
+      // Verify we have multiple wrapped lines (should be 7 for this text)
+      const vlineCount = editor.editorView.getVirtualLineCount()
+      expect(vlineCount).toBeGreaterThan(1)
+
+      // Move down through each wrapped line - cursor should stay at column 0
+      for (let i = 1; i < vlineCount; i++) {
+        currentMockInput.pressArrow("down")
+        await renderOnce()
+
+        visualCursor = editor.editorView.getVisualCursor()
+
+        // Cursor should have moved down to the next visual line
+        expect(visualCursor.visualRow).toBe(i)
+
+        // Cursor should be at column 0 (beginning of each wrapped line)
+        expect(visualCursor.visualCol).toBe(0)
+      }
+
+      // After moving through all wrapped lines, we should be at the last wrapped line
+      expect(visualCursor.visualRow).toBe(vlineCount - 1)
+      expect(visualCursor.visualCol).toBe(0)
+    })
+
+    it("should move cursor up through all wrapped visual lines at column 0", async () => {
+      // Create a long line that will wrap into multiple visual lines
+      const longText =
+        "This is a very long line that will definitely wrap into multiple visual lines when the viewport is small"
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: longText,
+        width: 20, // Small viewport to force wrapping
+        height: 10,
+        wrapMode: "word",
+      })
+
+      editor.focus()
+
+      // Verify we have multiple wrapped lines
+      const vlineCount = editor.editorView.getVirtualLineCount()
+      expect(vlineCount).toBeGreaterThan(1)
+
+      // Start at the END of the line (which will be on the last wrapped visual line)
+      const eol = editor.editBuffer.getEOL()
+      editor.editBuffer.setCursor(eol.row, eol.col)
+      await renderOnce()
+
+      // Move to the beginning of the last wrapped line (column 0 of last visual line)
+      let visualCursor = editor.editorView.getVisualCursor()
+      const lastVisualRow = visualCursor.visualRow
+
+      // Set cursor to column 0 of the last wrapped visual line by finding its logical column
+      // Last visual line starts at a specific logical column - we need to find it
+      const lastVlineStartCol = editor.logicalCursor.col - visualCursor.visualCol
+      editor.editBuffer.setCursor(0, lastVlineStartCol)
+      await renderOnce()
+
+      visualCursor = editor.editorView.getVisualCursor()
+      expect(visualCursor.visualRow).toBe(lastVisualRow)
+      expect(visualCursor.visualCol).toBe(0)
+
+      // Now move UP through each wrapped line - cursor should stay at column 0
+      for (let i = lastVisualRow - 1; i >= 0; i--) {
+        currentMockInput.pressArrow("up")
+        await renderOnce()
+
+        visualCursor = editor.editorView.getVisualCursor()
+
+        // Cursor should have moved up to the previous visual line
+        expect(visualCursor.visualRow).toBe(i)
+
+        // Cursor should be at column 0 (beginning of each wrapped line)
+        expect(visualCursor.visualCol).toBe(0)
+      }
+
+      // After moving through all wrapped lines, we should be at the first wrapped line
+      expect(visualCursor.visualRow).toBe(0)
+      expect(visualCursor.visualCol).toBe(0)
+    })
+
+    it("should handle wrap mode property", async () => {
+      const longText = "A".repeat(100)
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: longText,
+        width: 20,
+        height: 10,
+        wrapMode: "word",
+      })
+
+      expect(editor.wrapMode).toBe("word")
+      const wrappedCount = editor.editorView.getVirtualLineCount()
+      expect(wrappedCount).toBeGreaterThan(1)
+
+      editor.wrapMode = "none"
+      expect(editor.wrapMode).toBe("none")
+      const unwrappedCount = editor.editorView.getVirtualLineCount()
+      expect(unwrappedCount).toBe(1)
+    })
+
+    it("should handle wrapMode changes", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello wonderful world",
+        width: 12,
+        height: 10,
+        wrapMode: "char",
+      })
+
+      expect(editor.wrapMode).toBe("char")
+
+      editor.wrapMode = "word"
+      expect(editor.wrapMode).toBe("word")
+    })
+
+    it("should render with tab indicator correctly", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Line 1\tTabbed\nLine 2\t\tDouble tab",
+        tabIndicator: "→",
+        tabIndicatorColor: RGBA.fromValues(0.5, 0.5, 0.5, 1),
+        width: 40,
+        height: 10,
+      })
+
+      await renderOnce()
+      const frame = captureFrame()
+      expect(frame).toMatchSnapshot()
+    })
+  })
+
+  describe("Height and Width Measurement", () => {
+    it("should grow height for multiline text without wrapping", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Line 1\nLine 2\nLine 3\nLine 4\nLine 5",
+        wrapMode: "none",
+        width: 40,
+      })
+
+      await renderOnce()
+
+      expect(editor.height).toBe(5)
+      expect(editor.width).toBeGreaterThanOrEqual(6)
+    })
+
+    it("should grow height for wrapped text when wrapping enabled", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "This is a very long line that will definitely wrap to multiple lines",
+        wrapMode: "word",
+        width: 15,
+      })
+
+      await renderOnce()
+
+      expect(editor.height).toBeGreaterThan(1)
+      expect(editor.width).toBeLessThanOrEqual(15)
+    })
+
+    it("should measure full width when wrapping is disabled and not constrained by parent", async () => {
+      const longLine = "This is a very long line that would wrap but wrapping is disabled"
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: longLine,
+        wrapMode: "none",
+        position: "absolute",
+      })
+
+      await renderOnce()
+
+      expect(editor.height).toBe(1)
+      expect(editor.width).toBe(longLine.length)
+    })
+
+    it("should shrink height when deleting lines via value setter", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Line 1\nLine 2\nLine 3\nLine 4\nLine 5",
+        width: 40,
+        wrapMode: "none",
+      })
+
+      editor.focus()
+      await renderOnce()
+      expect(editor.height).toBe(5)
+
+      // Remove lines by setting new value
+      editor.setText("Line 1\nLine 2")
+      await renderOnce()
+
+      expect(editor.height).toBe(2)
+      expect(editor.plainText).toBe("Line 1\nLine 2")
+    })
+
+    it("should update height when content changes from single to multiline", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Single line",
+        wrapMode: "none",
+      })
+
+      await renderOnce()
+      expect(editor.height).toBe(1)
+
+      editor.setText("Line 1\nLine 2\nLine 3")
+      await renderOnce()
+
+      expect(editor.height).toBe(3)
+    })
+
+    it("should grow height when pressing Enter to add newlines", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Single line",
+        width: 40,
+        wrapMode: "none",
+      })
+
+      // Add a second textarea below to verify layout reflow
+      const { textarea: belowEditor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Below",
+        width: 40,
+      })
+
+      await renderOnce()
+      expect(editor.height).toBe(1)
+      const initialHeight = editor.height
+      const initialBelowY = belowEditor.y
+
+      editor.focus()
+      editor.gotoLine(9999) // Move to end
+
+      // Press Enter 3 times to add 3 newlines
+      currentMockInput.pressEnter()
+      expect(editor.plainText).toBe("Single line\n")
+      await renderOnce() // Wait for layout recalculation
+
+      currentMockInput.pressEnter()
+      expect(editor.plainText).toBe("Single line\n\n")
+      await renderOnce() // Wait for layout recalculation
+
+      currentMockInput.pressEnter()
+      expect(editor.plainText).toBe("Single line\n\n\n")
+      await renderOnce() // Wait for layout recalculation
+
+      // The editor should have grown
+      expect(editor.height).toBeGreaterThan(initialHeight)
+      expect(editor.height).toBe(4) // 1 original line + 3 new lines
+      expect(editor.plainText).toBe("Single line\n\n\n")
+
+      // The element below should have moved down
+      expect(belowEditor.y).toBeGreaterThan(initialBelowY)
+      expect(belowEditor.y).toBe(4) // After the 4-line editor
+    })
+  })
+
+  describe("Unicode Support", () => {
+    it("should handle emoji insertion", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello",
+        width: 40,
+        height: 10,
+      })
+
+      editor.focus()
+      editor.gotoLine(9999) // Move to end
+      editor.insertText(" 🌟")
+
+      expect(editor.plainText).toBe("Hello 🌟")
+    })
+
+    it("should handle CJK characters", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello",
+        width: 40,
+        height: 10,
+      })
+
+      editor.focus()
+      editor.gotoLine(9999) // Move to end
+      editor.insertText(" 世界")
+
+      expect(editor.plainText).toBe("Hello 世界")
+    })
+
+    it("should handle emoji cursor movement", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "A🌟B",
+        width: 40,
+        height: 10,
+      })
+
+      editor.focus()
+      expect(editor.logicalCursor.col).toBe(0)
+
+      currentMockInput.pressArrow("right") // Move past A
+      expect(editor.logicalCursor.col).toBe(1)
+
+      currentMockInput.pressArrow("right") // Move past emoji (2 cells)
+      expect(editor.logicalCursor.col).toBe(3)
+
+      currentMockInput.pressArrow("right") // Move past B
+      expect(editor.logicalCursor.col).toBe(4)
+    })
+  })
+
+  describe("Content Property", () => {
+    it("should update content programmatically", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Initial",
+        width: 40,
+        height: 10,
+      })
+
+      editor.setText("Updated")
+      expect(editor.plainText).toBe("Updated")
+      expect(editor.plainText).toBe("Updated")
+    })
+
+    it("should reset cursor when content changes", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World",
+        width: 40,
+        height: 10,
+      })
+
+      editor.gotoLine(9999) // Move to end
+      expect(editor.logicalCursor.col).toBe(11)
+
+      editor.setText("New")
+      // Cursor should reset to start
+      expect(editor.logicalCursor.row).toBe(0)
+      expect(editor.logicalCursor.col).toBe(0)
+    })
+
+    it("should clear text with clear() method", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World",
+        width: 40,
+        height: 10,
+      })
+
+      expect(editor.plainText).toBe("Hello World")
+
+      editor.clear()
+      expect(editor.plainText).toBe("")
+    })
+
+    it("should clear highlights with clear() method", async () => {
+      const style = SyntaxStyle.create()
+      const styleId = style.registerStyle("highlight", {
+        fg: RGBA.fromValues(1, 0, 0, 1),
+      })
+
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World",
+        width: 40,
+        height: 10,
+        syntaxStyle: style,
+      })
+
+      editor.addHighlightByCharRange({
+        start: 0,
+        end: 5,
+        styleId: styleId,
+        priority: 0,
+      })
+
+      const highlightsBefore = editor.getLineHighlights(0)
+      expect(highlightsBefore.length).toBeGreaterThan(0)
+
+      editor.clear()
+
+      expect(editor.plainText).toBe("")
+      const highlightsAfter = editor.getLineHighlights(0)
+      expect(highlightsAfter.length).toBe(0)
+    })
+
+    it("should clear both text and highlights together", async () => {
+      const style = SyntaxStyle.create()
+      const styleId = style.registerStyle("highlight", {
+        fg: RGBA.fromValues(1, 0, 0, 1),
+      })
+
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Line 1\nLine 2\nLine 3",
+        width: 40,
+        height: 10,
+        syntaxStyle: style,
+      })
+
+      editor.addHighlight(0, { start: 0, end: 6, styleId: styleId, priority: 0 })
+      editor.addHighlight(1, { start: 0, end: 6, styleId: styleId, priority: 0 })
+
+      expect(editor.plainText).toBe("Line 1\nLine 2\nLine 3")
+      expect(editor.getLineHighlights(0).length).toBe(1)
+      expect(editor.getLineHighlights(1).length).toBe(1)
+
+      editor.clear()
+
+      expect(editor.plainText).toBe("")
+      expect(editor.getLineHighlights(0).length).toBe(0)
+      expect(editor.getLineHighlights(1).length).toBe(0)
+    })
+
+    it("should allow typing after clear()", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World",
+        width: 40,
+        height: 10,
+      })
+
+      editor.focus()
+      expect(editor.plainText).toBe("Hello World")
+
+      currentMockInput.pressKey("!")
+      expect(editor.plainText).toBe("!Hello World")
+
+      editor.clear()
+      expect(editor.plainText).toBe("")
+
+      currentMockInput.pressKey("N")
+      currentMockInput.pressKey("e")
+      currentMockInput.pressKey("w")
+      expect(editor.plainText).toBe("New")
+
+      currentMockInput.pressKey(" ")
+      currentMockInput.pressKey("T")
+      currentMockInput.pressKey("e")
+      currentMockInput.pressKey("x")
+      currentMockInput.pressKey("t")
+      expect(editor.plainText).toBe("New Text")
+    })
+  })
+
+  describe("Rendering After Edits", () => {
+    it("should render correctly after insert text", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Test",
+        width: 40,
+        height: 10,
+      })
+
+      editor.focus()
+      editor.insertText("x")
+
+      const buffer = OptimizedBuffer.create(80, 24, "wcwidth")
+      buffer.drawEditorView(editor.editorView, 0, 0)
+
+      expect(editor.plainText).toBe("xTest")
+      expect(editor.logicalCursor.col).toBe(1)
+
+      buffer.destroy()
+    })
+
+    it("should render correctly after rapid edits", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "",
+        width: 40,
+        height: 10,
+      })
+
+      editor.focus()
+
+      const buffer = OptimizedBuffer.create(80, 24, "wcwidth")
+
+      for (let i = 0; i < 5; i++) {
+        editor.insertText("a")
+        buffer.drawEditorView(editor.editorView, 0, 0)
+      }
+
+      expect(editor.plainText).toBe("aaaaa")
+      expect(editor.logicalCursor.col).toBe(5)
+
+      buffer.destroy()
+    })
+
+    it("should render correctly after newline", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello",
+        width: 40,
+        height: 10,
+      })
+
+      editor.focus()
+      editor.gotoLine(9999)
+
+      const buffer = OptimizedBuffer.create(80, 24, "wcwidth")
+
+      editor.newLine()
+      buffer.drawEditorView(editor.editorView, 0, 0)
+
+      expect(editor.plainText).toBe("Hello\n")
+      expect(editor.logicalCursor.row).toBe(1)
+      expect(editor.logicalCursor.col).toBe(0)
+
+      buffer.destroy()
+    })
+
+    it("should render correctly after backspace", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello",
+        width: 40,
+        height: 10,
+      })
+
+      editor.focus()
+      editor.gotoLine(9999)
+
+      const buffer = OptimizedBuffer.create(80, 24, "wcwidth")
+
+      editor.deleteCharBackward()
+      buffer.drawEditorView(editor.editorView, 0, 0)
+
+      expect(editor.plainText).toBe("Hell")
+      expect(editor.logicalCursor.col).toBe(4)
+
+      buffer.destroy()
+    })
+
+    it("should render correctly with draw-edit-draw pattern", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Test",
+        width: 40,
+        height: 10,
+      })
+
+      editor.focus()
+
+      const buffer = OptimizedBuffer.create(80, 24, "wcwidth")
+
+      buffer.drawEditorView(editor.editorView, 0, 0)
+      editor.insertText("x")
+      buffer.drawEditorView(editor.editorView, 0, 0)
+
+      expect(editor.plainText).toBe("xTest")
+      expect(editor.logicalCursor.col).toBe(1)
+
+      buffer.destroy()
+    })
+
+    it("should render correctly after multiple text buffer modifications", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Line1\nLine2\nLine3",
+        width: 40,
+        height: 10,
+      })
+
+      editor.focus()
+
+      const buffer = OptimizedBuffer.create(80, 24, "wcwidth")
+
+      buffer.drawEditorView(editor.editorView, 0, 0)
+
+      editor.insertText("X")
+      buffer.drawEditorView(editor.editorView, 0, 0)
+      expect(editor.plainText).toBe("XLine1\nLine2\nLine3")
+
+      editor.newLine()
+      buffer.drawEditorView(editor.editorView, 0, 0)
+      expect(editor.plainText).toBe("X\nLine1\nLine2\nLine3")
+
+      editor.deleteCharBackward()
+      buffer.drawEditorView(editor.editorView, 0, 0)
+      expect(editor.plainText).toBe("XLine1\nLine2\nLine3")
+
+      buffer.destroy()
+    })
+  })
+
+  describe("Viewport Scrolling", () => {
+    it("should scroll viewport down when cursor moves below visible area", async () => {
+      // Create editor with small viewport
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Line 0\nLine 1\nLine 2\nLine 3\nLine 4\nLine 5\nLine 6\nLine 7\nLine 8\nLine 9",
+        width: 40,
+        height: 5, // Only 5 lines visible
+      })
+
+      editor.focus()
+
+      // Initial viewport should show lines 0-4
+      let viewport = editor.editorView.getViewport()
+      expect(viewport.offsetY).toBe(0)
+      expect(viewport.height).toBe(5)
+
+      // Move cursor to line 7 (beyond viewport)
+      editor.gotoLine(7)
+
+      // Viewport should have scrolled to keep cursor visible
+      viewport = editor.editorView.getViewport()
+      // With scroll margin of 0.2 (20% = 1 line), viewport should scroll to show line 7
+      // Expected: offsetY should be at least 3 (to show lines 3-7)
+      expect(viewport.offsetY).toBeGreaterThanOrEqual(3)
+    })
+
+    it("should scroll viewport up when cursor moves above visible area", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Line 0\nLine 1\nLine 2\nLine 3\nLine 4\nLine 5\nLine 6\nLine 7\nLine 8\nLine 9",
+        width: 40,
+        height: 5,
+      })
+
+      editor.focus()
+
+      // Start at line 8
+      editor.gotoLine(8)
+
+      let viewport = editor.editorView.getViewport()
+      // Viewport should have automatically scrolled to show line 8
+      expect(viewport.offsetY).toBeGreaterThan(0)
+
+      // Now move to line 1 (above viewport)
+      editor.gotoLine(1)
+
+      viewport = editor.editorView.getViewport()
+      // Viewport should have scrolled up to show line 1
+      expect(viewport.offsetY).toBeLessThanOrEqual(1)
+    })
+
+    it("should scroll viewport when using arrow keys to move beyond visible area", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 20 }, (_, i) => `Line ${i}`).join("\n"),
+        width: 40,
+        height: 5,
+      })
+
+      editor.focus()
+
+      let viewport = editor.editorView.getViewport()
+      expect(viewport.offsetY).toBe(0)
+
+      // Press down arrow 6 times to move beyond initial viewport
+      for (let i = 0; i < 6; i++) {
+        currentMockInput.pressArrow("down")
+      }
+
+      viewport = editor.editorView.getViewport()
+      // Should have scrolled
+      expect(viewport.offsetY).toBeGreaterThan(0)
+    })
+
+    it("should maintain scroll margin when moving cursor", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 20 }, (_, i) => `Line ${i}`).join("\n"),
+        width: 40,
+        height: 10,
+        scrollMargin: 0.2, // 20% = 2 lines margin
+      })
+
+      editor.focus()
+
+      // Move to line 8 (near bottom of initial viewport)
+      editor.gotoLine(8)
+
+      let viewport = editor.editorView.getViewport()
+
+      // With 2-line margin, cursor at line 8 should trigger scroll
+      // so that line 8 is at most at position 8 in viewport
+      expect(viewport.offsetY).toBeGreaterThanOrEqual(0)
+    })
+
+    it("should handle viewport scrolling with text wrapping", async () => {
+      const longLine = "word ".repeat(50) // Creates line that will wrap
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 10 }, (_, i) => (i === 5 ? longLine : `Line ${i}`)).join("\n"),
+        width: 20,
+        height: 5,
+        wrapMode: "word",
+      })
+
+      editor.focus()
+
+      // Move to the long line
+      editor.gotoLine(5)
+
+      const vlineCount = editor.editorView.getTotalVirtualLineCount()
+      expect(vlineCount).toBeGreaterThan(10) // Should be more due to wrapping
+
+      // Move to end of long line
+      const cursor = editor.logicalCursor
+      editor.editBuffer.setCursorToLineCol(cursor.row, 9999) // Move to end of line
+
+      let viewport = editor.editorView.getViewport()
+
+      // Viewport should have scrolled to show cursor
+      // This is complex with wrapping - we need virtual line scrolling
+    })
+
+    it("should verify viewport follows cursor to line 10", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 20 }, (_, i) => `Line ${i}`).join("\n"),
+        width: 40,
+        height: 8,
+      })
+
+      editor.focus()
+
+      // Move to line 10
+      editor.gotoLine(10)
+
+      const viewport = editor.editorView.getViewport()
+
+      // Viewport should have scrolled to show line 10
+      // With height=8 and scroll margin, line 10 should be visible
+      expect(viewport.offsetY).toBeGreaterThan(0)
+      expect(viewport.offsetY).toBeLessThanOrEqual(10)
+
+      // Line 10 should be within the viewport range
+      const viewportEnd = viewport.offsetY + viewport.height
+      expect(10).toBeGreaterThanOrEqual(viewport.offsetY)
+      expect(10).toBeLessThan(viewportEnd)
+    })
+
+    it("should track viewport offset as cursor moves through document", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 15 }, (_, i) => `Line ${i}`).join("\n"),
+        width: 30,
+        height: 5,
+      })
+
+      editor.focus()
+
+      const viewportOffsets: number[] = []
+
+      // Track viewport offset at different cursor positions
+      for (const line of [0, 2, 4, 6, 8, 10, 12]) {
+        editor.gotoLine(line)
+        const viewport = editor.editorView.getViewport()
+        viewportOffsets.push(viewport.offsetY)
+      }
+
+      // Viewport should generally increase as cursor moves down
+      // (with possible plateaus when cursor is already visible)
+      const lastOffset = viewportOffsets[viewportOffsets.length - 1]
+      const firstOffset = viewportOffsets[0]
+      expect(lastOffset).toBeGreaterThan(firstOffset)
+
+      // At line 0, viewport should be at 0
+      expect(viewportOffsets[0]).toBe(0)
+
+      // At line 12, viewport should have scrolled
+      expect(viewportOffsets[viewportOffsets.length - 1]).toBeGreaterThan(5)
+    })
+
+    it("should scroll viewport when cursor moves with Page Up/Page Down", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 30 }, (_, i) => `Line ${i}`).join("\n"),
+        width: 40,
+        height: 10,
+      })
+
+      editor.focus()
+
+      let viewport = editor.editorView.getViewport()
+      expect(viewport.offsetY).toBe(0)
+
+      // Move down 15 lines (more than viewport height)
+      for (let i = 0; i < 15; i++) {
+        editor.moveCursorDown()
+      }
+
+      viewport = editor.editorView.getViewport()
+
+      // Should have scrolled
+      expect(viewport.offsetY).toBeGreaterThan(0)
+      expect(editor.logicalCursor.row).toBe(15)
+    })
+
+    it("should scroll viewport down when pressing Enter repeatedly", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Start",
+        width: 40,
+        height: 5,
+      })
+
+      editor.focus()
+      editor.gotoLine(9999) // Move to end
+
+      let viewport = editor.editorView.getViewport()
+      expect(viewport.offsetY).toBe(0)
+      expect(editor.logicalCursor.row).toBe(0)
+
+      // Press Enter 8 times to create 8 new lines
+      for (let i = 0; i < 8; i++) {
+        currentMockInput.pressEnter()
+      }
+
+      // After 8 Enters, we should have 9 lines total (0-8)
+      expect(editor.logicalCursor.row).toBe(8)
+
+      // Viewport should have scrolled to keep cursor visible
+      viewport = editor.editorView.getViewport()
+      expect(viewport.offsetY).toBeGreaterThan(0)
+
+      // Cursor should be visible in viewport
+      const cursorLine = editor.logicalCursor.row
+      expect(cursorLine).toBeGreaterThanOrEqual(viewport.offsetY)
+      expect(cursorLine).toBeLessThan(viewport.offsetY + viewport.height)
+    })
+
+    it("should scroll viewport up when pressing Backspace to delete characters and move up", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 15 }, (_, i) => `Line ${i}`).join("\n"),
+        width: 40,
+        height: 5,
+      })
+
+      editor.focus()
+
+      // Start at line 10, move to end so we have characters to delete
+      editor.gotoLine(10)
+      let cursor = editor.logicalCursor
+      editor.editBuffer.setCursorToLineCol(cursor.row, 9999) // Move to end of line
+
+      let viewport = editor.editorView.getViewport()
+      expect(viewport.offsetY).toBeGreaterThan(0)
+      const initialOffset = viewport.offsetY
+
+      // Delete all text and move cursor up to line 0
+      // Press Ctrl+A to go to start, then move to line 2, then backspace repeatedly
+      editor.gotoLine(0) // Move to start
+      editor.gotoLine(2)
+      cursor = editor.logicalCursor
+      editor.editBuffer.setCursorToLineCol(cursor.row, 9999) // Move to end of line
+
+      // Now we're at line 2, and viewport should have scrolled up
+      viewport = editor.editorView.getViewport()
+
+      // Viewport should have scrolled up from initial position
+      expect(viewport.offsetY).toBeLessThan(initialOffset)
+      expect(editor.logicalCursor.row).toBe(2)
+    })
+
+    it("should scroll viewport when typing at end creates wrapped lines beyond viewport", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Start",
+        width: 20,
+        height: 5,
+        wrapMode: "word",
+      })
+
+      editor.focus()
+      editor.gotoLine(9999) // Move to end
+
+      let viewport = editor.editorView.getViewport()
+      expect(viewport.offsetY).toBe(0)
+
+      // Type enough to create multiple wrapped lines
+      const longText = " word".repeat(50)
+      for (const char of longText) {
+        currentMockInput.pressKey(char)
+      }
+
+      viewport = editor.editorView.getViewport()
+      const vlineCount = editor.editorView.getTotalVirtualLineCount()
+
+      // Should have created multiple virtual lines
+      expect(vlineCount).toBeGreaterThan(5)
+
+      // Viewport should have scrolled to keep cursor visible
+      // (This test may fail if virtual line scrolling isn't implemented yet)
+      expect(viewport.offsetY).toBeGreaterThanOrEqual(0)
+    })
+
+    it("should scroll viewport when using Enter to add lines, then Backspace to remove them", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Line 0\nLine 1\nLine 2",
+        width: 40,
+        height: 5,
+      })
+
+      editor.focus()
+      editor.gotoLine(9999) // Move to end
+
+      let viewport = editor.editorView.getViewport()
+      const initialOffset = viewport.offsetY
+
+      // Add 6 new lines
+      for (let i = 0; i < 6; i++) {
+        currentMockInput.pressEnter()
+        currentMockInput.pressKey("X")
+      }
+
+      // Should have scrolled down
+      viewport = editor.editorView.getViewport()
+      expect(viewport.offsetY).toBeGreaterThan(initialOffset)
+      const maxOffset = viewport.offsetY
+
+      // Now delete those lines by backspacing
+      for (let i = 0; i < 12; i++) {
+        // 12 backspaces to delete 6 "X\n" pairs
+        currentMockInput.pressBackspace()
+      }
+
+      // Should have scrolled back up
+      viewport = editor.editorView.getViewport()
+      expect(viewport.offsetY).toBeLessThan(maxOffset)
+    })
+
+    it("should show last line at bottom of viewport with no gap", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 10 }, (_, i) => `Line ${i}`).join("\n"),
+        width: 40,
+        height: 5,
+      })
+
+      editor.focus()
+
+      // Move to last line (line 9)
+      editor.gotoLine(9)
+
+      let viewport = editor.editorView.getViewport()
+
+      // With 10 lines (0-9) and viewport height 5, max offset is 10 - 5 = 5
+      // Viewport should be at offset 5, showing lines 5-9 with line 9 at the bottom
+      expect(viewport.offsetY).toBe(5)
+
+      // Verify cursor line is visible
+      expect(9).toBeGreaterThanOrEqual(viewport.offsetY)
+      expect(9).toBeLessThan(viewport.offsetY + viewport.height)
+
+      // No gap - last visible line should be the last line of content
+      const lastVisibleLine = viewport.offsetY + viewport.height - 1
+      expect(lastVisibleLine).toBe(9)
+    })
+
+    it("should not scroll past end when document is smaller than viewport", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Line 0\nLine 1\nLine 2",
+        width: 40,
+        height: 10, // Viewport bigger than content
+      })
+
+      editor.focus()
+
+      // Move to last line
+      editor.gotoLine(2)
+
+      let viewport = editor.editorView.getViewport()
+
+      // Should NOT scroll at all - content fits in viewport
+      expect(viewport.offsetY).toBe(0)
+    })
+  })
+
+  describe("Placeholder Support", () => {
+    it("should display placeholder when empty", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "",
+        width: 40,
+        height: 10,
+        placeholder: "Enter text here...",
+      })
+
+      // plainText should return empty (placeholder is display-only)
+      expect(editor.plainText).toBe("")
+      expect(editor.placeholder).toBe("Enter text here...")
+    })
+
+    it("should hide placeholder when text is inserted", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "",
+        width: 40,
+        height: 10,
+        placeholder: "Type something...",
+      })
+
+      editor.focus()
+      expect(editor.plainText).toBe("")
+
+      currentMockInput.pressKey("H")
+      currentMockInput.pressKey("i")
+
+      expect(editor.plainText).toBe("Hi")
+    })
+
+    it("should reactivate placeholder when all text is deleted", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Test",
+        width: 40,
+        height: 10,
+        placeholder: "Empty buffer...",
+      })
+
+      editor.focus()
+      expect(editor.plainText).toBe("Test")
+
+      // Move to end, then delete all text
+      editor.gotoLine(9999)
+      for (let i = 0; i < 4; i++) {
+        currentMockInput.pressBackspace()
+      }
+
+      expect(editor.plainText).toBe("")
+    })
+
+    it("should update placeholder text dynamically", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "",
+        width: 40,
+        height: 10,
+        placeholder: "First placeholder",
+      })
+
+      expect(editor.placeholder).toBe("First placeholder")
+      expect(editor.plainText).toBe("")
+
+      editor.placeholder = "Second placeholder"
+      expect(editor.placeholder).toBe("Second placeholder")
+      expect(editor.plainText).toBe("")
+    })
+
+    it("should update placeholder with styled text dynamically", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "",
+        width: 40,
+        height: 10,
+        placeholder: "Colored placeholder",
+      })
+
+      expect(editor.plainText).toBe("")
+
+      // Update placeholder with styled text
+      editor.placeholder = t`${fg("#FF0000")("Red placeholder")}`
+      expect(editor.plainText).toBe("")
+    })
+
+    it("should work with value property setter", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "",
+        width: 40,
+        height: 10,
+        placeholder: "Empty state",
+      })
+
+      expect(editor.plainText).toBe("")
+
+      editor.setText("New content")
+      expect(editor.plainText).toBe("New content")
+
+      editor.setText("")
+      expect(editor.plainText).toBe("")
+    })
+
+    it("should handle placeholder with focus changes", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "",
+        width: 40,
+        height: 10,
+        placeholder: "Click to edit",
+      })
+
+      // Placeholder should show regardless of focus
+      expect(editor.plainText).toBe("")
+
+      editor.focus()
+      expect(editor.plainText).toBe("")
+
+      editor.blur()
+      expect(editor.plainText).toBe("")
+    })
+
+    it("should handle typing after placeholder is shown", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "",
+        width: 40,
+        height: 10,
+        placeholder: "Start typing...",
+      })
+
+      editor.focus()
+      expect(editor.plainText).toBe("")
+
+      currentMockInput.pressKey("H")
+      currentMockInput.pressKey("e")
+      currentMockInput.pressKey("l")
+      currentMockInput.pressKey("l")
+      currentMockInput.pressKey("o")
+
+      expect(editor.plainText).toBe("Hello")
+    })
+
+    it("should show placeholder after deleting all typed text", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "",
+        width: 40,
+        height: 10,
+        placeholder: "Type here",
+      })
+
+      editor.focus()
+
+      // Type "Test"
+      currentMockInput.pressKey("T")
+      currentMockInput.pressKey("e")
+      currentMockInput.pressKey("s")
+      currentMockInput.pressKey("t")
+      expect(editor.plainText).toBe("Test")
+
+      // Backspace all
+      for (let i = 0; i < 4; i++) {
+        currentMockInput.pressBackspace()
+      }
+
+      expect(editor.plainText).toBe("")
+    })
+
+    it("should handle placeholder with newlines", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "",
+        width: 40,
+        height: 10,
+        placeholder: "Line 1\nLine 2",
+      })
+
+      expect(editor.plainText).toBe("")
+
+      editor.insertText("Content")
+      expect(editor.plainText).toBe("Content")
+    })
+
+    it("should handle null placeholder (no placeholder)", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "",
+        width: 40,
+        height: 10,
+        placeholder: null,
+      })
+
+      expect(editor.placeholder).toBe(null)
+      expect(editor.plainText).toBe("")
+
+      editor.insertText("Content")
+      expect(editor.plainText).toBe("Content")
+    })
+
+    it("should clear placeholder when set to null", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "",
+        width: 40,
+        height: 10,
+        placeholder: "Initial placeholder",
+      })
+
+      expect(editor.placeholder).toBe("Initial placeholder")
+      expect(editor.plainText).toBe("")
+
+      editor.placeholder = null
+      expect(editor.placeholder).toBe(null)
+      expect(editor.plainText).toBe("")
+    })
+
+    it("should reset placeholder when set to undefined", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "",
+        width: 40,
+        height: 10,
+        placeholder: "Initial placeholder",
+      })
+
+      expect(editor.placeholder).toBe("Initial placeholder")
+
+      expect(() => {
+        editor.placeholder = undefined
+      }).not.toThrow()
+
+      expect(editor.placeholder).toBe(null)
+      expect(editor.plainText).toBe("")
+    })
+  })
+
+  describe("Textarea Content Snapshots", () => {
+    it("should render basic text content correctly", async () => {
+      await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World",
+        left: 5,
+        top: 3,
+        width: 20,
+        height: 5,
+      })
+
+      const frame = captureFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should render multiline text content correctly", async () => {
+      await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Line 1: Hello\nLine 2: World\nLine 3: Testing\nLine 4: Multiline",
+        left: 1,
+        top: 1,
+        width: 30,
+        height: 10,
+      })
+
+      const frame = captureFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should render text with character wrapping correctly", async () => {
+      await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "This is a very long text that should wrap to multiple lines when wrap is enabled",
+        wrapMode: "char",
+        width: 15,
+        left: 0,
+        top: 0,
+      })
+
+      const frame = captureFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should render text with word wrapping and punctuation", async () => {
+      await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello,World.Test-Example/Path with various punctuation marks!",
+        wrapMode: "word",
+        width: 12,
+        left: 0,
+        top: 0,
+      })
+
+      const frame = captureFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should render placeholder when creating textarea with placeholder directly", async () => {
+      await createTextareaRenderable(currentRenderer, renderOnce, {
+        placeholder: "Enter text here...",
+        left: 1,
+        top: 1,
+        width: 30,
+        height: 5,
+      })
+
+      const frame = captureFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should render placeholder when set programmatically after creation", async () => {
+      const { textarea } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        left: 1,
+        top: 1,
+        width: 30,
+        height: 5,
+      })
+
+      textarea.placeholder = "Type something..."
+      await renderOnce()
+
+      const frame = captureFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should resize correctly when typing return as first input with placeholder", async () => {
+      resize(40, 10)
+
+      const container = new BoxRenderable(currentRenderer, {
+        border: true,
+        left: 1,
+        top: 1,
+      })
+      currentRenderer.root.add(container)
+
+      const textarea = new TextareaRenderable(currentRenderer, {
+        placeholder: "Enter your message...",
+        width: 30,
+        minHeight: 1,
+        maxHeight: 3,
+      })
+      container.add(textarea)
+
+      textarea.focus()
+      await renderOnce()
+
+      const frameBeforeEnter = captureFrame()
+      expect(textarea.height).toBe(1)
+
+      currentMockInput.pressEnter()
+      await renderOnce()
+      await renderOnce()
+
+      const frameAfterEnter = captureFrame()
+      expect(frameAfterEnter).toMatchSnapshot()
+      expect(textarea.height).toBe(2)
+      expect(textarea.plainText).toBe("\n")
+    })
+  })
+
+  describe("Layout Reflow on Size Change", () => {
+    it("should reflow subsequent elements when textarea grows and shrinks", async () => {
+      const { textarea: firstEditor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Short",
+        width: 20,
+        wrapMode: "word",
+      })
+
+      const { textarea: secondEditor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "I am below the first textarea",
+        width: 30,
+      })
+
+      await renderOnce()
+
+      // Initially, first editor is 1 line high
+      expect(firstEditor.height).toBe(1)
+      const initialSecondY = secondEditor.y
+      expect(initialSecondY).toBe(1) // Right after first editor
+
+      // Expand first editor with wrapped content
+      firstEditor.setText("This is a very long line that will wrap to multiple lines and push the second textarea down")
+      await renderOnce()
+
+      // First editor should now be taller
+      expect(firstEditor.height).toBeGreaterThan(1)
+      // Second editor should have moved down
+      expect(secondEditor.y).toBeGreaterThan(initialSecondY)
+      const expandedSecondY = secondEditor.y
+
+      // Shrink first editor back
+      firstEditor.setText("Short again")
+      await renderOnce()
+
+      // First editor should be 1 line again
+      expect(firstEditor.height).toBe(1)
+      // Second editor should have moved back up
+      expect(secondEditor.y).toBeLessThan(expandedSecondY)
+      expect(secondEditor.y).toBe(initialSecondY)
+    })
+  })
+
+  describe("Width/Height Setter Layout Tests", () => {
+    it("should not shrink box when width is set via setter", async () => {
+      resize(40, 10)
+
+      const container = new BoxRenderable(currentRenderer, { border: true, width: 30 })
+      currentRenderer.root.add(container)
+
+      const row = new BoxRenderable(currentRenderer, { flexDirection: "row", width: "100%" })
+      container.add(row)
+
+      const indicator = new BoxRenderable(currentRenderer, { backgroundColor: "#f00" })
+      row.add(indicator)
+
+      const indicatorText = new TextRenderable(currentRenderer, { content: ">" })
+      indicator.add(indicatorText)
+
+      const content = new BoxRenderable(currentRenderer, { backgroundColor: "#0f0", flexGrow: 1 })
+      row.add(content)
+
+      const contentText = new TextRenderable(currentRenderer, { content: "Content that takes up space" })
+      content.add(contentText)
+
+      await renderOnce()
+
+      const initialIndicatorWidth = indicator.width
+
+      indicator.width = 5
+      await renderOnce()
+
+      const frame = captureFrame()
+      expect(frame).toMatchSnapshot()
+
+      expect(indicator.width).toBe(5)
+      expect(content.width).toBeGreaterThan(0)
+      expect(content.width).toBeLessThan(30)
+    })
+
+    it("should not shrink box when height is set via setter in column layout with textarea", async () => {
+      resize(30, 15)
+
+      const outerBox = new BoxRenderable(currentRenderer, { border: true, width: 25, height: 10 })
+      currentRenderer.root.add(outerBox)
+
+      const column = new BoxRenderable(currentRenderer, { flexDirection: "column", height: "100%" })
+      outerBox.add(column)
+
+      const header = new BoxRenderable(currentRenderer, { backgroundColor: "#f00" })
+      column.add(header)
+
+      const headerText = new TextRenderable(currentRenderer, { content: "Header" })
+      header.add(headerText)
+
+      const mainContent = new BoxRenderable(currentRenderer, { backgroundColor: "#0f0", flexGrow: 1 })
+      column.add(mainContent)
+
+      const { textarea: mainTextarea } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Line1\nLine2\nLine3\nLine4\nLine5\nLine6\nLine7\nLine8",
+      })
+      mainContent.add(mainTextarea)
+
+      const footer = new BoxRenderable(currentRenderer, { height: 2, backgroundColor: "#00f" })
+      column.add(footer)
+
+      const footerText = new TextRenderable(currentRenderer, { content: "Footer" })
+      footer.add(footerText)
+
+      await renderOnce()
+
+      header.height = 3
+      await renderOnce()
+
+      const frame = captureFrame()
+      expect(frame).toMatchSnapshot()
+
+      expect(header.height).toBe(3)
+      expect(mainContent.height).toBeGreaterThan(0)
+      expect(footer.height).toBe(2)
+    })
+
+    it("should not shrink box when minWidth is set via setter", async () => {
+      resize(40, 10)
+
+      const container = new BoxRenderable(currentRenderer, { border: true, width: 30 })
+      currentRenderer.root.add(container)
+
+      const row = new BoxRenderable(currentRenderer, { flexDirection: "row", width: "100%" })
+      container.add(row)
+
+      const indicator = new BoxRenderable(currentRenderer, { backgroundColor: "#f00", flexShrink: 1 })
+      row.add(indicator)
+
+      const indicatorText = new TextRenderable(currentRenderer, { content: ">" })
+      indicator.add(indicatorText)
+
+      const content = new BoxRenderable(currentRenderer, { backgroundColor: "#0f0", flexGrow: 1 })
+      row.add(content)
+
+      const contentText = new TextRenderable(currentRenderer, { content: "Content that takes up space" })
+      content.add(contentText)
+
+      await renderOnce()
+
+      indicator.minWidth = 5
+      await renderOnce()
+
+      const frame = captureFrame()
+      expect(frame).toMatchSnapshot()
+      expect(indicator.width).toBeGreaterThanOrEqual(5)
+      expect(content.width).toBeGreaterThan(0)
+    })
+
+    it("should not shrink box when minHeight is set via setter in column layout with textarea", async () => {
+      resize(30, 15)
+
+      const outerBox = new BoxRenderable(currentRenderer, { border: true, width: 25, height: 10 })
+      currentRenderer.root.add(outerBox)
+
+      const column = new BoxRenderable(currentRenderer, { flexDirection: "column", height: "100%" })
+      outerBox.add(column)
+
+      const header = new BoxRenderable(currentRenderer, { backgroundColor: "#f00", flexShrink: 1 })
+      column.add(header)
+
+      const headerText = new TextRenderable(currentRenderer, { content: "Header" })
+      header.add(headerText)
+
+      const mainContent = new BoxRenderable(currentRenderer, { backgroundColor: "#0f0", flexGrow: 1 })
+      column.add(mainContent)
+
+      const { textarea: mainTextarea } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Line1\nLine2\nLine3\nLine4\nLine5\nLine6\nLine7\nLine8",
+      })
+      mainContent.add(mainTextarea)
+
+      const footer = new BoxRenderable(currentRenderer, { height: 2, backgroundColor: "#00f" })
+      column.add(footer)
+
+      const footerText = new TextRenderable(currentRenderer, { content: "Footer" })
+      footer.add(footerText)
+
+      await renderOnce()
+
+      header.minHeight = 3
+      await renderOnce()
+
+      const frame = captureFrame()
+      expect(frame).toMatchSnapshot()
+
+      expect(header.height).toBeGreaterThanOrEqual(3)
+      expect(mainContent.height).toBeGreaterThan(0)
+      expect(footer.height).toBe(2)
+    })
+
+    it("should not shrink box when width is set from undefined via setter", async () => {
+      resize(40, 10)
+
+      const container = new BoxRenderable(currentRenderer, { border: true, width: 30 })
+      currentRenderer.root.add(container)
+
+      const row = new BoxRenderable(currentRenderer, { flexDirection: "row", width: "100%" })
+      container.add(row)
+
+      const indicator = new BoxRenderable(currentRenderer, { backgroundColor: "#f00", flexShrink: 1 })
+      row.add(indicator)
+
+      const indicatorText = new TextRenderable(currentRenderer, { content: ">" })
+      indicator.add(indicatorText)
+
+      const content = new BoxRenderable(currentRenderer, { backgroundColor: "#0f0", flexGrow: 1 })
+      row.add(content)
+
+      const contentText = new TextRenderable(currentRenderer, { content: "Content that takes up space" })
+      content.add(contentText)
+
+      await renderOnce()
+
+      indicator.width = 5
+      await renderOnce()
+
+      const frame = captureFrame()
+      expect(frame).toMatchSnapshot()
+
+      expect(indicator.width).toBe(5)
+      expect(content.width).toBeGreaterThan(0)
+    })
+
+    it("should verify dimensions are actually respected under extreme pressure", async () => {
+      resize(30, 10)
+
+      const container = new BoxRenderable(currentRenderer, { border: true, width: 20 })
+      currentRenderer.root.add(container)
+
+      const row = new BoxRenderable(currentRenderer, { flexDirection: "row", width: "100%" })
+      container.add(row)
+
+      const box1 = new BoxRenderable(currentRenderer, { backgroundColor: "#f00", flexShrink: 1 })
+      row.add(box1)
+      const text1 = new TextRenderable(currentRenderer, { content: "AAA" })
+      box1.add(text1)
+
+      const box2 = new BoxRenderable(currentRenderer, { backgroundColor: "#0f0", flexShrink: 1 })
+      row.add(box2)
+      const text2 = new TextRenderable(currentRenderer, { content: "BBB" })
+      box2.add(text2)
+
+      const box3 = new BoxRenderable(currentRenderer, { backgroundColor: "#00f", flexGrow: 1 })
+      row.add(box3)
+      const text3 = new TextRenderable(currentRenderer, { content: "CCC" })
+      box3.add(text3)
+
+      await renderOnce()
+
+      box1.width = 7
+      box2.minWidth = 5
+      await renderOnce()
+
+      expect(box1.width).toBe(7)
+      expect(box2.width).toBeGreaterThanOrEqual(5)
+      expect(box3.width).toBeGreaterThan(0)
+
+      const total = box1.width + box2.width + box3.width
+      expect(total).toBeLessThanOrEqual(18)
+    })
+  })
+
+  describe("Absolute Positioned Box with Textarea", () => {
+    it("should render textarea in absolute positioned box with padding and borders correctly", async () => {
+      resize(80, 20)
+
+      const notificationBox = new BoxRenderable(currentRenderer, {
+        position: "absolute",
+        justifyContent: "center",
+        alignItems: "flex-start",
+        top: 2,
+        right: 2,
+        maxWidth: Math.min(60, 80 - 6),
+        paddingLeft: 2,
+        paddingRight: 2,
+        paddingTop: 1,
+        paddingBottom: 1,
+        backgroundColor: "#1e293b",
+        borderColor: "#3b82f6",
+        border: ["left", "right"],
+      })
+
+      currentRenderer.root.add(notificationBox)
+
+      const outerWrapperBox = new BoxRenderable(currentRenderer, {
+        flexDirection: "row",
+        paddingBottom: 1,
+        paddingTop: 1,
+        paddingLeft: 2,
+        paddingRight: 2,
+        gap: 2,
+      })
+      notificationBox.add(outerWrapperBox)
+
+      const innerContentBox = new BoxRenderable(currentRenderer, {
+        flexGrow: 1,
+        gap: 1,
+      })
+      outerWrapperBox.add(innerContentBox)
+
+      const titleText = new TextRenderable(currentRenderer, {
+        content: "Important Notification",
+        attributes: 1,
+        marginBottom: 1,
+        fg: "#f8fafc",
+      })
+      innerContentBox.add(titleText)
+
+      const { textarea: messageTextarea } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue:
+          "This is a longer message that should wrap properly within the absolutely positioned box with appropriate width constraints and padding applied.",
+        textColor: "#e2e8f0",
+        wrapMode: "word",
+        width: "100%",
+      })
+      innerContentBox.add(messageTextarea)
+
+      await renderOnce()
+
+      const frame = captureFrame()
+      expect(frame).toMatchSnapshot()
+
+      expect(notificationBox.x).toBeGreaterThan(0)
+      expect(notificationBox.y).toBe(2)
+      expect(notificationBox.width).toBeGreaterThan(25)
+
+      expect(outerWrapperBox.width).toBeGreaterThan(15)
+      expect(innerContentBox.width).toBeGreaterThan(15)
+
+      expect(titleText.width).toBeGreaterThan(15)
+      expect(titleText.plainText).toBe("Important Notification")
+      expect(titleText.height).toBe(1)
+
+      expect(messageTextarea.width).toBeGreaterThan(15)
+      expect(messageTextarea.height).toBeGreaterThanOrEqual(1)
+      expect(messageTextarea.plainText).toBe(
+        "This is a longer message that should wrap properly within the absolutely positioned box with appropriate width constraints and padding applied.",
+      )
+    })
+
+    it("should render textarea fully visible in absolute positioned box at various positions", async () => {
+      resize(100, 25)
+
+      const topRightBox = new BoxRenderable(currentRenderer, {
+        position: "absolute",
+        top: 1,
+        right: 1,
+        maxWidth: 40,
+        paddingLeft: 1,
+        paddingRight: 1,
+        paddingTop: 0,
+        paddingBottom: 0,
+        backgroundColor: "#fef2f2",
+        borderColor: "#ef4444",
+        border: true,
+      })
+      currentRenderer.root.add(topRightBox)
+
+      const { textarea: topRightTextarea } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Error: File not found in the specified directory path",
+        textColor: "#991b1b",
+        wrapMode: "word",
+        width: "100%",
+      })
+      topRightBox.add(topRightTextarea)
+
+      const bottomLeftBox = new BoxRenderable(currentRenderer, {
+        position: "absolute",
+        bottom: 1,
+        left: 1,
+        maxWidth: 35,
+        paddingLeft: 1,
+        paddingRight: 1,
+        backgroundColor: "#f0fdf4",
+        borderColor: "#22c55e",
+        border: ["top", "bottom"],
+      })
+      currentRenderer.root.add(bottomLeftBox)
+
+      const { textarea: bottomLeftTextarea } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Success: Operation completed successfully!",
+        textColor: "#166534",
+        wrapMode: "word",
+        width: "100%",
+      })
+      bottomLeftBox.add(bottomLeftTextarea)
+
+      await renderOnce()
+
+      const frame = captureFrame()
+      expect(frame).toMatchSnapshot()
+
+      expect(topRightBox.y).toBe(1)
+      expect(topRightBox.x).toBeGreaterThan(50)
+      expect(topRightBox.width).toBeGreaterThan(30)
+      expect(topRightBox.width).toBeLessThanOrEqual(40)
+
+      expect(topRightTextarea.plainText).toBe("Error: File not found in the specified directory path")
+      expect(topRightTextarea.width).toBeGreaterThan(25)
+      expect(topRightTextarea.width).toBeLessThanOrEqual(38)
+      expect(topRightTextarea.height).toBeGreaterThan(1)
+
+      expect(bottomLeftBox.x).toBe(1)
+      expect(bottomLeftBox.y).toBeGreaterThan(15)
+      expect(bottomLeftBox.width).toBeGreaterThan(25)
+      expect(bottomLeftBox.width).toBeLessThanOrEqual(35)
+
+      expect(bottomLeftTextarea.plainText).toBe("Success: Operation completed successfully!")
+      expect(bottomLeftTextarea.width).toBeGreaterThan(25)
+      expect(bottomLeftTextarea.width).toBeLessThanOrEqual(33)
+      expect(bottomLeftTextarea.height).toBeGreaterThan(1)
+    })
+
+    it("should handle width:100% textarea in absolute positioned box with constrained maxWidth", async () => {
+      resize(70, 15)
+
+      const constrainedBox = new BoxRenderable(currentRenderer, {
+        position: "absolute",
+        top: 5,
+        left: 10,
+        maxWidth: 50,
+        paddingLeft: 3,
+        paddingRight: 3,
+        paddingTop: 2,
+        paddingBottom: 2,
+        backgroundColor: "#1e1e2e",
+      })
+      currentRenderer.root.add(constrainedBox)
+
+      const { textarea: longTextarea } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue:
+          "This is an extremely long piece of text that needs to wrap multiple times within the constrained width of the absolutely positioned container box with significant padding on all sides.",
+        textColor: "#cdd6f4",
+        wrapMode: "word",
+        width: "100%",
+      })
+      constrainedBox.add(longTextarea)
+
+      await renderOnce()
+
+      const frame = captureFrame()
+      expect(frame).toMatchSnapshot()
+
+      expect(constrainedBox.width).toBeLessThanOrEqual(50)
+      expect(constrainedBox.width).toBeGreaterThan(40)
+      expect(constrainedBox.x).toBe(10)
+      expect(constrainedBox.y).toBe(5)
+
+      expect(longTextarea.width).toBeGreaterThan(35)
+      expect(longTextarea.width).toBeLessThanOrEqual(44)
+      expect(longTextarea.height).toBeGreaterThanOrEqual(5)
+      expect(longTextarea.plainText).toBe(
+        "This is an extremely long piece of text that needs to wrap multiple times within the constrained width of the absolutely positioned container box with significant padding on all sides.",
+      )
+    })
+
+    it("should render multiple textarea elements in absolute positioned box with proper spacing", async () => {
+      resize(90, 20)
+
+      const infoBox = new BoxRenderable(currentRenderer, {
+        position: "absolute",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        top: 3,
+        right: 5,
+        maxWidth: 45,
+        paddingLeft: 2,
+        paddingRight: 2,
+        paddingTop: 1,
+        paddingBottom: 1,
+        backgroundColor: "#eff6ff",
+        borderColor: "#3b82f6",
+        border: true,
+      })
+      currentRenderer.root.add(infoBox)
+
+      const headerText = new TextRenderable(currentRenderer, {
+        content: "System Update",
+        attributes: 1,
+        fg: "#1e40af",
+      })
+      infoBox.add(headerText)
+
+      const { textarea: bodyTextarea } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "A new version is available with bug fixes and performance improvements.",
+        textColor: "#1e3a8a",
+        wrapMode: "word",
+        width: "100%",
+        marginTop: 1,
+      })
+      infoBox.add(bodyTextarea)
+
+      const footerText = new TextRenderable(currentRenderer, {
+        content: "Click to install",
+        fg: "#60a5fa",
+        marginTop: 1,
+      })
+      infoBox.add(footerText)
+
+      await renderOnce()
+
+      const frame = captureFrame()
+      expect(frame).toMatchSnapshot()
+
+      expect(headerText.plainText).toBe("System Update")
+      expect(bodyTextarea.plainText).toBe("A new version is available with bug fixes and performance improvements.")
+      expect(footerText.plainText).toBe("Click to install")
+
+      expect(infoBox.width).toBeGreaterThan(35)
+      expect(infoBox.width).toBeLessThanOrEqual(45)
+
+      expect(headerText.width).toBeGreaterThan(10)
+      expect(headerText.height).toBe(1)
+
+      expect(bodyTextarea.width).toBeGreaterThan(30)
+      expect(bodyTextarea.height).toBeGreaterThanOrEqual(2)
+
+      expect(footerText.width).toBeGreaterThan(10)
+      expect(footerText.height).toBe(1)
+
+      expect(bodyTextarea.y).toBeGreaterThan(headerText.y)
+      expect(footerText.y).toBeGreaterThan(bodyTextarea.y)
+    })
+  })
+})