Terminal UI API Update

README.md

@@ -405,8 +405,11 @@ Then link to it with `/portfolio#skills` - the page will scroll to that section
 src/lib/components/
 ├── TerminalTUI.svelte      # Main terminal container
 └── tui/
-    ├── types.ts            # TypeScript types
+    ├── types.ts            # TypeScript types (TerminalLine, TerminalAPI, etc.)
     ├── utils.ts            # Parsing & styling utilities
+    ├── terminal-api.ts     # Terminal API factory for reactive control
+    ├── terminal-typing.ts  # Typing animation engine
+    ├── terminal-keyboard.ts# Keyboard navigation handler
     ├── TuiHeader.svelte    # Top status bar
     ├── TuiBody.svelte      # Scrollable content area
     ├── TuiFooter.svelte    # Bottom status bar
@@ -419,6 +422,115 @@ src/lib/components/
     └── TuiTooltip.svelte   # Hover tooltip
 ```
 
+## Terminal API
+
+The `TerminalTUI` component exposes a reactive API for programmatic control via the `terminal` bindable prop.
+
+### Setup
+
+```svelte
+<script lang="ts">
+  import TerminalTUI from '$lib/components/TerminalTUI.svelte';
+  import type { TerminalAPI, TerminalLine } from '$lib';
+  
+  let terminal = $state<TerminalAPI>();
+  let lines = $state<TerminalLine[]>([
+    { type: 'output', content: 'Hello world!' }
+  ]);
+</script>
+
+<TerminalTUI bind:terminal bind:lines title="~/demo" />
+```
+
+### API Methods
+
+#### Writing Lines
+| Method | Description |
+|--------|-------------|
+| `terminal.write(line)` | Append a single line |
+| `terminal.writeLines(lines)` | Append multiple lines |
+| `terminal.clear()` | Remove all lines |
+| `terminal.setLines(lines)` | Replace all lines |
+
+#### Updating Lines
+| Method | Description |
+|--------|-------------|
+| `terminal.update(index, updates)` | Update line by index with partial changes |
+| `terminal.updateContent(index, content)` | Update just the content of a line |
+| `terminal.updateById(id, updates)` | Update line by its `id` property |
+
+#### Removing Lines
+| Method | Description |
+|--------|-------------|
+| `terminal.remove(index)` | Remove line at index |
+| `terminal.removeRange(start, count)` | Remove a range of lines |
+| `terminal.removeById(id)` | Remove line by its `id` property |
+
+#### Inserting Lines
+| Method | Description |
+|--------|-------------|
+| `terminal.insert(index, line)` | Insert line at a specific index |
+
+#### Reading State
+| Method | Description |
+|--------|-------------|
+| `terminal.getLine(index)` | Get line at index |
+| `terminal.getLines()` | Get all lines (copy) |
+| `terminal.getLineCount()` | Get number of lines |
+| `terminal.findById(id)` | Find index of line by id |
+| `terminal.isAnimating()` | Check if typing animation is active |
+
+#### Navigation & Control
+| Method | Description |
+|--------|-------------|
+| `terminal.scrollToBottom()` | Scroll to bottom of terminal |
+| `terminal.scrollToLine(index)` | Scroll to specific line |
+| `terminal.skip()` | Skip current typing animation |
+| `terminal.restart()` | Restart typing animation from beginning |
+
+### Example: Dynamic Updates
+
+```svelte
+<script lang="ts">
+  import TerminalTUI from '$lib/components/TerminalTUI.svelte';
+  import type { TerminalAPI } from '$lib';
+  
+  let terminal = $state<TerminalAPI>();
+  let lines = $state([
+    { type: 'output', content: 'Initializing...', id: 'status' }
+  ]);
+  
+  async function runProcess() {
+    // Update existing line
+    terminal?.updateById('status', { 
+      type: 'info', 
+      content: 'Processing...' 
+    });
+    
+    await delay(1000);
+    
+    // Add progress
+    terminal?.write({ 
+      type: 'progress', 
+      content: '', 
+      progress: 50, 
+      progressLabel: '50%' 
+    });
+    
+    await delay(1000);
+    
+    // Complete
+    terminal?.updateById('status', { 
+      type: 'success', 
+      content: 'Complete!' 
+    });
+  }
+</script>
+
+<TerminalTUI bind:terminal bind:lines />
+<button onclick={runProcess}>Start</button>
+```
+
 ## 3D Model Viewer
 
 The `ModelViewer` component provides an interactive Three.js viewer for `.glb` models.

src/lib/components/TerminalTUI.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { browser } from '$app/environment';
 	import { themeColors } from '$lib/stores/theme';
-	import { toggleMode } from '$lib/stores/theme';
 	import { terminalSettings, type SpeedPreset, speedPresets } from '$lib/config';
-	import { calculateTypeSpeed } from '$lib'; 
 	import TuiHeader from './tui/TuiHeader.svelte';
 	import TuiBody from './tui/TuiBody.svelte';
 	import TuiFooter from './tui/TuiFooter.svelte';
-	import { parseColorText, getPlainText } from './tui/utils';
 	import '$lib/assets/css/terminal-tui.css';
 
-	import type { TerminalLine, ParsedLine, DisplayedLine } from './tui/types';
+	// Import extracted modules
+	import { parseLine, createTerminalAPI } from './tui/terminal-api';
+	import { runTypingAnimation, skipTypingAnimation } from './tui/terminal-typing';
+	import { createKeyboardHandler, handleNavigation, scrollToHash } from './tui/terminal-keyboard';
+
+	import type { TerminalLine, ParsedLine, DisplayedLine, TerminalAPI } from './tui/types';
 
 	interface Props {
 		lines?: TerminalLine[];
@@ -21,16 +22,18 @@
 		interactive?: boolean;
 		speed?: SpeedPreset | number;
 		autoscroll?: boolean;
+		terminal?: TerminalAPI;
 	}
 
 	let { 
-		lines = [], 
+		lines = $bindable([]), 
 		title = 'terminal',
 		class: className = '',
 		onComplete,
 		interactive = true,
 		speed = 'normal',
-		autoscroll = true
+		autoscroll = true,
+		terminal = $bindable()
 	}: Props = $props();
 
 	// Calculate speed multiplier from preset or number
@@ -43,14 +46,7 @@
 
 	// Pre-parse all lines upfront (segments + plain text)
 	const parsedLines = $derived<ParsedLine[]>(
-		lines.map(line => {
+		lines.map(line => parseLine(line, colorMap))
-			const segments = parseColorText(line.content, colorMap);
-			return {
-				line,
-				segments,
-				plainText: getPlainText(segments)
-			};
-		})
 	);
 
 	let displayedLines = $state<DisplayedLine[]>([]);
@@ -58,6 +54,7 @@
 	let isTyping = $state(false);
 	let isComplete = $state(false);
 	let selectedIndex = $state(-1);
+	let skipRequested = $state(false);
 	let terminalElement: HTMLDivElement;
 	let bodyElement = $state<HTMLDivElement>();
 
@@ -86,259 +83,112 @@
 		lastColorMapId = colorMapId;
 	});
 
-	// Autoscroll to bottom (respects autoscroll prop)
-	function scrollToBottom() {
-		if (!autoscroll || !bodyElement) return;
-		bodyElement.scrollTo({
-			top: bodyElement.scrollHeight,
-			behavior: 'smooth'
-		});
-	}
-
-	// Scroll to hash target (anchor link like #skills)
-	function scrollToHash() {
-		if (!browser || !bodyElement) return;
-		
-		const hash = window.location.hash;
-		if (!hash) return;
-		
-		const targetId = hash.slice(1); // Remove the #
-		const targetElement = bodyElement.querySelector(`#${CSS.escape(targetId)}`);
-		
-		if (targetElement) {
-			// Small delay to ensure layout is complete
-			setTimeout(() => {
-				targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
-			}, 100);
-		}
-	}
-
 	// Get all interactive button indices
