Bug Fixes and Formatting Update

src/lib/components/tui/TuiButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
-	import { getButtonStyle } from './utils';
+	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
 	import type { TerminalLine } from './types';
 
 	export let line: TerminalLine;
@@ -8,14 +8,19 @@
 	export let selected: boolean;
 	export let onClick: (idx: number) => void;
 	export let onHover: (idx: number) => void;
+	export let inline: boolean = false;
 
 	// Determine if this is an external link
 	$: isExternal = line.external || (line.href && (line.href.startsWith('http://') || line.href.startsWith('https://')));
+	
+	// Parse color formatting in content
+	$: segments = parseColorText(line.content);
 </script>
 
 <button
 	class="tui-button"
 	class:selected={selected}
+	class:inline={inline}
 	style="--btn-color: {getButtonStyle(line.style)}"
 	on:click={() => onClick(index)}
 	on:mouseenter={() => onHover(index)}
@@ -24,7 +29,17 @@
 	{#if line.icon}
 		<Icon icon={line.icon} width="16" />
 	{/if}
-	<span class="btn-text">{line.content}</span>
+	<span class="btn-text">
+		{#each segments as segment}
+			{#if segment.icon}
+				<Icon icon={segment.icon} width="14" class="inline-icon" />
+			{:else if getSegmentStyle(segment)}
+				<span style={getSegmentStyle(segment)}>{segment.text}</span>
+			{:else}
+				{segment.text}
+			{/if}
+		{/each}
+	</span>
 	{#if line.href}
 		{#if isExternal}
 			<Icon icon="mdi:open-in-new" width="14" class="btn-arrow" />
@@ -53,6 +68,19 @@
 		transition: all 0.15s ease;
 	}
 
+	/* Inline button styles */
+	.tui-button.inline {
+		width: auto;
+		display: inline-flex;
+		margin: 0;
+		padding: 0.35rem 0.6rem;
+		border: 1px solid color-mix(in srgb, var(--btn-color) 40%, transparent);
+	}
+
+	.tui-button.inline .btn-indicator {
+		display: none;
+	}
+
 	.tui-button:hover,
 	.tui-button.selected {
 		background: color-mix(in srgb, var(--btn-color) 15%, transparent);
@@ -76,4 +104,10 @@
 	.tui-button.selected :global(.btn-arrow) {
 		opacity: 1;
 	}
+
+	:global(.inline-icon) {
+		display: inline-block;
+		vertical-align: middle;
+		margin: 0 0.15em;
+	}
 </style>