From 1f848dda647fc968a6a64094c6f21f029f88e2ee Mon Sep 17 00:00:00 2001
From: GreyElaina <GreyElaina@outlook.com>
Date: Wed, 7 Jan 2026 09:17:28 +0800
Subject: [PATCH 1/7] feat(vue): comprehensive update with devtools, tests,
 Portal, and examples

Devtools:
- Add Vue DevTools integration with custom inspector for renderables
- Add highlight overlay, timeline tracking, and element picker
- Support auto-refresh, visibility toggle, and element focusing

Components & Composables:
- Add Portal component for rendering outside parent hierarchy
- Add usePaste, useSelectionHandler, useTimeline composables
- Update useCliRenderer and useKeyboard

Renderer:
- Improve createElement, patchProp for better Vue 3 compatibility
- Add support for onKeyDown, onContentChange, onCursorChange events
- Handle TextNode rendering with nodeRenderable

Tests:
- Add comprehensive test suite (control-flow, events, layout, portal, text-nodes)
- Add test-utils.ts for testing infrastructure

Examples:
- Add Animation, Code, Diff, LineNumber, Textarea examples
- Update existing examples for new patterns
---
 packages/vue/example/ASCII.vue                |    6 +-
 packages/vue/example/Animation.vue            |  182 +++
 packages/vue/example/App.vue                  |   22 +-
 packages/vue/example/Code.vue                 |   74 ++
 packages/vue/example/Counter.vue              |   13 +-
 packages/vue/example/Diff.vue                 |  107 ++
 packages/vue/example/LineNumber.vue           |  144 +++
 packages/vue/example/LoginForm.vue            |   17 +-
 packages/vue/example/Textarea.vue             |  126 ++
 packages/vue/index.ts                         |   87 +-
 packages/vue/package.json                     |   18 +-
 packages/vue/src/cli-renderer-ref.ts          |   14 -
 packages/vue/src/components/Portal.ts         |  121 ++
 packages/vue/src/composables/index.ts         |    5 +-
 .../vue/src/composables/useCliRenderer.ts     |    4 +-
 packages/vue/src/composables/useKeyboard.ts   |   36 +-
 packages/vue/src/composables/usePaste.ts      |   16 +
 .../src/composables/useSelectionHandler.ts    |   15 +
 packages/vue/src/composables/useTimeline.ts   |   20 +
 packages/vue/src/devtools/connect.ts          |  154 +++
 packages/vue/src/devtools/highlight.ts        |  125 ++
 packages/vue/src/devtools/index.ts            |  265 +++++
 packages/vue/src/devtools/inspector.ts        |  250 ++++
 packages/vue/src/devtools/theme.ts            |   23 +
 packages/vue/src/devtools/timeline.ts         |   92 ++
 packages/vue/src/elements.ts                  |  100 +-
 packages/vue/src/noOps.ts                     |  207 +++-
 packages/vue/src/nodes.ts                     |   21 +-
 packages/vue/src/renderer.ts                  |  104 +-
 packages/vue/src/test-utils.ts                |   63 +
 packages/vue/tests/control-flow.test.ts       | 1016 +++++++++++++++++
 packages/vue/tests/devtools-hook.test.ts      |  106 ++
 packages/vue/tests/events.test.ts             |  757 ++++++++++++
 packages/vue/tests/layout.test.ts             |  429 +++++++
 packages/vue/tests/portal.test.ts             |  151 +++
 packages/vue/tests/text-nodes.test.ts         |   81 ++
 packages/vue/tsconfig.json                    |    2 +-
 packages/vue/tsconfig.typecheck.json          |   12 +
 packages/vue/types/opentui.d.ts               |   93 +-
 39 files changed, 4977 insertions(+), 101 deletions(-)
 create mode 100644 packages/vue/example/Animation.vue
 create mode 100644 packages/vue/example/Code.vue
 create mode 100644 packages/vue/example/Diff.vue
 create mode 100644 packages/vue/example/LineNumber.vue
 create mode 100644 packages/vue/example/Textarea.vue
 delete mode 100644 packages/vue/src/cli-renderer-ref.ts
 create mode 100644 packages/vue/src/components/Portal.ts
 create mode 100644 packages/vue/src/composables/usePaste.ts
 create mode 100644 packages/vue/src/composables/useSelectionHandler.ts
 create mode 100644 packages/vue/src/composables/useTimeline.ts
 create mode 100644 packages/vue/src/devtools/connect.ts
 create mode 100644 packages/vue/src/devtools/highlight.ts
 create mode 100644 packages/vue/src/devtools/index.ts
 create mode 100644 packages/vue/src/devtools/inspector.ts
 create mode 100644 packages/vue/src/devtools/theme.ts
 create mode 100644 packages/vue/src/devtools/timeline.ts
 create mode 100644 packages/vue/src/test-utils.ts
 create mode 100644 packages/vue/tests/control-flow.test.ts
 create mode 100644 packages/vue/tests/devtools-hook.test.ts
 create mode 100644 packages/vue/tests/events.test.ts
 create mode 100644 packages/vue/tests/layout.test.ts
 create mode 100644 packages/vue/tests/portal.test.ts
 create mode 100644 packages/vue/tests/text-nodes.test.ts
 create mode 100644 packages/vue/tsconfig.typecheck.json

diff --git a/packages/vue/example/ASCII.vue b/packages/vue/example/ASCII.vue
index 9be77dd30..6aefe6328 100644
--- a/packages/vue/example/ASCII.vue
+++ b/packages/vue/example/ASCII.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { measureText } from "@opentui/core"
+import type { SelectOption } from "@opentui/core"
 import { ref, computed } from "vue"
 
 const text = "ASCII"
@@ -12,8 +13,9 @@ const dimensions = computed(() => {
   })
 })
 
-const handleFontChange = (_: any, option: any) => {
-  font.value = option?.value
+const handleFontChange = (_index: number, option: SelectOption | null) => {
+  if (!option?.value) return
+  font.value = option.value as typeof font.value
 }
 
 const selectOptions = [
diff --git a/packages/vue/example/Animation.vue b/packages/vue/example/Animation.vue
new file mode 100644
index 000000000..630b4f5ae
--- /dev/null
+++ b/packages/vue/example/Animation.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { ref } from "vue"
+import { useTimeline, useTerminalDimensions } from "@opentui/vue"
+import type { JSAnimation } from "@opentui/core"
+
+const dimensions = useTerminalDimensions()
+
+const animatedSystem = ref({
+  cpu: 0,
+  memory: 0,
+  network: 0,
+  disk: 0,
+})
+
+const systems = [
+  { name: "CPU", color: "#6a5acd", animKey: "cpu" as const },
+  { name: "MEM", color: "#4682b4", animKey: "memory" as const },
+  { name: "NET", color: "#20b2aa", animKey: "network" as const },
+  { name: "DSK", color: "#daa520", animKey: "disk" as const },
+]
+
+const stats = ["PACKETS", "CONNECTIONS", "PROCESSES", "UPTIME"]
+const topColors = ["#ff6b9d", "#4ecdc4", "#ffe66d"]
+const rightColors = ["#ff8a80", "#80cbc4", "#fff176"]
+
+const timeline = useTimeline({
+  duration: 8000,
+  loop: false,
+})
+
+timeline.add(
+  animatedSystem.value,
+  {
+    cpu: 85,
+    memory: 70,
+    network: 95,
+    disk: 60,
+    duration: 3000,
+    ease: "inOutQuad",
+    onUpdate(animation: JSAnimation) {
+      animatedSystem.value = { ...(animation.targets[0] as typeof animatedSystem.value) }
+    },
+  },
+  0,
+)
+</script>
+
+<template>
+  <boxRenderable :style="{ zIndex: 5 }">
+    <!-- System Monitor Panel -->
+    <boxRenderable
+      title="SYSTEM MONITOR"
+      titleAlignment="center"
+      :style="{
+        position: 'absolute',
+        left: 2,
+        top: 5,
+        width: dimensions.width - 6,
+        height: 8,
+        backgroundColor: '#1a1a2e',
+        zIndex: 1,
+        border: true,
+        borderStyle: 'double',
+        borderColor: '#4a4a4a',
+      }"
+    >
+      <boxRenderable
+        v-for="system in systems"
+        :key="system.name"
+        :style="{
+          flexDirection: 'row',
+          height: 1,
+          width: '100%',
+          paddingLeft: 1,
+          paddingRight: 2,
+        }"
+      >
+        <textRenderable
+          :style="{
+            fg: system.color,
+            zIndex: 2,
+            marginRight: 1,
+          }"
+        >
+          {{ system.name }}
+        </textRenderable>
+        <boxRenderable
+          :style="{
+            height: 1,
+            backgroundColor: '#333333',
+            zIndex: 1,
+            flexGrow: 1,
+          }"
+        >
+          <boxRenderable
+            :style="{
+              width: `${animatedSystem[system.animKey]}%`,
+              height: 1,
+              backgroundColor: system.color,
+              zIndex: 2,
+            }"
+          />
+        </boxRenderable>
+      </boxRenderable>
+    </boxRenderable>
+
+    <!-- Real-time Stats Panel -->
+    <boxRenderable
+      title="◇ REAL-TIME STATS ◇"
+      titleAlignment="center"
+      :style="{
+        position: 'absolute',
+        left: 2,
+        top: 14,
+        width: dimensions.width - 6,
+        height: 4,
+        backgroundColor: '#2d1b2e',
+        zIndex: 1,
+        border: true,
+        borderStyle: 'single',
+        borderColor: '#8a4a8a',
+      }"
+    />
+
+    <!-- Stats Labels -->
+    <textRenderable
+      v-for="(label, index) in stats"
+      :key="label"
+      :style="{
+        position: 'absolute',
+        left: 4 + index * 15,
+        top: 15,
+        fg: '#9a9acd',
+        zIndex: 2,
+      }"
+    >
+      {{ label }}: 0
+    </textRenderable>
+
+    <!-- Top Left Indicators -->
+    <boxRenderable
+      v-for="(color, index) in topColors"
+      :key="`top-${index}`"
+      :style="{
+        position: 'absolute',
+        left: 2 + index * 4,
+        top: 2,
+        width: 3,
+        height: 1,
+        backgroundColor: color,
+        zIndex: 3,
+      }"
+    />
+
+    <!-- Top Right Indicators -->
+    <boxRenderable
+      v-for="(color, index) in rightColors"
+      :key="`right-${index}`"
+      :style="{
+        position: 'absolute',
+        left: dimensions.width - 8 + index * 2,
+        top: 1,
+        width: 1,
+        height: 1,
+        backgroundColor: color,
+        zIndex: 3,
+      }"
+    />
+
+    <!-- Instructions -->
+    <textRenderable
+      :style="{
+        position: 'absolute',
+        left: 2,
+        top: dimensions.height - 2,
+        fg: '#565f89',
+      }"
+    >
+      Press ESC to return to menu
+    </textRenderable>
+  </boxRenderable>
+</template>
diff --git a/packages/vue/example/App.vue b/packages/vue/example/App.vue
index bd2fbf609..1bd850f03 100644
--- a/packages/vue/example/App.vue
+++ b/packages/vue/example/App.vue
@@ -5,18 +5,28 @@ import Counter from "./Counter.vue"
 import StyledText from "./Styled-Text.vue"
 import TabSelect from "./TabSelect.vue"
 import ScrollBox from "./ScrollBox.vue"
+import Code from "./Code.vue"
+import Diff from "./Diff.vue"
+import Textarea from "./Textarea.vue"
+import Animation from "./Animation.vue"
+import LineNumber from "./LineNumber.vue"
 import { ref } from "vue"
 import ExtendExample from "./ExtendExample.vue"
-import { useCliRenderer } from ".."
+import { useKeyboard } from "@opentui/vue"
 
 const exampleOptions = [
-  { name: "ASCII", description: "Assci text example", value: "ascii" },
+  { name: "ASCII", description: "ASCII text example", value: "ascii" },
   { name: "Counter", description: "Counter example", value: "counter" },
   { name: "Login Form", description: "A simple login form example", value: "login" },
   { name: "Styled Text", description: "Text with various styles applied", value: "styledText" },
   { name: "Tab Select", description: "Tabs", value: "tabSelect" },
   { name: "Extend", description: "Extend example", value: "extend" },
   { name: "ScrollBox", description: "ScrollBox example", value: "scrollBox" },
+  { name: "Code", description: "Syntax highlighting demo", value: "code" },
+  { name: "Diff", description: "Diff view demo", value: "diff" },
+  { name: "Textarea", description: "Interactive editor demo", value: "textarea" },
+  { name: "Animation", description: "Timeline animation demo", value: "animation" },
+  { name: "Line Number", description: "Line numbers demo", value: "lineNumber" },
 ]
 
 type ExampleOption = (typeof exampleOptions)[number]
@@ -29,8 +39,7 @@ const onSelectExample = (i: number) => {
   selectedExample.value = selectedOption
 }
 
-const renderer = useCliRenderer()
-renderer.keyInput.on("keypress", (key) => {
+useKeyboard((key) => {
   if (key.name === "escape") {
     selectedExample.value = null
   }
@@ -48,6 +57,11 @@ const selectStyles = { flexGrow: 1 }
   <TabSelect v-else-if="selectedExample?.value === 'tabSelect'" />
   <ExtendExample v-else-if="selectedExample?.value === 'extend'" />
   <ScrollBox v-else-if="selectedExample?.value === 'scrollBox'" />
+  <Code v-else-if="selectedExample?.value === 'code'" />
+  <Diff v-else-if="selectedExample?.value === 'diff'" />
+  <Textarea v-else-if="selectedExample?.value === 'textarea'" />
+  <Animation v-else-if="selectedExample?.value === 'animation'" />
+  <LineNumber v-else-if="selectedExample?.value === 'lineNumber'" />
   <boxRenderable v-else :style="boxStyles">
     <selectRenderable
       :style="selectStyles"
diff --git a/packages/vue/example/Code.vue b/packages/vue/example/Code.vue
new file mode 100644
index 000000000..ba70a9320
--- /dev/null
+++ b/packages/vue/example/Code.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { SyntaxStyle, RGBA } from "@opentui/core"
+
+const syntaxStyle = SyntaxStyle.fromStyles({
+  keyword: { fg: RGBA.fromHex("#ff6b6b"), bold: true },
+  string: { fg: RGBA.fromHex("#51cf66") },
+  comment: { fg: RGBA.fromHex("#868e96"), italic: true },
+  number: { fg: RGBA.fromHex("#ffd43b") },
+  function: { fg: RGBA.fromHex("#74c0fc") },
+  type: { fg: RGBA.fromHex("#da77f2") },
+  operator: { fg: RGBA.fromHex("#ff922b") },
+  default: { fg: RGBA.fromHex("#f8f9fa") },
+})
+
+const codeExample = `// A simple TypeScript example
+interface User {
+  name: string
+  age: number
+  email?: string
+}
+
+function greet(user: User): string {
+  const greeting = "Hello, " + user.name
+  console.log(greeting)
+  return greeting
+}
+
+const alice: User = {
+  name: "Alice",
+  age: 30,
+  email: "alice@example.com"
+}
+
+greet(alice) // Output: Hello, Alice`
+</script>
+
+<template>
+  <boxRenderable
+    :style="{
+      flexDirection: 'column',
+      padding: 1,
+      gap: 1,
+    }"
+  >
+    <boxRenderable
+      :style="{
+        backgroundColor: '#1a1b26',
+        padding: 1,
+        border: true,
+        borderStyle: 'single',
+        borderColor: '#7aa2f7',
+      }"
+    >
+      <textRenderable :style="{ fg: '#7aa2f7' }"> Code Syntax Highlighting Demo </textRenderable>
+    </boxRenderable>
+
+    <boxRenderable
+      title="typescript"
+      titleAlignment="left"
+      :style="{
+        flexGrow: 1,
+        border: true,
+        borderStyle: 'rounded',
+        borderColor: '#565f89',
+        backgroundColor: '#1a1b26',
+        padding: 1,
+      }"
+    >
+      <codeRenderable :content="codeExample" filetype="typescript" :syntaxStyle="syntaxStyle" />
+    </boxRenderable>
+
+    <textRenderable :style="{ fg: '#565f89', height: 1 }"> Press ESC to return to menu </textRenderable>
+  </boxRenderable>
+</template>
diff --git a/packages/vue/example/Counter.vue b/packages/vue/example/Counter.vue
index 19280f4da..b9ece6a57 100644
--- a/packages/vue/example/Counter.vue
+++ b/packages/vue/example/Counter.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { RGBA, type KeyEvent } from "@opentui/core"
-import { onUnmounted, ref } from "vue"
-import { useCliRenderer } from ".."
+import { ref } from "vue"
+import { useKeyboard } from "@opentui/vue"
 
 const count = ref(0)
 
-function handleKeyPress(key: KeyEvent): void {
+useKeyboard((key: KeyEvent) => {
   switch (key.name) {
     case "up":
     case "+":
@@ -21,13 +21,6 @@ function handleKeyPress(key: KeyEvent): void {
       count.value = 0
       break
   }
-}
-
-const renderer = useCliRenderer()
-renderer.keyInput.on("keypress", handleKeyPress)
-
-onUnmounted(() => {
-  renderer.keyInput.off("keypress", handleKeyPress)
 })
 
 const textStyles = { fg: RGBA.fromHex("#0000ff") }
diff --git a/packages/vue/example/Diff.vue b/packages/vue/example/Diff.vue
new file mode 100644
index 000000000..f1e1d14d8
--- /dev/null
+++ b/packages/vue/example/Diff.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ref } from "vue"
+import { RGBA, SyntaxStyle } from "@opentui/core"
+import { useKeyboard } from "@opentui/vue"
+
+const currentView = ref<"unified" | "split">("unified")
+const showLineNumbers = ref(true)
+
+const exampleDiff = `--- a/calculator.ts
++++ b/calculator.ts
+@@ -1,15 +1,20 @@
+ class Calculator {
+   add(a: number, b: number): number {
+     return a + b;
+   }
+ 
+-  subtract(a: number, b: number): number {
+-    return a - b;
++  subtract(a: number, b: number, c: number = 0): number {
++    return a - b - c;
+   }
+ 
+   multiply(a: number, b: number): number {
+     return a * b;
+   }
++
++  divide(a: number, b: number): number {
++    if (b === 0) {
++      throw new Error("Division by zero");
++    }
++    return a / b;
++  }
+ }`
+
+const syntaxStyle = SyntaxStyle.fromStyles({
+  keyword: { fg: RGBA.fromHex("#C792EA") },
+  string: { fg: RGBA.fromHex("#C3E88D") },
+  comment: { fg: RGBA.fromHex("#546E7A") },
+  number: { fg: RGBA.fromHex("#F78C6C") },
+  function: { fg: RGBA.fromHex("#82AAFF") },
+  type: { fg: RGBA.fromHex("#FFCB6B") },
+  operator: { fg: RGBA.fromHex("#89DDFF") },
+  default: { fg: RGBA.fromHex("#A6ACCD") },
+})
+
+useKeyboard((key) => {
+  if (key.name === "v" && !key.ctrl && !key.meta) {
+    currentView.value = currentView.value === "unified" ? "split" : "unified"
+  } else if (key.name === "l" && !key.ctrl && !key.meta) {
+    showLineNumbers.value = !showLineNumbers.value
+  }
+})
+</script>
+
+<template>
+  <boxRenderable
+    :style="{
+      flexDirection: 'column',
+      width: '100%',
+      height: '100%',
+      gap: 1,
+    }"
+  >
+    <boxRenderable
+      :style="{
+        flexDirection: 'column',
+        backgroundColor: '#0D1117',
+        padding: 1,
+        border: true,
+        borderColor: '#30363D',
+      }"
+    >
+      <textRenderable :style="{ fg: '#4ECDC4' }"> Diff Demo - Unified & Split View </textRenderable>
+      <textRenderable :style="{ fg: '#888888' }">Keybindings:</textRenderable>
+      <textRenderable :style="{ fg: '#AAAAAA' }"> V - Toggle view ({{ currentView.toUpperCase() }}) </textRenderable>
+      <textRenderable :style="{ fg: '#AAAAAA' }">
+        L - Toggle line numbers ({{ showLineNumbers ? "ON" : "OFF" }})
+      </textRenderable>
+    </boxRenderable>
+
+    <boxRenderable
+      :style="{
+        flexGrow: 1,
+        border: true,
+        borderStyle: 'single',
+        borderColor: '#4ECDC4',
+        backgroundColor: '#0D1117',
+      }"
+    >
+      <diffRenderable
+        :diff="exampleDiff"
+        :view="currentView"
+        filetype="typescript"
+        :syntaxStyle="syntaxStyle"
+        :showLineNumbers="showLineNumbers"
+        addedBg="#1a4d1a"
+        removedBg="#4d1a1a"
+        addedSignColor="#22c55e"
+        removedSignColor="#ef4444"
+        lineNumberFg="#6b7280"
+        lineNumberBg="#161b22"
+        width="100%"
+        height="100%"
+      />
+    </boxRenderable>
+  </boxRenderable>
+</template>
diff --git a/packages/vue/example/LineNumber.vue b/packages/vue/example/LineNumber.vue
new file mode 100644
index 000000000..0fa0dda99
--- /dev/null
+++ b/packages/vue/example/LineNumber.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { ref, watch } from "vue"
+import type { LineNumberRenderable } from "@opentui/core"
+import { useKeyboard } from "@opentui/vue"
+import type { RenderableComponentExpose } from "@opentui/vue"
+
+const showLineNumbers = ref(true)
+const currentLine = ref(0)
+const wrapMode = ref<"word" | "char" | "none">("word")
+const lineNumberRef = ref<RenderableComponentExpose<LineNumberRenderable> | null>(null)
+
+const content = `Welcome to the Line Number Demo!
+
+This example demonstrates the LineNumberRenderable component.
+It's perfect for displaying code, logs, or any text where
+line numbers are helpful.
+
+Features:
+  • Toggle line numbers with 'L'
+  • Navigate lines with 'J' (down) and 'K' (up)
+  • Toggle wrap mode with 'W'
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
+
+This is a longer line that will demonstrate how text wrapping works when the content exceeds the available width of the container. Notice how it handles the overflow based on the wrap mode setting.
+
+The quick brown fox jumps over the lazy dog.
+Pack my box with five dozen liquor jugs.
+How vexingly quick daft zebras jump!
+
+More sample content here...
+And another line for good measure.
+One more line to make it interesting.`
+
+const lines = content.split("\n")
+const lineCount = lines.length
+
+let lastHighlightedLine: number | null = null
+watch(
+  [currentLine, () => lineNumberRef.value?.element],
+  ([line, lineNumber]) => {
+    if (!lineNumber) return
+
+    if (lastHighlightedLine !== null) {
+      lineNumber.clearLineColor(lastHighlightedLine)
+    }
+
+    lineNumber.setLineColor(line, { gutter: "transparent", content: "#1e3a5f" })
+    lastHighlightedLine = line
+  },
+  { immediate: true },
+)
+
+useKeyboard((key) => {
+  if (key.name === "l" && !key.ctrl && !key.meta) {
+    showLineNumbers.value = !showLineNumbers.value
+  } else if (key.name === "j" && !key.ctrl && !key.meta) {
+    currentLine.value = Math.min(currentLine.value + 1, lineCount - 1)
+  } else if (key.name === "k" && !key.ctrl && !key.meta) {
+    currentLine.value = Math.max(currentLine.value - 1, 0)
+  } else if (key.name === "w" && !key.ctrl && !key.meta) {
+    const modes: Array<"word" | "char" | "none"> = ["word", "char", "none"]
+    const currentIndex = modes.indexOf(wrapMode.value)
+    wrapMode.value = modes[(currentIndex + 1) % modes.length]!
+  }
+})
+</script>
+
+<template>
+  <boxRenderable
+    :style="{
+      flexDirection: 'column',
+      padding: 1,
+      gap: 1,
+    }"
+  >
+    <!-- Header -->
+    <boxRenderable
+      :style="{
+        backgroundColor: '#1e293b',
+        padding: 1,
+        border: true,
+        borderStyle: 'single',
+        borderColor: '#3b82f6',
+      }"
+    >
+      <textRenderable :style="{ fg: '#3b82f6' }"> Line Number Demo </textRenderable>
+    </boxRenderable>
+
+    <!-- Controls -->
+    <boxRenderable
+      :style="{
+        flexDirection: 'row',
+        gap: 2,
+        height: 1,
+      }"
+    >
+      <textRenderable :style="{ fg: '#94a3b8' }">
+        L: line numbers ({{ showLineNumbers ? "ON" : "OFF" }})
+      </textRenderable>
+      <textRenderable :style="{ fg: '#94a3b8' }"> J/K: navigate </textRenderable>
+      <textRenderable :style="{ fg: '#94a3b8' }"> W: wrap ({{ wrapMode }}) </textRenderable>
+      <textRenderable :style="{ fg: '#64748b' }"> Line {{ currentLine + 1 }}/{{ lineCount }} </textRenderable>
+    </boxRenderable>
+
+    <!-- Content Area -->
+    <boxRenderable
+      :style="{
+        flexGrow: 1,
+        border: true,
+        borderStyle: 'rounded',
+        borderColor: '#475569',
+        backgroundColor: '#0f172a',
+      }"
+    >
+      <lineNumberRenderable
+        ref="lineNumberRef"
+        :showLineNumbers="showLineNumbers"
+        fg="#64748b"
+        bg="#1e293b"
+        :minWidth="3"
+        :paddingRight="1"
+        width="100%"
+        height="100%"
+      >
+        <textareaRenderable
+          :initialValue="content"
+          :wrapMode="wrapMode"
+          textColor="#e2e8f0"
+          backgroundColor="transparent"
+          selectionBg="#264F78"
+          selectionFg="#FFFFFF"
+          width="100%"
+          height="100%"
+        />
+      </lineNumberRenderable>
+    </boxRenderable>
+
+    <!-- Footer -->
+    <textRenderable :style="{ fg: '#565f89', height: 1 }"> Press ESC to return to menu </textRenderable>
+  </boxRenderable>
+</template>
diff --git a/packages/vue/example/LoginForm.vue b/packages/vue/example/LoginForm.vue
index 0110a82bb..0f9a42e2c 100644
--- a/packages/vue/example/LoginForm.vue
+++ b/packages/vue/example/LoginForm.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { bold, fg, italic, t, TextAttributes, type KeyEvent } from "@opentui/core"
-import { ref, onMounted, onUnmounted, computed } from "vue"
-import { useCliRenderer } from ".."
+import { ref, computed } from "vue"
+import { useKeyboard } from "@opentui/vue"
 
 const username = ref("")
 const password = ref("")
 const focused = ref<"username" | "password">("username")
 const status = ref<"idle" | "invalid" | "success">("idle")
 
-const handleKeyPress = (key: KeyEvent) => {
+useKeyboard((key: KeyEvent) => {
   if (key.name === "tab") {
     focused.value = focused.value === "username" ? "password" : "username"
   }
-}
+})
 
 const handleUsernameChange = (value: string) => {
   username.value = value
@@ -30,15 +30,6 @@ const handleSubmit = () => {
   }
 }
 
-const renderer = useCliRenderer()
-onMounted(() => {
-  renderer.keyInput.on("keypress", handleKeyPress)
-})
-
-onUnmounted(() => {
-  renderer.keyInput.off("keypress", handleKeyPress)
-})
-
 const titleTextStyles = {
   fg: "#FFFF00",
   attributes: TextAttributes.BOLD | TextAttributes.ITALIC,
diff --git a/packages/vue/example/Textarea.vue b/packages/vue/example/Textarea.vue
new file mode 100644
index 000000000..a0c71e16e
--- /dev/null
+++ b/packages/vue/example/Textarea.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue"
+import { bold, cyan, fg, t, type TextareaRenderable, type CursorStyleOptions } from "@opentui/core"
+import { useKeyboard, useCliRenderer, type RenderableComponentExpose } from "@opentui/vue"
+
+const initialContent = `Welcome to the Vue Textarea Demo!
+
+This is an interactive text editor powered by EditBuffer and EditorView.
+
+NAVIGATION:
+  • Arrow keys to move cursor
+  • Home/End for line navigation
+  • Ctrl+A/Ctrl+E for buffer start/end
+
+SELECTION:
+  • Shift+Arrow keys to select
+  • Shift+Home/End to select to line start/end
+
+EDITING:
+  • Type any text to insert
+  • Backspace/Delete to remove text
+  • Enter to create new lines
+  • Ctrl+D to delete current line
+
+UNDO/REDO:
+  • Ctrl+Z to undo
+  • Ctrl+Shift+Z or Ctrl+Y to redo
+
+FEATURES:
+  ✓ Grapheme-aware cursor movement
+  ✓ Unicode support (emoji 🎉 and CJK 你好)
+  ✓ Text wrapping and viewport management
+  ✓ Undo/redo support
+
+Press ESC to return to main menu`
+
+const cursorStyle = ref<CursorStyleOptions>({ style: "block", blinking: true })
+const wrapMode = ref<"word" | "char" | "none">("word")
+const statusText = ref("")
+let textareaRef: TextareaRenderable | null = null
+
+onMounted(() => {
+  const renderer = useCliRenderer()
+  renderer.setBackgroundColor("#0D1117")
+
+  renderer.setFrameCallback(async () => {
+    if (textareaRef && !textareaRef.isDestroyed) {
+      try {
+        const cursor = textareaRef.logicalCursor
+        const wrap = wrapMode.value.toUpperCase()
+        const styleLabel = cursorStyle.value.style.toUpperCase()
+        const blinkLabel = cursorStyle.value.blinking ? "Blinking" : "Steady"
+        statusText.value = `Line ${cursor.row + 1}, Col ${cursor.col + 1} | Wrap: ${wrap} | Cursor: ${styleLabel} (${blinkLabel})`
+      } catch {
+        // Ignore errors during shutdown
+      }
+    }
+  })
+})
+
+useKeyboard((key) => {
+  if (key.shift && key.name === "w") {
+    key.preventDefault()
+    if (textareaRef && !textareaRef.isDestroyed) {
+      const modes: Array<"word" | "char" | "none"> = ["word", "char", "none"]
+      const currentIndex = modes.indexOf(wrapMode.value)
+      wrapMode.value = modes[(currentIndex + 1) % modes.length]!
+      textareaRef.wrapMode = wrapMode.value
+    }
+  }
+  if (key.name === "tab") {
+    key.preventDefault()
+    if (textareaRef && !textareaRef.isDestroyed) {
+      const nextStyle: CursorStyleOptions =
+        cursorStyle.value.style === "block" ? { style: "line", blinking: false } : { style: "block", blinking: true }
+      cursorStyle.value = nextStyle
+      textareaRef.cursorStyle = nextStyle
+    }
+  }
+})
+
+const setTextareaRef = (r: RenderableComponentExpose<TextareaRenderable> | null) => {
+  textareaRef = r?.element ?? null
+}
+
+const placeholder = t`${fg("#333333")("Enter")} ${cyan(bold("text"))} ${fg("#333333")("here...")}`
+</script>
+
+<template>
+  <boxRenderable :style="{ padding: 1, flexDirection: 'column' }">
+    <boxRenderable
+      title="Interactive Editor (TextareaRenderable)"
+      titleAlignment="left"
+      :style="{
+        border: true,
+        borderStyle: 'single',
+        borderColor: '#6BCF7F',
+        backgroundColor: '#0D1117',
+        paddingLeft: 1,
+        paddingRight: 1,
+        flexGrow: 1,
+      }"
+    >
+      <textareaRenderable
+        :ref="setTextareaRef"
+        :initialValue="initialContent"
+        :placeholder="placeholder"
+        textColor="#F0F6FC"
+        selectionBg="#264F78"
+        selectionFg="#FFFFFF"
+        :wrapMode="wrapMode"
+        :showCursor="true"
+        cursorColor="#4ECDC4"
+        :cursorStyle="cursorStyle"
+        :focused="true"
+        :style="{ flexGrow: 1 }"
+      />
+    </boxRenderable>
+    <textRenderable :style="{ fg: '#A5D6FF', height: 1 }">
+      {{ statusText }}
+    </textRenderable>
+    <textRenderable :style="{ fg: '#565f89', height: 1 }">
+      Shift+W: wrap mode | Tab: cursor style | ESC: menu
+    </textRenderable>
+  </boxRenderable>
+</template>
diff --git a/packages/vue/index.ts b/packages/vue/index.ts
index df3ad1f4b..edbf421eb 100644
--- a/packages/vue/index.ts
+++ b/packages/vue/index.ts
@@ -1,15 +1,96 @@
-import { CliRenderer, createCliRenderer, type CliRendererConfig } from "@opentui/core"
+import {
+  CliRenderEvents,
+  CliRenderer,
+  createCliRenderer,
+  engine,
+  type BaseRenderable,
+  type CliRendererConfig,
+} from "@opentui/core"
 import { createOpenTUIRenderer } from "./src/renderer"
-import type { InjectionKey } from "vue"
+import { defineComponent, h, shallowRef, type App, type Component, type InjectionKey } from "vue"
+import { elements } from "./src/elements"
+import { initializeDevtools } from "./src/devtools"
 export * from "./src/composables/index"
 export * from "./src/extend"
+export { testRender } from "./src/test-utils"
+export { Portal, type PortalProps } from "./src/components/Portal"
+export { setupOpenTUIDevtools, type OpenTUIDevtoolsSettings } from "./src/devtools"
 
 export const cliRendererKey: InjectionKey<CliRenderer> = Symbol("cliRenderer")
 
-export async function render(component: any, rendererConfig: CliRendererConfig = {}): Promise<void> {
+export interface RenderableComponentExpose<TRenderable extends BaseRenderable = BaseRenderable> {
+  readonly element: TRenderable | null
+}
+
+export function installOpenTUIComponents(app: App): void {
+  for (const elementName of Object.keys(elements)) {
+    const displayName = elementName.endsWith("Renderable")
+      ? elementName.slice(0, -10).toLowerCase()
+      : elementName.toLowerCase()
+
+    app.component(
+      elementName,
+      defineComponent({
+        name: displayName,
+        inheritAttrs: false,
+        setup(_props, { attrs, slots, expose }) {
+          const element = shallowRef<BaseRenderable | null>(null)
+          expose({
+            get element() {
+              return element.value
+            },
+          })
+
+          return () => h(elementName, { ...attrs, ref: element }, slots.default?.())
+        },
+      }),
+    )
+  }
+}
+
+let currentCliRenderer: CliRenderer | null = null
+let currentEngineOwner: CliRenderer | null = null
+
+export function getCurrentCliRenderer(): CliRenderer | null {
+  return currentCliRenderer
+}
+
+export async function render(component: Component, rendererConfig: CliRendererConfig = {}): Promise<void> {
+  const { shouldEnableDevtools, devtoolsCleanup } = await initializeDevtools()
   const cliRenderer = await createCliRenderer(rendererConfig)
+  currentCliRenderer = cliRenderer
+
+  engine.attach(cliRenderer)
+  currentEngineOwner = cliRenderer
+
+  cliRenderer.once(CliRenderEvents.DESTROY, () => {
+    if (currentEngineOwner === cliRenderer) {
+      engine.detach()
+      currentEngineOwner = null
+    }
+    devtoolsCleanup?.()
+    if (currentCliRenderer === cliRenderer) {
+      currentCliRenderer = null
+    }
+  })
+
   const renderer = createOpenTUIRenderer(cliRenderer)
   const app = renderer.createApp(component)
+  installOpenTUIComponents(app as App)
   app.provide(cliRendererKey, cliRenderer)
+
+  if (shouldEnableDevtools) {
+    try {
+      const { setupOpenTUIDevtools } = await import("./src/devtools")
+
+        ; (app.config as unknown as Record<string, unknown>).devtools = true
+      setupOpenTUIDevtools(app as App, cliRenderer)
+    } catch (e) {
+      if (process.env["NODE_ENV"] === "development") {
+        console.warn("[OpenTUI] Failed to setup DevTools:", e)
+      }
+    }
+  }
+
   app.mount(cliRenderer.root)
 }
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 9b8e65d07..939c4d220 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -21,19 +21,29 @@
   "scripts": {
     "build": "bun scripts/build.ts",
     "publish": "bun scripts/publish.ts",
-    "start:example": "bun scripts/build-examples.ts && bun run example/dist/main.js"
+    "start:example": "bun run typecheck && bun scripts/build-examples.ts && bun example/dist/main.js",
+    "typecheck": "bunx vue-tsc --noEmit -p tsconfig.typecheck.json"
   },
   "dependencies": {
     "@opentui/core": "workspace:*",
-    "@vue/runtime-core": "^3.5.18"
+    "@vue/runtime-core": "^3.5.26"
   },
   "peerDependencies": {
     "vue": "^3.5.18",
     "typescript": "^5"
   },
   "devDependencies": {
+    "@types/bun": "^1.3.5",
+    "@types/node": "^25.0.3",
+    "@vue/devtools": "^8.0.5",
+    "@vue/devtools-api": "^8.0.5",
+    "@vue/devtools-core": "^8.0.5",
+    "@vue/devtools-kit": "^8.0.5",
     "bun-plugin-vue3": "^1.0.0-beta.2",
-    "typescript": "^5",
-    "vue": "^3.5.18"
+    "bun-types": "^1.3.5",
+    "socket.io-client": "^4.8.3",
+    "typescript": "^5.9.3",
+    "vue": "^3.5.26",
+    "vue-tsc": "^3.2.2"
   }
 }
diff --git a/packages/vue/src/cli-renderer-ref.ts b/packages/vue/src/cli-renderer-ref.ts
deleted file mode 100644
index 860c02bb8..000000000
--- a/packages/vue/src/cli-renderer-ref.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { CliRenderer } from "@opentui/core"
-
-let currentCliRenderer: CliRenderer | null = null
-
-export function setCurrentCliRenderer(renderer: CliRenderer) {
-  currentCliRenderer = renderer
-}
-
-export function getCurrentCliRenderer(): CliRenderer {
-  if (!currentCliRenderer) {
-    throw new Error("No CLI renderer available. Make sure to call setCurrentCliRenderer.")
-  }
-  return currentCliRenderer
-}
diff --git a/packages/vue/src/components/Portal.ts b/packages/vue/src/components/Portal.ts
new file mode 100644
index 000000000..febd132c6
--- /dev/null
+++ b/packages/vue/src/components/Portal.ts
@@ -0,0 +1,121 @@
+import { defineComponent, Fragment, h, onMounted, onUnmounted, watch, type PropType, type VNode, shallowRef } from "vue"
+import { BoxRenderable, type Renderable } from "@opentui/core"
+import { useCliRenderer } from "../composables/useCliRenderer"
+import { createOpenTUIRenderer } from "../renderer"
+
+let portalId = 0
+
+export const Portal = defineComponent({
+  name: "Portal",
+  props: {
+    to: {
+      type: Object as PropType<Renderable>,
+      default: undefined,
+    },
+  },
+  setup(props, { slots }) {
+    const cliRenderer = useCliRenderer()
+    const id = `portal-${++portalId}`
+    const opentuiRenderer = createOpenTUIRenderer(cliRenderer)
+
+    let container: BoxRenderable | null = null
+    let currentTarget: Renderable | null = null
+    let isMounted = false
+    let instanceId = 0
+
+    const childrenRef = shallowRef<VNode[] | null>(null)
+
+    const getTarget = (): Renderable => props.to || cliRenderer.root
+
+    const createNewContainer = (): BoxRenderable => {
+      instanceId++
+      return new BoxRenderable(cliRenderer, { id: `${id}-${instanceId}` })
+    }
+
+    const destroyCurrentContainer = () => {
+      if (container && currentTarget) {
+        try {
+          opentuiRenderer.render(null, container)
+        } catch {}
+        try {
+          currentTarget.remove(container.id)
+        } catch {}
+        try {
+          container.destroyRecursively()
+        } catch {}
+        container = null
+        currentTarget = null
+      }
+    }
+
+    const attachToTarget = () => {
+      if (!isMounted) return
+
+      const target = getTarget()
+
+      if (currentTarget === target && container) {
+        return
+      }
+
+      destroyCurrentContainer()
+
+      container = createNewContainer()
+      try {
+        target.add(container)
+      } catch {}
+      currentTarget = target
+
+      renderChildren()
+    }
+
+    const renderChildren = () => {
+      if (!isMounted || !container) return
+
+      const children = childrenRef.value
+
+      if (!children || children.length === 0) {
+        try {
+          opentuiRenderer.render(null, container)
+        } catch {}
+        return
+      }
+
+      try {
+        opentuiRenderer.render(h(Fragment, children), container)
+      } catch {}
+    }
+
+    onMounted(() => {
+      isMounted = true
+      attachToTarget()
+    })
+
+    onUnmounted(() => {
+      isMounted = false
+      destroyCurrentContainer()
+    })
+
+    watch(
+      () => props.to,
+      () => {
+        attachToTarget()
+      },
+    )
+
+    watch(
+      childrenRef,
+      () => {
+        renderChildren()
+      },
+      { flush: "post" },
+    )
+
+    return () => {
+      const children = slots.default?.()
+      childrenRef.value = (children as VNode[] | undefined) ?? null
+      return null
+    }
+  },
+})
+
+export type PortalProps = InstanceType<typeof Portal>["$props"]
diff --git a/packages/vue/src/composables/index.ts b/packages/vue/src/composables/index.ts
index 0c24fdee8..1f2651429 100644
--- a/packages/vue/src/composables/index.ts
+++ b/packages/vue/src/composables/index.ts
@@ -1,4 +1,7 @@
 export { useTerminalDimensions } from "./useTerminalDimensions"
 export { useOnResize } from "./useOnResize"
-export { useKeyboard } from "./useKeyboard"
+export { useKeyboard, type UseKeyboardOptions } from "./useKeyboard"
 export { useCliRenderer } from "./useCliRenderer"
+export { useTimeline } from "./useTimeline"
+export { usePaste } from "./usePaste"
+export { useSelectionHandler } from "./useSelectionHandler"
diff --git a/packages/vue/src/composables/useCliRenderer.ts b/packages/vue/src/composables/useCliRenderer.ts
index aff26b663..96a992cd9 100644
--- a/packages/vue/src/composables/useCliRenderer.ts
+++ b/packages/vue/src/composables/useCliRenderer.ts
@@ -1,9 +1,9 @@
 import { inject } from "@vue/runtime-core"
 import type { CliRenderer } from "@opentui/core"
-import { cliRendererKey } from "../.."
+import { cliRendererKey, getCurrentCliRenderer } from "../.."
 
 export function useCliRenderer(): CliRenderer {
-  const renderer = inject(cliRendererKey)
+  const renderer = inject(cliRendererKey) ?? getCurrentCliRenderer()
 
   if (!renderer) {
     throw new Error("Could not find CliRenderer instance. Was it provided by the app?")
diff --git a/packages/vue/src/composables/useKeyboard.ts b/packages/vue/src/composables/useKeyboard.ts
index 64264eca9..bcc959bc8 100644
--- a/packages/vue/src/composables/useKeyboard.ts
+++ b/packages/vue/src/composables/useKeyboard.ts
@@ -1,16 +1,44 @@
-// packages/vue/src/composables/useKeyboard.ts
 import { type KeyEvent } from "@opentui/core"
 import { onMounted, onUnmounted } from "vue"
 import { useCliRenderer } from "./useCliRenderer"
 
-export const useKeyboard = (handler: (key: KeyEvent) => void) => {
+export interface UseKeyboardOptions {
+  /** Include release events - callback receives events with eventType: "release" */
+  release?: boolean
+}
+
+/**
+ * Subscribe to keyboard events.
+ *
+ * By default, only receives press events (including key repeats with `repeated: true`).
+ * Use `options.release` to also receive release events.
+ *
+ * @example
+ * // Basic press handling (includes repeats)
+ * useKeyboard((e) => console.log(e.name, e.repeated ? "(repeat)" : ""))
+ *
+ * // With release events
+ * const keys = new Set<string>()
+ * useKeyboard((e) => {
+ *   if (e.eventType === "release") keys.delete(e.name)
+ *   else keys.add(e.name)
+ * }, { release: true })
+ */
+export const useKeyboard = (handler: (key: KeyEvent) => void, options?: UseKeyboardOptions) => {
   const renderer = useCliRenderer()
+  const keyHandler = renderer.keyInput
 
   onMounted(() => {
-    renderer.keyInput.on("keypress", handler)
+    keyHandler.on("keypress", handler)
+    if (options?.release) {
+      keyHandler.on("keyrelease", handler)
+    }
   })
 
   onUnmounted(() => {
-    renderer.keyInput.off("keypress", handler)
+    keyHandler.off("keypress", handler)
+    if (options?.release) {
+      keyHandler.off("keyrelease", handler)
+    }
   })
 }
diff --git a/packages/vue/src/composables/usePaste.ts b/packages/vue/src/composables/usePaste.ts
new file mode 100644
index 000000000..0cbb3777f
--- /dev/null
+++ b/packages/vue/src/composables/usePaste.ts
@@ -0,0 +1,16 @@
+import { onMounted, onUnmounted } from "vue"
+import type { PasteEvent } from "@opentui/core"
+import { useCliRenderer } from "./useCliRenderer"
+
+export function usePaste(callback: (event: PasteEvent) => void) {
+  const renderer = useCliRenderer()
+  const keyHandler = renderer.keyInput
+
+  onMounted(() => {
+    keyHandler.on("paste", callback)
+  })
+
+  onUnmounted(() => {
+    keyHandler.off("paste", callback)
+  })
+}
diff --git a/packages/vue/src/composables/useSelectionHandler.ts b/packages/vue/src/composables/useSelectionHandler.ts
new file mode 100644
index 000000000..15602c239
--- /dev/null
+++ b/packages/vue/src/composables/useSelectionHandler.ts
@@ -0,0 +1,15 @@
+import { onMounted, onUnmounted } from "vue"
+import type { Selection } from "@opentui/core"
+import { useCliRenderer } from "./useCliRenderer"
+
+export function useSelectionHandler(callback: (selection: Selection) => void) {
+  const renderer = useCliRenderer()
+
+  onMounted(() => {
+    renderer.on("selection", callback)
+  })
+
+  onUnmounted(() => {
+    renderer.off("selection", callback)
+  })
+}
diff --git a/packages/vue/src/composables/useTimeline.ts b/packages/vue/src/composables/useTimeline.ts
new file mode 100644
index 000000000..11ef405de
--- /dev/null
+++ b/packages/vue/src/composables/useTimeline.ts
@@ -0,0 +1,20 @@
+import { onMounted, onUnmounted } from "vue"
+import { engine, Timeline, type TimelineOptions } from "@opentui/core"
+
+export function useTimeline(options: TimelineOptions = {}): Timeline {
+  const timeline = new Timeline(options)
+
+  onMounted(() => {
+    if (options.autoplay !== false) {
+      timeline.play()
+    }
+    engine.register(timeline)
+  })
+
+  onUnmounted(() => {
+    timeline.pause()
+    engine.unregister(timeline)
+  })
+
+  return timeline
+}
diff --git a/packages/vue/src/devtools/connect.ts b/packages/vue/src/devtools/connect.ts
new file mode 100644
index 000000000..872d124b8
--- /dev/null
+++ b/packages/vue/src/devtools/connect.ts
@@ -0,0 +1,154 @@
+const g = globalThis as Record<string, unknown>
+
+function ensureLocalStorage(): void {
+  if (typeof g.localStorage !== "undefined") return
+
+  const store: Record<string, string> = {}
+  g.localStorage = {
+    getItem: (key: string) => store[key] ?? null,
+    setItem: (key: string, value: string) => {
+      store[key] = value
+    },
+    removeItem: (key: string) => {
+      delete store[key]
+    },
+    clear: () => {
+      Object.keys(store).forEach((k) => delete store[k])
+    },
+    get length() {
+      return Object.keys(store).length
+    },
+    key: (i: number) => Object.keys(store)[i] ?? null,
+  }
+}
+
+function ensureDevtoolsGlobals(): void {
+  ensureLocalStorage()
+
+  // Vue DevTools assumes a browser-like environment based on `navigator`.
+  // In terminal environments (Bun/Node) we provide minimal DOM-ish globals to prevent crashes.
+  if (typeof g.document === "undefined") {
+    g.document = {
+      querySelectorAll: () => [],
+      querySelector: () => null,
+      createElement: () => ({
+        style: {},
+        appendChild: () => {},
+        addEventListener: () => {},
+        removeEventListener: () => {},
+        parentNode: { removeChild: () => {} },
+      }),
+      createRange: () => ({
+        selectNode: () => {},
+        getBoundingClientRect: () => ({ top: 0, bottom: 0, left: 0, right: 0, width: 0, height: 0 }),
+      }),
+      getElementById: () => null,
+      body: { appendChild: () => {}, removeChild: () => {} },
+      documentElement: { appendChild: () => {} },
+    }
+  }
+
+  if (typeof g.window === "undefined") {
+    g.window = g
+  }
+
+  if (typeof g.self === "undefined") {
+    g.self = g
+  }
+
+  if (typeof g.navigator === "undefined") {
+    g.navigator = { userAgent: "node" }
+  }
+
+  const windowRecord = g.window as Record<string, unknown>
+  windowRecord.addEventListener =
+    (windowRecord.addEventListener as unknown as (...args: unknown[]) => void) || (() => {})
+  windowRecord.removeEventListener =
+    (windowRecord.removeEventListener as unknown as (...args: unknown[]) => void) || (() => {})
+}
+
+export async function initDevtoolsGlobalHook(): Promise<void> {
+  ensureDevtoolsGlobals()
+  const { initDevTools, toggleHighPerfMode } = await import("@vue/devtools-kit")
+  initDevTools()
+
+  const highPerfEnv = process.env["OPENTUI_DEVTOOLS_HIGH_PERF"] ?? "false"
+  const isHighPerfEnabled = highPerfEnv === "true"
+  if (!isHighPerfEnabled) {
+    toggleHighPerfMode(false)
+  }
+}
+
+export interface DevToolsConnectOptions {
+  connect?: boolean
+  waitForConnect?: boolean
+  timeoutMs?: number
+}
+
+export async function connectToDevTools(
+  host = "http://localhost",
+  port = 8098,
+  options: DevToolsConnectOptions = {},
+): Promise<() => void> {
+  await initDevtoolsGlobalHook()
+
+  if (options.connect === false) return () => {}
+
+  const { createRpcServer, setElectronServerContext } = await import("@vue/devtools-kit")
+  const { functions } = await import("@vue/devtools-core")
+  const { io } = await import("socket.io-client")
+
+  const url = `${host}:${port}`
+  const socket = io(url)
+  let didSetupRpc = false
+
+  const onConnect = () => {
+    if (!didSetupRpc) {
+      didSetupRpc = true
+      setElectronServerContext(socket)
+      createRpcServer(functions, { preset: "electron" })
+    }
+    socket.emit("vue-devtools:init")
+  }
+
+  socket.on("connect", onConnect)
+
+  socket.on("vue-devtools:disconnect-user-app", () => {
+    socket.disconnect()
+  })
+
+  const waitForConnect = options.waitForConnect ?? true
+  if (waitForConnect && !socket.connected) {
+    const timeoutMs = options.timeoutMs ?? 2000
+    await new Promise<void>((resolve) => {
+      let settled = false
+      const settle = () => {
+        if (settled) return
+        settled = true
+        socket.off("connect", handleConnect)
+        socket.off("connect_error", handleError)
+        socket.off("error", handleError)
+        clearTimeout(timer)
+        resolve()
+      }
+
+      const handleConnect = () => {
+        settle()
+      }
+
+      const handleError = () => {
+        settle()
+      }
+
+      socket.on("connect", handleConnect)
+      socket.on("connect_error", handleError)
+      socket.on("error", handleError)
+      const timer = setTimeout(settle, timeoutMs)
+    })
+  }
+
+  return () => {
+    socket.emit("vue-devtools:disconnect")
+    socket.disconnect()
+  }
+}
diff --git a/packages/vue/src/devtools/highlight.ts b/packages/vue/src/devtools/highlight.ts
new file mode 100644
index 000000000..cb8994ea0
--- /dev/null
+++ b/packages/vue/src/devtools/highlight.ts
@@ -0,0 +1,125 @@
+import { Renderable, type CliRenderer, type OptimizedBuffer, RGBA } from "@opentui/core"
+import { HIGHLIGHT } from "./theme"
+
+function getTooltipPosition(
+  target: { x: number; y: number; width: number; height: number },
+  textLength: number,
+  screen: { width: number; height: number },
+): { x: number; y: number } {
+  const hasSpaceAbove = target.y > 0
+  const hasSpaceBelow = target.y + target.height < screen.height
+  const aboveY = target.y - 1
+  const belowY = target.y + target.height
+
+  const y = hasSpaceAbove ? aboveY : hasSpaceBelow ? belowY : target.y
+  const x = Math.max(0, Math.min(target.x, screen.width - textLength))
+
+  return { x, y }
+}
+
+export interface HighlightController {
+  highlight(renderable: Renderable | null): void
+  setInspectMode(enabled: boolean): void
+  clear(): void
+  destroy(): void
+}
+
+const CHROMATIC_LEFT = RGBA.fromInts(255, 80, 100, 200)
+const CHROMATIC_RIGHT = RGBA.fromInts(80, 220, 255, 200)
+const BORDER_COLOR = RGBA.fromInts(79, 192, 141, 220)
+
+export function createHighlightOverlay(cliRenderer: CliRenderer): HighlightController {
+  let target: Renderable | null = null
+  let inspectMode = false
+  let destroyed = false
+
+  const render = (buffer: OptimizedBuffer): void => {
+    if (destroyed || !target || target.isDestroyed) return
+
+    const { x, y, width: w, height: h } = target
+    const screenW = cliRenderer.width
+    const screenH = cliRenderer.height
+
+    const outerX1 = Math.max(0, x - 1)
+    const outerY1 = Math.max(0, y - 1)
+    const outerX2 = Math.min(screenW - 1, x + w)
+    const outerY2 = Math.min(screenH - 1, y + h)
+
+    const isOnScreen = (px: number, py: number) => px >= 0 && px < screenW && py >= 0 && py < screenH
+
+    const drawChromaticCorner = (cx: number, cy: number, char: string, isLeftSide: boolean) => {
+      if (!isOnScreen(cx, cy)) return
+      buffer.drawText(char, cx, cy, isLeftSide ? CHROMATIC_LEFT : CHROMATIC_RIGHT, undefined)
+    }
+
+    drawChromaticCorner(outerX1, outerY1, "┌", true)
+    drawChromaticCorner(outerX2, outerY1, "┐", false)
+    drawChromaticCorner(outerX1, outerY2, "└", true)
+    drawChromaticCorner(outerX2, outerY2, "┘", false)
+
+    for (let dx = outerX1 + 1; dx < outerX2; dx++) {
+      if (isOnScreen(dx, outerY1)) {
+        buffer.drawText("─", dx, outerY1, BORDER_COLOR, undefined)
+      }
+      if (isOnScreen(dx, outerY2)) {
+        buffer.drawText("─", dx, outerY2, BORDER_COLOR, undefined)
+      }
+    }
+
+    for (let dy = outerY1 + 1; dy < outerY2; dy++) {
+      if (isOnScreen(outerX1, dy)) {
+        buffer.drawText("│", outerX1, dy, BORDER_COLOR, undefined)
+      }
+      if (isOnScreen(outerX2, dy)) {
+        buffer.drawText("│", outerX2, dy, BORDER_COLOR, undefined)
+      }
+    }
+
+    const text = `${target.constructor.name} #${target.id} (${w}x${h})`
+    const tooltip = getTooltipPosition(
+      { x: outerX1, y: outerY1, width: outerX2 - outerX1 + 1, height: outerY2 - outerY1 + 1 },
+      text.length,
+      { width: screenW, height: screenH },
+    )
+    if (tooltip.y >= 0 && tooltip.y < screenH && tooltip.x >= 0) {
+      buffer.drawText(text, tooltip.x, tooltip.y, HIGHLIGHT.tooltipFg, HIGHLIGHT.tooltipBg)
+    }
+  }
+
+  cliRenderer.root.onMouse = (event) => {
+    if (destroyed || !inspectMode) return
+    if (event.type === "move" || event.type === "drag") {
+      if (event.target !== target) {
+        target = event.target
+        cliRenderer.requestRender()
+      }
+    }
+  }
+
+  cliRenderer.addPostProcessFn(render)
+
+  return {
+    highlight: (r) => {
+      if (destroyed) return
+      target = r
+      cliRenderer.requestRender()
+    },
+    setInspectMode: (on) => {
+      if (destroyed) return
+      inspectMode = on
+      cliRenderer.requestRender()
+    },
+    clear: () => {
+      if (destroyed) return
+      target = null
+      cliRenderer.requestRender()
+    },
+    destroy: () => {
+      if (destroyed) return
+      destroyed = true
+      target = null
+      cliRenderer.removePostProcessFn(render)
+      cliRenderer.root.onMouse = undefined
+    },
+  }
+}
diff --git a/packages/vue/src/devtools/index.ts b/packages/vue/src/devtools/index.ts
new file mode 100644
index 000000000..ed7d1b185
--- /dev/null
+++ b/packages/vue/src/devtools/index.ts
@@ -0,0 +1,265 @@
+import { setupDevtoolsPlugin } from "@vue/devtools-api"
+import { CliRenderEvents, LayoutEvents, type CliRenderer } from "@opentui/core"
+import type { App } from "vue"
+import { buildRenderableTree, getRenderableState, findRenderableById } from "./inspector"
+import { setupTimeline } from "./timeline"
+import { createHighlightOverlay, type HighlightController } from "./highlight"
+
+const PLUGIN_ID = "dev.opentui.vue"
+const INSPECTOR_ID = "opentui:renderables"
+const COMPONENT_ATTRS_TYPE = "Element Attrs"
+const SKIP_ATTR_KEYS = new Set(["ref", "key"])
+
+function formatAttrValue(value: unknown): unknown {
+  if (value === null || value === undefined) return value
+  if (typeof value === "function") return "(function)"
+  if (typeof value === "symbol") return value.toString()
+  if (typeof value === "object") {
+    const ctorName = (value as object).constructor?.name
+    if (ctorName && (ctorName.endsWith("Renderable") || ctorName === "RGBA")) {
+      return `[${ctorName}]`
+    }
+  }
+  return value
+}
+
+function isOpenTUIComponent(instance: unknown): boolean {
+  const name = ((instance as Record<string, unknown>)?.type as Record<string, unknown>)?.name
+  if (typeof name !== "string") return false
+  const lowerName = name.toLowerCase()
+  return lowerName.endsWith("renderable") || lowerName === "portal"
+}
+
+export interface OpenTUIDevtoolsSettings {
+  autoRefresh: boolean
+  showHiddenNodes: boolean
+  highlightOnSelect: boolean
+}
+
+const DEFAULT_SETTINGS: OpenTUIDevtoolsSettings = {
+  autoRefresh: true,
+  showHiddenNodes: true,
+  highlightOnSelect: true,
+}
+
+interface DevtoolsApi {
+  sendInspectorTree(inspectorId: string): void
+  sendInspectorState(inspectorId: string): void
+  selectInspectorNode(inspectorId: string, nodeId: string): void
+  getSettings?(): Record<string, unknown>
+}
+
+export async function initializeDevtools() {
+  const shouldEnableDevtools = process.env["NODE_ENV"] === "development" || process.env["VUE_DEVTOOLS"] === "true"
+
+  let devtoolsCleanup: (() => void) | null = null
+  if (shouldEnableDevtools) {
+    try {
+      const { connectToDevTools } = await import("./connect")
+      const connect = process.env["OPENTUI_DEVTOOLS_DISABLE_SOCKET"] !== "true"
+      const host = process.env["OPENTUI_DEVTOOLS_HOST"] || "http://localhost"
+      const port = parseInt(process.env["OPENTUI_DEVTOOLS_PORT"] || "8098", 10)
+      const waitForConnect = process.env["OPENTUI_DEVTOOLS_WAIT_FOR_CONNECT"] !== "false"
+      devtoolsCleanup = await connectToDevTools(host, port, { connect, waitForConnect })
+    } catch (e) {
+      if (process.env["NODE_ENV"] === "development") {
+        console.warn("[OpenTUI] Failed to initialize DevTools hook:", e)
+      }
+    }
+  }
+
+  return { shouldEnableDevtools, devtoolsCleanup }
+}
+
+export function setupOpenTUIDevtools(app: App, cliRenderer: CliRenderer): void {
+  setupDevtoolsPlugin(
+    {
+      id: PLUGIN_ID,
+      label: "OpenTUI",
+      packageName: "@opentui/vue",
+      homepage: "https://github.com/sst/opentui",
+      app,
+      enableEarlyProxy: true,
+      componentStateTypes: ["OpenTUI Renderable", COMPONENT_ATTRS_TYPE],
+      settings: {
+        autoRefresh: {
+          label: "Auto Refresh Tree",
+          type: "boolean",
+          defaultValue: DEFAULT_SETTINGS.autoRefresh,
+          description: "Automatically refresh the tree when layout changes",
+        },
+        showHiddenNodes: {
+          label: "Show Hidden Nodes",
+          type: "boolean",
+          defaultValue: DEFAULT_SETTINGS.showHiddenNodes,
+          description: "Show nodes that are not visible in the tree",
+        },
+        highlightOnSelect: {
+          label: "Highlight on Select",
+          type: "boolean",
+          defaultValue: DEFAULT_SETTINGS.highlightOnSelect,
+          description: "Highlight the selected element in the terminal",
+        },
+      },
+    },
+    (api) => {
+      const devApi = api as unknown as DevtoolsApi
+      const cleanups: (() => void)[] = []
+      const addCleanup = (fn: () => void) => cleanups.push(fn)
+
+      const getSettings = (): OpenTUIDevtoolsSettings => {
+        const s = devApi.getSettings?.() ?? {}
+        return {
+          autoRefresh: (s.autoRefresh as boolean) ?? DEFAULT_SETTINGS.autoRefresh,
+          showHiddenNodes: (s.showHiddenNodes as boolean) ?? DEFAULT_SETTINGS.showHiddenNodes,
+          highlightOnSelect: (s.highlightOnSelect as boolean) ?? DEFAULT_SETTINGS.highlightOnSelect,
+        }
+      }
+
+      const refresh = () => {
+        devApi.sendInspectorTree(INSPECTOR_ID)
+        devApi.sendInspectorState(INSPECTOR_ID)
+      }
+
+      const refreshIfAutoEnabled = () => {
+        if (getSettings().autoRefresh) refresh()
+      }
+
+      const highlightController: HighlightController = createHighlightOverlay(cliRenderer)
+      addCleanup(() => highlightController.destroy())
+
+      addCleanup(setupTimeline(api, cliRenderer))
+
+      api.addInspector({
+        id: INSPECTOR_ID,
+        label: "OpenTUI Renderables",
+        icon: "account_tree",
+        treeFilterPlaceholder: "Search by ID or type...",
+        actions: [
+          {
+            icon: "gps_fixed",
+            tooltip: "Pick element in terminal",
+            action: () => {
+              highlightController.setInspectMode(true)
+              const previousHandler = cliRenderer.root.onMouse
+              cliRenderer.root.onMouse = (event) => {
+                previousHandler?.(event)
+                if (event.type === "up" && event.target) {
+                  highlightController.setInspectMode(false)
+                  highlightController.highlight(event.target)
+                  devApi.selectInspectorNode(INSPECTOR_ID, event.target.id)
+                  cliRenderer.root.onMouse = previousHandler
+                }
+              }
+            },
+          },
+        ],
+        nodeActions: [
+          {
+            icon: "visibility",
+            tooltip: "Toggle visibility",
+            action: (nodeId: string) => {
+              const node = findRenderableById(cliRenderer, nodeId)
+              if (node) {
+                node.visible = !node.visible
+                refresh()
+              }
+            },
+          },
+          {
+            icon: "center_focus_strong",
+            tooltip: "Focus element",
+            action: (nodeId: string) => {
+              const node = findRenderableById(cliRenderer, nodeId)
+              if (node?.focusable) {
+                node.focus()
+                refresh()
+              }
+            },
+          },
+          {
+            icon: "highlight",
+            tooltip: "Highlight element",
+            action: (nodeId: string) => {
+              highlightController.highlight(findRenderableById(cliRenderer, nodeId) ?? null)
+            },
+          },
+        ],
+      })
+
+      api.on.getInspectorTree((payload) => {
+        if (payload.inspectorId !== INSPECTOR_ID) {
+          highlightController.clear()
+          return
+        }
+        if (cliRenderer.root) {
+          payload.rootNodes = [buildRenderableTree(cliRenderer.root, payload.filter)]
+        }
+      })
+
+      api.on.getInspectorState((payload) => {
+        if (payload.inspectorId !== INSPECTOR_ID) {
+          highlightController.clear()
+          return
+        }
+        const renderable = findRenderableById(cliRenderer, payload.nodeId)
+        if (!renderable) return
+
+        payload.state = getRenderableState(renderable)
+        if (getSettings().highlightOnSelect) {
+          highlightController.highlight(renderable)
+        }
+      })
+
+      api.on.editInspectorState((payload) => {
+        if (payload.inspectorId !== INSPECTOR_ID || payload.path.length === 0) return
+        const renderable = findRenderableById(cliRenderer, payload.nodeId)
+        const propName = payload.path[payload.path.length - 1]
+        if (renderable && propName && propName in renderable) {
+          ;(renderable as unknown as Record<string, unknown>)[propName] = payload.state.value
+          refresh()
+        }
+      })
+
+      const root = cliRenderer.root
+      const layoutEvents = [LayoutEvents.LAYOUT_CHANGED, LayoutEvents.ADDED, LayoutEvents.REMOVED]
+      layoutEvents.forEach((event) => {
+        root.on(event, refreshIfAutoEnabled)
+        addCleanup(() => root.off(event, refreshIfAutoEnabled))
+      })
+
+      api.on.setPluginSettings?.((payload) => {
+        if (payload.pluginId === PLUGIN_ID) refresh()
+      })
+
+      api.on.inspectComponent((payload) => {
+        const instance = payload.componentInstance
+        if (!instance?.attrs || !isOpenTUIComponent(instance)) return
+
+        const attrs = instance.attrs as Record<string, unknown>
+        const attrKeys = Object.keys(attrs)
+        if (attrKeys.length === 0) return
+
+        for (const key of attrKeys) {
+          if (key.startsWith("on") || SKIP_ATTR_KEYS.has(key)) continue
+
+          payload.instanceData.state.push({
+            type: COMPONENT_ATTRS_TYPE,
+            key,
+            value: formatAttrValue(attrs[key]),
+            editable: false,
+          })
+        }
+      })
+
+      cliRenderer.once(CliRenderEvents.DESTROY, () => {
+        cleanups.forEach((fn) => fn())
+        cleanups.length = 0
+      })
+    },
+  )
+}
+
+export { buildRenderableTree, getRenderableState, findRenderableById } from "./inspector"
+export { createHighlightOverlay, type HighlightController } from "./highlight"
+export { TIMELINE_RENDER, TIMELINE_LAYOUT, TIMELINE_EVENTS } from "./timeline"
diff --git a/packages/vue/src/devtools/inspector.ts b/packages/vue/src/devtools/inspector.ts
new file mode 100644
index 000000000..557e491e6
--- /dev/null
+++ b/packages/vue/src/devtools/inspector.ts
@@ -0,0 +1,250 @@
+import type { Renderable, CliRenderer } from "@opentui/core"
+import { RGBA, rgbToHex, Yoga, TextRenderable, BoxRenderable, SelectRenderable } from "@opentui/core"
+import { TAG_COLORS } from "./theme"
+import { CommentNode, WhiteSpaceNode } from "../nodes"
+import { GhostTextRenderable } from "../noOps"
+
+const { Edge } = Yoga
+
+const isTextRenderable = (r: Renderable): r is TextRenderable => r instanceof TextRenderable
+
+const isBoxRenderable = (r: Renderable): r is BoxRenderable => r instanceof BoxRenderable
+
+const isSelectRenderable = (r: Renderable): r is SelectRenderable => r instanceof SelectRenderable
+
+interface CustomInspectorNode {
+  id: string
+  label: string
+  children?: CustomInspectorNode[]
+  tags?: InspectorNodeTag[]
+}
+
+interface InspectorNodeTag {
+  label: string
+  textColor: number
+  backgroundColor: number
+  tooltip?: string
+}
+
+interface StateField {
+  key: string
+  value: unknown
+  editable?: boolean
+}
+
+export interface CustomInspectorState {
+  [section: string]: StateField[]
+}
+
+function getDisplayName(renderable: Renderable): string {
+  const name = renderable.constructor.name
+  const baseName = name.endsWith("Renderable") ? name.slice(0, -10) : name
+  return baseName.toLowerCase()
+}
+
+function matchesFilter(renderable: Renderable, filter: string): boolean {
+  const lowerFilter = filter.toLowerCase()
+  const displayName = getDisplayName(renderable).toLowerCase()
+  const id = renderable.id.toLowerCase()
+  return displayName.includes(lowerFilter) || id.includes(lowerFilter)
+}
+
+function getFlexDirectionString(renderable: Renderable): string {
+  const yogaNode = renderable.getLayoutNode()
+  const direction = yogaNode.getFlexDirection()
+
+  const FLEX_DIRECTION_MAP: Record<number, string> = {
+    0: "column",
+    1: "column-reverse",
+    2: "row",
+    3: "row-reverse",
+  }
+
+  return FLEX_DIRECTION_MAP[direction] ?? "column"
+}
+
+function formatColor(color: RGBA | undefined): string {
+  if (!color) return "transparent"
+  if (color.a === 0) return "transparent"
+  return rgbToHex(color)
+}
+
+function formatPadding(renderable: Renderable): string {
+  const yogaNode = renderable.getLayoutNode()
+  const top = yogaNode.getComputedPadding(Edge.Top)
+  const right = yogaNode.getComputedPadding(Edge.Right)
+  const bottom = yogaNode.getComputedPadding(Edge.Bottom)
+  const left = yogaNode.getComputedPadding(Edge.Left)
+
+  if (top === right && right === bottom && bottom === left) {
+    return String(top)
+  }
+  return `${top} ${right} ${bottom} ${left}`
+}
+
+function formatMargin(renderable: Renderable): string {
+  const yogaNode = renderable.getLayoutNode()
+  const top = yogaNode.getComputedMargin(Edge.Top)
+  const right = yogaNode.getComputedMargin(Edge.Right)
+  const bottom = yogaNode.getComputedMargin(Edge.Bottom)
+  const left = yogaNode.getComputedMargin(Edge.Left)
+
+  if (top === right && right === bottom && bottom === left) {
+    return String(top)
+  }
+  return `${top} ${right} ${bottom} ${left}`
+}
+
+function formatBorder(renderable: Renderable): string {
+  const yogaNode = renderable.getLayoutNode()
+  const top = yogaNode.getComputedBorder(Edge.Top)
+  const right = yogaNode.getComputedBorder(Edge.Right)
+  const bottom = yogaNode.getComputedBorder(Edge.Bottom)
+  const left = yogaNode.getComputedBorder(Edge.Left)
+
+  if (top === right && right === bottom && bottom === left) {
+    return String(top)
+  }
+  return `${top} ${right} ${bottom} ${left}`
+}
+
+const isInternalNode = (r: Renderable): boolean =>
+  r instanceof CommentNode || r instanceof WhiteSpaceNode || r instanceof GhostTextRenderable
+
+export function buildRenderableTree(renderable: Renderable, filter?: string): CustomInspectorNode {
+  const displayName = getDisplayName(renderable)
+  const children = renderable.getChildren() as Renderable[]
+
+  const tags: CustomInspectorNode["tags"] = [
+    {
+      label: renderable.id,
+      ...TAG_COLORS.id,
+    },
+    {
+      label: `${renderable.width}x${renderable.height}`,
+      ...TAG_COLORS.size,
+    },
+  ]
+
+  if (!renderable.visible) {
+    tags.push({
+      label: "hidden",
+      ...TAG_COLORS.hidden,
+    })
+  }
+
+  if (renderable.focused) {
+    tags.push({
+      label: "focused",
+      ...TAG_COLORS.focused,
+    })
+  }
+
+  const filteredChildren: CustomInspectorNode[] = []
+  for (const child of children) {
+    if (isInternalNode(child)) continue
+
+    const childNode = buildRenderableTree(child, filter)
+    const childMatchesFilter = !filter || matchesFilter(child, filter) || (childNode.children?.length ?? 0) > 0
+    if (childMatchesFilter) {
+      filteredChildren.push(childNode)
+    }
+  }
+
+  const matchesSelf = !filter || matchesFilter(renderable, filter)
+  const hasMatchingChildren = filteredChildren.length > 0
+
+  return {
+    id: renderable.id,
+    label: displayName,
+    tags,
+    children: matchesSelf || hasMatchingChildren ? filteredChildren : [],
+  }
+}
+
+export function getRenderableState(renderable: Renderable): CustomInspectorState {
+  const yogaNode = renderable.getLayoutNode()
+  const children = renderable.getChildren()
+
+  const state: CustomInspectorState = {
+    Layout: [
+      { key: "id", value: renderable.id, editable: false },
+      { key: "x", value: renderable.x, editable: false },
+      { key: "y", value: renderable.y, editable: false },
+      { key: "width", value: renderable.width, editable: true },
+      { key: "height", value: renderable.height, editable: true },
+      { key: "zIndex", value: renderable.zIndex, editable: true },
+      { key: "padding", value: formatPadding(renderable), editable: false },
+      { key: "margin", value: formatMargin(renderable), editable: false },
+      { key: "border", value: formatBorder(renderable), editable: false },
+    ],
+
+    Visibility: [
+      { key: "visible", value: renderable.visible, editable: true },
+      { key: "opacity", value: renderable.opacity, editable: true },
+    ],
+
+    "Flex Layout": [
+      { key: "flexDirection", value: getFlexDirectionString(renderable), editable: false },
+      { key: "flexGrow", value: yogaNode.getFlexGrow(), editable: false },
+      { key: "flexShrink", value: yogaNode.getFlexShrink(), editable: false },
+    ],
+
+    State: [
+      { key: "focused", value: renderable.focused, editable: false },
+      { key: "focusable", value: renderable.focusable, editable: false },
+      { key: "isDirty", value: renderable.isDirty, editable: false },
+      { key: "isDestroyed", value: renderable.isDestroyed, editable: false },
+    ],
+
+    Children: [
+      { key: "count", value: children.length, editable: false },
+      { key: "childIds", value: children.map((child) => child.id), editable: false },
+    ],
+  }
+
+  if (isTextRenderable(renderable)) {
+    state["Content"] = [{ key: "text", value: renderable.plainText, editable: false }]
+
+    state["Text Styles"] = [
+      { key: "fg", value: formatColor(renderable.fg), editable: false },
+      { key: "bg", value: formatColor(renderable.bg), editable: false },
+      { key: "wrapMode", value: renderable.wrapMode, editable: false },
+      { key: "lineCount", value: renderable.lineCount, editable: false },
+      { key: "selectable", value: renderable.selectable, editable: false },
+    ]
+  }
+
+  if (isBoxRenderable(renderable)) {
+    state["Box Styles"] = [
+      { key: "backgroundColor", value: formatColor(renderable.backgroundColor), editable: false },
+      { key: "borderStyle", value: renderable.borderStyle, editable: false },
+      { key: "borderColor", value: formatColor(renderable.borderColor), editable: false },
+      { key: "focusedBorderColor", value: formatColor(renderable.focusedBorderColor), editable: false },
+      { key: "title", value: renderable.title ?? "(none)", editable: false },
+      { key: "titleAlignment", value: renderable.titleAlignment, editable: false },
+    ]
+  }
+
+  if (isSelectRenderable(renderable)) {
+    const selectedOption = renderable.getSelectedOption()
+    state.State!.push(
+      { key: "value", value: selectedOption ? selectedOption.name : null, editable: false },
+      { key: "selectedIndex", value: renderable.getSelectedIndex(), editable: false },
+      { key: "optionData", value: selectedOption ?? null, editable: false },
+      { key: "optionsCount", value: renderable.options.length, editable: false },
+      { key: "wrapSelection", value: renderable.wrapSelection, editable: false },
+      { key: "showDescription", value: renderable.showDescription, editable: false },
+      { key: "showScrollIndicator", value: renderable.showScrollIndicator, editable: false },
+    )
+  }
+
+  return state
+}
+
+export function findRenderableById(cliRenderer: CliRenderer, id: string): Renderable | undefined {
+  if (cliRenderer.root.id === id) {
+    return cliRenderer.root
+  }
+  return cliRenderer.root.findDescendantById(id)
+}
diff --git a/packages/vue/src/devtools/theme.ts b/packages/vue/src/devtools/theme.ts
new file mode 100644
index 000000000..36deb050d
--- /dev/null
+++ b/packages/vue/src/devtools/theme.ts
@@ -0,0 +1,23 @@
+import { RGBA } from "@opentui/core"
+
+const hexToRGBA = (hex: number, alpha = 255) => RGBA.fromInts((hex >> 16) & 0xff, (hex >> 8) & 0xff, hex & 0xff, alpha)
+
+export const VUE_COLORS = {
+  primary: 0x4fc08d,
+  secondary: 0x42b883,
+  dark: 0x35495e,
+} as const
+
+export const TAG_COLORS = {
+  id: { textColor: 0x6b7280, backgroundColor: 0xf3f4f6 },
+  size: { textColor: 0x059669, backgroundColor: 0xd1fae5 },
+  hidden: { textColor: 0xdc2626, backgroundColor: 0xfee2e2 },
+  focused: { textColor: 0x2563eb, backgroundColor: 0xdbeafe },
+} as const
+
+export const HIGHLIGHT = {
+  border: hexToRGBA(VUE_COLORS.primary),
+  background: hexToRGBA(VUE_COLORS.primary, 40),
+  tooltipBg: hexToRGBA(VUE_COLORS.primary, 230),
+  tooltipFg: RGBA.fromInts(0, 0, 0, 255),
+} as const
diff --git a/packages/vue/src/devtools/timeline.ts b/packages/vue/src/devtools/timeline.ts
new file mode 100644
index 000000000..f37596d6d
--- /dev/null
+++ b/packages/vue/src/devtools/timeline.ts
@@ -0,0 +1,92 @@
+import { LayoutEvents, type CliRenderer, type Renderable } from "@opentui/core"
+import { VUE_COLORS } from "./theme"
+
+export const TIMELINE_RENDER = "opentui:render"
+export const TIMELINE_LAYOUT = "opentui:layout"
+export const TIMELINE_EVENTS = "opentui:events"
+
+interface TimelineApi {
+  now(): number
+  addTimelineLayer(options: { id: string; label: string; color: number }): void
+  addTimelineEvent(options: {
+    layerId: string
+    event: { time: number; title?: string; subtitle?: string; data?: Record<string, unknown> }
+  }): void
+  on: {
+    inspectTimelineEvent(
+      handler: (payload: {
+        layerId: string
+        event: { time: number; title?: string; subtitle?: string; data?: Record<string, unknown> }
+        data: unknown
+      }) => void,
+    ): void
+  }
+}
+
+const LAYERS = [
+  { id: TIMELINE_RENDER, label: "OpenTUI Render", color: VUE_COLORS.primary },
+  { id: TIMELINE_LAYOUT, label: "OpenTUI Layout", color: VUE_COLORS.secondary },
+  { id: TIMELINE_EVENTS, label: "OpenTUI Events", color: VUE_COLORS.dark },
+] as const
+
+export function setupTimeline(api: unknown, cliRenderer: CliRenderer): () => void {
+  const timelineApi = api as TimelineApi
+  const cleanups: (() => void)[] = []
+
+  LAYERS.forEach((layer) => timelineApi.addTimelineLayer(layer))
+
+  timelineApi.on.inspectTimelineEvent((payload) => {
+    const isOurLayer = LAYERS.some((l) => l.id === payload.layerId)
+    if (!isOurLayer) return
+
+    payload.data = {
+      ...payload.event.data,
+      time: payload.event.time,
+      title: payload.event.title,
+      subtitle: payload.event.subtitle,
+    }
+  })
+
+  const emit = (layerId: string, title: string, subtitle: string, data?: Record<string, unknown>) => {
+    timelineApi.addTimelineEvent({ layerId, event: { time: timelineApi.now(), title, subtitle, data } })
+  }
+
+  let frameCount = 0
+  const frameCallback = async (deltaTime: number): Promise<void> => {
+    frameCount++
+    const fps = deltaTime > 0 ? Math.round(1000 / deltaTime) : 0
+    emit(TIMELINE_RENDER, "Frame Rendered", `${deltaTime.toFixed(1)}ms`, {
+      frameTime: deltaTime,
+      fps,
+      nodeCount: countRenderables(cliRenderer.root),
+      frameNumber: frameCount,
+    })
+  }
+
+  cliRenderer.setFrameCallback(frameCallback)
+  cleanups.push(() => cliRenderer.removeFrameCallback(frameCallback))
+
+  const root = cliRenderer.root
+
+  const handlers = {
+    [LayoutEvents.LAYOUT_CHANGED]: () =>
+      emit(TIMELINE_LAYOUT, "Layout Changed", root.id, { rootId: root.id, width: root.width, height: root.height }),
+    [LayoutEvents.ADDED]: (child: Renderable) =>
+      emit(TIMELINE_LAYOUT, "Node Added", child?.id ?? "unknown", { nodeId: child?.id, parentId: root.id }),
+    [LayoutEvents.REMOVED]: (child: Renderable) =>
+      emit(TIMELINE_LAYOUT, "Node Removed", child?.id ?? "unknown", { nodeId: child?.id, parentId: root.id }),
+    [LayoutEvents.RESIZED]: (d: { width: number; height: number }) =>
+      emit(TIMELINE_LAYOUT, "Root Resized", `${d.width}x${d.height}`, d),
+  } as const
+
+  Object.entries(handlers).forEach(([event, handler]) => {
+    root.on(event, handler as (...args: unknown[]) => void)
+    cleanups.push(() => root.off(event, handler as (...args: unknown[]) => void))
+  })
+
+  return () => cleanups.forEach((fn) => fn())
+}
+
+function countRenderables(renderable: Renderable): number {
+  return 1 + renderable.getChildren().reduce((sum, child) => sum + countRenderables(child as Renderable), 0)
+}
diff --git a/packages/vue/src/elements.ts b/packages/vue/src/elements.ts
index 2bdec94a3..bc751f2b9 100644
--- a/packages/vue/src/elements.ts
+++ b/packages/vue/src/elements.ts
@@ -1,14 +1,98 @@
 import {
   ASCIIFontRenderable,
   BoxRenderable,
+  CodeRenderable,
+  DiffRenderable,
   InputRenderable,
+  LineNumberRenderable,
+  ScrollBoxRenderable,
   SelectRenderable,
   TabSelectRenderable,
+  TextareaRenderable,
+  TextAttributes,
+  TextNodeRenderable,
   TextRenderable,
-  ScrollBoxRenderable,
+  type RenderContext,
+  type TextNodeOptions,
 } from "@opentui/core"
 
+class SpanRenderable extends TextNodeRenderable {
+  constructor(_ctx: RenderContext | null, options: TextNodeOptions) {
+    super(options)
+  }
+}
+
+export const textNodeKeys = [
+  "spanRenderable",
+  "bRenderable",
+  "strongRenderable",
+  "iRenderable",
+  "emRenderable",
+  "uRenderable",
+  "aRenderable",
+] as const
+export type TextNodeKey = (typeof textNodeKeys)[number]
+
+class TextModifierRenderable extends SpanRenderable {
+  constructor(_ctx: RenderContext | null, options: TextNodeOptions, modifier?: string) {
+    super(null, options)
+
+    // Set appropriate attributes based on modifier type
+    if (modifier === "b" || modifier === "strong") {
+      this.attributes = (this.attributes || 0) | TextAttributes.BOLD
+    } else if (modifier === "i" || modifier === "em") {
+      this.attributes = (this.attributes || 0) | TextAttributes.ITALIC
+    } else if (modifier === "u") {
+      this.attributes = (this.attributes || 0) | TextAttributes.UNDERLINE
+    }
+  }
+}
+
+export class BoldSpanRenderable extends TextModifierRenderable {
+  constructor(ctx: RenderContext | null, options: TextNodeOptions) {
+    super(ctx, options, "b")
+  }
+}
+
+export class ItalicSpanRenderable extends TextModifierRenderable {
+  constructor(ctx: RenderContext | null, options: TextNodeOptions) {
+    super(ctx, options, "i")
+  }
+}
+
+export class UnderlineSpanRenderable extends TextModifierRenderable {
+  constructor(ctx: RenderContext | null, options: TextNodeOptions) {
+    super(ctx, options, "u")
+  }
+}
+
+export class LineBreakRenderable extends SpanRenderable {
+  constructor(_ctx: RenderContext | null, options: TextNodeOptions) {
+    super(null, options)
+    this.add()
+  }
+
+  public override add(): number {
+    return super.add("\n")
+  }
+}
+
+export interface LinkOptions extends TextNodeOptions {
+  href: string
+}
+
+export class LinkRenderable extends SpanRenderable {
+  constructor(_ctx: RenderContext | null, options: LinkOptions) {
+    const linkOptions: TextNodeOptions = {
+      ...options,
+      link: { url: options.href },
+    }
+    super(null, linkOptions)
+  }
+}
+
 export const elements = {
+  // Existing components
   asciiFontRenderable: ASCIIFontRenderable,
   boxRenderable: BoxRenderable,
   inputRenderable: InputRenderable,
@@ -16,5 +100,19 @@ export const elements = {
   tabSelectRenderable: TabSelectRenderable,
   textRenderable: TextRenderable,
   scrollBoxRenderable: ScrollBoxRenderable,
+  // New components
+  codeRenderable: CodeRenderable,
+  diffRenderable: DiffRenderable,
+  lineNumberRenderable: LineNumberRenderable,
+  textareaRenderable: TextareaRenderable,
+  // Text modifiers
+  spanRenderable: SpanRenderable,
+  strongRenderable: BoldSpanRenderable,
+  bRenderable: BoldSpanRenderable,
+  emRenderable: ItalicSpanRenderable,
+  iRenderable: ItalicSpanRenderable,
+  uRenderable: UnderlineSpanRenderable,
+  brRenderable: LineBreakRenderable,
+  aRenderable: LinkRenderable,
 }
 export type Element = keyof typeof elements
diff --git a/packages/vue/src/noOps.ts b/packages/vue/src/noOps.ts
index 2eef1ec9a..b38653d9a 100644
--- a/packages/vue/src/noOps.ts
+++ b/packages/vue/src/noOps.ts
@@ -1,9 +1,66 @@
-import { Renderable, TextRenderable } from "@opentui/core"
-import { TextNode, type OpenTUINode, ChunkToTextNodeMap } from "./nodes"
+import {
+  Renderable,
+  StyledText,
+  TextNodeRenderable,
+  TextRenderable,
+  type RenderContext,
+  type TextChunk,
+  type TextOptions,
+} from "@opentui/core"
+import { TextNode, WhiteSpaceNode, CommentNode, type OpenTUINode, ChunkToTextNodeMap } from "./nodes"
 import { getNextId } from "./utils"
 
 const GHOST_NODE_TAG = "text-ghost" as const
 
+export class GhostTextRenderable extends TextRenderable {
+  constructor(ctx: RenderContext, options: TextOptions) {
+    super(ctx, options)
+  }
+}
+
+function isPlaceholderChunk(chunk: TextChunk): boolean {
+  return chunk.text === "" && !ChunkToTextNodeMap.has(chunk)
+}
+
+function isEffectivelyEmptyStyledText(styledText: StyledText): boolean {
+  if (styledText.chunks.length === 0) return true
+  return styledText.chunks.length === 1 && isPlaceholderChunk(styledText.chunks[0]!)
+}
+
+function createPlaceholderStyledText(): StyledText {
+  return new StyledText([{ __isChunk: true, text: "" }])
+}
+
+function insertChunk(styledText: StyledText, chunk: TextChunk, index?: number): StyledText {
+  const chunks = styledText.chunks.slice()
+
+  if (index === undefined) {
+    chunks.push(chunk)
+  } else {
+    chunks.splice(index, 0, chunk)
+  }
+
+  return new StyledText(chunks)
+}
+
+function replaceChunk(styledText: StyledText, next: TextChunk, prev: TextChunk): StyledText {
+  const index = styledText.chunks.indexOf(prev)
+  if (index === -1) return insertChunk(styledText, next)
+
+  const chunks = styledText.chunks.slice()
+  chunks[index] = next
+  return new StyledText(chunks)
+}
+
+function removeChunk(styledText: StyledText, chunk: TextChunk): StyledText {
+  const index = styledText.chunks.indexOf(chunk)
+  if (index === -1) return styledText
+
+  const chunks = styledText.chunks.slice()
+  chunks.splice(index, 1)
+  return new StyledText(chunks)
+}
+
 function getOrCreateTextGhostNode(parent: Renderable, anchor?: OpenTUINode | null): TextRenderable {
   if (anchor instanceof TextNode && anchor.textParent) {
     return anchor.textParent
@@ -14,22 +71,56 @@ function getOrCreateTextGhostNode(parent: Renderable, anchor?: OpenTUINode | nul
   if (anchor instanceof Renderable) {
     const anchorIndex = children.findIndex((el) => el.id === anchor.id)
     const beforeAnchor = children[anchorIndex - 1]
-    if (beforeAnchor instanceof TextRenderable && beforeAnchor.id.startsWith(GHOST_NODE_TAG)) {
+    if (beforeAnchor instanceof GhostTextRenderable) {
       return beforeAnchor
     }
   }
 
   const lastChild = children.at(-1)
-  if (lastChild instanceof TextRenderable && lastChild.id.startsWith(GHOST_NODE_TAG)) {
+  if (lastChild instanceof GhostTextRenderable) {
     return lastChild
   }
 
-  const ghostNode = new TextRenderable(parent.ctx, { id: getNextId(GHOST_NODE_TAG) })
+  const ghostNode = new GhostTextRenderable(parent.ctx, { id: getNextId(GHOST_NODE_TAG) })
   insertNode(parent, ghostNode, anchor)
   return ghostNode
 }
 
 function insertTextNode(parent: OpenTUINode, node: TextNode, anchor?: OpenTUINode | null): void {
+  if (parent instanceof TextNodeRenderable) {
+    const textNodeRenderable =
+      node.nodeRenderable ??
+      new TextNodeRenderable({
+        id: node.id,
+        fg: node.chunk.fg,
+        bg: node.chunk.bg,
+        attributes: node.chunk.attributes,
+        link: node.chunk.link,
+      })
+
+    if (!node.nodeRenderable) {
+      textNodeRenderable.add(node.chunk.text)
+      node.nodeRenderable = textNodeRenderable
+    }
+
+    node.parent = parent
+
+    const normalizedAnchor =
+      anchor instanceof TextNode
+        ? (anchor.nodeRenderable ?? null)
+        : anchor instanceof TextNodeRenderable
+          ? anchor
+          : null
+
+    if (normalizedAnchor) {
+      parent.insertBefore(textNodeRenderable, normalizedAnchor)
+    } else {
+      parent.add(textNodeRenderable)
+    }
+
+    return
+  }
+
   if (!(parent instanceof Renderable)) {
     console.warn(`[WARN] Attempted to attach text node ${node.id} to a non-renderable parent ${parent.id}.`)
     return
@@ -51,13 +142,14 @@ function insertTextNode(parent: OpenTUINode, node: TextNode, anchor?: OpenTUINod
       console.warn(`[WARN] TextNode anchor not found for node ${node.id}.`)
       return
     }
-    styledText = styledText.insert(node.chunk, anchorIndex)
+    styledText = insertChunk(styledText, node.chunk, anchorIndex)
   } else {
-    const firstChunk = textParent.content.chunks[0]
-    if (firstChunk && !ChunkToTextNodeMap.has(firstChunk)) {
-      styledText = styledText.replace(node.chunk, firstChunk)
+    const chunks = textParent.content.chunks
+    const firstChunk = chunks.length > 0 ? chunks[0] : undefined
+    if (firstChunk && isPlaceholderChunk(firstChunk)) {
+      styledText = replaceChunk(styledText, node.chunk, firstChunk)
     } else {
-      styledText = styledText.insert(node.chunk)
+      styledText = insertChunk(styledText, node.chunk)
     }
   }
 
@@ -67,24 +159,59 @@ function insertTextNode(parent: OpenTUINode, node: TextNode, anchor?: OpenTUINod
 }
 
 function removeTextNode(parent: OpenTUINode, node: TextNode): void {
+  if (parent instanceof TextNodeRenderable) {
+    ChunkToTextNodeMap.delete(node.chunk)
+
+    if (node.nodeRenderable) {
+      try {
+        parent.remove(node.nodeRenderable.id)
+      } catch { }
+    }
+
+    node.nodeRenderable = undefined
+    return
+  }
+
   if (!(parent instanceof Renderable)) {
     ChunkToTextNodeMap.delete(node.chunk)
     return
   }
 
-  if (parent === node.textParent && parent instanceof TextRenderable) {
+  const textParent = node.textParent
+  if (!textParent) {
     ChunkToTextNodeMap.delete(node.chunk)
-    parent.content = parent.content.remove(node.chunk)
-  } else if (node.textParent) {
+    return
+  }
+
+  if (parent === textParent && parent instanceof TextRenderable) {
     ChunkToTextNodeMap.delete(node.chunk)
-    let styledText = node.textParent.content
-    styledText = styledText.remove(node.chunk)
+    const next = removeChunk(parent.content, node.chunk)
 
-    if (styledText.chunks.length > 0) {
-      node.textParent.content = styledText
+    if (parent instanceof GhostTextRenderable && isEffectivelyEmptyStyledText(next)) {
+      const container = parent.parent
+      if (container) {
+        container.remove(parent.id)
+      }
+      parent.destroyRecursively()
+      node.textParent = undefined
+      return
+    }
+
+    parent.content = isEffectivelyEmptyStyledText(next) ? createPlaceholderStyledText() : next
+  } else {
+    ChunkToTextNodeMap.delete(node.chunk)
+    let styledText = textParent.content
+    styledText = removeChunk(styledText, node.chunk)
+
+    if (!isEffectivelyEmptyStyledText(styledText)) {
+      textParent.content = styledText
     } else {
-      node.parent?.remove(node.textParent.id)
-      node.textParent.destroyRecursively()
+      const container = textParent.parent
+      if (container) {
+        container.remove(textParent.id)
+      }
+      textParent.destroyRecursively()
+      node.textParent = undefined
     }
   }
 }
@@ -94,11 +221,46 @@ export function insertNode(parent: OpenTUINode, node: OpenTUINode, anchor?: Open
     return insertTextNode(parent, node, anchor)
   }
 
+  if (parent instanceof TextNodeRenderable) {
+    if (!(node instanceof TextNodeRenderable)) {
+      console.warn(`[WARN] Attempted to insert node ${node.id} into a text-node parent ${parent.id}.`)
+      return
+    }
+
+    const normalizedAnchor =
+      anchor instanceof TextNode
+        ? (anchor.nodeRenderable ?? null)
+        : anchor instanceof TextNodeRenderable
+          ? anchor
+          : null
+
+    if (normalizedAnchor) {
+      parent.insertBefore(node, normalizedAnchor)
+    } else {
+      parent.add(node)
+    }
+
+    return
+  }
+
   if (!(parent instanceof Renderable)) {
     console.warn(`[WARN] Attempted to insert node ${node.id} into a non-renderable parent ${parent.id}.`)
     return
   }
 
+  // TextRenderable.add() delegates to TextNodeRenderable.add() which only accepts
+  // strings, TextNodeRenderable instances, or StyledText instances.
+  // Skip non-compatible nodes like WhiteSpaceNode and CommentNode.
+  if (parent instanceof TextRenderable) {
+    if (node instanceof WhiteSpaceNode || node instanceof CommentNode) {
+      return
+    }
+    if (!(node instanceof TextNodeRenderable)) {
+      console.warn(`[WARN] Attempted to insert non-text node ${node.id} into TextRenderable ${parent.id}.`)
+      return
+    }
+  }
+
   if (anchor) {
     const anchorIndex = parent.getChildren().findIndex((el) => {
       if (anchor instanceof TextNode) {
@@ -117,6 +279,13 @@ export function removeNode(parent: OpenTUINode, node: OpenTUINode): void {
     return removeTextNode(parent, node)
   }
 
+  if (parent instanceof TextNodeRenderable && node instanceof TextNodeRenderable) {
+    try {
+      parent.remove(node.id)
+    } catch { }
+    return
+  }
+
   if (parent instanceof Renderable && node instanceof Renderable) {
     parent.remove(node.id)
     node.destroyRecursively()
diff --git a/packages/vue/src/nodes.ts b/packages/vue/src/nodes.ts
index 4deb8dcbd..830204853 100644
--- a/packages/vue/src/nodes.ts
+++ b/packages/vue/src/nodes.ts
@@ -1,4 +1,12 @@
-import { Renderable, TextRenderable, RootRenderable, type TextChunk, type CliRenderer } from "@opentui/core"
+import {
+  BaseRenderable,
+  Renderable,
+  RootRenderable,
+  TextNodeRenderable,
+  TextRenderable,
+  type CliRenderer,
+  type TextChunk,
+} from "@opentui/core"
 import { getNextId } from "./utils"
 import type { elements } from "./elements"
 
@@ -7,8 +15,9 @@ export const ChunkToTextNodeMap = new WeakMap<TextChunk, TextNode>()
 export class TextNode {
   id: string
   chunk: TextChunk
-  parent?: Renderable
+  parent?: BaseRenderable
   textParent?: TextRenderable
+  nodeRenderable?: TextNodeRenderable
 
   constructor(chunk: TextChunk) {
     this.id = getNextId("text-node")
@@ -22,6 +31,12 @@ export class WhiteSpaceNode extends Renderable {
   }
 }
 
-export type OpenTUINode = Renderable | TextNode
+export class CommentNode extends Renderable {
+  constructor(cliRenderer: CliRenderer) {
+    super(cliRenderer, { id: getNextId("comment"), visible: false, width: 0, height: 0 })
+  }
+}
+
+export type OpenTUINode = BaseRenderable | TextNode
 type ElementConstructor = (typeof elements)[keyof typeof elements]
 export type OpenTUIElement = InstanceType<ElementConstructor> | RootRenderable
diff --git a/packages/vue/src/renderer.ts b/packages/vue/src/renderer.ts
index ac45259ef..8110687b2 100644
--- a/packages/vue/src/renderer.ts
+++ b/packages/vue/src/renderer.ts
@@ -7,13 +7,22 @@ import {
   TabSelectRenderable,
   TabSelectRenderableEvents,
   TextRenderable,
+  TextareaRenderable,
   StyledText,
+  TextNodeRenderable,
   type TextChunk,
   Renderable,
   type CliRenderer,
 } from "@opentui/core"
 import { getNextId } from "./utils"
-import { type OpenTUINode, type OpenTUIElement, TextNode, WhiteSpaceNode, ChunkToTextNodeMap } from "./nodes"
+import {
+  type OpenTUINode,
+  type OpenTUIElement,
+  CommentNode,
+  TextNode,
+  WhiteSpaceNode,
+  ChunkToTextNodeMap,
+} from "./nodes"
 import { elements, type Element } from "./elements"
 import { insertNode, removeNode } from "./noOps"
 
@@ -29,22 +38,27 @@ export function createOpenTUIRenderer(cliRenderer: CliRenderer) {
       typeof value === "object" && "__isChunk" in value
         ? value
         : {
-            __isChunk: true,
-            text: `${value}`,
-          }
+          __isChunk: true,
+          text: `${value}`,
+        }
     const textNode = new TextNode(chunk)
     ChunkToTextNodeMap.set(chunk, textNode)
     return textNode
   }
 
   return createRenderer<OpenTUINode, OpenTUIElement>({
-    createElement(type: string, _isSVG: undefined, _anchor: any, props) {
+    createElement(
+      type: string,
+      _namespace?: string,
+      _isCustomizedBuiltIn?: string,
+      vnodeProps?: Record<string, any> | null,
+    ) {
       const RenderableClass = elements[type as Element]
       if (!RenderableClass) throw new Error(`${type} is not a valid element`)
 
       const id = getNextId(type)
       //we don't pass content directly, we handle it in patchProp
-      const { style = {}, content, ...options } = props || {}
+      const { style = {}, content, ...options } = vnodeProps || {}
       return new RenderableClass(cliRenderer, { id, ...style, ...options })
     },
 
@@ -65,10 +79,12 @@ export function createOpenTUIRenderer(cliRenderer: CliRenderer) {
 
       switch (key) {
         case "focused":
-          if (nextValue) {
-            el.focus()
-          } else {
-            el.blur()
+          if (el instanceof Renderable) {
+            if (nextValue) {
+              el.focus()
+            } else {
+              el.blur()
+            }
           }
           break
 
@@ -92,9 +108,11 @@ export function createOpenTUIRenderer(cliRenderer: CliRenderer) {
           break
 
         case "onSelect":
-          let selectEvent: SelectRenderableEvents.ITEM_SELECTED | undefined = undefined
+          let selectEvent: string | undefined = undefined
           if (el instanceof SelectRenderable) {
             selectEvent = SelectRenderableEvents.ITEM_SELECTED
+          } else if (el instanceof TabSelectRenderable) {
+            selectEvent = TabSelectRenderableEvents.ITEM_SELECTED
           }
           if (selectEvent) {
             if (prevValue) {
@@ -125,6 +143,26 @@ export function createOpenTUIRenderer(cliRenderer: CliRenderer) {
             if (nextValue) {
               el.on(InputRenderableEvents.ENTER, nextValue)
             }
+          } else if (el instanceof TextareaRenderable) {
+            el.onSubmit = nextValue
+          }
+          break
+
+        case "onKeyDown":
+          if (el instanceof Renderable) {
+            el.onKeyDown = nextValue
+          }
+          break
+
+        case "onContentChange":
+          if (el instanceof TextareaRenderable) {
+            el.onContentChange = nextValue
+          }
+          break
+
+        case "onCursorChange":
+          if (el instanceof TextareaRenderable) {
+            el.onCursorChange = nextValue
           }
           break
 
@@ -190,6 +228,8 @@ export function createOpenTUIRenderer(cliRenderer: CliRenderer) {
     },
 
     remove(el) {
+      if (!el) return
+
       const parent = el.parent
       if (parent) {
         removeNode(parent, el)
@@ -211,6 +251,12 @@ export function createOpenTUIRenderer(cliRenderer: CliRenderer) {
 
     setText(node, text) {
       if (node instanceof TextNode) {
+        if (node.nodeRenderable) {
+          node.nodeRenderable.children = [text]
+          node.nodeRenderable.requestRender()
+          return
+        }
+
         const textParent = node.textParent
         if (textParent instanceof TextRenderable) {
           textParent.content = text
@@ -222,14 +268,37 @@ export function createOpenTUIRenderer(cliRenderer: CliRenderer) {
     parentNode: (node) => node.parent! as OpenTUIElement,
 
     nextSibling(node) {
+      if (!node) return null
+
       const parent = node.parent
       if (!parent) return null
 
-      if (node instanceof TextNode && parent instanceof TextRenderable) {
-        const siblings = parent.content.chunks
-        const index = siblings.indexOf(node.chunk)
-        const nextChunk = siblings[index + 1]
-        return nextChunk ? ChunkToTextNodeMap.get(nextChunk) || null : null
+      if (node instanceof TextNode) {
+        if (parent instanceof TextNodeRenderable && node.nodeRenderable) {
+          const siblings = parent.getChildren()
+          const index = siblings.findIndex((child) => child.id === node.nodeRenderable?.id)
+          return siblings[index + 1] || null
+        }
+
+        const textParent = node.textParent
+
+        if (textParent instanceof TextRenderable) {
+          const chunks = textParent.content.chunks
+          const index = chunks.indexOf(node.chunk)
+          const nextChunk = chunks[index + 1]
+          if (nextChunk) {
+            return ChunkToTextNodeMap.get(nextChunk) || null
+          }
+
+          const container = textParent.parent
+          if (!container) return null
+
+          const siblings = container.getChildren()
+          const textParentIndex = siblings.findIndex((child) => child.id === textParent.id)
+          return siblings[textParentIndex + 1] || null
+        }
+
+        return null
       }
 
       const siblings = parent.getChildren()
@@ -248,7 +317,6 @@ export function createOpenTUIRenderer(cliRenderer: CliRenderer) {
       return cloned
     },
 
-    //@ts-expect-error : we don't do anything we comments
-    createComment: () => null,
+    createComment: () => new CommentNode(cliRenderer),
   })
 }
diff --git a/packages/vue/src/test-utils.ts b/packages/vue/src/test-utils.ts
new file mode 100644
index 000000000..aa952068f
--- /dev/null
+++ b/packages/vue/src/test-utils.ts
@@ -0,0 +1,63 @@
+import { nextTick, type Component } from "vue"
+import { createTestRenderer, type TestRendererOptions } from "@opentui/core/testing"
+import { createOpenTUIRenderer } from "./renderer"
+import { cliRendererKey } from "../index"
+
+export async function testRender(component: Component, renderConfig: TestRendererOptions = {}) {
+  const userOnDestroy = renderConfig.onDestroy
+  const testSetup = await createTestRenderer({
+    useThread: false,
+    ...renderConfig,
+    onDestroy: undefined,
+  })
+
+  const baseRenderOnce = testSetup.renderOnce
+  const renderOnce = async () => {
+    await nextTick()
+    await baseRenderOnce()
+  }
+
+  const baseMockInput = testSetup.mockInput
+  const mockInput = {
+    ...baseMockInput,
+    pressKeys: async (...args: Parameters<(typeof baseMockInput)["pressKeys"]>) => {
+      await nextTick()
+      return baseMockInput.pressKeys(...args)
+    },
+    typeText: async (...args: Parameters<(typeof baseMockInput)["typeText"]>) => {
+      await nextTick()
+      return baseMockInput.typeText(...args)
+    },
+    pasteBracketedText: async (...args: Parameters<(typeof baseMockInput)["pasteBracketedText"]>) => {
+      await nextTick()
+      return baseMockInput.pasteBracketedText(...args)
+    },
+  }
+
+  const renderer = createOpenTUIRenderer(testSetup.renderer)
+  const app = renderer.createApp(component)
+  app.provide(cliRendererKey, testSetup.renderer)
+  app.mount(testSetup.renderer.root)
+
+  let didUnmount = false
+  const originalDestroy = testSetup.renderer.destroy.bind(testSetup.renderer)
+  testSetup.renderer.destroy = () => {
+    if (!didUnmount) {
+      didUnmount = true
+      try {
+        app.unmount()
+      } catch {}
+      try {
+        userOnDestroy?.()
+      } catch {}
+    }
+
+    return originalDestroy()
+  }
+
+  return {
+    ...testSetup,
+    renderOnce,
+    mockInput,
+  }
+}
diff --git a/packages/vue/tests/control-flow.test.ts b/packages/vue/tests/control-flow.test.ts
new file mode 100644
index 000000000..d3d6b082e
--- /dev/null
+++ b/packages/vue/tests/control-flow.test.ts
@@ -0,0 +1,1016 @@
+import { describe, expect, it, beforeEach, afterEach } from "bun:test"
+import { defineComponent, h, ref, nextTick, onErrorCaptured, Fragment } from "vue"
+import { testRender } from "../src/test-utils"
+
+let testSetup: Awaited<ReturnType<typeof testRender>>
+
+describe("Vue Renderer | Control Flow Tests", () => {
+  beforeEach(async () => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+  })
+
+  afterEach(() => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+  })
+
+  describe("List Rendering", () => {
+    it("should render items with .map()", async () => {
+      const items = ["First", "Second", "Third"]
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h(
+              "boxRenderable",
+              {},
+              items.map((item, index) => h("textRenderable", { key: item }, `${index + 1}. ${item}`)),
+            )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 10 })
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+
+      expect(frame).toContain("1. First")
+      expect(frame).toContain("2. Second")
+      expect(frame).toContain("3. Third")
+
+      const children = testSetup.renderer.root.getChildren()[0]!.getChildren()
+      expect(children.length).toBe(3)
+    })
+
+    it("should handle reactive array updates", async () => {
+      const items = ref(["A", "B"])
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h(
+              "boxRenderable",
+              {},
+              items.value.map((item) => h("textRenderable", { key: item }, `Item: ${item}`)),
+            )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 10 })
+      await testSetup.renderOnce()
+
+      let children = testSetup.renderer.root.getChildren()[0]!.getChildren()
+      expect(children.length).toBe(2)
+
+      items.value = ["A", "B", "C", "D"]
+      await nextTick()
+      await testSetup.renderOnce()
+
+      children = testSetup.renderer.root.getChildren()[0]!.getChildren()
+      expect(children.length).toBe(4)
+
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Item: A")
+      expect(frame).toContain("Item: D")
+    })
+
+    it("should handle empty arrays", async () => {
+      const items = ref(["Item"])
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h(
+              "boxRenderable",
+              {},
+              items.value.map((item) => h("textRenderable", { key: item }, item)),
+            )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 10 })
+      await testSetup.renderOnce()
+
+      let children = testSetup.renderer.root.getChildren()[0]!.getChildren()
+      expect(children.length).toBe(1)
+
+      items.value = []
+      await nextTick()
+      await testSetup.renderOnce()
+
+      children = testSetup.renderer.root.getChildren()[0]!.getChildren()
+      expect(children.length).toBe(0)
+    })
+
+    it("should handle complex objects in arrays", async () => {
+      const todos = ref([
+        { id: 1, text: "Learn Vue", done: false },
+        { id: 2, text: "Build TUI", done: true },
+      ])
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h(
+              "boxRenderable",
+              {},
+              todos.value.map((todo, index) =>
+                h("textRenderable", { key: todo.id }, `${index + 1}. ${todo.done ? "[x]" : "[ ]"} ${todo.text}`),
+              ),
+            )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 30, height: 10 })
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+
+      expect(frame).toContain("1. [ ] Learn Vue")
+      expect(frame).toContain("2. [x] Build TUI")
+    })
+
+    it("should handle array item removal", async () => {
+      const items = ref(["A", "B", "C", "D"])
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h(
+              "boxRenderable",
+              {},
+              items.value.map((item) => h("textRenderable", { key: item }, `Item: ${item}`)),
+            )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 10 })
+      await testSetup.renderOnce()
+
+      let children = testSetup.renderer.root.getChildren()[0]!.getChildren()
+      expect(children.length).toBe(4)
+
+      items.value = ["A", "D"]
+      await nextTick()
+      await testSetup.renderOnce()
+
+      children = testSetup.renderer.root.getChildren()[0]!.getChildren()
+      expect(children.length).toBe(2)
+
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Item: A")
+      expect(frame).toContain("Item: D")
+      expect(frame).not.toContain("Item: B")
+      expect(frame).not.toContain("Item: C")
+    })
+
+    it("should handle array reordering", async () => {
+      const items = ref(["First", "Second", "Third"])
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h(
+              "boxRenderable",
+              { id: "container" },
+              items.value.map((item) =>
+                h("boxRenderable", { key: item, id: `item-${item}` }, [h("textRenderable", {}, item)]),
+              ),
+            )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 10 })
+      await testSetup.renderOnce()
+
+      const container = testSetup.renderer.root.findDescendantById("container")!
+      let children = container.getChildren()
+      expect(children[0]?.id).toBe("item-First")
+      expect(children[1]?.id).toBe("item-Second")
+      expect(children[2]?.id).toBe("item-Third")
+
+      items.value = ["Third", "Second", "First"]
+      await nextTick()
+      await testSetup.renderOnce()
+
+      children = container.getChildren()
+      expect(children[0]?.id).toBe("item-Third")
+      expect(children[1]?.id).toBe("item-Second")
+      expect(children[2]?.id).toBe("item-First")
+    })
+  })
+
+  describe("Conditional Rendering", () => {
+    it("should conditionally render content with ternary operator", async () => {
+      const showContent = ref(true)
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              showContent.value ? h("textRenderable", {}, "Main content") : h("textRenderable", {}, "Fallback content"),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 5 })
+      await testSetup.renderOnce()
+
+      let frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Main content")
+      expect(frame).not.toContain("Fallback content")
+
+      showContent.value = false
+      await nextTick()
+      await testSetup.renderOnce()
+
+      frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Fallback content")
+      expect(frame).not.toContain("Main content")
+    })
+
+    it("should handle && operator for conditional rendering", async () => {
+      const visible = ref(true)
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h(
+              "boxRenderable",
+              {},
+              [
+                visible.value && h("textRenderable", {}, "Visible content"),
+                h("textRenderable", {}, "Always visible"),
+              ].filter(Boolean),
+            )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 8 })
+      await testSetup.renderOnce()
+
+      let frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Visible content")
+      expect(frame).toContain("Always visible")
+
+      visible.value = false
+      await nextTick()
+      await testSetup.renderOnce()
+
+      frame = testSetup.captureCharFrame()
+      expect(frame).not.toContain("Visible content")
+      expect(frame).toContain("Always visible")
+    })
+
+    it("should handle reactive condition changes", async () => {
+      const count = ref(5)
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              count.value > 3
+                ? h("textRenderable", {}, `Count is high: ${count.value}`)
+                : h("textRenderable", {}, "Count too low"),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 25, height: 5 })
+      await testSetup.renderOnce()
+
+      let frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Count is high: 5")
+
+      count.value = 2
+      await nextTick()
+      await testSetup.renderOnce()
+
+      frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Count too low")
+      expect(frame).not.toContain("Count is high")
+    })
+
+    it("should verify correct ordering when conditionally rendering", async () => {
+      const showContent = ref(false)
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h(
+              "boxRenderable",
+              { id: "container" },
+              [
+                h("boxRenderable", { id: "first" }),
+                showContent.value ? h("boxRenderable", { id: "second" }) : null,
+                h("boxRenderable", { id: "third" }),
+              ].filter(Boolean),
+            )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 5 })
+
+      showContent.value = true
+      await nextTick()
+      await testSetup.renderOnce()
+
+      const container = testSetup.renderer.root.findDescendantById("container")!
+      const children = container.getChildren()
+
+      expect(children.length).toBe(3)
+      expect(children[0]!.id).toBe("first")
+      expect(children[1]!.id).toBe("second")
+      expect(children[2]!.id).toBe("third")
+    })
+
+    it("should conditionally render content in fragment with correct order", async () => {
+      const showContent = ref(false)
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h(
+              "boxRenderable",
+              { id: "fragment-container" },
+              [
+                h("boxRenderable", { id: "first" }),
+                showContent.value ? h("boxRenderable", { id: "second" }) : null,
+                h("boxRenderable", { id: "third" }),
+              ].filter(Boolean),
+            )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 5 })
+
+      showContent.value = true
+      await nextTick()
+      await testSetup.renderOnce()
+
+      const container = testSetup.renderer.root.findDescendantById("fragment-container")!
+      const children = container.getChildren()
+
+      expect(children.length).toBe(3)
+      expect(children[0]!.id).toBe("first")
+      expect(children[1]!.id).toBe("second")
+      expect(children[2]!.id).toBe("third")
+    })
+
+    it("should handle null/undefined in children array", async () => {
+      const showFirst = ref(true)
+      const showSecond = ref(false)
+      const showThird = ref(true)
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h(
+              "boxRenderable",
+              {},
+              [
+                showFirst.value ? h("textRenderable", {}, "First") : null,
+                showSecond.value ? h("textRenderable", {}, "Second") : undefined,
+                showThird.value ? h("textRenderable", {}, "Third") : null,
+              ].filter(Boolean),
+            )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 8 })
+      await testSetup.renderOnce()
+
+      let frame = testSetup.captureCharFrame()
+      expect(frame).toContain("First")
+      expect(frame).not.toContain("Second")
+      expect(frame).toContain("Third")
+
+      showFirst.value = false
+      showSecond.value = true
+      await nextTick()
+      await testSetup.renderOnce()
+
+      frame = testSetup.captureCharFrame()
+      expect(frame).not.toContain("First")
+      expect(frame).toContain("Second")
+      expect(frame).toContain("Third")
+    })
+  })
+
+  describe("Switch/Match Equivalent", () => {
+    it("should render based on value matching using switch statement", async () => {
+      const value = ref("option1")
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              (() => {
+                switch (value.value) {
+                  case "option1":
+                    return h("textRenderable", {}, "Option 1 selected")
+                  case "option2":
+                    return h("textRenderable", {}, "Option 2 selected")
+                  default:
+                    return h("textRenderable", {}, "No match")
+                }
+              })(),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 25, height: 5 })
+      await testSetup.renderOnce()
+
+      let frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Option 1 selected")
+      expect(frame).not.toContain("Option 2 selected")
+
+      value.value = "option2"
+      await nextTick()
+      await testSetup.renderOnce()
+
+      frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Option 2 selected")
+      expect(frame).not.toContain("Option 1 selected")
+
+      value.value = "unknown"
+      await nextTick()
+      await testSetup.renderOnce()
+
+      frame = testSetup.captureCharFrame()
+      expect(frame).toContain("No match")
+    })
+
+    it("should handle reactive conditions with if/else chains", async () => {
+      const score = ref(85)
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              (() => {
+                if (score.value >= 90) {
+                  return h("textRenderable", {}, "Grade: A")
+                } else if (score.value >= 80) {
+                  return h("textRenderable", {}, "Grade: B")
+                } else if (score.value >= 70) {
+                  return h("textRenderable", {}, "Grade: C")
+                } else {
+                  return h("textRenderable", {}, "Grade: F")
+                }
+              })(),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 15, height: 5 })
+      await testSetup.renderOnce()
+
+      let frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Grade: B")
+
+      score.value = 95
+      await nextTick()
+      await testSetup.renderOnce()
+
+      frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Grade: A")
+
+      score.value = 65
+      await nextTick()
+      await testSetup.renderOnce()
+
+      frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Grade: F")
+    })
+
+    it("should handle object-based matching pattern", async () => {
+      type Status = "loading" | "success" | "error"
+      const status = ref<Status>("loading")
+
+      const renderStatus = (s: Status) => {
+        const renderers: Record<Status, () => ReturnType<typeof h>> = {
+          loading: () => h("textRenderable", {}, "Loading..."),
+          success: () => h("textRenderable", {}, "Success!"),
+          error: () => h("textRenderable", {}, "Error occurred"),
+        }
+        return renderers[s]()
+      }
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () => h("boxRenderable", {}, [renderStatus(status.value)])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 5 })
+      await testSetup.renderOnce()
+
+      let frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Loading...")
+
+      status.value = "success"
+      await nextTick()
+      await testSetup.renderOnce()
+
+      frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Success!")
+
+      status.value = "error"
+      await nextTick()
+      await testSetup.renderOnce()
+
+      frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Error occurred")
+    })
+  })
+
+  describe("Error Handling", () => {
+    it("should catch and handle errors with onErrorCaptured", async () => {
+      const shouldError = ref(false)
+      const errorMessage = ref("")
+
+      const ErrorComponent = defineComponent({
+        props: {
+          shouldError: { type: Boolean, default: false },
+        },
+        setup(props) {
+          return () => {
+            if (props.shouldError) {
+              throw new Error("Test error")
+            }
+            return h("textRenderable", {}, "Normal content")
+          }
+        },
+      })
+
+      const TestComponent = defineComponent({
+        setup() {
+          onErrorCaptured((err: Error) => {
+            errorMessage.value = err.message
+            return false
+          })
+
+          return () =>
+            h("boxRenderable", {}, [
+              errorMessage.value
+                ? h("textRenderable", {}, `Error caught: ${errorMessage.value}`)
+                : h(ErrorComponent, { shouldError: shouldError.value }),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 30, height: 5 })
+      await testSetup.renderOnce()
+
+      let frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Normal content")
+      expect(frame).not.toContain("Error caught")
+
+      shouldError.value = true
+      await nextTick()
+      await testSetup.renderOnce()
+
+      frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Error caught: Test error")
+      expect(frame).not.toContain("Normal content")
+    })
+  })
+
+  describe("Combined Control Flow", () => {
+    it("should handle list inside conditional", async () => {
+      const showList = ref(true)
+      const items = ref(["A", "B", "C"])
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h(
+              "boxRenderable",
+              {},
+              showList.value
+                ? items.value.map((item) => h("textRenderable", { key: item }, `Item: ${item}`))
+                : [h("textRenderable", {}, "List is hidden")],
+            )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 10 })
+      await testSetup.renderOnce()
+
+      let children = testSetup.renderer.root.getChildren()[0]!.getChildren()
+      expect(children.length).toBe(3)
+
+      let frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Item: A")
+      expect(frame).toContain("Item: C")
+
+      showList.value = false
+      await nextTick()
+      await testSetup.renderOnce()
+
+      children = testSetup.renderer.root.getChildren()[0]!.getChildren()
+      expect(children.length).toBe(1)
+
+      frame = testSetup.captureCharFrame()
+      expect(frame).toContain("List is hidden")
+      expect(frame).not.toContain("Item: A")
+    })
+
+    it("should handle conditional inside list (filtering)", async () => {
+      const items = ["A", "B", "C", "D"]
+      const visibleItems = ref(new Set(["A", "C"]))
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h(
+              "boxRenderable",
+              {},
+              items
+                .filter((item) => visibleItems.value.has(item))
+                .map((item) => h("textRenderable", { key: item }, `Item: ${item}`)),
+            )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 10 })
+      await testSetup.renderOnce()
+
+      let frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Item: A")
+      expect(frame).toContain("Item: C")
+      expect(frame).not.toContain("Item: B")
+      expect(frame).not.toContain("Item: D")
+
+      visibleItems.value = new Set(["B", "D"])
+      await nextTick()
+      await testSetup.renderOnce()
+
+      frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Item: B")
+      expect(frame).toContain("Item: D")
+      expect(frame).not.toContain("Item: A")
+      expect(frame).not.toContain("Item: C")
+    })
+
+    it("should handle nested conditionals", async () => {
+      const showOuter = ref(true)
+      const showInner = ref(true)
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              showOuter.value
+                ? h("boxRenderable", {}, [
+                    h("textRenderable", {}, "Outer content"),
+                    showInner.value
+                      ? h("textRenderable", {}, "Inner content")
+                      : h("textRenderable", {}, "Inner hidden"),
+                  ])
+                : h("textRenderable", {}, "Outer hidden"),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 10 })
+      await testSetup.renderOnce()
+
+      let frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Outer content")
+      expect(frame).toContain("Inner content")
+
+      showInner.value = false
+      await nextTick()
+      await testSetup.renderOnce()
+
+      frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Outer content")
+      expect(frame).toContain("Inner hidden")
+      expect(frame).not.toContain("Inner content")
+
+      showOuter.value = false
+      await nextTick()
+      await testSetup.renderOnce()
+
+      frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Outer hidden")
+      expect(frame).not.toContain("Outer content")
+    })
+
+    it("should handle switch with list inside matches", async () => {
+      const mode = ref<"list" | "grid">("list")
+      const items = ["One", "Two", "Three"]
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              (() => {
+                switch (mode.value) {
+                  case "list":
+                    return h(
+                      Fragment,
+                      items.map((item) => h("textRenderable", { key: `list-${item}` }, `* ${item}`)),
+                    )
+                  case "grid":
+                    return h(
+                      Fragment,
+                      items.map((item) => h("textRenderable", { key: `grid-${item}` }, `[${item}]`)),
+                    )
+                  default:
+                    return h("textRenderable", {}, "Unknown mode")
+                }
+              })(),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 25, height: 10 })
+      await testSetup.renderOnce()
+
+      let frame = testSetup.captureCharFrame()
+      expect(frame).toContain("* One")
+      expect(frame).toContain("* Two")
+      expect(frame).toContain("* Three")
+
+      mode.value = "grid"
+      await nextTick()
+      await testSetup.renderOnce()
+
+      frame = testSetup.captureCharFrame()
+      expect(frame).toContain("[One]")
+      expect(frame).toContain("[Two]")
+      expect(frame).toContain("[Three]")
+      expect(frame).not.toContain("* One")
+    })
+
+    it("should handle complex dynamic data with mixed control flow", async () => {
+      interface Item {
+        id: string
+        name: string
+        visible: boolean
+        children?: string[]
+      }
+
+      const items = ref<Item[]>([
+        { id: "1", name: "Parent 1", visible: true, children: ["Child A", "Child B"] },
+        { id: "2", name: "Parent 2", visible: false },
+        { id: "3", name: "Parent 3", visible: true, children: ["Child C"] },
+      ])
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h(
+              "boxRenderable",
+              {},
+              items.value
+                .filter((item) => item.visible)
+                .map((item) =>
+                  h("boxRenderable", { key: item.id }, [
+                    h("textRenderable", {}, `Name: ${item.name}`),
+                    ...(item.children
+                      ? item.children.map((child) => h("textRenderable", { key: child }, `  - ${child}`))
+                      : []),
+                  ]),
+                ),
+            )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 25, height: 15 })
+      await testSetup.renderOnce()
+
+      let frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Name: Parent 1")
+      expect(frame).toContain("- Child A")
+      expect(frame).toContain("- Child B")
+      expect(frame).not.toContain("Name: Parent 2")
+      expect(frame).toContain("Name: Parent 3")
+      expect(frame).toContain("- Child C")
+
+      items.value = [
+        { id: "1", name: "Parent 1", visible: false },
+        { id: "2", name: "Parent 2", visible: true, children: ["Child D"] },
+        { id: "3", name: "Parent 3", visible: true, children: ["Child C", "Child E"] },
+      ]
+      await nextTick()
+      await testSetup.renderOnce()
+
+      frame = testSetup.captureCharFrame()
+      expect(frame).not.toContain("Name: Parent 1")
+      expect(frame).toContain("Name: Parent 2")
+      expect(frame).toContain("- Child D")
+      expect(frame).toContain("- Child E")
+    })
+
+    it("should find descendants by id through conditional renderables", async () => {
+      const showContent = ref(false)
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h(
+              "boxRenderable",
+              { id: "parent-box" },
+              [
+                h("boxRenderable", { id: "always-visible", style: { border: true }, title: "Always" }),
+                showContent.value
+                  ? h("boxRenderable", { id: "conditional-child", style: { border: true }, title: "Conditional" }, [
+                      h("boxRenderable", { id: "nested-child", style: { border: true }, title: "Nested" }),
+                    ])
+                  : null,
+                h("boxRenderable", { id: "another-visible", style: { border: true }, title: "Another" }),
+              ].filter(Boolean),
+            )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 30, height: 15 })
+      await testSetup.renderOnce()
+
+      const parentBox = testSetup.renderer.root.findDescendantById("parent-box")
+      expect(parentBox).toBeDefined()
+
+      const anotherVisible = parentBox?.findDescendantById("another-visible")
+      expect(anotherVisible).toBeDefined()
+      expect(anotherVisible?.id).toBe("another-visible")
+    })
+
+    it("should handle rapid reactive updates", async () => {
+      const count = ref(0)
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              count.value % 2 === 0
+                ? h("textRenderable", {}, `Even: ${count.value}`)
+                : h("textRenderable", {}, `Odd: ${count.value}`),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 5 })
+
+      for (let i = 0; i < 10; i++) {
+        count.value = i
+        await nextTick()
+        await testSetup.renderOnce()
+
+        const frame = testSetup.captureCharFrame()
+        if (i % 2 === 0) {
+          expect(frame).toContain(`Even: ${i}`)
+        } else {
+          expect(frame).toContain(`Odd: ${i}`)
+        }
+      }
+    })
+
+    it("should handle conditional text elements", async () => {
+      const showExtra = ref(true)
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h(
+              "boxRenderable",
+              {},
+              [
+                h("textRenderable", {}, "Base text"),
+                showExtra.value ? h("textRenderable", { style: { fg: "red" } }, "Extra text") : null,
+              ].filter(Boolean),
+            )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 30, height: 5 })
+      await testSetup.renderOnce()
+
+      let frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Base text")
+      expect(frame).toContain("Extra text")
+
+      showExtra.value = false
+      await nextTick()
+      await testSetup.renderOnce()
+
+      frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Base text")
+      expect(frame).not.toContain("Extra text")
+    })
+  })
+
+  describe("Edge Cases", () => {
+    it("should handle empty conditional blocks", async () => {
+      const show = ref(false)
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h(
+              "boxRenderable",
+              {},
+              [
+                h("textRenderable", {}, "Before"),
+                show.value ? h("textRenderable", {}, "Conditional") : null,
+                h("textRenderable", {}, "After"),
+              ].filter(Boolean),
+            )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 5 })
+      await testSetup.renderOnce()
+
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Before")
+      expect(frame).toContain("After")
+      expect(frame).not.toContain("Conditional")
+
+      const children = testSetup.renderer.root.getChildren()[0]!.getChildren()
+      expect(children.length).toBe(2)
+    })
+
+    it("should handle deeply nested lists", async () => {
+      const data = ref([
+        {
+          id: "1",
+          items: [
+            { id: "1-1", values: ["a", "b"] },
+            { id: "1-2", values: ["c"] },
+          ],
+        },
+        { id: "2", items: [{ id: "2-1", values: ["d", "e", "f"] }] },
+      ])
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h(
+              "boxRenderable",
+              {},
+              data.value.map((group) =>
+                h(
+                  "boxRenderable",
+                  { key: group.id },
+                  group.items.map((item) =>
+                    h(
+                      "boxRenderable",
+                      { key: item.id },
+                      item.values.map((value) => h("textRenderable", { key: value }, value)),
+                    ),
+                  ),
+                ),
+              ),
+            )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 15 })
+      await testSetup.renderOnce()
+
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toContain("a")
+      expect(frame).toContain("b")
+      expect(frame).toContain("c")
+      expect(frame).toContain("d")
+      expect(frame).toContain("e")
+      expect(frame).toContain("f")
+    })
+
+    it("should handle boolean false in array (not rendered)", async () => {
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h(
+              "boxRenderable",
+              {},
+              [
+                h("textRenderable", {}, "First"),
+                false,
+                h("textRenderable", {}, "Second"),
+                null,
+                h("textRenderable", {}, "Third"),
+              ].filter(Boolean),
+            )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 10 })
+      await testSetup.renderOnce()
+
+      const children = testSetup.renderer.root.getChildren()[0]!.getChildren()
+      expect(children.length).toBe(3)
+
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toContain("First")
+      expect(frame).toContain("Second")
+      expect(frame).toContain("Third")
+    })
+  })
+})
diff --git a/packages/vue/tests/devtools-hook.test.ts b/packages/vue/tests/devtools-hook.test.ts
new file mode 100644
index 000000000..8754768ef
--- /dev/null
+++ b/packages/vue/tests/devtools-hook.test.ts
@@ -0,0 +1,106 @@
+import { afterAll, afterEach, beforeAll, describe, expect, it } from "bun:test"
+import { defineComponent, h, nextTick, ref } from "vue"
+import { testRender } from "../src/test-utils"
+import { initDevtoolsGlobalHook } from "../src/devtools/connect"
+
+type DevtoolsHook = {
+  emit: (event: string, ...args: unknown[]) => void
+  apps?: unknown[]
+}
+
+function getGlobalDevtoolsHook(): DevtoolsHook {
+  const hook = (globalThis as Record<string, unknown>).__VUE_DEVTOOLS_GLOBAL_HOOK__ as DevtoolsHook | undefined
+  if (!hook) throw new Error("Expected __VUE_DEVTOOLS_GLOBAL_HOOK__ to be set")
+  return hook
+}
+
+async function withHiddenGlobalDevtoolsHook<T>(fn: () => Promise<T>): Promise<T> {
+  const target = globalThis as Record<string, unknown>
+  const original = Object.getOwnPropertyDescriptor(target, "__VUE_DEVTOOLS_GLOBAL_HOOK__")
+
+  Object.defineProperty(target, "__VUE_DEVTOOLS_GLOBAL_HOOK__", {
+    configurable: true,
+    get: () => undefined,
+  })
+
+  try {
+    return await fn()
+  } finally {
+    if (original) {
+      Object.defineProperty(target, "__VUE_DEVTOOLS_GLOBAL_HOOK__", original)
+    } else {
+      delete target.__VUE_DEVTOOLS_GLOBAL_HOOK__
+    }
+  }
+}
+
+describe("DevTools integration | hook timing", () => {
+  let testSetup: Awaited<ReturnType<typeof testRender>> | null = null
+
+  beforeAll(async () => {
+    await initDevtoolsGlobalHook()
+  })
+
+  afterEach(() => {
+    if (testSetup) testSetup.renderer.destroy()
+    testSetup = null
+  })
+
+  afterAll(() => {
+    // Keep the global hook installed to avoid async unmount handlers throwing.
+  })
+
+  it("emits component updates when DevTools hook exists before renderer creation", async () => {
+    const hook = getGlobalDevtoolsHook()
+
+    const calls: Array<{ event: string; args: unknown[] }> = []
+    const originalEmit = hook.emit
+    hook.emit = (event, ...args) => {
+      calls.push({ event, args })
+      originalEmit.call(hook, event, ...args)
+    }
+
+    const count = ref(0)
+    const TestComponent = defineComponent({
+      setup() {
+        return () => h("textRenderable", { content: `count:${count.value}` })
+      },
+    })
+
+    testSetup = await testRender(TestComponent, { width: 20, height: 3 })
+
+    calls.length = 0
+    count.value++
+    await testSetup.renderOnce()
+
+    expect(calls.some((c) => c.event === "component:updated")).toBe(true)
+
+    hook.emit = originalEmit
+  })
+
+  it("does not emit component updates if DevTools is initialized after renderer creation", async () => {
+    const count = ref(0)
+    const TestComponent = defineComponent({
+      setup() {
+        return () => h("textRenderable", { content: `count:${count.value}` })
+      },
+    })
+
+    testSetup = await withHiddenGlobalDevtoolsHook(() => testRender(TestComponent, { width: 20, height: 3 }))
+    const hook = getGlobalDevtoolsHook()
+
+    const calls: Array<{ event: string; args: unknown[] }> = []
+    const originalEmit = hook.emit
+    hook.emit = (event, ...args) => {
+      calls.push({ event, args })
+      originalEmit.call(hook, event, ...args)
+    }
+
+    count.value++
+    await nextTick()
+
+    expect(calls.some((c) => c.event === "component:updated")).toBe(false)
+
+    hook.emit = originalEmit
+  })
+})
diff --git a/packages/vue/tests/events.test.ts b/packages/vue/tests/events.test.ts
new file mode 100644
index 000000000..f45de9359
--- /dev/null
+++ b/packages/vue/tests/events.test.ts
@@ -0,0 +1,757 @@
+import { describe, expect, it, beforeEach, afterEach } from "bun:test"
+import { defineComponent, h, ref } from "vue"
+import { testRender } from "../src/test-utils"
+import { createSpy } from "@opentui/core/testing"
+import type { PasteEvent } from "@opentui/core"
+
+let testSetup: Awaited<ReturnType<typeof testRender>>
+
+describe("Vue Renderer | Event Tests", () => {
+  beforeEach(async () => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+  })
+
+  afterEach(() => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+  })
+
+  describe("Input Events", () => {
+    it("should handle input onInput events", async () => {
+      const onInputSpy = createSpy()
+      const value = ref("")
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              h("inputRenderable", {
+                focused: true,
+                onInput: (val: string) => {
+                  onInputSpy(val)
+                  value.value = val
+                },
+              }),
+              h("textRenderable", { content: `Value: ${value.value}` }),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 5 })
+
+      await testSetup.mockInput.typeText("hello")
+
+      expect(onInputSpy.callCount()).toBe(5)
+      expect(onInputSpy.calls[0]?.[0]).toBe("h")
+      expect(onInputSpy.calls[4]?.[0]).toBe("hello")
+      expect(value.value).toBe("hello")
+    })
+
+    it("should handle input onSubmit events", async () => {
+      const onSubmitSpy = createSpy()
+      const submittedValue = ref("")
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              h("inputRenderable", {
+                focused: true,
+                onInput: (val: string) => {
+                  submittedValue.value = val
+                },
+                onSubmit: (val: string) => onSubmitSpy(val),
+              }),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 5 })
+
+      await testSetup.mockInput.typeText("test input")
+      testSetup.mockInput.pressEnter()
+
+      expect(onSubmitSpy.callCount()).toBe(1)
+      expect(onSubmitSpy.calls[0]?.[0]).toBe("test input")
+      expect(submittedValue.value).toBe("test input")
+    })
+
+    it("should handle input onChange events on blur", async () => {
+      const onChangeSpy = createSpy()
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              h("inputRenderable", {
+                id: "input",
+                focused: true,
+                onChange: (val: string) => onChangeSpy(val),
+              }),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 5 })
+
+      await testSetup.mockInput.typeText("test")
+      expect(onChangeSpy.callCount()).toBe(0)
+
+      const input = testSetup.renderer.root.findDescendantById("input")
+      input?.blur()
+      expect(onChangeSpy.callCount()).toBe(1)
+      expect(onChangeSpy.calls[0]?.[0]).toBe("test")
+    })
+
+    it("should handle event handler attachment", async () => {
+      const inputSpy = createSpy()
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              h("inputRenderable", {
+                focused: true,
+                onInput: inputSpy,
+              }),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 5 })
+
+      await testSetup.mockInput.typeText("test")
+
+      expect(inputSpy.callCount()).toBe(4)
+      expect(inputSpy.calls[0]?.[0]).toBe("t")
+      expect(inputSpy.calls[3]?.[0]).toBe("test")
+    })
+  })
+
+  describe("Select Events", () => {
+    it("should handle select onChange events", async () => {
+      const onChangeSpy = createSpy()
+      const selectedIndex = ref(0)
+
+      const options = [
+        { name: "Option 1", value: 1, description: "First option" },
+        { name: "Option 2", value: 2, description: "Second option" },
+        { name: "Option 3", value: 3, description: "Third option" },
+      ]
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              h("selectRenderable", {
+                focused: true,
+                options,
+                onChange: (index: number, option: (typeof options)[0]) => {
+                  onChangeSpy(index, option)
+                  selectedIndex.value = index
+                },
+              }),
+              h("textRenderable", { content: `Selected: ${selectedIndex.value}` }),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 30, height: 10 })
+
+      testSetup.mockInput.pressArrow("down")
+
+      expect(onChangeSpy.callCount()).toBe(1)
+      expect(onChangeSpy.calls[0]?.[0]).toBe(1)
+      expect(onChangeSpy.calls[0]?.[1]).toEqual(options[1])
+      expect(selectedIndex.value).toBe(1)
+    })
+
+    it("should handle select onSelect events", async () => {
+      const onSelectSpy = createSpy()
+
+      const options = [
+        { name: "Option 1", value: "opt1", description: "First option" },
+        { name: "Option 2", value: "opt2", description: "Second option" },
+      ]
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              h("selectRenderable", {
+                focused: true,
+                options,
+                onSelect: (index: number, option: (typeof options)[0]) => {
+                  onSelectSpy(index, option)
+                },
+              }),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 30, height: 10 })
+
+      // Navigate to second option
+      testSetup.mockInput.pressArrow("down")
+      // Select it
+      testSetup.mockInput.pressEnter()
+
+      expect(onSelectSpy.callCount()).toBe(1)
+      expect(onSelectSpy.calls[0]?.[0]).toBe(1)
+      expect(onSelectSpy.calls[0]?.[1]?.value).toBe("opt2")
+    })
+
+    it("should handle keyboard navigation on select components", async () => {
+      const changeSpy = createSpy()
+      const selectedValue = ref("")
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              h("selectRenderable", {
+                focused: true,
+                options: [
+                  { name: "Option 1", value: "opt1", description: "First option" },
+                  { name: "Option 2", value: "opt2", description: "Second option" },
+                  { name: "Option 3", value: "opt3", description: "Third option" },
+                ],
+                onChange: (index: number, option: { value: string }) => {
+                  changeSpy(index, option)
+                  selectedValue.value = option?.value || ""
+                },
+              }),
+              h("textRenderable", { content: `Selected: ${selectedValue.value}` }),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 25, height: 10 })
+
+      testSetup.mockInput.pressArrow("down")
+
+      expect(changeSpy.callCount()).toBe(1)
+      expect(changeSpy.calls[0]?.[0]).toBe(1)
+      expect(changeSpy.calls[0]?.[1]?.value).toBe("opt2")
+      expect(selectedValue.value).toBe("opt2")
+
+      testSetup.mockInput.pressArrow("down")
+
+      expect(changeSpy.callCount()).toBe(2)
+      expect(changeSpy.calls[1]?.[0]).toBe(2)
+      expect(changeSpy.calls[1]?.[1]?.value).toBe("opt3")
+      expect(selectedValue.value).toBe("opt3")
+    })
+  })
+
+  describe("TabSelect Events", () => {
+    it("should handle tab_select onSelect events", async () => {
+      const onSelectSpy = createSpy()
+      const activeTab = ref(0)
+
+      const tabs = [{ title: "Tab 1" }, { title: "Tab 2" }, { title: "Tab 3" }]
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              h("tabSelectRenderable", {
+                focused: true,
+                options: tabs.map((tab, index) => ({
+                  name: tab.title,
+                  value: index,
+                  description: "",
+                })),
+                onSelect: (index: number) => {
+                  onSelectSpy(index)
+                  activeTab.value = index
+                },
+              }),
+              h("textRenderable", { content: `Active tab: ${activeTab.value}` }),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 40, height: 8 })
+
+      testSetup.mockInput.pressArrow("right")
+      testSetup.mockInput.pressArrow("right")
+      testSetup.mockInput.pressEnter()
+
+      expect(onSelectSpy.callCount()).toBe(1)
+      expect(onSelectSpy.calls[0]?.[0]).toBe(2)
+      expect(activeTab.value).toBe(2)
+    })
+
+    it("should handle tabSelect onChange events", async () => {
+      const onChangeSpy = createSpy()
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              h("tabSelectRenderable", {
+                focused: true,
+                options: [
+                  { name: "Tab 1", value: 0, description: "" },
+                  { name: "Tab 2", value: 1, description: "" },
+                ],
+                onChange: (index: number) => {
+                  onChangeSpy(index)
+                },
+              }),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 40, height: 8 })
+
+      testSetup.mockInput.pressArrow("right")
+
+      expect(onChangeSpy.callCount()).toBe(1)
+      expect(onChangeSpy.calls[0]?.[0]).toBe(1)
+    })
+  })
+
+  describe("Focus Management", () => {
+    it("should handle focus management between inputs", async () => {
+      const input1Spy = createSpy()
+      const input2Spy = createSpy()
+      const input1Focused = ref(true)
+      const input2Focused = ref(false)
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              h("inputRenderable", {
+                focused: input1Focused.value,
+                onInput: input1Spy,
+              }),
+              h("inputRenderable", {
+                focused: input2Focused.value,
+                onInput: input2Spy,
+              }),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 30, height: 8 })
+
+      await testSetup.mockInput.typeText("first")
+
+      expect(input1Spy.callCount()).toBe(5)
+      expect(input2Spy.callCount()).toBe(0)
+
+      // Switch focus
+      input1Focused.value = false
+      input2Focused.value = true
+
+      input1Spy.reset()
+      input2Spy.reset()
+
+      await testSetup.mockInput.typeText("second")
+
+      expect(input1Spy.callCount()).toBe(0)
+      expect(input2Spy.callCount()).toBe(6)
+    })
+  })
+
+  describe("Textarea Events", () => {
+    it("should handle textarea onSubmit events", async () => {
+      const onSubmitSpy = createSpy()
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              h("textareaRenderable", {
+                focused: true,
+                initialValue: "test content",
+                onSubmit: () => onSubmitSpy(),
+              }),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 5 })
+
+      testSetup.mockInput.pressKey("RETURN", { meta: true })
+      await new Promise((resolve) => setTimeout(resolve, 10))
+
+      expect(onSubmitSpy.callCount()).toBe(1)
+    })
+
+    it("should handle textarea onContentChange events", async () => {
+      const onContentChangeSpy = createSpy()
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              h("textareaRenderable", {
+                focused: true,
+                initialValue: "",
+                onContentChange: (content: string) => onContentChangeSpy(content),
+              }),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 5 })
+
+      await testSetup.mockInput.typeText("hello")
+
+      expect(onContentChangeSpy.callCount()).toBeGreaterThan(0)
+    })
+  })
+
+  describe("Global preventDefault", () => {
+    it("should handle global preventDefault for keyboard events", async () => {
+      const inputSpy = createSpy()
+      const globalHandlerSpy = createSpy()
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              h("inputRenderable", {
+                focused: true,
+                onInput: inputSpy,
+              }),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 5 })
+
+      // Register global handler that prevents 'a' key
+      testSetup.renderer.keyInput.on("keypress", (event) => {
+        globalHandlerSpy(event.name)
+        if (event.name === "a") {
+          event.preventDefault()
+        }
+      })
+
+      await testSetup.mockInput.typeText("abc")
+
+      // Global handler should be called for all keys
+      expect(globalHandlerSpy.callCount()).toBe(3)
+      expect(globalHandlerSpy.calls[0]?.[0]).toBe("a")
+      expect(globalHandlerSpy.calls[1]?.[0]).toBe("b")
+      expect(globalHandlerSpy.calls[2]?.[0]).toBe("c")
+
+      // Input should only receive 'b' and 'c' (not 'a')
+      expect(inputSpy.callCount()).toBe(2)
+      expect(inputSpy.calls[0]?.[0]).toBe("b")
+      expect(inputSpy.calls[1]?.[0]).toBe("bc")
+    })
+
+    it("should handle global handler registered after component mount", async () => {
+      const inputSpy = createSpy()
+      const value = ref("")
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              h("inputRenderable", {
+                focused: true,
+                onInput: (val: string) => {
+                  inputSpy(val)
+                  value.value = val
+                },
+              }),
+              h("textRenderable", { content: `Value: ${value.value}` }),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 5 })
+
+      // Type before global handler exists
+      await testSetup.mockInput.typeText("hello")
+      expect(inputSpy.callCount()).toBe(5)
+      expect(value.value).toBe("hello")
+
+      inputSpy.reset()
+
+      testSetup.renderer.keyInput.on("keypress", (event) => {
+        if (/^[0-9]$/.test(event.name)) {
+          event.preventDefault()
+        }
+      })
+
+      // Type mixed content
+      await testSetup.mockInput.typeText("abc123xyz")
+
+      // Only letters should reach the input
+      expect(inputSpy.callCount()).toBe(6) // a, b, c, x, y, z (not 1, 2, 3)
+      expect(value.value).toBe("helloabcxyz")
+    })
+
+    it("should handle dynamic preventDefault conditions", async () => {
+      const inputSpy = createSpy()
+      let preventNumbers = false
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              h("inputRenderable", {
+                focused: true,
+                onInput: inputSpy,
+              }),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 5 })
+
+      // Register handler with dynamic condition
+      testSetup.renderer.keyInput.on("keypress", (event) => {
+        if (preventNumbers && /^[0-9]$/.test(event.name)) {
+          event.preventDefault()
+        }
+      })
+
+      // Initially allow numbers
+      await testSetup.mockInput.typeText("a1")
+      expect(inputSpy.callCount()).toBe(2)
+      expect(inputSpy.calls[1]?.[0]).toBe("a1")
+
+      // Enable number prevention
+      preventNumbers = true
+      inputSpy.reset()
+
+      // Now numbers should be prevented
+      await testSetup.mockInput.typeText("b2c3")
+      expect(inputSpy.callCount()).toBe(2) // Only 'b' and 'c'
+      expect(inputSpy.calls[0]?.[0]).toBe("a1b")
+      expect(inputSpy.calls[1]?.[0]).toBe("a1bc")
+
+      // Disable prevention again
+      preventNumbers = false
+      inputSpy.reset()
+
+      // Numbers should work again
+      await testSetup.mockInput.typeText("4")
+      expect(inputSpy.callCount()).toBe(1)
+      expect(inputSpy.calls[0]?.[0]).toBe("a1bc4")
+    })
+
+    it("should handle preventDefault for select components", async () => {
+      const changeSpy = createSpy()
+      const globalHandlerSpy = createSpy()
+      const selectedIndex = ref(0)
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              h("selectRenderable", {
+                focused: true,
+                wrapSelection: true,
+                options: [
+                  { name: "Option 1", value: 1, description: "First" },
+                  { name: "Option 2", value: 2, description: "Second" },
+                  { name: "Option 3", value: 3, description: "Third" },
+                ],
+                onChange: (index: number, option: { value: number }) => {
+                  changeSpy(index, option)
+                  selectedIndex.value = index
+                },
+              }),
+              h("textRenderable", { content: `Selected: ${selectedIndex.value}` }),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 30, height: 10 })
+
+      // Register global handler that prevents down arrow
+      testSetup.renderer.keyInput.on("keypress", (event) => {
+        globalHandlerSpy(event.name)
+        if (event.name === "down") {
+          event.preventDefault()
+        }
+      })
+
+      // Try to press down arrow - should be prevented
+      testSetup.mockInput.pressArrow("down")
+      expect(globalHandlerSpy.callCount()).toBe(1)
+      expect(changeSpy.callCount()).toBe(0) // Should not change
+      expect(selectedIndex.value).toBe(0) // Should remain at 0
+
+      // Up arrow should still work
+      testSetup.mockInput.pressArrow("up")
+      expect(globalHandlerSpy.callCount()).toBe(2)
+      expect(changeSpy.callCount()).toBe(1) // Should wrap to last option
+      expect(selectedIndex.value).toBe(2) // Should be at last option
+    })
+
+    it("should handle multiple global handlers with preventDefault", async () => {
+      const inputSpy = createSpy()
+      const firstHandlerSpy = createSpy()
+      const secondHandlerSpy = createSpy()
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              h("inputRenderable", {
+                focused: true,
+                onInput: inputSpy,
+              }),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 5 })
+
+      // First handler prevents 'x'
+      testSetup.renderer.keyInput.on("keypress", (event) => {
+        firstHandlerSpy(event.name)
+        if (event.name === "x") {
+          event.preventDefault()
+        }
+      })
+
+      // Second handler also runs but can't undo preventDefault
+      testSetup.renderer.keyInput.on("keypress", (event) => {
+        secondHandlerSpy(event.name)
+      })
+
+      await testSetup.mockInput.typeText("xyz")
+
+      // Both handlers should be called for all keys
+      expect(firstHandlerSpy.callCount()).toBe(3)
+      expect(secondHandlerSpy.callCount()).toBe(3)
+
+      // But input should only receive 'y' and 'z'
+      expect(inputSpy.callCount()).toBe(2)
+      expect(inputSpy.calls[0]?.[0]).toBe("y")
+      expect(inputSpy.calls[1]?.[0]).toBe("yz")
+    })
+  })
+
+  describe("Paste Events", () => {
+    it("should handle global preventDefault for paste events", async () => {
+      const pasteSpy = createSpy()
+      const globalHandlerSpy = createSpy()
+      const pastedText = ref("")
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              h("inputRenderable", {
+                focused: true,
+                onPaste: (val: PasteEvent) => {
+                  pasteSpy(val)
+                  pastedText.value = val.text
+                },
+              }),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 30, height: 5 })
+
+      // Register global handler that prevents paste containing "forbidden"
+      testSetup.renderer.keyInput.on("paste", (event: PasteEvent) => {
+        globalHandlerSpy(event.text)
+        if (event.text.includes("forbidden")) {
+          event.preventDefault()
+        }
+      })
+
+      // First paste should go through
+      await testSetup.mockInput.pasteBracketedText("allowed content")
+      expect(globalHandlerSpy.callCount()).toBe(1)
+      expect(pasteSpy.callCount()).toBe(1)
+      expect(pastedText.value).toBe("allowed content")
+
+      // Reset spies
+      globalHandlerSpy.reset()
+      pasteSpy.reset()
+
+      // Second paste should be prevented
+      await testSetup.mockInput.pasteBracketedText("forbidden content")
+      expect(globalHandlerSpy.callCount()).toBe(1)
+      expect(globalHandlerSpy.calls[0]?.[0]).toBe("forbidden content")
+      expect(pasteSpy.callCount()).toBe(0)
+      expect(pastedText.value).toBe("allowed content") // Should remain unchanged
+    })
+  })
+
+  describe("Dynamic Content", () => {
+    it("should handle dynamic arrays and list updates", async () => {
+      const items = ref(["Item 1", "Item 2"])
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h(
+              "boxRenderable",
+              {},
+              items.value.map((item) => h("textRenderable", { content: item })),
+            )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 20, height: 10 })
+
+      let children = testSetup.renderer.root.getChildren()
+      expect(children.length).toBe(1)
+      let boxChildren = children[0]!.getChildren()
+      expect(boxChildren.length).toBe(2)
+
+      items.value = ["Item 1", "Item 2", "Item 3"]
+      await testSetup.renderOnce()
+
+      children = testSetup.renderer.root.getChildren()
+      boxChildren = children[0]!.getChildren()
+      expect(boxChildren.length).toBe(3)
+
+      items.value = ["Item 1", "Item 3"]
+      await testSetup.renderOnce()
+
+      children = testSetup.renderer.root.getChildren()
+      boxChildren = children[0]!.getChildren()
+      expect(boxChildren.length).toBe(2)
+    })
+
+    it("should handle dynamic text content", async () => {
+      const dynamicText = ref("Initial")
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              h("textRenderable", { content: `Static: ${dynamicText.value}` }),
+              h("textRenderable", { content: "Direct content" }),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 30, height: 8 })
+
+      await testSetup.renderOnce()
+
+      let frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Static: Initial")
+      expect(frame).toContain("Direct content")
+
+      dynamicText.value = "Updated"
+      await testSetup.renderOnce()
+
+      frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Static: Updated")
+      expect(frame).toContain("Direct content")
+    })
+  })
+})
diff --git a/packages/vue/tests/layout.test.ts b/packages/vue/tests/layout.test.ts
new file mode 100644
index 000000000..c83cde1fa
--- /dev/null
+++ b/packages/vue/tests/layout.test.ts
@@ -0,0 +1,429 @@
+import { describe, expect, it, beforeEach, afterEach } from "bun:test"
+import { defineComponent, h, Fragment } from "vue"
+import { testRender } from "../src/test-utils"
+
+let testSetup: Awaited<ReturnType<typeof testRender>>
+
+describe("Vue Renderer | Layout Tests", () => {
+  beforeEach(async () => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+  })
+
+  afterEach(() => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+  })
+
+  describe("Basic Text Rendering", () => {
+    it("should render simple text correctly", async () => {
+      const TestComponent = defineComponent({
+        render() {
+          return h("textRenderable", {}, "Hello World")
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 20,
+        height: 5,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should render multiline text correctly", async () => {
+      const TestComponent = defineComponent({
+        render() {
+          return h("boxRenderable", {}, [
+            h("textRenderable", {}, "Line 1"),
+            h("textRenderable", {}, "Line 2"),
+            h("textRenderable", {}, "Line 3"),
+          ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 15,
+        height: 5,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should render text with dynamic content", async () => {
+      const counter = 42
+
+      const TestComponent = defineComponent({
+        render() {
+          return h("textRenderable", {}, `Counter: ${counter}`)
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 20,
+        height: 3,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+  })
+
+  describe("Box Layout Rendering", () => {
+    it("should render basic box layout correctly", async () => {
+      const TestComponent = defineComponent({
+        render() {
+          return h(
+            "boxRenderable",
+            {
+              style: { width: 20, height: 5, border: true },
+            },
+            [h("textRenderable", {}, "Inside Box")],
+          )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 25,
+        height: 8,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should render nested boxes correctly", async () => {
+      const TestComponent = defineComponent({
+        render() {
+          return h(
+            "boxRenderable",
+            {
+              style: { width: 30, height: 10, border: true },
+              title: "Parent Box",
+            },
+            [
+              h(
+                "boxRenderable",
+                {
+                  style: { left: 2, top: 2, width: 10, height: 3, border: true },
+                },
+                [h("textRenderable", {}, "Nested")],
+              ),
+              h(
+                "textRenderable",
+                {
+                  style: { left: 15, top: 2 },
+                },
+                "Sibling",
+              ),
+            ],
+          )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 35,
+        height: 12,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should render absolute positioned boxes", async () => {
+      const TestComponent = defineComponent({
+        render() {
+          return h(Fragment, [
+            h(
+              "boxRenderable",
+              {
+                style: {
+                  position: "absolute",
+                  left: 0,
+                  top: 0,
+                  width: 10,
+                  height: 3,
+                  border: true,
+                  backgroundColor: "red",
+                },
+              },
+              [h("textRenderable", {}, "Box 1")],
+            ),
+            h(
+              "boxRenderable",
+              {
+                style: {
+                  position: "absolute",
+                  left: 12,
+                  top: 2,
+                  width: 10,
+                  height: 3,
+                  border: true,
+                  backgroundColor: "blue",
+                },
+              },
+              [h("textRenderable", {}, "Box 2")],
+            ),
+          ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 25,
+        height: 8,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should auto-enable border when borderStyle is set", async () => {
+      const TestComponent = defineComponent({
+        render() {
+          return h(
+            "boxRenderable",
+            {
+              style: { width: 20, height: 5 },
+              borderStyle: "single",
+            },
+            [h("textRenderable", {}, "With Border")],
+          )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 25,
+        height: 8,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should auto-enable border when borderColor is set", async () => {
+      const TestComponent = defineComponent({
+        render() {
+          return h(
+            "boxRenderable",
+            {
+              style: { width: 20, height: 5 },
+              borderColor: "cyan",
+            },
+            [h("textRenderable", {}, "Colored Border")],
+          )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 25,
+        height: 8,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+  })
+
+  describe("Complex Layouts", () => {
+    it("should render complex nested layout correctly", async () => {
+      const TestComponent = defineComponent({
+        render() {
+          return h(
+            "boxRenderable",
+            {
+              style: { width: 40, border: true },
+              title: "Complex Layout",
+            },
+            [
+              h(
+                "boxRenderable",
+                {
+                  style: { left: 2, width: 15, height: 5, border: true, backgroundColor: "#333" },
+                },
+                [
+                  h("textRenderable", { style: { fg: "cyan" }, wrapMode: "none" }, "Header Section"),
+                  h("textRenderable", { style: { fg: "yellow" }, wrapMode: "none" }, "Menu Item 1"),
+                  h("textRenderable", { style: { fg: "yellow" }, wrapMode: "none" }, "Menu Item 2"),
+                ],
+              ),
+              h(
+                "boxRenderable",
+                {
+                  style: { left: 18, width: 18, height: 8, border: true, backgroundColor: "#222" },
+                },
+                [
+                  h("textRenderable", { style: { fg: "green" }, wrapMode: "none" }, "Content Area"),
+                  h("textRenderable", { style: { fg: "white" }, wrapMode: "none" }, "Some content here"),
+                  h("textRenderable", { style: { fg: "white" }, wrapMode: "none" }, "More content"),
+                  h("textRenderable", { style: { fg: "magenta" }, wrapMode: "none" }, "Footer text"),
+                ],
+              ),
+              h("textRenderable", { style: { left: 2, fg: "gray" } }, "Status: Ready"),
+            ],
+          )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 45,
+        height: 18,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should render text with mixed styling and layout", async () => {
+      const TestComponent = defineComponent({
+        render() {
+          return h(
+            "boxRenderable",
+            {
+              style: { width: 35, height: 8, border: true },
+            },
+            [
+              h("textRenderable", {}, [
+                h("spanRenderable", { style: { fg: "red", bold: true } }, "ERROR:"),
+                " Something went wrong",
+              ]),
+              h("textRenderable", {}, [
+                h("spanRenderable", { style: { fg: "yellow" } }, "WARNING:"),
+                " Check your settings",
+              ]),
+              h("textRenderable", {}, [
+                h("spanRenderable", { style: { fg: "green" } }, "SUCCESS:"),
+                " All systems operational",
+              ]),
+            ],
+          )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 40,
+        height: 10,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should render scrollbox with sticky scroll and spacer", async () => {
+      const TestComponent = defineComponent({
+        render() {
+          return h(
+            "boxRenderable",
+            {
+              maxHeight: "100%",
+              maxWidth: "100%",
+            },
+            [
+              h(
+                "scrollBoxRenderable",
+                {
+                  scrollbarOptions: { visible: false },
+                  stickyScroll: true,
+                  stickyStart: "bottom",
+                  paddingTop: 1,
+                  paddingBottom: 1,
+                  title: "scroll area",
+                  rootOptions: {
+                    flexGrow: 0,
+                  },
+                  border: true,
+                },
+                [h("boxRenderable", { border: true, height: 10, title: "hi" })],
+              ),
+              h(
+                "boxRenderable",
+                {
+                  border: true,
+                  height: 10,
+                  title: "spacer",
+                  flexShrink: 0,
+                },
+                [h("textRenderable", {}, "spacer")],
+              ),
+            ],
+          )
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 30,
+        height: 25,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+  })
+
+  describe("Empty and Edge Cases", () => {
+    it("should handle empty component", async () => {
+      const TestComponent = defineComponent({
+        render() {
+          return h(Fragment, [])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 10,
+        height: 5,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should handle component with no children", async () => {
+      const TestComponent = defineComponent({
+        render() {
+          return h("boxRenderable", { style: { width: 10, height: 5 } })
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 15,
+        height: 8,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should handle very small dimensions", async () => {
+      const TestComponent = defineComponent({
+        render() {
+          return h("textRenderable", {}, "Hi")
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 5,
+        height: 3,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+  })
+})
diff --git a/packages/vue/tests/portal.test.ts b/packages/vue/tests/portal.test.ts
new file mode 100644
index 000000000..9d19471c5
--- /dev/null
+++ b/packages/vue/tests/portal.test.ts
@@ -0,0 +1,151 @@
+import { describe, expect, it, beforeEach, afterEach } from "bun:test"
+import { defineComponent, h, ref, nextTick } from "vue"
+import { testRender } from "../src/test-utils"
+import { Portal } from "../src/components/Portal"
+
+let testSetup: Awaited<ReturnType<typeof testRender>>
+
+describe("Vue Renderer | Portal Tests", () => {
+  beforeEach(async () => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+  })
+
+  afterEach(() => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+  })
+
+  describe("Basic Portal Rendering", () => {
+    it("should render content to default mount point (root)", async () => {
+      const TestComponent = defineComponent({
+        components: { Portal },
+        render() {
+          return h("boxRenderable", {}, [
+            h("textRenderable", {}, "Before portal"),
+            h(Portal, {}, () => [h("textRenderable", {}, "Portal content")]),
+            h("textRenderable", {}, "After portal"),
+          ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 25,
+        height: 8,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Portal content")
+      expect(frame).toContain("Before portal")
+      expect(frame).toContain("After portal")
+    })
+
+    it("should render content to custom mount point", async () => {
+      const TestComponent = defineComponent({
+        components: { Portal },
+        render() {
+          return h("boxRenderable", {}, [
+            h(Portal, {}, () => [
+              h("boxRenderable", { style: { border: true }, title: "Portal Box" }, [
+                h("textRenderable", {}, "Portal content"),
+              ]),
+            ]),
+          ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 25,
+        height: 8,
+      })
+
+      await testSetup.renderOnce()
+      await nextTick()
+      await testSetup.renderOnce()
+
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Portal content")
+    })
+
+    it("should handle complex nested content in portal", async () => {
+      const TestComponent = defineComponent({
+        components: { Portal },
+        render() {
+          return h("boxRenderable", {}, [
+            h(Portal, {}, () => [h("textRenderable", {}, "Nested text 1"), h("textRenderable", {}, "Nested text 2")]),
+          ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 30,
+        height: 10,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Nested text 1")
+      expect(frame).toContain("Nested text 2")
+    })
+
+    it("should handle portal cleanup on unmount", async () => {
+      const showPortal = ref(true)
+
+      const TestComponent = defineComponent({
+        components: { Portal },
+        setup() {
+          return { showPortal }
+        },
+        render() {
+          return h("boxRenderable", {}, [
+            showPortal.value ? h(Portal, {}, () => [h("textRenderable", {}, "Portal content")]) : null,
+          ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 20,
+        height: 5,
+      })
+
+      await testSetup.renderOnce()
+      let frame = testSetup.captureCharFrame()
+      expect(frame).toContain("Portal content")
+
+      showPortal.value = false
+      await nextTick()
+
+      try {
+        await testSetup.renderOnce()
+      } catch {}
+
+      frame = testSetup.captureCharFrame()
+      expect(frame).not.toContain("Portal content")
+    })
+
+    it("should handle multiple portals", async () => {
+      const TestComponent = defineComponent({
+        components: { Portal },
+        render() {
+          return h("boxRenderable", {}, [
+            h(Portal, {}, () => [h("textRenderable", {}, "First portal")]),
+            h(Portal, {}, () => [h("textRenderable", {}, "Second portal")]),
+          ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 25,
+        height: 8,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toContain("First portal")
+      expect(frame).toContain("Second portal")
+    })
+  })
+})
diff --git a/packages/vue/tests/text-nodes.test.ts b/packages/vue/tests/text-nodes.test.ts
new file mode 100644
index 000000000..466bb4957
--- /dev/null
+++ b/packages/vue/tests/text-nodes.test.ts
@@ -0,0 +1,81 @@
+import { afterEach, beforeEach, describe, expect, it } from "bun:test"
+import { TextRenderable } from "@opentui/core"
+import { defineComponent, h, nextTick, ref } from "vue"
+import { testRender } from "../src/test-utils"
+
+let testSetup: Awaited<ReturnType<typeof testRender>>
+
+describe("Vue Renderer | TextNode Tests", () => {
+  beforeEach(() => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+  })
+
+  afterEach(() => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+  })
+
+  it("renders text nodes under non-text renderables", async () => {
+    const TestComponent = defineComponent({
+      render() {
+        return h(
+          "boxRenderable",
+          { id: "container", style: { width: 20, height: 5, border: true } },
+          "Hello",
+        )
+      },
+    })
+
+    testSetup = await testRender(TestComponent, { width: 22, height: 7 })
+    await testSetup.renderOnce()
+
+    const frame = testSetup.captureCharFrame()
+    expect(frame).toContain("Hello")
+
+    const container = testSetup.renderer.root.findDescendantById("container")!
+    const children = container.getChildren()
+    expect(children.length).toBe(1)
+    expect(children[0]).toBeInstanceOf(TextRenderable)
+  })
+
+  it("removes text-ghost nodes when text is removed", async () => {
+    const show = ref(true)
+
+    const TestComponent = defineComponent({
+      render() {
+        return h(
+          "boxRenderable",
+          { id: "container", style: { width: 20, height: 5, border: true } },
+          show.value ? "Hi" : undefined,
+        )
+      },
+    })
+
+    testSetup = await testRender(TestComponent, { width: 22, height: 7 })
+    await testSetup.renderOnce()
+
+    const container = testSetup.renderer.root.findDescendantById("container")!
+    expect(container.getChildren().length).toBe(1)
+
+    show.value = false
+    await nextTick()
+    await testSetup.renderOnce()
+
+    const remaining = container.getChildren()
+    if (remaining.length === 0) {
+      return
+    }
+
+    expect(remaining.length).toBe(1)
+    const ghost = remaining[0]!
+    expect(ghost).toBeInstanceOf(TextRenderable)
+    const textRenderable = ghost as TextRenderable
+    const contentChunks = textRenderable.content.chunks
+    const combinedText = contentChunks.map((c) => c.text).join("")
+    const trimmedText = combinedText.trim()
+    expect(trimmedText).toBe("")
+  })
+})
diff --git a/packages/vue/tsconfig.json b/packages/vue/tsconfig.json
index 2589b5c34..64df75a51 100644
--- a/packages/vue/tsconfig.json
+++ b/packages/vue/tsconfig.json
@@ -26,7 +26,7 @@
     "noUnusedParameters": false,
     "noPropertyAccessFromIndexSignature": false,
 
-    "types": ["node"],
+    "types": ["node", "bun-types"],
     "skipLibCheck": true
   },
   "include": ["src/**/*", "example/**/*", "types"],
diff --git a/packages/vue/tsconfig.typecheck.json b/packages/vue/tsconfig.typecheck.json
new file mode 100644
index 000000000..86ccaae6b
--- /dev/null
+++ b/packages/vue/tsconfig.typecheck.json
@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": ["bun-types", "node"],
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@opentui/core": ["../core/dist"],
+      "@opentui/core/*": ["../core/dist/*"]
+    }
+  }
+}
diff --git a/packages/vue/types/opentui.d.ts b/packages/vue/types/opentui.d.ts
index 8d58e7c13..6e8297bd5 100644
--- a/packages/vue/types/opentui.d.ts
+++ b/packages/vue/types/opentui.d.ts
@@ -3,19 +3,38 @@ export {}
 import type { DefineComponent } from "vue"
 import type {
   ASCIIFontOptions,
+  BaseRenderable,
   BoxOptions,
+  CodeOptions,
+  DiffRenderableOptions,
   InputRenderableOptions,
+  KeyEvent,
+  LineNumberOptions,
   RenderableOptions,
+  RenderContext,
+  ScrollBoxOptions,
   SelectOption,
   SelectRenderableOptions,
   StyledText,
   TabSelectOption,
   TabSelectRenderableOptions,
+  TextareaOptions,
   TextChunk,
+  TextNodeOptions,
   TextOptions,
-  ScrollBoxOptions,
 } from "@opentui/core"
 
+// ============================================================================
+// Core Type System
+// ============================================================================
+
+/** Base type for any renderable constructor */
+export type RenderableConstructor<TRenderable extends BaseRenderable = BaseRenderable> = new (
+  ctx: RenderContext,
+  options: any,
+) => TRenderable
+
+/** Properties that should not be included in the style prop */
 type NonStyledProps = "buffered" | "live" | "enableLayout" | "selectable"
 
 type ContainerProps<TOptions> = TOptions
@@ -24,6 +43,26 @@ type VueComponentProps<TOptions, TNonStyled extends keyof TOptions> = TOptions &
   style?: Partial<Omit<TOptions, TNonStyled>>
 }
 
+/** Extract the options type from a renderable constructor */
+type ExtractRenderableOptions<TConstructor> = TConstructor extends new (
+  ctx: RenderContext,
+  options: infer TOptions,
+) => any
+  ? TOptions
+  : never
+
+/** Convert renderable constructor to component props with proper style exclusions */
+export type ExtendedComponentProps<TConstructor extends RenderableConstructor> = TConstructor extends new (
+  ctx: RenderContext,
+  options: infer TOptions,
+) => any
+  ? TOptions & { style?: Partial<TOptions> }
+  : never
+
+// ============================================================================
+// Built-in Component Props
+// ============================================================================
+
 export type TextProps = Omit<VueComponentProps<TextOptions, NonStyledProps | "content">, "content"> & {
   children?:
     | string
@@ -61,6 +100,32 @@ export type TabSelectProps = VueComponentProps<TabSelectRenderableOptions, NonSt
   onSelect?: (index: number, option: TabSelectOption | null) => void
 }
 
+export type TextareaProps = VueComponentProps<TextareaOptions, NonStyledProps> & {
+  focused?: boolean
+  onKeyDown?: (event: KeyEvent) => void
+  onKeyPress?: (event: KeyEvent) => void
+  onContentChange?: (content: string) => void
+  onCursorChange?: (position: { line: number; visualColumn: number }) => void
+}
+
+export type CodeProps = VueComponentProps<CodeOptions, NonStyledProps | "content" | "filetype" | "syntaxStyle">
+
+export type DiffProps = VueComponentProps<DiffRenderableOptions, NonStyledProps>
+
+export type LineNumberProps = VueComponentProps<LineNumberOptions, NonStyledProps> & {
+  focused?: boolean
+}
+
+export type SpanProps = VueComponentProps<TextNodeOptions, NonStyledProps>
+
+export type LinkProps = SpanProps & {
+  href: string
+}
+
+// ============================================================================
+// Extended/Dynamic Component System
+// ============================================================================
+
 export type ExtendedIntrinsicElements<TComponentCatalogue extends Record<string, RenderableConstructor>> = {
   [TComponentName in keyof TComponentCatalogue]: ExtendedComponentProps<TComponentCatalogue[TComponentName]>
 }
@@ -69,7 +134,7 @@ export interface OpenTUIComponents {
   [componentName: string]: RenderableConstructor
 }
 
-export function extend<T extends Record<string, any>>(components: T): void
+export function extend<T extends Record<string, RenderableConstructor>>(components: T): void
 
 declare module "@vue/runtime-core" {
   export interface GlobalComponents extends ExtendedIntrinsicElements<OpenTUIComponents> {
@@ -80,6 +145,18 @@ declare module "@vue/runtime-core" {
     tabSelectRenderable: DefineComponent<TabSelectProps>
     textRenderable: DefineComponent<TextProps>
     scrollBoxRenderable: DefineComponent<ScrollBoxProps>
+    textareaRenderable: DefineComponent<TextareaProps>
+    codeRenderable: DefineComponent<CodeProps>
+    diffRenderable: DefineComponent<DiffProps>
+    lineNumberRenderable: DefineComponent<LineNumberProps>
+    spanRenderable: DefineComponent<SpanProps>
+    strongRenderable: DefineComponent<SpanProps>
+    bRenderable: DefineComponent<SpanProps>
+    emRenderable: DefineComponent<SpanProps>
+    iRenderable: DefineComponent<SpanProps>
+    uRenderable: DefineComponent<SpanProps>
+    brRenderable: DefineComponent<{}>
+    aRenderable: DefineComponent<LinkProps>
   }
 }
 
@@ -93,5 +170,17 @@ declare module "@vue/runtime-dom" {
     tabSelectRenderable: TabSelectProps
     textRenderable: TextProps
     scrollBoxRenderable: ScrollBoxProps
+    textareaRenderable: TextareaProps
+    codeRenderable: CodeProps
+    diffRenderable: DiffProps
+    lineNumberRenderable: LineNumberProps
+    spanRenderable: SpanProps
+    strongRenderable: SpanProps
+    bRenderable: SpanProps
+    emRenderable: SpanProps
+    iRenderable: SpanProps
+    uRenderable: SpanProps
+    brRenderable: {}
+    aRenderable: LinkProps
   }
 }

From e3dfa5b4e2e08e718e97214a4008be3d57514c0a Mon Sep 17 00:00:00 2001
From: GreyElaina <GreyElaina@outlook.com>
Date: Wed, 7 Jan 2026 10:16:36 +0800
Subject: [PATCH 2/7] feat(vue): refactor render function to accept CliRenderer
 or config

---
 packages/vue/README.md |  3 +--
 packages/vue/index.ts  | 11 ++++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/vue/README.md b/packages/vue/README.md
index b1ffc81d7..b52460ce4 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -55,11 +55,10 @@ declare module "*.vue" {
 
 ```ts
 // index.ts
-import { createApp } from "vue"
 import { render } from "@opentui/vue"
 import App from "./App.vue"
 
-render(createApp(App))
+render(App)
 ```
 
 ### 6. Create a build script build.ts.
diff --git a/packages/vue/index.ts b/packages/vue/index.ts
index edbf421eb..4303ed61a 100644
--- a/packages/vue/index.ts
+++ b/packages/vue/index.ts
@@ -55,9 +55,14 @@ export function getCurrentCliRenderer(): CliRenderer | null {
   return currentCliRenderer
 }
 
-export async function render(component: Component, rendererConfig: CliRendererConfig = {}): Promise<void> {
+export async function render(
+  component: Component,
+  rendererOrConfig: CliRenderer | CliRendererConfig = {},
+): Promise<void> {
   const { shouldEnableDevtools, devtoolsCleanup } = await initializeDevtools()
-  const cliRenderer = await createCliRenderer(rendererConfig)
+
+  const cliRenderer =
+    rendererOrConfig instanceof CliRenderer ? rendererOrConfig : await createCliRenderer(rendererOrConfig)
   currentCliRenderer = cliRenderer
 
   engine.attach(cliRenderer)
@@ -83,7 +88,7 @@ export async function render(component: Component, rendererConfig: CliRendererCo
     try {
       const { setupOpenTUIDevtools } = await import("./src/devtools")
 
-        ; (app.config as unknown as Record<string, unknown>).devtools = true
+      ;(app.config as unknown as Record<string, unknown>).devtools = true
       setupOpenTUIDevtools(app as App, cliRenderer)
     } catch (e) {
       if (process.env["NODE_ENV"] === "development") {

From c562f52c0346e9eb2d807e8824b509e4c9f9b973 Mon Sep 17 00:00:00 2001
From: GreyElaina <GreyElaina@outlook.com>
Date: Wed, 7 Jan 2026 10:17:57 +0800
Subject: [PATCH 3/7] test(vue): add tests for diff rendering, line numbers,
 and textarea layouts in Vue

- Implement tests for unified and split diff rendering in `diff.test.ts`
- Add tests for line number rendering and conditional removal in `line-number.test.ts`
- Create comprehensive tests for textarea rendering, including basic, prompt-like, and complex layouts in `textarea.test.ts`
---
 packages/vue/tests/diff.test.ts        | 474 ++++++++++++++++++++
 packages/vue/tests/line-number.test.ts | 170 ++++++++
 packages/vue/tests/link.test.ts        |  81 ++++
 packages/vue/tests/textarea.test.ts    | 575 +++++++++++++++++++++++++
 4 files changed, 1300 insertions(+)
 create mode 100644 packages/vue/tests/diff.test.ts
 create mode 100644 packages/vue/tests/line-number.test.ts
 create mode 100644 packages/vue/tests/link.test.ts
 create mode 100644 packages/vue/tests/textarea.test.ts

diff --git a/packages/vue/tests/diff.test.ts b/packages/vue/tests/diff.test.ts
new file mode 100644
index 000000000..8ed66c886
--- /dev/null
+++ b/packages/vue/tests/diff.test.ts
@@ -0,0 +1,474 @@
+import { describe, it, expect, beforeEach, afterEach } from "bun:test"
+import { defineComponent, h, ref, nextTick } from "vue"
+import { testRender } from "../src/test-utils"
+import { SyntaxStyle, RGBA } from "@opentui/core"
+
+let testSetup: Awaited<ReturnType<typeof testRender>>
+
+describe("DiffRenderable with Vue", () => {
+  beforeEach(async () => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+  })
+
+  afterEach(() => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+  })
+
+  it("renders unified diff without glitching", async () => {
+    const syntaxStyle = SyntaxStyle.fromStyles({
+      keyword: { fg: RGBA.fromValues(0.78, 0.57, 0.92, 1) },
+      function: { fg: RGBA.fromValues(0.51, 0.67, 1, 1) },
+      default: { fg: RGBA.fromValues(1, 1, 1, 1) },
+    })
+
+    const diffContent = `--- a/test.js
++++ b/test.js
+@@ -1,7 +1,11 @@
+ function add(a, b) {
+   return a + b;
+ }
+ 
++function subtract(a, b) {
++  return a - b;
++}
++
+ function multiply(a, b) {
+-  return a * b;
++  return a * b * 1;
+ }`
+
+    const TestComponent = defineComponent({
+      setup() {
+        return () =>
+          h("boxRenderable", { id: "root", width: "100%", height: "100%" }, [
+            h("diffRenderable", {
+              id: "test-diff",
+              diff: diffContent,
+              view: "unified",
+              filetype: "javascript",
+              syntaxStyle,
+              showLineNumbers: true,
+              width: "100%",
+              height: "100%",
+            }),
+          ])
+      },
+    })
+
+    testSetup = await testRender(TestComponent)
+
+    // Wait for automatic initial render
+    await Bun.sleep(50)
+
+    const boxRenderable = testSetup.renderer.root.getRenderable("root")
+    const diffRenderable = boxRenderable?.getRenderable("test-diff") as any
+    const leftSide = diffRenderable?.getRenderable("test-diff-left") as any
+    const gutterAfterAutoRender = leftSide?.["gutter"]
+    const widthAfterAutoRender = gutterAfterAutoRender?.width
+
+    // First explicit render
+    await testSetup.renderOnce()
+    const firstFrame = testSetup.captureCharFrame()
+    const widthAfterFirst = leftSide?.["gutter"]?.width
+
+    // Second render to check stability
+    await testSetup.renderOnce()
+    const secondFrame = testSetup.captureCharFrame()
+    const widthAfterSecond = leftSide?.["gutter"]?.width
+
+    // EXPECTATION: No width glitch - width should be correct from auto render
+    expect(widthAfterAutoRender).toBeDefined()
+    expect(widthAfterFirst).toBeDefined()
+    expect(widthAfterSecond).toBeDefined()
+    expect(widthAfterAutoRender).toBe(widthAfterFirst)
+    expect(widthAfterFirst).toBe(widthAfterSecond)
+    expect(widthAfterFirst!).toBeGreaterThan(0)
+
+    // Frames should be identical (no visual changes)
+    expect(firstFrame).toBe(secondFrame)
+
+    // Check content is present
+    expect(firstFrame).toContain("function add")
+    expect(firstFrame).toContain("function subtract")
+    expect(firstFrame).toContain("function multiply")
+
+    // Check for diff markers
+    expect(firstFrame).toContain("+")
+    expect(firstFrame).toContain("-")
+  })
+
+  it("renders split diff correctly", async () => {
+    const syntaxStyle = SyntaxStyle.fromStyles({
+      keyword: { fg: RGBA.fromValues(0.78, 0.57, 0.92, 1) },
+      function: { fg: RGBA.fromValues(0.51, 0.67, 1, 1) },
+      default: { fg: RGBA.fromValues(1, 1, 1, 1) },
+    })
+
+    const diffContent = `--- a/test.js
++++ b/test.js
+@@ -1,3 +1,3 @@
+ function hello() {
+-  console.log("Hello");
++  console.log("Hello, World!");
+ }`
+
+    const TestComponent = defineComponent({
+      setup() {
+        return () =>
+          h("boxRenderable", { id: "root", width: "100%", height: "100%" }, [
+            h("diffRenderable", {
+              id: "test-diff",
+              diff: diffContent,
+              view: "split",
+              filetype: "javascript",
+              syntaxStyle,
+              showLineNumbers: true,
+              width: "100%",
+              height: "100%",
+            }),
+          ])
+      },
+    })
+
+    testSetup = await testRender(TestComponent)
+
+    await testSetup.renderOnce()
+
+    const frame = testSetup.captureCharFrame()
+
+    // Both sides should be visible
+    expect(frame).toContain("function hello")
+    expect(frame).toContain("console.log")
+    expect(frame).toContain("Hello")
+  })
+
+  it("handles double-digit line numbers with proper left padding", async () => {
+    const syntaxStyle = SyntaxStyle.fromStyles({
+      keyword: { fg: RGBA.fromValues(0.78, 0.57, 0.92, 1) },
+      default: { fg: RGBA.fromValues(1, 1, 1, 1) },
+    })
+
+    const diffWith10PlusLines = `--- a/test.js
++++ b/test.js
+@@ -8,10 +8,12 @@
+ line8
+ line9
+ line10
+-line11_old
++line11_new
+ line12
++line13_added
++line14_added
+ line15
+ line16
+-line17_old
++line17_new
+ line18
+ line19`
+
+    const TestComponent = defineComponent({
+      setup() {
+        return () =>
+          h("boxRenderable", { id: "root", width: "100%", height: "100%" }, [
+            h("diffRenderable", {
+              id: "test-diff",
+              diff: diffWith10PlusLines,
+              view: "unified",
+              syntaxStyle,
+              showLineNumbers: true,
+              width: "100%",
+              height: "100%",
+            }),
+          ])
+      },
+    })
+
+    testSetup = await testRender(TestComponent)
+
+    await testSetup.renderOnce()
+
+    const frame = testSetup.captureCharFrame()
+    const frameLines = frame.split("\n")
+
+    // Find lines with single and double digit numbers
+    const line8 = frameLines.find((l) => l.includes("line8"))
+    const line10 = frameLines.find((l) => l.includes("line10"))
+    const line16 = frameLines.find((l) => l.includes("line16"))
+
+    // All lines should have proper left padding
+    if (!line8 || !line10 || !line16) {
+      throw new Error("Expected lines not found in output")
+    }
+
+    // Verify proper left padding for single-digit line numbers
+    const line8Match = line8.match(/^( +)\d+ /)
+    if (!line8Match || !line8Match[1]) throw new Error("Line 8 format incorrect")
+    expect(line8Match[1].length).toBeGreaterThanOrEqual(1)
+
+    // Verify proper left padding for double-digit line numbers (line10)
+    const line10Match = line10.match(/^( +)\d+ /)
+    if (!line10Match || !line10Match[1]) throw new Error("Line 10 format incorrect")
+    expect(line10Match[1].length).toBeGreaterThanOrEqual(1)
+
+    // Verify proper left padding for double-digit line numbers (line16)
+    const line16Match = line16.match(/^( +)\d+ /)
+    if (!line16Match || !line16Match[1]) throw new Error("Line 16 format incorrect")
+    expect(line16Match[1].length).toBeGreaterThanOrEqual(1)
+  })
+
+  it("handles conditional removal of diff element", async () => {
+    const syntaxStyle = SyntaxStyle.fromStyles({
+      keyword: { fg: RGBA.fromValues(0.78, 0.57, 0.92, 1) },
+      function: { fg: RGBA.fromValues(0.51, 0.67, 1, 1) },
+      default: { fg: RGBA.fromValues(1, 1, 1, 1) },
+    })
+
+    const diffContent = `--- a/test.js
++++ b/test.js
+@@ -1,7 +1,11 @@
+ function add(a, b) {
+   return a + b;
+ }
+ 
++function subtract(a, b) {
++  return a - b;
++}
++
+ function multiply(a, b) {
+-  return a * b;
++  return a * b * 1;
+ }`
+
+    const showDiff = ref(true)
+
+    const TestComponent = defineComponent({
+      setup() {
+        return () =>
+          h("boxRenderable", { id: "root", width: "100%", height: "100%" }, [
+            showDiff.value
+              ? h("diffRenderable", {
+                  id: "test-diff",
+                  diff: diffContent,
+                  view: "unified",
+                  filetype: "javascript",
+                  syntaxStyle,
+                  showLineNumbers: true,
+                  width: "100%",
+                  height: "100%",
+                })
+              : h("textRenderable", { id: "fallback-text", width: "100%", height: "100%" }, "No diff to display"),
+          ])
+      },
+    })
+
+    testSetup = await testRender(TestComponent)
+
+    await testSetup.renderOnce()
+
+    let frame = testSetup.captureCharFrame()
+
+    // Initially shows diff content
+    expect(frame).toContain("function add")
+    expect(frame).toContain("function subtract")
+    expect(frame).toContain("+")
+    expect(frame).toContain("-")
+
+    // Toggle to hide diff - this should trigger destruction of DiffRenderable
+    showDiff.value = false
+    await nextTick()
+    await testSetup.renderOnce()
+
+    frame = testSetup.captureCharFrame()
+
+    // Should show fallback text
+    expect(frame).toContain("No diff to display")
+    // Diff content should not be present
+    expect(frame).not.toContain("function add")
+    expect(frame).not.toContain("function subtract")
+
+    // Toggle back to show diff - this should create a new DiffRenderable
+    showDiff.value = true
+    await nextTick()
+    await testSetup.renderOnce()
+
+    frame = testSetup.captureCharFrame()
+
+    // Diff should be visible again
+    expect(frame).toContain("function add")
+    expect(frame).toContain("function subtract")
+  })
+
+  it("handles conditional removal of split diff element", async () => {
+    const syntaxStyle = SyntaxStyle.fromStyles({
+      keyword: { fg: RGBA.fromValues(0.78, 0.57, 0.92, 1) },
+      function: { fg: RGBA.fromValues(0.51, 0.67, 1, 1) },
+      default: { fg: RGBA.fromValues(1, 1, 1, 1) },
+    })
+
+    const diffContent = `--- a/test.js
++++ b/test.js
+@@ -1,3 +1,3 @@
+ function hello() {
+-  console.log("Hello");
++  console.log("Hello, World!");
+ }`
+
+    const showDiff = ref(true)
+
+    const TestComponent = defineComponent({
+      setup() {
+        return () =>
+          h("boxRenderable", { id: "root", width: "100%", height: "100%" }, [
+            showDiff.value
+              ? h("diffRenderable", {
+                  id: "test-diff",
+                  diff: diffContent,
+                  view: "split",
+                  filetype: "javascript",
+                  syntaxStyle,
+                  showLineNumbers: true,
+                  width: "100%",
+                  height: "100%",
+                })
+              : h("textRenderable", { id: "fallback-text", width: "100%", height: "100%" }, "No diff to display"),
+          ])
+      },
+    })
+
+    testSetup = await testRender(TestComponent)
+
+    await testSetup.renderOnce()
+
+    let frame = testSetup.captureCharFrame()
+
+    // Initially shows diff content in split view
+    expect(frame).toContain("function hello")
+    expect(frame).toContain("console.log")
+
+    // Toggle to hide diff - this should trigger destruction of DiffRenderable with split view
+    showDiff.value = false
+    await nextTick()
+    await testSetup.renderOnce()
+
+    frame = testSetup.captureCharFrame()
+
+    // Should show fallback text
+    expect(frame).toContain("No diff to display")
+    // Diff content should not be present
+    expect(frame).not.toContain("function hello")
+
+    // Toggle back to show diff - this should create a new DiffRenderable
+    showDiff.value = true
+    await nextTick()
+    await testSetup.renderOnce()
+
+    frame = testSetup.captureCharFrame()
+
+    // Diff should be visible again
+    expect(frame).toContain("function hello")
+  })
+
+  it("split diff with word wrapping: toggling vs setting from start should match", async () => {
+    const syntaxStyle = SyntaxStyle.fromStyles({
+      keyword: { fg: RGBA.fromValues(0.78, 0.57, 0.92, 1) },
+      "keyword.import": { fg: RGBA.fromValues(0.78, 0.57, 0.92, 1) },
+      string: { fg: RGBA.fromValues(0.65, 0.84, 1, 1) },
+      comment: { fg: RGBA.fromValues(0.55, 0.58, 0.62, 1), italic: true },
+      function: { fg: RGBA.fromValues(0.51, 0.67, 1, 1) },
+      default: { fg: RGBA.fromValues(0.9, 0.93, 0.95, 1) },
+    })
+
+    // Use the actual diff content from the demo
+    const diffContent = `Index: packages/core/src/examples/index.ts
+===================================================================
+--- packages/core/src/examples/index.ts	before
++++ packages/core/src/examples/index.ts	after
+@@ -56,6 +56,7 @@
+ import * as terminalDemo from "./terminal"
+ import * as diffDemo from "./diff-demo"
+ import * as keypressDebugDemo from "./keypress-debug-demo"
++import * as textTruncationDemo from "./text-truncation-demo"
+ import { setupCommonDemoKeys } from "./lib/standalone-keys"
+ 
+ interface Example {
+@@ -85,6 +86,12 @@
+     destroy: textSelectionExample.destroy,
+   },
+   {
++    name: "Text Truncation Demo",
++    description: "Middle truncation with ellipsis - toggle with 'T' key and resize to test responsive behavior",
++    run: textTruncationDemo.run,
++    destroy: textTruncationDemo.destroy,
++  },
++  {
+     name: "ASCII Font Selection Demo",
+     description: "Text selection with ASCII fonts - precise character-level selection across different font types",
+     run: asciiFontSelectionExample.run,`
+
+    const wrapMode = ref<"none" | "word">("none")
+
+    const TestComponent = defineComponent({
+      setup() {
+        return () =>
+          h("boxRenderable", { id: "root", width: "100%", height: "100%" }, [
+            h("diffRenderable", {
+              id: "test-diff-toggle",
+              diff: diffContent,
+              view: "split",
+              filetype: "typescript",
+              syntaxStyle,
+              showLineNumbers: true,
+              wrapMode: wrapMode.value,
+              width: "100%",
+              height: "100%",
+            }),
+          ])
+      },
+    })
+
+    testSetup = await testRender(TestComponent)
+
+    await testSetup.renderOnce()
+    wrapMode.value = "word"
+    await nextTick()
+    await Bun.sleep(10)
+    await testSetup.renderer.idle()
+
+    const frameAfterToggle = testSetup.captureCharFrame()
+
+    testSetup.renderer.destroy()
+
+    // Create a new test with word wrap from the start
+    const TestComponentFromStart = defineComponent({
+      setup() {
+        return () =>
+          h("boxRenderable", { id: "root", width: "100%", height: "100%" }, [
+            h("diffRenderable", {
+              id: "test-diff-from-start",
+              diff: diffContent,
+              view: "split",
+              filetype: "typescript",
+              syntaxStyle,
+              showLineNumbers: true,
+              wrapMode: "word",
+              width: "100%",
+              height: "100%",
+            }),
+          ])
+      },
+    })
+
+    testSetup = await testRender(TestComponentFromStart)
+
+    await Bun.sleep(10)
+    await testSetup.renderer.idle()
+
+    const frameFromStart = testSetup.captureCharFrame()
+
+    expect(frameAfterToggle).toBe(frameFromStart)
+  })
+})
diff --git a/packages/vue/tests/line-number.test.ts b/packages/vue/tests/line-number.test.ts
new file mode 100644
index 000000000..71c52c6fe
--- /dev/null
+++ b/packages/vue/tests/line-number.test.ts
@@ -0,0 +1,170 @@
+import { describe, it, expect, beforeEach, afterEach } from "bun:test"
+import { defineComponent, h, ref, nextTick } from "vue"
+import { testRender } from "../src/test-utils"
+import { SyntaxStyle } from "@opentui/core"
+import { MockTreeSitterClient } from "@opentui/core/testing"
+
+let testSetup: Awaited<ReturnType<typeof testRender>>
+let mockTreeSitterClient: MockTreeSitterClient
+
+describe("Vue Renderer | LineNumberRenderable Tests", () => {
+  beforeEach(async () => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+    mockTreeSitterClient = new MockTreeSitterClient()
+    mockTreeSitterClient.setMockResult({ highlights: [] })
+  })
+
+  afterEach(() => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+  })
+
+  it("renders code with line numbers", async () => {
+    const syntaxStyle = SyntaxStyle.fromStyles({
+      keyword: { fg: "#C792EA" },
+      function: { fg: "#82AAFF" },
+      default: { fg: "#FFFFFF" },
+    })
+
+    const codeContent = `function test() {
+  return 42
+}
+console.log(test())`
+
+    const TestComponent = defineComponent({
+      setup() {
+        return () =>
+          h("boxRenderable", { id: "root", style: { width: "100%", height: "100%" } }, [
+            h(
+              "lineNumberRenderable",
+              {
+                id: "line-numbers",
+                fg: "#888888",
+                bg: "#000000",
+                minWidth: 3,
+                paddingRight: 1,
+                style: { width: "100%", height: "100%" },
+              },
+              [
+                h("codeRenderable", {
+                  id: "code-content",
+                  content: codeContent,
+                  filetype: "javascript",
+                  syntaxStyle: syntaxStyle,
+                  treeSitterClient: mockTreeSitterClient,
+                  style: { width: "100%", height: "100%" },
+                }),
+              ],
+            ),
+          ])
+      },
+    })
+
+    testSetup = await testRender(TestComponent, {
+      width: 40,
+      height: 10,
+    })
+
+    await testSetup.renderOnce()
+
+    mockTreeSitterClient.resolveAllHighlightOnce()
+    await new Promise((resolve) => setTimeout(resolve, 10))
+    await testSetup.renderOnce()
+
+    const frame = testSetup.captureCharFrame()
+
+    // Basic checks
+    expect(frame).toContain("function test()")
+    expect(frame).toContain(" 1 ") // Line number 1
+    expect(frame).toContain(" 2 ") // Line number 2
+    expect(frame).toContain(" 3 ") // Line number 3
+    expect(frame).toContain(" 4 ") // Line number 4
+  })
+
+  it("handles conditional removal of line number element", async () => {
+    const syntaxStyle = SyntaxStyle.fromStyles({
+      keyword: { fg: "#C792EA" },
+      function: { fg: "#82AAFF" },
+      default: { fg: "#FFFFFF" },
+    })
+
+    const codeContent = `function test() {
+  return 42
+}
+console.log(test())`
+
+    const showLineNumbers = ref(true)
+
+    const TestComponent = defineComponent({
+      setup() {
+        return () =>
+          h("boxRenderable", { id: "root", style: { width: "100%", height: "100%" } }, [
+            showLineNumbers.value
+              ? h(
+                  "lineNumberRenderable",
+                  {
+                    id: "line-numbers",
+                    fg: "#888888",
+                    bg: "#000000",
+                    minWidth: 3,
+                    paddingRight: 1,
+                    style: { width: "100%", height: "100%" },
+                  },
+                  [
+                    h("codeRenderable", {
+                      id: "code-content",
+                      content: codeContent,
+                      filetype: "javascript",
+                      syntaxStyle: syntaxStyle,
+                      treeSitterClient: mockTreeSitterClient,
+                      style: { width: "100%", height: "100%" },
+                    }),
+                  ],
+                )
+              : h("codeRenderable", {
+                  id: "code-content-no-lines",
+                  content: codeContent,
+                  filetype: "javascript",
+                  syntaxStyle: syntaxStyle,
+                  treeSitterClient: mockTreeSitterClient,
+                  style: { width: "100%", height: "100%" },
+                }),
+          ])
+      },
+    })
+
+    testSetup = await testRender(TestComponent, {
+      width: 40,
+      height: 10,
+    })
+
+    await testSetup.renderOnce()
+    mockTreeSitterClient.resolveAllHighlightOnce()
+    await new Promise((resolve) => setTimeout(resolve, 10))
+    await testSetup.renderOnce()
+
+    let frame = testSetup.captureCharFrame()
+
+    // Initially shows line numbers
+    expect(frame).toContain(" 1 ")
+    expect(frame).toContain(" 2 ")
+
+    // Toggle to hide line numbers - this should trigger destruction of LineNumberRenderable
+    showLineNumbers.value = false
+    await nextTick()
+    await testSetup.renderOnce()
+    mockTreeSitterClient.resolveAllHighlightOnce()
+    await new Promise((resolve) => setTimeout(resolve, 10))
+    await testSetup.renderOnce()
+
+    frame = testSetup.captureCharFrame()
+
+    // Should still show code but without line numbers
+    expect(frame).toContain("function test()")
+    // Line numbers should not be present
+    expect(frame).not.toContain(" 1 function")
+  })
+})
diff --git a/packages/vue/tests/link.test.ts b/packages/vue/tests/link.test.ts
new file mode 100644
index 000000000..de92d8706
--- /dev/null
+++ b/packages/vue/tests/link.test.ts
@@ -0,0 +1,81 @@
+import { describe, expect, it, beforeEach, afterEach } from "bun:test"
+import { link, t, underline, blue } from "@opentui/core"
+import { defineComponent, h } from "vue"
+import { testRender } from "../src/test-utils"
+
+let testSetup: Awaited<ReturnType<typeof testRender>>
+
+describe("Vue Renderer | Link Rendering Tests", () => {
+  beforeEach(() => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+  })
+
+  afterEach(() => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+  })
+
+  it("should render link with href correctly", async () => {
+    const styledText = t`Visit ${link("https://opentui.com")("opentui.com")} for more info`
+
+    const TestComponent = defineComponent({
+      render() {
+        return h("textRenderable", { content: styledText })
+      },
+    })
+
+    testSetup = await testRender(TestComponent, {
+      width: 50,
+      height: 5,
+    })
+
+    await testSetup.renderOnce()
+    const frame = testSetup.captureCharFrame()
+
+    expect(frame).toContain("Visit opentui.com for more info")
+  })
+
+  it("should render styled link with underline", async () => {
+    const styledText = t`${underline(blue(link("https://opentui.com")("opentui.com")))}`
+
+    const TestComponent = defineComponent({
+      render() {
+        return h("textRenderable", { content: styledText })
+      },
+    })
+
+    testSetup = await testRender(TestComponent, {
+      width: 50,
+      height: 5,
+    })
+
+    await testSetup.renderOnce()
+    const frame = testSetup.captureCharFrame()
+
+    expect(frame).toContain("opentui.com")
+  })
+
+  it("should render link inside text with other elements", async () => {
+    const styledText = t`Check out ${link("https://github.com/sst/opentui")("GitHub")} and ${link("https://opentui.com")("our website")}`
+
+    const TestComponent = defineComponent({
+      render() {
+        return h("textRenderable", { content: styledText })
+      },
+    })
+
+    testSetup = await testRender(TestComponent, {
+      width: 60,
+      height: 5,
+    })
+
+    await testSetup.renderOnce()
+    const frame = testSetup.captureCharFrame()
+
+    expect(frame).toContain("GitHub")
+    expect(frame).toContain("our website")
+  })
+})
diff --git a/packages/vue/tests/textarea.test.ts b/packages/vue/tests/textarea.test.ts
new file mode 100644
index 000000000..a46e12bc8
--- /dev/null
+++ b/packages/vue/tests/textarea.test.ts
@@ -0,0 +1,575 @@
+import { describe, expect, it, beforeEach, afterEach } from "bun:test"
+import { defineComponent, h, ref } from "vue"
+import { testRender } from "../src/test-utils"
+import { TextAttributes } from "@opentui/core"
+
+let testSetup: Awaited<ReturnType<typeof testRender>>
+
+describe("Vue Renderer | Textarea Layout Tests", () => {
+  beforeEach(async () => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+  })
+
+  afterEach(() => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+  })
+
+  describe("Basic Textarea Rendering", () => {
+    it("should render simple textarea correctly", async () => {
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("textareaRenderable", {
+              initialValue: "Hello World",
+              width: 20,
+              height: 5,
+              backgroundColor: "#1e1e1e",
+              textColor: "#ffffff",
+            })
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 30,
+        height: 10,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should render multiline textarea content", async () => {
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("textareaRenderable", {
+              initialValue: "Line 1\nLine 2\nLine 3",
+              width: 20,
+              height: 10,
+              backgroundColor: "#1e1e1e",
+              textColor: "#ffffff",
+            })
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 30,
+        height: 15,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should render textarea with word wrapping", async () => {
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("textareaRenderable", {
+              initialValue: "This is a very long line that should wrap to multiple lines when word wrapping is enabled",
+              wrapMode: "word",
+              width: 20,
+              backgroundColor: "#1e1e1e",
+              textColor: "#ffffff",
+            })
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 30,
+        height: 15,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should render textarea with placeholder", async () => {
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("textareaRenderable", {
+              initialValue: "",
+              placeholder: "Type something here...",
+              placeholderColor: "#666666",
+              width: 30,
+              height: 5,
+              backgroundColor: "#1e1e1e",
+              textColor: "#ffffff",
+            })
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 40,
+        height: 10,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+  })
+
+  describe("Prompt-like Layout", () => {
+    it("should render textarea in prompt-style layout with indicator", async () => {
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", { border: true, borderColor: "#444444" }, [
+              h("boxRenderable", { flexDirection: "row" }, [
+                h(
+                  "boxRenderable",
+                  { width: 3, justifyContent: "center", alignItems: "center", backgroundColor: "#2d2d2d" },
+                  [h("textRenderable", { attributes: TextAttributes.BOLD, fg: "#00ff00" }, ">")],
+                ),
+                h("boxRenderable", { paddingTop: 1, paddingBottom: 1, backgroundColor: "#1e1e1e", flexGrow: 1 }, [
+                  h("textareaRenderable", {
+                    initialValue: "Hello from the prompt",
+                    flexShrink: 1,
+                    backgroundColor: "#1e1e1e",
+                    textColor: "#ffffff",
+                    cursorColor: "#00ff00",
+                  }),
+                ]),
+                h("boxRenderable", { backgroundColor: "#1e1e1e", width: 1 }),
+              ]),
+              h("boxRenderable", { flexDirection: "row", justifyContent: "space-between" }, [
+                h("textRenderable", { wrapMode: "none" }, [
+                  h("spanRenderable", { style: { fg: "#888888" } }, "provider"),
+                  " ",
+                  h("spanRenderable", { style: { bold: true } }, "model-name"),
+                ]),
+                h("textRenderable", { fg: "#888888" }, "ctrl+p commands"),
+              ]),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 60,
+        height: 15,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should render textarea with long wrapping text in prompt layout", async () => {
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", { border: true, borderColor: "#444444", width: "100%" }, [
+              h("boxRenderable", { flexDirection: "row", width: "100%" }, [
+                h(
+                  "boxRenderable",
+                  { width: 3, justifyContent: "center", alignItems: "center", backgroundColor: "#2d2d2d" },
+                  [h("textRenderable", { attributes: TextAttributes.BOLD, fg: "#00ff00" }, ">")],
+                ),
+                h("boxRenderable", { paddingTop: 1, paddingBottom: 1, backgroundColor: "#1e1e1e", flexGrow: 1 }, [
+                  h("textareaRenderable", {
+                    initialValue:
+                      "This is a very long prompt that will wrap across multiple lines in the textarea. It should maintain proper layout with the indicator on the left.",
+                    wrapMode: "word",
+                    flexShrink: 1,
+                    backgroundColor: "#1e1e1e",
+                    textColor: "#ffffff",
+                  }),
+                ]),
+                h("boxRenderable", { backgroundColor: "#1e1e1e", width: 1 }),
+              ]),
+              h("boxRenderable", { flexDirection: "row" }, [
+                h("textRenderable", { wrapMode: "none" }, [
+                  h("spanRenderable", { style: { fg: "#888888" } }, "openai"),
+                  " ",
+                  h("spanRenderable", { style: { bold: true } }, "gpt-4"),
+                ]),
+              ]),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 50,
+        height: 20,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should render textarea in shell mode with different indicator", async () => {
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", { border: true, borderColor: "#ff9900" }, [
+              h("boxRenderable", { flexDirection: "row" }, [
+                h(
+                  "boxRenderable",
+                  { width: 3, justifyContent: "center", alignItems: "center", backgroundColor: "#2d2d2d" },
+                  [h("textRenderable", { attributes: TextAttributes.BOLD, fg: "#ff9900" }, "!")],
+                ),
+                h("boxRenderable", { paddingTop: 1, paddingBottom: 1, backgroundColor: "#1e1e1e", flexGrow: 1 }, [
+                  h("textareaRenderable", {
+                    initialValue: "ls -la",
+                    flexShrink: 1,
+                    backgroundColor: "#1e1e1e",
+                    textColor: "#ffffff",
+                    cursorColor: "#ff9900",
+                  }),
+                ]),
+                h("boxRenderable", { backgroundColor: "#1e1e1e", width: 1 }),
+              ]),
+              h("boxRenderable", { flexDirection: "row" }, [h("textRenderable", { fg: "#888888" }, "shell mode")]),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 50,
+        height: 12,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+  })
+
+  describe("Complex Layouts with Multiple Textareas", () => {
+    it("should render multiple textareas in a column layout", async () => {
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", { border: true, title: "Chat" }, [
+              h("boxRenderable", { border: true, borderColor: "#00ff00", marginBottom: 1 }, [
+                h("boxRenderable", { flexDirection: "row" }, [
+                  h("boxRenderable", { width: 5, backgroundColor: "#2d2d2d" }, [
+                    h("textRenderable", { fg: "#00ff00" }, "User"),
+                  ]),
+                  h("boxRenderable", { paddingLeft: 1, backgroundColor: "#1e1e1e", flexGrow: 1 }, [
+                    h("textareaRenderable", {
+                      initialValue: "What is the weather like today?",
+                      wrapMode: "word",
+                      backgroundColor: "#1e1e1e",
+                      textColor: "#ffffff",
+                    }),
+                  ]),
+                ]),
+              ]),
+              h("boxRenderable", { border: true, borderColor: "#0088ff" }, [
+                h("boxRenderable", { flexDirection: "row" }, [
+                  h("boxRenderable", { width: 5, backgroundColor: "#2d2d2d" }, [
+                    h("textRenderable", { fg: "#0088ff" }, "AI"),
+                  ]),
+                  h("boxRenderable", { paddingLeft: 1, backgroundColor: "#1e1e1e", flexGrow: 1 }, [
+                    h("textareaRenderable", {
+                      initialValue:
+                        "I don't have access to real-time weather data, but I can help you find that information through various weather services.",
+                      wrapMode: "word",
+                      backgroundColor: "#1e1e1e",
+                      textColor: "#ffffff",
+                    }),
+                  ]),
+                ]),
+              ]),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 60,
+        height: 25,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should handle nested boxes with textareas at different positions", async () => {
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", { style: { width: 50, border: true }, title: "Layout Test" }, [
+              h("boxRenderable", { flexDirection: "row", gap: 1 }, [
+                h("boxRenderable", { width: 20, border: true, borderColor: "#00ff00" }, [
+                  h("textRenderable", { fg: "#00ff00" }, "Input 1:"),
+                  h("textareaRenderable", {
+                    initialValue: "Left panel content",
+                    wrapMode: "word",
+                    backgroundColor: "#1e1e1e",
+                    textColor: "#ffffff",
+                    flexShrink: 1,
+                  }),
+                ]),
+                h("boxRenderable", { flexGrow: 1, border: true, borderColor: "#0088ff" }, [
+                  h("textRenderable", { fg: "#0088ff" }, "Input 2:"),
+                  h("textareaRenderable", {
+                    initialValue: "Right panel with longer content that may wrap",
+                    wrapMode: "word",
+                    backgroundColor: "#1e1e1e",
+                    textColor: "#ffffff",
+                    flexShrink: 1,
+                  }),
+                ]),
+              ]),
+              h("boxRenderable", { border: true, borderColor: "#ff9900", marginTop: 1 }, [
+                h("textRenderable", { fg: "#ff9900" }, "Bottom input:"),
+                h("textareaRenderable", {
+                  initialValue: "Bottom panel spanning full width",
+                  wrapMode: "word",
+                  backgroundColor: "#1e1e1e",
+                  textColor: "#ffffff",
+                  flexShrink: 1,
+                }),
+              ]),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 55,
+        height: 25,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+  })
+
+  describe("FlexShrink Regression Tests", () => {
+    it("should not shrink box when width is set via setter", async () => {
+      const indicatorWidth = ref<number | undefined>(undefined)
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", { border: true }, [
+              h("boxRenderable", { flexDirection: "row" }, [
+                h("boxRenderable", { width: indicatorWidth.value, backgroundColor: "#f00" }, [
+                  h("textRenderable", {}, ">"),
+                ]),
+                h("boxRenderable", { backgroundColor: "#0f0", flexGrow: 1 }, [
+                  h("textRenderable", {}, "Content that takes up space"),
+                ]),
+              ]),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 30, height: 5 })
+
+      await testSetup.renderOnce()
+
+      indicatorWidth.value = 5
+      await testSetup.renderOnce()
+
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should not shrink box when height is set via setter in column layout", async () => {
+      const headerHeight = ref<number | undefined>(undefined)
+
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", { border: true, width: 25, height: 10 }, [
+              h("boxRenderable", { flexDirection: "column", height: "100%" }, [
+                h("boxRenderable", { height: headerHeight.value, backgroundColor: "#f00" }, [
+                  h("textRenderable", {}, "Header"),
+                ]),
+                h("boxRenderable", { backgroundColor: "#0f0", flexGrow: 1 }, [
+                  h("textareaRenderable", { initialValue: "Line1\nLine2\nLine3\nLine4\nLine5\nLine6\nLine7\nLine8" }),
+                ]),
+                h("boxRenderable", { height: 2, backgroundColor: "#00f" }, [h("textRenderable", {}, "Footer")]),
+              ]),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, { width: 30, height: 15 })
+
+      await testSetup.renderOnce()
+
+      headerHeight.value = 3
+      await testSetup.renderOnce()
+
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+  })
+
+  describe("Edge Cases and Styling", () => {
+    it("should render textarea with focused colors", async () => {
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", { border: true }, [
+              h("boxRenderable", { flexDirection: "row" }, [
+                h("boxRenderable", { width: 3, backgroundColor: "#2d2d2d" }, [h("textRenderable", {}, ">")]),
+                h("boxRenderable", { backgroundColor: "#1e1e1e", flexGrow: 1, paddingTop: 1, paddingBottom: 1 }, [
+                  h("textareaRenderable", {
+                    initialValue: "Focused textarea",
+                    backgroundColor: "#1e1e1e",
+                    textColor: "#888888",
+                    focusedBackgroundColor: "#2d2d2d",
+                    focusedTextColor: "#ffffff",
+                    flexShrink: 1,
+                  }),
+                ]),
+              ]),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 40,
+        height: 10,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should render empty textarea with placeholder in prompt layout", async () => {
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", { border: true, borderColor: "#444444" }, [
+              h("boxRenderable", { flexDirection: "row" }, [
+                h(
+                  "boxRenderable",
+                  { width: 3, justifyContent: "center", alignItems: "center", backgroundColor: "#2d2d2d" },
+                  [h("textRenderable", { attributes: TextAttributes.BOLD, fg: "#00ff00" }, ">")],
+                ),
+                h("boxRenderable", { paddingTop: 1, paddingBottom: 1, backgroundColor: "#1e1e1e", flexGrow: 1 }, [
+                  h("textareaRenderable", {
+                    initialValue: "",
+                    placeholder: "Enter your prompt here...",
+                    placeholderColor: "#666666",
+                    flexShrink: 1,
+                    backgroundColor: "#1e1e1e",
+                    textColor: "#ffffff",
+                  }),
+                ]),
+                h("boxRenderable", { backgroundColor: "#1e1e1e", width: 1 }),
+              ]),
+              h("boxRenderable", { flexDirection: "row" }, [h("textRenderable", { fg: "#888888" }, "Ready to chat")]),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 50,
+        height: 12,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should render textarea with very long single line", async () => {
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", { border: true }, [
+              h("boxRenderable", { flexDirection: "row" }, [
+                h("boxRenderable", { width: 3, backgroundColor: "#2d2d2d" }, [h("textRenderable", {}, ">")]),
+                h("boxRenderable", { backgroundColor: "#1e1e1e", flexGrow: 1, paddingTop: 1, paddingBottom: 1 }, [
+                  h("textareaRenderable", {
+                    initialValue: "ThisIsAVeryLongLineWithNoSpacesThatWillWrapByCharacterWhenCharWrappingIsEnabled",
+                    wrapMode: "char",
+                    flexShrink: 1,
+                    backgroundColor: "#1e1e1e",
+                    textColor: "#ffffff",
+                  }),
+                ]),
+              ]),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 40,
+        height: 15,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+
+    it("should render full prompt-like layout with all components", async () => {
+      const TestComponent = defineComponent({
+        setup() {
+          return () =>
+            h("boxRenderable", {}, [
+              h("boxRenderable", { border: true, borderColor: "#444444" }, [
+                h("boxRenderable", { flexDirection: "row" }, [
+                  h(
+                    "boxRenderable",
+                    { width: 3, justifyContent: "center", alignItems: "center", backgroundColor: "#2d2d2d" },
+                    [h("textRenderable", { attributes: TextAttributes.BOLD, fg: "#00ff00" }, ">")],
+                  ),
+                  h("boxRenderable", { paddingTop: 1, paddingBottom: 1, backgroundColor: "#1e1e1e", flexGrow: 1 }, [
+                    h("textareaRenderable", {
+                      initialValue: "Explain how async/await works in JavaScript and provide some examples",
+                      wrapMode: "word",
+                      flexShrink: 1,
+                      backgroundColor: "#1e1e1e",
+                      textColor: "#ffffff",
+                      cursorColor: "#00ff00",
+                    }),
+                  ]),
+                  h("boxRenderable", {
+                    backgroundColor: "#1e1e1e",
+                    width: 1,
+                    justifyContent: "center",
+                    alignItems: "center",
+                  }),
+                ]),
+                h("boxRenderable", { flexDirection: "row", justifyContent: "space-between" }, [
+                  h("textRenderable", { flexShrink: 0, wrapMode: "none" }, [
+                    h("spanRenderable", { style: { fg: "#888888" } }, "openai"),
+                    " ",
+                    h("spanRenderable", { style: { bold: true } }, "gpt-4-turbo"),
+                  ]),
+                  h("textRenderable", {}, ["ctrl+p ", h("spanRenderable", { style: { fg: "#888888" } }, "commands")]),
+                ]),
+              ]),
+              h("boxRenderable", { marginTop: 1 }, [
+                h(
+                  "textRenderable",
+                  { fg: "#666666", wrapMode: "word" },
+                  "Tip: Use arrow keys to navigate through history when cursor is at the start",
+                ),
+              ]),
+            ])
+        },
+      })
+
+      testSetup = await testRender(TestComponent, {
+        width: 70,
+        height: 20,
+      })
+
+      await testSetup.renderOnce()
+      const frame = testSetup.captureCharFrame()
+      expect(frame).toMatchSnapshot()
+    })
+  })
+})

From f9761a21f367a3f2a13d78873c38997bc1b19742 Mon Sep 17 00:00:00 2001
From: GreyElaina <GreyElaina@outlook.com>
Date: Wed, 7 Jan 2026 10:18:16 +0800
Subject: [PATCH 4/7] chore(vue): remove unused onKeyPress prop from
 TextareaProps

---
 packages/vue/types/opentui.d.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/vue/types/opentui.d.ts b/packages/vue/types/opentui.d.ts
index 6e8297bd5..22403c203 100644
--- a/packages/vue/types/opentui.d.ts
+++ b/packages/vue/types/opentui.d.ts
@@ -103,7 +103,6 @@ export type TabSelectProps = VueComponentProps<TabSelectRenderableOptions, NonSt
 export type TextareaProps = VueComponentProps<TextareaOptions, NonStyledProps> & {
   focused?: boolean
   onKeyDown?: (event: KeyEvent) => void
-  onKeyPress?: (event: KeyEvent) => void
   onContentChange?: (content: string) => void
   onCursorChange?: (position: { line: number; visualColumn: number }) => void
 }

From bf3c55714b1c4a0b0bcd14002bc354cbd20bc0b4 Mon Sep 17 00:00:00 2001
From: GreyElaina <GreyElaina@outlook.com>
Date: Wed, 7 Jan 2026 10:20:26 +0800
Subject: [PATCH 5/7] chore(vue): add test script to package.json

---
 packages/vue/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/vue/package.json b/packages/vue/package.json
index 939c4d220..f8463a367 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -22,6 +22,7 @@
     "build": "bun scripts/build.ts",
     "publish": "bun scripts/publish.ts",
     "start:example": "bun run typecheck && bun scripts/build-examples.ts && bun example/dist/main.js",
+    "test": "bun test",
     "typecheck": "bunx vue-tsc --noEmit -p tsconfig.typecheck.json"
   },
   "dependencies": {

From 762c52ec59872141f9b9b6955e3b847e92e526a0 Mon Sep 17 00:00:00 2001
From: GreyElaina <GreyElaina@outlook.com>
Date: Thu, 8 Jan 2026 09:39:44 +0800
Subject: [PATCH 6/7] feat(vue): add clear highlight action to devtools

---
 packages/vue/src/devtools/index.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/vue/src/devtools/index.ts b/packages/vue/src/devtools/index.ts
index ed7d1b185..da7c3eb91 100644
--- a/packages/vue/src/devtools/index.ts
+++ b/packages/vue/src/devtools/index.ts
@@ -153,6 +153,13 @@ export function setupOpenTUIDevtools(app: App, cliRenderer: CliRenderer): void {
               }
             },
           },
+          {
+            icon: "highlight_off",
+            tooltip: "Clear highlight",
+            action: () => {
+              highlightController.clear()
+            },
+          },
         ],
         nodeActions: [
           {
@@ -203,7 +210,10 @@ export function setupOpenTUIDevtools(app: App, cliRenderer: CliRenderer): void {
           return
         }
         const renderable = findRenderableById(cliRenderer, payload.nodeId)
-        if (!renderable) return
+        if (!renderable) {
+          highlightController.clear()
+          return
+        }
 
         payload.state = getRenderableState(renderable)
         if (getSettings().highlightOnSelect) {

From 155513485af590684ae6661613d5c18865dcaf5a Mon Sep 17 00:00:00 2001
From: GreyElaina <GreyElaina@outlook.com>
Date: Thu, 8 Jan 2026 14:40:27 +0800
Subject: [PATCH 7/7] refactor(vue): use kebab-case for multi-word component
 names

---
 packages/vue/README.md                   |  38 ++--
 packages/vue/example/ASCII.vue           |  14 +-
 packages/vue/example/Animation.vue       |  36 ++--
 packages/vue/example/App.vue             |   8 +-
 packages/vue/example/Code.vue            |  18 +-
 packages/vue/example/Counter.vue         |  12 +-
 packages/vue/example/Diff.vue            |  24 ++-
 packages/vue/example/ExtendExample.vue   |   8 +-
 packages/vue/example/LineNumber.vue      |  36 ++--
 packages/vue/example/LoginForm.vue       |  18 +-
 packages/vue/example/ScrollBox.vue       |  10 +-
 packages/vue/example/Styled-Text.vue     |   6 +-
 packages/vue/example/TabSelect.vue       |  12 +-
 packages/vue/example/Textarea.vue        |  18 +-
 packages/vue/example/main.ts             |   2 +-
 packages/vue/index.ts                    |  34 +++-
 packages/vue/package.json                |  16 ++
 packages/vue/src/elements.ts             |  73 ++++----
 packages/vue/src/resolver.ts             |  49 ++++++
 packages/vue/src/utils/createContext.ts  |  40 +++++
 packages/vue/src/utils/index.ts          |   1 +
 packages/vue/tests/control-flow.test.ts  | 180 +++++++++----------
 packages/vue/tests/devtools-hook.test.ts |   4 +-
 packages/vue/tests/diff.test.ts          |  38 ++--
 packages/vue/tests/events.test.ts        |  98 +++++------
 packages/vue/tests/layout.test.ts        |  90 +++++-----
 packages/vue/tests/line-number.test.ts   |  14 +-
 packages/vue/tests/link.test.ts          |   6 +-
 packages/vue/tests/portal.test.ts        |  28 +--
 packages/vue/tests/text-nodes.test.ts    |   8 +-
 packages/vue/tests/textarea.test.ts      | 210 +++++++++++------------
 packages/vue/types/opentui.d.ts          |  63 ++-----
 32 files changed, 665 insertions(+), 547 deletions(-)
 create mode 100644 packages/vue/src/resolver.ts
 create mode 100644 packages/vue/src/utils/createContext.ts
 create mode 100644 packages/vue/src/utils/index.ts

diff --git a/packages/vue/README.md b/packages/vue/README.md
index b52460ce4..d5ee95396 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -45,9 +45,9 @@ declare module "*.vue" {
 </script>
 
 <template>
-    <textRenderable :style="{ fg: '#ff0000' }">
+    <Text :style="{ fg: '#ff0000' }">
         Hello World
-    </textRenderable>
+    </Text>
 </template>
 ```
 
@@ -103,9 +103,9 @@ bun run dist/index.js
 
 ## Note
 
-Important Note on <textRenderable>
+Important Note on `<Text>`
 
-The <textRenderable> component only accepts plain text as a direct child. For styled text or text chunks, you must use the content prop.
+The `<Text>` component only accepts plain text as a direct child. For styled text or text chunks, you must use the content prop.
 
 ```jsx
 <script setup lang="ts">
@@ -116,10 +116,10 @@ const textChunk: TextChunk = bold(`This is a text chunk.`)
 </script>
 
 <template>
-  <textRenderable :content="styledText" />
-  <textRenderable :content="textChunk" />
+  <Text :content="styledText" />
+  <Text :content="textChunk" />
 
-<textRenderable>This is plain text.</textRenderable>
+  <Text>This is plain text.</Text>
 </template>
 ```
 
@@ -155,9 +155,9 @@ useKeyboard((key: KeyEvent) => {
 </script>
 
 <template>
-  <textRenderable>
+  <Text>
     Last key pressed: {{ lastKey }}
-  </textRenderable>
+  </Text>
 </template>
 ```
 
@@ -187,9 +187,9 @@ const dimensions = useTerminalDimensions()
 </script>
 
 <template>
-  <textRenderable>
+  <Text>
     Width: {{ dimensions.width }}, Height: {{ dimensions.height }}
-  </textRenderable>
+  </Text>
 </template>
 ```
 
@@ -249,7 +249,7 @@ export class ConsoleButtonRenderable extends BoxRenderable {
 
 #### 2. Register the new component
 
-In your application's entry point (e.g., `main.ts`), import the `extend` function and your custom component. Then, call `extend` with an object where the key is the component's tag name (in camelCase) and the value is the component class.
+In your application's entry point (e.g., `main.ts`), import the `extend` function and your custom component. Then, call `extend` with an object where the key is the component's tag name (in PascalCase) and the value is the component class.
 
 `main.ts`:
 
@@ -259,7 +259,7 @@ import { ConsoleButtonRenderable } from "./CustomButtonRenderable"
 import App from "./App.vue"
 
 // Register the custom component
-extend({ consoleButtonRenderable: ConsoleButtonRenderable })
+extend({ ConsoleButton: ConsoleButtonRenderable })
 
 // Render the app
 render(App)
@@ -278,7 +278,7 @@ import { ConsoleButtonRenderable } from "./CustomButtonRenderable"
 
 declare module "@opentui/vue" {
   export interface OpenTUIComponents {
-    consoleButtonRenderable: typeof ConsoleButtonRenderable
+    ConsoleButton: typeof ConsoleButtonRenderable
   }
 }
 ```
@@ -287,21 +287,21 @@ _Note: Make sure this file is included in your `tsconfig.json`._
 
 #### 4. Use your custom component
 
-Now you can use `<consoleButtonRenderable>` in your Vue components just like any other OpenTUI component.
+Now you can use `<ConsoleButton>` in your Vue components just like any other OpenTUI component.
 
 `ExtendExample.vue`:
 
 ```vue
 <template>
-  <boxRenderable :style="{ flexDirection: 'column' }">
-    <textRenderable>Custom Button Example</textRenderable>
-    <consoleButtonRenderable
+  <box :style="{ flexDirection: 'column' }">
+    <Text>Custom Button Example</Text>
+    <ConsoleButton
       label="Another Button"
       :style="{
         backgroundColor: 'green',
       }"
     />
-  </boxRenderable>
+  </box>
 </template>
 
 <script setup lang="ts"></script>
diff --git a/packages/vue/example/ASCII.vue b/packages/vue/example/ASCII.vue
index 6aefe6328..853ec6fc2 100644
--- a/packages/vue/example/ASCII.vue
+++ b/packages/vue/example/ASCII.vue
@@ -47,16 +47,16 @@ const selectStyles = { flexGrow: 1 }
 </script>
 
 <template>
-  <boxRenderable :style="groupStyles">
-    <boxRenderable :style="boxStyles">
-      <selectRenderable
+  <box :style="groupStyles">
+    <box :style="boxStyles">
+      <Select
         :focused="true"
         showScrollIndicator
         :onChange="handleFontChange"
         :options="selectOptions"
         :style="selectStyles"
-      ></selectRenderable>
-    </boxRenderable>
-    <asciiFontRenderable :style="{ width: dimensions.width, height: dimensions.height }" :text="text" :font="font" />
-  </boxRenderable>
+      ></Select>
+    </box>
+    <ascii-font :style="{ width: dimensions.width, height: dimensions.height }" :text="text" :font="font" />
+  </box>
 </template>
diff --git a/packages/vue/example/Animation.vue b/packages/vue/example/Animation.vue
index 630b4f5ae..ffbdc11b5 100644
--- a/packages/vue/example/Animation.vue
+++ b/packages/vue/example/Animation.vue
@@ -46,9 +46,9 @@ timeline.add(
 </script>
 
 <template>
-  <boxRenderable :style="{ zIndex: 5 }">
+  <box :style="{ zIndex: 5 }">
     <!-- System Monitor Panel -->
-    <boxRenderable
+    <box
       title="SYSTEM MONITOR"
       titleAlignment="center"
       :style="{
@@ -64,7 +64,7 @@ timeline.add(
         borderColor: '#4a4a4a',
       }"
     >
-      <boxRenderable
+      <box
         v-for="system in systems"
         :key="system.name"
         :style="{
@@ -75,7 +75,7 @@ timeline.add(
           paddingRight: 2,
         }"
       >
-        <textRenderable
+        <Text
           :style="{
             fg: system.color,
             zIndex: 2,
@@ -83,8 +83,8 @@ timeline.add(
           }"
         >
           {{ system.name }}
-        </textRenderable>
-        <boxRenderable
+        </Text>
+        <box
           :style="{
             height: 1,
             backgroundColor: '#333333',
@@ -92,7 +92,7 @@ timeline.add(
             flexGrow: 1,
           }"
         >
-          <boxRenderable
+          <box
             :style="{
               width: `${animatedSystem[system.animKey]}%`,
               height: 1,
@@ -100,12 +100,12 @@ timeline.add(
               zIndex: 2,
             }"
           />
-        </boxRenderable>
-      </boxRenderable>
-    </boxRenderable>
+        </box>
+      </box>
+    </box>
 
     <!-- Real-time Stats Panel -->
-    <boxRenderable
+    <box
       title="◇ REAL-TIME STATS ◇"
       titleAlignment="center"
       :style="{
@@ -123,7 +123,7 @@ timeline.add(
     />
 
     <!-- Stats Labels -->
-    <textRenderable
+    <Text
       v-for="(label, index) in stats"
       :key="label"
       :style="{
@@ -135,10 +135,10 @@ timeline.add(
       }"
     >
       {{ label }}: 0
-    </textRenderable>
+    </Text>
 
     <!-- Top Left Indicators -->
-    <boxRenderable
+    <box
       v-for="(color, index) in topColors"
       :key="`top-${index}`"
       :style="{
@@ -153,7 +153,7 @@ timeline.add(
     />
 
     <!-- Top Right Indicators -->
-    <boxRenderable
+    <box
       v-for="(color, index) in rightColors"
       :key="`right-${index}`"
       :style="{
@@ -168,7 +168,7 @@ timeline.add(
     />
 
     <!-- Instructions -->
-    <textRenderable
+    <Text
       :style="{
         position: 'absolute',
         left: 2,
@@ -177,6 +177,6 @@ timeline.add(
       }"
     >
       Press ESC to return to menu
-    </textRenderable>
-  </boxRenderable>
+    </Text>
+  </box>
 </template>
diff --git a/packages/vue/example/App.vue b/packages/vue/example/App.vue
index 1bd850f03..37143eaec 100644
--- a/packages/vue/example/App.vue
+++ b/packages/vue/example/App.vue
@@ -62,14 +62,14 @@ const selectStyles = { flexGrow: 1 }
   <Textarea v-else-if="selectedExample?.value === 'textarea'" />
   <Animation v-else-if="selectedExample?.value === 'animation'" />
   <LineNumber v-else-if="selectedExample?.value === 'lineNumber'" />
-  <boxRenderable v-else :style="boxStyles">
-    <selectRenderable
+  <box v-else :style="boxStyles">
+    <Select
       :style="selectStyles"
       :focused="true"
       showScrollIndicator
       :options="exampleOptions"
       :onSelect="onSelectExample"
       :value="selectedExample"
-    ></selectRenderable>
-  </boxRenderable>
+    ></Select>
+  </box>
 </template>
diff --git a/packages/vue/example/Code.vue b/packages/vue/example/Code.vue
index ba70a9320..3886fe45a 100644
--- a/packages/vue/example/Code.vue
+++ b/packages/vue/example/Code.vue
@@ -35,14 +35,14 @@ greet(alice) // Output: Hello, Alice`
 </script>
 
 <template>
-  <boxRenderable
+  <box
     :style="{
       flexDirection: 'column',
       padding: 1,
       gap: 1,
     }"
   >
-    <boxRenderable
+    <box
       :style="{
         backgroundColor: '#1a1b26',
         padding: 1,
@@ -51,10 +51,10 @@ greet(alice) // Output: Hello, Alice`
         borderColor: '#7aa2f7',
       }"
     >
-      <textRenderable :style="{ fg: '#7aa2f7' }"> Code Syntax Highlighting Demo </textRenderable>
-    </boxRenderable>
+      <Text :style="{ fg: '#7aa2f7' }"> Code Syntax Highlighting Demo </Text>
+    </box>
 
-    <boxRenderable
+    <box
       title="typescript"
       titleAlignment="left"
       :style="{
@@ -66,9 +66,9 @@ greet(alice) // Output: Hello, Alice`
         padding: 1,
       }"
     >
-      <codeRenderable :content="codeExample" filetype="typescript" :syntaxStyle="syntaxStyle" />
-    </boxRenderable>
+      <Code :content="codeExample" filetype="typescript" :syntaxStyle="syntaxStyle" />
+    </box>
 
-    <textRenderable :style="{ fg: '#565f89', height: 1 }"> Press ESC to return to menu </textRenderable>
-  </boxRenderable>
+    <Text :style="{ fg: '#565f89', height: 1 }"> Press ESC to return to menu </Text>
+  </box>
 </template>
diff --git a/packages/vue/example/Counter.vue b/packages/vue/example/Counter.vue
index b9ece6a57..17daf59b2 100644
--- a/packages/vue/example/Counter.vue
+++ b/packages/vue/example/Counter.vue
@@ -27,10 +27,10 @@ const textStyles = { fg: RGBA.fromHex("#0000ff") }
 </script>
 
 <template>
-  <boxRenderable title="Counter" :style="{ backgroundColor: '#00ff00' }">
-    <textRenderable :style="textStyles">Count : {{ count }}</textRenderable>
-    <textRenderable :style="textStyles">Press Up/Down to increment/decrement, R to reset</textRenderable>
-    <textRenderable :style="textStyles">Press + or = to increment, - to decrement</textRenderable>
-    <textRenderable :style="{ fg: '#ff00ff' }">Press R to reset</textRenderable>
-  </boxRenderable>
+  <box title="Counter" :style="{ backgroundColor: '#00ff00' }">
+    <Text :style="textStyles">Count : {{ count }}</Text>
+    <Text :style="textStyles">Press Up/Down to increment/decrement, R to reset</Text>
+    <Text :style="textStyles">Press + or = to increment, - to decrement</Text>
+    <Text :style="{ fg: '#ff00ff' }">Press R to reset</Text>
+  </box>
 </template>
diff --git a/packages/vue/example/Diff.vue b/packages/vue/example/Diff.vue
index f1e1d14d8..e6b728d76 100644
--- a/packages/vue/example/Diff.vue
+++ b/packages/vue/example/Diff.vue
@@ -53,7 +53,7 @@ useKeyboard((key) => {
 </script>
 
 <template>
-  <boxRenderable
+  <box
     :style="{
       flexDirection: 'column',
       width: '100%',
@@ -61,7 +61,7 @@ useKeyboard((key) => {
       gap: 1,
     }"
   >
-    <boxRenderable
+    <box
       :style="{
         flexDirection: 'column',
         backgroundColor: '#0D1117',
@@ -70,15 +70,13 @@ useKeyboard((key) => {
         borderColor: '#30363D',
       }"
     >
-      <textRenderable :style="{ fg: '#4ECDC4' }"> Diff Demo - Unified & Split View </textRenderable>
-      <textRenderable :style="{ fg: '#888888' }">Keybindings:</textRenderable>
-      <textRenderable :style="{ fg: '#AAAAAA' }"> V - Toggle view ({{ currentView.toUpperCase() }}) </textRenderable>
-      <textRenderable :style="{ fg: '#AAAAAA' }">
-        L - Toggle line numbers ({{ showLineNumbers ? "ON" : "OFF" }})
-      </textRenderable>
-    </boxRenderable>
+      <Text :style="{ fg: '#4ECDC4' }"> Diff Demo - Unified & Split View </Text>
+      <Text :style="{ fg: '#888888' }">Keybindings:</Text>
+      <Text :style="{ fg: '#AAAAAA' }"> V - Toggle view ({{ currentView.toUpperCase() }}) </Text>
+      <Text :style="{ fg: '#AAAAAA' }"> L - Toggle line numbers ({{ showLineNumbers ? "ON" : "OFF" }}) </Text>
+    </box>
 
-    <boxRenderable
+    <box
       :style="{
         flexGrow: 1,
         border: true,
@@ -87,7 +85,7 @@ useKeyboard((key) => {
         backgroundColor: '#0D1117',
       }"
     >
-      <diffRenderable
+      <diff
         :diff="exampleDiff"
         :view="currentView"
         filetype="typescript"
@@ -102,6 +100,6 @@ useKeyboard((key) => {
         width="100%"
         height="100%"
       />
-    </boxRenderable>
-  </boxRenderable>
+    </box>
+  </box>
 </template>
diff --git a/packages/vue/example/ExtendExample.vue b/packages/vue/example/ExtendExample.vue
index 94c67f926..df971bbfb 100644
--- a/packages/vue/example/ExtendExample.vue
+++ b/packages/vue/example/ExtendExample.vue
@@ -1,13 +1,13 @@
 <template>
-  <boxRenderable :style="{ flexDirection: 'column' }">
-    <textRenderable>Custom Button Example</textRenderable>
-    <consoleButtonRenderable
+  <box :style="{ flexDirection: 'column' }">
+    <Text>Custom Button Example</Text>
+    <ConsoleButton
       label="Another Button"
       :style="{
         backgroundColor: 'green',
       }"
     />
-  </boxRenderable>
+  </box>
 </template>
 
 <script setup lang="ts"></script>
diff --git a/packages/vue/example/LineNumber.vue b/packages/vue/example/LineNumber.vue
index 0fa0dda99..63ae91a0f 100644
--- a/packages/vue/example/LineNumber.vue
+++ b/packages/vue/example/LineNumber.vue
@@ -69,7 +69,7 @@ useKeyboard((key) => {
 </script>
 
 <template>
-  <boxRenderable
+  <box
     :style="{
       flexDirection: 'column',
       padding: 1,
@@ -77,7 +77,7 @@ useKeyboard((key) => {
     }"
   >
     <!-- Header -->
-    <boxRenderable
+    <box
       :style="{
         backgroundColor: '#1e293b',
         padding: 1,
@@ -86,27 +86,25 @@ useKeyboard((key) => {
         borderColor: '#3b82f6',
       }"
     >
-      <textRenderable :style="{ fg: '#3b82f6' }"> Line Number Demo </textRenderable>
-    </boxRenderable>
+      <Text :style="{ fg: '#3b82f6' }"> Line Number Demo </Text>
+    </box>
 
     <!-- Controls -->
-    <boxRenderable
+    <box
       :style="{
         flexDirection: 'row',
         gap: 2,
         height: 1,
       }"
     >
-      <textRenderable :style="{ fg: '#94a3b8' }">
-        L: line numbers ({{ showLineNumbers ? "ON" : "OFF" }})
-      </textRenderable>
-      <textRenderable :style="{ fg: '#94a3b8' }"> J/K: navigate </textRenderable>
-      <textRenderable :style="{ fg: '#94a3b8' }"> W: wrap ({{ wrapMode }}) </textRenderable>
-      <textRenderable :style="{ fg: '#64748b' }"> Line {{ currentLine + 1 }}/{{ lineCount }} </textRenderable>
-    </boxRenderable>
+      <Text :style="{ fg: '#94a3b8' }"> L: line numbers ({{ showLineNumbers ? "ON" : "OFF" }}) </Text>
+      <Text :style="{ fg: '#94a3b8' }"> J/K: navigate </Text>
+      <Text :style="{ fg: '#94a3b8' }"> W: wrap ({{ wrapMode }}) </Text>
+      <Text :style="{ fg: '#64748b' }"> Line {{ currentLine + 1 }}/{{ lineCount }} </Text>
+    </box>
 
     <!-- Content Area -->
-    <boxRenderable
+    <box
       :style="{
         flexGrow: 1,
         border: true,
@@ -115,7 +113,7 @@ useKeyboard((key) => {
         backgroundColor: '#0f172a',
       }"
     >
-      <lineNumberRenderable
+      <line-number
         ref="lineNumberRef"
         :showLineNumbers="showLineNumbers"
         fg="#64748b"
@@ -125,7 +123,7 @@ useKeyboard((key) => {
         width="100%"
         height="100%"
       >
-        <textareaRenderable
+        <Textarea
           :initialValue="content"
           :wrapMode="wrapMode"
           textColor="#e2e8f0"
@@ -135,10 +133,10 @@ useKeyboard((key) => {
           width="100%"
           height="100%"
         />
-      </lineNumberRenderable>
-    </boxRenderable>
+      </line-number>
+    </box>
 
     <!-- Footer -->
-    <textRenderable :style="{ fg: '#565f89', height: 1 }"> Press ESC to return to menu </textRenderable>
-  </boxRenderable>
+    <Text :style="{ fg: '#565f89', height: 1 }"> Press ESC to return to menu </Text>
+  </box>
 </template>
diff --git a/packages/vue/example/LoginForm.vue b/packages/vue/example/LoginForm.vue
index 0f9a42e2c..2953c4a48 100644
--- a/packages/vue/example/LoginForm.vue
+++ b/packages/vue/example/LoginForm.vue
@@ -57,25 +57,25 @@ const styledText = computed(() => {
 </script>
 
 <template>
-  <textRenderable content="OpenTUI with Vue!" :style="titleTextStyles" />
-  <textRenderable :content="styledText" />
-  <boxRenderable title="Username" :style="boxStyles">
-    <inputRenderable
+  <Text content="OpenTUI with Vue!" :style="titleTextStyles" />
+  <Text :content="styledText" />
+  <box title="Username" :style="boxStyles">
+    <Input
       placeholder="Enter your username..."
       :onInput="handleUsernameChange"
       :onSubmit="handleSubmit"
       :focused="focused === 'username'"
       :style="inputStyles"
     />
-  </boxRenderable>
-  <boxRenderable title="Password" :style="passwordBoxStyles">
-    <inputRenderable
+  </box>
+  <box title="Password" :style="passwordBoxStyles">
+    <Input
       placeholder="Enter your password..."
       :onInput="handlePasswordChange"
       :onSubmit="handleSubmit"
       :focused="focused === 'password'"
       :style="inputStyles"
     />
-  </boxRenderable>
-  <textRenderable :content="status.toUpperCase()" :style="{ fg: statusColor }" />
+  </box>
+  <Text :content="status.toUpperCase()" :style="{ fg: statusColor }" />
 </template>
diff --git a/packages/vue/example/ScrollBox.vue b/packages/vue/example/ScrollBox.vue
index 33c611dd3..6f68bc9b2 100644
--- a/packages/vue/example/ScrollBox.vue
+++ b/packages/vue/example/ScrollBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <scrollBoxRenderable
+  <scrollbox
     width="100%"
     height="100%"
     :border="true"
@@ -18,10 +18,10 @@
       },
     }"
   >
-    <boxRenderable flexDirection="column" :gap="2">
-      <textRenderable v-for="item in items" :key="item"> Item {{ item }} </textRenderable>
-    </boxRenderable>
-  </scrollBoxRenderable>
+    <box flexDirection="column" :gap="2">
+      <Text v-for="item in items" :key="item"> Item {{ item }} </Text>
+    </box>
+  </scrollbox>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/vue/example/Styled-Text.vue b/packages/vue/example/Styled-Text.vue
index 968e9d641..d091accd1 100644
--- a/packages/vue/example/Styled-Text.vue
+++ b/packages/vue/example/Styled-Text.vue
@@ -15,7 +15,7 @@ const style = { margin: 1 }
 </script>
 
 <template>
-  <textRenderable :content="styledText" :style="style" />
-  <textRenderable :content="textChunks" :style="style" />
-  <textRenderable>{{ plainText }}</textRenderable>
+  <Text :content="styledText" :style="style" />
+  <Text :content="textChunks" :style="style" />
+  <Text>{{ plainText }}</Text>
 </template>
diff --git a/packages/vue/example/TabSelect.vue b/packages/vue/example/TabSelect.vue
index 7fea34c7a..3204884b5 100644
--- a/packages/vue/example/TabSelect.vue
+++ b/packages/vue/example/TabSelect.vue
@@ -22,8 +22,8 @@ const description = computed(
 </script>
 
 <template>
-  <boxRenderable :style="{ flexDirection: 'column', flexGrow: 1 }">
-    <tabSelectRenderable
+  <box :style="{ flexDirection: 'column', flexGrow: 1 }">
+    <tab-select
       :height="2"
       width="100%"
       :options="tabs"
@@ -31,8 +31,8 @@ const description = computed(
       :onChange="onTabChange"
       :focused="true"
     />
-    <boxRenderable :style="{ paddingTop: 1 }">
-      <textRenderable :content="description" />
-    </boxRenderable>
-  </boxRenderable>
+    <box :style="{ paddingTop: 1 }">
+      <Text :content="description" />
+    </box>
+  </box>
 </template>
diff --git a/packages/vue/example/Textarea.vue b/packages/vue/example/Textarea.vue
index a0c71e16e..1e8903302 100644
--- a/packages/vue/example/Textarea.vue
+++ b/packages/vue/example/Textarea.vue
@@ -87,8 +87,8 @@ const placeholder = t`${fg("#333333")("Enter")} ${cyan(bold("text"))} ${fg("#333
 </script>
 
 <template>
-  <boxRenderable :style="{ padding: 1, flexDirection: 'column' }">
-    <boxRenderable
+  <box :style="{ padding: 1, flexDirection: 'column' }">
+    <box
       title="Interactive Editor (TextareaRenderable)"
       titleAlignment="left"
       :style="{
@@ -101,7 +101,7 @@ const placeholder = t`${fg("#333333")("Enter")} ${cyan(bold("text"))} ${fg("#333
         flexGrow: 1,
       }"
     >
-      <textareaRenderable
+      <Textarea
         :ref="setTextareaRef"
         :initialValue="initialContent"
         :placeholder="placeholder"
@@ -115,12 +115,10 @@ const placeholder = t`${fg("#333333")("Enter")} ${cyan(bold("text"))} ${fg("#333
         :focused="true"
         :style="{ flexGrow: 1 }"
       />
-    </boxRenderable>
-    <textRenderable :style="{ fg: '#A5D6FF', height: 1 }">
+    </box>
+    <Text :style="{ fg: '#A5D6FF', height: 1 }">
       {{ statusText }}
-    </textRenderable>
-    <textRenderable :style="{ fg: '#565f89', height: 1 }">
-      Shift+W: wrap mode | Tab: cursor style | ESC: menu
-    </textRenderable>
-  </boxRenderable>
+    </Text>
+    <Text :style="{ fg: '#565f89', height: 1 }"> Shift+W: wrap mode | Tab: cursor style | ESC: menu </Text>
+  </box>
 </template>
diff --git a/packages/vue/example/main.ts b/packages/vue/example/main.ts
index 35ceec33c..f6b6c3310 100644
--- a/packages/vue/example/main.ts
+++ b/packages/vue/example/main.ts
@@ -3,6 +3,6 @@ import { extend } from "@opentui/vue"
 import { ConsoleButtonRenderable } from "./CustomButtonRenderable"
 import App from "./App.vue"
 
-extend({ consoleButtonRenderable: ConsoleButtonRenderable })
+extend({ ConsoleButton: ConsoleButtonRenderable })
 
 render(App)
diff --git a/packages/vue/index.ts b/packages/vue/index.ts
index 4303ed61a..119872423 100644
--- a/packages/vue/index.ts
+++ b/packages/vue/index.ts
@@ -8,10 +8,11 @@ import {
 } from "@opentui/core"
 import { createOpenTUIRenderer } from "./src/renderer"
 import { defineComponent, h, shallowRef, type App, type Component, type InjectionKey } from "vue"
-import { elements } from "./src/elements"
+import { elements, textNodeKeys, type Element, type TextNodeKey } from "./src/elements"
 import { initializeDevtools } from "./src/devtools"
 export * from "./src/composables/index"
 export * from "./src/extend"
+export { OpenTUIResolver } from "./src/resolver"
 export { testRender } from "./src/test-utils"
 export { Portal, type PortalProps } from "./src/components/Portal"
 export { setupOpenTUIDevtools, type OpenTUIDevtoolsSettings } from "./src/devtools"
@@ -99,3 +100,34 @@ export async function render(
 
   app.mount(cliRenderer.root)
 }
+
+// Component catalogue exports (matching Solid API)
+export { elements, textNodeKeys, type Element, type TextNodeKey }
+
+/**
+ * Base components (non-text-node components).
+ * Derived from elements by excluding text node keys.
+ */
+export const baseComponents = Object.fromEntries(
+  Object.entries(elements).filter(([key]) => !textNodeKeys.includes(key as TextNodeKey)),
+) as Omit<typeof elements, TextNodeKey>
+
+export type {
+  TextProps,
+  BoxProps,
+  ScrollBoxProps,
+  InputProps,
+  SelectProps,
+  TabSelectProps,
+  TextareaProps,
+  CodeProps,
+  DiffProps,
+  LineNumberProps,
+  AsciiFontProps,
+  SpanProps,
+  LinkProps,
+  RenderableConstructor,
+  ExtendedComponentProps,
+  ExtendedIntrinsicElements,
+  OpenTUIComponents,
+} from "./types/opentui"
diff --git a/packages/vue/package.json b/packages/vue/package.json
index f8463a367..0ed26c4ce 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -16,6 +16,22 @@
     ".": {
       "types": "./index.ts",
       "import": "./index.ts"
+    },
+    "./composables": {
+      "types": "./src/composables/index.ts",
+      "import": "./src/composables/index.ts"
+    },
+    "./components": {
+      "types": "./src/elements.ts",
+      "import": "./src/elements.ts"
+    },
+    "./devtools": {
+      "types": "./src/devtools/index.ts",
+      "import": "./src/devtools/index.ts"
+    },
+    "./resolver": {
+      "types": "./src/resolver.ts",
+      "import": "./src/resolver.ts"
     }
   },
   "scripts": {
diff --git a/packages/vue/src/elements.ts b/packages/vue/src/elements.ts
index bc751f2b9..1464731a4 100644
--- a/packages/vue/src/elements.ts
+++ b/packages/vue/src/elements.ts
@@ -22,15 +22,7 @@ class SpanRenderable extends TextNodeRenderable {
   }
 }
 
-export const textNodeKeys = [
-  "spanRenderable",
-  "bRenderable",
-  "strongRenderable",
-  "iRenderable",
-  "emRenderable",
-  "uRenderable",
-  "aRenderable",
-] as const
+export const textNodeKeys = ["Span", "B", "Strong", "I", "Em", "U", "A"] as const
 export type TextNodeKey = (typeof textNodeKeys)[number]
 
 class TextModifierRenderable extends SpanRenderable {
@@ -92,27 +84,46 @@ export class LinkRenderable extends SpanRenderable {
 }
 
 export const elements = {
-  // Existing components
-  asciiFontRenderable: ASCIIFontRenderable,
-  boxRenderable: BoxRenderable,
-  inputRenderable: InputRenderable,
-  selectRenderable: SelectRenderable,
-  tabSelectRenderable: TabSelectRenderable,
-  textRenderable: TextRenderable,
-  scrollBoxRenderable: ScrollBoxRenderable,
-  // New components
-  codeRenderable: CodeRenderable,
-  diffRenderable: DiffRenderable,
-  lineNumberRenderable: LineNumberRenderable,
-  textareaRenderable: TextareaRenderable,
-  // Text modifiers
-  spanRenderable: SpanRenderable,
-  strongRenderable: BoldSpanRenderable,
-  bRenderable: BoldSpanRenderable,
-  emRenderable: ItalicSpanRenderable,
-  iRenderable: ItalicSpanRenderable,
-  uRenderable: UnderlineSpanRenderable,
-  brRenderable: LineBreakRenderable,
-  aRenderable: LinkRenderable,
+  box: BoxRenderable,
+  Text: TextRenderable,
+  Input: InputRenderable,
+  Select: SelectRenderable,
+  Textarea: TextareaRenderable,
+  scrollbox: ScrollBoxRenderable,
+  Code: CodeRenderable,
+  diff: DiffRenderable,
+  "ascii-font": ASCIIFontRenderable,
+  "tab-select": TabSelectRenderable,
+  "line-number": LineNumberRenderable,
+  Span: SpanRenderable,
+  B: BoldSpanRenderable,
+  Strong: BoldSpanRenderable,
+  I: ItalicSpanRenderable,
+  Em: ItalicSpanRenderable,
+  U: UnderlineSpanRenderable,
+  Br: LineBreakRenderable,
+  A: LinkRenderable,
 }
 export type Element = keyof typeof elements
+
+export const baseComponents = {
+  box: BoxRenderable,
+  Text: TextRenderable,
+  Input: InputRenderable,
+  Select: SelectRenderable,
+  Textarea: TextareaRenderable,
+  scrollbox: ScrollBoxRenderable,
+  Code: CodeRenderable,
+  diff: DiffRenderable,
+  "ascii-font": ASCIIFontRenderable,
+  "tab-select": TabSelectRenderable,
+  "line-number": LineNumberRenderable,
+  Span: SpanRenderable,
+  B: BoldSpanRenderable,
+  Strong: BoldSpanRenderable,
+  I: ItalicSpanRenderable,
+  Em: ItalicSpanRenderable,
+  U: UnderlineSpanRenderable,
+  Br: LineBreakRenderable,
+  A: LinkRenderable,
+}
diff --git a/packages/vue/src/resolver.ts b/packages/vue/src/resolver.ts
new file mode 100644
index 000000000..9dd3c28e8
--- /dev/null
+++ b/packages/vue/src/resolver.ts
@@ -0,0 +1,49 @@
+export interface ComponentResolverResult {
+  name: string
+  from: string
+}
+
+export interface ComponentResolver {
+  type: "component"
+  resolve: (name: string) => ComponentResolverResult | undefined
+}
+
+export function OpenTUIResolver(): ComponentResolver {
+  const componentNames = new Set([
+    "box",
+    "Text",
+    "Input",
+    "Select",
+    "Textarea",
+    "scrollbox",
+    "Code",
+    "diff",
+    "ascii-font",
+    "tab-select",
+    "line-number",
+    "Span",
+    "B",
+    "Strong",
+    "I",
+    "Em",
+    "U",
+    "Br",
+    "A",
+  ])
+
+  return {
+    type: "component",
+    resolve: (name: string): ComponentResolverResult | undefined => {
+      if (componentNames.has(name)) {
+        return {
+          name,
+          from: "@opentui/vue",
+        }
+      }
+
+      return undefined
+    },
+  }
+}
+
+export default OpenTUIResolver
diff --git a/packages/vue/src/utils/createContext.ts b/packages/vue/src/utils/createContext.ts
new file mode 100644
index 000000000..252c4ca66
--- /dev/null
+++ b/packages/vue/src/utils/createContext.ts
@@ -0,0 +1,40 @@
+import { provide, inject, type InjectionKey } from "vue"
+
+/**
+ * Create a typed context provider/injector pair.
+ * Inspired by Solid's createContextProvider pattern.
+ *
+ * @example
+ * ```ts
+ * const [injectMyContext, provideMyContext] = createContext<MyContextType>('MyContext')
+ *
+ * // In parent component
+ * provideMyContext({ value: 42 })
+ *
+ * // In child component
+ * const ctx = injectMyContext()
+ * ```
+ */
+export function createContext<T>(
+  contextName: string,
+  defaultValue?: T,
+): [injectContext: (fallback?: T) => T, provideContext: (value: T) => T] {
+  const key: InjectionKey<T> = Symbol(contextName)
+
+  const injectContext = (fallback?: T): T => {
+    const context = inject(key, fallback ?? defaultValue)
+    if (context === undefined) {
+      throw new Error(
+        `[OpenTUI] ${contextName} context not found. ` + `Make sure to wrap your component with a provider.`,
+      )
+    }
+    return context
+  }
+
+  const provideContext = (value: T): T => {
+    provide(key, value)
+    return value
+  }
+
+  return [injectContext, provideContext]
+}
diff --git a/packages/vue/src/utils/index.ts b/packages/vue/src/utils/index.ts
new file mode 100644
index 000000000..38e61c3e7
--- /dev/null
+++ b/packages/vue/src/utils/index.ts
@@ -0,0 +1 @@
+export { createContext } from "./createContext"
diff --git a/packages/vue/tests/control-flow.test.ts b/packages/vue/tests/control-flow.test.ts
index d3d6b082e..d32fd835b 100644
--- a/packages/vue/tests/control-flow.test.ts
+++ b/packages/vue/tests/control-flow.test.ts
@@ -25,9 +25,9 @@ describe("Vue Renderer | Control Flow Tests", () => {
         setup() {
           return () =>
             h(
-              "boxRenderable",
+              "box",
               {},
-              items.map((item, index) => h("textRenderable", { key: item }, `${index + 1}. ${item}`)),
+              items.map((item, index) => h("Text", { key: item }, `${index + 1}. ${item}`)),
             )
         },
       })
@@ -51,9 +51,9 @@ describe("Vue Renderer | Control Flow Tests", () => {
         setup() {
           return () =>
             h(
-              "boxRenderable",
+              "box",
               {},
-              items.value.map((item) => h("textRenderable", { key: item }, `Item: ${item}`)),
+              items.value.map((item) => h("Text", { key: item }, `Item: ${item}`)),
             )
         },
       })
@@ -83,9 +83,9 @@ describe("Vue Renderer | Control Flow Tests", () => {
         setup() {
           return () =>
             h(
-              "boxRenderable",
+              "box",
               {},
-              items.value.map((item) => h("textRenderable", { key: item }, item)),
+              items.value.map((item) => h("Text", { key: item }, item)),
             )
         },
       })
@@ -114,10 +114,10 @@ describe("Vue Renderer | Control Flow Tests", () => {
         setup() {
           return () =>
             h(
-              "boxRenderable",
+              "box",
               {},
               todos.value.map((todo, index) =>
-                h("textRenderable", { key: todo.id }, `${index + 1}. ${todo.done ? "[x]" : "[ ]"} ${todo.text}`),
+                h("Text", { key: todo.id }, `${index + 1}. ${todo.done ? "[x]" : "[ ]"} ${todo.text}`),
               ),
             )
         },
@@ -138,9 +138,9 @@ describe("Vue Renderer | Control Flow Tests", () => {
         setup() {
           return () =>
             h(
-              "boxRenderable",
+              "box",
               {},
-              items.value.map((item) => h("textRenderable", { key: item }, `Item: ${item}`)),
+              items.value.map((item) => h("Text", { key: item }, `Item: ${item}`)),
             )
         },
       })
@@ -172,10 +172,10 @@ describe("Vue Renderer | Control Flow Tests", () => {
         setup() {
           return () =>
             h(
-              "boxRenderable",
+              "box",
               { id: "container" },
               items.value.map((item) =>
-                h("boxRenderable", { key: item, id: `item-${item}` }, [h("textRenderable", {}, item)]),
+                h("box", { key: item, id: `item-${item}` }, [h("Text", {}, item)]),
               ),
             )
         },
@@ -208,8 +208,8 @@ describe("Vue Renderer | Control Flow Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
-              showContent.value ? h("textRenderable", {}, "Main content") : h("textRenderable", {}, "Fallback content"),
+            h("box", {}, [
+              showContent.value ? h("Text", {}, "Main content") : h("Text", {}, "Fallback content"),
             ])
         },
       })
@@ -237,11 +237,11 @@ describe("Vue Renderer | Control Flow Tests", () => {
         setup() {
           return () =>
             h(
-              "boxRenderable",
+              "box",
               {},
               [
-                visible.value && h("textRenderable", {}, "Visible content"),
-                h("textRenderable", {}, "Always visible"),
+                visible.value && h("Text", {}, "Visible content"),
+                h("Text", {}, "Always visible"),
               ].filter(Boolean),
             )
         },
@@ -269,10 +269,10 @@ describe("Vue Renderer | Control Flow Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
+            h("box", {}, [
               count.value > 3
-                ? h("textRenderable", {}, `Count is high: ${count.value}`)
-                : h("textRenderable", {}, "Count too low"),
+                ? h("Text", {}, `Count is high: ${count.value}`)
+                : h("Text", {}, "Count too low"),
             ])
         },
       })
@@ -299,12 +299,12 @@ describe("Vue Renderer | Control Flow Tests", () => {
         setup() {
           return () =>
             h(
-              "boxRenderable",
+              "box",
               { id: "container" },
               [
-                h("boxRenderable", { id: "first" }),
-                showContent.value ? h("boxRenderable", { id: "second" }) : null,
-                h("boxRenderable", { id: "third" }),
+                h("box", { id: "first" }),
+                showContent.value ? h("box", { id: "second" }) : null,
+                h("box", { id: "third" }),
               ].filter(Boolean),
             )
         },
@@ -332,12 +332,12 @@ describe("Vue Renderer | Control Flow Tests", () => {
         setup() {
           return () =>
             h(
-              "boxRenderable",
+              "box",
               { id: "fragment-container" },
               [
-                h("boxRenderable", { id: "first" }),
-                showContent.value ? h("boxRenderable", { id: "second" }) : null,
-                h("boxRenderable", { id: "third" }),
+                h("box", { id: "first" }),
+                showContent.value ? h("box", { id: "second" }) : null,
+                h("box", { id: "third" }),
               ].filter(Boolean),
             )
         },
@@ -367,12 +367,12 @@ describe("Vue Renderer | Control Flow Tests", () => {
         setup() {
           return () =>
             h(
-              "boxRenderable",
+              "box",
               {},
               [
-                showFirst.value ? h("textRenderable", {}, "First") : null,
-                showSecond.value ? h("textRenderable", {}, "Second") : undefined,
-                showThird.value ? h("textRenderable", {}, "Third") : null,
+                showFirst.value ? h("Text", {}, "First") : null,
+                showSecond.value ? h("Text", {}, "Second") : undefined,
+                showThird.value ? h("Text", {}, "Third") : null,
               ].filter(Boolean),
             )
         },
@@ -405,15 +405,15 @@ describe("Vue Renderer | Control Flow Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
+            h("box", {}, [
               (() => {
                 switch (value.value) {
                   case "option1":
-                    return h("textRenderable", {}, "Option 1 selected")
+                    return h("Text", {}, "Option 1 selected")
                   case "option2":
-                    return h("textRenderable", {}, "Option 2 selected")
+                    return h("Text", {}, "Option 2 selected")
                   default:
-                    return h("textRenderable", {}, "No match")
+                    return h("Text", {}, "No match")
                 }
               })(),
             ])
@@ -449,16 +449,16 @@ describe("Vue Renderer | Control Flow Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
+            h("box", {}, [
               (() => {
                 if (score.value >= 90) {
-                  return h("textRenderable", {}, "Grade: A")
+                  return h("Text", {}, "Grade: A")
                 } else if (score.value >= 80) {
-                  return h("textRenderable", {}, "Grade: B")
+                  return h("Text", {}, "Grade: B")
                 } else if (score.value >= 70) {
-                  return h("textRenderable", {}, "Grade: C")
+                  return h("Text", {}, "Grade: C")
                 } else {
-                  return h("textRenderable", {}, "Grade: F")
+                  return h("Text", {}, "Grade: F")
                 }
               })(),
             ])
@@ -492,16 +492,16 @@ describe("Vue Renderer | Control Flow Tests", () => {
 
       const renderStatus = (s: Status) => {
         const renderers: Record<Status, () => ReturnType<typeof h>> = {
-          loading: () => h("textRenderable", {}, "Loading..."),
-          success: () => h("textRenderable", {}, "Success!"),
-          error: () => h("textRenderable", {}, "Error occurred"),
+          loading: () => h("Text", {}, "Loading..."),
+          success: () => h("Text", {}, "Success!"),
+          error: () => h("Text", {}, "Error occurred"),
         }
         return renderers[s]()
       }
 
       const TestComponent = defineComponent({
         setup() {
-          return () => h("boxRenderable", {}, [renderStatus(status.value)])
+          return () => h("box", {}, [renderStatus(status.value)])
         },
       })
 
@@ -541,7 +541,7 @@ describe("Vue Renderer | Control Flow Tests", () => {
             if (props.shouldError) {
               throw new Error("Test error")
             }
-            return h("textRenderable", {}, "Normal content")
+            return h("Text", {}, "Normal content")
           }
         },
       })
@@ -554,9 +554,9 @@ describe("Vue Renderer | Control Flow Tests", () => {
           })
 
           return () =>
-            h("boxRenderable", {}, [
+            h("box", {}, [
               errorMessage.value
-                ? h("textRenderable", {}, `Error caught: ${errorMessage.value}`)
+                ? h("Text", {}, `Error caught: ${errorMessage.value}`)
                 : h(ErrorComponent, { shouldError: shouldError.value }),
             ])
         },
@@ -588,11 +588,11 @@ describe("Vue Renderer | Control Flow Tests", () => {
         setup() {
           return () =>
             h(
-              "boxRenderable",
+              "box",
               {},
               showList.value
-                ? items.value.map((item) => h("textRenderable", { key: item }, `Item: ${item}`))
-                : [h("textRenderable", {}, "List is hidden")],
+                ? items.value.map((item) => h("Text", { key: item }, `Item: ${item}`))
+                : [h("Text", {}, "List is hidden")],
             )
         },
       })
@@ -627,11 +627,11 @@ describe("Vue Renderer | Control Flow Tests", () => {
         setup() {
           return () =>
             h(
-              "boxRenderable",
+              "box",
               {},
               items
                 .filter((item) => visibleItems.value.has(item))
-                .map((item) => h("textRenderable", { key: item }, `Item: ${item}`)),
+                .map((item) => h("Text", { key: item }, `Item: ${item}`)),
             )
         },
       })
@@ -663,15 +663,15 @@ describe("Vue Renderer | Control Flow Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
+            h("box", {}, [
               showOuter.value
-                ? h("boxRenderable", {}, [
-                    h("textRenderable", {}, "Outer content"),
+                ? h("box", {}, [
+                    h("Text", {}, "Outer content"),
                     showInner.value
-                      ? h("textRenderable", {}, "Inner content")
-                      : h("textRenderable", {}, "Inner hidden"),
+                      ? h("Text", {}, "Inner content")
+                      : h("Text", {}, "Inner hidden"),
                   ])
-                : h("textRenderable", {}, "Outer hidden"),
+                : h("Text", {}, "Outer hidden"),
             ])
         },
       })
@@ -708,21 +708,21 @@ describe("Vue Renderer | Control Flow Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
+            h("box", {}, [
               (() => {
                 switch (mode.value) {
                   case "list":
                     return h(
                       Fragment,
-                      items.map((item) => h("textRenderable", { key: `list-${item}` }, `* ${item}`)),
+                      items.map((item) => h("Text", { key: `list-${item}` }, `* ${item}`)),
                     )
                   case "grid":
                     return h(
                       Fragment,
-                      items.map((item) => h("textRenderable", { key: `grid-${item}` }, `[${item}]`)),
+                      items.map((item) => h("Text", { key: `grid-${item}` }, `[${item}]`)),
                     )
                   default:
-                    return h("textRenderable", {}, "Unknown mode")
+                    return h("Text", {}, "Unknown mode")
                 }
               })(),
             ])
@@ -766,15 +766,15 @@ describe("Vue Renderer | Control Flow Tests", () => {
         setup() {
           return () =>
             h(
-              "boxRenderable",
+              "box",
               {},
               items.value
                 .filter((item) => item.visible)
                 .map((item) =>
-                  h("boxRenderable", { key: item.id }, [
-                    h("textRenderable", {}, `Name: ${item.name}`),
+                  h("box", { key: item.id }, [
+                    h("Text", {}, `Name: ${item.name}`),
                     ...(item.children
-                      ? item.children.map((child) => h("textRenderable", { key: child }, `  - ${child}`))
+                      ? item.children.map((child) => h("Text", { key: child }, `  - ${child}`))
                       : []),
                   ]),
                 ),
@@ -815,16 +815,16 @@ describe("Vue Renderer | Control Flow Tests", () => {
         setup() {
           return () =>
             h(
-              "boxRenderable",
+              "box",
               { id: "parent-box" },
               [
-                h("boxRenderable", { id: "always-visible", style: { border: true }, title: "Always" }),
+                h("box", { id: "always-visible", style: { border: true }, title: "Always" }),
                 showContent.value
-                  ? h("boxRenderable", { id: "conditional-child", style: { border: true }, title: "Conditional" }, [
-                      h("boxRenderable", { id: "nested-child", style: { border: true }, title: "Nested" }),
+                  ? h("box", { id: "conditional-child", style: { border: true }, title: "Conditional" }, [
+                      h("box", { id: "nested-child", style: { border: true }, title: "Nested" }),
                     ])
                   : null,
-                h("boxRenderable", { id: "another-visible", style: { border: true }, title: "Another" }),
+                h("box", { id: "another-visible", style: { border: true }, title: "Another" }),
               ].filter(Boolean),
             )
         },
@@ -847,10 +847,10 @@ describe("Vue Renderer | Control Flow Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
+            h("box", {}, [
               count.value % 2 === 0
-                ? h("textRenderable", {}, `Even: ${count.value}`)
-                : h("textRenderable", {}, `Odd: ${count.value}`),
+                ? h("Text", {}, `Even: ${count.value}`)
+                : h("Text", {}, `Odd: ${count.value}`),
             ])
         },
       })
@@ -878,11 +878,11 @@ describe("Vue Renderer | Control Flow Tests", () => {
         setup() {
           return () =>
             h(
-              "boxRenderable",
+              "box",
               {},
               [
-                h("textRenderable", {}, "Base text"),
-                showExtra.value ? h("textRenderable", { style: { fg: "red" } }, "Extra text") : null,
+                h("Text", {}, "Base text"),
+                showExtra.value ? h("Text", { style: { fg: "red" } }, "Extra text") : null,
               ].filter(Boolean),
             )
         },
@@ -913,12 +913,12 @@ describe("Vue Renderer | Control Flow Tests", () => {
         setup() {
           return () =>
             h(
-              "boxRenderable",
+              "box",
               {},
               [
-                h("textRenderable", {}, "Before"),
-                show.value ? h("textRenderable", {}, "Conditional") : null,
-                h("textRenderable", {}, "After"),
+                h("Text", {}, "Before"),
+                show.value ? h("Text", {}, "Conditional") : null,
+                h("Text", {}, "After"),
               ].filter(Boolean),
             )
         },
@@ -952,17 +952,17 @@ describe("Vue Renderer | Control Flow Tests", () => {
         setup() {
           return () =>
             h(
-              "boxRenderable",
+              "box",
               {},
               data.value.map((group) =>
                 h(
-                  "boxRenderable",
+                  "box",
                   { key: group.id },
                   group.items.map((item) =>
                     h(
-                      "boxRenderable",
+                      "box",
                       { key: item.id },
-                      item.values.map((value) => h("textRenderable", { key: value }, value)),
+                      item.values.map((value) => h("Text", { key: value }, value)),
                     ),
                   ),
                 ),
@@ -988,14 +988,14 @@ describe("Vue Renderer | Control Flow Tests", () => {
         setup() {
           return () =>
             h(
-              "boxRenderable",
+              "box",
               {},
               [
-                h("textRenderable", {}, "First"),
+                h("Text", {}, "First"),
                 false,
-                h("textRenderable", {}, "Second"),
+                h("Text", {}, "Second"),
                 null,
-                h("textRenderable", {}, "Third"),
+                h("Text", {}, "Third"),
               ].filter(Boolean),
             )
         },
diff --git a/packages/vue/tests/devtools-hook.test.ts b/packages/vue/tests/devtools-hook.test.ts
index 8754768ef..ef0b3a3fb 100644
--- a/packages/vue/tests/devtools-hook.test.ts
+++ b/packages/vue/tests/devtools-hook.test.ts
@@ -63,7 +63,7 @@ describe("DevTools integration | hook timing", () => {
     const count = ref(0)
     const TestComponent = defineComponent({
       setup() {
-        return () => h("textRenderable", { content: `count:${count.value}` })
+        return () => h("Text", { content: `count:${count.value}` })
       },
     })
 
@@ -82,7 +82,7 @@ describe("DevTools integration | hook timing", () => {
     const count = ref(0)
     const TestComponent = defineComponent({
       setup() {
-        return () => h("textRenderable", { content: `count:${count.value}` })
+        return () => h("Text", { content: `count:${count.value}` })
       },
     })
 
diff --git a/packages/vue/tests/diff.test.ts b/packages/vue/tests/diff.test.ts
index 8ed66c886..01e0ca325 100644
--- a/packages/vue/tests/diff.test.ts
+++ b/packages/vue/tests/diff.test.ts
@@ -44,8 +44,8 @@ describe("DiffRenderable with Vue", () => {
     const TestComponent = defineComponent({
       setup() {
         return () =>
-          h("boxRenderable", { id: "root", width: "100%", height: "100%" }, [
-            h("diffRenderable", {
+          h("box", { id: "root", width: "100%", height: "100%" }, [
+            h("diff", {
               id: "test-diff",
               diff: diffContent,
               view: "unified",
@@ -64,9 +64,9 @@ describe("DiffRenderable with Vue", () => {
     // Wait for automatic initial render
     await Bun.sleep(50)
 
-    const boxRenderable = testSetup.renderer.root.getRenderable("root")
-    const diffRenderable = boxRenderable?.getRenderable("test-diff") as any
-    const leftSide = diffRenderable?.getRenderable("test-diff-left") as any
+    const box = testSetup.renderer.root.getRenderable("root")
+    const diff = box?.getRenderable("test-diff") as any
+    const leftSide = diff?.getRenderable("test-diff-left") as any
     const gutterAfterAutoRender = leftSide?.["gutter"]
     const widthAfterAutoRender = gutterAfterAutoRender?.width
 
@@ -119,8 +119,8 @@ describe("DiffRenderable with Vue", () => {
     const TestComponent = defineComponent({
       setup() {
         return () =>
-          h("boxRenderable", { id: "root", width: "100%", height: "100%" }, [
-            h("diffRenderable", {
+          h("box", { id: "root", width: "100%", height: "100%" }, [
+            h("diff", {
               id: "test-diff",
               diff: diffContent,
               view: "split",
@@ -173,8 +173,8 @@ describe("DiffRenderable with Vue", () => {
     const TestComponent = defineComponent({
       setup() {
         return () =>
-          h("boxRenderable", { id: "root", width: "100%", height: "100%" }, [
-            h("diffRenderable", {
+          h("box", { id: "root", width: "100%", height: "100%" }, [
+            h("diff", {
               id: "test-diff",
               diff: diffWith10PlusLines,
               view: "unified",
@@ -248,9 +248,9 @@ describe("DiffRenderable with Vue", () => {
     const TestComponent = defineComponent({
       setup() {
         return () =>
-          h("boxRenderable", { id: "root", width: "100%", height: "100%" }, [
+          h("box", { id: "root", width: "100%", height: "100%" }, [
             showDiff.value
-              ? h("diffRenderable", {
+              ? h("diff", {
                   id: "test-diff",
                   diff: diffContent,
                   view: "unified",
@@ -260,7 +260,7 @@ describe("DiffRenderable with Vue", () => {
                   width: "100%",
                   height: "100%",
                 })
-              : h("textRenderable", { id: "fallback-text", width: "100%", height: "100%" }, "No diff to display"),
+              : h("Text", { id: "fallback-text", width: "100%", height: "100%" }, "No diff to display"),
           ])
       },
     })
@@ -322,9 +322,9 @@ describe("DiffRenderable with Vue", () => {
     const TestComponent = defineComponent({
       setup() {
         return () =>
-          h("boxRenderable", { id: "root", width: "100%", height: "100%" }, [
+          h("box", { id: "root", width: "100%", height: "100%" }, [
             showDiff.value
-              ? h("diffRenderable", {
+              ? h("diff", {
                   id: "test-diff",
                   diff: diffContent,
                   view: "split",
@@ -334,7 +334,7 @@ describe("DiffRenderable with Vue", () => {
                   width: "100%",
                   height: "100%",
                 })
-              : h("textRenderable", { id: "fallback-text", width: "100%", height: "100%" }, "No diff to display"),
+              : h("Text", { id: "fallback-text", width: "100%", height: "100%" }, "No diff to display"),
           ])
       },
     })
@@ -414,8 +414,8 @@ describe("DiffRenderable with Vue", () => {
     const TestComponent = defineComponent({
       setup() {
         return () =>
-          h("boxRenderable", { id: "root", width: "100%", height: "100%" }, [
-            h("diffRenderable", {
+          h("box", { id: "root", width: "100%", height: "100%" }, [
+            h("diff", {
               id: "test-diff-toggle",
               diff: diffContent,
               view: "split",
@@ -446,8 +446,8 @@ describe("DiffRenderable with Vue", () => {
     const TestComponentFromStart = defineComponent({
       setup() {
         return () =>
-          h("boxRenderable", { id: "root", width: "100%", height: "100%" }, [
-            h("diffRenderable", {
+          h("box", { id: "root", width: "100%", height: "100%" }, [
+            h("diff", {
               id: "test-diff-from-start",
               diff: diffContent,
               view: "split",
diff --git a/packages/vue/tests/events.test.ts b/packages/vue/tests/events.test.ts
index f45de9359..118241a4d 100644
--- a/packages/vue/tests/events.test.ts
+++ b/packages/vue/tests/events.test.ts
@@ -27,15 +27,15 @@ describe("Vue Renderer | Event Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
-              h("inputRenderable", {
+            h("box", {}, [
+              h("Input", {
                 focused: true,
                 onInput: (val: string) => {
                   onInputSpy(val)
                   value.value = val
                 },
               }),
-              h("textRenderable", { content: `Value: ${value.value}` }),
+              h("Text", { content: `Value: ${value.value}` }),
             ])
         },
       })
@@ -57,8 +57,8 @@ describe("Vue Renderer | Event Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
-              h("inputRenderable", {
+            h("box", {}, [
+              h("Input", {
                 focused: true,
                 onInput: (val: string) => {
                   submittedValue.value = val
@@ -85,8 +85,8 @@ describe("Vue Renderer | Event Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
-              h("inputRenderable", {
+            h("box", {}, [
+              h("Input", {
                 id: "input",
                 focused: true,
                 onChange: (val: string) => onChangeSpy(val),
@@ -112,8 +112,8 @@ describe("Vue Renderer | Event Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
-              h("inputRenderable", {
+            h("box", {}, [
+              h("Input", {
                 focused: true,
                 onInput: inputSpy,
               }),
@@ -145,8 +145,8 @@ describe("Vue Renderer | Event Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
-              h("selectRenderable", {
+            h("box", {}, [
+              h("Select", {
                 focused: true,
                 options,
                 onChange: (index: number, option: (typeof options)[0]) => {
@@ -154,7 +154,7 @@ describe("Vue Renderer | Event Tests", () => {
                   selectedIndex.value = index
                 },
               }),
-              h("textRenderable", { content: `Selected: ${selectedIndex.value}` }),
+              h("Text", { content: `Selected: ${selectedIndex.value}` }),
             ])
         },
       })
@@ -180,8 +180,8 @@ describe("Vue Renderer | Event Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
-              h("selectRenderable", {
+            h("box", {}, [
+              h("Select", {
                 focused: true,
                 options,
                 onSelect: (index: number, option: (typeof options)[0]) => {
@@ -211,8 +211,8 @@ describe("Vue Renderer | Event Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
-              h("selectRenderable", {
+            h("box", {}, [
+              h("Select", {
                 focused: true,
                 options: [
                   { name: "Option 1", value: "opt1", description: "First option" },
@@ -224,7 +224,7 @@ describe("Vue Renderer | Event Tests", () => {
                   selectedValue.value = option?.value || ""
                 },
               }),
-              h("textRenderable", { content: `Selected: ${selectedValue.value}` }),
+              h("Text", { content: `Selected: ${selectedValue.value}` }),
             ])
         },
       })
@@ -248,7 +248,7 @@ describe("Vue Renderer | Event Tests", () => {
   })
 
   describe("TabSelect Events", () => {
-    it("should handle tab_select onSelect events", async () => {
+    it("should handle tab-select onSelect events", async () => {
       const onSelectSpy = createSpy()
       const activeTab = ref(0)
 
@@ -257,8 +257,8 @@ describe("Vue Renderer | Event Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
-              h("tabSelectRenderable", {
+            h("box", {}, [
+              h("tab-select", {
                 focused: true,
                 options: tabs.map((tab, index) => ({
                   name: tab.title,
@@ -270,7 +270,7 @@ describe("Vue Renderer | Event Tests", () => {
                   activeTab.value = index
                 },
               }),
-              h("textRenderable", { content: `Active tab: ${activeTab.value}` }),
+              h("Text", { content: `Active tab: ${activeTab.value}` }),
             ])
         },
       })
@@ -292,8 +292,8 @@ describe("Vue Renderer | Event Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
-              h("tabSelectRenderable", {
+            h("box", {}, [
+              h("tab-select", {
                 focused: true,
                 options: [
                   { name: "Tab 1", value: 0, description: "" },
@@ -326,12 +326,12 @@ describe("Vue Renderer | Event Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
-              h("inputRenderable", {
+            h("box", {}, [
+              h("Input", {
                 focused: input1Focused.value,
                 onInput: input1Spy,
               }),
-              h("inputRenderable", {
+              h("Input", {
                 focused: input2Focused.value,
                 onInput: input2Spy,
               }),
@@ -367,8 +367,8 @@ describe("Vue Renderer | Event Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
-              h("textareaRenderable", {
+            h("box", {}, [
+              h("Textarea", {
                 focused: true,
                 initialValue: "test content",
                 onSubmit: () => onSubmitSpy(),
@@ -391,8 +391,8 @@ describe("Vue Renderer | Event Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
-              h("textareaRenderable", {
+            h("box", {}, [
+              h("Textarea", {
                 focused: true,
                 initialValue: "",
                 onContentChange: (content: string) => onContentChangeSpy(content),
@@ -417,8 +417,8 @@ describe("Vue Renderer | Event Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
-              h("inputRenderable", {
+            h("box", {}, [
+              h("Input", {
                 focused: true,
                 onInput: inputSpy,
               }),
@@ -457,15 +457,15 @@ describe("Vue Renderer | Event Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
-              h("inputRenderable", {
+            h("box", {}, [
+              h("Input", {
                 focused: true,
                 onInput: (val: string) => {
                   inputSpy(val)
                   value.value = val
                 },
               }),
-              h("textRenderable", { content: `Value: ${value.value}` }),
+              h("Text", { content: `Value: ${value.value}` }),
             ])
         },
       })
@@ -500,8 +500,8 @@ describe("Vue Renderer | Event Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
-              h("inputRenderable", {
+            h("box", {}, [
+              h("Input", {
                 focused: true,
                 onInput: inputSpy,
               }),
@@ -551,8 +551,8 @@ describe("Vue Renderer | Event Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
-              h("selectRenderable", {
+            h("box", {}, [
+              h("Select", {
                 focused: true,
                 wrapSelection: true,
                 options: [
@@ -565,7 +565,7 @@ describe("Vue Renderer | Event Tests", () => {
                   selectedIndex.value = index
                 },
               }),
-              h("textRenderable", { content: `Selected: ${selectedIndex.value}` }),
+              h("Text", { content: `Selected: ${selectedIndex.value}` }),
             ])
         },
       })
@@ -601,8 +601,8 @@ describe("Vue Renderer | Event Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
-              h("inputRenderable", {
+            h("box", {}, [
+              h("Input", {
                 focused: true,
                 onInput: inputSpy,
               }),
@@ -647,8 +647,8 @@ describe("Vue Renderer | Event Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
-              h("inputRenderable", {
+            h("box", {}, [
+              h("Input", {
                 focused: true,
                 onPaste: (val: PasteEvent) => {
                   pasteSpy(val)
@@ -696,9 +696,9 @@ describe("Vue Renderer | Event Tests", () => {
         setup() {
           return () =>
             h(
-              "boxRenderable",
+              "box",
               {},
-              items.value.map((item) => h("textRenderable", { content: item })),
+              items.value.map((item) => h("Text", { content: item })),
             )
         },
       })
@@ -731,9 +731,9 @@ describe("Vue Renderer | Event Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
-              h("textRenderable", { content: `Static: ${dynamicText.value}` }),
-              h("textRenderable", { content: "Direct content" }),
+            h("box", {}, [
+              h("Text", { content: `Static: ${dynamicText.value}` }),
+              h("Text", { content: "Direct content" }),
             ])
         },
       })
diff --git a/packages/vue/tests/layout.test.ts b/packages/vue/tests/layout.test.ts
index c83cde1fa..b0231b2b1 100644
--- a/packages/vue/tests/layout.test.ts
+++ b/packages/vue/tests/layout.test.ts
@@ -21,7 +21,7 @@ describe("Vue Renderer | Layout Tests", () => {
     it("should render simple text correctly", async () => {
       const TestComponent = defineComponent({
         render() {
-          return h("textRenderable", {}, "Hello World")
+          return h("Text", {}, "Hello World")
         },
       })
 
@@ -38,10 +38,10 @@ describe("Vue Renderer | Layout Tests", () => {
     it("should render multiline text correctly", async () => {
       const TestComponent = defineComponent({
         render() {
-          return h("boxRenderable", {}, [
-            h("textRenderable", {}, "Line 1"),
-            h("textRenderable", {}, "Line 2"),
-            h("textRenderable", {}, "Line 3"),
+          return h("box", {}, [
+            h("Text", {}, "Line 1"),
+            h("Text", {}, "Line 2"),
+            h("Text", {}, "Line 3"),
           ])
         },
       })
@@ -61,7 +61,7 @@ describe("Vue Renderer | Layout Tests", () => {
 
       const TestComponent = defineComponent({
         render() {
-          return h("textRenderable", {}, `Counter: ${counter}`)
+          return h("Text", {}, `Counter: ${counter}`)
         },
       })
 
@@ -81,11 +81,11 @@ describe("Vue Renderer | Layout Tests", () => {
       const TestComponent = defineComponent({
         render() {
           return h(
-            "boxRenderable",
+            "box",
             {
               style: { width: 20, height: 5, border: true },
             },
-            [h("textRenderable", {}, "Inside Box")],
+            [h("Text", {}, "Inside Box")],
           )
         },
       })
@@ -104,21 +104,21 @@ describe("Vue Renderer | Layout Tests", () => {
       const TestComponent = defineComponent({
         render() {
           return h(
-            "boxRenderable",
+            "box",
             {
               style: { width: 30, height: 10, border: true },
               title: "Parent Box",
             },
             [
               h(
-                "boxRenderable",
+                "box",
                 {
                   style: { left: 2, top: 2, width: 10, height: 3, border: true },
                 },
-                [h("textRenderable", {}, "Nested")],
+                [h("Text", {}, "Nested")],
               ),
               h(
-                "textRenderable",
+                "Text",
                 {
                   style: { left: 15, top: 2 },
                 },
@@ -144,7 +144,7 @@ describe("Vue Renderer | Layout Tests", () => {
         render() {
           return h(Fragment, [
             h(
-              "boxRenderable",
+              "box",
               {
                 style: {
                   position: "absolute",
@@ -156,10 +156,10 @@ describe("Vue Renderer | Layout Tests", () => {
                   backgroundColor: "red",
                 },
               },
-              [h("textRenderable", {}, "Box 1")],
+              [h("Text", {}, "Box 1")],
             ),
             h(
-              "boxRenderable",
+              "box",
               {
                 style: {
                   position: "absolute",
@@ -171,7 +171,7 @@ describe("Vue Renderer | Layout Tests", () => {
                   backgroundColor: "blue",
                 },
               },
-              [h("textRenderable", {}, "Box 2")],
+              [h("Text", {}, "Box 2")],
             ),
           ])
         },
@@ -191,12 +191,12 @@ describe("Vue Renderer | Layout Tests", () => {
       const TestComponent = defineComponent({
         render() {
           return h(
-            "boxRenderable",
+            "box",
             {
               style: { width: 20, height: 5 },
               borderStyle: "single",
             },
-            [h("textRenderable", {}, "With Border")],
+            [h("Text", {}, "With Border")],
           )
         },
       })
@@ -215,12 +215,12 @@ describe("Vue Renderer | Layout Tests", () => {
       const TestComponent = defineComponent({
         render() {
           return h(
-            "boxRenderable",
+            "box",
             {
               style: { width: 20, height: 5 },
               borderColor: "cyan",
             },
-            [h("textRenderable", {}, "Colored Border")],
+            [h("Text", {}, "Colored Border")],
           )
         },
       })
@@ -241,36 +241,36 @@ describe("Vue Renderer | Layout Tests", () => {
       const TestComponent = defineComponent({
         render() {
           return h(
-            "boxRenderable",
+            "box",
             {
               style: { width: 40, border: true },
               title: "Complex Layout",
             },
             [
               h(
-                "boxRenderable",
+                "box",
                 {
                   style: { left: 2, width: 15, height: 5, border: true, backgroundColor: "#333" },
                 },
                 [
-                  h("textRenderable", { style: { fg: "cyan" }, wrapMode: "none" }, "Header Section"),
-                  h("textRenderable", { style: { fg: "yellow" }, wrapMode: "none" }, "Menu Item 1"),
-                  h("textRenderable", { style: { fg: "yellow" }, wrapMode: "none" }, "Menu Item 2"),
+                  h("Text", { style: { fg: "cyan" }, wrapMode: "none" }, "Header Section"),
+                  h("Text", { style: { fg: "yellow" }, wrapMode: "none" }, "Menu Item 1"),
+                  h("Text", { style: { fg: "yellow" }, wrapMode: "none" }, "Menu Item 2"),
                 ],
               ),
               h(
-                "boxRenderable",
+                "box",
                 {
                   style: { left: 18, width: 18, height: 8, border: true, backgroundColor: "#222" },
                 },
                 [
-                  h("textRenderable", { style: { fg: "green" }, wrapMode: "none" }, "Content Area"),
-                  h("textRenderable", { style: { fg: "white" }, wrapMode: "none" }, "Some content here"),
-                  h("textRenderable", { style: { fg: "white" }, wrapMode: "none" }, "More content"),
-                  h("textRenderable", { style: { fg: "magenta" }, wrapMode: "none" }, "Footer text"),
+                  h("Text", { style: { fg: "green" }, wrapMode: "none" }, "Content Area"),
+                  h("Text", { style: { fg: "white" }, wrapMode: "none" }, "Some content here"),
+                  h("Text", { style: { fg: "white" }, wrapMode: "none" }, "More content"),
+                  h("Text", { style: { fg: "magenta" }, wrapMode: "none" }, "Footer text"),
                 ],
               ),
-              h("textRenderable", { style: { left: 2, fg: "gray" } }, "Status: Ready"),
+              h("Text", { style: { left: 2, fg: "gray" } }, "Status: Ready"),
             ],
           )
         },
@@ -290,21 +290,21 @@ describe("Vue Renderer | Layout Tests", () => {
       const TestComponent = defineComponent({
         render() {
           return h(
-            "boxRenderable",
+            "box",
             {
               style: { width: 35, height: 8, border: true },
             },
             [
-              h("textRenderable", {}, [
-                h("spanRenderable", { style: { fg: "red", bold: true } }, "ERROR:"),
+              h("Text", {}, [
+                h("Span", { style: { fg: "red", bold: true } }, "ERROR:"),
                 " Something went wrong",
               ]),
-              h("textRenderable", {}, [
-                h("spanRenderable", { style: { fg: "yellow" } }, "WARNING:"),
+              h("Text", {}, [
+                h("Span", { style: { fg: "yellow" } }, "WARNING:"),
                 " Check your settings",
               ]),
-              h("textRenderable", {}, [
-                h("spanRenderable", { style: { fg: "green" } }, "SUCCESS:"),
+              h("Text", {}, [
+                h("Span", { style: { fg: "green" } }, "SUCCESS:"),
                 " All systems operational",
               ]),
             ],
@@ -326,14 +326,14 @@ describe("Vue Renderer | Layout Tests", () => {
       const TestComponent = defineComponent({
         render() {
           return h(
-            "boxRenderable",
+            "box",
             {
               maxHeight: "100%",
               maxWidth: "100%",
             },
             [
               h(
-                "scrollBoxRenderable",
+                "scrollbox",
                 {
                   scrollbarOptions: { visible: false },
                   stickyScroll: true,
@@ -346,17 +346,17 @@ describe("Vue Renderer | Layout Tests", () => {
                   },
                   border: true,
                 },
-                [h("boxRenderable", { border: true, height: 10, title: "hi" })],
+                [h("box", { border: true, height: 10, title: "hi" })],
               ),
               h(
-                "boxRenderable",
+                "box",
                 {
                   border: true,
                   height: 10,
                   title: "spacer",
                   flexShrink: 0,
                 },
-                [h("textRenderable", {}, "spacer")],
+                [h("Text", {}, "spacer")],
               ),
             ],
           )
@@ -395,7 +395,7 @@ describe("Vue Renderer | Layout Tests", () => {
     it("should handle component with no children", async () => {
       const TestComponent = defineComponent({
         render() {
-          return h("boxRenderable", { style: { width: 10, height: 5 } })
+          return h("box", { style: { width: 10, height: 5 } })
         },
       })
 
@@ -412,7 +412,7 @@ describe("Vue Renderer | Layout Tests", () => {
     it("should handle very small dimensions", async () => {
       const TestComponent = defineComponent({
         render() {
-          return h("textRenderable", {}, "Hi")
+          return h("Text", {}, "Hi")
         },
       })
 
diff --git a/packages/vue/tests/line-number.test.ts b/packages/vue/tests/line-number.test.ts
index 71c52c6fe..ce6a83cca 100644
--- a/packages/vue/tests/line-number.test.ts
+++ b/packages/vue/tests/line-number.test.ts
@@ -37,9 +37,9 @@ console.log(test())`
     const TestComponent = defineComponent({
       setup() {
         return () =>
-          h("boxRenderable", { id: "root", style: { width: "100%", height: "100%" } }, [
+          h("box", { id: "root", style: { width: "100%", height: "100%" } }, [
             h(
-              "lineNumberRenderable",
+              "line-number",
               {
                 id: "line-numbers",
                 fg: "#888888",
@@ -49,7 +49,7 @@ console.log(test())`
                 style: { width: "100%", height: "100%" },
               },
               [
-                h("codeRenderable", {
+                h("Code", {
                   id: "code-content",
                   content: codeContent,
                   filetype: "javascript",
@@ -101,10 +101,10 @@ console.log(test())`
     const TestComponent = defineComponent({
       setup() {
         return () =>
-          h("boxRenderable", { id: "root", style: { width: "100%", height: "100%" } }, [
+          h("box", { id: "root", style: { width: "100%", height: "100%" } }, [
             showLineNumbers.value
               ? h(
-                  "lineNumberRenderable",
+                  "line-number",
                   {
                     id: "line-numbers",
                     fg: "#888888",
@@ -114,7 +114,7 @@ console.log(test())`
                     style: { width: "100%", height: "100%" },
                   },
                   [
-                    h("codeRenderable", {
+                    h("Code", {
                       id: "code-content",
                       content: codeContent,
                       filetype: "javascript",
@@ -124,7 +124,7 @@ console.log(test())`
                     }),
                   ],
                 )
-              : h("codeRenderable", {
+              : h("Code", {
                   id: "code-content-no-lines",
                   content: codeContent,
                   filetype: "javascript",
diff --git a/packages/vue/tests/link.test.ts b/packages/vue/tests/link.test.ts
index de92d8706..2ec0e15e5 100644
--- a/packages/vue/tests/link.test.ts
+++ b/packages/vue/tests/link.test.ts
@@ -23,7 +23,7 @@ describe("Vue Renderer | Link Rendering Tests", () => {
 
     const TestComponent = defineComponent({
       render() {
-        return h("textRenderable", { content: styledText })
+        return h("Text", { content: styledText })
       },
     })
 
@@ -43,7 +43,7 @@ describe("Vue Renderer | Link Rendering Tests", () => {
 
     const TestComponent = defineComponent({
       render() {
-        return h("textRenderable", { content: styledText })
+        return h("Text", { content: styledText })
       },
     })
 
@@ -63,7 +63,7 @@ describe("Vue Renderer | Link Rendering Tests", () => {
 
     const TestComponent = defineComponent({
       render() {
-        return h("textRenderable", { content: styledText })
+        return h("Text", { content: styledText })
       },
     })
 
diff --git a/packages/vue/tests/portal.test.ts b/packages/vue/tests/portal.test.ts
index 9d19471c5..7c986ed2e 100644
--- a/packages/vue/tests/portal.test.ts
+++ b/packages/vue/tests/portal.test.ts
@@ -23,10 +23,10 @@ describe("Vue Renderer | Portal Tests", () => {
       const TestComponent = defineComponent({
         components: { Portal },
         render() {
-          return h("boxRenderable", {}, [
-            h("textRenderable", {}, "Before portal"),
-            h(Portal, {}, () => [h("textRenderable", {}, "Portal content")]),
-            h("textRenderable", {}, "After portal"),
+          return h("box", {}, [
+            h("Text", {}, "Before portal"),
+            h(Portal, {}, () => [h("Text", {}, "Portal content")]),
+            h("Text", {}, "After portal"),
           ])
         },
       })
@@ -47,10 +47,10 @@ describe("Vue Renderer | Portal Tests", () => {
       const TestComponent = defineComponent({
         components: { Portal },
         render() {
-          return h("boxRenderable", {}, [
+          return h("box", {}, [
             h(Portal, {}, () => [
-              h("boxRenderable", { style: { border: true }, title: "Portal Box" }, [
-                h("textRenderable", {}, "Portal content"),
+              h("box", { style: { border: true }, title: "Portal Box" }, [
+                h("Text", {}, "Portal content"),
               ]),
             ]),
           ])
@@ -74,8 +74,8 @@ describe("Vue Renderer | Portal Tests", () => {
       const TestComponent = defineComponent({
         components: { Portal },
         render() {
-          return h("boxRenderable", {}, [
-            h(Portal, {}, () => [h("textRenderable", {}, "Nested text 1"), h("textRenderable", {}, "Nested text 2")]),
+          return h("box", {}, [
+            h(Portal, {}, () => [h("Text", {}, "Nested text 1"), h("Text", {}, "Nested text 2")]),
           ])
         },
       })
@@ -100,8 +100,8 @@ describe("Vue Renderer | Portal Tests", () => {
           return { showPortal }
         },
         render() {
-          return h("boxRenderable", {}, [
-            showPortal.value ? h(Portal, {}, () => [h("textRenderable", {}, "Portal content")]) : null,
+          return h("box", {}, [
+            showPortal.value ? h(Portal, {}, () => [h("Text", {}, "Portal content")]) : null,
           ])
         },
       })
@@ -130,9 +130,9 @@ describe("Vue Renderer | Portal Tests", () => {
       const TestComponent = defineComponent({
         components: { Portal },
         render() {
-          return h("boxRenderable", {}, [
-            h(Portal, {}, () => [h("textRenderable", {}, "First portal")]),
-            h(Portal, {}, () => [h("textRenderable", {}, "Second portal")]),
+          return h("box", {}, [
+            h(Portal, {}, () => [h("Text", {}, "First portal")]),
+            h(Portal, {}, () => [h("Text", {}, "Second portal")]),
           ])
         },
       })
diff --git a/packages/vue/tests/text-nodes.test.ts b/packages/vue/tests/text-nodes.test.ts
index 466bb4957..d20351d01 100644
--- a/packages/vue/tests/text-nodes.test.ts
+++ b/packages/vue/tests/text-nodes.test.ts
@@ -22,7 +22,7 @@ describe("Vue Renderer | TextNode Tests", () => {
     const TestComponent = defineComponent({
       render() {
         return h(
-          "boxRenderable",
+          "box",
           { id: "container", style: { width: 20, height: 5, border: true } },
           "Hello",
         )
@@ -47,7 +47,7 @@ describe("Vue Renderer | TextNode Tests", () => {
     const TestComponent = defineComponent({
       render() {
         return h(
-          "boxRenderable",
+          "box",
           { id: "container", style: { width: 20, height: 5, border: true } },
           show.value ? "Hi" : undefined,
         )
@@ -72,8 +72,8 @@ describe("Vue Renderer | TextNode Tests", () => {
     expect(remaining.length).toBe(1)
     const ghost = remaining[0]!
     expect(ghost).toBeInstanceOf(TextRenderable)
-    const textRenderable = ghost as TextRenderable
-    const contentChunks = textRenderable.content.chunks
+    const text = ghost as TextRenderable
+    const contentChunks = text.content.chunks
     const combinedText = contentChunks.map((c) => c.text).join("")
     const trimmedText = combinedText.trim()
     expect(trimmedText).toBe("")
diff --git a/packages/vue/tests/textarea.test.ts b/packages/vue/tests/textarea.test.ts
index a46e12bc8..43bd664dd 100644
--- a/packages/vue/tests/textarea.test.ts
+++ b/packages/vue/tests/textarea.test.ts
@@ -23,7 +23,7 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("textareaRenderable", {
+            h("Textarea", {
               initialValue: "Hello World",
               width: 20,
               height: 5,
@@ -47,7 +47,7 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("textareaRenderable", {
+            h("Textarea", {
               initialValue: "Line 1\nLine 2\nLine 3",
               width: 20,
               height: 10,
@@ -71,7 +71,7 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("textareaRenderable", {
+            h("Textarea", {
               initialValue: "This is a very long line that should wrap to multiple lines when word wrapping is enabled",
               wrapMode: "word",
               width: 20,
@@ -95,7 +95,7 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("textareaRenderable", {
+            h("Textarea", {
               initialValue: "",
               placeholder: "Type something here...",
               placeholderColor: "#666666",
@@ -123,15 +123,15 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", { border: true, borderColor: "#444444" }, [
-              h("boxRenderable", { flexDirection: "row" }, [
+            h("box", { border: true, borderColor: "#444444" }, [
+              h("box", { flexDirection: "row" }, [
                 h(
-                  "boxRenderable",
+                  "box",
                   { width: 3, justifyContent: "center", alignItems: "center", backgroundColor: "#2d2d2d" },
-                  [h("textRenderable", { attributes: TextAttributes.BOLD, fg: "#00ff00" }, ">")],
+                  [h("Text", { attributes: TextAttributes.BOLD, fg: "#00ff00" }, ">")],
                 ),
-                h("boxRenderable", { paddingTop: 1, paddingBottom: 1, backgroundColor: "#1e1e1e", flexGrow: 1 }, [
-                  h("textareaRenderable", {
+                h("box", { paddingTop: 1, paddingBottom: 1, backgroundColor: "#1e1e1e", flexGrow: 1 }, [
+                  h("Textarea", {
                     initialValue: "Hello from the prompt",
                     flexShrink: 1,
                     backgroundColor: "#1e1e1e",
@@ -139,15 +139,15 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
                     cursorColor: "#00ff00",
                   }),
                 ]),
-                h("boxRenderable", { backgroundColor: "#1e1e1e", width: 1 }),
+                h("box", { backgroundColor: "#1e1e1e", width: 1 }),
               ]),
-              h("boxRenderable", { flexDirection: "row", justifyContent: "space-between" }, [
-                h("textRenderable", { wrapMode: "none" }, [
-                  h("spanRenderable", { style: { fg: "#888888" } }, "provider"),
+              h("box", { flexDirection: "row", justifyContent: "space-between" }, [
+                h("Text", { wrapMode: "none" }, [
+                  h("Span", { style: { fg: "#888888" } }, "provider"),
                   " ",
-                  h("spanRenderable", { style: { bold: true } }, "model-name"),
+                  h("Span", { style: { bold: true } }, "model-name"),
                 ]),
-                h("textRenderable", { fg: "#888888" }, "ctrl+p commands"),
+                h("Text", { fg: "#888888" }, "ctrl+p commands"),
               ]),
             ])
         },
@@ -167,15 +167,15 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", { border: true, borderColor: "#444444", width: "100%" }, [
-              h("boxRenderable", { flexDirection: "row", width: "100%" }, [
+            h("box", { border: true, borderColor: "#444444", width: "100%" }, [
+              h("box", { flexDirection: "row", width: "100%" }, [
                 h(
-                  "boxRenderable",
+                  "box",
                   { width: 3, justifyContent: "center", alignItems: "center", backgroundColor: "#2d2d2d" },
-                  [h("textRenderable", { attributes: TextAttributes.BOLD, fg: "#00ff00" }, ">")],
+                  [h("Text", { attributes: TextAttributes.BOLD, fg: "#00ff00" }, ">")],
                 ),
-                h("boxRenderable", { paddingTop: 1, paddingBottom: 1, backgroundColor: "#1e1e1e", flexGrow: 1 }, [
-                  h("textareaRenderable", {
+                h("box", { paddingTop: 1, paddingBottom: 1, backgroundColor: "#1e1e1e", flexGrow: 1 }, [
+                  h("Textarea", {
                     initialValue:
                       "This is a very long prompt that will wrap across multiple lines in the textarea. It should maintain proper layout with the indicator on the left.",
                     wrapMode: "word",
@@ -184,13 +184,13 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
                     textColor: "#ffffff",
                   }),
                 ]),
-                h("boxRenderable", { backgroundColor: "#1e1e1e", width: 1 }),
+                h("box", { backgroundColor: "#1e1e1e", width: 1 }),
               ]),
-              h("boxRenderable", { flexDirection: "row" }, [
-                h("textRenderable", { wrapMode: "none" }, [
-                  h("spanRenderable", { style: { fg: "#888888" } }, "openai"),
+              h("box", { flexDirection: "row" }, [
+                h("Text", { wrapMode: "none" }, [
+                  h("Span", { style: { fg: "#888888" } }, "openai"),
                   " ",
-                  h("spanRenderable", { style: { bold: true } }, "gpt-4"),
+                  h("Span", { style: { bold: true } }, "gpt-4"),
                 ]),
               ]),
             ])
@@ -211,15 +211,15 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", { border: true, borderColor: "#ff9900" }, [
-              h("boxRenderable", { flexDirection: "row" }, [
+            h("box", { border: true, borderColor: "#ff9900" }, [
+              h("box", { flexDirection: "row" }, [
                 h(
-                  "boxRenderable",
+                  "box",
                   { width: 3, justifyContent: "center", alignItems: "center", backgroundColor: "#2d2d2d" },
-                  [h("textRenderable", { attributes: TextAttributes.BOLD, fg: "#ff9900" }, "!")],
+                  [h("Text", { attributes: TextAttributes.BOLD, fg: "#ff9900" }, "!")],
                 ),
-                h("boxRenderable", { paddingTop: 1, paddingBottom: 1, backgroundColor: "#1e1e1e", flexGrow: 1 }, [
-                  h("textareaRenderable", {
+                h("box", { paddingTop: 1, paddingBottom: 1, backgroundColor: "#1e1e1e", flexGrow: 1 }, [
+                  h("Textarea", {
                     initialValue: "ls -la",
                     flexShrink: 1,
                     backgroundColor: "#1e1e1e",
@@ -227,9 +227,9 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
                     cursorColor: "#ff9900",
                   }),
                 ]),
-                h("boxRenderable", { backgroundColor: "#1e1e1e", width: 1 }),
+                h("box", { backgroundColor: "#1e1e1e", width: 1 }),
               ]),
-              h("boxRenderable", { flexDirection: "row" }, [h("textRenderable", { fg: "#888888" }, "shell mode")]),
+              h("box", { flexDirection: "row" }, [h("Text", { fg: "#888888" }, "shell mode")]),
             ])
         },
       })
@@ -250,14 +250,14 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", { border: true, title: "Chat" }, [
-              h("boxRenderable", { border: true, borderColor: "#00ff00", marginBottom: 1 }, [
-                h("boxRenderable", { flexDirection: "row" }, [
-                  h("boxRenderable", { width: 5, backgroundColor: "#2d2d2d" }, [
-                    h("textRenderable", { fg: "#00ff00" }, "User"),
+            h("box", { border: true, title: "Chat" }, [
+              h("box", { border: true, borderColor: "#00ff00", marginBottom: 1 }, [
+                h("box", { flexDirection: "row" }, [
+                  h("box", { width: 5, backgroundColor: "#2d2d2d" }, [
+                    h("Text", { fg: "#00ff00" }, "User"),
                   ]),
-                  h("boxRenderable", { paddingLeft: 1, backgroundColor: "#1e1e1e", flexGrow: 1 }, [
-                    h("textareaRenderable", {
+                  h("box", { paddingLeft: 1, backgroundColor: "#1e1e1e", flexGrow: 1 }, [
+                    h("Textarea", {
                       initialValue: "What is the weather like today?",
                       wrapMode: "word",
                       backgroundColor: "#1e1e1e",
@@ -266,13 +266,13 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
                   ]),
                 ]),
               ]),
-              h("boxRenderable", { border: true, borderColor: "#0088ff" }, [
-                h("boxRenderable", { flexDirection: "row" }, [
-                  h("boxRenderable", { width: 5, backgroundColor: "#2d2d2d" }, [
-                    h("textRenderable", { fg: "#0088ff" }, "AI"),
+              h("box", { border: true, borderColor: "#0088ff" }, [
+                h("box", { flexDirection: "row" }, [
+                  h("box", { width: 5, backgroundColor: "#2d2d2d" }, [
+                    h("Text", { fg: "#0088ff" }, "AI"),
                   ]),
-                  h("boxRenderable", { paddingLeft: 1, backgroundColor: "#1e1e1e", flexGrow: 1 }, [
-                    h("textareaRenderable", {
+                  h("box", { paddingLeft: 1, backgroundColor: "#1e1e1e", flexGrow: 1 }, [
+                    h("Textarea", {
                       initialValue:
                         "I don't have access to real-time weather data, but I can help you find that information through various weather services.",
                       wrapMode: "word",
@@ -300,11 +300,11 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", { style: { width: 50, border: true }, title: "Layout Test" }, [
-              h("boxRenderable", { flexDirection: "row", gap: 1 }, [
-                h("boxRenderable", { width: 20, border: true, borderColor: "#00ff00" }, [
-                  h("textRenderable", { fg: "#00ff00" }, "Input 1:"),
-                  h("textareaRenderable", {
+            h("box", { style: { width: 50, border: true }, title: "Layout Test" }, [
+              h("box", { flexDirection: "row", gap: 1 }, [
+                h("box", { width: 20, border: true, borderColor: "#00ff00" }, [
+                  h("Text", { fg: "#00ff00" }, "Input 1:"),
+                  h("Textarea", {
                     initialValue: "Left panel content",
                     wrapMode: "word",
                     backgroundColor: "#1e1e1e",
@@ -312,9 +312,9 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
                     flexShrink: 1,
                   }),
                 ]),
-                h("boxRenderable", { flexGrow: 1, border: true, borderColor: "#0088ff" }, [
-                  h("textRenderable", { fg: "#0088ff" }, "Input 2:"),
-                  h("textareaRenderable", {
+                h("box", { flexGrow: 1, border: true, borderColor: "#0088ff" }, [
+                  h("Text", { fg: "#0088ff" }, "Input 2:"),
+                  h("Textarea", {
                     initialValue: "Right panel with longer content that may wrap",
                     wrapMode: "word",
                     backgroundColor: "#1e1e1e",
@@ -323,9 +323,9 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
                   }),
                 ]),
               ]),
-              h("boxRenderable", { border: true, borderColor: "#ff9900", marginTop: 1 }, [
-                h("textRenderable", { fg: "#ff9900" }, "Bottom input:"),
-                h("textareaRenderable", {
+              h("box", { border: true, borderColor: "#ff9900", marginTop: 1 }, [
+                h("Text", { fg: "#ff9900" }, "Bottom input:"),
+                h("Textarea", {
                   initialValue: "Bottom panel spanning full width",
                   wrapMode: "word",
                   backgroundColor: "#1e1e1e",
@@ -355,13 +355,13 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", { border: true }, [
-              h("boxRenderable", { flexDirection: "row" }, [
-                h("boxRenderable", { width: indicatorWidth.value, backgroundColor: "#f00" }, [
-                  h("textRenderable", {}, ">"),
+            h("box", { border: true }, [
+              h("box", { flexDirection: "row" }, [
+                h("box", { width: indicatorWidth.value, backgroundColor: "#f00" }, [
+                  h("Text", {}, ">"),
                 ]),
-                h("boxRenderable", { backgroundColor: "#0f0", flexGrow: 1 }, [
-                  h("textRenderable", {}, "Content that takes up space"),
+                h("box", { backgroundColor: "#0f0", flexGrow: 1 }, [
+                  h("Text", {}, "Content that takes up space"),
                 ]),
               ]),
             ])
@@ -385,15 +385,15 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", { border: true, width: 25, height: 10 }, [
-              h("boxRenderable", { flexDirection: "column", height: "100%" }, [
-                h("boxRenderable", { height: headerHeight.value, backgroundColor: "#f00" }, [
-                  h("textRenderable", {}, "Header"),
+            h("box", { border: true, width: 25, height: 10 }, [
+              h("box", { flexDirection: "column", height: "100%" }, [
+                h("box", { height: headerHeight.value, backgroundColor: "#f00" }, [
+                  h("Text", {}, "Header"),
                 ]),
-                h("boxRenderable", { backgroundColor: "#0f0", flexGrow: 1 }, [
-                  h("textareaRenderable", { initialValue: "Line1\nLine2\nLine3\nLine4\nLine5\nLine6\nLine7\nLine8" }),
+                h("box", { backgroundColor: "#0f0", flexGrow: 1 }, [
+                  h("Textarea", { initialValue: "Line1\nLine2\nLine3\nLine4\nLine5\nLine6\nLine7\nLine8" }),
                 ]),
-                h("boxRenderable", { height: 2, backgroundColor: "#00f" }, [h("textRenderable", {}, "Footer")]),
+                h("box", { height: 2, backgroundColor: "#00f" }, [h("Text", {}, "Footer")]),
               ]),
             ])
         },
@@ -416,11 +416,11 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", { border: true }, [
-              h("boxRenderable", { flexDirection: "row" }, [
-                h("boxRenderable", { width: 3, backgroundColor: "#2d2d2d" }, [h("textRenderable", {}, ">")]),
-                h("boxRenderable", { backgroundColor: "#1e1e1e", flexGrow: 1, paddingTop: 1, paddingBottom: 1 }, [
-                  h("textareaRenderable", {
+            h("box", { border: true }, [
+              h("box", { flexDirection: "row" }, [
+                h("box", { width: 3, backgroundColor: "#2d2d2d" }, [h("Text", {}, ">")]),
+                h("box", { backgroundColor: "#1e1e1e", flexGrow: 1, paddingTop: 1, paddingBottom: 1 }, [
+                  h("Textarea", {
                     initialValue: "Focused textarea",
                     backgroundColor: "#1e1e1e",
                     textColor: "#888888",
@@ -448,15 +448,15 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", { border: true, borderColor: "#444444" }, [
-              h("boxRenderable", { flexDirection: "row" }, [
+            h("box", { border: true, borderColor: "#444444" }, [
+              h("box", { flexDirection: "row" }, [
                 h(
-                  "boxRenderable",
+                  "box",
                   { width: 3, justifyContent: "center", alignItems: "center", backgroundColor: "#2d2d2d" },
-                  [h("textRenderable", { attributes: TextAttributes.BOLD, fg: "#00ff00" }, ">")],
+                  [h("Text", { attributes: TextAttributes.BOLD, fg: "#00ff00" }, ">")],
                 ),
-                h("boxRenderable", { paddingTop: 1, paddingBottom: 1, backgroundColor: "#1e1e1e", flexGrow: 1 }, [
-                  h("textareaRenderable", {
+                h("box", { paddingTop: 1, paddingBottom: 1, backgroundColor: "#1e1e1e", flexGrow: 1 }, [
+                  h("Textarea", {
                     initialValue: "",
                     placeholder: "Enter your prompt here...",
                     placeholderColor: "#666666",
@@ -465,9 +465,9 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
                     textColor: "#ffffff",
                   }),
                 ]),
-                h("boxRenderable", { backgroundColor: "#1e1e1e", width: 1 }),
+                h("box", { backgroundColor: "#1e1e1e", width: 1 }),
               ]),
-              h("boxRenderable", { flexDirection: "row" }, [h("textRenderable", { fg: "#888888" }, "Ready to chat")]),
+              h("box", { flexDirection: "row" }, [h("Text", { fg: "#888888" }, "Ready to chat")]),
             ])
         },
       })
@@ -486,11 +486,11 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", { border: true }, [
-              h("boxRenderable", { flexDirection: "row" }, [
-                h("boxRenderable", { width: 3, backgroundColor: "#2d2d2d" }, [h("textRenderable", {}, ">")]),
-                h("boxRenderable", { backgroundColor: "#1e1e1e", flexGrow: 1, paddingTop: 1, paddingBottom: 1 }, [
-                  h("textareaRenderable", {
+            h("box", { border: true }, [
+              h("box", { flexDirection: "row" }, [
+                h("box", { width: 3, backgroundColor: "#2d2d2d" }, [h("Text", {}, ">")]),
+                h("box", { backgroundColor: "#1e1e1e", flexGrow: 1, paddingTop: 1, paddingBottom: 1 }, [
+                  h("Textarea", {
                     initialValue: "ThisIsAVeryLongLineWithNoSpacesThatWillWrapByCharacterWhenCharWrappingIsEnabled",
                     wrapMode: "char",
                     flexShrink: 1,
@@ -517,16 +517,16 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
       const TestComponent = defineComponent({
         setup() {
           return () =>
-            h("boxRenderable", {}, [
-              h("boxRenderable", { border: true, borderColor: "#444444" }, [
-                h("boxRenderable", { flexDirection: "row" }, [
+            h("box", {}, [
+              h("box", { border: true, borderColor: "#444444" }, [
+                h("box", { flexDirection: "row" }, [
                   h(
-                    "boxRenderable",
+                    "box",
                     { width: 3, justifyContent: "center", alignItems: "center", backgroundColor: "#2d2d2d" },
-                    [h("textRenderable", { attributes: TextAttributes.BOLD, fg: "#00ff00" }, ">")],
+                    [h("Text", { attributes: TextAttributes.BOLD, fg: "#00ff00" }, ">")],
                   ),
-                  h("boxRenderable", { paddingTop: 1, paddingBottom: 1, backgroundColor: "#1e1e1e", flexGrow: 1 }, [
-                    h("textareaRenderable", {
+                  h("box", { paddingTop: 1, paddingBottom: 1, backgroundColor: "#1e1e1e", flexGrow: 1 }, [
+                    h("Textarea", {
                       initialValue: "Explain how async/await works in JavaScript and provide some examples",
                       wrapMode: "word",
                       flexShrink: 1,
@@ -535,25 +535,25 @@ describe("Vue Renderer | Textarea Layout Tests", () => {
                       cursorColor: "#00ff00",
                     }),
                   ]),
-                  h("boxRenderable", {
+                  h("box", {
                     backgroundColor: "#1e1e1e",
                     width: 1,
                     justifyContent: "center",
                     alignItems: "center",
                   }),
                 ]),
-                h("boxRenderable", { flexDirection: "row", justifyContent: "space-between" }, [
-                  h("textRenderable", { flexShrink: 0, wrapMode: "none" }, [
-                    h("spanRenderable", { style: { fg: "#888888" } }, "openai"),
+                h("box", { flexDirection: "row", justifyContent: "space-between" }, [
+                  h("Text", { flexShrink: 0, wrapMode: "none" }, [
+                    h("Span", { style: { fg: "#888888" } }, "openai"),
                     " ",
-                    h("spanRenderable", { style: { bold: true } }, "gpt-4-turbo"),
+                    h("Span", { style: { bold: true } }, "gpt-4-turbo"),
                   ]),
-                  h("textRenderable", {}, ["ctrl+p ", h("spanRenderable", { style: { fg: "#888888" } }, "commands")]),
+                  h("Text", {}, ["ctrl+p ", h("Span", { style: { fg: "#888888" } }, "commands")]),
                 ]),
               ]),
-              h("boxRenderable", { marginTop: 1 }, [
+              h("box", { marginTop: 1 }, [
                 h(
-                  "textRenderable",
+                  "Text",
                   { fg: "#666666", wrapMode: "word" },
                   "Tip: Use arrow keys to navigate through history when cursor is at the start",
                 ),
diff --git a/packages/vue/types/opentui.d.ts b/packages/vue/types/opentui.d.ts
index 22403c203..cc8238b64 100644
--- a/packages/vue/types/opentui.d.ts
+++ b/packages/vue/types/opentui.d.ts
@@ -137,49 +137,24 @@ export function extend<T extends Record<string, RenderableConstructor>>(componen
 
 declare module "@vue/runtime-core" {
   export interface GlobalComponents extends ExtendedIntrinsicElements<OpenTUIComponents> {
-    asciiFontRenderable: DefineComponent<AsciiFontProps>
-    boxRenderable: DefineComponent<BoxProps>
-    inputRenderable: DefineComponent<InputProps>
-    selectRenderable: DefineComponent<SelectProps>
-    tabSelectRenderable: DefineComponent<TabSelectProps>
-    textRenderable: DefineComponent<TextProps>
-    scrollBoxRenderable: DefineComponent<ScrollBoxProps>
-    textareaRenderable: DefineComponent<TextareaProps>
-    codeRenderable: DefineComponent<CodeProps>
-    diffRenderable: DefineComponent<DiffProps>
-    lineNumberRenderable: DefineComponent<LineNumberProps>
-    spanRenderable: DefineComponent<SpanProps>
-    strongRenderable: DefineComponent<SpanProps>
-    bRenderable: DefineComponent<SpanProps>
-    emRenderable: DefineComponent<SpanProps>
-    iRenderable: DefineComponent<SpanProps>
-    uRenderable: DefineComponent<SpanProps>
-    brRenderable: DefineComponent<{}>
-    aRenderable: DefineComponent<LinkProps>
-  }
-}
-
-// Augment for JSX/TSX support in Vue
-declare module "@vue/runtime-dom" {
-  export interface IntrinsicElementAttributes extends ExtendedIntrinsicElements<OpenTUIComponents> {
-    asciiFontRenderable: AsciiFontProps
-    boxRenderable: BoxProps
-    inputRenderable: InputProps
-    selectRenderable: SelectProps
-    tabSelectRenderable: TabSelectProps
-    textRenderable: TextProps
-    scrollBoxRenderable: ScrollBoxProps
-    textareaRenderable: TextareaProps
-    codeRenderable: CodeProps
-    diffRenderable: DiffProps
-    lineNumberRenderable: LineNumberProps
-    spanRenderable: SpanProps
-    strongRenderable: SpanProps
-    bRenderable: SpanProps
-    emRenderable: SpanProps
-    iRenderable: SpanProps
-    uRenderable: SpanProps
-    brRenderable: {}
-    aRenderable: LinkProps
+    "ascii-font": DefineComponent<AsciiFontProps>
+    box: DefineComponent<BoxProps>
+    Input: DefineComponent<InputProps>
+    Select: DefineComponent<SelectProps>
+    "tab-select": DefineComponent<TabSelectProps>
+    Text: DefineComponent<TextProps>
+    scrollbox: DefineComponent<ScrollBoxProps>
+    Textarea: DefineComponent<TextareaProps>
+    Code: DefineComponent<CodeProps>
+    diff: DefineComponent<DiffProps>
+    "line-number": DefineComponent<LineNumberProps>
+    Span: DefineComponent<SpanProps>
+    Strong: DefineComponent<SpanProps>
+    B: DefineComponent<SpanProps>
+    Em: DefineComponent<SpanProps>
+    I: DefineComponent<SpanProps>
+    U: DefineComponent<SpanProps>
+    Br: DefineComponent<{}>
+    A: DefineComponent<LinkProps>
   }
 }