diff --git a/Sources/TUIkit/Modifiers/BackgroundModifier.swift b/Sources/TUIkit/Modifiers/BackgroundModifier.swift
index 52fe30a3..9531c1a2 100644
--- a/Sources/TUIkit/Modifiers/BackgroundModifier.swift
+++ b/Sources/TUIkit/Modifiers/BackgroundModifier.swift
@@ -16,24 +16,27 @@ public struct BackgroundModifier: ViewModifier {
         guard !buffer.isEmpty else { return buffer }
 
         let resolvedColor = color.resolve(with: context.environment.palette)
-        let width = buffer.width
-        var lines: [String] = []
-
-        for line in buffer.lines {
-            // Pad the line to full width so background covers everything
-            let paddedLine = line.padToVisibleWidth(width)
-
-            // We need to handle existing ANSI codes in the line
-            // For simplicity, we wrap the whole line with background
-            let colored = applyBackground(to: paddedLine, color: resolvedColor)
-            lines.append(colored)
-        }
-
-        return FrameBuffer(lines: lines)
+        return FrameBuffer(
+            terminalSurface: buffer.terminalSurface.applyingBackground(
+                resolvedColor.terminalBackgroundColor
+            )
+        )
     }
+}
 
-    /// Applies background color to a string, preserving existing formatting.
-    private func applyBackground(to string: String, color: Color) -> String {
-        ANSIRenderer.backgroundCode(for: color) + string + ANSIRenderer.reset
+private extension Color {
+    var terminalBackgroundColor: TerminalColor {
+        switch value {
+        case .standard(let color):
+            .ansi(Int(color.backgroundCode))
+        case .bright(let color):
+            .ansi(Int(color.brightBackgroundCode))
+        case .palette256(let index):
+            .indexed(Int(index))
+        case .rgb(let red, let green, let blue):
+            .rgb(red: Int(red), green: Int(green), blue: Int(blue))
+        case .semantic:
+            preconditionFailure("Semantic color must be resolved before rendering")
+        }
     }
 }
diff --git a/Sources/TUIkit/Notification/NotificationTiming.swift b/Sources/TUIkit/Notification/NotificationTiming.swift
index 6fa51133..8daff93a 100644
--- a/Sources/TUIkit/Notification/NotificationTiming.swift
+++ b/Sources/TUIkit/Notification/NotificationTiming.swift
@@ -48,19 +48,20 @@ enum NotificationTiming {
         return 0.0
     }
 
-    /// Wraps text into lines that fit a maximum character width.
+    /// Wraps text into lines that fit a maximum terminal-cell width.
     ///
     /// Splits on word boundaries (spaces). Words longer than `maxWidth`
     /// are placed on their own line without further splitting.
     ///
     /// - Parameters:
     ///   - text: The text to wrap.
-    ///   - maxWidth: Maximum characters per line.
+    ///   - maxWidth: Maximum terminal cells per line.
     /// - Returns: An array of wrapped lines (never empty).
     static func wordWrap(_ text: String, maxWidth: Int) -> [String] {
-        guard maxWidth > 0 else { return [text] }
+        let sanitizedText = text.sanitizedForTerminal
+        guard maxWidth > 0 else { return [sanitizedText] }
 
-        let words = text.split(separator: " ", omittingEmptySubsequences: false)
+        let words = sanitizedText.split(separator: " ", omittingEmptySubsequences: false)
         var lines: [String] = []
         var currentLine = ""
 
@@ -68,7 +69,7 @@ enum NotificationTiming {
             let wordStr = String(word)
             if currentLine.isEmpty {
                 currentLine = wordStr
-            } else if currentLine.count + 1 + wordStr.count <= maxWidth {
+            } else if currentLine.strippedLength + 1 + wordStr.strippedLength <= maxWidth {
                 currentLine += " " + wordStr
             } else {
                 lines.append(currentLine)
diff --git a/Sources/TUIkit/Rendering/FrameDiffWriter.swift b/Sources/TUIkit/Rendering/FrameDiffWriter.swift
index 7374eec4..95fadf67 100644
--- a/Sources/TUIkit/Rendering/FrameDiffWriter.swift
+++ b/Sources/TUIkit/Rendering/FrameDiffWriter.swift
@@ -67,8 +67,12 @@ extension FrameDiffWriter {
         bgCode: String,
         reset: String
     ) -> [String] {
+        let outputWidth = max(0, terminalWidth)
+        let outputHeight = max(0, terminalHeight)
+        let clippedBuffer = buffer.clipped(toWidth: outputWidth, height: outputHeight)
+        let clippedLines = clippedBuffer.lines
         var lines: [String] = []
-        lines.reserveCapacity(terminalHeight)
+        lines.reserveCapacity(outputHeight)
 
         // ESC[2K erases the entire line using the current background color.
         // Placed after bgCode so the erase uses the app background, not the
@@ -77,11 +81,10 @@ extension FrameDiffWriter {
         let eraseLine = "\u{1B}[2K"
         let emptyLine = bgCode + eraseLine + reset
 
-        for row in 0..<terminalHeight {
-            if row < buffer.height {
-                let line = buffer.lines[row]
-                let visibleWidth = line.strippedLength
-                let padding = max(0, terminalWidth - visibleWidth)
+        for row in 0..<outputHeight {
+            if row < clippedBuffer.height {
+                let line = clippedLines[row]
+                let padding = max(0, outputWidth - clippedBuffer.width)
                 let lineWithBg = line.replacingOccurrences(of: reset, with: reset + bgCode)
                 let paddedLine = bgCode + eraseLine + lineWithBg + String(repeating: " ", count: padding) + reset
                 lines.append(paddedLine)
diff --git a/Sources/TUIkit/Rendering/TextFieldContentRenderer.swift b/Sources/TUIkit/Rendering/TextFieldContentRenderer.swift
index 535b0e28..a9ef1dc7 100644
--- a/Sources/TUIkit/Rendering/TextFieldContentRenderer.swift
+++ b/Sources/TUIkit/Rendering/TextFieldContentRenderer.swift
@@ -24,9 +24,9 @@ struct TextFieldContentRenderer {
     /// Whether the field is disabled.
     let isDisabled: Bool
 
-    /// Returns the display character for a given index in the text.
-    /// For TextField: the actual character. For SecureField: a bullet.
-    let displayCharacter: (_ index: Int, _ text: String) -> Character
+    /// Maps one source grapheme to its displayed grapheme.
+    /// For TextField: the original character. For SecureField: a bullet.
+    let displayCharacter: (_ character: Character) -> Character
 
     // MARK: - Content Building
 
@@ -41,14 +41,15 @@ struct TextFieldContentRenderer {
         cursorTimer: CursorTimer?,
         contentWidth: Int
     ) -> String {
-        let isEmpty = text.isEmpty
+        let sanitizedText = text.sanitizedForTerminal
+        let isEmpty = sanitizedText.isEmpty
         let backgroundColor = palette.accent.opacity(ViewConstants.focusBorderDim)
 
         if isEmpty && !isFocused && prompt != nil {
             return buildPromptContent(palette: palette, background: backgroundColor, width: contentWidth)
         } else if isFocused {
             return buildTextWithCursor(
-                text: text,
+                text: sanitizedText,
                 cursorPosition: cursorPosition,
                 selectionRange: selectionRange,
                 palette: palette,
@@ -59,7 +60,7 @@ struct TextFieldContentRenderer {
             )
         } else {
             return buildTextContent(
-                text: text,
+                text: sanitizedText,
                 palette: palette,
                 background: backgroundColor,
                 width: contentWidth
@@ -78,8 +79,8 @@ struct TextFieldContentRenderer {
         } else {
             promptText = ""
         }
-        let truncated = String(promptText.prefix(width))
-        let paddedPrompt = truncated.padding(toLength: width, withPad: " ", startingAt: 0)
+        let truncated = promptText.ansiAwarePrefix(visibleCount: width)
+        let paddedPrompt = truncated.padToVisibleWidth(width)
         return ANSIRenderer.colorize(paddedPrompt, foreground: palette.foregroundTertiary, background: background)
     }
 
@@ -87,12 +88,18 @@ struct TextFieldContentRenderer {
 
     /// Builds text content without cursor (unfocused state).
     private func buildTextContent(text: String, palette: any Palette, background: Color, width: Int) -> String {
-        let visibleCount = min(text.count, width)
+        let characters = displayCharacters(for: text)
         var displayText = ""
-        for characterIndex in 0..<visibleCount {
-            displayText.append(displayCharacter(characterIndex, text))
+        var displayWidth = 0
+
+        for character in characters {
+            let characterWidth = character.terminalWidth
+            guard displayWidth + characterWidth <= width else { break }
+            displayText.append(character)
+            displayWidth += characterWidth
         }
-        let paddedText = displayText.padding(toLength: width, withPad: " ", startingAt: 0)
+
+        let paddedText = displayText.padToVisibleWidth(width)
         let foreground = isDisabled ? palette.foregroundTertiary : palette.foreground
         return ANSIRenderer.colorize(paddedText, foreground: foreground, background: background)
     }
@@ -112,18 +119,19 @@ struct TextFieldContentRenderer {
         background: Color,
         width: Int
     ) -> String {
-        let clampedPosition = max(0, min(cursorPosition, text.count))
-
-        // Calculate scroll offset to keep cursor visible
-        let visibleTextWidth = width - 1  // Reserve 1 char for cursor
-        let scrollOffset: Int
-        if clampedPosition <= visibleTextWidth {
-            scrollOffset = 0
-        } else {
-            scrollOffset = clampedPosition - visibleTextWidth
-        }
-
-        let visibleStart = scrollOffset
+        let characters = displayCharacters(for: text)
+        let clampedPosition = max(0, min(cursorPosition, characters.count))
+        let cursorCharacter = cursorStyle.shape.character
+        let cursorCharacterWidth = max(1, cursorCharacter.terminalWidth)
+        let underlyingCursorWidth = clampedPosition < characters.count
+            ? max(1, characters[clampedPosition].terminalWidth)
+            : 1
+        let cursorSlotWidth = max(cursorCharacterWidth, underlyingCursorWidth)
+        let visibleStart = visibleStart(
+            characters: characters,
+            cursorPosition: clampedPosition,
+            availableWidth: max(0, width - min(max(0, width), cursorSlotWidth))
+        )
 
         // Compute cursor visibility and color based on animation style
         let (cursorVisible, cursorColor) = computeCursorState(
@@ -133,29 +141,34 @@ struct TextFieldContentRenderer {
             cursorTimer: cursorTimer
         )
 
-        // Build output character by character
+        // Build output one complete grapheme at a time.
         var result = ""
         var outputWidth = 0
+        var textIndex = visibleStart
+        var cursorRendered = false
 
-        for visibleIndex in 0..<width {
-            let textIndex = visibleStart + visibleIndex
-
-            if textIndex == clampedPosition {
-                if cursorVisible {
-                    let cursorChar = cursorStyle.shape.character
-                    result += ANSIRenderer.colorize(String(cursorChar), foreground: cursorColor, background: background)
-                } else {
-                    // Cursor hidden (blink off): show underlying character or space
-                    if textIndex < text.count {
-                        let char = displayCharacter(textIndex, text)
-                        result += ANSIRenderer.colorize(String(char), foreground: palette.foreground, background: background)
-                    } else {
-                        result += ANSIRenderer.colorize(" ", foreground: palette.foreground, background: background)
-                    }
+        while outputWidth < width {
+            if !cursorRendered && textIndex == clampedPosition {
+                let renderedSlotWidth = min(cursorSlotWidth, width - outputWidth)
+                let underlyingCharacter = textIndex < characters.count ? characters[textIndex] : nil
+                result += renderCursorSlot(
+                    underlyingCharacter: underlyingCharacter,
+                    cursorCharacter: cursorCharacter,
+                    isVisible: cursorVisible,
+                    width: renderedSlotWidth,
+                    foreground: palette.foreground,
+                    cursorColor: cursorColor,
+                    background: background
+                )
+                outputWidth += renderedSlotWidth
+                cursorRendered = true
+                if textIndex < characters.count {
+                    textIndex += 1
                 }
-                outputWidth += 1
-            } else if textIndex < text.count && visibleIndex < width - (textIndex >= clampedPosition ? 0 : 1) {
-                let char = displayCharacter(textIndex, text)
+            } else if textIndex < characters.count {
+                let char = characters[textIndex]
+                let characterWidth = char.terminalWidth
+                guard outputWidth + characterWidth <= width else { break }
 
                 // Check if this character is in the selection
                 let isSelected = selectionRange.map { textIndex >= $0.lowerBound && textIndex < $0.upperBound } ?? false
@@ -169,20 +182,69 @@ struct TextFieldContentRenderer {
                 } else {
                     result += ANSIRenderer.colorize(String(char), foreground: palette.foreground, background: background)
                 }
-                outputWidth += 1
-            } else if outputWidth < width {
+                outputWidth += characterWidth
+                textIndex += 1
+            } else {
                 result += ANSIRenderer.colorize(" ", foreground: palette.foreground, background: background)
                 outputWidth += 1
             }
+        }
 
-            if outputWidth >= width {
-                break
-            }
+        if outputWidth < width {
+            let padding = String(repeating: " ", count: width - outputWidth)
+            result += ANSIRenderer.colorize(padding, foreground: palette.foreground, background: background)
         }
 
         return result
     }
 
+    private func renderCursorSlot(
+        underlyingCharacter: Character?,
+        cursorCharacter: Character,
+        isVisible: Bool,
+        width: Int,
+        foreground: Color,
+        cursorColor: Color,
+        background: Color
+    ) -> String {
+        let character = isVisible ? cursorCharacter : underlyingCharacter
+        let content = cellFittedText(character, width: width)
+        return ANSIRenderer.colorize(
+            content,
+            foreground: isVisible ? cursorColor : foreground,
+            background: background
+        )
+    }
+
+    private func cellFittedText(_ character: Character?, width: Int) -> String {
+        guard let character, character.terminalWidth <= width else {
+            return String(repeating: " ", count: width)
+        }
+        return String(character) + String(repeating: " ", count: width - character.terminalWidth)
+    }
+
+    private func displayCharacters(for text: String) -> [Character] {
+        text.map(displayCharacter)
+    }
+
+    private func visibleStart(
+        characters: [Character],
+        cursorPosition: Int,
+        availableWidth: Int
+    ) -> Int {
+        var start = cursorPosition
+        var usedWidth = 0
+
+        while start > 0 {
+            let characterWidth = characters[start - 1].terminalWidth
+            guard usedWidth + characterWidth <= availableWidth else { break }
+            usedWidth += characterWidth
+            start -= 1
+        }
+
+        return start
+    }
+
     // MARK: - Cursor State
 
     /// Computes the cursor visibility and color based on the animation style and cursor timer.
diff --git a/Sources/TUIkit/TUIkit.docc/Articles/Architecture.md b/Sources/TUIkit/TUIkit.docc/Articles/Architecture.md
index c471d8e6..478a1701 100644
--- a/Sources/TUIkit/TUIkit.docc/Articles/Architecture.md
+++ b/Sources/TUIkit/TUIkit.docc/Articles/Architecture.md
@@ -43,7 +43,7 @@ This enables spacers, flexible text fields, and proportional sizing. See <doc:La
 
 ### 4. Modifier Layer
 
-View modifiers implement the ``ViewModifier`` protocol. They operate in two phases: `adjustContext(_:)` modifies the ``RenderContext`` before children render (e.g. setting environment values), and `apply(to:context:)` transforms the rendered ``FrameBuffer`` (e.g. adding padding, borders, backgrounds).
+View modifiers implement the ``ViewModifier`` protocol. They operate in two phases: `adjustContext(_:)` modifies the ``RenderContext`` before children render (e.g. setting environment values), and `modify(buffer:context:)` transforms the rendered ``FrameBuffer`` (e.g. adding padding, borders, backgrounds).
 
 ```swift
 Text("Hello")
@@ -63,10 +63,10 @@ Text("Hello")
 
 The rendering pipeline converts the view tree into terminal output:
 
-1. **View tree traversal**: Each view produces a ``FrameBuffer``
-2. **Modifier application**: Modifiers transform buffers
-3. **ANSI rendering**: The `ANSIRenderer` converts colors and styles to escape codes
-4. **Terminal output**: The ``FrameBuffer`` lines are written to the terminal
+1. **View tree traversal**: Each view produces a ``FrameBuffer`` backed by terminal cells
+2. **Modifier application**: Modifiers transform or style cell surfaces
+3. **Layout and compositing**: Containers position, clip, and layer complete grapheme cells
+4. **Terminal output**: Final rows are encoded into normalized ANSI SGR strings and diffed at the terminal boundary
 
 ## Package Boundaries
 
diff --git a/Sources/TUIkit/TUIkit.docc/Articles/CustomViews.md b/Sources/TUIkit/TUIkit.docc/Articles/CustomViews.md
index 70741bc1..aa7f79b7 100644
--- a/Sources/TUIkit/TUIkit.docc/Articles/CustomViews.md
+++ b/Sources/TUIkit/TUIkit.docc/Articles/CustomViews.md
@@ -122,14 +122,16 @@ SettingsGroup("Network") {
 A ``ViewModifier`` transforms an already-rendered ``FrameBuffer``. Use this when your transformation operates on the output of any view:
 
 ```swift
-struct HighlightModifier: ViewModifier {
-    let color: Color
+struct IndentModifier: ViewModifier {
+    let columns: Int
 
     func modify(buffer: FrameBuffer, context: RenderContext) -> FrameBuffer {
-        // Transform each line in the buffer
-        var result = FrameBuffer()
-        for line in buffer.lines {
-            result.appendLine(ANSIRenderer.applyPersistentBackground(to: line, color: color))
+        var result = FrameBuffer(
+            emptyWithWidth: max(0, columns),
+            height: buffer.height
+        )
+        if !buffer.isEmpty {
+            result.appendHorizontally(buffer)
         }
         return result
     }
@@ -139,8 +141,8 @@ struct HighlightModifier: ViewModifier {
 Apply it using `.modifier(_:)`:
 
 ```swift
-Text("Important!")
-    .modifier(HighlightModifier(color: .red))
+Text("Indented")
+    .modifier(IndentModifier(columns: 2))
 ```
 
 ### Convenience Extensions
@@ -149,13 +151,13 @@ For a cleaner API, add a `View` extension:
 
 ```swift
 extension View {
-    func highlighted(_ color: Color = .red) -> some View {
-        modifier(HighlightModifier(color: color))
+    func indented(_ columns: Int = 2) -> some View {
+        modifier(IndentModifier(columns: columns))
     }
 }
 
 // Usage
-Text("Important!").highlighted(.yellow)
+Text("Indented").indented(4)
 ```
 
 ### When to Use ViewModifier
diff --git a/Sources/TUIkit/TUIkit.docc/Articles/RenderCycle.md b/Sources/TUIkit/TUIkit.docc/Articles/RenderCycle.md
index ca908f23..2205629b 100644
--- a/Sources/TUIkit/TUIkit.docc/Articles/RenderCycle.md
+++ b/Sources/TUIkit/TUIkit.docc/Articles/RenderCycle.md
@@ -105,10 +105,10 @@ This is where the dual rendering system kicks in. ``WindowGroup`` calls the free
 
 The ``FrameBuffer`` is converted into terminal-ready output lines by `FrameDiffWriter.buildOutputLines()`:
 
-1. Lines with content get their ANSI reset codes replaced with `reset + backgroundColor` (persistent background)
-2. Each line is padded to full terminal width
-3. Empty rows are filled with the background color
-4. The total output is exactly `terminalHeight` lines
+1. The cell surface is clipped to the terminal's cell width and height without splitting wide graphemes
+2. Clipped cells are encoded into normalized, terminal-safe SGR strings
+3. Each output row is cleared with the active background and padded to the terminal width
+4. Empty rows are filled so the output contains exactly `terminalHeight` lines
 
 ### Step 8: Begin Buffered Frame
 
@@ -208,14 +208,14 @@ func renderToBuffer<V: View>(_ view: V, context: RenderContext) -> FrameBuffer {
 
 ## FrameBuffer
 
-``FrameBuffer`` is the off-screen rendering primitive. It holds an array of strings (which may contain ANSI escape codes) representing terminal lines.
+``FrameBuffer`` is the off-screen rendering primitive. Internally it owns a terminal-cell surface whose cells store a grapheme, wide-cell continuation, normalized style, and transparency explicitly. Its public `lines` property remains a compatibility adapter for ANSI-styled input and terminal-safe encoded output.
 
 ### Creation
 
 Views create buffers in their `renderToBuffer(context:)`:
 
-- ``Text``: single line with ANSI style codes
-- ``Spacer``: empty lines
+- ``Text``: one or more styled cell rows
+- ``Spacer``: rows of blank cells
 - ``EmptyView``: empty buffer (no lines)
 
 ### Combination
@@ -224,18 +224,18 @@ Layout containers combine child buffers using `FrameBuffer` methods:
 
 | Method | Used by | What it does |
 |--------|---------|--------------|
-| `appendVertically(_:spacing:)` | `VStack` | Stacks buffers top to bottom |
-| `appendHorizontally(_:spacing:)` | `HStack` | Places buffers side by side, padding shorter sides |
-| `overlay(_:)` | `ZStack` | Line-by-line overlay, non-empty lines replace base |
-| `composited(with:at:)` | Overlay modifier | Character-level compositing at (x, y) position |
+| `appendVertically(_:spacing:)` | `VStack` | Stacks surfaces top to bottom in one pass |
+| `appendHorizontally(_:spacing:)` | `HStack` | Places surfaces side by side, padding shorter sides |
+| `overlay(_:)` | `ZStack` | Composites cells while preserving content below transparent cells |
+| `composited(with:at:)` | Overlay modifier | Composites at a cell position and replaces wide graphemes atomically |
 
 ### Diff-Based Output
 
 After the view tree produces a ``FrameBuffer``, the `FrameDiffWriter` prepares terminal-ready output:
 
-1. Lines with content get their ANSI reset codes replaced with `reset + backgroundColor` (persistent background)
-2. Each line is padded to full terminal width
-3. Empty lines are filled with the background color
+1. The cell surface is clipped to the terminal dimensions
+2. Its rows are encoded into normalized SGR strings
+3. Each row is cleared and padded with the active background color
 
 The diff writer then compares each output line with the previous frame. Only lines that actually changed are written to the terminal via `Terminal.moveCursor()` + `Terminal.write()`. All writes are collected in a frame buffer and normally flushed with one syscall.
 
@@ -289,7 +289,7 @@ public protocol ViewModifier {
 `ModifiedView` wraps a view and a modifier. It first calls `adjustContext(_:)` to let the modifier reduce available space (e.g. padding), then renders the content, then calls `modify(buffer:context:)`. Examples:
 
 - **`PaddingModifier`**: Adds empty lines (top/bottom) and spaces (leading/trailing) around the buffer
-- **`BackgroundModifier`**: Wraps each line with background ANSI codes, padded to full width
+- **`BackgroundModifier`**: Paints the background style directly onto cells and fills each row to the surface width
 
 ### View-Level Modifiers (Renderable)
 
@@ -348,9 +348,9 @@ buffer via `Terminal.beginFrame()` / `Terminal.endFrame()`. The entire frame is
 normally flushed to `STDOUT_FILENO` with one `write()` syscall. Interrupted and
 partial transfers are retried without truncating the frame.
 
-### Width Caching
+### Cell-Based Layout
 
-``FrameBuffer`` caches its `width` as a stored property, recomputed only when `lines` is mutated. This eliminates hundreds of redundant ANSI-stripping regex runs per frame. The `strippedLength` property also avoids intermediate string allocations.
+``FrameBuffer`` stores its measured width with the cell surface. Layout, clipping, and compositing therefore operate directly on cell arrays without repeatedly stripping or reparsing ANSI strings. The public compatibility lines are derived from that surface, and the terminal boundary consumes the same normalized encoding.
 
 ### What Is NOT Diffed
 
diff --git a/Sources/TUIkit/Views/SecureField.swift b/Sources/TUIkit/Views/SecureField.swift
index fb727787..51b72b4e 100644
--- a/Sources/TUIkit/Views/SecureField.swift
+++ b/Sources/TUIkit/Views/SecureField.swift
@@ -284,7 +284,7 @@ private struct _SecureFieldCore: View, Renderable, Layoutable {
         let renderer = TextFieldContentRenderer(
             prompt: prompt,
             isDisabled: isDisabled,
-            displayCharacter: { _, _ in TerminalSymbols.maskBullet }
+            displayCharacter: { _ in TerminalSymbols.maskBullet }
         )
 
         let fieldContent = renderer.buildContent(
diff --git a/Sources/TUIkit/Views/Text.swift b/Sources/TUIkit/Views/Text.swift
index efa11c3a..c1a9ab81 100644
--- a/Sources/TUIkit/Views/Text.swift
+++ b/Sources/TUIkit/Views/Text.swift
@@ -199,7 +199,7 @@ extension Text: Renderable, Layoutable {
         let maxWidth = proposal.width ?? context.availableWidth
         let wrappedLines = wordWrap(content, maxWidth: maxWidth)
 
-        let width = wrappedLines.map(\.count).max() ?? 0
+        let width = wrappedLines.map(\.strippedLength).max() ?? 0
         let height = wrappedLines.count
 
         // Text is never flexible - it has a fixed size
@@ -228,38 +228,87 @@ extension Text: Renderable, Layoutable {
         return FrameBuffer(lines: styledLines)
     }
 
-    /// Wraps text into lines that fit a maximum character width.
+    /// Wraps text into lines that fit a maximum terminal-cell width.
     ///
-    /// Splits on word boundaries (spaces). Words longer than `maxWidth`
-    /// are placed on their own line without further splitting.
+    /// Splits on word boundaries where possible and splits long words only
+    /// between complete grapheme clusters.
     ///
     /// - Parameters:
     ///   - text: The text to wrap.
-    ///   - maxWidth: Maximum characters per line.
+    ///   - maxWidth: Maximum terminal cells per line.
     /// - Returns: An array of wrapped lines (never empty).
     private func wordWrap(_ text: String, maxWidth: Int) -> [String] {
-        guard maxWidth > 0 else { return [text] }
+        let lines = text.sanitizedTerminalLines.flatMap { paragraph in
+            wrapParagraph(paragraph, maxWidth: maxWidth)
+        }
+        return lines.isEmpty ? [""] : lines
+    }
 
-        let words = text.split(separator: " ", omittingEmptySubsequences: false)
+    private func wrapParagraph(_ paragraph: String, maxWidth: Int) -> [String] {
+        guard maxWidth > 0 else { return [paragraph] }
+
+        let words = paragraph.split(separator: " ", omittingEmptySubsequences: false)
         var lines: [String] = []
         var currentLine = ""
 
-        for word in words {
+        for (wordIndex, word) in words.enumerated() {
             let wordStr = String(word)
-            if currentLine.isEmpty {
-                currentLine = wordStr
-            } else if currentLine.count + 1 + wordStr.count <= maxWidth {
-                currentLine += " " + wordStr
-            } else {
+            let separator = wordIndex == 0 ? "" : " "
+            let candidate = currentLine + separator + wordStr
+
+            if candidate.strippedLength <= maxWidth {
+                currentLine = candidate
+                continue
+            }
+
+            if !currentLine.isEmpty {
                 lines.append(currentLine)
-                currentLine = wordStr
+                currentLine = ""
+            }
+
+            let chunks = splitWord(wordStr, maxWidth: maxWidth)
+            if chunks.count > 1 {
+                lines.append(contentsOf: chunks.dropLast())
             }
+            currentLine = chunks.last ?? ""
         }
 
-        if !currentLine.isEmpty {
+        if !currentLine.isEmpty || lines.isEmpty {
             lines.append(currentLine)
         }
 
-        return lines.isEmpty ? [""] : lines
+        return lines
+    }
+
+    private func splitWord(_ word: String, maxWidth: Int) -> [String] {
+        guard !word.isEmpty else { return [""] }
+
+        var chunks: [String] = []
+        var chunk = ""
+        var chunkWidth = 0
+
+        for character in word {
+            let characterWidth = character.terminalWidth
+            if !chunk.isEmpty && chunkWidth + characterWidth > maxWidth {
+                chunks.append(chunk)
+                chunk = ""
+                chunkWidth = 0
+            }
+
+            chunk.append(character)
+            chunkWidth += characterWidth
+
+            if chunkWidth > maxWidth {
+                chunks.append(chunk)
+                chunk = ""
+                chunkWidth = 0
+            }
+        }
+
+        if !chunk.isEmpty {
+            chunks.append(chunk)
+        }
+
+        return chunks.isEmpty ? [""] : chunks
     }
 }
diff --git a/Sources/TUIkit/Views/TextField.swift b/Sources/TUIkit/Views/TextField.swift
index f49c6842..5f23ccb1 100644
--- a/Sources/TUIkit/Views/TextField.swift
+++ b/Sources/TUIkit/Views/TextField.swift
@@ -293,9 +293,7 @@ private struct _TextFieldCore<Label: View>: View, Renderable, Layoutable {
         let renderer = TextFieldContentRenderer(
             prompt: prompt,
             isDisabled: isDisabled,
-            displayCharacter: { index, text in
-                text[text.index(text.startIndex, offsetBy: index)]
-            }
+            displayCharacter: { $0 }
         )
 
         let fieldContent = renderer.buildContent(
diff --git a/Sources/TUIkit/Views/ZStack.swift b/Sources/TUIkit/Views/ZStack.swift
index 57a991d2..7e3f8a47 100644
--- a/Sources/TUIkit/Views/ZStack.swift
+++ b/Sources/TUIkit/Views/ZStack.swift
@@ -56,15 +56,55 @@ private struct _ZStackCore<Content: View>: View, Renderable {
     }
 
     func renderToBuffer(context: RenderContext) -> FrameBuffer {
-        let infos = resolveChildInfos(from: content, context: context)
-        var result = FrameBuffer()
-        for info in infos {
-            if let buffer = info.buffer {
-                result.overlay(buffer)
-            }
+        let buffers = resolveChildInfos(from: content, context: context).compactMap(\.buffer)
+        guard !buffers.isEmpty else { return FrameBuffer() }
+
+        let width = buffers.map(\.width).max() ?? 0
+        let height = buffers.map(\.height).max() ?? 0
+        var result = FrameBuffer(lines: Array(repeating: "", count: height), width: width)
+
+        for buffer in buffers where !buffer.isEmpty {
+            let horizontalOffset = offset(
+                available: width,
+                content: buffer.width,
+                alignment: alignment.horizontal
+            )
+            let verticalOffset = offset(
+                available: height,
+                content: buffer.height,
+                alignment: alignment.vertical
+            )
+            result = result.composited(
+                with: buffer,
+                at: (x: horizontalOffset, y: verticalOffset)
+            )
         }
         return result
     }
+
+    private func offset(
+        available: Int,
+        content: Int,
+        alignment: HorizontalAlignment
+    ) -> Int {
+        switch alignment {
+        case .leading: return 0
+        case .center: return max(0, (available - content) / 2)
+        case .trailing: return max(0, available - content)
+        }
+    }
+
+    private func offset(
+        available: Int,
+        content: Int,
+        alignment: VerticalAlignment
+    ) -> Int {
+        switch alignment {
+        case .top: return 0
+        case .center: return max(0, (available - content) / 2)
+        case .bottom: return max(0, available - content)
+        }
+    }
 }
 
 // MARK: - Equatable
diff --git a/Sources/TUIkitCore/Extensions/String+TerminalWidth.swift b/Sources/TUIkitCore/Extensions/String+TerminalWidth.swift
index 88c763c5..ad40249b 100644
--- a/Sources/TUIkitCore/Extensions/String+TerminalWidth.swift
+++ b/Sources/TUIkitCore/Extensions/String+TerminalWidth.swift
@@ -13,61 +13,45 @@ extension Character {
     /// emoji) occupy 2 cells. Zero-width characters (combining marks,
     /// variation selectors, ZWJ) occupy 0 cells.
     public var terminalWidth: Int {
-        let scalars = unicodeScalars
-        guard let first = scalars.first else { return 0 }
-        let scalarValue = first.value
+        let visibleScalars = unicodeScalars.filter { !$0.isZeroWidthInTerminal }
+        guard !visibleScalars.isEmpty else { return 0 }
 
-        // Zero-width characters
-        if scalarValue == 0x200B || scalarValue == 0x200C || scalarValue == 0x200D || scalarValue == 0xFEFF { return 0 } // ZW space/NJ/J/BOM
-        if scalarValue == 0x00AD { return 0 } // soft hyphen
-        if (0xFE00...0xFE0F).contains(scalarValue) { return 0 } // variation selectors
-        if (0xE0100...0xE01EF).contains(scalarValue) { return 0 } // variation selectors supplement
-        if (0x0300...0x036F).contains(scalarValue) { return 0 } // combining diacritical marks
-        if (0x1AB0...0x1AFF).contains(scalarValue) { return 0 } // combining diacritical marks extended
-        if (0x1DC0...0x1DFF).contains(scalarValue) { return 0 } // combining diacritical marks supplement
-        if (0x20D0...0x20FF).contains(scalarValue) { return 0 } // combining marks for symbols
-        if (0xFE20...0xFE2F).contains(scalarValue) { return 0 } // combining half marks
-        if (0xE0000...0xE007F).contains(scalarValue) { return 0 } // tags block
+        return visibleScalars.contains(where: \.isWideInTerminal) ? 2 : 1
+    }
+}
 
-        // Multi-scalar grapheme clusters (emoji sequences with ZWJ, skin tones,
-        // flag sequences, keycap sequences) are typically 2 cells wide.
-        if scalars.count > 1 {
-            // If the only extra scalars are variation selectors (U+FE0F/U+FE0E),
-            // fall through to the base character width check. Many terminals
-            // don't widen characters just because of a presentation selector
-            // (e.g. ⚙️ = U+2699 + U+FE0F is still 1 cell in most terminals).
-            let hasNonVariationExtras = scalars.dropFirst().contains { scalar in
-                let sv = scalar.value
-                return !(0xFE00...0xFE0F).contains(sv) && !(0xE0100...0xE01EF).contains(sv)
-            }
-            if hasNonVariationExtras {
-                // True multi-character sequence (ZWJ, flags, keycaps, skin tones)
-                return 2
-            }
-            // Just base + variation selector(s): fall through to base char width
+private extension Unicode.Scalar {
+    var isZeroWidthInTerminal: Bool {
+        switch properties.generalCategory {
+        case .control, .format, .nonspacingMark, .spacingMark, .enclosingMark:
+            return true
+        default:
+            return value == 0x00AD ||
+                (0xFE00...0xFE0F).contains(value) ||
+                (0xE0100...0xE01EF).contains(value) ||
+                (0xE0000...0xE007F).contains(value)
         }
+    }
 
-        // East Asian Wide and Fullwidth characters (2 cells)
-        if (0x1100...0x115F).contains(scalarValue) { return 2 } // Hangul Jamo
-        if (0x2329...0x232A).contains(scalarValue) { return 2 } // angle brackets
-        if (0x2E80...0x303E).contains(scalarValue) { return 2 } // CJK radicals, Kangxi, ideographic
-        if (0x3041...0x33BF).contains(scalarValue) { return 2 } // Hiragana, Katakana, Bopomofo, Hangul compat, Kanbun, CJK
-        if (0x33D0...0x33FF).contains(scalarValue) { return 2 } // CJK compatibility
-        if (0x3400...0x4DBF).contains(scalarValue) { return 2 } // CJK unified ext A
-        if (0x4E00...0x9FFF).contains(scalarValue) { return 2 } // CJK unified
-        if (0xA000...0xA4CF).contains(scalarValue) { return 2 } // Yi
-        if (0xA960...0xA97F).contains(scalarValue) { return 2 } // Hangul Jamo extended A
-        if (0xAC00...0xD7AF).contains(scalarValue) { return 2 } // Hangul syllables
-        if (0xF900...0xFAFF).contains(scalarValue) { return 2 } // CJK compatibility ideographs
-        if (0xFE10...0xFE19).contains(scalarValue) { return 2 } // vertical forms
-        if (0xFE30...0xFE6F).contains(scalarValue) { return 2 } // CJK compatibility forms, small forms
-        if (0xFF01...0xFF60).contains(scalarValue) { return 2 } // fullwidth forms
-        if (0xFFE0...0xFFE6).contains(scalarValue) { return 2 } // fullwidth signs
-        if (0x1F000...0x1FBFF).contains(scalarValue) { return 2 } // emoji and symbols (Mahjong, Dominos, Playing Cards, Emoji, etc.)
-        if (0x20000...0x2FA1F).contains(scalarValue) { return 2 } // CJK unified extensions B-F, compatibility supplement
-        if (0x30000...0x3134F).contains(scalarValue) { return 2 } // CJK unified extension G
-
-        return 1
+    var isWideInTerminal: Bool {
+        (0x1100...0x115F).contains(value) ||
+            (0x2329...0x232A).contains(value) ||
+            (0x2E80...0x303E).contains(value) ||
+            (0x3041...0x33BF).contains(value) ||
+            (0x33D0...0x33FF).contains(value) ||
+            (0x3400...0x4DBF).contains(value) ||
+            (0x4E00...0x9FFF).contains(value) ||
+            (0xA000...0xA4CF).contains(value) ||
+            (0xA960...0xA97F).contains(value) ||
+            (0xAC00...0xD7AF).contains(value) ||
+            (0xF900...0xFAFF).contains(value) ||
+            (0xFE10...0xFE19).contains(value) ||
+            (0xFE30...0xFE6F).contains(value) ||
+            (0xFF01...0xFF60).contains(value) ||
+            (0xFFE0...0xFFE6).contains(value) ||
+            (0x1F000...0x1FBFF).contains(value) ||
+            (0x20000...0x2FA1F).contains(value) ||
+            (0x30000...0x3134F).contains(value)
     }
 }
 
@@ -79,58 +63,24 @@ extension String {
     /// Accounts for wide characters (emoji, CJK) that occupy 2 terminal cells
     /// and zero-width characters (combining marks, variation selectors).
     public var strippedLength: Int {
-        var count = 0
-        var index = startIndex
-
-        while index < endIndex {
-            if self[index] == "\u{1B}" {
-                // Skip ANSI sequence: ESC [ params letter
-                index = self.index(after: index)
-                if index < endIndex && self[index] == "[" {
-                    index = self.index(after: index)
-                    // Skip parameter bytes (digits, semicolons)
-                    while index < endIndex && (self[index].isNumber || self[index] == ";") {
-                        index = self.index(after: index)
-                    }
-                    // Skip the final byte (letter)
-                    if index < endIndex && self[index].isLetter {
-                        index = self.index(after: index)
-                    }
-                }
-            } else {
-                count += self[index].terminalWidth
-                index = self.index(after: index)
+        var width = 0
+        TerminalTextParser.scan(self) { token in
+            if case .grapheme(let character) = token {
+                width += character.terminalWidth
             }
         }
-
-        return count
+        return width
     }
 
     /// The string with all ANSI escape codes removed.
     public var stripped: String {
         var result = ""
         result.reserveCapacity(count)
-        var index = startIndex
-
-        while index < endIndex {
-            if self[index] == "\u{1B}" {
-                // Skip ANSI sequence: ESC [ params letter
-                index = self.index(after: index)
-                if index < endIndex && self[index] == "[" {
-                    index = self.index(after: index)
-                    while index < endIndex && (self[index].isNumber || self[index] == ";") {
-                        index = self.index(after: index)
-                    }
-                    if index < endIndex && self[index].isLetter {
-                        index = self.index(after: index)
-                    }
-                }
-            } else {
-                result.append(self[index])
-                index = self.index(after: index)
+        TerminalTextParser.scan(self) { token in
+            if case .grapheme(let character) = token {
+                result.append(character)
             }
         }
-
         return result
     }
 
@@ -146,6 +96,22 @@ extension String {
         stripped
     }
 
+    /// Sanitized logical lines for multiline terminal text layout.
+    package var sanitizedTerminalLines: [String] {
+        var lines = [""]
+        TerminalTextParser.scan(self, preservingLineBreaks: true) { token in
+            switch token {
+            case .grapheme(let character):
+                lines[lines.count - 1].append(character)
+            case .lineBreak:
+                lines.append("")
+            case .sgr:
+                break
+            }
+        }
+        return lines
+    }
+
     /// Pads the string to the specified visible width using spaces.
     ///
     /// ANSI codes and wide characters are handled correctly.
@@ -175,35 +141,24 @@ extension String {
 
         var result = ""
         var visible = 0
-        var index = startIndex
-
-        while index < endIndex && visible < visibleCount {
-            // Check if we're at the start of an ANSI escape sequence
-            if self[index] == "\u{1B}" {
-                // Consume the entire ANSI sequence (ESC [ ... letter)
-                let seqStart = index
-                index = self.index(after: index)
-                if index < endIndex && self[index] == "[" {
-                    index = self.index(after: index)
-                    // Skip parameter bytes (digits, semicolons)
-                    while index < endIndex && (self[index].isNumber || self[index] == ";") {
-                        index = self.index(after: index)
-                    }
-                    // Skip the final byte (letter)
-                    if index < endIndex && self[index].isLetter {
-                        index = self.index(after: index)
-                    }
+        var reachedBoundary = false
+        TerminalTextParser.scan(self) { token in
+            guard !reachedBoundary, visible < visibleCount else { return }
+            switch token {
+            case .sgr(_, let sequence):
+                result += sequence
+            case .grapheme(let character):
+                let charWidth = character.terminalWidth
+                guard visible + charWidth <= visibleCount else {
+                    reachedBoundary = true
+                    return
                 }
-                result += String(self[seqStart..<index])
-            } else {
-                let charWidth = self[index].terminalWidth
-                if visible + charWidth > visibleCount { break }
-                result.append(self[index])
+                result.append(character)
                 visible += charWidth
-                index = self.index(after: index)
+            case .lineBreak:
+                break
             }
         }
-
         return result
     }
 
@@ -216,29 +171,23 @@ extension String {
     /// - Returns: The remainder of the string with ANSI codes intact.
     public func ansiAwareSuffix(droppingVisible dropCount: Int) -> String {
         var visible = 0
-        var index = startIndex
-
-        while index < endIndex && visible < dropCount {
-            if self[index] == "\u{1B}" {
-                // Skip the entire ANSI sequence
-                index = self.index(after: index)
-                if index < endIndex && self[index] == "[" {
-                    index = self.index(after: index)
-                    while index < endIndex && (self[index].isNumber || self[index] == ";") {
-                        index = self.index(after: index)
-                    }
-                    if index < endIndex && self[index].isLetter {
-                        index = self.index(after: index)
-                    }
+        var result = ""
+        TerminalTextParser.scan(self) { token in
+            switch token {
+            case .sgr(_, let sequence):
+                if visible >= dropCount {
+                    result += sequence
+                }
+            case .grapheme(let character):
+                if visible >= dropCount {
+                    result.append(character)
                 }
-            } else {
-                visible += self[index].terminalWidth
-                index = self.index(after: index)
+                visible += character.terminalWidth
+            case .lineBreak:
+                break
             }
         }
-
-        guard index < endIndex else { return "" }
-        return String(self[index...])
+        return result
     }
 
     // MARK: - ANSI State Extraction
@@ -258,26 +207,18 @@ extension String {
     ///   if the line starts with a visible character.
     public func leadingANSISequences() -> String {
         var result = ""
-        var index = startIndex
-
-        while index < endIndex {
-            guard self[index] == "\u{1B}" else { break }
-
-            // Consume the ANSI sequence (ESC [ params letter)
-            let seqStart = index
-            index = self.index(after: index)
-            if index < endIndex && self[index] == "[" {
-                index = self.index(after: index)
-                while index < endIndex && (self[index].isNumber || self[index] == ";") {
-                    index = self.index(after: index)
-                }
-                if index < endIndex && self[index].isLetter {
-                    index = self.index(after: index)
-                }
+        var foundGrapheme = false
+        TerminalTextParser.scan(self) { token in
+            guard !foundGrapheme else { return }
+            switch token {
+            case .sgr(_, let sequence):
+                result += sequence
+            case .grapheme:
+                foundGrapheme = true
+            case .lineBreak:
+                break
             }
-            result += String(self[seqStart..<index])
         }
-
         return result
     }
 }
diff --git a/Sources/TUIkitCore/Rendering/FrameBuffer.swift b/Sources/TUIkitCore/Rendering/FrameBuffer.swift
index e7453e0c..2c34f555 100644
--- a/Sources/TUIkitCore/Rendering/FrameBuffer.swift
+++ b/Sources/TUIkitCore/Rendering/FrameBuffer.swift
@@ -4,114 +4,145 @@
 //  Created by LAYERED.work
 //  License: MIT
 
-/// A 2D text buffer that views render into before flushing to the terminal.
+/// A 2D terminal-cell buffer that views render into before flushing.
 ///
 /// `FrameBuffer` enables a two-pass rendering approach:
-/// 1. Each view renders into its own buffer (measuring its size)
-/// 2. Layout containers combine child buffers (horizontally, vertically, or layered)
-/// 3. The final root buffer is flushed to the terminal
+/// 1. Each view renders into its own buffer and measures its cell extent.
+/// 2. Layout containers combine child buffers horizontally, vertically, or in layers.
+/// 3. ANSI is encoded only when the final lines cross a terminal boundary.
 ///
-/// Each line in the buffer is a string that may contain ANSI escape codes.
+/// The public ``lines`` property remains a compatibility adapter for pre-styled
+/// strings. Internally the buffer owns grapheme clusters, wide-cell continuations,
+/// normalized style state, and transparency explicitly.
 ///
 /// - Important: This is framework infrastructure used as the rendering primitive in
 ///   ``ViewModifier/modify(buffer:context:)``. Most developers don't need to interact
 ///   with this type directly.
 public struct FrameBuffer: Sendable, Equatable {
-    /// The lines of rendered content (may contain ANSI escape codes).
+    private var surface: TerminalSurface
+    private var isSynchronizingLines: Bool
+
+    package var terminalSurface: TerminalSurface {
+        get { surface }
+        set {
+            surface = newValue
+            replaceLinesWithoutParsing(newValue.ansiEncodedLines)
+        }
+    }
+
+    /// The terminal-safe, ANSI-encoded lines of rendered content.
     ///
-    /// Mutating `lines` directly recomputes the cached ``width``.
+    /// Reading this property returns the cached terminal-safe encoding. Assigning
+    /// or mutating it reparses supported SGR style and neutralizes all other
+    /// terminal control sequences.
     public var lines: [String] {
-        didSet { recomputeWidth() }
+        didSet {
+            guard !isSynchronizingLines else { return }
+            surface = TerminalSurface(lines: lines)
+            replaceLinesWithoutParsing(surface.ansiEncodedLines)
+        }
     }
 
-    /// The width of the buffer (the length of the longest line in visible characters).
-    ///
-    /// This is a stored property, recomputed automatically whenever
-    /// ``lines`` is mutated. Accessing `width` is O(1) — the expensive
-    /// ANSI-stripping regex runs only once per mutation, not per access.
-    public private(set) var width: Int
+    /// The width of the buffer in terminal cells.
+    public var width: Int {
+        surface.width
+    }
 
-    /// The height of the buffer (number of lines).
+    /// The height of the buffer in terminal rows.
     public var height: Int {
-        lines.count
+        surface.height
     }
 
-    /// Whether the buffer is empty.
+    /// Whether the buffer contains no explicit grapheme content.
     public var isEmpty: Bool {
-        lines.isEmpty || lines.allSatisfy { $0.isEmpty }
+        surface.isEmpty
     }
 
     /// Creates an empty buffer.
     public init() {
-        self.lines = []
-        self.width = 0
+        surface = TerminalSurface()
+        isSynchronizingLines = false
+        lines = []
     }
 
-    /// Creates a buffer from an array of lines.
+    /// Creates a buffer from ANSI-styled or plain text lines.
+    ///
+    /// Only SGR styling is retained. Embedded cursor, device, hyperlink, and
+    /// other control sequences are neutralized while parsing.
     ///
-    /// - Parameter lines: The text lines.
+    /// - Parameter lines: The text lines to parse into terminal cells.
     public init(lines: [String]) {
-        self.lines = lines
-        self.width = Self.computeWidth(lines)
+        let surface = TerminalSurface(lines: lines)
+        self.surface = surface
+        self.isSynchronizingLines = false
+        self.lines = surface.ansiEncodedLines
     }
 
-    /// Initializer that accepts pre-computed width.
+    /// Creates a buffer with an already known cell extent.
     ///
-    /// Use this when the width is already known to avoid redundant computation.
+    /// - Parameters:
+    ///   - lines: The text lines to parse into terminal cells.
+    ///   - width: The known minimum width of the buffer in terminal cells.
     public init(lines: [String], width: Int) {
-        self.lines = lines
-        self.width = width
+        let surface = TerminalSurface(lines: lines, width: width)
+        self.surface = surface
+        self.isSynchronizingLines = false
+        self.lines = surface.ansiEncodedLines
     }
 
     /// Creates a buffer containing a single line.
     ///
-    /// - Parameter text: The text content.
+    /// - Parameter text: The text content to parse into terminal cells.
     public init(text: String) {
-        self.lines = [text]
-        self.width = text.strippedLength
+        let surface = TerminalSurface(lines: [text])
+        self.surface = surface
+        self.isSynchronizingLines = false
+        self.lines = surface.ansiEncodedLines
     }
 
     /// Creates a spacer buffer with the specified height.
     ///
-    /// The buffer contains lines with a single space character to ensure
-    /// it is not considered "empty" by layout algorithms. This is important
-    /// for Spacer views which need to occupy vertical space even without
-    /// visible content.
+    /// A visible space on every row keeps the spacer distinct from an empty view.
     ///
-    /// - Parameter height: The number of lines.
+    /// - Parameter height: The number of rows.
     public init(emptyWithHeight height: Int) {
-        // Use a single space instead of empty string so the buffer
-        // is not considered "empty" by appendVertically
-        self.lines = Array(repeating: " ", count: height)
-        self.width = 1
+        let surface = TerminalSurface(lines: Array(repeating: " ", count: max(0, height)))
+        self.surface = surface
+        self.isSynchronizingLines = false
+        self.lines = surface.ansiEncodedLines
     }
 
-    /// Creates a buffer of empty spaces with the specified width and height.
-    ///
-    /// Used by horizontal stacks for Spacer views which need to occupy
-    /// horizontal space across multiple rows.
+    /// Creates a buffer of spaces with the specified dimensions.
     ///
     /// - Parameters:
-    ///   - width: The width in characters.
-    ///   - height: The number of lines.
+    ///   - width: The width in terminal cells.
+    ///   - height: The number of rows.
     public init(emptyWithWidth width: Int, height: Int) {
-        self.lines = Array(repeating: String(repeating: " ", count: width), count: height)
-        self.width = width
+        let clampedWidth = max(0, width)
+        let line = String(repeating: " ", count: clampedWidth)
+        let surface = TerminalSurface(
+            lines: Array(repeating: line, count: max(0, height)),
+            width: clampedWidth
+        )
+        self.surface = surface
+        self.isSynchronizingLines = false
+        self.lines = surface.ansiEncodedLines
     }
 
-    // MARK: - Combining Arrays
-
-    /// Creates a vertically stacked buffer from an array of buffers.
-    ///
-    /// TupleViews use this to combine their children vertically by default
-    /// (the parent stack then decides the actual layout direction).
+    /// Creates a buffer by stacking all supplied buffers in one linear pass.
     ///
     /// - Parameter buffers: The buffers to stack vertically.
     public init(verticallyStacking buffers: [Self]) {
-        self.init()
-        for buffer in buffers {
-            appendVertically(buffer)
-        }
+        let surface = TerminalSurface(verticallyStacking: buffers.map(\.surface))
+        self.surface = surface
+        self.isSynchronizingLines = false
+        self.lines = surface.ansiEncodedLines
+    }
+
+    package init(terminalSurface: TerminalSurface) {
+        self.surface = terminalSurface
+        self.isSynchronizingLines = false
+        self.lines = terminalSurface.ansiEncodedLines
     }
 }
 
@@ -122,193 +153,75 @@ public extension FrameBuffer {
     ///
     /// - Parameters:
     ///   - other: The buffer to append below.
-    ///   - spacing: Number of empty lines between the two buffers.
+    ///   - spacing: Number of empty rows between the buffers.
     mutating func appendVertically(_ other: Self, spacing: Int = 0) {
-        guard !other.isEmpty else { return }
-
-        // Pre-compute the new width (avoids redundant computation in didSet)
-        let newWidth = max(width, other.width)
-
-        // Build combined array
-        var combined = lines
-        if !combined.isEmpty && spacing > 0 {
-            combined.append(contentsOf: repeatElement("", count: spacing))
+        let spacing = max(0, spacing)
+        let hadRows = !lines.isEmpty
+        surface.appendVertically(other.surface, spacing: spacing)
+        if !other.isEmpty {
+            isSynchronizingLines = true
+            if hadRows && spacing > 0 {
+                lines.append(contentsOf: repeatElement("", count: spacing))
+            }
+            lines.append(contentsOf: other.lines)
+            isSynchronizingLines = false
         }
-        combined.append(contentsOf: other.lines)
-
-        // Replace self with new buffer using pre-computed width
-        self = FrameBuffer(lines: combined, width: newWidth)
     }
 
     /// Places another buffer to the right of this one with optional spacing.
     ///
     /// - Parameters:
     ///   - other: The buffer to append to the right.
-    ///   - spacing: Number of space characters between the two buffers.
+    ///   - spacing: Number of cells between the buffers.
     mutating func appendHorizontally(_ other: Self, spacing: Int = 0) {
-        let maxHeight = max(height, other.height)
-        let myWidth = width
-        let spacer = String(repeating: " ", count: spacing)
-
-        // Pre-compute the new width
-        let newWidth = myWidth + spacing + other.width
-
-        var result: [String] = []
-        result.reserveCapacity(maxHeight)
-
-        for row in 0..<maxHeight {
-            let left = row < lines.count ? lines[row] : ""
-            let right = row < other.lines.count ? other.lines[row] : ""
-
-            // Pad the left side to consistent visible width
-            let leftPadded = left.padToVisibleWidth(myWidth)
-            result.append(leftPadded + spacer + right)
-        }
-
-        // Replace self with new buffer using pre-computed width
-        self = FrameBuffer(lines: result, width: newWidth)
+        surface.appendHorizontally(other.surface, spacing: max(0, spacing))
+        replaceLinesWithoutParsing(surface.ansiEncodedLines)
     }
 
-    /// Layers another buffer on top of this one (ZStack behavior).
+    /// Layers another buffer over this buffer at the top-leading origin.
     ///
-    /// Non-empty characters in the overlay replace characters in the base.
-    /// For simplicity, this just overlays line by line.
+    /// Transparent cells preserve the content below them. Styled spaces are
+    /// explicit paint and therefore remain opaque.
     ///
-    /// - Parameter overlay: The buffer to overlay on top.
+    /// - Parameter overlay: The buffer to layer above this one.
     mutating func overlay(_ overlay: Self) {
-        let maxHeight = max(height, overlay.height)
-        var result: [String] = []
-        for row in 0..<maxHeight {
-            if row < overlay.lines.count && !overlay.lines[row].isEmpty {
-                result.append(overlay.lines[row])
-            } else if row < lines.count {
-                result.append(lines[row])
-            } else {
-                result.append("")
-            }
-        }
-        lines = result
+        terminalSurface = surface.composited(with: overlay.surface, atX: 0, y: 0)
     }
 
-    /// Creates a new buffer with another buffer composited on top at the specified position.
+    /// Creates a new buffer with another buffer composited at a cell position.
     ///
-    /// This performs character-level compositing: overlay characters replace base characters
-    /// only where the overlay has visible content (non-space characters).
+    /// Wide graphemes are replaced and clipped atomically, so an operation can
+    /// never leave an orphan continuation cell.
     ///
     /// - Parameters:
     ///   - overlay: The buffer to composite on top.
-    ///   - position: The (x, y) offset where the overlay should be placed.
-    /// - Returns: A new buffer with the overlay composited.
+    ///   - position: The zero-based cell and row offset for the overlay.
+    /// - Returns: A new composited buffer.
     func composited(with overlay: Self, at position: (x: Int, y: Int)) -> Self {
-        guard !overlay.isEmpty else { return self }
-
-        let resultWidth = max(width, position.x + overlay.width)
-        let resultHeight = max(height, position.y + overlay.height)
-
-        var result: [String] = []
-
-        for row in 0..<resultHeight {
-            // Keep the original (unpadded) line for ANSI state extraction.
-            // padToVisibleWidth appends unstyled spaces that lose the base's
-            // ANSI state, so insertOverlay needs the original to restore it.
-            let originalLine: String? = row < lines.count ? lines[row] : nil
-            var baseLine: String
-            if let original = originalLine {
-                baseLine = original.padToVisibleWidth(resultWidth)
-            } else {
-                baseLine = String(repeating: " ", count: resultWidth)
-            }
-
-            // Check if this row has overlay content
-            let overlayRow = row - position.y
-            if overlayRow >= 0 && overlayRow < overlay.lines.count {
-                let overlayLine = overlay.lines[overlayRow]
-                if !overlayLine.isEmpty {
-                    // Insert overlay content at the x position
-                    baseLine = insertOverlay(
-                        base: baseLine,
-                        overlay: overlayLine,
-                        atColumn: position.x,
-                        originalBase: originalLine
-                    )
-                }
-            }
-
-            result.append(baseLine)
-        }
-
-        return Self(lines: result)
+        Self(
+            terminalSurface: surface.composited(
+                with: overlay.surface,
+                atX: position.x,
+                y: position.y
+            )
+        )
     }
 }
 
-// MARK: - Private Helpers
+// MARK: - Package Rendering API
 
-private extension FrameBuffer {
-
-    /// ANSI SGR reset sequence. Inlined to avoid depending on ANSIRenderer.
-    static let ansiReset = "\u{1B}[0m"
-    /// Recomputes the cached ``width`` from the current ``lines``.
-    ///
-    /// Called automatically by the `didSet` observer on ``lines``.
-    mutating func recomputeWidth() {
-        width = Self.computeWidth(lines)
+extension FrameBuffer {
+    package func clipped(toWidth width: Int, height: Int) -> Self {
+        Self(terminalSurface: surface.clipped(toWidth: width, height: height))
     }
+}
 
-    /// Computes the visible width of a set of lines.
-    ///
-    /// - Parameter lines: The lines to measure.
-    /// - Returns: The length of the longest line in visible characters.
-    static func computeWidth(_ lines: [String]) -> Int {
-        lines.map { $0.strippedLength }.max() ?? 0
-    }
-
-    /// Inserts overlay text into base text at the specified column position.
-    ///
-    /// Splits the base line at visible-character boundaries (ignoring ANSI codes)
-    /// and preserves the base's ANSI styling in the prefix and suffix regions.
-    /// The overlay replaces the base in its column range, with its own styling intact.
-    ///
-    /// After the overlay, the base's active ANSI state is restored before the
-    /// suffix so the dimmed background (or any other base styling) continues
-    /// seamlessly to the right of the overlay.
-    ///
-    /// - Parameters:
-    ///   - base: The base text line (may contain ANSI codes).
-    ///   - overlay: The overlay text to insert (may contain ANSI codes).
-    ///   - column: The column position (0-based, in visible characters).
-    ///   - originalBase: The original base line before padding, used to extract
-    ///     the active ANSI state. If `nil`, the state is extracted from `base`.
-    /// - Returns: The composited line with base styling preserved around the overlay.
-    func insertOverlay(
-        base: String,
-        overlay: String,
-        atColumn column: Int,
-        originalBase: String? = nil
-    ) -> String {
-        let overlayVisibleWidth = overlay.strippedLength
-        let afterOverlayColumn = column + overlayVisibleWidth
-
-        // Split the base into prefix (before overlay) and suffix (after overlay),
-        // preserving all ANSI codes in both segments.
-        let prefix = base.ansiAwarePrefix(visibleCount: column)
-        let suffix = base.ansiAwareSuffix(droppingVisible: afterOverlayColumn)
-
-        // Extract the leading ANSI state from the original (unpadded) base line.
-        // The leading sequences contain the full styling setup (BG + FG + dim)
-        // before any visible text. This is more reliable than scanning the whole
-        // string, because applyPersistentBackground appends a lone BG code after
-        // the final reset that doesn't represent the full styling state.
-        let styleSource = originalBase ?? base
-        let baseStyle = styleSource.leadingANSISequences()
-
-        // Build: [prefix] + [reset] + [overlay] + [reset + base style restore] + [suffix]
-        var result = prefix
-        result += Self.ansiReset
-        result += overlay
-        result += Self.ansiReset
-        result += baseStyle
-        result += suffix
+// MARK: - Storage Synchronization
 
-        return result
+private extension FrameBuffer {
+    mutating func replaceLinesWithoutParsing(_ newLines: [String]) {
+        isSynchronizingLines = true
+        lines = newLines
+        isSynchronizingLines = false
     }
 }
diff --git a/Sources/TUIkitCore/Rendering/TerminalStyle.swift b/Sources/TUIkitCore/Rendering/TerminalStyle.swift
new file mode 100644
index 00000000..928a17a3
--- /dev/null
+++ b/Sources/TUIkitCore/Rendering/TerminalStyle.swift
@@ -0,0 +1,174 @@
+//  🖥️ TUIKit — Terminal UI Kit for Swift
+//  TerminalStyle.swift
+//
+//  Created by LAYERED.work
+//  License: MIT
+
+/// A normalized terminal color from an SGR foreground or background sequence.
+package enum TerminalColor: Sendable, Equatable {
+    case ansi(Int)
+    case indexed(Int)
+    case rgb(red: Int, green: Int, blue: Int)
+}
+
+/// The complete visual state applied to one terminal cell.
+package struct TerminalStyle: Sendable, Equatable {
+    package var isBold = false
+    package var isDim = false
+    package var isItalic = false
+    package var isUnderlined = false
+    package var isBlinking = false
+    package var isInverted = false
+    package var isHidden = false
+    package var isStrikethrough = false
+    package var foreground: TerminalColor?
+    package var background: TerminalColor?
+
+    package init() {}
+}
+
+// MARK: - SGR State
+
+extension TerminalStyle {
+    package var isDefault: Bool {
+        self == Self()
+    }
+
+    var paintsBlankCell: Bool {
+        background != nil || isInverted || isUnderlined || isStrikethrough
+    }
+
+    package var ansiSequence: String {
+        let parameters = ansiParameters
+        guard !parameters.isEmpty else { return "" }
+        return "\u{1B}[\(parameters.map(String.init).joined(separator: ";"))m"
+    }
+
+    mutating func apply(sgr parameters: [Int]) {
+        var index = 0
+
+        while index < parameters.count {
+            let parameter = parameters[index]
+            if parameter == 0 {
+                self = Self()
+            } else if applyEnablingAttribute(parameter) || applyDisablingAttribute(parameter) {
+                // Attribute state was updated by the helper.
+            } else {
+                applyColor(parameter, parameters: parameters, index: &index)
+            }
+            index += 1
+        }
+    }
+}
+
+// MARK: - SGR Attributes
+
+private extension TerminalStyle {
+    mutating func applyEnablingAttribute(_ parameter: Int) -> Bool {
+        switch parameter {
+        case 1: isBold = true
+        case 2: isDim = true
+        case 3: isItalic = true
+        case 4, 21: isUnderlined = true
+        case 5, 6: isBlinking = true
+        case 7: isInverted = true
+        case 8: isHidden = true
+        case 9: isStrikethrough = true
+        default: return false
+        }
+        return true
+    }
+
+    mutating func applyDisablingAttribute(_ parameter: Int) -> Bool {
+        switch parameter {
+        case 22:
+            isBold = false
+            isDim = false
+        case 23: isItalic = false
+        case 24: isUnderlined = false
+        case 25: isBlinking = false
+        case 27: isInverted = false
+        case 28: isHidden = false
+        case 29: isStrikethrough = false
+        default: return false
+        }
+        return true
+    }
+
+    mutating func applyColor(_ parameter: Int, parameters: [Int], index: inout Int) {
+        switch parameter {
+        case 30...37, 90...97:
+            foreground = .ansi(parameter)
+        case 38:
+            foreground = Self.extendedColor(in: parameters, at: &index) ?? foreground
+        case 39:
+            foreground = nil
+        case 40...47, 100...107:
+            background = .ansi(parameter)
+        case 48:
+            background = Self.extendedColor(in: parameters, at: &index) ?? background
+        case 49:
+            background = nil
+        default:
+            break
+        }
+    }
+}
+
+// MARK: - Encoding
+
+private extension TerminalStyle {
+    var ansiParameters: [Int] {
+        var parameters: [Int] = []
+
+        if isBold { parameters.append(1) }
+        if isDim { parameters.append(2) }
+        if isItalic { parameters.append(3) }
+        if isUnderlined { parameters.append(4) }
+        if isBlinking { parameters.append(5) }
+        if isInverted { parameters.append(7) }
+        if isHidden { parameters.append(8) }
+        if isStrikethrough { parameters.append(9) }
+        if let foreground {
+            parameters.append(contentsOf: Self.parameters(for: foreground, foreground: true))
+        }
+        if let background {
+            parameters.append(contentsOf: Self.parameters(for: background, foreground: false))
+        }
+
+        return parameters
+    }
+
+    static func extendedColor(in parameters: [Int], at index: inout Int) -> TerminalColor? {
+        guard index + 1 < parameters.count else { return nil }
+
+        switch parameters[index + 1] {
+        case 5 where index + 2 < parameters.count:
+            index += 2
+            return .indexed(clampColor(parameters[index]))
+        case 2 where index + 4 < parameters.count:
+            let red = clampColor(parameters[index + 2])
+            let green = clampColor(parameters[index + 3])
+            let blue = clampColor(parameters[index + 4])
+            index += 4
+            return .rgb(red: red, green: green, blue: blue)
+        default:
+            return nil
+        }
+    }
+
+    static func parameters(for color: TerminalColor, foreground: Bool) -> [Int] {
+        switch color {
+        case .ansi(let code):
+            return [code]
+        case .indexed(let index):
+            return [foreground ? 38 : 48, 5, index]
+        case .rgb(let red, let green, let blue):
+            return [foreground ? 38 : 48, 2, red, green, blue]
+        }
+    }
+
+    static func clampColor(_ component: Int) -> Int {
+        min(255, max(0, component))
+    }
+}
diff --git a/Sources/TUIkitCore/Rendering/TerminalSurface.swift b/Sources/TUIkitCore/Rendering/TerminalSurface.swift
new file mode 100644
index 00000000..9a7d537d
--- /dev/null
+++ b/Sources/TUIkitCore/Rendering/TerminalSurface.swift
@@ -0,0 +1,380 @@
+//  🖥️ TUIKit — Terminal UI Kit for Swift
+//  TerminalSurface.swift
+//
+//  Created by LAYERED.work
+//  License: MIT
+
+/// One addressable cell in a terminal surface.
+package struct TerminalCell: Sendable, Equatable {
+    enum Content: Sendable, Equatable {
+        case empty
+        case grapheme(String, width: Int)
+        case continuation
+    }
+
+    let content: Content
+    package let style: TerminalStyle
+    let isTransparent: Bool
+
+    package var grapheme: String? {
+        guard case .grapheme(let grapheme, _) = content else { return nil }
+        return grapheme
+    }
+
+    package var isContinuation: Bool {
+        content == .continuation
+    }
+}
+
+/// A rectangular terminal render result expressed in display cells.
+package struct TerminalSurface: Sendable, Equatable {
+    private(set) var rows: [[TerminalCell]]
+    package private(set) var width: Int
+
+    package var height: Int {
+        rows.count
+    }
+
+    package var isEmpty: Bool {
+        rows.isEmpty || rows.allSatisfy { row in
+            row.allSatisfy { cell in
+                if case .empty = cell.content { return true }
+                return false
+            }
+        }
+    }
+
+    package init() {
+        rows = []
+        width = 0
+    }
+
+    package init(lines: [String], width proposedWidth: Int? = nil) {
+        var parsedRows: [[TerminalCell]] = []
+        parsedRows.reserveCapacity(lines.count)
+        var measuredWidth = 0
+
+        for line in lines {
+            let row = Self.parse(line)
+            parsedRows.append(row)
+            measuredWidth = max(measuredWidth, row.count)
+        }
+
+        rows = parsedRows
+        width = max(measuredWidth, proposedWidth ?? 0)
+    }
+
+    init(rows: [[TerminalCell]], width: Int) {
+        self.rows = rows
+        self.width = max(width, rows.map(\.count).max() ?? 0)
+    }
+}
+
+// MARK: - Inspection and Encoding
+
+extension TerminalSurface {
+    package var plainLines: [String] {
+        rows.map(Self.plainText)
+    }
+
+    package var ansiEncodedLines: [String] {
+        rows.map(Self.ansiEncoded)
+    }
+
+    package func cell(atX column: Int, y row: Int) -> TerminalCell? {
+        guard row >= 0, row < rows.count, column >= 0, column < rows[row].count else { return nil }
+        return rows[row][column]
+    }
+}
+
+// MARK: - Layout Operations
+
+extension TerminalSurface {
+    package func applyingBackground(_ background: TerminalColor) -> Self {
+        var styledRows = rows
+
+        for rowIndex in styledRows.indices {
+            Self.pad(&styledRows[rowIndex], to: width)
+
+            for column in styledRows[rowIndex].indices {
+                let cell = styledRows[rowIndex][column]
+                var style = cell.style
+                if style.background == nil {
+                    style.background = background
+                }
+
+                let content: TerminalCell.Content
+                if case .empty = cell.content {
+                    content = .grapheme(" ", width: 1)
+                } else {
+                    content = cell.content
+                }
+
+                styledRows[rowIndex][column] = TerminalCell(
+                    content: content,
+                    style: style,
+                    isTransparent: false
+                )
+            }
+        }
+
+        return Self(rows: styledRows, width: width)
+    }
+
+    package init(verticallyStacking surfaces: [Self]) {
+        rows = []
+        rows.reserveCapacity(surfaces.reduce(into: 0) { $0 += $1.height })
+        width = surfaces.map(\.width).max() ?? 0
+
+        for surface in surfaces {
+            rows.append(contentsOf: surface.rows)
+        }
+    }
+
+    package mutating func appendVertically(_ other: Self, spacing: Int = 0) {
+        guard !other.isEmpty else { return }
+
+        if !rows.isEmpty && spacing > 0 {
+            rows.append(contentsOf: repeatElement([], count: spacing))
+        }
+        rows.append(contentsOf: other.rows)
+        width = max(width, other.width)
+    }
+
+    package mutating func appendHorizontally(_ other: Self, spacing: Int = 0) {
+        let leftWidth = width
+        let rowCount = max(height, other.height)
+        var combinedRows: [[TerminalCell]] = []
+        combinedRows.reserveCapacity(rowCount)
+
+        for rowIndex in 0..<rowCount {
+            var row = rowIndex < rows.count ? rows[rowIndex] : []
+            Self.pad(&row, to: leftWidth)
+            if spacing > 0 {
+                row.append(contentsOf: repeatElement(.empty, count: spacing))
+            }
+            if rowIndex < other.rows.count {
+                row.append(contentsOf: other.rows[rowIndex])
+            }
+            combinedRows.append(row)
+        }
+
+        rows = combinedRows
+        width = leftWidth + max(0, spacing) + other.width
+    }
+
+    package func clipped(toWidth targetWidth: Int, height targetHeight: Int) -> Self {
+        let clippedWidth = max(0, min(width, targetWidth))
+        let clippedHeight = max(0, min(height, targetHeight))
+        var clippedRows: [[TerminalCell]] = []
+        clippedRows.reserveCapacity(clippedHeight)
+
+        for rowIndex in 0..<clippedHeight {
+            let source = rows[rowIndex]
+            var row = Array(repeating: TerminalCell.empty, count: clippedWidth)
+            var column = 0
+
+            while column < source.count && column < clippedWidth {
+                let cell = source[column]
+                switch cell.content {
+                case .grapheme(_, let cellWidth) where column + cellWidth <= clippedWidth:
+                    for offset in 0..<cellWidth where column + offset < source.count {
+                        row[column + offset] = source[column + offset]
+                    }
+                    column += cellWidth
+                case .grapheme(_, let cellWidth):
+                    column += cellWidth
+                default:
+                    column += 1
+                }
+            }
+            clippedRows.append(row)
+        }
+
+        return Self(rows: clippedRows, width: clippedWidth)
+    }
+
+    package func composited(with overlay: Self, atX column: Int, y row: Int) -> Self {
+        guard !overlay.isEmpty else { return self }
+
+        let resultWidth = max(width, max(0, column + overlay.width))
+        let resultHeight = max(height, max(0, row + overlay.height))
+        var resultRows = rows
+        if resultRows.count < resultHeight {
+            resultRows.append(contentsOf: repeatElement([], count: resultHeight - resultRows.count))
+        }
+
+        for overlayRowIndex in overlay.rows.indices {
+            let destinationY = row + overlayRowIndex
+            guard destinationY >= 0, destinationY < resultHeight else { continue }
+
+            let overlayRow = overlay.rows[overlayRowIndex]
+            var sourceX = 0
+            while sourceX < overlayRow.count {
+                let sourceCell = overlayRow[sourceX]
+                guard case .grapheme(_, let cellWidth) = sourceCell.content else {
+                    sourceX += 1
+                    continue
+                }
+                defer { sourceX += cellWidth }
+                guard !sourceCell.isTransparent else { continue }
+
+                let destinationX = column + sourceX
+                guard destinationX >= 0, destinationX + cellWidth <= resultWidth else { continue }
+
+                Self.pad(&resultRows[destinationY], to: destinationX + cellWidth)
+                Self.clearGraphemes(
+                    in: &resultRows[destinationY],
+                    intersecting: destinationX..<(destinationX + cellWidth)
+                )
+                for offset in 0..<cellWidth where sourceX + offset < overlayRow.count {
+                    resultRows[destinationY][destinationX + offset] = overlayRow[sourceX + offset]
+                }
+            }
+        }
+
+        return Self(rows: resultRows, width: resultWidth)
+    }
+}
+
+// MARK: - Parsing
+
+private extension TerminalSurface {
+    static func parse(_ line: String) -> [TerminalCell] {
+        var row: [TerminalCell] = []
+        row.reserveCapacity(line.count)
+        var style = TerminalStyle()
+
+        TerminalTextParser.scan(line) { token in
+            switch token {
+            case .sgr(let parameters, _):
+                style.apply(sgr: parameters)
+            case .grapheme(let character):
+                let cellWidth = character.terminalWidth
+                guard cellWidth > 0 else { return }
+                let grapheme = String(character)
+                let isTransparent = grapheme == " " && !style.paintsBlankCell
+                row.append(
+                    TerminalCell(
+                        content: .grapheme(grapheme, width: cellWidth),
+                        style: style,
+                        isTransparent: isTransparent
+                    )
+                )
+                if cellWidth > 1 {
+                    row.append(
+                        contentsOf: repeatElement(
+                            TerminalCell(content: .continuation, style: style, isTransparent: isTransparent),
+                            count: cellWidth - 1
+                        )
+                    )
+                }
+            case .lineBreak:
+                break
+            }
+        }
+
+        return row
+    }
+}
+
+// MARK: - Encoding
+
+private extension TerminalSurface {
+    static let ansiReset = "\u{1B}[0m"
+
+    static func plainText(_ row: [TerminalCell]) -> String {
+        var result = ""
+        result.reserveCapacity(row.count)
+
+        for cell in row {
+            switch cell.content {
+            case .empty:
+                result.append(" ")
+            case .grapheme(let grapheme, _):
+                result += grapheme
+            case .continuation:
+                continue
+            }
+        }
+
+        return result
+    }
+
+    static func ansiEncoded(_ row: [TerminalCell]) -> String {
+        var result = ""
+        result.reserveCapacity(row.count)
+        var activeStyle = TerminalStyle()
+
+        for cell in row {
+            guard case .continuation = cell.content else {
+                if cell.style != activeStyle {
+                    if !activeStyle.isDefault {
+                        result += ansiReset
+                    }
+                    if !cell.style.isDefault {
+                        result += cell.style.ansiSequence
+                    }
+                    activeStyle = cell.style
+                }
+
+                switch cell.content {
+                case .empty:
+                    result.append(" ")
+                case .grapheme(let grapheme, _):
+                    result += grapheme
+                case .continuation:
+                    break
+                }
+                continue
+            }
+        }
+
+        if !activeStyle.isDefault {
+            result += ansiReset
+        }
+        return result
+    }
+}
+
+// MARK: - Cell Integrity
+
+private extension TerminalSurface {
+    static func pad(_ row: inout [TerminalCell], to width: Int) {
+        guard row.count < width else { return }
+        row.append(contentsOf: repeatElement(.empty, count: width - row.count))
+    }
+
+    static func clearGraphemes(in row: inout [TerminalCell], intersecting range: Range<Int>) {
+        var ownerColumns = Set<Int>()
+
+        for column in range where column < row.count {
+            switch row[column].content {
+            case .grapheme:
+                ownerColumns.insert(column)
+            case .continuation:
+                var owner = column - 1
+                while owner >= 0 {
+                    if case .grapheme = row[owner].content {
+                        ownerColumns.insert(owner)
+                        break
+                    }
+                    owner -= 1
+                }
+            case .empty:
+                break
+            }
+        }
+
+        for owner in ownerColumns {
+            guard case .grapheme(_, let cellWidth) = row[owner].content else { continue }
+            for column in owner..<min(row.count, owner + cellWidth) {
+                row[column] = .empty
+            }
+        }
+    }
+}
+
+private extension TerminalCell {
+    static let empty = TerminalCell(content: .empty, style: TerminalStyle(), isTransparent: true)
+}
diff --git a/Sources/TUIkitCore/Rendering/TerminalTextParser.swift b/Sources/TUIkitCore/Rendering/TerminalTextParser.swift
new file mode 100644
index 00000000..fa1d791b
--- /dev/null
+++ b/Sources/TUIkitCore/Rendering/TerminalTextParser.swift
@@ -0,0 +1,235 @@
+//  🖥️ TUIKit — Terminal UI Kit for Swift
+//  TerminalTextParser.swift
+//
+//  Created by LAYERED.work
+//  License: MIT
+
+/// A parsed unit from text that may contain terminal escape sequences.
+enum TerminalTextToken {
+    /// A printable extended grapheme cluster.
+    case grapheme(Character)
+
+    /// A line-feed boundary retained for multiline text layout.
+    case lineBreak
+
+    /// A supported Select Graphic Rendition sequence.
+    case sgr(parameters: [Int], sequence: String)
+}
+
+/// Parses printable graphemes and trusted SGR state at a terminal boundary.
+///
+/// Cursor movement, OSC, DCS, APC, PM, SOS, C0, and C1 controls are consumed
+/// without becoming output. This keeps measurement and rendering on the same
+/// sanitized stream and prevents embedded terminal commands from surviving.
+enum TerminalTextParser {
+    static func scan(
+        _ text: String,
+        preservingLineBreaks: Bool = false,
+        body: (TerminalTextToken) -> Void
+    ) {
+        var index = text.startIndex
+
+        while index < text.endIndex {
+            let character = text[index]
+            guard let scalarValue = character.singleScalarValue else {
+                if character.isLineBreakCluster {
+                    if preservingLineBreaks {
+                        body(.lineBreak)
+                    }
+                } else if !character.containsTerminalControl {
+                    body(.grapheme(character))
+                }
+                index = text.index(after: index)
+                continue
+            }
+
+            switch scalarValue {
+            case 0x0A:
+                if preservingLineBreaks {
+                    body(.lineBreak)
+                }
+                index = text.index(after: index)
+            case 0x1B:
+                let result = consumeEscape(in: text, from: index)
+                if let sgr = result.sgr {
+                    body(.sgr(parameters: sgr, sequence: String(text[index..<result.endIndex])))
+                }
+                index = result.endIndex
+            case 0x9B:
+                let result = consumeCSI(in: text, after: text.index(after: index))
+                if let sgr = result.sgr {
+                    body(.sgr(parameters: sgr, sequence: String(text[index..<result.endIndex])))
+                }
+                index = result.endIndex
+            case 0x90, 0x98, 0x9D, 0x9E, 0x9F:
+                index = consumeControlString(
+                    in: text,
+                    after: text.index(after: index),
+                    allowsBellTerminator: scalarValue == 0x9D
+                )
+            case 0x00...0x1F, 0x7F...0x9F:
+                index = text.index(after: index)
+            default:
+                body(.grapheme(character))
+                index = text.index(after: index)
+            }
+        }
+    }
+}
+
+// MARK: - Escape Parsing
+
+private extension TerminalTextParser {
+    struct ParseResult {
+        let endIndex: String.Index
+        let sgr: [Int]?
+    }
+
+    static func consumeEscape(in text: String, from escapeIndex: String.Index) -> ParseResult {
+        let nextIndex = text.index(after: escapeIndex)
+        guard nextIndex < text.endIndex, let introducer = text[nextIndex].singleScalarValue else {
+            return ParseResult(endIndex: text.endIndex, sgr: nil)
+        }
+
+        switch introducer {
+        case 0x5B:
+            return consumeCSI(in: text, after: text.index(after: nextIndex))
+        case 0x50, 0x58, 0x5E, 0x5F:
+            let endIndex = consumeControlString(
+                in: text,
+                after: text.index(after: nextIndex),
+                allowsBellTerminator: false
+            )
+            return ParseResult(endIndex: endIndex, sgr: nil)
+        case 0x5D:
+            let endIndex = consumeControlString(
+                in: text,
+                after: text.index(after: nextIndex),
+                allowsBellTerminator: true
+            )
+            return ParseResult(endIndex: endIndex, sgr: nil)
+        default:
+            return ParseResult(endIndex: consumeEscapeCommand(in: text, after: nextIndex), sgr: nil)
+        }
+    }
+
+    static func consumeCSI(in text: String, after introducer: String.Index) -> ParseResult {
+        var index = introducer
+        var finalValue: UInt32?
+        var finalIndex = text.endIndex
+
+        while index < text.endIndex {
+            guard let value = text[index].singleScalarValue else {
+                return ParseResult(endIndex: text.index(after: index), sgr: nil)
+            }
+
+            if (0x40...0x7E).contains(value) {
+                finalValue = value
+                finalIndex = index
+                index = text.index(after: index)
+                break
+            }
+
+            guard (0x20...0x3F).contains(value) else {
+                return ParseResult(endIndex: text.index(after: index), sgr: nil)
+            }
+            index = text.index(after: index)
+        }
+
+        guard finalValue == 0x6D else {
+            return ParseResult(endIndex: index, sgr: nil)
+        }
+
+        let rawParameters = text[introducer..<finalIndex]
+        guard rawParameters.allSatisfy({ character in
+            guard let value = character.singleScalarValue else { return false }
+            return (0x30...0x39).contains(value) || value == 0x3B
+        }) else {
+            return ParseResult(endIndex: index, sgr: nil)
+        }
+
+        let parameters: [Int]
+        if rawParameters.isEmpty {
+            parameters = [0]
+        } else {
+            parameters = rawParameters.split(separator: ";", omittingEmptySubsequences: false).map {
+                Int($0) ?? 0
+            }
+        }
+        return ParseResult(endIndex: index, sgr: parameters)
+    }
+
+    static func consumeControlString(
+        in text: String,
+        after introducer: String.Index,
+        allowsBellTerminator: Bool
+    ) -> String.Index {
+        var index = introducer
+
+        while index < text.endIndex {
+            guard let value = text[index].singleScalarValue else {
+                index = text.index(after: index)
+                continue
+            }
+
+            if allowsBellTerminator && value == 0x07 {
+                return text.index(after: index)
+            }
+            if value == 0x9C {
+                return text.index(after: index)
+            }
+            if value == 0x1B {
+                let nextIndex = text.index(after: index)
+                if nextIndex < text.endIndex && text[nextIndex].singleScalarValue == 0x5C {
+                    return text.index(after: nextIndex)
+                }
+            }
+            index = text.index(after: index)
+        }
+
+        return text.endIndex
+    }
+
+    static func consumeEscapeCommand(in text: String, after escapeIndex: String.Index) -> String.Index {
+        var index = escapeIndex
+
+        while index < text.endIndex {
+            guard let value = text[index].singleScalarValue else {
+                return text.index(after: index)
+            }
+            index = text.index(after: index)
+
+            if (0x30...0x7E).contains(value) {
+                return index
+            }
+            guard (0x20...0x2F).contains(value) else {
+                return index
+            }
+        }
+
+        return text.endIndex
+    }
+}
+
+private extension Character {
+    var isLineBreakCluster: Bool {
+        var containsLineFeed = false
+        for scalar in unicodeScalars {
+            guard scalar.value == 0x0A || scalar.value == 0x0D else { return false }
+            containsLineFeed = containsLineFeed || scalar.value == 0x0A
+        }
+        return containsLineFeed
+    }
+
+    var containsTerminalControl: Bool {
+        unicodeScalars.contains { scalar in
+            let value = scalar.value
+            return (0x00...0x1F).contains(value) || (0x7F...0x9F).contains(value)
+        }
+    }
+
+    var singleScalarValue: UInt32? {
+        guard unicodeScalars.count == 1 else { return nil }
+        return unicodeScalars.first?.value
+    }
+}
diff --git a/Tests/TUIkitCoreTests/FrameBufferTests.swift b/Tests/TUIkitCoreTests/FrameBufferTests.swift
index cb3245d3..107d76af 100644
--- a/Tests/TUIkitCoreTests/FrameBufferTests.swift
+++ b/Tests/TUIkitCoreTests/FrameBufferTests.swift
@@ -79,4 +79,51 @@ struct FrameBufferTests {
         // "Hi" (styled) + " " (spacing) + "There"
         #expect(left.lines[0].stripped == "Hi There")
     }
+
+    @Test("Line mutation rebuilds cell width")
+    func lineMutationRebuildsSurface() {
+        var buffer = FrameBuffer(text: "A")
+
+        buffer.lines[0] = "e\u{301}界"
+
+        #expect(buffer.width == 3)
+        #expect(buffer.lines == ["e\u{301}界"])
+    }
+
+    @Test("FrameBuffer rejects embedded terminal commands")
+    func rejectsTerminalCommands() {
+        let buffer = FrameBuffer(text: "A\u{1B}]0;owned\u{07}B\u{1B}[2JC")
+
+        #expect(buffer.lines == ["ABC"])
+        #expect(buffer.width == 3)
+    }
+
+    @Test("Transparent overlay spaces preserve base cells")
+    func transparentOverlaySpaces() {
+        let base = FrameBuffer(text: "ABC")
+        let overlay = FrameBuffer(text: " X ")
+
+        let result = base.composited(with: overlay, at: (x: 0, y: 0))
+
+        #expect(result.lines == ["AXC"])
+    }
+
+    @Test("Overlay clears complete wide graphemes")
+    func overlayClearsWideGrapheme() {
+        let base = FrameBuffer(text: "A界B")
+        let overlay = FrameBuffer(text: "X")
+
+        let result = base.composited(with: overlay, at: (x: 2, y: 0))
+
+        #expect(result.lines == ["A XB"])
+        #expect(result.width == 4)
+    }
+
+    @Test("RGB-styled compatibility lines remain valid strings")
+    func rgbStyledLineLifetime() {
+        let styled = "\u{1B}[38;2;229;229;229mOver\u{1B}[0m"
+        let buffer = FrameBuffer(text: styled)
+
+        #expect(buffer.lines[0].stripped == "Over")
+    }
 }
diff --git a/Tests/TUIkitCoreTests/TerminalSurfaceTests.swift b/Tests/TUIkitCoreTests/TerminalSurfaceTests.swift
new file mode 100644
index 00000000..ebecdace
--- /dev/null
+++ b/Tests/TUIkitCoreTests/TerminalSurfaceTests.swift
@@ -0,0 +1,81 @@
+//  🖥️ TUIKit — Terminal UI Kit for Swift
+//  TerminalSurfaceTests.swift
+//
+//  Created by LAYERED.work
+//  License: MIT
+
+import Testing
+
+@testable import TUIkitCore
+
+@Suite("Terminal Surface Tests")
+struct TerminalSurfaceTests {
+    @Test("Surface owns graphemes and wide-cell continuations")
+    func graphemeOwnership() {
+        let surface = TerminalSurface(lines: ["e\u{301}界"])
+
+        #expect(surface.width == 3)
+        #expect(surface.height == 1)
+        #expect(surface.cell(atX: 0, y: 0)?.grapheme == "e\u{301}")
+        #expect(surface.cell(atX: 1, y: 0)?.grapheme == "界")
+        #expect(surface.cell(atX: 2, y: 0)?.isContinuation == true)
+    }
+
+    @Test("Surface models and encodes SGR state")
+    func styleRoundTrip() {
+        let input = "\u{1B}[1;31;44mStyled\u{1B}[0m plain"
+        let surface = TerminalSurface(lines: [input])
+
+        #expect(surface.plainLines == ["Styled plain"])
+        #expect(surface.ansiEncodedLines == [input])
+    }
+
+    @Test("Surface parsing rejects terminal commands")
+    func commandRejection() {
+        let input = "A\u{1B}]0;owned\u{07}B\u{1B}[2JC"
+        let surface = TerminalSurface(lines: [input])
+
+        #expect(surface.plainLines == ["ABC"])
+        #expect(surface.ansiEncodedLines == ["ABC"])
+    }
+
+    @Test("Clipping omits a grapheme that crosses the cell boundary")
+    func wideCellClipping() {
+        let surface = TerminalSurface(lines: ["A界B"])
+        let clipped = surface.clipped(toWidth: 2, height: 1)
+
+        #expect(clipped.width == 2)
+        #expect(clipped.plainLines == ["A "])
+    }
+
+    @Test("Transparent overlay cells preserve the base")
+    func transparentOverlay() {
+        let base = TerminalSurface(lines: ["ABC"])
+        let overlay = TerminalSurface(lines: [" X "])
+
+        let result = base.composited(with: overlay, atX: 0, y: 0)
+
+        #expect(result.plainLines == ["AXC"])
+    }
+
+    @Test("Foreground styling does not make blank overlay cells opaque")
+    func foregroundStyledBlankOverlay() {
+        let base = TerminalSurface(lines: ["ABC"])
+        let overlay = TerminalSurface(lines: ["\u{1B}[31m X \u{1B}[0m"])
+
+        let result = base.composited(with: overlay, atX: 0, y: 0)
+
+        #expect(result.plainLines == ["AXC"])
+    }
+
+    @Test("Styled spaces are opaque overlay cells")
+    func styledSpaceOverlay() {
+        let base = TerminalSurface(lines: ["ABC"])
+        let overlay = TerminalSurface(lines: ["\u{1B}[41m \u{1B}[0m"])
+
+        let result = base.composited(with: overlay, atX: 1, y: 0)
+
+        #expect(result.plainLines == ["A C"])
+        #expect(result.ansiEncodedLines[0].contains("\u{1B}[41m \u{1B}[0m"))
+    }
+}
diff --git a/Tests/TUIkitCoreTests/TerminalTextTests.swift b/Tests/TUIkitCoreTests/TerminalTextTests.swift
new file mode 100644
index 00000000..589047c5
--- /dev/null
+++ b/Tests/TUIkitCoreTests/TerminalTextTests.swift
@@ -0,0 +1,65 @@
+//  🖥️ TUIKit — Terminal UI Kit for Swift
+//  TerminalTextTests.swift
+//
+//  Created by LAYERED.work
+//  License: MIT
+
+import Testing
+
+@testable import TUIkitCore
+
+@Suite("Terminal Text Tests")
+struct TerminalTextTests {
+    @Test("Combining marks stay attached to their base cell")
+    func combiningMarkWidth() {
+        let grapheme: Character = "e\u{301}"
+
+        #expect(grapheme.terminalWidth == 1)
+        #expect(String(grapheme).strippedLength == 1)
+    }
+
+    @Test("Emoji sequences and East Asian characters use two cells")
+    func wideGraphemeWidths() {
+        #expect(Character("👩‍💻").terminalWidth == 2)
+        #expect(Character("🇦🇹").terminalWidth == 2)
+        #expect(Character("界").terminalWidth == 2)
+    }
+
+    @Test("Cell slicing never splits a wide grapheme")
+    func wideGraphemeSlicing() {
+        let text = "A界B"
+
+        #expect(text.ansiAwarePrefix(visibleCount: 2) == "A")
+        #expect(text.ansiAwareSuffix(droppingVisible: 1) == "界B")
+        #expect(text.ansiAwareSuffix(droppingVisible: 2) == "B")
+    }
+
+    @Test("SGR and non-SGR CSI sequences have zero display width")
+    func csiSequencesHaveZeroWidth() {
+        let text = "\u{1B}[31mred\u{1B}[0m\u{1B}[2J!"
+
+        #expect(text.stripped == "red!")
+        #expect(text.strippedLength == 4)
+    }
+
+    @Test("OSC hyperlinks cannot survive terminal sanitization")
+    func oscHyperlinksAreNeutralized() {
+        let hyperlink = "\u{1B}]8;;https://example.com\u{07}click\u{1B}]8;;\u{07}"
+
+        #expect(hyperlink.stripped == "click")
+        #expect(hyperlink.sanitizedForTerminal == "click")
+    }
+
+    @Test("DCS payloads and control characters are neutralized")
+    func deviceControlsAreNeutralized() {
+        let input = "A\u{1B}Pmalicious\u{1B}\\B\u{07}C"
+
+        #expect(input.stripped == "ABC")
+        #expect(input.sanitizedForTerminal == "ABC")
+    }
+
+    @Test("CRLF control clusters cannot survive sanitization")
+    func crlfControlsAreNeutralized() {
+        #expect("A\r\nB".sanitizedForTerminal == "AB")
+    }
+}
diff --git a/Tests/TUIkitTests/BackgroundModifierTests.swift b/Tests/TUIkitTests/BackgroundModifierTests.swift
index 903d3403..76611a28 100644
--- a/Tests/TUIkitTests/BackgroundModifierTests.swift
+++ b/Tests/TUIkitTests/BackgroundModifierTests.swift
@@ -71,4 +71,20 @@ struct BackgroundModifierTests {
         // Both lines should have the same visible width after padding
         #expect(result.lines[0].strippedLength == result.lines[1].strippedLength)
     }
+
+    @Test("Background remains opaque after nested style resets")
+    func backgroundPersistsAfterNestedReset() {
+        let modifier = BackgroundModifier(color: .red)
+        let styledLine = ANSIRenderer.colorize("Hi", foreground: .green)
+        let buffer = FrameBuffer(lines: [styledLine, "Wide"])
+
+        let result = modifier.modify(buffer: buffer, context: testContext())
+        let base = FrameBuffer(lines: ["ABCD"])
+        let composited = base.composited(
+            with: FrameBuffer(lines: [result.lines[0]]),
+            at: (x: 0, y: 0)
+        )
+
+        #expect(composited.lines[0].stripped == "Hi  ")
+    }
 }
diff --git a/Tests/TUIkitTests/FrameDiffWriterTests.swift b/Tests/TUIkitTests/FrameDiffWriterTests.swift
index df0172ec..79682c9d 100644
--- a/Tests/TUIkitTests/FrameDiffWriterTests.swift
+++ b/Tests/TUIkitTests/FrameDiffWriterTests.swift
@@ -71,8 +71,8 @@ struct BuildOutputLinesTests {
         #expect(lines[1] == expected)
     }
 
-    @Test("ANSI reset codes in content are replaced with reset+bg")
-    func resetCodesReplaced() {
+    @Test("Redundant reset codes are normalized before terminal output")
+    func resetCodesNormalized() {
         let writer = FrameDiffWriter()
         let reset = ANSIRenderer.reset
         let buffer = FrameBuffer(text: "A\(reset)B")
@@ -85,7 +85,9 @@ struct BuildOutputLinesTests {
             reset: reset
         )
 
-        #expect(lines[0].contains("\(reset)[BG]"))
+        #expect(!lines[0].contains("\(reset)[BG]"))
+        #expect(lines[0].stripped.contains("AB"))
+        #expect(lines[0].hasSuffix(reset))
     }
 
     @Test("Multiple content lines are all processed")
@@ -108,6 +110,40 @@ struct BuildOutputLinesTests {
         #expect(lines[1].contains("Line2"))
         #expect(lines[2].contains("Line3"))
     }
+
+    @Test("Wide graphemes are clipped only at complete cell boundaries")
+    func wideGraphemeClipping() {
+        let writer = FrameDiffWriter()
+        let buffer = FrameBuffer(text: "A界B")
+
+        let lines = writer.buildOutputLines(
+            buffer: buffer,
+            terminalWidth: 2,
+            terminalHeight: 1,
+            bgCode: "",
+            reset: ""
+        )
+
+        #expect(lines[0].stripped == "A ")
+        #expect(lines[0].strippedLength == 2)
+    }
+
+    @Test("Wide graphemes are retained when the full span fits")
+    func wideGraphemeExactFit() {
+        let writer = FrameDiffWriter()
+        let buffer = FrameBuffer(text: "A界B")
+
+        let lines = writer.buildOutputLines(
+            buffer: buffer,
+            terminalWidth: 3,
+            terminalHeight: 1,
+            bgCode: "",
+            reset: ""
+        )
+
+        #expect(lines[0].stripped == "A界")
+        #expect(lines[0].strippedLength == 3)
+    }
 }
 
 // MARK: - Line Diff Logic Tests
diff --git a/Tests/TUIkitTests/NotificationModifierTests.swift b/Tests/TUIkitTests/NotificationModifierTests.swift
index 7b42eaf1..41601acd 100644
--- a/Tests/TUIkitTests/NotificationModifierTests.swift
+++ b/Tests/TUIkitTests/NotificationModifierTests.swift
@@ -94,7 +94,7 @@ struct NotificationTests {
         let lines = NotificationTiming.wordWrap(text, maxWidth: 20)
         #expect(lines.count > 1)
         for line in lines {
-            #expect(line.count <= 20)
+            #expect(line.strippedLength <= 20)
         }
     }
 
@@ -104,6 +104,12 @@ struct NotificationTests {
         #expect(lines == ["Supercalifragilistic"])
     }
 
+    @Test("Word wrap measures East Asian text in terminal cells")
+    func wordWrapEastAsianText() {
+        let lines = NotificationTiming.wordWrap("界 界", maxWidth: 4)
+        #expect(lines == ["界", "界"])
+    }
+
     @Test("Empty text returns single empty line")
     func wordWrapEmpty() {
         let lines = NotificationTiming.wordWrap("", maxWidth: 40)
diff --git a/Tests/TUIkitTests/SectionListIntegrationTests.swift b/Tests/TUIkitTests/SectionListIntegrationTests.swift
index cd0a4303..28df78bb 100644
--- a/Tests/TUIkitTests/SectionListIntegrationTests.swift
+++ b/Tests/TUIkitTests/SectionListIntegrationTests.swift
@@ -85,14 +85,20 @@ struct SectionListIntegrationTests {
         }
 
         let buffer = renderToBuffer(list, context: context)
-        let content = buffer.lines.joined()
+        var headerCell: TerminalCell?
+        for row in 0..<buffer.height {
+            for column in 0..<buffer.width {
+                let cell = buffer.terminalSurface.cell(atX: column, y: row)
+                if cell?.grapheme == "H" {
+                    headerCell = cell
+                    break
+                }
+            }
+            if headerCell != nil { break }
+        }
 
-        // Header should contain ANSI dim code - may be combined as [1;2m or separate
-        let hasDimCode = content.contains("\u{1B}[2m") || content.contains(";2m")
-        #expect(hasDimCode)
-        // Header should contain ANSI bold code - may be combined as [1;2m or separate
-        let hasBoldCode = content.contains("\u{1B}[1m") || content.contains("[1;")
-        #expect(hasBoldCode)
+        #expect(headerCell?.style.isDim == true)
+        #expect(headerCell?.style.isBold == true)
     }
 
     @Test("Section footer renders in List")
diff --git a/Tests/TUIkitTests/TextCellLayoutTests.swift b/Tests/TUIkitTests/TextCellLayoutTests.swift
new file mode 100644
index 00000000..b2e57ce7
--- /dev/null
+++ b/Tests/TUIkitTests/TextCellLayoutTests.swift
@@ -0,0 +1,131 @@
+//  🖥️ TUIKit — Terminal UI Kit for Swift
+//  TextCellLayoutTests.swift
+//
+//  Created by LAYERED.work
+//  License: MIT
+
+import Testing
+
+@testable import TUIkit
+
+@MainActor
+@Suite("Text Cell Layout Tests")
+struct TextCellLayoutTests {
+    @Test("Text wraps long words without splitting wide graphemes")
+    func textWrapsByCells() {
+        let context = RenderContext(
+            availableWidth: 3,
+            availableHeight: 4,
+            tuiContext: TUIContext()
+        )
+        let text = Text("A界B")
+
+        let size = text.sizeThatFits(proposal: ProposedSize(width: 3, height: nil), context: context)
+        let buffer = renderToBuffer(text, context: context)
+
+        #expect(size.width == 3)
+        #expect(size.height == 2)
+        #expect(buffer.lines.map(\.stripped) == ["A界", "B"])
+    }
+
+    @Test("Text measures sanitized content rather than embedded controls")
+    func textNeutralizesControlsBeforeLayout() {
+        let context = RenderContext(
+            availableWidth: 2,
+            availableHeight: 2,
+            tuiContext: TUIContext()
+        )
+        let text = Text("A\u{1B}]0;owned\u{07}B")
+
+        let size = text.sizeThatFits(proposal: ProposedSize(width: 2, height: nil), context: context)
+        let buffer = renderToBuffer(text, context: context)
+
+        #expect(size == ViewSize.fixed(2, 1))
+        #expect(buffer.width == 2)
+        #expect(buffer.height == 1)
+        #expect(buffer.lines[0].stripped == "AB")
+    }
+
+    @Test("Text consumes multiline terminal control payloads before wrapping")
+    func textSanitizesBeforeSplittingLines() {
+        let context = RenderContext(
+            availableWidth: 20,
+            availableHeight: 2,
+            tuiContext: TUIContext()
+        )
+        let text = Text("A\u{1B}]0;hidden\npayload\u{07}B")
+
+        let buffer = renderToBuffer(text, context: context)
+
+        #expect(buffer.height == 1)
+        #expect(buffer.lines[0].stripped == "AB")
+    }
+
+    @Test("Unfocused text fields clip and pad in terminal cells")
+    func unfocusedFieldUsesCellWidth() {
+        let context = RenderContext(availableWidth: 20, availableHeight: 1, tuiContext: TUIContext())
+        let renderer = makeRenderer()
+
+        let output = renderer.buildContent(
+            text: "A界B",
+            cursorPosition: 0,
+            selectionRange: nil,
+            isFocused: false,
+            palette: context.environment.palette,
+            cursorStyle: TextCursorStyle(animation: .none),
+            cursorTimer: nil,
+            contentWidth: 3
+        )
+
+        #expect(output.stripped == "A界")
+        #expect(output.strippedLength == 3)
+    }
+
+    @Test("Focused text fields scroll on grapheme boundaries")
+    func focusedFieldScrollsByCells() {
+        let context = RenderContext(availableWidth: 20, availableHeight: 1, tuiContext: TUIContext())
+        let renderer = makeRenderer()
+
+        let output = renderer.buildContent(
+            text: "AB界C",
+            cursorPosition: 4,
+            selectionRange: nil,
+            isFocused: true,
+            palette: context.environment.palette,
+            cursorStyle: TextCursorStyle(animation: .none),
+            cursorTimer: nil,
+            contentWidth: 4
+        )
+
+        #expect(output.stripped == "界C█")
+        #expect(output.strippedLength == 4)
+    }
+
+    @Test("Focused text fields reserve every cell of a wide cursor grapheme")
+    func focusedFieldCursorCoversWideGrapheme() {
+        let context = RenderContext(availableWidth: 20, availableHeight: 1, tuiContext: TUIContext())
+        let renderer = makeRenderer()
+
+        let output = renderer.buildContent(
+            text: "界A",
+            cursorPosition: 0,
+            selectionRange: nil,
+            isFocused: true,
+            palette: context.environment.palette,
+            cursorStyle: TextCursorStyle(animation: .none),
+            cursorTimer: nil,
+            contentWidth: 3
+        )
+
+        #expect(output.stripped == "█ A")
+        #expect(output.strippedLength == 3)
+    }
+
+    private func makeRenderer() -> TextFieldContentRenderer {
+        TextFieldContentRenderer(
+            prompt: nil,
+            isDisabled: false,
+            displayCharacter: { $0 }
+        )
+    }
+}
diff --git a/Tests/TUIkitTests/ZStackTests.swift b/Tests/TUIkitTests/ZStackTests.swift
new file mode 100644
index 00000000..5294a2ad
--- /dev/null
+++ b/Tests/TUIkitTests/ZStackTests.swift
@@ -0,0 +1,54 @@
+//  🖥️ TUIKit — Terminal UI Kit for Swift
+//  ZStackTests.swift
+//
+//  Created by LAYERED.work
+//  License: MIT
+
+import Testing
+
+@testable import TUIkit
+
+@MainActor
+@Suite("ZStack Tests")
+struct ZStackTests {
+    @Test("Default alignment centers every child in the shared surface")
+    func defaultCenterAlignment() {
+        let stack = ZStack {
+            Text("12345")
+            Text("X")
+        }
+
+        let buffer = render(stack)
+
+        #expect(buffer.width == 5)
+        #expect(buffer.height == 1)
+        #expect(buffer.lines[0].stripped == "12X45")
+    }
+
+    @Test("Bottom-trailing alignment applies on both axes")
+    func bottomTrailingAlignment() {
+        let stack = ZStack(alignment: .bottomTrailing) {
+            Text("ABCD")
+            VStack(spacing: 0) {
+                Text("X")
+                Text("Y")
+            }
+        }
+
+        let buffer = render(stack)
+
+        #expect(buffer.width == 4)
+        #expect(buffer.height == 2)
+        #expect(buffer.lines[0].stripped == "   X")
+        #expect(buffer.lines[1].stripped == "ABCY")
+    }
+
+    private func render<V: View>(_ view: V) -> FrameBuffer {
+        let context = RenderContext(
+            availableWidth: 40,
+            availableHeight: 10,
+            tuiContext: TUIContext()
+        )
+        return renderToBuffer(view, context: context)
+    }
+}