TUI Renderer, Element Types, and Page Updates

2025-11-30 18:26:56 -05:00
parent f09c198f17
commit 1167c686e2
31 changed files with 1642 additions and 809 deletions
--- a/README.md
+++ b/README.md
@@ -307,6 +307,10 @@ Supported inline types: `button`, `link`, `tooltip`, `progress`, `output`, `info
  icon: 'mdi:star',             // Optional header icon
  image: '/path/to/image.png',  // Optional card image
  style: 'primary',             // Border accent color
+  display: 'flex',              // flex | grid | block (controls children layout)
+  children: [                   // Optional nested elements
+    { type: 'button', content: 'Action', style: 'primary' }
+  ]
 }
 ```

--- a/src/lib/assets/css/tui-accordion.css
+++ b/src/lib/assets/css/tui-accordion.css
@@ -5,6 +5,14 @@
 	overflow: hidden;
 }

+.tui-accordion.inline {
+	display: inline-block;
+	width: auto;
+	min-width: 200px;
+	vertical-align: top;
+	margin: 0 0.5rem 0 0;
+}
+
 .accordion-item {
 	border-bottom: 1px solid var(--terminal-border);
 }
@@ -62,8 +70,9 @@
 		opacity: 0;
 		transform: translateY(-5px);
 	}
+
 	to {
 		opacity: 1;
 		transform: translateY(0);
 	}
-}
+}
--- a/src/lib/assets/css/tui-card-grid.css
+++ b/src/lib/assets/css/tui-card-grid.css
@@ -6,6 +6,16 @@
 	width: 100%;
 }

+.tui-card-grid.inline {
+	display: inline-flex;
+	flex-wrap: wrap;
+	width: auto;
+	gap: 0.5rem;
+	vertical-align: top;
+	padding: 0;
+	margin: 0 0.5rem 0 0;
+}
+
 .tui-card {
 	background: var(--terminal-bg);
 	border: 1px solid var(--terminal-border);
@@ -219,4 +229,4 @@
 	.tui-card-grid {
 		grid-template-columns: 1fr;
 	}
-}
+}
--- a/src/lib/assets/css/tui-card.css
+++ b/src/lib/assets/css/tui-card.css
@@ -1,58 +1,46 @@
 .tui-card {
 	border: 1px solid var(--terminal-border);
-	border-radius: 6px;
-	background: color-mix(in srgb, var(--terminal-bg) 80%, var(--card-accent) 5%);
+	border-left: 3px solid var(--card-color);
+	background: color-mix(in srgb, var(--terminal-bg) 50%, var(--terminal-bg-light));
+	border-radius: 4px;
+	padding: 0.75rem 1rem;
 	margin: 0.5rem 0;
-	overflow: hidden;
-	transition: border-color 0.2s ease;
+	max-width: 600px;
 }

-.tui-card:hover {
-	border-color: var(--card-accent);
-}
-
-.card-header {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	padding: 0.6rem 0.75rem;
-	border-bottom: 1px solid var(--terminal-border);
-	background: rgba(0, 0, 0, 0.1);
-}
-
-:global(.card-icon) {
-	color: var(--card-accent);
+.tui-card.inline {
+	display: inline-block;
+	width: auto;
+	margin: 0 0.5rem 0 0;
+	vertical-align: top;
 }

 .card-title {
-	font-weight: 600;
-	color: var(--terminal-text);
-	font-size: 0.85rem;
-}
-
-.card-body {
-	padding: 0.75rem;
-}
-
-.card-image {
-	width: 100%;
-	max-height: 200px;
-	object-fit: cover;
-	border-radius: 4px;
+	color: var(--card-color);
+	font-weight: bold;
 	margin-bottom: 0.5rem;
+	font-size: 1rem;
 }

 .card-content {
-	color: var(--terminal-muted);
-	font-size: 0.85rem;
+	color: var(--terminal-text);
+	font-size: 0.9rem;
 	line-height: 1.5;
-	white-space: pre-wrap;
 }

 .card-footer {
-	padding: 0.5rem 0.75rem;
-	border-top: 1px solid var(--terminal-border);
-	font-size: 0.75rem;
+	margin-top: 0.75rem;
+	padding-top: 0.5rem;
+	border-top: 1px dashed var(--terminal-border);
 	color: var(--terminal-muted);
-	background: rgba(0, 0, 0, 0.05);
+	font-size: 0.8rem;
+}
+
+/* Mobile: inline cards become full-width */
+@media (max-width: 768px) {
+	.tui-card.inline {
+		display: block;
+		width: 100%;
+		margin: 0.5rem 0;
+	}
 }
--- a/src/lib/assets/css/tui-table.css
+++ b/src/lib/assets/css/tui-table.css
@@ -5,6 +5,13 @@
 	overflow: hidden;
 }