-	let buttonIndices = $derived(
+	const buttonIndices = $derived(
 		displayedLines
 			.map((item, i) => item.parsed.line.type === 'button' ? i : -1)
 			.filter(i => i !== -1)
 	);
 
-	function sleep(ms: number): Promise<void> {
+	// ========================================================================
-		return new Promise(resolve => setTimeout(resolve, ms));
+	// TYPING ANIMATION
+	// ========================================================================
+
+	function typeText() {
+		runTypingAnimation({
+			parsedLines,
+			speedMultiplier,
+			terminalSettings,
+			buttonIndices,
+			interactive,
+			autoscroll,
+			getBodyElement: () => bodyElement,
+			getState: () => ({ displayedLines, currentLineIndex, isTyping, isComplete, skipRequested, selectedIndex }),
+			setState: (updates) => {
+				if (updates.displayedLines !== undefined) displayedLines = updates.displayedLines;
+				if (updates.currentLineIndex !== undefined) currentLineIndex = updates.currentLineIndex;
+				if (updates.isTyping !== undefined) isTyping = updates.isTyping;
+				if (updates.isComplete !== undefined) isComplete = updates.isComplete;
+				if (updates.skipRequested !== undefined) skipRequested = updates.skipRequested;
+				if (updates.selectedIndex !== undefined) selectedIndex = updates.selectedIndex;
+			},
+			onComplete,
+			scrollToHash: () => scrollToHash(bodyElement)
+		});
 	}
 
-	async function typeText() {
-		if (parsedLines.length === 0) return;
-
-		isTyping = true;
-		
-		// Apply speed multiplier to start delay
-		const startDelayMs = speedMultiplier === 0 ? 0 : terminalSettings.startDelay * speedMultiplier;
-		await sleep(startDelayMs);
-		if (skipRequested) return;
-
-		for (let i = 0; i < parsedLines.length; i++) {
-			if (skipRequested) return;
-			
-			const parsed = parsedLines[i];
-			const line = parsed.line;
-			const plainLength = parsed.plainText.length;
-			
-			displayedLines = [...displayedLines, { parsed, charIndex: 0, complete: false, showImage: false }];
-			currentLineIndex = i;
-
-			if (line.delay && speedMultiplier > 0) {
-				await sleep(line.delay * speedMultiplier);
-				if (skipRequested) return;
-			}
-
-			// Handle different line types
-			if (line.type === 'image') {
-				await sleep(speedMultiplier === 0 ? 0 : 100 * speedMultiplier);
-				if (skipRequested) return;
-				displayedLines[i] = { parsed, charIndex: plainLength, complete: true, showImage: true };
-				scrollToBottom();
-			} else if (line.type === 'blank' || line.type === 'divider') {
-				displayedLines[i] = { parsed, charIndex: plainLength, complete: true, showImage: false };
-			} else if (line.type === 'button') {
-				// Buttons appear instantly
-				displayedLines[i] = { parsed, charIndex: plainLength, complete: true, showImage: false };
-				scrollToBottom();
-			} else if (speedMultiplier === 0) {
-				// Instant mode - no typing animation
-				displayedLines[i] = { parsed, charIndex: plainLength, complete: true, showImage: false };
-				if (i % 5 === 0) scrollToBottom();
-			} else if (line.type === 'header') {
-				const typeSpeed = calculateTypeSpeed(plainLength, speedMultiplier * 0.25);
-				for (let j = 0; j <= plainLength; j++) {
-					if (skipRequested) return;
-					displayedLines[i] = { 
-						parsed, 
-						charIndex: j, 
-						complete: j === plainLength,
-						showImage: false
-					};
-					if (j < plainLength) await sleep(typeSpeed);
-				}
-				scrollToBottom();
-			} else {
-				const typeSpeed = calculateTypeSpeed(plainLength, speedMultiplier);
-				
-				for (let j = 0; j <= plainLength; j++) {
-					if (skipRequested) return;
-					displayedLines[i] = { 
-						parsed, 
-						charIndex: j, 
-						complete: j === plainLength,
-						showImage: false
-					};
-					
-					if (j % 10 === 0) scrollToBottom();
-					
-					if (j < plainLength) {
-						await sleep(typeSpeed);
-					}
-				}
-			}
-
-			if (skipRequested) return;
-			displayedLines[i].complete = true;
-			
-			scrollToBottom();
-			
-			if (i < parsedLines.length - 1 && speedMultiplier > 0) {
-				await sleep(terminalSettings.lineDelay * speedMultiplier);
-			}
-		}
-
-		isTyping = false;
-		isComplete = true;
-		
-		if (interactive && buttonIndices.length > 0) {
-			selectedIndex = buttonIndices[0];
-		}
-		
-		// Scroll to hash anchor if present in URL
-		scrollToHash();
-		
-		onComplete?.();
-	}
-
-	// Scroll selected button into view with margin for context
-	function scrollToSelected() {
-		if (bodyElement && selectedIndex >= 0) {
-			const buttons = bodyElement.querySelectorAll('.tui-button');
-			const selectedButton = Array.from(buttons).find((_, i) => {
-				const btnIndices = displayedLines
-					.map((item, idx) => item.parsed.line.type === 'button' ? idx : -1)
-					.filter(idx => idx !== -1);
-				return btnIndices[i] === selectedIndex;
-			}) as HTMLElement | undefined;
-			
-			if (selectedButton && bodyElement) {
-				const containerRect = bodyElement.getBoundingClientRect();
-				const buttonRect = selectedButton.getBoundingClientRect();
-				const margin = 80;
-				
-				if (buttonRect.top < containerRect.top + margin) {
-					const scrollAmount = buttonRect.top - containerRect.top - margin;
-					bodyElement.scrollBy({ top: scrollAmount, behavior: 'smooth' });
-				}
-				else if (buttonRect.bottom > containerRect.bottom - margin) {
-					const scrollAmount = buttonRect.bottom - containerRect.bottom + margin;
-					bodyElement.scrollBy({ top: scrollAmount, behavior: 'smooth' });
-				}
-			}
-		}
-	}
-
-	// Skip animation and show all content instantly
-	let skipRequested = $state(false);
-	
 	function skipAnimation() {
-		if (!isTyping) return;
+		skipTypingAnimation(
-		skipRequested = true;
+			parsedLines,
-		
+			buttonIndices,
-		displayedLines = parsedLines.map(parsed => ({
+			interactive,
-			parsed,
+			() => ({ displayedLines, currentLineIndex, isTyping, isComplete, skipRequested, selectedIndex }),
-			charIndex: parsed.plainText.length,
+			(updates) => {
-			complete: true,
+				if (updates.displayedLines !== undefined) displayedLines = updates.displayedLines;
-			showImage: parsed.line.type === 'image'
+				if (updates.currentLineIndex !== undefined) currentLineIndex = updates.currentLineIndex;
-		}));
+				if (updates.isTyping !== undefined) isTyping = updates.isTyping;
-		
+				if (updates.isComplete !== undefined) isComplete = updates.isComplete;
-		isTyping = false;
+				if (updates.skipRequested !== undefined) skipRequested = updates.skipRequested;
-		isComplete = true;
+				if (updates.selectedIndex !== undefined) selectedIndex = updates.selectedIndex;
-		currentLineIndex = parsedLines.length - 1;
+			},
-		
+			() => bodyElement,
-		if (interactive && buttonIndices.length > 0) {
+			autoscroll,
-			selectedIndex = buttonIndices[0];
+			onComplete
-		}
+		);
-		
-		scrollToBottom();
-		onComplete?.();
 	}
 
-	function handleKeydown(event: KeyboardEvent) {
+	// ========================================================================
-		if (isTyping && (event.key === 'y' || event.key === 'Y')) {
+	// TERMINAL API
-			event.preventDefault();
+	// ========================================================================
-			skipAnimation();
-			return;
-		}
 
-		if (!interactive || !isComplete || buttonIndices.length === 0) return;
+	terminal = createTerminalAPI({
+		getState: () => ({
+			lines,
+			displayedLines,
+			isTyping,
+			isComplete,
+			currentLineIndex,
+			selectedIndex,
+			skipRequested
+		}),
+		setState: (updates) => {
+			if (updates.lines !== undefined) lines = updates.lines;
+			if (updates.displayedLines !== undefined) displayedLines = updates.displayedLines;
+			if (updates.isTyping !== undefined) isTyping = updates.isTyping;
+			if (updates.isComplete !== undefined) isComplete = updates.isComplete;
+			if (updates.currentLineIndex !== undefined) currentLineIndex = updates.currentLineIndex;
+			if (updates.selectedIndex !== undefined) selectedIndex = updates.selectedIndex;
+			if (updates.skipRequested !== undefined) skipRequested = updates.skipRequested;
+		},
+		getColorMap: () => colorMap,
+		getBodyElement: () => bodyElement,
+		typeText
+	});
 
-		const currentButtonIdx = buttonIndices.indexOf(selectedIndex);
+	// ========================================================================
+	// KEYBOARD HANDLING
+	// ========================================================================
 
-		if (event.key === 'ArrowDown' || event.key === 'j') {
+	const handleKeydown = createKeyboardHandler({
-			event.preventDefault();
+		getIsTyping: () => isTyping,
-			const nextIdx = (currentButtonIdx + 1) % buttonIndices.length;
+		getIsComplete: () => isComplete,
-			selectedIndex = buttonIndices[nextIdx];
+		getInteractive: () => interactive,
-			scrollToSelected();
+		getButtonIndices: () => buttonIndices,
-		} else if (event.key === 'ArrowUp' || event.key === 'k') {
+		getSelectedIndex: () => selectedIndex,
-			event.preventDefault();
+		setSelectedIndex: (index) => { selectedIndex = index; },
-			const prevIdx = (currentButtonIdx - 1 + buttonIndices.length) % buttonIndices.length;
+		getDisplayedLines: () => displayedLines,
-			selectedIndex = buttonIndices[prevIdx];
+		getBodyElement: () => bodyElement,
-			scrollToSelected();
+		skipAnimation,
-		} else if (event.key === 'Enter') {
+		scrollMargin: terminalSettings.scrollMargin
-			event.preventDefault();
+	});
-			const selectedLine = displayedLines[selectedIndex]?.parsed.line;
-			if (selectedLine?.action) {
-				selectedLine.action();
-			} else if (selectedLine?.href) {
-				const isExternal = selectedLine.external || selectedLine.href.startsWith('http://') || selectedLine.href.startsWith('https://');
-				if (isExternal) {
-					window.open(selectedLine.href, '_blank', 'noopener,noreferrer');
-				} else {
-					window.location.href = selectedLine.href;
-				}
-			}
-		}
-	}
 
 	function handleButtonClick(index: number) {
 		selectedIndex = index;
-		const line = displayedLines[index]?.parsed.line;
+		handleNavigation(displayedLines[index]?.parsed.line);
-		if (line?.action) {
-			line.action();
-		} else if (line?.href) {
-			const isExternal = line.external || line.href.startsWith('http://') || line.href.startsWith('https://');
-			if (isExternal) {
-				window.open(line.href, '_blank', 'noopener,noreferrer');
-			} else {
-				window.location.href = line.href;
-			}
-		}
 	}
 
 	function handleLinkClick(index: number) {
-		const line = displayedLines[index]?.parsed.line;
+		handleNavigation(displayedLines[index]?.parsed.line);
-		if (line?.action) {
-			line.action();
-		} else if (line?.href) {
-			const isExternal = line.external || line.href.startsWith('http://') || line.href.startsWith('https://');
-			if (isExternal) {
-				window.open(line.href, '_blank', 'noopener,noreferrer');
-			} else {
-				window.location.href = line.href;
-			}
-		}
 	}
 
 	onMount(() => {

src/lib/components/tui/terminal-api.ts

@@ -0,0 +1,245 @@
+/**
+ * Terminal API Factory
+ * 
+ * Creates a reactive API for manipulating terminal content programmatically.
+ * Use this with TerminalTUI's bindable `terminal` prop.
+ */
+
+import type { TerminalLine, ParsedLine, DisplayedLine, TerminalAPI } from './types';
+import { parseColorText, getPlainText } from './utils';
+import type { ThemeColorMap } from './utils';
+
+export interface TerminalState {
+	lines: TerminalLine[];
+	displayedLines: DisplayedLine[];
+	isTyping: boolean;
+	isComplete: boolean;
+	currentLineIndex: number;
+	selectedIndex: number;
+	skipRequested: boolean;
+}
+
+export interface TerminalAPIOptions {
+	getState: () => TerminalState;
+	setState: (updates: Partial<TerminalState>) => void;
+	getColorMap: () => ThemeColorMap;
+	getBodyElement: () => HTMLDivElement | undefined;
+	typeText: () => void;
+}
+
+/**
+ * Parse a single terminal line into segments
+ */
+export function parseLine(line: TerminalLine, colorMap: ThemeColorMap): ParsedLine {
+	const segments = parseColorText(line.content, colorMap);
+	return {
+		line,
+		segments,
+		plainText: getPlainText(segments)
+	};
+}
+
+/**
+ * Create a terminal API instance
+ */
+export function createTerminalAPI(options: TerminalAPIOptions): TerminalAPI {
+	const { getState, setState, getColorMap, getBodyElement, typeText } = options;
+
+	function refreshDisplayedLines() {
+		const state = getState();
+		const colorMap = getColorMap();
+		const displayedLines = state.lines.map((line, i) => {
+			const parsed = parseLine(line, colorMap);
+			return {
+				parsed,
+				charIndex: parsed.plainText.length,
+				complete: true,
+				showImage: state.displayedLines[i]?.showImage ?? (line.type === 'image')
+			};
+		});
+		setState({ displayedLines, lines: [...state.lines] });
+	}
+
+	function apiScrollToBottom() {
+		const bodyElement = getBodyElement();
+		if (!bodyElement) return;
+		bodyElement.scrollTo({
+			top: bodyElement.scrollHeight,
+			behavior: 'smooth'
+		});
+	}
+
+	function apiScrollToLine(index: number) {
+		const bodyElement = getBodyElement();
+		if (!bodyElement) return;
+		const lineElements = bodyElement.querySelectorAll('.tui-line');
+		const target = lineElements[index] as HTMLElement | undefined;
+		if (target) {
+			target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+		}
+	}
+
+	return {
+		clear: () => {
+			setState({
+				lines: [],
+				displayedLines: [],
+				isComplete: true,
+				isTyping: false
+			});
+		},
+
+		write: (line: TerminalLine) => {
+			const state = getState();
+			const colorMap = getColorMap();
+			const parsed = parseLine(line, colorMap);
+			setState({
+				lines: [...state.lines, line],
+				displayedLines: [...state.displayedLines, {
+					parsed,
+					charIndex: parsed.plainText.length,
+					complete: true,
+					showImage: line.type === 'image'
+				}]
+			});
+			setTimeout(apiScrollToBottom, 10);
+		},
+
+		writeLines: (newLines: TerminalLine[]) => {
+			const state = getState();
+			const colorMap = getColorMap();
+			const newDisplayed = newLines.map(line => {
+				const parsed = parseLine(line, colorMap);
+				return {
+					parsed,
+					charIndex: parsed.plainText.length,
+					complete: true,
+					showImage: line.type === 'image'
+				};
+			});
+			setState({
+				lines: [...state.lines, ...newLines],
+				displayedLines: [...state.displayedLines, ...newDisplayed]
+			});
+			setTimeout(apiScrollToBottom, 10);
+		},
+
+		update: (index: number, updates: Partial<TerminalLine>) => {
+			const state = getState();
+			if (index < 0 || index >= state.lines.length) return;
+			state.lines[index] = { ...state.lines[index], ...updates };
+			refreshDisplayedLines();
+		},
+
+		updateContent: (index: number, content: string) => {
+			const state = getState();
+			if (index < 0 || index >= state.lines.length) return;
+			state.lines[index] = { ...state.lines[index], content };
+			refreshDisplayedLines();
+		},
+
+		insert: (index: number, line: TerminalLine) => {
+			const state = getState();
+			const clampedIndex = Math.max(0, Math.min(index, state.lines.length));
+			setState({
+				lines: [...state.lines.slice(0, clampedIndex), line, ...state.lines.slice(clampedIndex)]
+			});
+			refreshDisplayedLines();
+		},
+
+		remove: (index: number) => {
+			const state = getState();
+			if (index < 0 || index >= state.lines.length) return;
+			setState({
+				lines: [...state.lines.slice(0, index), ...state.lines.slice(index + 1)]
+			});
+			refreshDisplayedLines();
+		},
+
+		removeRange: (startIndex: number, count: number) => {
+			const state = getState();
+			if (startIndex < 0 || startIndex >= state.lines.length) return;
+			setState({
+				lines: [...state.lines.slice(0, startIndex), ...state.lines.slice(startIndex + count)]
+			});
+			refreshDisplayedLines();
+		},
+
+		setLines: (newLines: TerminalLine[]) => {
+			setState({ lines: [...newLines] });
+			refreshDisplayedLines();
+		},
+
+		getLineCount: () => getState().lines.length,
+
+		getLine: (index: number) => getState().lines[index],
+
+		getLines: () => [...getState().lines],
+
+		findById: (id: string) => getState().lines.findIndex(line => line.id === id),
+
+		updateById: (id: string, updates: Partial<TerminalLine>) => {
+			const state = getState();
+			const index = state.lines.findIndex(line => line.id === id);
+			if (index !== -1) {
+				state.lines[index] = { ...state.lines[index], ...updates };
+				refreshDisplayedLines();
+			}
+		},
+
+		removeById: (id: string) => {
+			const state = getState();
+			const index = state.lines.findIndex(line => line.id === id);
+			if (index !== -1) {
+				setState({
+					lines: [...state.lines.slice(0, index), ...state.lines.slice(index + 1)]
+				});
+				refreshDisplayedLines();
+			}
+		},
+
+		scrollToBottom: apiScrollToBottom,
+
+		scrollToLine: apiScrollToLine,
+
+		isAnimating: () => getState().isTyping,
+
+		skip: () => {
+			const state = getState();
+			if (!state.isTyping) return;
+			
+			const colorMap = getColorMap();
+			const displayedLines = state.lines.map(line => {
+				const parsed = parseLine(line, colorMap);
+				return {
+					parsed,
+					charIndex: parsed.plainText.length,
+					complete: true,
+					showImage: line.type === 'image'
+				};
+			});
+
+			setState({
+				skipRequested: true,
+				displayedLines,
+				isTyping: false,
+				isComplete: true,
+				currentLineIndex: state.lines.length - 1
+			});
+
+			apiScrollToBottom();
+		},
+
+		restart: () => {
+			setState({
+				displayedLines: [],
+				currentLineIndex: 0,
+				isTyping: false,
+				isComplete: false,
+				skipRequested: false,
+				selectedIndex: -1
+			});
+			typeText();
+		}
+	};
+}

src/lib/components/tui/terminal-keyboard.ts

@@ -0,0 +1,148 @@
+/**
+ * Terminal Keyboard Handler
+ * 
+ * Handles keyboard navigation and interaction for the terminal.
+ */
+
+import type { DisplayedLine } from './types';
+import { browser } from '$app/environment';
+
+export interface KeyboardHandlerOptions {
+	getIsTyping: () => boolean;
+	getIsComplete: () => boolean;
+	getInteractive: () => boolean;
+	getButtonIndices: () => number[];
+	getSelectedIndex: () => number;
+	setSelectedIndex: (index: number) => void;
+	getDisplayedLines: () => DisplayedLine[];
+	getBodyElement: () => HTMLDivElement | undefined;
+	skipAnimation: () => void;
+	scrollMargin?: number;
+}
+
+/**
+ * Scroll selected button into view with margin for context
+ */
+export function scrollToSelected(
+	bodyElement: HTMLDivElement | undefined,
+	selectedIndex: number,
+	displayedLines: DisplayedLine[],
+	scrollMargin: number = 80
+): void {
+	if (!bodyElement || selectedIndex < 0) return;
+
+	const buttons = bodyElement.querySelectorAll('.tui-button');
+	const btnIndices = displayedLines
+		.map((item, idx) => item.parsed.line.type === 'button' ? idx : -1)
+		.filter(idx => idx !== -1);
+
+	const selectedButton = Array.from(buttons).find((_, i) => {
+		return btnIndices[i] === selectedIndex;
+	}) as HTMLElement | undefined;
+
+	if (selectedButton && bodyElement) {
+		const containerRect = bodyElement.getBoundingClientRect();
+		const buttonRect = selectedButton.getBoundingClientRect();
+
+		if (buttonRect.top < containerRect.top + scrollMargin) {
+			const scrollAmount = buttonRect.top - containerRect.top - scrollMargin;
+			bodyElement.scrollBy({ top: scrollAmount, behavior: 'smooth' });
+		} else if (buttonRect.bottom > containerRect.bottom - scrollMargin) {
+			const scrollAmount = buttonRect.bottom - containerRect.bottom + scrollMargin;
+			bodyElement.scrollBy({ top: scrollAmount, behavior: 'smooth' });
+		}
+	}
+}
+
+/**
+ * Handle button/link click navigation
+ */
+export function handleNavigation(line: { action?: () => void; href?: string; external?: boolean } | undefined): void {
+	if (!line) return;
+
+	if (line.action) {
+		line.action();
+	} else if (line.href) {
+		const isExternal = line.external || line.href.startsWith('http://') || line.href.startsWith('https://');
+		if (isExternal) {
+			window.open(line.href, '_blank', 'noopener,noreferrer');
+		} else {
+			window.location.href = line.href;
+		}
+	}
+}
+
+/**
+ * Create a keyboard event handler for the terminal
+ */
+export function createKeyboardHandler(options: KeyboardHandlerOptions) {
+	const {
+		getIsTyping,
+		getIsComplete,
+		getInteractive,
+		getButtonIndices,
+		getSelectedIndex,
+		setSelectedIndex,
+		getDisplayedLines,
+		getBodyElement,
+		skipAnimation,
+		scrollMargin = 80
+	} = options;
+
+	return function handleKeydown(event: KeyboardEvent): void {
+		// Skip animation on Y key
+		if (getIsTyping() && (event.key === 'y' || event.key === 'Y')) {
+			event.preventDefault();
+			skipAnimation();
+			return;
+		}
+
+		if (!getInteractive() || !getIsComplete()) return;
+
+		const buttonIndices = getButtonIndices();
+		if (buttonIndices.length === 0) return;
+
+		const selectedIndex = getSelectedIndex();
+		const currentButtonIdx = buttonIndices.indexOf(selectedIndex);
+		const displayedLines = getDisplayedLines();
+		const bodyElement = getBodyElement();
+
+		if (event.key === 'ArrowDown' || event.key === 'j') {
+			event.preventDefault();
+			const nextIdx = (currentButtonIdx + 1) % buttonIndices.length;
+			const newSelectedIndex = buttonIndices[nextIdx];
+			setSelectedIndex(newSelectedIndex);
+			scrollToSelected(bodyElement, newSelectedIndex, displayedLines, scrollMargin);
+		} else if (event.key === 'ArrowUp' || event.key === 'k') {
+			event.preventDefault();
+			const prevIdx = (currentButtonIdx - 1 + buttonIndices.length) % buttonIndices.length;
+			const newSelectedIndex = buttonIndices[prevIdx];
+			setSelectedIndex(newSelectedIndex);
+			scrollToSelected(bodyElement, newSelectedIndex, displayedLines, scrollMargin);
+		} else if (event.key === 'Enter') {
+			event.preventDefault();
+			const selectedLine = displayedLines[selectedIndex]?.parsed.line;
+			handleNavigation(selectedLine);
+		}
+	};
+}
+
+/**
+ * Scroll to hash target (anchor link like #skills)
+ */
+export function scrollToHash(bodyElement: HTMLDivElement | undefined): void {
+	if (!browser || !bodyElement) return;
+
+	const hash = window.location.hash;
+	if (!hash) return;
+
+	const targetId = hash.slice(1); // Remove the #
+	const targetElement = bodyElement.querySelector(`#${CSS.escape(targetId)}`);
+
+	if (targetElement) {
+		// Small delay to ensure layout is complete
+		setTimeout(() => {
+			targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+		}, 100);
+	}
+}

src/lib/components/tui/terminal-typing.ts

@@ -0,0 +1,222 @@
+/**
+ * Terminal Typing Animation Engine
+ * 
+ * Handles the character-by-character typing animation for terminal lines.
+ */
+
+import type { ParsedLine, DisplayedLine } from './types';
+import type { TerminalSettings } from '$lib/config';
+import { calculateTypeSpeed } from '$lib';
+
+export interface TypingState {
+	displayedLines: DisplayedLine[];
+	currentLineIndex: number;
+	isTyping: boolean;
+	isComplete: boolean;
+	skipRequested: boolean;
+	selectedIndex: number;
+}
+
+export interface TypingOptions {
+	parsedLines: ParsedLine[];
+	speedMultiplier: number;
+	terminalSettings: TerminalSettings;
+	buttonIndices: number[];
+	interactive: boolean;
+	autoscroll: boolean;
+	getBodyElement: () => HTMLDivElement | undefined;
+	getState: () => TypingState;
+	setState: (updates: Partial<TypingState>) => void;
+	onComplete?: () => void;
+	scrollToHash: () => void;
+}
+
+function sleep(ms: number): Promise<void> {
+	return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+/**
+ * Scroll terminal body to bottom
+ */
+function scrollToBottom(bodyElement: HTMLDivElement | undefined, autoscroll: boolean) {
+	if (!autoscroll || !bodyElement) return;
+	bodyElement.scrollTo({
+		top: bodyElement.scrollHeight,
+		behavior: 'smooth'
+	});
+}
+
+/**
+ * Run the typing animation for all lines
+ */
+export async function runTypingAnimation(options: TypingOptions): Promise<void> {
+	const {
+		parsedLines,
+		speedMultiplier,
+		terminalSettings,
+		buttonIndices,
+		interactive,
+		autoscroll,
+		getBodyElement,
+		getState,
+		setState,
+		onComplete,
+		scrollToHash
+	} = options;
+
+	if (parsedLines.length === 0) return;
+
+	setState({ isTyping: true });
+
+	// Apply speed multiplier to start delay
+	const startDelayMs = speedMultiplier === 0 ? 0 : terminalSettings.startDelay * speedMultiplier;
+	await sleep(startDelayMs);
+	if (getState().skipRequested) return;
+
+	for (let i = 0; i < parsedLines.length; i++) {
+		const state = getState();
+		if (state.skipRequested) return;
+
+		const parsed = parsedLines[i];
+		const line = parsed.line;
+		const plainLength = parsed.plainText.length;
+
+		// Add new line to displayed lines
+		const currentDisplayed = [...state.displayedLines, { parsed, charIndex: 0, complete: false, showImage: false }];
+		setState({ displayedLines: currentDisplayed, currentLineIndex: i });
+
+		if (line.delay && speedMultiplier > 0) {
+			await sleep(line.delay * speedMultiplier);
+			if (getState().skipRequested) return;
+		}
+
+		const bodyElement = getBodyElement();
+
+		// Handle different line types
+		if (line.type === 'image') {
+			await sleep(speedMultiplier === 0 ? 0 : 100 * speedMultiplier);
+			if (getState().skipRequested) return;
+			updateDisplayedLine(i, { parsed, charIndex: plainLength, complete: true, showImage: true }, getState, setState);
+			scrollToBottom(bodyElement, autoscroll);
+		} else if (line.type === 'blank' || line.type === 'divider') {
+			updateDisplayedLine(i, { parsed, charIndex: plainLength, complete: true, showImage: false }, getState, setState);
+		} else if (line.type === 'button') {
+			// Buttons appear instantly
+			updateDisplayedLine(i, { parsed, charIndex: plainLength, complete: true, showImage: false }, getState, setState);
+			scrollToBottom(bodyElement, autoscroll);
+		} else if (speedMultiplier === 0) {
+			// Instant mode - no typing animation
+			updateDisplayedLine(i, { parsed, charIndex: plainLength, complete: true, showImage: false }, getState, setState);
+			if (i % 5 === 0) scrollToBottom(bodyElement, autoscroll);
+		} else if (line.type === 'header') {
+			const typeSpeed = calculateTypeSpeed(plainLength, speedMultiplier * 0.25);
+			for (let j = 0; j <= plainLength; j++) {
+				if (getState().skipRequested) return;
+				updateDisplayedLine(i, {
+					parsed,
+					charIndex: j,
+					complete: j === plainLength,
+					showImage: false
+				}, getState, setState);
+				if (j < plainLength) await sleep(typeSpeed);
+			}
+			scrollToBottom(bodyElement, autoscroll);
+		} else {
+			const typeSpeed = calculateTypeSpeed(plainLength, speedMultiplier);
+
+			for (let j = 0; j <= plainLength; j++) {
+				if (getState().skipRequested) return;
+				updateDisplayedLine(i, {
+					parsed,
+					charIndex: j,
+					complete: j === plainLength,
+					showImage: false
+				}, getState, setState);
+
+				if (j % 10 === 0) scrollToBottom(bodyElement, autoscroll);
+
+				if (j < plainLength) {
+					await sleep(typeSpeed);
+				}
+			}
+		}
+
+		if (getState().skipRequested) return;
+
+		// Mark line as complete
+		const finalState = getState();
+		const updatedLines = [...finalState.displayedLines];
+		if (updatedLines[i]) {
+			updatedLines[i].complete = true;
+			setState({ displayedLines: updatedLines });
+		}
+
+		scrollToBottom(bodyElement, autoscroll);
+
+		if (i < parsedLines.length - 1 && speedMultiplier > 0) {
+			await sleep(terminalSettings.lineDelay * speedMultiplier);
+		}
+	}
+
+	setState({ isTyping: false, isComplete: true });
+
+	if (interactive && buttonIndices.length > 0) {
+		setState({ selectedIndex: buttonIndices[0] });
+	}
+
+	// Scroll to hash anchor if present in URL
+	scrollToHash();
+
+	onComplete?.();
+}
+
+/**
+ * Update a single displayed line at index
+ */
+function updateDisplayedLine(
+	index: number,
+	update: DisplayedLine,
+	getState: () => TypingState,
+	setState: (updates: Partial<TypingState>) => void
+) {
+	const state = getState();
+	const updatedLines = [...state.displayedLines];
+	updatedLines[index] = update;
+	setState({ displayedLines: updatedLines });
+}
+
+/**
+ * Skip animation and show all content instantly
+ */
+export function skipTypingAnimation(
+	parsedLines: ParsedLine[],
+	buttonIndices: number[],
+	interactive: boolean,
+	getState: () => TypingState,
+	setState: (updates: Partial<TypingState>) => void,
+	getBodyElement: () => HTMLDivElement | undefined,
+	autoscroll: boolean,
+	onComplete?: () => void
+): void {
+	const state = getState();
+	if (!state.isTyping) return;
+
+	const displayedLines = parsedLines.map(parsed => ({
+		parsed,
+		charIndex: parsed.plainText.length,
+		complete: true,
+		showImage: parsed.line.type === 'image'
+	}));
+
+	setState({
+		skipRequested: true,
+		displayedLines,
+		isTyping: false,
+		isComplete: true,
+		currentLineIndex: parsedLines.length - 1,
+		selectedIndex: interactive && buttonIndices.length > 0 ? buttonIndices[0] : -1
+	});
+
+	scrollToBottom(getBodyElement(), autoscroll);
+	onComplete?.();
+}

src/lib/components/tui/types.ts

@@ -15,6 +15,50 @@ export interface FormOption {
 	disabled?: boolean;
 }
 
+// Terminal API for reactive manipulation
+export interface TerminalAPI {
+	/** Clear all lines from the terminal */
+	clear: () => void;
+	/** Write a new line to the terminal (appends) */
+	write: (line: TerminalLine) => void;
+	/** Write multiple lines to the terminal (appends) */
+	writeLines: (lines: TerminalLine[]) => void;
+	/** Update a specific line by index */
+	update: (index: number, line: Partial<TerminalLine>) => void;
+	/** Update a line's content by index */
+	updateContent: (index: number, content: string) => void;
+	/** Insert a line at a specific index */
+	insert: (index: number, line: TerminalLine) => void;
+	/** Remove a line by index */
+	remove: (index: number) => void;
+	/** Remove lines by range */
+	removeRange: (startIndex: number, count: number) => void;
+	/** Replace all lines */
+	setLines: (lines: TerminalLine[]) => void;
+	/** Get current line count */
+	getLineCount: () => number;
+	/** Get a line by index */
+	getLine: (index: number) => TerminalLine | undefined;
+	/** Get all lines */
+	getLines: () => TerminalLine[];
+	/** Find line index by id */
+	findById: (id: string) => number;
+	/** Update a line by its id */
+	updateById: (id: string, line: Partial<TerminalLine>) => void;
+	/** Remove a line by its id */
+	removeById: (id: string) => void;
+	/** Scroll to bottom */
+	scrollToBottom: () => void;
+	/** Scroll to a specific line index */
+	scrollToLine: (index: number) => void;
+	/** Check if terminal is currently animating */
+	isAnimating: () => boolean;
+	/** Skip current animation */
+	skip: () => void;
+	/** Restart the typing animation */
+	restart: () => void;
+}
+
 export interface TerminalLine {
 	type: LineType;
 	content: string;

src/lib/config/index.ts

@@ -30,7 +30,7 @@ export type { Project, Model3D, Card } from './content';
 export { projects, models, cards, sortedCards } from './content';
 
 // Terminal settings, TUI styling, speed presets, model viewer, particles, shortcuts
-export type { SpeedPreset } from './terminal';
+export type { SpeedPreset, TerminalSettings } from './terminal';
 export {
 	terminalSettings,
 	tuiStyle,

src/lib/config/terminal.ts

@@ -4,7 +4,19 @@
 
 export type SpeedPreset = 'instant' | 'fast' | 'normal' | 'slow' | 'typewriter';
 
-export const terminalSettings = {
+export interface TerminalSettings {
+	baseTypeSpeed: number;
+	minTypeSpeed: number;
+	maxTypeSpeed: number;
+	startDelay: number;
+	lineDelay: number;
+	showCursor: boolean;
+	promptStyle: 'full' | 'short' | 'minimal';
+	icon: string;
+	scrollMargin: number;
+}
+
+export const terminalSettings: TerminalSettings = {
 	// Base typing speed in ms per character (will be adjusted by content length)
 	baseTypeSpeed: 20,
 	// Minimum typing speed (fastest)
@@ -18,7 +30,7 @@ export const terminalSettings = {
 	// Show cursor
 	showCursor: true,
 	// Prompt style
-	promptStyle: 'full' as 'full' | 'short' | 'minimal',
+	promptStyle: 'full',
 	// Terminal icon (emoji or text)
 	icon: '🐧',
 	// Scroll margin when navigating buttons (px)

src/lib/index.ts

@@ -75,3 +75,6 @@ export function getPrompt(path: string = '~'): string {
 
 // Barrel exports (convenience re-exports)
 export { user, terminalSettings, pageSpeedSettings, speedPresets, pageAutoscrollSettings, pageMeta, site } from './config';
+
+// Export terminal types
+export type { TerminalAPI, TerminalLine, LineType, ParsedLine, DisplayedLine } from './components/tui/types';

src/lib/pages/components.ts

@@ -514,6 +514,66 @@ export const lines: TerminalLine[] = [
     { type: 'output', content: "{ type: 'select', content: 'Choose:', selectOptions: [{ value: 'a', label: 'Option A' }] }" },
     { type: 'blank', content: '' },
 
+    // ═══════════════════════════════════════════════════════════════
+    // TERMINAL API
+    // ═══════════════════════════════════════════════════════════════
+    { type: 'divider', content: 'TERMINAL API', id: 'terminal-api' },
+    { type: 'blank', content: '' },
+    
+    { type: 'info', content: '(&blue,bold)Reactive Terminal Control(&)' },
+    { type: 'output', content: 'The (&cyan)TerminalAPI(&) allows programmatic control of terminal content.' },
+    { type: 'output', content: 'Use (&primary)bind:terminal(&) to access the API from your component.' },
+    { type: 'blank', content: '' },
+    
+    { type: 'info', content: '(&blue,bold)Writing Lines(&)' },
+    { type: 'output', content: "(&muted)terminal.write({ type: 'output', content: 'Hello!' })(&)  (&dim)// Append line(&)" },
+    { type: 'output', content: "(&muted)terminal.writeLines([...lines])(&)                       (&dim)// Append multiple(&)" },
+    { type: 'output', content: "(&muted)terminal.clear()(&)                                      (&dim)// Clear all(&)" },
+    { type: 'output', content: "(&muted)terminal.setLines([...lines])(&)                         (&dim)// Replace all(&)" },
+    { type: 'blank', content: '' },
+    
+    { type: 'info', content: '(&blue,bold)Updating Lines(&)' },
+    { type: 'output', content: "(&muted)terminal.update(0, { content: 'New text' })(&)           (&dim)// Update by index(&)" },
+    { type: 'output', content: "(&muted)terminal.updateContent(0, 'New text')(&)                 (&dim)// Update content only(&)" },
+    { type: 'output', content: "(&muted)terminal.updateById('my-id', { content: 'New' })(&)      (&dim)// Update by ID(&)" },
+    { type: 'blank', content: '' },
+    
+    { type: 'info', content: '(&blue,bold)Removing Lines(&)' },
+    { type: 'output', content: "(&muted)terminal.remove(0)(&)                                    (&dim)// Remove by index(&)" },
+    { type: 'output', content: "(&muted)terminal.removeRange(0, 3)(&)                            (&dim)// Remove range(&)" },
+    { type: 'output', content: "(&muted)terminal.removeById('my-id')(&)                          (&dim)// Remove by ID(&)" },
+    { type: 'blank', content: '' },
+    
+    { type: 'info', content: '(&blue,bold)Navigation & Control(&)' },
+    { type: 'output', content: "(&muted)terminal.scrollToBottom()(&)                             (&dim)// Scroll to end(&)" },
+    { type: 'output', content: "(&muted)terminal.scrollToLine(5)(&)                              (&dim)// Scroll to line(&)" },
+    { type: 'output', content: "(&muted)terminal.skip()(&)                                       (&dim)// Skip animation(&)" },
+    { type: 'output', content: "(&muted)terminal.restart()(&)                                    (&dim)// Restart animation(&)" },
+    { type: 'blank', content: '' },
+    
+    { type: 'info', content: '(&blue,bold)Reading State(&)' },
+    { type: 'output', content: "(&muted)terminal.getLine(0)(&)                                   (&dim)// Get line by index(&)" },
+    { type: 'output', content: "(&muted)terminal.getLines()(&)                                   (&dim)// Get all lines(&)" },
+    { type: 'output', content: "(&muted)terminal.getLineCount()(&)                               (&dim)// Get count(&)" },
+    { type: 'output', content: "(&muted)terminal.findById('my-id')(&)                            (&dim)// Find index by ID(&)" },
+    { type: 'output', content: "(&muted)terminal.isAnimating()(&)                                (&dim)// Check if typing(&)" },
+    { type: 'blank', content: '' },
+    
+    { type: 'info', content: '(&blue,bold)Usage Example(&)' },
+    { type: 'output', content: "(&dim)// In your Svelte component:(&)" },
+    { type: 'output', content: "(&cyan)import(&) TerminalTUI (&cyan)from(&) '(&green)$lib/components/TerminalTUI.svelte(&)';" },
+    { type: 'output', content: "(&cyan)import type(&) { TerminalAPI } (&cyan)from(&) '(&green)$lib(&)';" },
+    { type: 'output', content: "" },
+    { type: 'output', content: "(&magenta)let(&) terminal = (&yellow)$state(&)<TerminalAPI>();" },
+    { type: 'output', content: "(&magenta)let(&) lines = (&yellow)$state(&)([{ type: '(&green)output(&)', content: '(&green)Hello!(&)' }]);" },
+    { type: 'output', content: "" },
+    { type: 'output', content: "(&dim)// In template:(&)" },
+    { type: 'output', content: "<TerminalTUI (&cyan)bind:terminal(&) (&cyan)bind:lines(&) />" },
+    { type: 'output', content: "" },
+    { type: 'output', content: "(&dim)// Then use the API:(&)" },
+    { type: 'output', content: "terminal?.write({ type: '(&green)success(&)', content: '(&green)Done!(&)' });" },
+    { type: 'blank', content: '' },
+
     // End
     { type: 'success', content: '(&success)Component showcase complete!(&)' }
 ];

src/routes/components/+page.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <svelte:head>
-	<title>Components | {user.name}</title>
+	<title>Components | {user.displayname}</title>
 	<meta name="description" content="Terminal UI Components Showcase" />
 </svelte:head>
 

src/routes/models/+page.svelte

@@ -61,7 +61,7 @@
 </script>
 
 <svelte:head>
-	<title>3D Models | {user.name}</title>
+	<title>3D Models | {user.displayname}</title>
 	<meta name="description" content="3D Models portfolio - Characters, Environments, Props and more" />
 </svelte:head>
 

src/routes/projects/+page.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <svelte:head>
-	<title>Projects | {user.name}</title>
+	<title>Projects | {user.displayname}</title>
 	<meta name="description" content="Hackathon projects and achievements" />
 </svelte:head>