Element Bug Fixes

src/lib/components/tui/TuiProgress.svelte

@@ -12,6 +12,9 @@
 
 	let { line, inline = false }: Props = $props();
 
+	let containerWidth = $state(0);
+	const charWidth = 9.6; // Approximate width of a character in monospace font (adjust as needed)
+
 	const progress = $derived(Math.min(100, Math.max(0, line.progress ?? 0)));
 	const label = $derived(line.progressLabel || `${progress}%`);
 	const contentSegments = $derived(
@@ -20,12 +23,19 @@
 	const labelSegments = $derived(
 		parseColorText(label, $themeColors.colorMap),
 	);
+
+	// Calculate how many characters fit in the bar
+	const charCapacity = $derived(
+		Math.max(10, Math.floor((containerWidth - 30) / charWidth)),
+	);
 </script>
 
 <div
 	class="tui-progress"
 	class:inline
+	class:text-style={line.progressStyle === "text"}
 	style="--progress-color: {getButtonStyle(line.style)}"
+	bind:clientWidth={containerWidth}
 >
 	{#if line.content}
 		<div class="progress-label">
@@ -40,17 +50,42 @@
 			{/each}
 		</div>
 	{/if}
-	<div class="progress-bar">
-		<div class="progress-fill" style="width: {progress}%">
-			<span class="progress-glow"></span>
+
+	{#if line.progressStyle === "text"}
+		<div class="progress-text-bar">
+			<span class="bracket">[</span>
+			<span class="bar-content">
+				{#each Array(charCapacity) as _, i}
+					<span class="char"
+						>{i < Math.floor((progress / 100) * charCapacity)
+							? "#"
+							: "."}</span
+					>
+				{/each}
+			</span>
+			<span class="bracket">]</span>
 		</div>
-		<div class="progress-blocks">
-			{#each Array(20) as _, i}
-				<span class="block" class:filled={i < Math.floor(progress / 5)}
-				></span>
-			{/each}
+	{:else}
+		<div
+			class="progress-bar"
+			class:continuous={line.progressStyle === "continuous"}
+		>
+			<div class="progress-fill" style="width: {progress}%">
+				<span class="progress-glow"></span>
+			</div>
+			{#if line.progressStyle !== "continuous"}
+				<div class="progress-blocks">
+					{#each Array(20) as _, i}
+						<span
+							class="block"
+							class:filled={i < Math.floor(progress / 5)}
+						></span>
+					{/each}
+				</div>
+			{/if}
 		</div>
-	</div>
+	{/if}
+
 	<div class="progress-value">
 		{#each labelSegments as segment}
 			{#if segment.icon}
@@ -198,4 +233,30 @@
 			min-width: 100%;
 		}
 	}
+
+	/* Continuous Style */
+	.progress-bar.continuous .progress-blocks {
+		display: none;
+	}
+
+	/* Text Style */
+	.progress-text-bar {
+		font-family: monospace;
+		font-size: 1rem;
+		color: var(--terminal-dim);
+		white-space: nowrap;
+	}
+
+	.progress-text-bar .char {
+		color: var(--terminal-dim);
+	}
+
+	.tui-progress:not(.text-style) .progress-text-bar {
+		display: none;
+	}
+
+	.progress-text-bar .bracket {
+		color: var(--terminal-text);
+		font-weight: bold;
+	}
 </style>