+.tui-table-wrapper.inline {
+	display: inline-block;
+	width: auto;
+	vertical-align: top;
+	margin: 0 0.5rem 0 0;
+}
+
 .table-title {
 	padding: 0.5rem 0.75rem;
 	font-weight: 600;
@@ -46,4 +53,4 @@ tr.alt {

 tr:hover {
 	background: color-mix(in srgb, var(--table-accent) 5%, transparent);
-}
+}
--- a/src/lib/components/tui/TuiAccordion.svelte
+++ b/src/lib/components/tui/TuiAccordion.svelte
@@ -1,34 +1,55 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
-	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
-	import { themeColors } from '$lib/stores/theme';
-	import type { TerminalLine } from './types';
-	import '$lib/assets/css/tui-accordion.css';
+	import Icon from "@iconify/svelte";
+	import { getButtonStyle, parseColorText, getSegmentStyle } from "./utils";
+	import { themeColors } from "$lib/stores/theme";
+	import type { AccordionLine } from "./types";
+	import TuiLine from "./TuiLine.svelte";
+	import "$lib/assets/css/tui-accordion.css";

-	export let line: TerminalLine;
-
-	let openItems: Set<number> = new Set(line.accordionOpen ? [0] : []);
-
-	function toggleItem(index: number) {
-		if (openItems.has(index)) {
-			openItems.delete(index);
-		} else {
-			openItems.add(index);
-		}
-		openItems = openItems; // trigger reactivity
+	interface Props {
+		line: AccordionLine;
+		inline?: boolean;
 	}

-	$: items = line.accordionItems || [{ title: line.content, content: '' }];
+	let { line, inline = false }: Props = $props();
+
+	let openItems = $state(new Set(line.accordionOpen ? [0] : []));
+
+	function toggleItem(index: number) {
+		const newSet = new Set(openItems);
+		if (newSet.has(index)) {
+			newSet.delete(index);
+		} else {
+			newSet.add(index);
+		}
+		openItems = newSet;
+	}
+
+	const items = $derived(
+		line.accordionItems || [{ title: line.content, content: "" }],
+	);
+	const isSingleItemMode = $derived(
+		!line.accordionItems && line.children && line.children.length > 0,
+	);
 </script>

-<div class="tui-accordion" style="--accordion-accent: {getButtonStyle(line.style)}">
+<div
+	class="tui-accordion"
+	class:inline
+	style="--accordion-accent: {getButtonStyle(line.style)}"
+>
 	{#each items as item, i}
-		{@const contentSegments = parseColorText(item.content, $themeColors.colorMap)}
+		{@const contentSegments = parseColorText(
+			item.content,
+			$themeColors.colorMap,
+		)}
 		<div class="accordion-item" class:open={openItems.has(i)}>
-			<button class="accordion-header" on:click={() => toggleItem(i)}>
-				<Icon 
-					icon={openItems.has(i) ? 'mdi:chevron-down' : 'mdi:chevron-right'} 
-					width="16" 
+			<button class="accordion-header" onclick={() => toggleItem(i)}>
+				<Icon
+					icon={openItems.has(i)
+						? "mdi:chevron-down"
+						: "mdi:chevron-right"}
+					width="16"
 					class="accordion-icon"
 				/>
 				<span class="accordion-title">{item.title}</span>
@@ -37,11 +58,33 @@
 				<div class="accordion-content">
 					{#each contentSegments as segment}
 						{#if getSegmentStyle(segment)}
-							<span style={getSegmentStyle(segment)}>{segment.text}</span>
+							<span style={getSegmentStyle(segment)}
+								>{segment.text}</span
+							>
 						{:else}
 							{segment.text}
 						{/if}
 					{/each}
+
+					{#if isSingleItemMode && line.children}
+						<div
+							class="accordion-children"
+							class:flex={line.display === "flex"}
+							class:grid={line.display === "grid"}
+						>
+							{#each line.children as child, k}
+								<TuiLine
+									line={child}
+									index={k}
+									segments={parseColorText(child.content)}
+									complete={true}
+									showImage={true}
+									selectedIndex={-1}
+									inline={false}
+								/>
+							{/each}
+						</div>
+					{/if}
 				</div>
 			{/if}
 		</div>
@@ -108,6 +151,25 @@
 		animation: slideDown 0.2s ease-out;
 	}

+	.accordion-children {
+		margin-top: 0.5rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.accordion-children.flex {
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 1rem;
+	}
+
+	.accordion-children.grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+		gap: 1rem;
+	}
+
 	@keyframes slideDown {
 		from {
 			opacity: 0;
--- a/src/lib/components/tui/TuiBody.svelte
+++ b/src/lib/components/tui/TuiBody.svelte
@@ -1,56 +1,93 @@
 <script lang="ts">
-	import { getSegmentsUpToChar } from './utils';
-	import { user } from '$lib/config';
-	import TuiLine from './TuiLine.svelte';
-	import type { DisplayedLine } from './types';
-	import '$lib/assets/css/tui-body.css';
+	import { getSegmentsUpToChar } from "./utils";
+	import { user } from "$lib/config";
+	import TuiLine from "./TuiLine.svelte";
+	import type { DisplayedLine } from "./types";
+	import "$lib/assets/css/tui-body.css";

-	export let displayedLines: DisplayedLine[] = [];
-	export let currentLineIndex = 0;
-	export let isTyping = false;
-	export let selectedIndex = -1;
-	export let ref: HTMLDivElement | undefined;
-	export let onButtonClick: (idx: number) => void;
-	export let onHoverButton: (idx: number) => void;
-	export let onLinkClick: (idx: number) => void;
-	export let terminalSettings: { showCursor: boolean };
+	interface Props {
+		displayedLines: DisplayedLine[];
+		currentLineIndex?: number;
+		isTyping?: boolean;
+		selectedIndex?: number;
+		ref?: HTMLDivElement | undefined;
+		onButtonClick: (idx: number) => void;
+		onHoverButton: (idx: number) => void;
+		onLinkClick: (idx: number) => void;
+		terminalSettings: { showCursor: boolean };
+	}
+
+	let {
+		displayedLines = [],
+		currentLineIndex = 0,
+		isTyping = false,
+		selectedIndex = -1,
+		ref = $bindable(undefined),
+		onButtonClick,
+		onHoverButton,
+		onLinkClick,
+		terminalSettings,
+	}: Props = $props();

 	// Group consecutive inline items together
-	type ProcessedGroup = 
-		| { kind: 'single'; index: number; displayed: DisplayedLine }
-		| { kind: 'inline'; items: Array<{ index: number; displayed: DisplayedLine }> };
+	type ProcessedGroup =
+		| { kind: "single"; index: number; displayed: DisplayedLine }
+		| {
+				kind: "inline";
+				items: Array<{ index: number; displayed: DisplayedLine }>;
+		  };

-	$: processedGroups = (() => {
+	const processedGroups = $derived.by(() => {
 		const groups: ProcessedGroup[] = [];
 		let i = 0;
-		
+
 		while (i < displayedLines.length) {
 			const displayed = displayedLines[i];
-			if (displayed.parsed.line.inline) {
-				const inlineItems: Array<{ index: number; displayed: DisplayedLine }> = [];
-				while (i < displayedLines.length && displayedLines[i].parsed.line.inline) {
-					inlineItems.push({ index: i, displayed: displayedLines[i] });
+			const isInline =
+				displayed.parsed.line.inline ||
+				displayed.parsed.line.display === "inline";
+
+			if (isInline) {
+				const inlineItems: Array<{
+					index: number;
+					displayed: DisplayedLine;
+				}> = [];
+				// Collect consecutive inline items
+				while (i < displayedLines.length) {
+					const nextLine = displayedLines[i].parsed.line;
+					const nextIsInline =
+						nextLine.inline || nextLine.display === "inline";
+
+					if (!nextIsInline) break;
+
+					inlineItems.push({
+						index: i,
+						displayed: displayedLines[i],
+					});
 					i++;
 				}
-				groups.push({ kind: 'inline', items: inlineItems });
+				groups.push({ kind: "inline", items: inlineItems });
 			} else {
-				groups.push({ kind: 'single', index: i, displayed });
+				groups.push({ kind: "single", index: i, displayed });
 				i++;
 			}
 		}
 		return groups;
-	})();
+	});
 </script>

 <div class="tui-body" bind:this={ref}>
 	{#each processedGroups as group, gi (gi)}
-		{#if group.kind === 'inline'}
+		{#if group.kind === "inline"}
 			<div class="tui-inline-group">
 				{#each group.items as item (item.index)}
 					<TuiLine
 						line={item.displayed.parsed.line}
 						index={item.index}
-						segments={getSegmentsUpToChar(item.displayed.parsed.segments, item.displayed.charIndex)}
+						segments={getSegmentsUpToChar(
+							item.displayed.parsed.segments,
+							item.displayed.charIndex,
+						)}
 						complete={item.displayed.complete}
 						showImage={item.displayed.showImage}
 						{selectedIndex}
@@ -65,12 +102,19 @@
 			<TuiLine
 				line={group.displayed.parsed.line}
 				index={group.index}
-				segments={getSegmentsUpToChar(group.displayed.parsed.segments, group.displayed.charIndex)}
+				segments={getSegmentsUpToChar(
+					group.displayed.parsed.segments,
+					group.displayed.charIndex,
+				)}
 				complete={group.displayed.complete}
 				showImage={group.displayed.showImage}
 				{selectedIndex}
 				inline={false}
-				showCursor={terminalSettings.showCursor && group.index === currentLineIndex && !group.displayed.complete && isTyping && group.displayed.parsed.line.type !== 'image'}
+				showCursor={terminalSettings.showCursor &&
+					group.index === currentLineIndex &&
+					!group.displayed.complete &&
+					isTyping &&
+					group.displayed.parsed.line.type !== "image"}
 				{onButtonClick}
 				{onHoverButton}
 				{onLinkClick}
@@ -81,12 +125,14 @@
 	{#if terminalSettings.showCursor && !isTyping && displayedLines.length > 0}
 		<div class="tui-line prompt">
 			<span class="prompt">
-				<span class="user">{user.username}</span><span class="at">@</span><span class="host">{user.hostname}</span>
-				<span class="separator">:</span><span class="path">~</span><span class="symbol">$</span>
+				<span class="user">{user.username}</span><span class="at"
+					>@</span
+				><span class="host">{user.hostname}</span>
+				<span class="separator">:</span><span class="path">~</span><span
+					class="symbol">$</span
+				>
 			</span>
 			<span class="cursor"></span>
 		</div>
 	{/if}
 </div>
-
-
--- a/src/lib/components/tui/TuiButton.svelte
+++ b/src/lib/components/tui/TuiButton.svelte
@@ -2,21 +2,32 @@
 	import Icon from '@iconify/svelte';
 	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
 	import { themeColors } from '$lib/stores/theme';
-	import type { TerminalLine } from './types';
+	import type { ButtonLine } from './types';
 	import '$lib/assets/css/tui-button.css';

-	export let line: TerminalLine;
-	export let index: number;
-	export let selected: boolean;
-	export let onClick: (idx: number) => void;
-	export let onHover: (idx: number) => void;
-	export let inline: boolean = false;
+	interface Props {
+		line: ButtonLine;
+		index: number;
+		selected: boolean;
+		onClick: (idx: number) => void;
+		onHover: (idx: number) => void;
+		inline?: boolean;
+	}
+
+	let {
+		line,
+		index,
+		selected,
+		onClick,
+		onHover,
+		inline = false
+	}: Props = $props();

 	// Determine if this is an external link
-	$: isExternal = line.external || (line.href && (line.href.startsWith('http://') || line.href.startsWith('https://')));
+	const isExternal = $derived(line.external || (line.href && (line.href.startsWith('http://') || line.href.startsWith('https://'))));
 	
 	// Parse color formatting in content using theme colorMap
-	$: segments = parseColorText(line.content, $themeColors.colorMap);
+	const segments = $derived(parseColorText(line.content, $themeColors.colorMap));
 </script>

 <button
@@ -24,8 +35,8 @@
 	class:selected={selected}
 	class:inline={inline}
 	style="--btn-color: {getButtonStyle(line.style)}"
-	on:click={() => onClick(index)}
-	on:mouseenter={() => onHover(index)}
+	onclick={() => onClick(index)}
+	onmouseenter={() => onHover(index)}
 	data-href={line.href || ''}
 	data-external={isExternal ? 'true' : 'false'}
 >
--- a/src/lib/components/tui/TuiCard.svelte
+++ b/src/lib/components/tui/TuiCard.svelte
@@ -1,17 +1,31 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
-	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
-	import type { TerminalLine } from './types';
-	import '$lib/assets/css/tui-card.css';
+	import Icon from "@iconify/svelte";
+	import { getButtonStyle, parseColorText, getSegmentStyle } from "./utils";
+	import type { CardLine } from "./types";
+	import TuiLine from "./TuiLine.svelte";
+	import "$lib/assets/css/tui-card.css";

-	export let line: TerminalLine;
+	interface Props {
+		line: CardLine;
+		inline?: boolean;
+	}

-	$: segments = parseColorText(line.content);
-	$: titleSegments = line.cardTitle ? parseColorText(line.cardTitle) : [];
-	$: footerSegments = line.cardFooter ? parseColorText(line.cardFooter) : [];
+	let { line, inline = false }: Props = $props();
+
+	const segments = $derived(parseColorText(line.content));
+	const titleSegments = $derived(
+		line.cardTitle ? parseColorText(line.cardTitle) : [],
+	);
+	const footerSegments = $derived(
+		line.cardFooter ? parseColorText(line.cardFooter) : [],
+	);
 </script>

-<div class="tui-card" style="--card-accent: {getButtonStyle(line.style)}">
+<div
+	class="tui-card"
+	class:inline
+	style="--card-color: {getButtonStyle(line.style)}"
+>
 	{#if line.cardTitle}
 		<div class="card-header">
 			{#if line.icon}
@@ -20,7 +34,9 @@
 			<span class="card-title">
 				{#each titleSegments as segment}
 					{#if getSegmentStyle(segment)}
-						<span style={getSegmentStyle(segment)}>{segment.text}</span>
+						<span style={getSegmentStyle(segment)}
+							>{segment.text}</span
+						>
 					{:else}
 						{segment.text}
 					{/if}
@@ -28,10 +44,14 @@
 			</span>
 		</div>
 	{/if}
-	
+
 	<div class="card-body">
 		{#if line.image}
-			<img src={line.image} alt={line.imageAlt || ''} class="card-image" />
+			<img
+				src={line.image}
+				alt={line.imageAlt || ""}
+				class="card-image"
+			/>
 		{/if}
 		<div class="card-content">
 			{#each segments as segment}
@@ -42,6 +62,25 @@
 				{/if}
 			{/each}
 		</div>
+		{#if line.children && line.children.length > 0}
+			<div
+				class="card-children"
+				class:flex={line.display === "flex"}
+				class:grid={line.display === "grid"}
+			>
+				{#each line.children as child, i}
+					<TuiLine
+						line={child}
+						index={i}
+						segments={parseColorText(child.content)}
+						complete={true}
+						showImage={true}
+						selectedIndex={-1}
+						inline={false}
+					/>
+				{/each}
+			</div>
+		{/if}
 	</div>

 	{#if line.cardFooter}
@@ -61,7 +100,11 @@
 	.tui-card {
 		border: 1px solid var(--terminal-border);
 		border-radius: 6px;
-		background: color-mix(in srgb, var(--terminal-bg) 80%, var(--card-accent) 5%);
+		background: color-mix(
+			in srgb,
+			var(--terminal-bg) 80%,
+			var(--card-accent) 5%
+		);
 		margin: 0.5rem 0;
 		overflow: hidden;
 		transition: border-color 0.2s ease;
@@ -109,6 +152,25 @@
 		white-space: pre-wrap;
 	}

+	.card-children {
+		margin-top: 0.5rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.card-children.flex {
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 1rem;
+	}
+
+	.card-children.grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+		gap: 1rem;
+	}
+
 	.card-footer {
 		padding: 0.5rem 0.75rem;
 		border-top: 1px solid var(--terminal-border);
--- a/src/lib/components/tui/TuiCardGrid.svelte
+++ b/src/lib/components/tui/TuiCardGrid.svelte
@@ -1,91 +1,114 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
-	import { themeColors } from '$lib/stores/theme';
-	import type { TerminalLine } from './types';
-	import '$lib/assets/css/tui-card-grid.css';
+	import Icon from "@iconify/svelte";
+	import { themeColors } from "$lib/stores/theme";
+	import type { CardGridLine } from "./types";
+	import "$lib/assets/css/tui-card-grid.css";

-	export let line: TerminalLine;
+	interface Props {
+		line: CardGridLine;
+		inline?: boolean;
+	}

-	$: cards = line.cards || [];
+	let { line, inline = false }: Props = $props();
+
+	const cards = $derived(line.cards || []);
 </script>

-<div class="tui-card-grid" style="--card-warning: {$themeColors.colorMap.warning};">
+<div
+	class="tui-card-grid"
+	class:inline
+	style="--card-warning: {$themeColors.colorMap.warning};"
+>
 	{#each cards as card}
 		<article class="tui-card" class:featured={card.featured}>
 			{#if card.image}
 				<div class="card-image">
 					<img src={card.image} alt={card.title} loading="lazy" />
-					{#if card.featured}
-						<span class="featured-badge">★ Featured</span>
-					{/if}
 				</div>
 			{:else if card.featured}
 				<div class="card-header-badge">
 					<span class="featured-badge">★ Featured</span>
 				</div>
 			{/if}
-			
+
 			<div class="card-body">
 				<h3 class="card-title">{card.title}</h3>
-				
+
 				{#if card.hackathonName}
 					<div class="card-meta">
 						<span class="meta-icon">🏛️</span>
 						<span class="hackathon-name">{card.hackathonName}</span>
-						{#if card.year}<span class="year">({card.year})</span>{/if}
+						{#if card.year}<span class="year">({card.year})</span
+							>{/if}
 					</div>
 				{/if}
-				
+
 				{#if card.university}
 					<div class="card-location">
 						<span class="meta-icon">📍</span>
-						{card.university}{card.location ? `, ${card.location}` : ''}
+						{card.university}{card.location
+							? `, ${card.location}`
+							: ""}
 					</div>
 				{/if}
-				
+
 				{#if card.awards && card.awards.length > 0}
 					<div class="awards">
 						{#each card.awards as award}
 							<div class="award">
 								<span class="award-icon">🏆</span>
-								<span class="award-text">{award.place} — {award.track}</span>
+								<span class="award-text"
+									>{award.place} — {award.track}</span
+								>
 							</div>
 						{/each}
 					</div>
 				{/if}
-				
+
 				<p class="card-desc">{card.description}</p>
-				
+
 				{#if card.tags && card.tags.length > 0}
 					<div class="tags">
 						{#each card.tags as tag}
 							<span class="tag">{tag}</span>
 						{/each}
-						<!-- {#if card.tags.length > 5}
-							<span class="tag more">+{card.tags.length - 5}</span>
-						{/if} -->
 					</div>
 				{/if}
-				
+
 				{#if card.liveWarning}
 					<div class="warning">Demo may be unavailable</div>
 				{/if}
-				
+
 				<div class="card-actions">
 					{#if card.link}
-						<a href={card.link} target="_blank" rel="noopener noreferrer" class="action-btn primary">
+						<a
+							href={card.link}
+							target="_blank"
+							rel="noopener noreferrer"
+							class="action-btn primary"
+						>
 							<Icon icon="mdi:open-in-new" width="12" />
 							<span>Demo</span>
 						</a>
 					{/if}
 					{#if card.repo}
-						<a href={card.repo} target="_blank" rel="noopener noreferrer" class="action-btn">
+						<a
+							href={card.repo}
+							target="_blank"
+							rel="noopener noreferrer"
+							class="action-btn"
+						>
 							<Icon icon="mdi:github" width="12" />
 							<span>Code</span>
 						</a>
 					{/if}
 					{#if card.devpost}
-						<a href={card.devpost} target="_blank" rel="noopener noreferrer" class="action-btn">
+						<a
+							href={card.devpost}
+							target="_blank"
+							rel="noopener noreferrer"
+							class="action-btn"
+						>
 							<Icon icon="mdi:rocket-launch" width="12" />
 							<span>Devpost</span>
 						</a>
@@ -113,7 +136,7 @@
 		display: flex;
 		flex-direction: column;
 		transition: all 0.2s ease;
-		font-family: 'JetBrains Mono', monospace;
+		font-family: "JetBrains Mono", monospace;
 	}

 	.tui-card:hover {
@@ -254,7 +277,11 @@
 	}

 	.tag {
-		background: color-mix(in srgb, var(--terminal-primary) 15%, transparent);
+		background: color-mix(
+			in srgb,
+			var(--terminal-primary) 15%,
+			transparent
+		);
 		color: var(--terminal-primary);
 		padding: 0.1rem 0.35rem;
 		border-radius: 3px;
@@ -263,11 +290,6 @@
 		text-transform: lowercase;
 	}

-	/* .tag.more {
-		background: color-mix(in srgb, var(--terminal-muted) 20%, transparent);
-		color: var(--terminal-muted);
-	} */
-
 	.warning {
 		display: inline-flex;
 		align-items: center;
@@ -275,16 +297,21 @@
 		font-size: 0.75rem;
 		color: var(--card-warning, #b8860b);
 		padding: 0.3rem 0.6rem;
-		background: color-mix(in srgb, var(--card-warning, #b8860b) 8%, transparent);
-		border: 1px solid color-mix(in srgb, var(--card-warning, #b8860b) 20%, transparent);
+		background: color-mix(
+			in srgb,
+			var(--card-warning, #b8860b) 8%,
+			transparent
+		);
+		border: 1px solid
+			color-mix(in srgb, var(--card-warning, #b8860b) 20%, transparent);
 		border-radius: 6px;
 		width: fit-content;
 		font-weight: 600;
-		box-shadow: 0 1px 0 rgba(0,0,0,0.02) inset;
+		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02) inset;
 	}

 	.warning:before {
-		content: '⚠';
+		content: "⚠";
 		display: inline-block;
 		font-size: 0.9rem;
 		line-height: 1;
--- a/src/lib/components/tui/TuiCheckbox.svelte
+++ b/src/lib/components/tui/TuiCheckbox.svelte
@@ -1,63 +1,73 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
-	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
-	import { themeColors } from '$lib/stores/theme';
-	import type { TerminalLine } from './types';
-	import { createEventDispatcher } from 'svelte';
-	import '$lib/assets/css/tui-checkbox.css';
+	import Icon from "@iconify/svelte";
+	import { getButtonStyle, parseColorText, getSegmentStyle } from "./utils";
+	import { themeColors } from "$lib/stores/theme";
+	import type { CheckboxLine } from "./types";
+	import "$lib/assets/css/tui-checkbox.css";

-	export let line: TerminalLine;
-	export let inline: boolean = false;
-	export let checked: boolean = false;
+	interface Props {
+		line: CheckboxLine;
+		inline?: boolean;
+		checked?: boolean;
+		onchange?: (checked: boolean) => void;
+	}

-	const dispatch = createEventDispatcher<{
-		change: boolean;
-	}>();
+	let {
+		line,
+		inline = false,
+		checked = $bindable(false),
+		onchange,
+	}: Props = $props();

-	$: labelSegments = line.content ? parseColorText(line.content, $themeColors.colorMap) : [];
-	$: isDisabled = line.inputDisabled || false;
-	$: indeterminate = line.checkboxIndeterminate || false;
+	const labelSegments = $derived(
+		line.content ? parseColorText(line.content, $themeColors.colorMap) : [],
+	);
+	const isDisabled = $derived(line.inputDisabled || false);
+	const indeterminate = $derived(line.checkboxIndeterminate || false);

 	function handleChange() {
 		if (isDisabled) return;
 		checked = !checked;
-		dispatch('change', checked);
+		onchange?.(checked);
 	}

 	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === ' ' || e.key === 'Enter') {
+		if (e.key === " " || e.key === "Enter") {
 			e.preventDefault();
 			handleChange();
 		}
 	}

-	function getCheckboxSymbol(checked: boolean, indeterminate: boolean): string {
-		if (indeterminate) return '[-]';
-		return checked ? '[✓]' : '[ ]';
+	function getCheckboxSymbol(
+		checked: boolean,
+		indeterminate: boolean,
+	): string {
+		if (indeterminate) return "[-]";
+		return checked ? "[✓]" : "[ ]";
 	}
 </script>

-<div 
-	class="tui-checkbox" 
-	class:inline={inline}
-	class:checked={checked}
+<div
+	class="tui-checkbox"
+	class:inline
+	class:checked
 	class:disabled={isDisabled}
 	style="--checkbox-color: {getButtonStyle(line.style)}"
 	role="checkbox"
-	aria-checked={indeterminate ? 'mixed' : checked}
+	aria-checked={indeterminate ? "mixed" : checked}
 	aria-disabled={isDisabled}
 	tabindex={isDisabled ? -1 : 0}
-	on:click={handleChange}
-	on:keydown={handleKeydown}
+	onclick={handleChange}
+	onkeydown={handleKeydown}
 >
-	<span class="checkbox-box" class:indeterminate={indeterminate}>
+	<span class="checkbox-box" class:indeterminate>
 		{getCheckboxSymbol(checked, indeterminate)}
 	</span>
-	
+
 	{#if line.icon}
 		<Icon icon={line.icon} width="14" class="checkbox-icon" />
 	{/if}
-	
+
 	{#if line.content}
 		<span class="checkbox-label">
 			{#each labelSegments as segment}
--- a/src/lib/components/tui/TuiFooter.svelte
+++ b/src/lib/components/tui/TuiFooter.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
-	import '$lib/assets/css/tui-footer.css';
+	import Icon from "@iconify/svelte";
+	import "$lib/assets/css/tui-footer.css";

-	export let isTyping: boolean;
-	export let linesCount: number;
-	export let skipAnimation: () => void;
+	interface Props {
+		isTyping: boolean;
+		linesCount: number;
+		skipAnimation: () => void;
+	}
+
+	let { isTyping, linesCount, skipAnimation }: Props = $props();
 </script>

 <div class="tui-statusbar bottom">
@@ -21,7 +25,7 @@
 	</span>
 	<span class="status-right">
 		{#if isTyping}
-			<button class="skip-btn" on:click={skipAnimation}>
+			<button class="skip-btn" onclick={skipAnimation}>
 				<Icon icon="mdi:skip-forward" width="12" />
 				<span>Skip (Y)</span>
 			</button>
@@ -30,5 +34,3 @@
 		{/if}
 	</span>
 </div>
-
-
--- a/src/lib/components/tui/TuiGroup.svelte
+++ b/src/lib/components/tui/TuiGroup.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
-	import { parseColorText, getPlainText } from './utils';
-	import { themeColors } from '$lib/stores/theme';
-	import TuiLine from './TuiLine.svelte';
-	import type { TerminalLine } from './types';
+	import { parseColorText, getPlainText } from "./utils";
+	import { themeColors } from "$lib/stores/theme";
+	import TuiLine from "./TuiLine.svelte";
+	import type { GroupLine } from "./types";

 	interface Props {
-		line: TerminalLine;
+		line: GroupLine;
 		inline?: boolean;
 		onButtonClick?: (idx: number) => void;
 		onHoverButton?: (idx: number) => void;
 		onLinkClick?: (idx: number) => void;
 	}

-	let { 
-		line, 
+	let {
+		line,
 		inline = false,
 		onButtonClick = () => {},
 		onHoverButton = () => {},
-		onLinkClick = () => {}
+		onLinkClick = () => {},
 	}: Props = $props();

 	// Get colorMap from current theme
@@ -25,33 +25,50 @@

 	// Parse children with current colorMap
 	const parsedChildren = $derived(
-		(line.children || []).map(child => {
+		(line.children || []).map((child) => {
 			const segments = parseColorText(child.content, colorMap);
 			return { line: child, segments, plainText: getPlainText(segments) };
-		})
+		}),
 	);

 	// Style for the group container
 	const groupStyle = $derived(() => {
 		const styles: string[] = [];
-		if (line.groupDirection === 'column') styles.push('flex-direction: column');
-		if (line.groupAlign) {
-			const alignMap: Record<string, string> = { start: 'flex-start', center: 'center', end: 'flex-end' };
-			styles.push(`align-items: ${alignMap[line.groupAlign] || 'flex-start'}`);
+		// Only apply flex styles if not grid or block
+		if (line.display !== "grid" && line.display !== "block") {
+			if (line.groupDirection === "column")
+				styles.push("flex-direction: column");
+			if (line.groupAlign) {
+				const alignMap: Record<string, string> = {
+					start: "flex-start",
+					center: "center",
+					end: "flex-end",
+				};
+				styles.push(
+					`align-items: ${alignMap[line.groupAlign] || "flex-start"}`,
+				);
+			}
 		}
 		if (line.groupGap) styles.push(`gap: ${line.groupGap}`);
-		return styles.join('; ');
+		return styles.join("; ");
 	});
 </script>

-<div class="tui-group" class:inline style={groupStyle()} id={line.id}>
+<div
+	class="tui-group"
+	class:inline
+	class:grid={line.display === "grid"}
+	class:block={line.display === "block"}
+	style={groupStyle()}
+	id={line.id}
+>
 	{#each parsedChildren as parsed, idx (idx)}
 		<TuiLine
 			line={parsed.line}
 			index={idx}
 			segments={parsed.segments}
 			complete={true}
-			showImage={parsed.line.type === 'image'}
+			showImage={parsed.line.type === "image"}
 			selectedIndex={-1}
 			inline={parsed.line.inline !== false}
 			{onButtonClick}
@@ -74,9 +91,26 @@
 		display: inline-flex;
 	}

+	.tui-group.grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+		width: 100%;
+	}
+
+	.tui-group.block {
+		display: block;
+		width: 100%;
+	}
+
 	@keyframes lineSlideIn {
-		from { opacity: 0; transform: translateX(-5px); }
-		to { opacity: 1; transform: translateX(0); }
+		from {
+			opacity: 0;
+			transform: translateX(-5px);
+		}
+		to {
+			opacity: 1;
+			transform: translateX(0);
+		}
 	}

 	@media (max-width: 768px) {
@@ -84,5 +118,9 @@
 			flex-direction: column;
 			align-items: stretch;
 		}
+
+		.tui-group.grid {
+			grid-template-columns: 1fr;
+		}
 	}
 </style>
--- a/src/lib/components/tui/TuiHeader.svelte
+++ b/src/lib/components/tui/TuiHeader.svelte
@@ -1,13 +1,24 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
-	import { user } from '$lib/config';
-	import { colorTheme, getThemeIcon, type ColorTheme } from '$lib/stores/theme';
-	import '$lib/assets/css/tui-header.css';
+	import Icon from "@iconify/svelte";
+	import { user } from "$lib/config";
+	import {
+		colorTheme,
+		getThemeIcon,
+		type ColorTheme,
+	} from "$lib/stores/theme";
+	import "$lib/assets/css/tui-header.css";

-	export let title = 'terminal';
-	export let interactive = true;
-	export let hasButtons = false;
+	interface Props {
+		title?: string;
+		interactive?: boolean;
+		hasButtons?: boolean;
+	}

+	let {
+		title = "terminal",
+		interactive = true,
+		hasButtons = false,
+	}: Props = $props();
 </script>

 <div class="tui-statusbar top">
@@ -23,5 +34,3 @@
 		{/if}
 	</span>
 </div>
-
-
--- a/src/lib/components/tui/TuiInput.svelte
+++ b/src/lib/components/tui/TuiInput.svelte
@@ -1,54 +1,64 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
-	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
-	import { themeColors } from '$lib/stores/theme';
-	import type { TerminalLine } from './types';
-	import { createEventDispatcher } from 'svelte';
-	import '$lib/assets/css/tui-input.css';
+	import Icon from "@iconify/svelte";
+	import { getButtonStyle, parseColorText, getSegmentStyle } from "./utils";
+	import { themeColors } from "$lib/stores/theme";
+	import type { InputLine } from "./types";
+	import "$lib/assets/css/tui-input.css";

-	export let line: TerminalLine;
-	export let inline: boolean = false;
-	export let value: string = '';
+	interface Props {
+		line: InputLine;
+		inline?: boolean;
+		value?: string;
+		oninput?: (value: string) => void;
+		onchange?: (value: string) => void;
+		onfocus?: () => void;
+		onblur?: () => void;
+	}

-	const dispatch = createEventDispatcher<{
-		input: string;
-		change: string;
-		focus: void;
-		blur: void;
-	}>();
+	let {
+		line,
+		inline = false,
+		value = $bindable(""),
+		oninput,
+		onchange,
+		onfocus,
+		onblur,
+	}: Props = $props();

-	$: labelSegments = line.content ? parseColorText(line.content, $themeColors.colorMap) : [];
-	$: placeholder = line.inputPlaceholder || '';
-	$: inputType = line.inputType || 'text';
-	$: isDisabled = line.inputDisabled || false;
-	$: hasError = line.inputError;
-	$: errorMessage = line.inputErrorMessage || '';
-	$: prefix = line.inputPrefix || '';
-	$: suffix = line.inputSuffix || '';
+	const labelSegments = $derived(
+		line.content ? parseColorText(line.content, $themeColors.colorMap) : [],
+	);
+	const placeholder = $derived(line.inputPlaceholder || "");
+	const inputType = $derived(line.inputType || "text");
+	const isDisabled = $derived(line.inputDisabled || false);
+	const hasError = $derived(line.inputError);
+	const errorMessage = $derived(line.inputErrorMessage || "");
+	const prefix = $derived(line.inputPrefix || "");
+	const suffix = $derived(line.inputSuffix || "");

 	function handleInput(e: Event) {
 		const target = e.target as HTMLInputElement;
 		value = target.value;
-		dispatch('input', value);
+		oninput?.(value);
 	}

 	function handleChange(e: Event) {
 		const target = e.target as HTMLInputElement;
-		dispatch('change', target.value);
+		onchange?.(target.value);
 	}

 	function handleFocus() {
-		dispatch('focus');
+		onfocus?.();
 	}

 	function handleBlur() {
-		dispatch('blur');
+		onblur?.();
 	}
 </script>

-<div 
-	class="tui-input" 
-	class:inline={inline}
+<div
+	class="tui-input"
+	class:inline
 	class:error={hasError}
 	class:disabled={isDisabled}
 	style="--input-color: {getButtonStyle(line.style)}"
@@ -69,7 +79,7 @@
 			{/each}
 		</label>
 	{/if}
-	
+
 	<div class="input-wrapper">
 		<span class="input-prompt">❯</span>
 		{#if prefix}
@@ -78,12 +88,12 @@
 		<input
 			type={inputType}
 			{placeholder}
-			{value}
+			bind:value
 			disabled={isDisabled}
-			on:input={handleInput}
-			on:change={handleChange}
-			on:focus={handleFocus}
-			on:blur={handleBlur}
+			oninput={handleInput}
+			onchange={handleChange}
+			onfocus={handleFocus}
+			onblur={handleBlur}
 		/>
 		{#if suffix}
 			<span class="input-affix suffix">{suffix}</span>
@@ -136,7 +146,8 @@

 	.input-wrapper:focus-within {
 		border-color: var(--input-color);
-		box-shadow: 0 0 0 1px color-mix(in srgb, var(--input-color) 30%, transparent);
+		box-shadow: 0 0 0 1px
+			color-mix(in srgb, var(--input-color) 30%, transparent);
 	}

 	.tui-input.error .input-wrapper {
--- a/src/lib/components/tui/TuiLine.svelte
+++ b/src/lib/components/tui/TuiLine.svelte
@@ -1,24 +1,24 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
-	import { getSegmentStyle, getLinePrefix } from './utils';
-	import { handleNavigation } from './terminal-keyboard';
-	import { user } from '$lib/config';
-	import TuiButton from './TuiButton.svelte';
-	import TuiLink from './TuiLink.svelte';
-	import TuiCard from './TuiCard.svelte';
-	import TuiProgress from './TuiProgress.svelte';
-	import TuiAccordion from './TuiAccordion.svelte';
-	import TuiTable from './TuiTable.svelte';
-	import TuiTooltip from './TuiTooltip.svelte';
-	import TuiCardGrid from './TuiCardGrid.svelte';
-	import TuiInput from './TuiInput.svelte';
-	import TuiTextarea from './TuiTextarea.svelte';
-	import TuiCheckbox from './TuiCheckbox.svelte';
-	import TuiRadio from './TuiRadio.svelte';
-	import TuiSelect from './TuiSelect.svelte';
-	import TuiToggle from './TuiToggle.svelte';
-	import TuiGroup from './TuiGroup.svelte';
-	import type { TerminalLine, TextSegment } from './types';
+	import Icon from "@iconify/svelte";
+	import { getSegmentStyle, getLinePrefix } from "./utils";
+	import { handleNavigation } from "./terminal-keyboard";
+	import { user } from "$lib/config";
+	import TuiButton from "./TuiButton.svelte";
+	import TuiLink from "./TuiLink.svelte";
+	import TuiCard from "./TuiCard.svelte";
+	import TuiProgress from "./TuiProgress.svelte";
+	import TuiAccordion from "./TuiAccordion.svelte";
+	import TuiTable from "./TuiTable.svelte";
+	import TuiTooltip from "./TuiTooltip.svelte";
+	import TuiCardGrid from "./TuiCardGrid.svelte";
+	import TuiInput from "./TuiInput.svelte";
+	import TuiTextarea from "./TuiTextarea.svelte";
+	import TuiCheckbox from "./TuiCheckbox.svelte";
+	import TuiRadio from "./TuiRadio.svelte";
+	import TuiSelect from "./TuiSelect.svelte";
+	import TuiToggle from "./TuiToggle.svelte";
+	import TuiGroup from "./TuiGroup.svelte";
+	import type { TerminalLine, TextSegment } from "./types";

 	interface Props {
 		line: TerminalLine;
@@ -45,98 +45,189 @@
 		showCursor = false,
 		onButtonClick = () => {},
 		onHoverButton = () => {},
-		onLinkClick = () => {}
+		onLinkClick = () => {},
 	}: Props = $props();

 	// Component types that have their own wrapper
-	const componentTypes = new Set(['button', 'card', 'cardgrid', 'progress', 'accordion', 'table', 'input', 'textarea', 'checkbox', 'radio', 'select', 'toggle', 'group']);
-	
+	const componentTypes = new Set([
+		"button",
+		"card",
+		"cardgrid",
+		"progress",
+		"accordion",
+		"table",
+		"input",
+		"textarea",
+		"checkbox",
+		"radio",
+		"select",
+		"toggle",
+		"group",
+	]);
+
 	// Types that need special handling
 	const isComponent = $derived(componentTypes.has(line.type));
-	const isBlank = $derived(line.type === 'blank');
-	const isDivider = $derived(line.type === 'divider');
-	const isImage = $derived(line.type === 'image');
-	const isPrompt = $derived(line.type === 'command' || line.type === 'prompt');
-	const isHeader = $derived(line.type === 'header');
-	const isLink = $derived(line.type === 'link');
-	const isTooltip = $derived(line.type === 'tooltip');
+	const isBlank = $derived(line.type === "blank");
+	const isDivider = $derived(line.type === "divider");
+	const isImage = $derived(line.type === "image");
+	const isPrompt = $derived(
+		line.type === "command" || line.type === "prompt",
+	);
+	const isHeader = $derived(line.type === "header");
+	const isLink = $derived(line.type === "link");
+	const isTooltip = $derived(line.type === "tooltip");
 </script>

 {#if isBlank}
-	{#if inline}<span class="inline-blank"></span>{:else}<div class="tui-line blank"></div>{/if}
+	{#if inline}<span class="inline-blank"></span>{:else}<div
+			class="tui-line blank"
+		></div>{/if}
 {:else if isDivider}
 	<div class="tui-divider" id={line.id}>
 		<span class="divider-line"></span>
 		{#if line.content}<span class="divider-text">{line.content}</span>{/if}
 		<span class="divider-line"></span>
 	</div>
-{:else if line.type === 'button'}
-	<TuiButton {line} {index} selected={selectedIndex === index} onClick={onButtonClick} onHover={onHoverButton} {inline} />
-{:else if isLink}
+{:else if line.type === "button"}
+	<TuiButton
+		{line}
+		{index}
+		selected={selectedIndex === index}
+		onClick={onButtonClick}
+		onHover={onHoverButton}
+		{inline}
+	/>
+{:else if line.type === "link"}
 	{#if inline}
 		<TuiLink {line} onClick={() => handleNavigation(line)} />
 	{:else}
-		<div class="tui-line link"><TuiLink {line} onClick={() => onLinkClick(index)} /></div>
+		<div class="tui-line link">
+			<TuiLink {line} onClick={() => onLinkClick(index)} />
+		</div>
 	{/if}
-{:else if isTooltip}
-	{#if inline}<TuiTooltip {line} />{:else}<div class="tui-line"><TuiTooltip {line} /></div>{/if}
-{:else if line.type === 'card'}
-	<TuiCard {line} />
-{:else if line.type === 'cardgrid'}
-	<TuiCardGrid {line} />
-{:else if line.type === 'progress'}
+{:else if line.type === "tooltip"}
+	{#if inline}<TuiTooltip {line} />{:else}<div class="tui-line">
+			<TuiTooltip {line} />
+		</div>{/if}
+{:else if line.type === "card"}
+	<TuiCard {line} {inline} />
+{:else if line.type === "cardgrid"}
+	<TuiCardGrid {line} {inline} />
+{:else if line.type === "progress"}
 	<TuiProgress {line} {inline} />
-{:else if line.type === 'accordion'}
-	<TuiAccordion {line} />
-{:else if line.type === 'table'}
-	<TuiTable {line} />
-{:else if line.type === 'input'}
+{:else if line.type === "accordion"}
+	<TuiAccordion {line} {inline} />
+{:else if line.type === "table"}
+	<TuiTable {line} {inline} />
+{:else if line.type === "input"}
 	<TuiInput {line} {inline} />
-{:else if line.type === 'textarea'}
-	<TuiTextarea {line} />
-{:else if line.type === 'checkbox'}
+{:else if line.type === "textarea"}
+	<TuiTextarea {line} {inline} />
+{:else if line.type === "checkbox"}
 	<TuiCheckbox {line} {inline} />
-{:else if line.type === 'radio'}
-	<TuiRadio {line} />
-{:else if line.type === 'select'}
-	<TuiSelect {line} />
-{:else if line.type === 'toggle'}
+{:else if line.type === "radio"}
+	<TuiRadio {line} {inline} />
+{:else if line.type === "select"}
+	<TuiSelect {line} {inline} />
+{:else if line.type === "toggle"}
 	<TuiToggle {line} {inline} />
-{:else if line.type === 'group'}
+{:else if line.type === "group"}
 	<TuiGroup {line} {inline} {onButtonClick} {onHoverButton} {onLinkClick} />
-{:else if isImage && showImage}
+{:else if line.type === "image" && showImage}
 	<div class="tui-image" class:inline-image={inline}>
-		<img src={line.image} alt={line.imageAlt || 'Image'} style="max-width: {line.imageWidth || 300}px" />
+		<img
+			src={line.image}
+			alt={line.imageAlt || "Image"}
+			style="max-width: {line.imageWidth || 300}px"
+		/>
 		{#if line.content}<span class="image-caption">{line.content}</span>{/if}
 	</div>
-{:else if !isImage}
-	{#if inline && isHeader}
+{:else if line.type === "header"}
+	{#if inline}
 		<span class="header-text inline-header">
 			<Icon icon="mdi:pound" width="20" class="header-icon" />
-			{#each segments as seg}{#if seg.icon}<Icon icon={seg.icon} width="20" class="inline-icon" />{:else if getSegmentStyle(seg)}<span style={getSegmentStyle(seg)}>{seg.text}</span>{:else}{seg.text}{/if}{/each}
+			{#each segments as seg}{#if seg.icon}<Icon
+						icon={seg.icon}
+						width="20"
+						class="inline-icon"
+					/>{:else if getSegmentStyle(seg)}<span
+						style={getSegmentStyle(seg)}>{seg.text}</span
+					>{:else}{seg.text}{/if}{/each}
 		</span>
-	{:else if inline}
+	{:else}
+		<div class="tui-line header" class:complete id={line.id}>
+			<span class="content header-text">
+				<Icon icon="mdi:pound" width="25" class="header-icon" />
+				{#each segments as seg}{#if seg.icon}<Icon
+							icon={seg.icon}
+							width="25"
+							class="inline-icon"
+						/>{:else if getSegmentStyle(seg)}<span
+							style={getSegmentStyle(seg)}>{seg.text}</span
+						>{:else}{seg.text}{/if}{/each}
+			</span>
+			{#if showCursor}<span class="cursor"></span>{/if}
+		</div>
+	{/if}
+{:else if line.type === "command" || line.type === "prompt"}
+	{#if inline}
 		<span class="inline-content {line.type}">
-			{getLinePrefix(line.type)}{#each segments as seg}{#if seg.icon}<Icon icon={seg.icon} width="14" class="inline-icon" />{:else if getSegmentStyle(seg)}<span style={getSegmentStyle(seg)}>{seg.text}</span>{:else}{seg.text}{/if}{/each}
+			{getLinePrefix(line.type)}{#each segments as seg}{#if seg.icon}<Icon
+						icon={seg.icon}
+						width="14"
+						class="inline-icon"
+					/>{:else if getSegmentStyle(seg)}<span
+						style={getSegmentStyle(seg)}>{seg.text}</span
+					>{:else}{seg.text}{/if}{/each}
 		</span>
 	{:else}
 		<div class="tui-line {line.type}" class:complete id={line.id}>
-			{#if isPrompt}
-				<span class="prompt">
-					<span class="user">{user.username}</span><span class="at">@</span><span class="host">{user.hostname}</span>
-					<span class="separator">:</span><span class="path">~</span><span class="symbol">$</span>
-				</span>
-			{/if}
-			{#if isHeader}
-				<span class="content header-text">
-					<Icon icon="mdi:pound" width="25" class="header-icon" />
-					{#each segments as seg}{#if seg.icon}<Icon icon={seg.icon} width="25" class="inline-icon" />{:else if getSegmentStyle(seg)}<span style={getSegmentStyle(seg)}>{seg.text}</span>{:else}{seg.text}{/if}{/each}
-				</span>
-			{:else}
-				<span class="content">
-					{getLinePrefix(line.type)}{#each segments as seg}{#if seg.icon}<Icon icon={seg.icon} width="14" class="inline-icon" />{:else if getSegmentStyle(seg)}<span style={getSegmentStyle(seg)}>{seg.text}</span>{:else}{seg.text}{/if}{/each}
-				</span>
-			{/if}
+			<span class="prompt">
+				<span class="user">{user.username}</span><span class="at"
+					>@</span
+				><span class="host">{user.hostname}</span>
+				<span class="separator">:</span><span class="path">~</span><span
+					class="symbol">$</span
+				>
+			</span>
+			<span class="content">
+				{getLinePrefix(
+					line.type,
+				)}{#each segments as seg}{#if seg.icon}<Icon
+							icon={seg.icon}
+							width="14"
+							class="inline-icon"
+						/>{:else if getSegmentStyle(seg)}<span
+							style={getSegmentStyle(seg)}>{seg.text}</span
+						>{:else}{seg.text}{/if}{/each}
+			</span>
+			{#if showCursor}<span class="cursor"></span>{/if}
+		</div>
+	{/if}
+{:else if !isImage}
+	{#if inline}
+		<span class="inline-content {line.type}">
+			{getLinePrefix(line.type)}{#each segments as seg}{#if seg.icon}<Icon
+						icon={seg.icon}
+						width="14"
+						class="inline-icon"
+					/>{:else if getSegmentStyle(seg)}<span
+						style={getSegmentStyle(seg)}>{seg.text}</span
+					>{:else}{seg.text}{/if}{/each}
+		</span>
+	{:else}
+		<div class="tui-line {line.type}" class:complete id={line.id}>
+			<span class="content">
+				{getLinePrefix(
+					line.type,
+				)}{#each segments as seg}{#if seg.icon}<Icon
+							icon={seg.icon}
+							width="14"
+							class="inline-icon"
+						/>{:else if getSegmentStyle(seg)}<span
+							style={getSegmentStyle(seg)}>{seg.text}</span
+						>{:else}{seg.text}{/if}{/each}
+			</span>
 			{#if showCursor}<span class="cursor"></span>{/if}
 		</div>
 	{/if}
--- a/src/lib/components/tui/TuiLink.svelte
+++ b/src/lib/components/tui/TuiLink.svelte
@@ -1,25 +1,36 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
-	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
-	import { themeColors } from '$lib/stores/theme';
-	import type { TerminalLine } from './types';
-	import '$lib/assets/css/tui-link.css';
+	import Icon from "@iconify/svelte";
+	import { getButtonStyle, parseColorText, getSegmentStyle } from "./utils";
+	import { themeColors } from "$lib/stores/theme";
+	import type { LinkLine } from "./types";
+	import "$lib/assets/css/tui-link.css";

-	export let line: TerminalLine;
-	export let onClick: () => void;
+	interface Props {
+		line: LinkLine;
+		onClick: () => void;
+	}
+
+	let { line, onClick }: Props = $props();

 	// Determine if this is an external link
-	$: isExternal = line.external || (line.href && (line.href.startsWith('http://') || line.href.startsWith('https://')));
-	
+	const isExternal = $derived(
+		line.external ||
+			(line.href &&
+				(line.href.startsWith("http://") ||
+					line.href.startsWith("https://"))),
+	);
+
 	// Parse color formatting in content using theme colorMap
-	$: segments = parseColorText(line.content, $themeColors.colorMap);
+	const segments = $derived(
+		parseColorText(line.content, $themeColors.colorMap),
+	);
 </script>

 <span class="tui-link" style="--link-color: {getButtonStyle(line.style)}">
 	{#if line.icon}
 		<Icon icon={line.icon} width="14" class="link-icon" />
 	{/if}
-	<button class="link-text" on:click={onClick}>
+	<button class="link-text" onclick={onClick}>
 		{#each segments as segment}
 			{#if segment.icon}
 				<Icon icon={segment.icon} width="14" class="inline-icon" />
--- a/src/lib/components/tui/TuiProgress.svelte
+++ b/src/lib/components/tui/TuiProgress.svelte
@@ -1,20 +1,32 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
-	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
-	import { themeColors } from '$lib/stores/theme';
-	import type { TerminalLine } from './types';
-	import '$lib/assets/css/tui-progress.css';
+	import Icon from "@iconify/svelte";
+	import { getButtonStyle, parseColorText, getSegmentStyle } from "./utils";
+	import { themeColors } from "$lib/stores/theme";
+	import type { ProgressLine } from "./types";
+	import "$lib/assets/css/tui-progress.css";

-	export let line: TerminalLine;
-	export let inline: boolean = false;
+	interface Props {
+		line: ProgressLine;
+		inline?: boolean;
+	}

-	$: progress = Math.min(100, Math.max(0, line.progress ?? 0));
-	$: label = line.progressLabel || `${progress}%`;
-	$: contentSegments = parseColorText(line.content, $themeColors.colorMap);
-	$: labelSegments = parseColorText(label, $themeColors.colorMap);
+	let { line, inline = false }: Props = $props();
+
+	const progress = $derived(Math.min(100, Math.max(0, line.progress ?? 0)));
+	const label = $derived(line.progressLabel || `${progress}%`);
+	const contentSegments = $derived(
+		parseColorText(line.content, $themeColors.colorMap),
+	);
+	const labelSegments = $derived(
+		parseColorText(label, $themeColors.colorMap),
+	);
 </script>

-<div class="tui-progress" class:inline={inline} style="--progress-color: {getButtonStyle(line.style)}">
+<div
+	class="tui-progress"
+	class:inline
+	style="--progress-color: {getButtonStyle(line.style)}"
+>
 	{#if line.content}
 		<div class="progress-label">
 			{#each contentSegments as segment}
@@ -34,7 +46,8 @@
 		</div>
 		<div class="progress-blocks">
 			{#each Array(20) as _, i}
-				<span class="block" class:filled={i < Math.floor(progress / 5)}></span>
+				<span class="block" class:filled={i < Math.floor(progress / 5)}
+				></span>
 			{/each}
 		</div>
 	</div>
@@ -100,7 +113,11 @@
 		top: 0;
 		left: 0;
 		height: 100%;
-		background: linear-gradient(90deg, var(--progress-color), color-mix(in srgb, var(--progress-color) 80%, white 20%));
+		background: linear-gradient(
+			90deg,
+			var(--progress-color),
+			color-mix(in srgb, var(--progress-color) 80%, white 20%)
+		);
 		border-radius: 3px;
 		transition: width 0.3s ease;
 	}
@@ -111,14 +128,24 @@
 		top: 0;
 		height: 100%;
 		width: 20px;
-		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
+		background: linear-gradient(
+			90deg,
+			transparent,
+			rgba(255, 255, 255, 0.3)
+		);
 		animation: shimmer 1.5s infinite;
 	}

 	@keyframes shimmer {
-		0% { opacity: 0; }
-		50% { opacity: 1; }
-		100% { opacity: 0; }
+		0% {
+			opacity: 0;
+		}
+		50% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0;
+		}
 	}

 	.progress-blocks {
--- a/src/lib/components/tui/TuiRadio.svelte
+++ b/src/lib/components/tui/TuiRadio.svelte
@@ -1,45 +1,52 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
-	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
-	import { themeColors } from '$lib/stores/theme';
-	import type { TerminalLine, FormOption } from './types';
-	import { createEventDispatcher } from 'svelte';
-	import '$lib/assets/css/tui-radio.css';
+	import Icon from "@iconify/svelte";
+	import { getButtonStyle, parseColorText, getSegmentStyle } from "./utils";
+	import { themeColors } from "$lib/stores/theme";
+	import type { RadioLine } from "./types";
+	import "$lib/assets/css/tui-radio.css";

-	export let line: TerminalLine;
-	export let inline: boolean = false;
-	export let value: string = '';
+	interface Props {
+		line: RadioLine;
+		inline?: boolean;
+		value?: string;
+		onchange?: (value: string) => void;
+	}

-	const dispatch = createEventDispatcher<{
-		change: string;
-	}>();
+	let {
+		line,
+		inline = false,
+		value = $bindable(""),
+		onchange,
+	}: Props = $props();

-	$: labelSegments = line.content ? parseColorText(line.content, $themeColors.colorMap) : [];
-	$: options = line.radioOptions || [];
-	$: isDisabled = line.inputDisabled || false;
-	$: isHorizontal = line.radioHorizontal || false;
+	const labelSegments = $derived(
+		line.content ? parseColorText(line.content, $themeColors.colorMap) : [],
+	);
+	const options = $derived(line.radioOptions || []);
+	const isDisabled = $derived(line.inputDisabled || false);
+	const isHorizontal = $derived(line.radioHorizontal || false);

 	function handleSelect(optionValue: string) {
 		if (isDisabled) return;
 		value = optionValue;
-		dispatch('change', value);
+		onchange?.(value);
 	}

 	function handleKeydown(e: KeyboardEvent, optionValue: string) {
-		if (e.key === ' ' || e.key === 'Enter') {
+		if (e.key === " " || e.key === "Enter") {
 			e.preventDefault();
 			handleSelect(optionValue);
 		}
 	}

 	function getRadioSymbol(selected: boolean): string {
-		return selected ? '(●)' : '( )';
+		return selected ? "(●)" : "( )";
 	}
 </script>

-<div 
-	class="tui-radio-group" 
-	class:inline={inline}
+<div
+	class="tui-radio-group"
+	class:inline
 	class:disabled={isDisabled}
 	style="--radio-color: {getButtonStyle(line.style)}"
 	role="radiogroup"
@@ -60,12 +67,15 @@
 			{/each}
 		</div>
 	{/if}
-	
+
 	<div class="radio-options" class:horizontal={isHorizontal}>
 		{#each options as option}
 			{@const isSelected = value === option.value}
-			{@const optionSegments = parseColorText(option.label, $themeColors.colorMap)}
-			<div 
+			{@const optionSegments = parseColorText(
+				option.label,
+				$themeColors.colorMap,
+			)}
+			<div
 				class="radio-option"
 				class:selected={isSelected}
 				class:option-disabled={option.disabled}
@@ -73,8 +83,9 @@
 				aria-checked={isSelected}
 				aria-disabled={isDisabled || option.disabled}
 				tabindex={isDisabled || option.disabled ? -1 : 0}
-				on:click={() => !option.disabled && handleSelect(option.value)}
-				on:keydown={(e) => !option.disabled && handleKeydown(e, option.value)}
+				onclick={() => !option.disabled && handleSelect(option.value)}
+				onkeydown={(e) =>
+					!option.disabled && handleKeydown(e, option.value)}
 			>
 				<span class="radio-symbol">
 					{getRadioSymbol(isSelected)}
@@ -85,9 +96,15 @@
 				<span class="option-label">
 					{#each optionSegments as segment}
 						{#if segment.icon}
-							<Icon icon={segment.icon} width="14" class="inline-icon" />
+							<Icon
+								icon={segment.icon}
+								width="14"
+								class="inline-icon"
+							/>
 						{:else if getSegmentStyle(segment)}
-							<span style={getSegmentStyle(segment)}>{segment.text}</span>
+							<span style={getSegmentStyle(segment)}
+								>{segment.text}</span
+							>
 						{:else}
 							{segment.text}
 						{/if}
--- a/src/lib/components/tui/TuiSelect.svelte
+++ b/src/lib/components/tui/TuiSelect.svelte
@@ -1,53 +1,71 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
-	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
-	import { themeColors } from '$lib/stores/theme';
-	import type { TerminalLine, FormOption } from './types';
-	import { createEventDispatcher } from 'svelte';
-	import '$lib/assets/css/tui-select.css';
+	import Icon from "@iconify/svelte";
+	import { getButtonStyle, parseColorText, getSegmentStyle } from "./utils";
+	import { themeColors } from "$lib/stores/theme";
+	import type { SelectLine } from "./types";
+	import "$lib/assets/css/tui-select.css";

-	export let line: TerminalLine;
-	export let inline: boolean = false;
-	export let value: string = '';
+	interface Props {
+		line: SelectLine;
+		inline?: boolean;
+		value?: string;
+		onchange?: (value: string) => void;
+		onfocus?: () => void;
+		onblur?: () => void;
+	}

-	const dispatch = createEventDispatcher<{
-		change: string;
-		focus: void;
-		blur: void;
-	}>();
+	let {
+		line,
+		inline = false,
+		value = $bindable(""),
+		onchange,
+		onfocus,
+		onblur,
+	}: Props = $props();

-	$: labelSegments = line.content ? parseColorText(line.content, $themeColors.colorMap) : [];
-	$: options = line.selectOptions || [];
-	$: placeholder = line.inputPlaceholder || 'Select an option...';
-	$: isDisabled = line.inputDisabled || false;
-	$: hasError = line.inputError;
-	$: errorMessage = line.inputErrorMessage || '';
-	$: searchable = line.selectSearchable || false;
+	const labelSegments = $derived(
+		line.content ? parseColorText(line.content, $themeColors.colorMap) : [],
+	);
+	const options = $derived(line.selectOptions || []);
+	const placeholder = $derived(
+		line.inputPlaceholder || "Select an option...",
+	);
+	const isDisabled = $derived(line.inputDisabled || false);
+	const hasError = $derived(line.inputError);
+	const errorMessage = $derived(line.inputErrorMessage || "");
+	const searchable = $derived(line.selectSearchable || false);

-	let isOpen = false;
-	let searchQuery = '';
-	let highlightedIndex = 0;
-	let selectRef: HTMLDivElement;
+	let isOpen = $state(false);
+	let searchQuery = $state("");
+	let highlightedIndex = $state(0);
+	let selectRef: HTMLDivElement | undefined = $state();

-	$: filteredOptions = searchable && searchQuery
-		? options.filter(opt => 
-			opt.label.toLowerCase().includes(searchQuery.toLowerCase()) ||
-			opt.value.toLowerCase().includes(searchQuery.toLowerCase())
-		)
-		: options;
+	const filteredOptions = $derived(
+		searchable && searchQuery
+			? options.filter(
+					(opt) =>
+						opt.label
+							.toLowerCase()
+							.includes(searchQuery.toLowerCase()) ||
+						opt.value
+							.toLowerCase()
+							.includes(searchQuery.toLowerCase()),
+				)
+			: options,
+	);

-	$: selectedOption = options.find(opt => opt.value === value);
-	$: displayValue = selectedOption?.label || '';
+	const selectedOption = $derived(options.find((opt) => opt.value === value));
+	const displayValue = $derived(selectedOption?.label || "");

 	function handleToggle() {
 		if (isDisabled) return;
 		isOpen = !isOpen;
 		if (isOpen) {
 			highlightedIndex = 0;
-			searchQuery = '';
-			dispatch('focus');
+			searchQuery = "";
+			onfocus?.();
 		} else {
-			dispatch('blur');
+			onblur?.();
 		}
 	}

@@ -55,17 +73,17 @@
 		if (isDisabled) return;
 		value = optionValue;
 		isOpen = false;
-		searchQuery = '';
-		dispatch('change', value);
-		dispatch('blur');
+		searchQuery = "";
+		onchange?.(value);
+		onblur?.();
 	}

 	function handleKeydown(e: KeyboardEvent) {
 		if (isDisabled) return;

 		switch (e.key) {
-			case 'Enter':
-			case ' ':
+			case "Enter":
+			case " ":
 				e.preventDefault();
 				if (isOpen && filteredOptions[highlightedIndex]) {
 					handleSelect(filteredOptions[highlightedIndex].value);
@@ -73,31 +91,34 @@
 					handleToggle();
 				}
 				break;
-			case 'ArrowDown':
+			case "ArrowDown":
 				e.preventDefault();
 				if (!isOpen) {
 					isOpen = true;
 				} else {
-					highlightedIndex = Math.min(highlightedIndex + 1, filteredOptions.length - 1);
+					highlightedIndex = Math.min(
+						highlightedIndex + 1,
+						filteredOptions.length - 1,
+					);
 				}
 				break;
-			case 'ArrowUp':
+			case "ArrowUp":
 				e.preventDefault();
 				if (isOpen) {
 					highlightedIndex = Math.max(highlightedIndex - 1, 0);
 				}
 				break;
-			case 'Escape':
+			case "Escape":
 				isOpen = false;
-				searchQuery = '';
+				searchQuery = "";
 				break;
-			case 'Home':
+			case "Home":
 				if (isOpen) {
 					e.preventDefault();
 					highlightedIndex = 0;
 				}
 				break;
-			case 'End':
+			case "End":
 				if (isOpen) {
 					e.preventDefault();
 					highlightedIndex = filteredOptions.length - 1;
@@ -109,7 +130,7 @@
 	function handleClickOutside(e: MouseEvent) {
 		if (selectRef && !selectRef.contains(e.target as Node)) {
 			isOpen = false;
-			searchQuery = '';
+			searchQuery = "";
 		}
 	}

@@ -119,11 +140,11 @@
 	}
 </script>

-<svelte:window on:click={handleClickOutside} />
+<svelte:window onclick={handleClickOutside} />

-<div 
-	class="tui-select" 
-	class:inline={inline}
+<div
+	class="tui-select"
+	class:inline
 	class:open={isOpen}
 	class:error={hasError}
 	class:disabled={isDisabled}
@@ -146,8 +167,8 @@
 			{/each}
 		</label>
 	{/if}
-	
-	<div 
+
+	<div
 		class="select-trigger"
 		role="combobox"
 		aria-expanded={isOpen}
@@ -155,14 +176,14 @@
 		aria-haspopup="listbox"
 		aria-disabled={isDisabled}
 		tabindex={isDisabled ? -1 : 0}
-		on:click={handleToggle}
-		on:keydown={handleKeydown}
+		onclick={handleToggle}
+		onkeydown={handleKeydown}
 	>
 		<span class="select-prompt">❯</span>
 		<span class="select-value" class:placeholder={!selectedOption}>
 			{displayValue || placeholder}
 		</span>
-		<span class="select-arrow">{isOpen ? '▲' : '▼'}</span>
+		<span class="select-arrow">{isOpen ? "▲" : "▼"}</span>
 	</div>

 	{#if isOpen}
@@ -174,15 +195,15 @@
 						type="text"
 						placeholder="Search..."
 						value={searchQuery}
-						on:input={handleSearchInput}
-						on:click|stopPropagation
+						oninput={handleSearchInput}
+						onclick={(e) => e.stopPropagation()}
 					/>
 				</div>
 			{/if}
 			<div class="select-options">
 				{#each filteredOptions as option, i}
 					{@const optionSegments = parseColorText(option.label)}
-					<div 
+					<div
 						class="select-option"
 						class:selected={value === option.value}
 						class:highlighted={i === highlightedIndex}
@@ -191,26 +212,44 @@
 						aria-selected={value === option.value}
 						aria-disabled={option.disabled}
 						tabindex={option.disabled ? -1 : 0}
-						on:click={() => !option.disabled && handleSelect(option.value)}
-						on:keydown={(e) => e.key === 'Enter' && !option.disabled && handleSelect(option.value)}
-						on:mouseenter={() => highlightedIndex = i}
+						onclick={() =>
+							!option.disabled && handleSelect(option.value)}
+						onkeydown={(e) =>
+							e.key === "Enter" &&
+							!option.disabled &&
+							handleSelect(option.value)}
+						onmouseenter={() => (highlightedIndex = i)}
 					>
 						{#if option.icon}
-							<Icon icon={option.icon} width="14" class="option-icon" />
+							<Icon
+								icon={option.icon}
+								width="14"
+								class="option-icon"
+							/>
 						{/if}
 						<span class="option-label">
 							{#each optionSegments as segment}
 								{#if segment.icon}
-									<Icon icon={segment.icon} width="14" class="inline-icon" />
+									<Icon
+										icon={segment.icon}
+										width="14"
+										class="inline-icon"
+									/>
 								{:else if getSegmentStyle(segment)}
-									<span style={getSegmentStyle(segment)}>{segment.text}</span>
+									<span style={getSegmentStyle(segment)}
+										>{segment.text}</span
+									>
 								{:else}
 									{segment.text}
 								{/if}
 							{/each}
 						</span>
 						{#if value === option.value}
-							<Icon icon="mdi:check" width="14" class="check-icon" />
+							<Icon
+								icon="mdi:check"
+								width="14"
+								class="check-icon"
+							/>
 						{/if}
 					</div>
 				{:else}
@@ -269,7 +308,8 @@
 	.tui-select.open .select-trigger,
 	.select-trigger:focus-visible {
 		border-color: var(--select-color);
-		box-shadow: 0 0 0 1px color-mix(in srgb, var(--select-color) 30%, transparent);
+		box-shadow: 0 0 0 1px
+			color-mix(in srgb, var(--select-color) 30%, transparent);
 	}

 	.tui-select.error .select-trigger {
--- a/src/lib/components/tui/TuiTable.svelte
+++ b/src/lib/components/tui/TuiTable.svelte
@@ -1,16 +1,25 @@
 <script lang="ts">
-	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
-	import { themeColors } from '$lib/stores/theme';
-	import type { TerminalLine } from './types';
-	import '$lib/assets/css/tui-table.css';
+	import { getButtonStyle, parseColorText, getSegmentStyle } from "./utils";
+	import { themeColors } from "$lib/stores/theme";
+	import type { TableLine } from "./types";
+	import "$lib/assets/css/tui-table.css";

-	export let line: TerminalLine;
+	interface Props {
+		line: TableLine;
+		inline?: boolean;
+	}

-	$: headers = line.tableHeaders || [];
-	$: rows = line.tableRows || [];
+	let { line, inline = false }: Props = $props();
+
+	const headers = $derived(line.tableHeaders || []);
+	const rows = $derived(line.tableRows || []);
 </script>

-<div class="tui-table-wrapper" style="--table-accent: {getButtonStyle(line.style)}">
+<div
+	class="tui-table-wrapper"
+	class:inline
+	style="--table-accent: {getButtonStyle(line.style)}"
+>
 	{#if line.content}
 		<div class="table-title">{line.content}</div>
 	{/if}
@@ -28,11 +37,16 @@
 			{#each rows as row, i}
 				<tr class:alt={i % 2 === 1}>
 					{#each row as cell}
-						{@const cellSegments = parseColorText(cell, $themeColors.colorMap)}
+						{@const cellSegments = parseColorText(
+							cell,
+							$themeColors.colorMap,
+						)}
 						<td>
 							{#each cellSegments as segment}
 								{#if getSegmentStyle(segment)}
-									<span style={getSegmentStyle(segment)}>{segment.text}</span>
+									<span style={getSegmentStyle(segment)}
+										>{segment.text}</span
+									>
 								{:else}
 									{segment.text}
 								{/if}
--- a/src/lib/components/tui/TuiTextarea.svelte
+++ b/src/lib/components/tui/TuiTextarea.svelte
@@ -1,59 +1,69 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
-	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
-	import { themeColors } from '$lib/stores/theme';
-	import type { TerminalLine } from './types';
-	import { createEventDispatcher } from 'svelte';
-	import '$lib/assets/css/tui-textarea.css';
+	import Icon from "@iconify/svelte";
+	import { getButtonStyle, parseColorText, getSegmentStyle } from "./utils";
+	import { themeColors } from "$lib/stores/theme";
+	import type { TextareaLine } from "./types";
+	import "$lib/assets/css/tui-textarea.css";

-	export let line: TerminalLine;
-	export let inline: boolean = false;
-	export let value: string = '';
+	interface Props {
+		line: TextareaLine;
+		inline?: boolean;
+		value?: string;
+		oninput?: (value: string) => void;
+		onchange?: (value: string) => void;
+		onfocus?: () => void;
+		onblur?: () => void;
+	}

-	const dispatch = createEventDispatcher<{
-		input: string;
-		change: string;
-		focus: void;
-		blur: void;
-	}>();
+	let {
+		line,
+		inline = false,
+		value = $bindable(""),
+		oninput,
+		onchange,
+		onfocus,
+		onblur,
+	}: Props = $props();

-	$: labelSegments = line.content ? parseColorText(line.content, $themeColors.colorMap) : [];
-	$: placeholder = line.inputPlaceholder || '';
-	$: isDisabled = line.inputDisabled || false;
-	$: hasError = line.inputError;
-	$: errorMessage = line.inputErrorMessage || '';
-	$: rows = line.textareaRows || 4;
-	$: maxLength = line.textareaMaxLength;
+	const labelSegments = $derived(
+		line.content ? parseColorText(line.content, $themeColors.colorMap) : [],
+	);
+	const placeholder = $derived(line.inputPlaceholder || "");
+	const isDisabled = $derived(line.inputDisabled || false);
+	const hasError = $derived(line.inputError);
+	const errorMessage = $derived(line.inputErrorMessage || "");
+	const rows = $derived(line.textareaRows || 4);
+	const maxLength = $derived(line.textareaMaxLength);

-	let isFocused = false;
-	let charCount = 0;
+	let isFocused = $state(false);
+	let charCount = $state(value.length);

 	function handleInput(e: Event) {
 		const target = e.target as HTMLTextAreaElement;
 		value = target.value;
 		charCount = value.length;
-		dispatch('input', value);
+		oninput?.(value);
 	}

 	function handleChange(e: Event) {
 		const target = e.target as HTMLTextAreaElement;
-		dispatch('change', target.value);
+		onchange?.(target.value);
 	}

 	function handleFocus() {
 		isFocused = true;
-		dispatch('focus');
+		onfocus?.();
 	}

 	function handleBlur() {
 		isFocused = false;
-		dispatch('blur');
+		onblur?.();
 	}
 </script>

-<div 
-	class="tui-textarea" 
-	class:inline={inline}
+<div
+	class="tui-textarea"
+	class:inline
 	class:focused={isFocused}
 	class:error={hasError}
 	class:disabled={isDisabled}
@@ -75,10 +85,10 @@
 			{/each}
 		</label>
 	{/if}
-	
+
 	<div class="textarea-wrapper">
 		<div class="line-numbers">
-			{#each Array(Math.max(rows, value.split('\n').length)) as _, i}
+			{#each Array(Math.max(rows, value.split("\n").length)) as _, i}
 				<span class="line-num">{i + 1}</span>
 			{/each}
 		</div>
@@ -88,10 +98,10 @@
 			maxlength={maxLength}
 			disabled={isDisabled}
 			bind:value
-			on:input={handleInput}
-			on:change={handleChange}
-			on:focus={handleFocus}
-			on:blur={handleBlur}
+			oninput={handleInput}
+			onchange={handleChange}
+			onfocus={handleFocus}
+			onblur={handleBlur}
 		></textarea>
 	</div>

@@ -146,7 +156,8 @@

 	.tui-textarea.focused .textarea-wrapper {
 		border-color: var(--input-color);
-		box-shadow: 0 0 0 1px color-mix(in srgb, var(--input-color) 30%, transparent);
+		box-shadow: 0 0 0 1px
+			color-mix(in srgb, var(--input-color) 30%, transparent);
 	}

 	.tui-textarea.error .textarea-wrapper {
--- a/src/lib/components/tui/TuiToggle.svelte
+++ b/src/lib/components/tui/TuiToggle.svelte
@@ -1,56 +1,63 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
-	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
-	import { themeColors } from '$lib/stores/theme';
-	import type { TerminalLine } from './types';
-	import { createEventDispatcher } from 'svelte';
-	import '$lib/assets/css/tui-toggle.css';
+	import Icon from "@iconify/svelte";
+	import { getButtonStyle, parseColorText, getSegmentStyle } from "./utils";
+	import { themeColors } from "$lib/stores/theme";
+	import type { ToggleLine } from "./types";
+	import "$lib/assets/css/tui-toggle.css";

-	export let line: TerminalLine;
-	export let inline: boolean = false;
-	export let checked: boolean = false;
+	interface Props {
+		line: ToggleLine;
+		inline?: boolean;
+		checked?: boolean;
+		onchange?: (checked: boolean) => void;
+	}

-	const dispatch = createEventDispatcher<{
-		change: boolean;
-	}>();
+	let {
+		line,
+		inline = false,
+		checked = $bindable(false),
+		onchange,
+	}: Props = $props();

-	$: labelSegments = line.content ? parseColorText(line.content, $themeColors.colorMap) : [];
-	$: isDisabled = line.inputDisabled || false;
-	$: onLabel = line.toggleOnLabel || 'ON';
-	$: offLabel = line.toggleOffLabel || 'OFF';
-	$: showLabels = line.toggleShowLabels !== false;
+	const labelSegments = $derived(
+		line.content ? parseColorText(line.content, $themeColors.colorMap) : [],
+	);
+	const isDisabled = $derived(line.inputDisabled || false);
+	const onLabel = $derived(line.toggleOnLabel || "ON");
+	const offLabel = $derived(line.toggleOffLabel || "OFF");
+	const showLabels = $derived(line.toggleShowLabels !== false);

 	function handleToggle() {
 		if (isDisabled) return;
 		checked = !checked;
-		dispatch('change', checked);
+		onchange?.(checked);
 	}

 	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === ' ' || e.key === 'Enter') {
+		if (e.key === " " || e.key === "Enter") {
 			e.preventDefault();
 			handleToggle();
 		}
 	}
 </script>

-<div 
-	class="tui-toggle" 
-	class:inline={inline}
-	class:checked={checked}
+<div
+	class="tui-toggle"
+	class:inline
+	class:checked
 	class:disabled={isDisabled}
 	style="--toggle-color: {getButtonStyle(line.style)}"
 	role="switch"
 	aria-checked={checked}
 	aria-disabled={isDisabled}
 	tabindex={isDisabled ? -1 : 0}
-	on:click={handleToggle}
-	on:keydown={handleKeydown}
+	onclick={handleToggle}
+	onkeydown={handleKeydown}
 >
 	{#if line.icon}
 		<Icon icon={line.icon} width="14" class="toggle-icon" />
 	{/if}
-	
+
 	{#if line.content}
 		<span class="toggle-label">
 			{#each labelSegments as segment}
@@ -70,7 +77,7 @@
 			<span class="toggle-off-label">{offLabel}</span>
 		{/if}
 		<span class="toggle-switch">
-			<span class="toggle-knob">{checked ? '●' : '○'}</span>
+			<span class="toggle-knob">{checked ? "●" : "○"}</span>
 		</span>
 		{#if showLabels}
 			<span class="toggle-on-label">{onLabel}</span>
--- a/src/lib/components/tui/TuiTooltip.svelte
+++ b/src/lib/components/tui/TuiTooltip.svelte
@@ -1,44 +1,48 @@
 <script lang="ts">
-	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
-	import type { TerminalLine } from './types';
-	import '$lib/assets/css/tui-tooltip.css';
+	import { getButtonStyle, parseColorText, getSegmentStyle } from "./utils";
+	import type { TooltipLine } from "./types";
+	import "$lib/assets/css/tui-tooltip.css";

-	export let line: TerminalLine;
+	interface Props {
+		line: TooltipLine;
+	}

-	let showTooltip = false;
-	let triggerEl: HTMLSpanElement;
-	let tooltipStyle = '';
+	let { line }: Props = $props();

-	$: contentSegments = parseColorText(line.content);
-	$: position = line.tooltipPosition || 'top';
+	let showTooltip = $state(false);
+	let triggerEl: HTMLSpanElement | undefined = $state();
+	let tooltipStyle = $state("");
+
+	const contentSegments = $derived(parseColorText(line.content));
+	const position = $derived(line.tooltipPosition || "top");

 	function updateTooltipPosition() {
 		if (!triggerEl) return;
-		
+
 		const rect = triggerEl.getBoundingClientRect();
 		const scrollY = window.scrollY;
 		const scrollX = window.scrollX;
-		
+
 		let top = 0;
 		let left = 0;
-		
+
 		switch (position) {
-			case 'top':
+			case "top":
 				top = rect.top + scrollY - 8;
 				left = rect.left + scrollX + rect.width / 2;
 				tooltipStyle = `top: ${top}px; left: ${left}px; transform: translateX(-50%) translateY(-100%);`;
 				break;
-			case 'bottom':
+			case "bottom":
 				top = rect.bottom + scrollY + 8;
 				left = rect.left + scrollX + rect.width / 2;
 				tooltipStyle = `top: ${top}px; left: ${left}px; transform: translateX(-50%);`;
 				break;
-			case 'left':
+			case "left":
 				top = rect.top + scrollY + rect.height / 2;
 				left = rect.left + scrollX - 8;
 				tooltipStyle = `top: ${top}px; left: ${left}px; transform: translateX(-100%) translateY(-50%);`;
 				break;
-			case 'right':
+			case "right":
 				top = rect.top + scrollY + rect.height / 2;
 				left = rect.right + scrollX + 8;
 				tooltipStyle = `top: ${top}px; left: ${left}px; transform: translateY(-50%);`;
@@ -56,16 +60,16 @@
 	}
 </script>

-<span 
-	class="tui-tooltip-trigger" 
+<span
+	class="tui-tooltip-trigger"
 	style="--tooltip-color: {getButtonStyle(line.style)}"
 	bind:this={triggerEl}
-	on:mouseenter={handleMouseEnter}
-	on:mouseleave={handleMouseLeave}
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
 	role="button"
 	tabindex="0"
-	on:focus={handleMouseEnter}
-	on:blur={handleMouseLeave}
+	onfocus={handleMouseEnter}
+	onblur={handleMouseLeave}
 >
 	<span class="trigger-text">
 		{#each contentSegments as segment}
@@ -80,7 +84,10 @@
 </span>

 {#if showTooltip && line.tooltipText}
-	<span class="tooltip {position}" style="{tooltipStyle} --tooltip-color: {getButtonStyle(line.style)}">
+	<span
+		class="tooltip {position}"
+		style="{tooltipStyle} --tooltip-color: {getButtonStyle(line.style)}"
+	>
 		{line.tooltipText}
 		<span class="tooltip-arrow"></span>
 	</span>
--- a/src/lib/components/tui/terminal-api.ts
+++ b/src/lib/components/tui/terminal-api.ts
@@ -127,7 +127,8 @@ export function createTerminalAPI(options: TerminalAPIOptions): TerminalAPI {
 		update: (index: number, updates: Partial<TerminalLine>) => {
 			const state = getState();
 			if (index < 0 || index >= state.lines.length) return;
-			state.lines[index] = { ...state.lines[index], ...updates };
+			// Cast to TerminalLine to allow partial updates across union types
+			state.lines[index] = { ...state.lines[index], ...updates } as TerminalLine;
 			refreshDisplayedLines();
 		},

@@ -182,7 +183,8 @@ export function createTerminalAPI(options: TerminalAPIOptions): TerminalAPI {
 			const state = getState();
 			const index = state.lines.findIndex(line => line.id === id);
 			if (index !== -1) {
-				state.lines[index] = { ...state.lines[index], ...updates };
+				// Cast to TerminalLine to allow partial updates across union types
+				state.lines[index] = { ...state.lines[index], ...updates } as TerminalLine;
 				refreshDisplayedLines();
 			}
 		},
@@ -207,7 +209,7 @@ export function createTerminalAPI(options: TerminalAPIOptions): TerminalAPI {
 		skip: () => {
 			const state = getState();
 			if (!state.isTyping) return;
-			
+
 			const colorMap = getColorMap();
 			const displayedLines = state.lines.map(line => {
 				const parsed = parseLine(line, colorMap);
--- a/src/lib/components/tui/types.ts
+++ b/src/lib/components/tui/types.ts
@@ -4,7 +4,7 @@ import type { Card } from '$lib/config';
 // Re-export TextSegment for convenience
 export type { TextSegment };

-export type LineType = 
+export type LineType =
 	| 'command' | 'output' | 'prompt' | 'error' | 'success' | 'info' | 'warning'
 	| 'image' | 'blank' | 'header' | 'button' | 'divider' | 'link'
 	| 'card' | 'progress' | 'accordion' | 'table' | 'tooltip' | 'cardgrid'
@@ -19,6 +19,194 @@ export interface FormOption {
 	disabled?: boolean;
 }

+// Base interface for all terminal lines
+export interface BaseTerminalLine {
+	type: LineType;
+	content: string;
+	id?: string;
+	inline?: boolean;
+	display?: 'flex' | 'block' | 'grid' | 'inline';
+	delay?: number;
+	style?: 'primary' | 'secondary' | 'accent' | 'warning' | 'error';
+}
+
+// Specific line types
+export interface CommandLine extends BaseTerminalLine {
+	type: 'command';
+}
+
+export interface OutputLine extends BaseTerminalLine {
+	type: 'output';
+}
+
+export interface PromptLine extends BaseTerminalLine {
+	type: 'prompt';
+}
+
+export interface ErrorLine extends BaseTerminalLine {
+	type: 'error';
+}
+
+export interface SuccessLine extends BaseTerminalLine {
+	type: 'success';
+}
+
+export interface InfoLine extends BaseTerminalLine {
+	type: 'info';
+}
+
+export interface WarningLine extends BaseTerminalLine {
+	type: 'warning';
+}
+
+export interface BlankLine extends BaseTerminalLine {
+	type: 'blank';
+}
+
+export interface DividerLine extends BaseTerminalLine {
+	type: 'divider';
+}
+
+export interface HeaderLine extends BaseTerminalLine {
+	type: 'header';
+}
+
+export interface ButtonLine extends BaseTerminalLine {
+	type: 'button';
+	action?: () => void;
+	href?: string;
+	icon?: string;
+	external?: boolean;
+}
+
+export interface LinkLine extends BaseTerminalLine {
+	type: 'link';
+	href: string;
+	external?: boolean;
+	icon?: string;
+}
+
+export interface ImageLine extends BaseTerminalLine {
+	type: 'image';
+	image: string;
+	imageAlt?: string;
+	imageWidth?: number;
+}
+
+export interface CardLine extends BaseTerminalLine {
+	type: 'card';
+	cardTitle?: string;
+	cardFooter?: string;
+	icon?: string;
+	image?: string;
+	imageAlt?: string;
+	children?: TerminalLine[];
+}
+
+export interface ProgressLine extends BaseTerminalLine {
+	type: 'progress';
+	progress: number; // 0-100
+	progressLabel?: string;
+}
+
+export interface AccordionLine extends BaseTerminalLine {
+	type: 'accordion';
+	accordionItems?: { title: string; content: string }[];
+	children?: TerminalLine[];
+	accordionOpen?: boolean;
+}
+
+export interface TableLine extends BaseTerminalLine {
+	type: 'table';
+	tableHeaders: string[];
+	tableRows: string[][];
+}
+
+export interface TooltipLine extends BaseTerminalLine {
+	type: 'tooltip';
+	tooltipText: string;
+	tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+export interface CardGridLine extends BaseTerminalLine {
+	type: 'cardgrid';
+	cards: Card[];
+}
+
+export interface InputLine extends BaseTerminalLine {
+	type: 'input';
+	inputPlaceholder?: string;
+	inputType?: 'text' | 'email' | 'password' | 'number' | 'url' | 'tel' | 'search';
+	inputDisabled?: boolean;
+	inputError?: boolean;
+	inputErrorMessage?: string;
+	inputPrefix?: string;
+	inputSuffix?: string;
+	icon?: string;
+}
+
+export interface TextareaLine extends BaseTerminalLine {
+	type: 'textarea';
+	inputPlaceholder?: string;
+	textareaRows?: number;
+	textareaMaxLength?: number;
+	inputDisabled?: boolean;
+	inputError?: boolean;
+	inputErrorMessage?: string;
+	icon?: string;
+}
+
+export interface CheckboxLine extends BaseTerminalLine {
+	type: 'checkbox';
+	checkboxIndeterminate?: boolean;
+	inputDisabled?: boolean;
+	icon?: string;
+}
+
+export interface RadioLine extends BaseTerminalLine {
+	type: 'radio';
+	radioOptions: FormOption[];
+	radioHorizontal?: boolean;
+	inputDisabled?: boolean;
+	icon?: string;
+}
+
+export interface SelectLine extends BaseTerminalLine {
+	type: 'select';
+	selectOptions: FormOption[];
+	selectSearchable?: boolean;
+	inputPlaceholder?: string;
+	inputDisabled?: boolean;
+	inputError?: boolean;
+	inputErrorMessage?: string;
+	icon?: string;
+}
+
+export interface ToggleLine extends BaseTerminalLine {
+	type: 'toggle';
+	toggleOnLabel?: string;
+	toggleOffLabel?: string;
+	toggleShowLabels?: boolean;
+	inputDisabled?: boolean;
+	icon?: string;
+}
+
+export interface GroupLine extends BaseTerminalLine {
+	type: 'group';
+	children: TerminalLine[];
+	groupDirection?: 'row' | 'column';
+	groupAlign?: 'start' | 'center' | 'end';
+	groupGap?: string;
+}
+
+// Discriminated union of all line types
+export type TerminalLine =
+	| CommandLine | OutputLine | PromptLine | ErrorLine | SuccessLine | InfoLine | WarningLine
+	| BlankLine | DividerLine | HeaderLine | ButtonLine | LinkLine | ImageLine
+	| CardLine | ProgressLine | AccordionLine | TableLine | TooltipLine | CardGridLine
+	| InputLine | TextareaLine | CheckboxLine | RadioLine | SelectLine | ToggleLine
+	| GroupLine;
+
 // Terminal API for reactive manipulation
 export interface TerminalAPI {
 	/** Clear all lines from the terminal */
@@ -63,74 +251,6 @@ export interface TerminalAPI {
 	restart: () => void;
 }

-export interface TerminalLine {
-	type: LineType;
-	content: string;
-	delay?: number;
-	image?: string;
-	imageAlt?: string;
-	imageWidth?: number;
-	// For anchor scrolling (e.g., #skills)
-	id?: string;
-	// For inline rendering (multiple elements on same line)
-	inline?: boolean;
-	// For button and link types
-	action?: () => void;
-	href?: string;
-	icon?: string;
-	external?: boolean; // Opens in new tab
-	// For styling
-	style?: 'primary' | 'secondary' | 'accent' | 'warning' | 'error';
-	// For card type
-	cardTitle?: string;
-	cardFooter?: string;
-	// For progress type
-	progress?: number; // 0-100
-	progressLabel?: string;
-	// For accordion type
-	accordionOpen?: boolean;
-	accordionItems?: { title: string; content: string }[];
-	// For table type
-	tableHeaders?: string[];
-	tableRows?: string[][];
-	// For tooltip type
-	tooltipText?: string;
-	tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
-	// For cardgrid type
-	cards?: Card[];
-	// For form input types (input, textarea, checkbox, radio, select, toggle)
-	inputPlaceholder?: string;
-	inputType?: 'text' | 'email' | 'password' | 'number' | 'url' | 'tel' | 'search';
-	inputDisabled?: boolean;
-	inputError?: boolean;
-	inputErrorMessage?: string;
-	inputPrefix?: string;
-	inputSuffix?: string;
-	// For textarea type
-	textareaRows?: number;
-	textareaMaxLength?: number;
-	// For checkbox type
-	checkboxIndeterminate?: boolean;
-	// For radio type
-	radioOptions?: FormOption[];
-	radioHorizontal?: boolean;
-	// For select type
-	selectOptions?: FormOption[];
-	selectSearchable?: boolean;
-	// For toggle type
-	toggleOnLabel?: string;
-	toggleOffLabel?: string;
-	toggleShowLabels?: boolean;
-	// For group type - contains child lines rendered together
-	children?: TerminalLine[];
-	// Group layout direction
-	groupDirection?: 'row' | 'column';
-	// Group alignment
-	groupAlign?: 'start' | 'center' | 'end';
-	// Group gap
-	groupGap?: string;
-}
-
 // Pre-parsed line with segments ready for rendering
 export interface ParsedLine {
 	line: TerminalLine;
--- a/src/lib/config/terminal.ts
+++ b/src/lib/config/terminal.ts
@@ -221,9 +221,9 @@ export const modelViewer = {
 // ============================================================================

 export const particles = {
-	count: 600,
+	count: 400,
 	spreadArea: 20,
-	size: 0.05,
+	size: 0.1,
 	velocityRange: 0.01,

 	// Opacity
--- a/src/lib/pages/components.ts
+++ b/src/lib/pages/components.ts
@@ -28,19 +28,19 @@ export const lines: TerminalLine[] = [
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'TEXT FORMATTING', id: 'text-formatting' },
    { type: 'blank', content: '' },
-    
+
    { type: 'info', content: '(&blue,bold)Colors(&)' },
    { type: 'output', content: '(&red)red(&) (&green)green(&) (&yellow)yellow(&) (&blue)blue(&) (&magenta)magenta(&) (&cyan)cyan(&) (&orange)orange(&) (&pink)pink(&)' },
    { type: 'blank', content: '' },
-    
+
    { type: 'info', content: '(&blue,bold)Semantic Colors(&)' },
    { type: 'output', content: '(&primary)primary(&) (&accent)accent(&) (&muted)muted(&) (&error)error(&) (&success)success(&) (&warning)warning(&) (&info)info(&)' },
    { type: 'blank', content: '' },
-    
+
    { type: 'info', content: '(&blue,bold)Text Styles(&)' },
    { type: 'output', content: '(&bold)bold(&) (&dim)dim(&) (&italic)italic(&) (&underline)underline(&) (&strikethrough)strikethrough(&)' },
    { type: 'blank', content: '' },
-    
+
    { type: 'info', content: '(&blue,bold)Combined Styles(&)' },
    { type: 'output', content: '(&bold,red)bold red(&) (&italic,cyan)italic cyan(&) (&bold,underline,yellow)bold underline yellow(&)' },
    { type: 'blank', content: '' },
@@ -58,7 +58,7 @@ export const lines: TerminalLine[] = [
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'LINE TYPES' },
    { type: 'blank', content: '' },
-    
+
    { type: 'command', content: 'echo "This is a command line"' },
    { type: 'output', content: 'This is an output line' },
    { type: 'info', content: 'This is an info line' },
@@ -72,39 +72,39 @@ export const lines: TerminalLine[] = [
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'BUTTONS', id: 'buttons' },
    { type: 'blank', content: '' },
-    
+
    { type: 'info', content: '(&blue,bold)Button Styles(&)' },
-    { 
-        type: 'button', 
-        content: 'Primary Button', 
+    {
+        type: 'button',
+        content: 'Primary Button',
        icon: 'mdi:check',
        style: 'primary',
        action: () => console.log('Primary clicked')
    },
-    { 
-        type: 'button', 
-        content: 'Secondary Button', 
+    {
+        type: 'button',
+        content: 'Secondary Button',
        icon: 'mdi:information',
        style: 'secondary',
        action: () => console.log('Secondary clicked')
    },
-    { 
-        type: 'button', 
-        content: 'Accent Button', 
+    {
+        type: 'button',
+        content: 'Accent Button',
        icon: 'mdi:star',
        style: 'accent',
        action: () => console.log('Accent clicked')
    },
-    { 
-        type: 'button', 
-        content: 'Warning Button', 
+    {
+        type: 'button',
+        content: 'Warning Button',
        icon: 'mdi:alert',
        style: 'warning',
        action: () => console.log('Warning clicked')
    },
-    { 
-        type: 'button', 
-        content: 'Error Button', 
+    {
+        type: 'button',
+        content: 'Error Button',
        icon: 'mdi:close-circle',
        style: 'error',
        action: () => console.log('Error clicked')
@@ -112,17 +112,17 @@ export const lines: TerminalLine[] = [
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Link Buttons(&)' },
-    { 
-        type: 'button', 
-        content: 'External Link (GitHub)', 
+    {
+        type: 'button',
+        content: 'External Link (GitHub)',
        icon: 'mdi:github',
        style: 'primary',
        href: 'https://github.com',
        external: true
    },
-    { 
-        type: 'button', 
-        content: 'Internal Link (Home)', 
+    {
+        type: 'button',
+        content: 'Internal Link (Home)',
        icon: 'mdi:home',
        style: 'accent',
        href: '/'
@@ -134,17 +134,17 @@ export const lines: TerminalLine[] = [
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'LINKS' },
    { type: 'blank', content: '' },
-    
-    { 
-        type: 'link', 
-        content: 'Click here to visit GitHub', 
+
+    {
+        type: 'link',
+        content: 'Click here to visit GitHub',
        href: 'https://github.com',
        icon: 'mdi:github',
        external: true
    },
-    { 
-        type: 'link', 
-        content: 'Go to portfolio page', 
+    {
+        type: 'link',
+        content: 'Go to portfolio page',
        href: '/portfolio',
        icon: 'mdi:folder'
    },
@@ -155,28 +155,28 @@ export const lines: TerminalLine[] = [
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'PROGRESS BARS' },
    { type: 'blank', content: '' },
-    
-    { 
-        type: 'progress', 
-        content: 'Loading...', 
+
+    {
+        type: 'progress',
+        content: 'Loading...',
        progress: 25,
        progressLabel: 'Installing packages'
    },
-    { 
-        type: 'progress', 
-        content: '', 
+    {
+        type: 'progress',
+        content: '',
        progress: 50,
        progressLabel: 'Building project'
    },
-    { 
-        type: 'progress', 
-        content: '', 
+    {
+        type: 'progress',
+        content: '',
        progress: 75,
        progressLabel: 'Running tests'
    },
-    { 
-        type: 'progress', 
-        content: '', 
+    {
+        type: 'progress',
+        content: '',
        progress: 100,
        progressLabel: 'Complete!'
    },
@@ -187,9 +187,9 @@ export const lines: TerminalLine[] = [
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'GROUPS' },
    { type: 'blank', content: '' },
-    
+
    { type: 'info', content: '(&blue,bold)Horizontal Group (Row)(&)' },
-    { 
+    {
        type: 'group',
        content: '',
        groupDirection: 'row',
@@ -204,7 +204,7 @@ export const lines: TerminalLine[] = [
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Vertical Group (Column)(&)' },
-    { 
+    {
        type: 'group',
        content: '',
        groupDirection: 'column',
@@ -220,7 +220,7 @@ export const lines: TerminalLine[] = [
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Group with Links(&)' },
-    { 
+    {
        type: 'group',
        content: '',
        groupAlign: 'start',
@@ -235,51 +235,141 @@ export const lines: TerminalLine[] = [
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Nested Groups(&)' },
-    { 
+    {
        type: 'group',
        content: '',
        groupDirection: 'column',
        groupGap: '0.5rem',
        children: [
            { type: 'header', content: '(&cyan,bold)Settings Panel(&)' },
-            { 
+            {
                type: 'group',
                content: '',
                groupDirection: 'row',
                groupGap: '1rem',
                children: [
                    { type: 'output', content: '(&muted)Theme:(&)', inline: true },
-                    { type: 'button', content: 'Dark', icon: 'mdi:weather-night', style: 'primary', inline: true, action: () => {} },
-                    { type: 'button', content: 'Light', icon: 'mdi:weather-sunny', style: 'accent', inline: true, action: () => {} }
+                    { type: 'button', content: 'Dark', icon: 'mdi:weather-night', style: 'primary', inline: true, action: () => { } },
+                    { type: 'button', content: 'Light', icon: 'mdi:weather-sunny', style: 'accent', inline: true, action: () => { } }
                ]
            },
-            { 
+            {
                type: 'group',
                content: '',
                groupDirection: 'row',
                groupGap: '1rem',
                children: [
                    { type: 'output', content: '(&muted)Speed:(&)', inline: true },
-                    { type: 'button', content: 'Slow', style: 'secondary', inline: true, action: () => {} },
-                    { type: 'button', content: 'Normal', style: 'primary', inline: true, action: () => {} },
-                    { type: 'button', content: 'Fast', style: 'accent', inline: true, action: () => {} }
+                    { type: 'button', content: 'Slow', style: 'secondary', inline: true, action: () => { } },
+                    { type: 'button', content: 'Normal', style: 'primary', inline: true, action: () => { } },
+                    { type: 'button', content: 'Fast', style: 'accent', inline: true, action: () => { } }
                ]
            }
        ]
    },
    { type: 'blank', content: '' },

+    // ═══════════════════════════════════════════════════════════════
+    // INLINE COMPONENTS
+    // ═══════════════════════════════════════════════════════════════
+    { type: 'divider', content: 'INLINE COMPONENTS' },
+    { type: 'blank', content: '' },
+
+    { type: 'info', content: '(&blue,bold)Inline Cards(&)' },
+    { type: 'output', content: '(&muted)Cards can be displayed inline for compact layouts:(&)' },
+    {
+        type: 'group',
+        content: '',
+        groupDirection: 'row',
+        groupAlign: 'start',
+        groupGap: '1rem',
+        children: [
+            {
+                type: 'card',
+                content: 'Small card 1',
+                cardTitle: 'Card A',
+                inline: true
+            },
+            {
+                type: 'card',
+                content: 'Small card 2',
+                cardTitle: 'Card B',
+                style: 'accent',
+                inline: true
+            },
+            {
+                type: 'card',
+                content: 'Small card 3',
+                cardTitle: 'Card C',
+                style: 'warning',
+                inline: true
+            }
+        ]
+    },
+    { type: 'blank', content: '' },
+
+    { type: 'info', content: '(&blue,bold)Inline Tables(&)' },
+    { type: 'output', content: '(&muted)Tables can also be inline:(&)' },
+    {
+        type: 'group',
+        content: '',
+        groupDirection: 'row',
+        groupAlign: 'start',
+        groupGap: '1rem',
+        children: [
+            {
+                type: 'table',
+                content: 'Server 1',
+                tableHeaders: ['Metric', 'Value'],
+                tableRows: [['CPU', '45%'], ['RAM', '2.4GB']],
+                inline: true
+            },
+            {
+                type: 'table',
+                content: 'Server 2',
+                tableHeaders: ['Metric', 'Value'],
+                tableRows: [['CPU', '12%'], ['RAM', '1.1GB']],
+                inline: true
+            }
+        ]
+    },
+    { type: 'blank', content: '' },
+
+    { type: 'info', content: '(&blue,bold)Inline Accordions(&)' },
+    {
+        type: 'group',
+        content: '',
+        groupDirection: 'row',
+        groupAlign: 'start',
+        groupGap: '1rem',
+        children: [
+            {
+                type: 'accordion',
+                content: 'Details A',
+                accordionItems: [{ title: 'More Info', content: 'Hidden details here.' }],
+                inline: true
+            },
+            {
+                type: 'accordion',
+                content: 'Details B',
+                accordionItems: [{ title: 'More Info', content: 'Hidden details here.' }],
+                inline: true
+            }
+        ]
+    },
+    { type: 'blank', content: '' },
+
    // ═══════════════════════════════════════════════════════════════
    // IMAGES
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'IMAGES' },
    { type: 'blank', content: '' },
-    
+
    { type: 'info', content: '(&blue,bold)Image with Caption(&)' },
-    { 
-        type: 'image', 
-        content: 'User Avatar', 
-        image: user.avatar, 
+    {
+        type: 'image',
+        content: 'User Avatar',
+        image: user.avatar,
        imageAlt: 'Profile picture',
        imageWidth: 100
    },
@@ -290,23 +380,43 @@ export const lines: TerminalLine[] = [
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'CARDS' },
    { type: 'blank', content: '' },
-    
-    { 
-        type: 'card', 
+
+    {
+        type: 'card',
        content: 'This is card content. Cards can contain formatted text and are great for highlighting information.',
        cardTitle: 'Card Title',
        cardFooter: 'Card Footer'
    },
    { type: 'blank', content: '' },
+    {
+        type: 'card',
+        content: 'Cards can now include images and icons directly.',
+        cardTitle: 'Rich Card',
+        cardFooter: 'Updated Feature',
+        icon: 'mdi:star',
+        image: 'https://placehold.co/600x200/1e1e2e/cdd6f4?text=Card+Image',
+        imageAlt: 'Placeholder image',
+        children: [
+            {
+                type: 'button',
+                content: 'View on GitHub',
+                href: 'https://github.com/adithyakrishnan2004',
+                icon: 'mdi:github',
+                style: 'primary'
+            }
+        ],
+        display: 'flex'
+    },
+    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // TABLES
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'TABLES' },
    { type: 'blank', content: '' },
-    
-    { 
-        type: 'table', 
+
+    {
+        type: 'table',
        content: '',
        tableHeaders: sampleTableHeaders,
        tableRows: sampleTableRows
@@ -318,9 +428,9 @@ export const lines: TerminalLine[] = [
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'ACCORDIONS' },
    { type: 'blank', content: '' },
-    
-    { 
-        type: 'accordion', 
+
+    {
+        type: 'accordion',
        content: '',
        accordionItems: sampleAccordionItems,
        accordionOpen: false
@@ -332,9 +442,9 @@ export const lines: TerminalLine[] = [
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'TOOLTIPS' },
    { type: 'blank', content: '' },
-    
-    { 
-        type: 'tooltip', 
+
+    {
+        type: 'tooltip',
        content: 'Hover over me for more info!',
        tooltipText: 'This is tooltip content that appears on hover.',
        tooltipPosition: 'top'
@@ -346,7 +456,7 @@ export const lines: TerminalLine[] = [
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'DIVIDER STYLES' },
    { type: 'blank', content: '' },
-    
+
    { type: 'output', content: '(&muted)Dividers are simple horizontal separators with optional text:(&)' },
    { type: 'divider', content: 'SECTION A' },
    { type: 'output', content: '(&muted)Content for section A...(&)' },
@@ -363,39 +473,39 @@ export const lines: TerminalLine[] = [
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Text Input(&)' },
-    { 
-        type: 'input', 
+    {
+        type: 'input',
        content: 'Username:',
        icon: 'mdi:account',
        inputPlaceholder: 'Enter your username',
        style: 'primary'
    },
-    { 
-        type: 'input', 
+    {
+        type: 'input',
        content: 'Email:',
        icon: 'mdi:email',
        inputPlaceholder: 'you@example.com',
        inputType: 'email',
        style: 'accent'
    },
-    { 
-        type: 'input', 
+    {
+        type: 'input',
        content: 'With prefix/suffix:',
        inputPlaceholder: '100',
        inputPrefix: '$',
        inputSuffix: '.00',
        inputType: 'number'
    },
-    { 
-        type: 'input', 
+    {
+        type: 'input',
        content: 'Error state:',
        inputPlaceholder: 'Invalid input',
        inputError: true,
        inputErrorMessage: 'This field is required',
        style: 'error'
    },
-    { 
-        type: 'input', 
+    {
+        type: 'input',
        content: 'Disabled:',
        inputPlaceholder: 'Cannot edit',
        inputDisabled: true
@@ -409,16 +519,16 @@ export const lines: TerminalLine[] = [
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Multi-line Text Area(&)' },
-    { 
-        type: 'textarea', 
+    {
+        type: 'textarea',
        content: 'Message:',
        icon: 'mdi:message-text',
        inputPlaceholder: 'Type your message here...',
        textareaRows: 4,
        style: 'primary'
    },
-    { 
-        type: 'textarea', 
+    {
+        type: 'textarea',
        content: 'With character limit:',
        inputPlaceholder: 'Limited to 100 characters',
        textareaRows: 3,
@@ -426,6 +536,16 @@ export const lines: TerminalLine[] = [
        style: 'accent'
    },
    { type: 'blank', content: '' },
+    {
+        type: 'textarea',
+        content: 'Error state:',
+        inputPlaceholder: 'Invalid input...',
+        textareaRows: 2,
+        style: 'error',
+        inputError: true,
+        inputErrorMessage: 'Message is too short'
+    },
+    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // CHECKBOX
@@ -434,25 +554,25 @@ export const lines: TerminalLine[] = [
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Checkbox Options(&)' },
-    { 
-        type: 'checkbox', 
+    {
+        type: 'checkbox',
        content: 'Enable notifications',
        icon: 'mdi:bell',
        style: 'primary'
    },
-    { 
-        type: 'checkbox', 
+    {
+        type: 'checkbox',
        content: 'Accept terms and conditions',
        style: 'accent'
    },
-    { 
-        type: 'checkbox', 
+    {
+        type: 'checkbox',
        content: 'Indeterminate state',
        checkboxIndeterminate: true,
        style: 'warning'
    },
-    { 
-        type: 'checkbox', 
+    {
+        type: 'checkbox',
        content: 'Disabled checkbox',
        inputDisabled: true
    },
@@ -465,8 +585,8 @@ export const lines: TerminalLine[] = [
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Radio Group (Vertical)(&)' },
-    { 
-        type: 'radio', 
+    {
+        type: 'radio',
        content: 'Select theme:',
        icon: 'mdi:palette',
        style: 'primary',
@@ -479,8 +599,8 @@ export const lines: TerminalLine[] = [
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Radio Group (Horizontal)(&)' },
-    { 
-        type: 'radio', 
+    {
+        type: 'radio',
        content: 'Size:',
        style: 'accent',
        radioHorizontal: true,
@@ -500,8 +620,8 @@ export const lines: TerminalLine[] = [
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Basic Select(&)' },
-    { 
-        type: 'select', 
+    {
+        type: 'select',
        content: 'Country:',
        icon: 'mdi:earth',
        inputPlaceholder: 'Select a country...',
@@ -517,8 +637,8 @@ export const lines: TerminalLine[] = [
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Searchable Select(&)' },
-    { 
-        type: 'select', 
+    {
+        type: 'select',
        content: 'Programming Language:',
        icon: 'mdi:code-braces',
        inputPlaceholder: 'Search languages...',
@@ -535,6 +655,18 @@ export const lines: TerminalLine[] = [
        ]
    },
    { type: 'blank', content: '' },
+    {
+        type: 'select',
+        content: 'Error state:',
+        inputPlaceholder: 'Select something...',
+        style: 'error',
+        inputError: true,
+        inputErrorMessage: 'Selection required',
+        selectOptions: [
+            { value: '1', label: 'Option 1' }
+        ]
+    },
+    { type: 'blank', content: '' },

    // ═══════════════════════════════════════════════════════════════
    // TOGGLE SWITCH
@@ -543,36 +675,36 @@ export const lines: TerminalLine[] = [
    { type: 'blank', content: '' },

    { type: 'info', content: '(&blue,bold)Toggle Options(&)' },
-    { 
-        type: 'toggle', 
+    {
+        type: 'toggle',
        content: 'Dark Mode',
        icon: 'mdi:theme-light-dark',
        style: 'primary'
    },
-    { 
-        type: 'toggle', 
+    {
+        type: 'toggle',
        content: 'Airplane Mode',
        icon: 'mdi:airplane',
        style: 'accent',
        toggleOnLabel: 'ON',
        toggleOffLabel: 'OFF'
    },
-    { 
-        type: 'toggle', 
+    {
+        type: 'toggle',
        content: 'Custom Labels',
        icon: 'mdi:toggle-switch',
        style: 'warning',
        toggleOnLabel: 'YES',
        toggleOffLabel: 'NO'
    },
-    { 
-        type: 'toggle', 
+    {
+        type: 'toggle',
        content: 'No Labels',
        toggleShowLabels: false,
        style: 'accent'
    },
-    { 
-        type: 'toggle', 
+    {
+        type: 'toggle',
        content: 'Disabled Toggle',
        inputDisabled: true
    },
@@ -583,7 +715,7 @@ export const lines: TerminalLine[] = [
    // ═══════════════════════════════════════════════════════════════
    { type: 'divider', content: 'USAGE' },
    { type: 'blank', content: '' },
-    
+
    { type: 'info', content: '(&blue,bold)Code Example(&)' },
    { type: 'output', content: "(&muted)// Text formatting(&)" },
    { type: 'output', content: "{ type: 'output', content: '(&green)colored text(&)' }" },
@@ -609,38 +741,38 @@ export const lines: TerminalLine[] = [
    // ═══════════════════════════════════════════════════════════════
    { 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(&)" },
@@ -648,7 +780,7 @@ export const lines: TerminalLine[] = [
    { 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(&)';" },
@@ -664,6 +796,63 @@ export const lines: TerminalLine[] = [
    { type: 'output', content: "terminal?.write({ type: '(&green)success(&)', content: '(&green)Done!(&)' });" },
    { type: 'blank', content: '' },

+    // ═══════════════════════════════════════════════════════════════
+    // DISPLAY & NESTING
+    // ═══════════════════════════════════════════════════════════════
+    { type: 'divider', content: 'DISPLAY & NESTING' },
+    { type: 'blank', content: '' },
+
+    { type: 'info', content: '(&blue,bold)Inline Grouping Logic(&)' },
+    { type: 'output', content: '(&muted)Consecutive inline elements are grouped. Non-consecutive are separated.(&)' },
+    { type: 'output', content: '(&muted)1(&)', inline: true },
+    { type: 'output', content: '(&muted)2(&)', inline: true },
+    { type: 'blank', content: '' },
+    { type: 'output', content: '(&muted)3(&)', inline: true },
+    { type: 'output', content: '(&muted)4(&)', inline: true },
+    { type: 'blank', content: '' },
+
+    { type: 'info', content: '(&blue,bold)Card with Nested Children (Grid)(&)' },
+    {
+        type: 'card',
+        content: 'This card contains other cards in a grid layout.',
+        cardTitle: 'Parent Card (Grid)',
+        display: 'grid',
+        children: [
+            { type: 'card', content: 'Child 1', cardTitle: 'C1' },
+            { type: 'card', content: 'Child 2', cardTitle: 'C2' },
+            { type: 'card', content: 'Child 3', cardTitle: 'C3' },
+            { type: 'card', content: 'Child 4', cardTitle: 'C4' }
+        ]
+    },
+    { type: 'blank', content: '' },
+
+    { type: 'info', content: '(&blue,bold)Accordion with Nested Children (Flex)(&)' },
+    {
+        type: 'accordion',
+        content: 'Open to see nested items',
+        display: 'flex',
+        children: [
+            { type: 'button', content: 'Action 1', style: 'primary', icon: 'mdi:check' },
+            { type: 'button', content: 'Action 2', style: 'secondary', icon: 'mdi:close' },
+            { type: 'button', content: 'Action 3', style: 'accent', icon: 'mdi:star' }
+        ]
+    },
+    { type: 'blank', content: '' },
+
+    { type: 'info', content: '(&blue,bold)Group with Grid Layout(&)' },
+    {
+        type: 'group',
+        content: '',
+        display: 'grid',
+        groupGap: '1rem',
+        children: [
+            { type: 'card', content: 'Grid Item 1', cardTitle: 'G1' },
+            { type: 'card', content: 'Grid Item 2', cardTitle: 'G2' },
+            { type: 'card', content: 'Grid Item 3', cardTitle: 'G3' }
+        ]
+    },
+    { type: 'blank', content: '' },
+
    // End
    { type: 'success', content: '(&success)Component showcase complete!(&)' }
 ];
--- a/src/lib/pages/home.ts
+++ b/src/lib/pages/home.ts
@@ -13,7 +13,7 @@ export const lines: TerminalLine[] = [
    { type: 'output', content: '(&dim,red)███(&)(&dim,orange)███(&)(&dim,yellow)███(&)(&dim,green)███(&)(&dim,cyan)███(&)(&dim,blue)███(&)(&dim,magenta)███(&)(&dim,pink)███(&)', inline: true },
    
    { type: 'blank', content: '' },	
-    { type: 'header', content: `HI, I'm ${user.displayname}` },	
+    { type: 'header', content: `HI, I'm ${user.displayname}` },
    { type: 'image', content: '', image: user.avatar, imageAlt: user.name, imageWidth: 120, inline: true },
    
    { type: 'group', content: '', inline: true, groupDirection: 'column', children: [
--- a/src/lib/pages/portfolio.ts
+++ b/src/lib/pages/portfolio.ts
@@ -2,7 +2,7 @@
 import type { TerminalLine } from '$lib/components/tui/types';
 import { user, skills, projects } from '$lib/config';

-export 	const lines: TerminalLine[] = [
+export const lines: TerminalLine[] = [
    // Header command
    { type: 'command', content: 'cat ~/about.md' },
    { type: 'blank', content: '' },
@@ -24,9 +24,10 @@ export 	const lines: TerminalLine[] = [
            { type: 'output', content: `(&muted)${user.bio}(&)` },
        ]
    },
-    
+
    { type: 'blank', content: '' },
-    { type: 'group', content: '', groupAlign: 'start', groupGap: '1rem',
+    {
+        type: 'group', content: '', groupAlign: 'start', groupGap: '1rem',
        children: [
            { type: 'output', content: `(&primary, bold)Links >(&)`, inline: true },
            { type: 'link', href: "/portfolio#contact", content: `(&bg-blue,black)Contact(&)`, inline: true },
@@ -44,9 +45,9 @@ export 	const lines: TerminalLine[] = [
        href: social.link,
        inline: true
    })),
-    
+
    { type: 'divider', content: 'SKILLS', id: 'skills' },
-    
+
    // Skills as TUI sections

    // Languages
@@ -81,54 +82,54 @@ export 	const lines: TerminalLine[] = [

    // Interests
    { type: 'info', content: '(&accent,bold)▸ Interests(&)' },
-    { type: 'output', content: '  ' + skills.interests.map(s => `(&muted)${s}(&)`).join(' (&muted)•(&) ') },  
-    
+    { type: 'output', content: '  ' + skills.interests.map(s => `(&muted)${s}(&)`).join(' (&muted)•(&) ') },
+
    { type: 'divider', content: 'PROJECTS', id: 'projects' },
-    
+
    // Featured projects with buttons
    ...projects.filter(p => p.featured).flatMap(project => [
        { type: 'header' as const, content: `(&bold)${project.name}(&)` },
        { type: 'output' as const, content: `(&muted)${project.description}(&)` },
-        { type: 'info' as const, content: `(&info)TechStack: (&primary)${project.tech.join(', ')}(&)` },
-        ...(project.github ? [{ 
-            type: 'button' as const, 
-            content: 'View on GitHub', 
+        { type: 'info' as const, content: `(&info)TechStack:(&) (&magenta)${project.tech.join(', ')}(&)` },
+        ...(project.github ? [{
+            type: 'button' as const,
+            content: 'View on GitHub',
            icon: 'mdi:github',
            style: 'accent' as const,
            href: project.github
        }] : []),
-        ...(project.live ? [{ 
-            type: 'button' as const, 
-            content: 'View Live Demo', 
+        ...(project.live ? [{
+            type: 'button' as const,
+            content: 'View Live Demo',
            icon: 'mdi:open-in-new',
            style: 'accent' as const,
            href: project.live
        }] : []),
        { type: 'blank' as const, content: '' }
    ]),
-    
+
    // Other projects
    ...projects.filter(p => !p.featured).flatMap(project => [
        { type: 'success' as const, content: `(&success)${project.name}(&)` },
        { type: 'output' as const, content: `(&muted)${project.description}(&)` },
-        { type: 'info' as const, content: `(&info)TechStack:(&) (&primary)${project.tech.join(', ')}(&)` },
-        ...(project.github ? [{ 
-            type: 'button' as const, 
-            content: 'View on GitHub', 
+        { type: 'info' as const, content: `(&info)TechStack:(&) (&magenta)${project.tech.join(', ')}(&)` },
+        ...(project.github ? [{
+            type: 'button' as const,
+            content: 'View on GitHub',
            icon: 'mdi:github',
            style: 'accent' as const,
            href: project.github
        }] : []),
-        ...(project.live ? [{ 
-            type: 'button' as const, 
-            content: 'View Live', 
+        ...(project.live ? [{
+            type: 'button' as const,
+            content: 'View Live',
            icon: 'mdi:open-in-new',
            style: 'accent' as const,
            href: project.live
        }] : []),
        { type: 'blank' as const, content: '' }
    ]),
-    
+
    // End
    { type: 'success', content: `(&success)Portfolio loaded successfully!(&)` }
 ];
--- a/src/lib/pages/projects.ts
+++ b/src/lib/pages/projects.ts
@@ -7,22 +7,22 @@ const featuredCount = sortedCards.filter(c => c.featured).length;

 // Build the terminal lines with card grid
 export const lines: TerminalLine[] = [
-    { type: 'command', content: 'ls ~/projects --grid' },
+    { type: 'command', content: 'ls ~/projects' },
    { type: 'divider', content: 'PROJECTS' },
    ...projects.filter(p => p.featured).flatMap(project => [
        { type: 'header' as const, content: `(&bold)${project.name}(&)` },
        { type: 'output' as const, content: `(&muted)${project.description}(&)` },
-        { type: 'info' as const, content: `(&info)Tech: (&primary)${project.tech.join(', ')}(&)` },
-        ...(project.github ? [{ 
-            type: 'button' as const, 
-            content: 'View on GitHub', 
+        { type: 'info' as const, content: `(&info)TechStack:(&) (&magenta)${project.tech.join(', ')}(&)` },
+        ...(project.github ? [{
+            type: 'button' as const,
+            content: 'View on GitHub',
            icon: 'mdi:github',
            style: 'accent' as const,
            href: project.github
        }] : []),
-        ...(project.live ? [{ 
-            type: 'button' as const, 
-            content: 'View Live Demo', 
+        ...(project.live ? [{
+            type: 'button' as const,
+            content: 'View Live Demo',
            icon: 'mdi:open-in-new',
            style: 'accent' as const,
            href: project.live
@@ -32,17 +32,17 @@ export const lines: TerminalLine[] = [
    ...projects.filter(p => !p.featured).flatMap(project => [
        { type: 'success' as const, content: `(&success)${project.name}(&)` },
        { type: 'output' as const, content: `(&muted)${project.description}(&)` },
-        { type: 'info' as const, content: `(&info)Tech:(&) (&primary)${project.tech.join(', ')}(&)` },
-        ...(project.github ? [{ 
-            type: 'button' as const, 
-            content: 'View on GitHub', 
+        { type: 'info' as const, content: `(&info)TechStack:(&) (&magenta)${project.tech.join(', ')}(&)` },
+        ...(project.github ? [{
+            type: 'button' as const,
+            content: 'View on GitHub',
            icon: 'mdi:github',
            style: 'accent' as const,
            href: project.github
        }] : []),
-        ...(project.live ? [{ 
-            type: 'button' as const, 
-            content: 'View Live', 
+        ...(project.live ? [{
+            type: 'button' as const,
+            content: 'View Live',
            icon: 'mdi:open-in-new',
            style: 'accent' as const,
            href: project.live