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,6 +70,7 @@
 		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);
--- 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;
--- a/src/lib/components/tui/TuiAccordion.svelte
+++ b/src/lib/components/tui/TuiAccordion.svelte
@@ -1,33 +1,54 @@
 <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;
+	interface Props {
+		line: AccordionLine;
+		inline?: boolean;
+	}

-	let openItems: Set<number> = new Set(line.accordionOpen ? [0] : []);
+	let { line, inline = false }: Props = $props();
+
+	let openItems = $state(new Set(line.accordionOpen ? [0] : []));

 	function toggleItem(index: number) {
-		if (openItems.has(index)) {
-			openItems.delete(index);
+		const newSet = new Set(openItems);
+		if (newSet.has(index)) {
+			newSet.delete(index);
 		} else {
-			openItems.add(index);
+			newSet.add(index);
 		}
-		openItems = openItems; // trigger reactivity
+		openItems = newSet;
 	}

-	$: items = line.accordionItems || [{ title: line.content, content: '' }];
+	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)}>
+			<button class="accordion-header" onclick={() => toggleItem(i)}>
 				<Icon
-					icon={openItems.has(i) ? 'mdi:chevron-down' : 'mdi:chevron-right'} 
+					icon={openItems.has(i)
+						? "mdi:chevron-down"
+						: "mdi:chevron-right"}
 					width="16"
 					class="accordion-icon"
 				/>
@@ -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 }> };
+		| { 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}
@@ -31,7 +47,11 @@

 	<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,23 +1,29 @@
 <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">
@@ -32,14 +38,17 @@
 					<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}

@@ -48,7 +57,9 @@
 						{#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>
@@ -61,9 +72,6 @@
 						{#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}

@@ -73,19 +81,34 @@

 				<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,8 +297,13 @@
 		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;
@@ -284,7 +311,7 @@
 	}

 	.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,56 +1,66 @@
 <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}
+	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>

--- 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,11 +1,11 @@
 <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;
@@ -17,7 +17,7 @@
 		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');
+		// 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'}`);
+				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}
+	class:inline
 	class:error={hasError}
 	class:disabled={isDisabled}
 	style="--input-color: {getButtonStyle(line.style)}"
@@ -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 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}
-			{#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}
+{: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}
+				{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}
 			{#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}
+	class:inline
 	class:disabled={isDisabled}
 	style="--radio-color: {getButtonStyle(line.style)}"
 	role="radiogroup"
@@ -64,7 +71,10 @@
 	<div class="radio-options" class:horizontal={isHorizontal}>
 		{#each options as option}
 			{@const isSelected = value === option.value}
-			{@const optionSegments = parseColorText(option.label, $themeColors.colorMap)}
+			{@const optionSegments = parseColorText(
+				option.label,
+				$themeColors.colorMap,
+			)}
 			<div
 				class="radio-option"
 				class:selected={isSelected}
@@ -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())
+	const filteredOptions = $derived(
+		searchable && searchQuery
+			? options.filter(
+					(opt) =>
+						opt.label
+							.toLowerCase()
+							.includes(searchQuery.toLowerCase()) ||
+						opt.value
+							.toLowerCase()
+							.includes(searchQuery.toLowerCase()),
 				)
-		: options;
+			: 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}
+	class:inline
 	class:open={isOpen}
 	class:error={hasError}
 	class:disabled={isDisabled}
@@ -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,8 +195,8 @@
 						type="text"
 						placeholder="Search..."
 						value={searchQuery}
-						on:input={handleSearchInput}
-						on:click|stopPropagation
+						oninput={handleSearchInput}
+						onclick={(e) => e.stopPropagation()}
 					/>
 				</div>
 			{/if}
@@ -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}
+	class:inline
 	class:focused={isFocused}
 	class:error={hasError}
 	class:disabled={isDisabled}
@@ -78,7 +88,7 @@

 	<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,33 +1,40 @@
 <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();
 		}
@@ -36,16 +43,16 @@

 <div
 	class="tui-toggle"
-	class:inline={inline}
-	class:checked={checked}
+	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" />
@@ -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,16 +1,20 @@
 <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;
@@ -23,22 +27,22 @@
 		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%);`;
@@ -60,12 +64,12 @@
 	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();
 			}
 		},
--- a/src/lib/components/tui/types.ts
+++ b/src/lib/components/tui/types.ts
@@ -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
@@ -269,6 +269,96 @@ export const lines: TerminalLine[] = [
    },
    { 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
    // ═══════════════════════════════════════════════════════════════
@@ -298,6 +388,26 @@ export const lines: TerminalLine[] = [
        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
@@ -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
@@ -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
@@ -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/portfolio.ts
+++ b/src/lib/pages/portfolio.ts
@@ -26,7 +26,8 @@ export 	const lines: TerminalLine[] = [
    },

    { 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 },
@@ -89,7 +90,7 @@ export 	const lines: TerminalLine[] = [
    ...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(', ')}(&)` },
+        { type: 'info' as const, content: `(&info)TechStack:(&) (&magenta)${project.tech.join(', ')}(&)` },
        ...(project.github ? [{
            type: 'button' as const,
            content: 'View on GitHub',
@@ -111,7 +112,7 @@ 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)TechStack:(&) (&primary)${project.tech.join(', ')}(&)` },
+        { type: 'info' as const, content: `(&info)TechStack:(&) (&magenta)${project.tech.join(', ')}(&)` },
        ...(project.github ? [{
            type: 'button' as const,
            content: 'View on GitHub',
--- a/src/lib/pages/projects.ts
+++ b/src/lib/pages/projects.ts
@@ -7,12 +7,12 @@ 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(', ')}(&)` },
+        { type: 'info' as const, content: `(&info)TechStack:(&) (&magenta)${project.tech.join(', ')}(&)` },
        ...(project.github ? [{
            type: 'button' as const,
            content: 'View on GitHub',
@@ -32,7 +32,7 @@ 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(', ')}(&)` },
+        { type: 'info' as const, content: `(&info)TechStack:(&) (&magenta)${project.tech.join(', ')}(&)` },
        ...(project.github ? [{
            type: 'button' as const,
            content: 'View on GitHub',