@fairyhunter13/opentui-core 0.1.113 → 0.1.114

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

@@ -0,0 +1,1590 @@
+import { describe, expect, it, beforeEach, afterEach } from "bun:test"
+import { createTestRenderer, type TestRenderer, type MockMouse, type MockInput } from "../../testing/test-renderer.js"
+import { createTextareaRenderable } from "./renderable-test-utils.js"
+import { RGBA } from "../../lib/RGBA.js"
+import { OptimizedBuffer } from "../../buffer.js"
+import { TextRenderable } from "../Text.js"
+
+let currentRenderer: TestRenderer
+let renderOnce: () => Promise<void>
+let currentMouse: MockMouse
+let currentMockInput: MockInput
+
+describe("Textarea - Selection Tests", () => {
+  beforeEach(async () => {
+    ;({
+      renderer: currentRenderer,
+      renderOnce,
+      mockMouse: currentMouse,
+      mockInput: currentMockInput,
+    } = await createTestRenderer({
+      width: 80,
+      height: 24,
+    }))
+  })
+
+  afterEach(() => {
+    currentRenderer.destroy()
+  })
+
+  describe("Selection Support", () => {
+    it("should support selection via mouse drag", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World",
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      expect(editor.hasSelection()).toBe(false)
+
+      await currentMouse.drag(editor.x, editor.y, editor.x + 5, editor.y)
+      await renderOnce()
+
+      expect(editor.hasSelection()).toBe(true)
+
+      const sel = editor.getSelection()
+      expect(sel).not.toBe(null)
+      expect(sel!.start).toBe(0)
+      expect(sel!.end).toBe(5)
+
+      expect(editor.getSelectedText()).toBe("Hello")
+    })
+
+    it("should return selected text from multi-line content", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "AAAA\nBBBB\nCCCC",
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      await currentMouse.drag(editor.x + 2, editor.y, editor.x + 2, editor.y + 2)
+      await renderOnce()
+
+      const selectedText = editor.getSelectedText()
+      expect(selectedText).toBe("AA\nBBBB\nCC")
+    })
+
+    it("should handle selection with viewport scrolling", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 20 }, (_, i) => `Line ${i}`).join("\n"),
+        width: 40,
+        height: 5,
+        selectable: true,
+      })
+
+      editor.gotoLine(10)
+      await renderOnce()
+
+      const viewport = editor.editorView.getViewport()
+      expect(viewport.offsetY).toBeGreaterThan(0)
+
+      await currentMouse.drag(editor.x, editor.y, editor.x + 4, editor.y + 2)
+      await renderOnce()
+
+      expect(editor.hasSelection()).toBe(true)
+      const selectedText = editor.getSelectedText()
+      expect(selectedText.length).toBeGreaterThan(0)
+      expect(selectedText).not.toContain("Line 0")
+      expect(selectedText).not.toContain("Line 1")
+      expect(selectedText).toContain("Line")
+    })
+
+    it("should disable selection when selectable is false", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World",
+        width: 40,
+        height: 10,
+        selectable: false,
+      })
+
+      const shouldHandle = editor.shouldStartSelection(editor.x, editor.y)
+      expect(shouldHandle).toBe(false)
+
+      await currentMouse.drag(editor.x, editor.y, editor.x + 5, editor.y)
+      await renderOnce()
+
+      expect(editor.hasSelection()).toBe(false)
+      expect(editor.getSelectedText()).toBe("")
+    })
+
+    it("should update selection when selectionBg/selectionFg changes", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World",
+        width: 40,
+        height: 10,
+        selectable: true,
+        selectionBg: RGBA.fromValues(0, 0, 1, 1),
+      })
+
+      await currentMouse.drag(editor.x, editor.y, editor.x + 5, editor.y)
+      await renderOnce()
+
+      expect(editor.hasSelection()).toBe(true)
+
+      editor.selectionBg = RGBA.fromValues(1, 0, 0, 1)
+      editor.selectionFg = RGBA.fromValues(1, 1, 1, 1)
+
+      expect(editor.hasSelection()).toBe(true)
+    })
+
+    it("should clear selection", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World",
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      await currentMouse.drag(editor.x, editor.y, editor.x + 5, editor.y)
+      await renderOnce()
+
+      expect(editor.hasSelection()).toBe(true)
+
+      currentRenderer.clearSelection()
+      await renderOnce()
+
+      expect(editor.hasSelection()).toBe(false)
+      expect(editor.getSelectedText()).toBe("")
+    })
+
+    it("should handle selection with wrapping enabled", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "ABCDEFGHIJKLMNOP",
+        width: 10,
+        height: 10,
+        wrapMode: "word",
+        selectable: true,
+      })
+
+      const vlineCount = editor.editorView.getVirtualLineCount()
+      expect(vlineCount).toBe(2)
+
+      await currentMouse.drag(editor.x + 2, editor.y, editor.x + 3, editor.y + 1)
+      await renderOnce()
+
+      const sel = editor.getSelection()
+      expect(sel).not.toBe(null)
+      expect(sel!.start).toBe(2)
+      expect(sel!.end).toBe(13)
+    })
+
+    it("should handle reverse selection (drag from end to start)", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World",
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      await currentMouse.drag(editor.x + 11, editor.y, editor.x + 6, editor.y)
+      await renderOnce()
+
+      const sel = editor.getSelection()
+      expect(sel).not.toBe(null)
+      expect(sel!.start).toBe(6)
+      expect(sel!.end).toBe(11)
+
+      expect(editor.getSelectedText()).toBe("World")
+    })
+
+    it("should render selection properly when drawing to buffer", async () => {
+      const buffer = OptimizedBuffer.create(80, 24, "wcwidth")
+
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World",
+        width: 40,
+        height: 10,
+        selectable: true,
+        selectionBg: RGBA.fromValues(0, 0, 1, 1),
+        selectionFg: RGBA.fromValues(1, 1, 1, 1),
+      })
+
+      await currentMouse.drag(editor.x, editor.y, editor.x + 5, editor.y)
+      await renderOnce()
+
+      expect(editor.hasSelection()).toBe(true)
+      expect(editor.getSelectedText()).toBe("Hello")
+
+      buffer.clear(RGBA.fromValues(0, 0, 0, 1))
+      buffer.drawEditorView(editor.editorView, editor.x, editor.y)
+
+      const sel = editor.getSelection()
+      expect(sel).not.toBe(null)
+      expect(sel!.start).toBe(0)
+      expect(sel!.end).toBe(5)
+
+      buffer.destroy()
+    })
+
+    it("should handle viewport-aware selection correctly", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 15 }, (_, i) => `Line ${i}`).join("\n"),
+        width: 40,
+        height: 5,
+        selectable: true,
+        scrollMargin: 0,
+        scrollSpeed: 0,
+      })
+
+      editor.gotoLine(10)
+      await renderOnce()
+
+      const viewport = editor.editorView.getViewport()
+      expect(viewport.offsetY).toBeGreaterThan(0)
+
+      const expectedLineNumber = viewport.offsetY
+
+      await currentMouse.drag(editor.x, editor.y, editor.x + 6, editor.y)
+      await renderOnce()
+
+      expect(editor.hasSelection()).toBe(true)
+      const selectedText = editor.getSelectedText()
+
+      expect(selectedText).not.toContain("Line 0")
+      expect(selectedText).not.toContain("Line 1")
+      expect(selectedText).toContain(`Line ${expectedLineNumber}`)
+    })
+
+    it("should handle multi-line selection with viewport scrolling", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 20 }, (_, i) => `AAAA${i}`).join("\n"),
+        width: 40,
+        height: 5,
+        selectable: true,
+      })
+
+      editor.gotoLine(8)
+      await renderOnce()
+
+      const viewport = editor.editorView.getViewport()
+      expect(viewport.offsetY).toBeGreaterThan(0)
+
+      await currentMouse.drag(editor.x, editor.y, editor.x + 4, editor.y + 2)
+      await renderOnce()
+
+      expect(editor.hasSelection()).toBe(true)
+      const selectedText = editor.getSelectedText()
+
+      const line1 = `AAAA${viewport.offsetY}`
+      const line2 = `AAAA${viewport.offsetY + 1}`
+      const line3 = `AAAA${viewport.offsetY + 2}`
+
+      expect(selectedText).toContain(line1)
+      expect(selectedText).toContain(line2)
+      expect(selectedText).toContain(line3.substring(0, 4))
+    })
+
+    it("should handle horizontal scrolled selection without wrapping", async () => {
+      const longLine = "A".repeat(100)
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: longLine,
+        width: 20,
+        height: 5,
+        wrapMode: "none",
+        selectable: true,
+      })
+
+      for (let i = 0; i < 50; i++) {
+        editor.moveCursorRight()
+      }
+      await renderOnce()
+
+      const viewport = editor.editorView.getViewport()
+      expect(viewport.offsetX).toBeGreaterThan(0)
+
+      await currentMouse.drag(editor.x, editor.y, editor.x + 10, editor.y)
+      await renderOnce()
+
+      expect(editor.hasSelection()).toBe(true)
+      const selectedText = editor.getSelectedText()
+
+      expect(selectedText).toBe("A".repeat(10))
+
+      const sel = editor.getSelection()
+      expect(sel).not.toBe(null)
+      expect(sel!.start).toBeGreaterThanOrEqual(viewport.offsetX)
+    })
+
+    it("should render selection highlighting at correct screen position with viewport scroll", async () => {
+      const buffer = OptimizedBuffer.create(80, 24, "wcwidth")
+
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 15 }, (_, i) => `Line${i}`).join("\n"),
+        width: 20,
+        height: 5,
+        selectable: true,
+        selectionBg: RGBA.fromValues(1, 0, 0, 1),
+      })
+
+      editor.gotoLine(8)
+      await renderOnce()
+
+      const viewport = editor.editorView.getViewport()
+      expect(viewport.offsetY).toBeGreaterThan(0)
+
+      // Use manual drag steps instead of the drag helper to avoid timing issues
+      await currentMouse.pressDown(editor.x, editor.y)
+      await currentMouse.emitMouseEvent("drag", editor.x + 5, editor.y)
+      await currentMouse.release(editor.x + 5, editor.y)
+      await renderOnce()
+
+      buffer.clear(RGBA.fromValues(0, 0, 0, 1))
+      buffer.drawEditorView(editor.editorView, editor.x, editor.y)
+
+      const selectedText = editor.getSelectedText()
+      expect(selectedText).toBe(`Line${viewport.offsetY}`.substring(0, 5))
+
+      const { bg } = buffer.buffers
+      const bufferWidth = buffer.width
+
+      for (let cellX = editor.x; cellX < editor.x + 5; cellX++) {
+        const bufferIdx = editor.y * bufferWidth + cellX
+        const bgR = bg[bufferIdx * 4 + 0]
+        const bgG = bg[bufferIdx * 4 + 1]
+        const bgB = bg[bufferIdx * 4 + 2]
+
+        expect(Math.abs(bgR - 1.0)).toBeLessThan(0.01)
+        expect(Math.abs(bgG - 0.0)).toBeLessThan(0.01)
+        expect(Math.abs(bgB - 0.0)).toBeLessThan(0.01)
+      }
+
+      buffer.destroy()
+    })
+
+    it("should render selection correctly with empty lines between content", async () => {
+      const buffer = OptimizedBuffer.create(80, 24, "wcwidth")
+
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "AAAA\n\nBBBB\n\nCCCC",
+        width: 40,
+        height: 10,
+        selectable: true,
+        selectionBg: RGBA.fromValues(1, 0, 0, 1),
+      })
+
+      editor.focus()
+      editor.gotoLine(2)
+
+      for (let i = 0; i < 4; i++) {
+        currentMockInput.pressArrow("right", { shift: true })
+      }
+
+      expect(editor.getSelectedText()).toBe("BBBB")
+
+      buffer.clear(RGBA.fromValues(0, 0, 0, 1))
+      buffer.drawEditorView(editor.editorView, 0, 0)
+
+      const { bg } = buffer.buffers
+      const bufferWidth = buffer.width
+
+      for (let cellX = 0; cellX < 4; cellX++) {
+        const bufferIdx = 2 * bufferWidth + cellX
+        const bgR = bg[bufferIdx * 4 + 0]
+        const bgG = bg[bufferIdx * 4 + 1]
+        const bgB = bg[bufferIdx * 4 + 2]
+
+        expect(Math.abs(bgR - 1.0)).toBeLessThan(0.01)
+        expect(Math.abs(bgG - 0.0)).toBeLessThan(0.01)
+        expect(Math.abs(bgB - 0.0)).toBeLessThan(0.01)
+      }
+
+      buffer.destroy()
+    })
+
+    it("should handle shift+arrow selection with viewport scrolling", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 20 }, (_, i) => `Line${i}`).join("\n"),
+        width: 40,
+        height: 5,
+        selectable: true,
+      })
+
+      editor.focus()
+
+      editor.gotoLine(15)
+      await renderOnce()
+
+      const viewport = editor.editorView.getViewport()
+      expect(viewport.offsetY).toBeGreaterThan(10)
+
+      for (let i = 0; i < 5; i++) {
+        currentMockInput.pressArrow("right", { shift: true })
+      }
+
+      expect(editor.hasSelection()).toBe(true)
+      const selectedText = editor.getSelectedText()
+
+      expect(selectedText).toBe("Line1")
+
+      const sel = editor.getSelection()
+      expect(sel).not.toBe(null)
+      expect(sel!.end - sel!.start).toBe(5)
+    })
+
+    it("should handle mouse drag selection with scrolled viewport using correct offset", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 30 }, (_, i) => `AAAA${i}`).join("\n"),
+        width: 40,
+        height: 5,
+        selectable: true,
+        scrollSpeed: 0,
+      })
+
+      editor.gotoLine(20)
+      await renderOnce()
+
+      const viewport = editor.editorView.getViewport()
+      expect(viewport.offsetY).toBeGreaterThan(15)
+
+      await currentMouse.drag(editor.x, editor.y, editor.x + 4, editor.y)
+      await renderOnce()
+
+      expect(editor.hasSelection()).toBe(true)
+      const selectedText = editor.getSelectedText()
+
+      expect(selectedText).not.toContain("AAAA0")
+      expect(selectedText).not.toContain("AAAA1")
+
+      const firstVisibleLineIdx = viewport.offsetY
+      const expectedText = `AAAA${firstVisibleLineIdx}`.substring(0, 4)
+      expect(selectedText).toBe(expectedText)
+    })
+
+    it("should handle multi-line mouse drag with scrolled viewport", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 30 }, (_, i) => `Line${i}`).join("\n"),
+        width: 40,
+        height: 5,
+        selectable: true,
+      })
+
+      editor.gotoLine(12)
+      await renderOnce()
+
+      const viewport = editor.editorView.getViewport()
+      expect(viewport.offsetY).toBeGreaterThan(7)
+
+      await currentMouse.drag(editor.x, editor.y, editor.x + 5, editor.y + 2)
+      await renderOnce()
+
+      expect(editor.hasSelection()).toBe(true)
+      const selectedText = editor.getSelectedText()
+
+      expect(selectedText.startsWith("Line0")).toBe(false)
+      expect(selectedText.startsWith("Line1")).toBe(false)
+      expect(selectedText.startsWith("Line2")).toBe(false)
+
+      const line1 = `Line${viewport.offsetY}`
+      const line2 = `Line${viewport.offsetY + 1}`
+      const line3 = `Line${viewport.offsetY + 2}`
+
+      expect(selectedText).toContain(line1)
+      expect(selectedText).toContain(line2)
+      expect(selectedText).toContain(line3.substring(0, 5))
+    })
+  })
+
+  describe("Shift+Arrow Key Selection", () => {
+    it("should start selection with shift+right", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World",
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      editor.focus()
+      expect(editor.hasSelection()).toBe(false)
+
+      currentMockInput.pressArrow("right", { shift: true })
+
+      expect(editor.hasSelection()).toBe(true)
+      expect(editor.getSelectedText()).toBe("H")
+    })
+
+    it("should extend selection with shift+right", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World",
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      editor.focus()
+
+      for (let i = 0; i < 5; i++) {
+        currentMockInput.pressArrow("right", { shift: true })
+      }
+
+      expect(editor.hasSelection()).toBe(true)
+      expect(editor.getSelectedText()).toBe("Hello")
+    })
+
+    it("should extend a mouse selection with shift+right", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World",
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      editor.focus()
+
+      await currentMouse.drag(editor.x, editor.y, editor.x + 5, editor.y)
+      await renderOnce()
+
+      expect(editor.hasSelection()).toBe(true)
+      expect(editor.getSelectedText()).toBe("Hello")
+
+      currentMockInput.pressArrow("right", { shift: true })
+      await renderOnce()
+
+      expect(editor.getSelectedText()).toBe("Hello ")
+    })
+
+    it("should handle shift+left selection", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World",
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      editor.focus()
+      const cursor = editor.logicalCursor
+      editor.editBuffer.setCursorToLineCol(cursor.row, 9999)
+
+      for (let i = 0; i < 5; i++) {
+        currentMockInput.pressArrow("left", { shift: true })
+      }
+
+      expect(editor.hasSelection()).toBe(true)
+      expect(editor.getSelectedText()).toBe("World")
+    })
+
+    it("should select with shift+down", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Line 1\nLine 2\nLine 3",
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      editor.focus()
+
+      currentMockInput.pressArrow("down", { shift: true })
+
+      expect(editor.hasSelection()).toBe(true)
+      const selectedText = editor.getSelectedText()
+      expect(selectedText).toBe("Line 1")
+    })
+
+    it("should select with shift+up", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Line 1\nLine 2\nLine 3",
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      editor.focus()
+      editor.gotoLine(2)
+
+      currentMockInput.pressArrow("up", { shift: true })
+
+      expect(editor.hasSelection()).toBe(true)
+      const selectedText = editor.getSelectedText()
+      expect(selectedText.includes("Line 2")).toBe(true)
+    })
+
+    it("should select to line start with shift+home", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World",
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      editor.focus()
+      for (let i = 0; i < 6; i++) {
+        editor.moveCursorRight()
+      }
+
+      currentMockInput.pressKey("HOME", { shift: true })
+
+      expect(editor.hasSelection()).toBe(true)
+      expect(editor.getSelectedText()).toBe("Hello W")
+    })
+
+    it("should select to line end with shift+end", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World",
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      editor.focus()
+
+      currentMockInput.pressKey("END", { shift: true })
+
+      expect(editor.hasSelection()).toBe(true)
+      expect(editor.getSelectedText()).toBe("Hello World")
+    })
+
+    it("should clear selection when moving without shift", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World",
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      editor.focus()
+
+      for (let i = 0; i < 5; i++) {
+        currentMockInput.pressArrow("right", { shift: true })
+      }
+
+      expect(editor.hasSelection()).toBe(true)
+
+      currentMockInput.pressArrow("right")
+
+      expect(editor.hasSelection()).toBe(false)
+    })
+
+    it("should delete selected text with backspace", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World",
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      editor.focus()
+
+      for (let i = 0; i < 5; i++) {
+        currentMockInput.pressArrow("right", { shift: true })
+      }
+
+      expect(editor.getSelectedText()).toBe("Hello")
+      expect(editor.plainText).toBe("Hello World")
+
+      currentMockInput.pressBackspace()
+
+      expect(editor.hasSelection()).toBe(false)
+      expect(editor.plainText).toBe(" World")
+      expect(editor.logicalCursor.col).toBe(0)
+    })
+
+    it("should delete selected text with delete key", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World!",
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      editor.focus()
+
+      const cursor = editor.logicalCursor
+      editor.editBuffer.setCursorToLineCol(cursor.row, 9999)
+      for (let i = 0; i < 6; i++) {
+        currentMockInput.pressArrow("left", { shift: true })
+      }
+
+      expect(editor.getSelectedText()).toBe("World!")
+      expect(editor.plainText).toBe("Hello World!")
+
+      currentMockInput.pressKey("DELETE")
+
+      expect(editor.hasSelection()).toBe(false)
+      expect(editor.plainText).toBe("Hello ")
+      expect(editor.logicalCursor.col).toBe(6)
+    })
+
+    it("should delete multi-line selection with backspace", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Line 1\nLine 2\nLine 3",
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      editor.focus()
+
+      for (let i = 0; i < 10; i++) {
+        currentMockInput.pressArrow("right", { shift: true })
+      }
+
+      const selectedText = editor.getSelectedText()
+      expect(editor.plainText).toBe("Line 1\nLine 2\nLine 3")
+
+      currentMockInput.pressBackspace()
+
+      expect(editor.hasSelection()).toBe(false)
+      expect(editor.plainText).toBe("e 2\nLine 3")
+      expect(editor.logicalCursor.col).toBe(0)
+      expect(editor.logicalCursor.row).toBe(0)
+    })
+
+    it("should delete entire line when selected with delete", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Line 1\nLine 2\nLine 3",
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      editor.focus()
+      editor.gotoLine(1)
+
+      currentMockInput.pressArrow("down", { shift: true })
+
+      const selectedText = editor.getSelectedText()
+      expect(selectedText).toBe("Line 2")
+
+      currentMockInput.pressKey("DELETE")
+
+      expect(editor.hasSelection()).toBe(false)
+      expect(editor.plainText).toBe("Line 1\nLine 3")
+      expect(editor.logicalCursor.row).toBe(1)
+    })
+
+    it("should replace selected text when typing", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World",
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      editor.focus()
+
+      for (let i = 0; i < 5; i++) {
+        currentMockInput.pressArrow("right", { shift: true })
+      }
+
+      expect(editor.getSelectedText()).toBe("Hello")
+
+      currentMockInput.pressKey("H")
+      currentMockInput.pressKey("i")
+
+      expect(editor.hasSelection()).toBe(false)
+      expect(editor.plainText).toBe("Hi World")
+    })
+
+    it("should delete selected text via native deleteSelectedText API", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "Hello World",
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      editor.focus()
+
+      await currentMouse.drag(editor.x, editor.y, editor.x + 5, editor.y)
+      await renderOnce()
+
+      expect(editor.hasSelection()).toBe(true)
+      expect(editor.getSelectedText()).toBe("Hello")
+
+      editor.editorView.deleteSelectedText()
+      currentRenderer.clearSelection()
+      await renderOnce()
+
+      expect(editor.plainText).toBe(" World")
+      expect(editor.logicalCursor.row).toBe(0)
+      expect(editor.logicalCursor.col).toBe(0)
+      expect(editor.editorView.hasSelection()).toBe(false)
+    })
+    it("should maintain correct selection start when scrolling down with shift+down", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 20 }, (_, i) => `Line ${i}`).join("\n"),
+        width: 20,
+        height: 5,
+        selectable: true,
+      })
+
+      editor.focus()
+
+      for (let i = 0; i < 8; i++) {
+        currentMockInput.pressArrow("down", { shift: true })
+        await renderOnce()
+      }
+
+      const viewport = editor.editorView.getViewport()
+      expect(viewport.offsetY).toBeGreaterThan(0)
+
+      const sel = editor.getSelection()
+      expect(sel).not.toBe(null)
+      expect(sel!.start).toBe(0)
+    })
+
+    it("should not start selection in textarea when clicking in text renderable below after scrolling", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 20 }, (_, i) => `Textarea Line ${i}`).join("\n"),
+        width: 40,
+        height: 5,
+        selectable: true,
+        top: 0,
+      })
+
+      const textBelow = new TextRenderable(currentRenderer, {
+        id: "text-below",
+        content: "This is text below the textarea",
+        selectable: true,
+        top: 5,
+        left: 0,
+        width: 40,
+        height: 1,
+      })
+      currentRenderer.root.add(textBelow)
+
+      editor.focus()
+
+      editor.gotoBufferEnd()
+      await renderOnce()
+
+      const viewport = editor.editorView.getViewport()
+      expect(viewport.offsetY).toBeGreaterThan(10)
+
+      await currentMouse.drag(textBelow.x, textBelow.y, textBelow.x + 10, textBelow.y)
+      await renderOnce()
+
+      expect(editor.hasSelection()).toBe(false)
+      expect(editor.getSelectedText()).toBe("")
+
+      expect(textBelow.hasSelection()).toBe(true)
+      expect(textBelow.getSelectedText()).toBe("This is te")
+
+      textBelow.destroy()
+    })
+
+    it("should maintain selection in both renderables when dragging from text-below up into textarea", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 20 }, (_, i) => `Textarea Line ${i}`).join("\n"),
+        width: 40,
+        height: 5,
+        selectable: true,
+        top: 0,
+      })
+
+      const textBelow = new TextRenderable(currentRenderer, {
+        id: "text-below",
+        content: "This is text below the textarea",
+        selectable: true,
+        top: 5,
+        left: 0,
+        width: 40,
+        height: 1,
+      })
+      currentRenderer.root.add(textBelow)
+
+      editor.focus()
+
+      editor.gotoBufferEnd()
+      await renderOnce()
+
+      const viewport = editor.editorView.getViewport()
+      expect(viewport.offsetY).toBeGreaterThan(10)
+
+      const startX = textBelow.x + 5
+      const startY = textBelow.y
+      const endX = editor.x + 15
+      const endY = editor.y + 3
+
+      await currentMouse.drag(startX, startY, endX, endY)
+      await renderOnce()
+
+      expect(textBelow.hasSelection()).toBe(true)
+      const textBelowSelection = textBelow.getSelectedText()
+      expect(textBelowSelection.length).toBeGreaterThan(0)
+
+      expect(editor.hasSelection()).toBe(true)
+      const textareaSelection = editor.getSelectedText()
+      expect(textareaSelection.length).toBeGreaterThan(0)
+
+      textBelow.destroy()
+    })
+
+    it("should handle cross-renderable selection from bottom-left text to top-right text", async () => {
+      const { BoxRenderable } = await import("../Box.js")
+
+      const bottomText = new TextRenderable(currentRenderer, {
+        id: "bottom-instructions",
+        content: "Click and drag to select text across any elements",
+        left: 5,
+        top: 20,
+        width: 50,
+        height: 1,
+        selectable: true,
+      })
+      currentRenderer.root.add(bottomText)
+
+      const rightBox = new BoxRenderable(currentRenderer, {
+        id: "right-box",
+        left: 50,
+        top: 5,
+        width: 30,
+        height: 10,
+        padding: 1,
+        flexDirection: "column",
+      })
+      currentRenderer.root.add(rightBox)
+
+      const codeText1 = new TextRenderable(currentRenderer, {
+        id: "code-line-1",
+        content: "function handleSelection() {",
+        selectable: true,
+      })
+      rightBox.add(codeText1)
+
+      const codeText2 = new TextRenderable(currentRenderer, {
+        id: "code-line-2",
+        content: "  const selected = getText()",
+        selectable: true,
+      })
+      rightBox.add(codeText2)
+
+      const codeText3 = new TextRenderable(currentRenderer, {
+        id: "code-line-3",
+        content: "  console.log(selected)",
+        selectable: true,
+      })
+      rightBox.add(codeText3)
+
+      const codeText4 = new TextRenderable(currentRenderer, {
+        id: "code-line-4",
+        content: "}",
+        selectable: true,
+      })
+      rightBox.add(codeText4)
+
+      await renderOnce()
+
+      const startX = bottomText.x + 10
+      const startY = bottomText.y
+      const endX = codeText2.x + 15
+      const endY = codeText2.y
+
+      await currentMouse.drag(startX, startY, endX, endY)
+      await renderOnce()
+
+      expect(bottomText.hasSelection()).toBe(true)
+      const bottomSelected = bottomText.getSelectedText()
+      expect(bottomSelected).toBe("Click and d")
+
+      expect(codeText1.hasSelection()).toBe(false)
+
+      expect(codeText2.hasSelection()).toBe(true)
+      const codeText2Selected = codeText2.getSelectedText()
+      const codeText2Content = "  const selected = getText()"
+      expect(codeText2Selected).toBe(codeText2Content.substring(0, 15))
+
+      bottomText.destroy()
+      rightBox.destroy()
+    })
+  })
+
+  describe("Selection After Resize", () => {
+    it("should maintain selection correctly after resize - same text selected and rendered properly", async () => {
+      const buffer = OptimizedBuffer.create(80, 24, "wcwidth")
+
+      const { textarea: editor, root } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 30 }, (_, i) => `Line ${i.toString().padStart(2, "0")}`).join("\n"),
+        width: 40,
+        height: 10,
+        selectable: true,
+        selectionBg: RGBA.fromValues(0, 1, 0, 1),
+        selectionFg: RGBA.fromValues(0, 0, 0, 1),
+      })
+
+      editor.gotoLine(5)
+      await renderOnce()
+
+      await currentMouse.drag(editor.x + 5, editor.y + 2, editor.x + 10, editor.y + 4)
+      await renderOnce()
+
+      const selectedTextBefore = editor.getSelectedText()
+      const selectionBefore = editor.getSelection()
+
+      expect(editor.hasSelection()).toBe(true)
+      expect(selectedTextBefore).toBeTruthy()
+
+      buffer.clear(RGBA.fromValues(0, 0, 0, 1))
+      buffer.drawEditorView(editor.editorView, editor.x, editor.y)
+
+      const { bg: bgBefore } = buffer.buffers
+      const bufferWidth = buffer.width
+
+      const selectedCellsBefore: Array<{ x: number; y: number }> = []
+      for (let y = 0; y < editor.height; y++) {
+        for (let x = 0; x < editor.width; x++) {
+          const bufferIdx = (editor.y + y) * bufferWidth + (editor.x + x)
+          const bgG = bgBefore[bufferIdx * 4 + 1]
+          if (Math.abs(bgG - 1.0) < 0.01) {
+            selectedCellsBefore.push({ x, y })
+          }
+        }
+      }
+
+      expect(selectedCellsBefore.length).toBeGreaterThan(0)
+
+      editor.width = 50
+      editor.height = 15
+      root.yogaNode.calculateLayout(80, 24)
+      await renderOnce()
+
+      const selectedTextAfter = editor.getSelectedText()
+      const selectionAfter = editor.getSelection()
+
+      expect(editor.hasSelection()).toBe(true)
+      expect(selectedTextAfter).toBe(selectedTextBefore)
+      expect(selectionAfter?.start).toBe(selectionBefore?.start)
+      expect(selectionAfter?.end).toBe(selectionBefore?.end)
+
+      buffer.clear(RGBA.fromValues(0, 0, 0, 1))
+      buffer.drawEditorView(editor.editorView, editor.x, editor.y)
+
+      const { bg: bgAfter } = buffer.buffers
+
+      const selectedCellsAfter: Array<{ x: number; y: number }> = []
+      for (let y = 0; y < editor.height; y++) {
+        for (let x = 0; x < editor.width; x++) {
+          const bufferIdx = (editor.y + y) * bufferWidth + (editor.x + x)
+          const bgG = bgAfter[bufferIdx * 4 + 1]
+          if (Math.abs(bgG - 1.0) < 0.01) {
+            selectedCellsAfter.push({ x, y })
+          }
+        }
+      }
+
+      expect(selectedCellsAfter.length).toBeGreaterThan(0)
+      expect(selectedCellsAfter.length).toBe(selectedCellsBefore.length)
+
+      buffer.destroy()
+      editor.destroy()
+    })
+
+    it("should maintain exact same text selected after wrap width changes", async () => {
+      const buffer = OptimizedBuffer.create(80, 24, "wcwidth")
+
+      const { textarea: editor, root } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: "AAAAA BBBBB CCCCC DDDDD EEEEE FFFFF GGGGG HHHHH",
+        width: 50,
+        height: 10,
+        wrapMode: "word",
+        selectable: true,
+        selectionBg: RGBA.fromValues(1, 0, 1, 1),
+        selectionFg: RGBA.fromValues(1, 1, 1, 1),
+      })
+
+      await renderOnce()
+
+      await currentMouse.drag(editor.x + 6, editor.y, editor.x + 17, editor.y)
+      await renderOnce()
+
+      const selectedTextBefore = editor.getSelectedText()
+      const selectionBefore = editor.getSelection()
+
+      expect(editor.hasSelection()).toBe(true)
+      expect(selectedTextBefore).toBe("BBBBB CCCCC")
+
+      editor.width = 15
+      editor.height = 15
+      root.yogaNode.calculateLayout(80, 24)
+      await renderOnce()
+
+      const selectedTextAfterNarrow = editor.getSelectedText()
+      const selectionAfterNarrow = editor.getSelection()
+
+      expect(editor.hasSelection()).toBe(true)
+      expect(selectedTextAfterNarrow).toBe("BBBBB CCCCC")
+      expect(selectionAfterNarrow?.start).toBe(selectionBefore?.start)
+      expect(selectionAfterNarrow?.end).toBe(selectionBefore?.end)
+
+      buffer.clear(RGBA.fromValues(0, 0, 0, 1))
+      buffer.drawEditorView(editor.editorView, editor.x, editor.y)
+
+      const { bg: bgNarrow } = buffer.buffers
+      const bufferWidth = buffer.width
+
+      let selectedCellsNarrow = 0
+      for (let y = 0; y < editor.height; y++) {
+        for (let x = 0; x < editor.width; x++) {
+          const bufferIdx = (editor.y + y) * bufferWidth + (editor.x + x)
+          const bgR = bgNarrow[bufferIdx * 4 + 0]
+          const bgB = bgNarrow[bufferIdx * 4 + 2]
+          if (Math.abs(bgR - 1.0) < 0.01 && Math.abs(bgB - 1.0) < 0.01) {
+            selectedCellsNarrow++
+          }
+        }
+      }
+
+      expect(selectedCellsNarrow).toBe(11)
+
+      editor.width = 50
+      editor.height = 10
+      root.yogaNode.calculateLayout(80, 24)
+      await renderOnce()
+
+      const selectedTextAfterWide = editor.getSelectedText()
+      const selectionAfterWide = editor.getSelection()
+
+      expect(editor.hasSelection()).toBe(true)
+      expect(selectedTextAfterWide).toBe("BBBBB CCCCC")
+      expect(selectionAfterWide?.start).toBe(selectionBefore?.start)
+      expect(selectionAfterWide?.end).toBe(selectionBefore?.end)
+
+      buffer.clear(RGBA.fromValues(0, 0, 0, 1))
+      buffer.drawEditorView(editor.editorView, editor.x, editor.y)
+
+      const { bg: bgWide } = buffer.buffers
+
+      let selectedCellsWide = 0
+      for (let y = 0; y < editor.height; y++) {
+        for (let x = 0; x < editor.width; x++) {
+          const bufferIdx = (editor.y + y) * bufferWidth + (editor.x + x)
+          const bgR = bgWide[bufferIdx * 4 + 0]
+          const bgB = bgWide[bufferIdx * 4 + 2]
+          if (Math.abs(bgR - 1.0) < 0.01 && Math.abs(bgB - 1.0) < 0.01) {
+            selectedCellsWide++
+          }
+        }
+      }
+
+      expect(selectedCellsWide).toBe(11)
+
+      buffer.destroy()
+      editor.destroy()
+    })
+
+    it("should handle resize during active mouse selection drag", async () => {
+      const buffer = OptimizedBuffer.create(80, 24, "wcwidth")
+
+      const { textarea: editor, root } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 50 }, (_, i) => `Line ${i}`).join("\n"),
+        width: 40,
+        height: 10,
+        selectable: true,
+        selectionBg: RGBA.fromValues(0, 1, 1, 1),
+      })
+
+      await renderOnce()
+
+      await currentMouse.pressDown(editor.x + 2, editor.y + 1)
+      await currentMouse.moveTo(editor.x + 8, editor.y + 3)
+      await renderOnce()
+
+      expect(editor.hasSelection()).toBe(true)
+      const selectedBeforeResize = editor.getSelectedText()
+
+      editor.width = 30
+      editor.height = 8
+      root.yogaNode.calculateLayout(80, 24)
+      await renderOnce()
+
+      await currentMouse.moveTo(editor.x + 10, editor.y + 2)
+      await renderOnce()
+
+      expect(editor.hasSelection()).toBe(true)
+
+      await currentMouse.release(editor.x + 10, editor.y + 2)
+      await renderOnce()
+
+      buffer.clear(RGBA.fromValues(0, 0, 0, 1))
+      buffer.drawEditorView(editor.editorView, editor.x, editor.y)
+
+      const { bg: bgAfterResize } = buffer.buffers
+      const bufferWidth = buffer.width
+
+      let selectedCellsAfterResize = 0
+      for (let y = 0; y < editor.height; y++) {
+        for (let x = 0; x < editor.width; x++) {
+          const bufferIdx = (editor.y + y) * bufferWidth + (editor.x + x)
+          const bgG = bgAfterResize[bufferIdx * 4 + 1]
+          const bgB = bgAfterResize[bufferIdx * 4 + 2]
+          if (Math.abs(bgG - 1.0) < 0.01 && Math.abs(bgB - 1.0) < 0.01) {
+            selectedCellsAfterResize++
+          }
+        }
+      }
+
+      expect(selectedCellsAfterResize).toBeGreaterThan(0)
+
+      buffer.destroy()
+      editor.destroy()
+    })
+
+    it("should maintain selection correctly when renderable position changes during resize", async () => {
+      const buffer = OptimizedBuffer.create(80, 24, "wcwidth")
+
+      const { textarea: editor, root } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 20 }, (_, i) => `Line ${i.toString().padStart(2, "0")}`).join("\n"),
+        left: 10,
+        top: 5,
+        width: 40,
+        height: 10,
+        selectable: true,
+        selectionBg: RGBA.fromValues(1, 1, 0, 1),
+        selectionFg: RGBA.fromValues(0, 0, 0, 1),
+      })
+
+      await renderOnce()
+
+      const initialX = editor.x
+      const initialY = editor.y
+
+      await currentMouse.drag(editor.x + 5, editor.y + 2, editor.x + 10, editor.y + 4)
+      await renderOnce()
+
+      const selectedTextBefore = editor.getSelectedText()
+      const selectionBefore = editor.getSelection()
+
+      expect(editor.hasSelection()).toBe(true)
+      expect(selectedTextBefore).toBeTruthy()
+
+      buffer.clear(RGBA.fromValues(0, 0, 0, 1))
+      buffer.drawEditorView(editor.editorView, editor.x, editor.y)
+
+      const { bg: bgBefore } = buffer.buffers
+      const bufferWidth = buffer.width
+
+      const selectedCellsBeforeCount = countSelectedCells(bgBefore, bufferWidth, editor, 1, 1, 0)
+      expect(selectedCellsBeforeCount).toBeGreaterThan(0)
+
+      editor.left = 20
+      editor.top = 10
+      root.yogaNode.calculateLayout(80, 24)
+      await renderOnce()
+
+      const newX = editor.x
+      const newY = editor.y
+
+      expect(newX).not.toBe(initialX)
+      expect(newY).not.toBe(initialY)
+
+      const selectedTextAfter = editor.getSelectedText()
+      const selectionAfter = editor.getSelection()
+
+      expect(editor.hasSelection()).toBe(true)
+      expect(selectedTextAfter).toBe(selectedTextBefore)
+      expect(selectionAfter?.start).toBe(selectionBefore?.start)
+      expect(selectionAfter?.end).toBe(selectionBefore?.end)
+
+      buffer.clear(RGBA.fromValues(0, 0, 0, 1))
+      buffer.drawEditorView(editor.editorView, editor.x, editor.y)
+
+      const { bg: bgAfter } = buffer.buffers
+      const selectedCellsAfterCount = countSelectedCells(bgAfter, bufferWidth, editor, 1, 1, 0)
+
+      expect(selectedCellsAfterCount).toBe(selectedCellsBeforeCount)
+      expect(selectedCellsAfterCount).toBeGreaterThan(0)
+
+      buffer.destroy()
+      editor.destroy()
+    })
+
+    it("should keep cursor within textarea bounds after resize causes wrapping with scrolled selection", async () => {
+      const { textarea: editor, root } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from(
+          { length: 50 },
+          (_, i) =>
+            `This is a long line ${i.toString().padStart(2, "0")} with enough text to cause wrapping when narrow`,
+        ).join("\n"),
+        width: 60,
+        height: 10,
+        top: 0,
+        wrapMode: "word",
+        selectable: true,
+        showCursor: true,
+      })
+
+      const textBelow = new TextRenderable(currentRenderer, {
+        id: "text-below",
+        content: "Element below textarea",
+        top: 10,
+        left: 0,
+      })
+      currentRenderer.root.add(textBelow)
+
+      await renderOnce()
+
+      editor.focus()
+      editor.gotoLine(15)
+      await renderOnce()
+
+      await currentMouse.drag(editor.x + 5, editor.y + 3, editor.x + 10, editor.y + 9)
+      await renderOnce()
+
+      const viewportAfterSelection = editor.editorView.getViewport()
+
+      expect(editor.hasSelection()).toBe(true)
+      expect(viewportAfterSelection.offsetY).toBeGreaterThan(0)
+
+      editor.width = 8
+      root.yogaNode.calculateLayout(80, 24)
+      await renderOnce()
+
+      const viewportAfterResize = editor.editorView.getViewport()
+      const cursorAfterResize = editor.visualCursor
+
+      expect(cursorAfterResize.visualRow).toBeGreaterThanOrEqual(0)
+      expect(cursorAfterResize.visualRow).toBeLessThan(editor.height)
+      expect(cursorAfterResize.visualCol).toBeGreaterThanOrEqual(0)
+      expect(cursorAfterResize.visualCol).toBeLessThan(editor.width)
+
+      textBelow.destroy()
+      editor.destroy()
+    })
+  })
+
+  describe("Selection Preserved on Viewport Scroll", () => {
+    it("should preserve selection when scrolling viewport", async () => {
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: Array.from({ length: 50 }, (_, i) => `Line ${i}`).join("\n"),
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      editor.focus()
+      await renderOnce()
+
+      // Select all text using keyboard (Cmd+Shift+Down)
+      currentMockInput.pressKey("ARROW_DOWN", { shift: true, super: true })
+      await renderOnce()
+
+      const selectionBefore = editor.getSelection()
+      const selectedTextBefore = editor.getSelectedText()
+
+      expect(selectionBefore).not.toBeNull()
+      expect(selectedTextBefore).toContain("Line 0")
+      expect(selectedTextBefore).toContain("Line 49")
+
+      // Start renderer to simulate real app with continuous render loop
+      currentRenderer.start()
+
+      // Scroll up with mouse wheel
+      await currentMouse.scroll(editor.x, editor.y + 1, "up")
+      await Bun.sleep(100)
+
+      const selectionAfter = editor.getSelection()
+      const selectedTextAfter = editor.getSelectedText()
+
+      currentRenderer.pause()
+
+      // Selection should not change when scrolling viewport
+      expect(selectionAfter).not.toBeNull()
+      expect(selectionAfter!.start).toBe(selectionBefore!.start)
+      expect(selectionAfter!.end).toBe(selectionBefore!.end)
+      expect(selectedTextAfter).toBe(selectedTextBefore)
+
+      editor.destroy()
+    })
+  })
+
+  describe("Keyboard Selection with Viewport Scrolling", () => {
+    it("should select to buffer home after shift+end then shift+home when scrolled", async () => {
+      const lines = Array.from({ length: 30 }, (_, i) => `Line ${i.toString().padStart(2, "0")}`)
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: lines.join("\n"),
+        width: 40,
+        height: 6,
+        selectable: true,
+      })
+
+      editor.focus()
+      await renderOnce()
+
+      for (let i = 0; i < 3; i++) {
+        await currentMouse.scroll(editor.x + 2, editor.y + 2, "down")
+      }
+      await renderOnce()
+
+      const viewportAfterScroll = editor.editorView.getViewport()
+      expect(viewportAfterScroll.offsetY).toBeGreaterThan(0)
+      expect(editor.logicalCursor.row).toBeGreaterThan(0)
+
+      currentMockInput.pressKey("END", { shift: true })
+      await renderOnce()
+
+      expect(editor.hasSelection()).toBe(true)
+
+      currentMockInput.pressKey("HOME", { shift: true })
+      await renderOnce()
+
+      const selection = editor.getSelection()
+      expect(selection).not.toBeNull()
+      expect(selection!.start).toBe(0)
+
+      const selectedText = editor.getSelectedText()
+      expect(selectedText.startsWith("Line 00")).toBe(true)
+      expect(selectedText).not.toContain("Line 29")
+    })
+
+    it("should allow shift+end after shift+home from a mid-buffer cursor", async () => {
+      const lines = Array.from({ length: 30 }, (_, i) => `Line ${i.toString().padStart(2, "0")}`)
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: lines.join("\n"),
+        width: 40,
+        height: 6,
+        selectable: true,
+      })
+
+      editor.focus()
+      editor.gotoLine(10)
+      await renderOnce()
+
+      currentMockInput.pressKey("END", { shift: true })
+      await renderOnce()
+
+      expect(editor.hasSelection()).toBe(true)
+
+      currentMockInput.pressKey("HOME", { shift: true })
+      await renderOnce()
+
+      currentMockInput.pressKey("END", { shift: true })
+      await renderOnce()
+
+      expect(editor.hasSelection()).toBe(true)
+      expect(editor.getSelectedText()).toContain("Line 29")
+    })
+
+    it("should select to buffer home with shift+super+up in scrollable textarea", async () => {
+      // Create textarea with content taller than visible area
+      const lines = Array.from({ length: 50 }, (_, i) => `Line ${i.toString().padStart(2, "0")}`)
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: lines.join("\n"),
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      // Move cursor to middle of content (line 25)
+      editor.focus()
+      editor.gotoLine(25)
+      await renderOnce()
+
+      // Verify viewport has scrolled
+      const viewportBefore = editor.editorView.getViewport()
+      expect(viewportBefore.offsetY).toBeGreaterThan(0)
+
+      // Select to buffer home (shift+super+up)
+      currentMockInput.pressKey("ARROW_UP", { shift: true, super: true })
+      await renderOnce()
+
+      // Should have selection
+      expect(editor.hasSelection()).toBe(true)
+
+      // Selection should include content from line 0 to line 25
+      const selectedText = editor.getSelectedText()
+      expect(selectedText).toContain("Line 00")
+      expect(selectedText).toContain("Line 24")
+      expect(selectedText.split("\n").length).toBeGreaterThanOrEqual(25)
+
+      const viewportAfter = editor.editorView.getViewport()
+      expect(viewportAfter.offsetY).toBe(0)
+    })
+
+    it("should select to buffer end with shift+super+down in scrollable textarea", async () => {
+      // Create textarea with content taller than visible area
+      const lines = Array.from({ length: 50 }, (_, i) => `Line ${i.toString().padStart(2, "0")}`)
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: lines.join("\n"),
+        width: 40,
+        height: 10,
+        selectable: true,
+      })
+
+      // Move cursor to line 20
+      editor.focus()
+      editor.gotoLine(20)
+      await renderOnce()
+
+      const viewportBefore = editor.editorView.getViewport()
+      expect(viewportBefore.offsetY).toBeGreaterThan(0)
+
+      // Select to buffer end (shift+super+down)
+      currentMockInput.pressKey("ARROW_DOWN", { shift: true, super: true })
+      await renderOnce()
+
+      // Should have selection
+      expect(editor.hasSelection()).toBe(true)
+
+      // Selection should include content from line 20 to line 49
+      const selectedText = editor.getSelectedText()
+      expect(selectedText).toContain("Line 20")
+      expect(selectedText).toContain("Line 49")
+      expect(selectedText.split("\n").length).toBeGreaterThanOrEqual(29)
+
+      const viewportAfter = editor.editorView.getViewport()
+      const totalLines = editor.editorView.getTotalVirtualLineCount()
+      const maxOffsetY = Math.max(0, totalLines - viewportBefore.height)
+      expect(viewportAfter.offsetY).toBe(maxOffsetY)
+    })
+
+    it("should handle selection across viewport boundaries correctly", async () => {
+      // Create textarea with content taller than visible area
+      const lines = Array.from({ length: 30 }, (_, i) => `Line ${i.toString().padStart(2, "0")}`)
+      const { textarea: editor } = await createTextareaRenderable(currentRenderer, renderOnce, {
+        initialValue: lines.join("\n"),
+        width: 40,
+        height: 5, // Small viewport
+        selectable: true,
+      })
+
+      // Move cursor to middle (line 15)
+      editor.focus()
+      editor.gotoLine(15)
+      // Move to column 5
+      for (let i = 0; i < 5; i++) {
+        editor.moveCursorRight()
+      }
+      await renderOnce()
+
+      const cursorBefore = editor.editorView.getVisualCursor()
+      expect(cursorBefore.logicalRow).toBe(15)
+      expect(cursorBefore.logicalCol).toBe(5)
+
+      // Select to buffer home
+      currentMockInput.pressKey("ARROW_UP", { shift: true, super: true })
+      await renderOnce()
+
+      expect(editor.hasSelection()).toBe(true)
+      const selectedText = editor.getSelectedText()
+
+      // Should select from (15, 5) to (0, 0)
+      // First line should be complete, last line should be partial
+      expect(selectedText.startsWith("Line 00")).toBe(true)
+      expect(selectedText).toContain("Line 14")
+    })
+  })
+})
+
+function countSelectedCells(
+  bg: Float32Array,
+  bufferWidth: number,
+  editor: { x: number; y: number; height: number; width: number },
+  r: number,
+  g: number,
+  b: number,
+): number {
+  let count = 0
+  for (let y = 0; y < editor.height; y++) {
+    for (let x = 0; x < editor.width; x++) {
+      const bufferIdx = (editor.y + y) * bufferWidth + (editor.x + x)
+      const bgR = bg[bufferIdx * 4 + 0]
+      const bgG = bg[bufferIdx * 4 + 1]
+      const bgB = bg[bufferIdx * 4 + 2]
+      if (Math.abs(bgR - r) < 0.01 && Math.abs(bgG - g) < 0.01 && Math.abs(bgB - b) < 0.01) {
+        count++
+      }
+    }
+  }
+  return count
+}