+ {#if activity.assets?.small_image}
+ 
+ {/if}
+ ⚠ Demo may be unavailable
+ Demo may be unavailable
{/if}
@@ -268,12 +269,25 @@
} */
.warning {
- font-size: 0.6rem;
- color: #f9e2af;
- padding: 0.2rem 0.35rem;
- background: rgba(249, 226, 175, 0.1);
- border-radius: 3px;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.45rem;
+ 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);
+ border-radius: 6px;
width: fit-content;
+ font-weight: 600;
+ box-shadow: 0 1px 0 rgba(0,0,0,0.02) inset;
+ }
+
+ .warning:before {
+ content: '⚠';
+ display: inline-block;
+ font-size: 0.9rem;
+ line-height: 1;
}
.card-actions {
diff --git a/src/lib/components/tui/TuiCheckbox.svelte b/src/lib/components/tui/TuiCheckbox.svelte
index fe0d004..6ee2a7c 100644
--- a/src/lib/components/tui/TuiCheckbox.svelte
+++ b/src/lib/components/tui/TuiCheckbox.svelte
@@ -129,4 +129,13 @@
.tui-checkbox.disabled .checkbox-label {
color: var(--terminal-muted);
}
+
+ /* Mobile: inline checkboxes become full-width */
+ @media (max-width: 768px) {
+ .tui-checkbox.inline {
+ display: flex;
+ width: 100%;
+ margin: 0.35rem 0;
+ }
+ }
diff --git a/src/lib/components/tui/TuiGroup.svelte b/src/lib/components/tui/TuiGroup.svelte
new file mode 100644
index 0000000..101a2ab
--- /dev/null
+++ b/src/lib/components/tui/TuiGroup.svelte
@@ -0,0 +1,266 @@
+
+
+ = {
// 'models': 'instant', // No typing animation
// 'hackathons': 0.5, // Custom: 2x faster than normal
'home': 'fast',
- 'portfolio': 'fast',
+ 'portfolio': 'instant',
'models': 'fast',
'projects': 'fast',
'components': 'fast'
diff --git a/src/lib/config/user.ts b/src/lib/config/user.ts
index 38f809c..ea92bf6 100644
--- a/src/lib/config/user.ts
+++ b/src/lib/config/user.ts
@@ -10,7 +10,7 @@ export const user = {
title: 'Engineering Student',
email: 'sirblob0@gmail.com',
location: 'USA (EAST)',
- bio: `Hi, I am Sir Blob — a engineer who loves making things. ` +
+ bio: `A engineer who loves making things. ` +
`I build fun coding projects, participate in game jams and hackathons, and enjoy games like Minecraft and Pokémon TCG Live. ` +
`I'm interested in Open Source, Game Development, Embedded Systems, and AI/ML.`,
diff --git a/src/lib/discord/fetchUserImages.ts b/src/lib/discord/fetchUserImages.ts
new file mode 100644
index 0000000..e8b1f4d
--- /dev/null
+++ b/src/lib/discord/fetchUserImages.ts
@@ -0,0 +1,146 @@
+export enum ImageSize {
+ USER_AVATAR = 32,
+ USER_DECORATION = 64,
+ SERVER_TAG = 32,
+ ACTIVITY_LARGE = 128,
+ ACTIVITY_SMALL = 64,
+ EMOJI = 32,
+}
+
+export type Activity = {
+ name?: string;
+ type?: number;
+ details?: string | null;
+ url?: string | null;
+ application_id?: string | null;
+ assets?: { large_image?: string | null; small_image?: string | null };
+ emoji?: { id?: string; animated?: boolean } | null;
+};
+
+export type Data = {
+ discord_user: {
+ id: string;
+ avatar?: string | null;
+ discriminator?: string | null;
+ primary_guild?: { identity_guild_id?: string; badge?: string } | null;
+ avatar_decoration_data?: { asset?: string } | null;
+ };
+ activities: Activity[];
+ spotify?: { album_art_url?: string } | null;
+};
+
+export type ProfileSettings = {
+ optimized?: boolean;
+ animatedDecoration?: string | boolean;
+ ignoreAppId?: string[];
+ theme?: string | null;
+};
+
+async function encodeBase64(url: string, _size?: ImageSize, _theme?: string | null) {
+ try {
+ const res = await fetch(url);
+ if (!res.ok) return url;
+ const buf = await res.arrayBuffer();
+ const bytes = new Uint8Array(buf);
+ let binary = "";
+ const chunk = 0x8000;
+ for (let i = 0; i < bytes.length; i += chunk) {
+ binary += String.fromCharCode.apply(null, Array.from(bytes.subarray(i, i + chunk)) as unknown as number[]);
+ }
+ const b64 = typeof globalThis.btoa === "function" ? globalThis.btoa(binary) : Buffer.from(binary, "binary").toString("base64");
+ // try to infer mime
+ const ext = url.split("?")[0].split(".").pop()?.toLowerCase() ?? "png";
+ const mime = ext === "jpg" || ext === "jpeg" ? "image/jpeg" : ext === "gif" ? "image/gif" : ext === "webp" ? "image/webp" : "image/png";
+ return `data:${mime};base64,${b64}`;
+ } catch (err) {
+ return url;
+ }
+}
+
+export async function fetchUserImages(data: Data, settings: ProfileSettings) {
+ let avatar: string;
+ let avatarDecoration: string | null = null;
+ let clanBadge: string | null = null;
+ let assetLargeImage: string | null = null;
+ let assetSmallImage: string | null = null;
+ let userEmoji: string | null = null;
+ let albumCover: string | null = null;
+
+ const avatarExtension =
+ data.discord_user.avatar && data.discord_user.avatar.startsWith("a_") && !settings.optimized
+ ? "gif"
+ : "webp";
+
+ const statusExtension: string = data.activities[0]?.emoji?.animated && !settings.optimized ? "gif" : "webp";
+
+ const userStatus: Activity | undefined = data.activities[0] && data.activities[0].type === 4 ? data.activities[0] : undefined;
+
+ const activities = data.activities
+ .filter((activity) => activity.type === 0)
+ .filter((activity) => !settings.ignoreAppId?.includes(activity.application_id ?? ""));
+ const activity: Activity | undefined = activities.length > 0 ? activities[0] : undefined;
+
+ if (data.discord_user.avatar) {
+ avatar = await encodeBase64(
+ `https://cdn.discordapp.com/avatars/${data.discord_user.id}/${data.discord_user.avatar}.${avatarExtension}?size=${avatarExtension === "gif" ? "64" : "256"}`,
+ ImageSize.USER_AVATAR
+ );
+ } else {
+ avatar = await encodeBase64(
+ `https://cdn.discordapp.com/embed/avatars/${data.discord_user.discriminator === "0" ? Number(BigInt(data.discord_user.id) >> BigInt(22)) % 6 : Number(data.discord_user.discriminator ?? "0") % 5}.png?size=128`,
+ ImageSize.USER_AVATAR
+ );
+ }
+
+ if (data.discord_user.primary_guild && data.discord_user.primary_guild.identity_guild_id && data.discord_user.primary_guild.badge) {
+ clanBadge = await encodeBase64(
+ `https://cdn.discordapp.com/clan-badges/${data.discord_user.primary_guild.identity_guild_id}/${data.discord_user.primary_guild.badge}.png?size=32`,
+ ImageSize.SERVER_TAG
+ );
+ }
+
+ if (data.discord_user.avatar_decoration_data?.asset) {
+ avatarDecoration = await encodeBase64(
+ `https://cdn.discordapp.com/avatar-decoration-presets/${data.discord_user.avatar_decoration_data.asset}.png?size=64&passthrough=${settings.animatedDecoration || "false"}`,
+ ImageSize.USER_DECORATION
+ );
+ }
+
+ if (activity?.assets?.large_image)
+ assetLargeImage = await encodeBase64(
+ activity.assets?.large_image!.startsWith("mp:external/")
+ ? `https://media.discordapp.net/${activity.assets!.large_image!.replace("mp:", "")}`
+ : `https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets!.large_image}.webp`,
+ ImageSize.ACTIVITY_LARGE,
+ settings.theme || null
+ );
+
+ if (activity?.assets?.small_image)
+ assetSmallImage = await encodeBase64(
+ activity.assets.small_image!.startsWith("mp:external/")
+ ? `https://media.discordapp.net/${activity.assets.small_image!.replace("mp:", "")}`
+ : `https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.small_image}.webp`,
+ ImageSize.ACTIVITY_SMALL,
+ settings.theme || null
+ );
+
+ if (userStatus?.emoji?.id)
+ userEmoji = await encodeBase64(
+ `https://cdn.discordapp.com/emojis/${userStatus.emoji.id}.${statusExtension}?size=32`,
+ ImageSize.EMOJI
+ );
+
+ if (data.spotify?.album_art_url) albumCover = await encodeBase64(data.spotify.album_art_url, ImageSize.ACTIVITY_LARGE);
+
+ return {
+ avatar,
+ clanBadge,
+ avatarDecoration,
+ assetLargeImage,
+ assetSmallImage,
+ userEmoji,
+ albumCover,
+ };
+}
+
+export default fetchUserImages;
diff --git a/src/lib/discordbot.ts b/src/lib/discordbot.ts
new file mode 100644
index 0000000..fc571ed
--- /dev/null
+++ b/src/lib/discordbot.ts
@@ -0,0 +1,106 @@
+import { Client, Partials, GatewayIntentBits, ActivityType } from "discord.js";
+
+import { DISCORD_TOKEN, DISCORD_USER_ID, DISCORD_GUILD_ID } from "$env/static/private";
+
+class Bot {
+ private client: Client;
+
+ // Normalize a discord.js Activity object into a simple POJO
+ private mapActivity(a: any) {
+ const type = typeof a.type === 'number' ? a.type : (ActivityType[a.type] ?? a.type);
+ const application_id = a.applicationId ?? a.application_id ?? null;
+
+ const rawLarge = a.assets?.largeImage ?? a.assets?.large_image ?? null;
+ const rawSmall = a.assets?.smallImage ?? a.assets?.small_image ?? null;
+
+ const formatAsset = (raw: string | null) => {
+ if (!raw) return null;
+ if (raw.startsWith('mp:external/')) {
+ return `https://media.discordapp.net/${raw.replace(/^mp:/, '')}`;
+ }
+ if (/^https?:\/\//.test(raw)) return raw;
+ if (application_id) return `https://cdn.discordapp.com/app-assets/${application_id}/${raw}.webp`;
+ return raw;
+ };
+
+ return {
+ name: a.name ?? null,
+ type,
+ details: a.details ?? a.state ?? null,
+ url: a.url ?? null,
+ application_id,
+ assets: {
+ large_image: formatAsset(rawLarge),
+ small_image: formatAsset(rawSmall)
+ },
+ emoji: a.emoji ? { id: a.emoji.id ?? null, animated: !!a.emoji.animated } : null
+ };
+ }
+
+ constructor() {
+ // Need presence and members intents to read user presence/activity
+ this.client = new Client({
+ partials: [Partials.User],
+ intents: [
+ GatewayIntentBits.Guilds,
+ GatewayIntentBits.GuildMembers,
+ GatewayIntentBits.GuildPresences
+ ]
+ });
+
+ this.client.login(DISCORD_TOKEN).catch((error) => {
+ console.error("Failed to login to Discord:", error);
+ });
+
+ this.client.once("clientReady", async () => {
+ console.log(`Logged in as ${this.client.user?.tag}`);
+ });
+ }
+
+ getClient(): Client {
+ return this.client;
+ }
+
+ /**
+ * Look up the user's presence specifically in the given guild.
+ * Returns null if guild/member/presence not available.
+ */
+ async getUserActivityInGuild(guildId: string = DISCORD_GUILD_ID, userId: string = DISCORD_USER_ID) {
+ try {
+ // Fetch guild from cache or API
+ let guild = this.client.guilds.cache.get(guildId) || await this.client.guilds.fetch(guildId).catch(() => null);
+ if (!guild) return null;
+
+ // Fetch member (will populate presence if available)
+ const member = await guild.members.fetch(userId).catch(() => null);
+ if (!member) return null;
+
+ const presence = member.presence;
+ const user = member.user;
+
+ // Build avatar URL
+ const avatarHash = user.avatar;
+ const avatarUrl = avatarHash
+ ? `https://cdn.discordapp.com/avatars/${user.id}/${avatarHash}.${avatarHash.startsWith('a_') ? 'gif' : 'webp'}?size=128`
+ : `https://cdn.discordapp.com/embed/avatars/${(BigInt(user.id) >> BigInt(22)) % BigInt(6)}.png`;
+
+ // Get guild/clan tag if available
+ const guildTag = (user as any).primaryGuild?.tag ?? null;
+ const guildTagBadgeImage = `https://cdn.discordapp.com/clan-badges/${(user as any).primaryGuild?.identityGuildId}/${(user as any).primaryGuild?.badge}.png?size=32`;
+
+ if (!presence) return { guildId, status: 'offline', activities: [], displayName: member.displayName, avatarUrl, guildTag, guildTagBadgeImage };
+
+ const status = presence.status;
+ const activities = (presence.activities || []).map((a: any) => this.mapActivity(a));
+
+ return { guildId, status, activities, displayName: member.displayName, avatarUrl, guildTag, guildTagBadgeImage };
+ } catch (err) {
+ return null;
+ }
+ }
+}
+
+export const bot = new Bot();
+
+// Re-export image helper for convenience
+export { fetchUserImages } from "./discord/fetchUserImages";
\ No newline at end of file
diff --git a/src/lib/pages/home.ts b/src/lib/pages/home.ts
index 6834cfd..3d36a2e 100644
--- a/src/lib/pages/home.ts
+++ b/src/lib/pages/home.ts
@@ -13,32 +13,26 @@ export const lines: TerminalLine[] = [
{ type: 'output', content: '(&dim,red)███(&)(&dim,orange)███(&)(&dim,yellow)███(&)(&dim,green)███(&)(&dim,cyan)███(&)(&dim,blue)███(&)(&dim,magenta)███(&)(&dim,pink)███(&)', inline: true },
{ type: 'blank', content: '' },
- { type: 'header', content: `Welcome to ${user.displayname}'s Portfolio` },
+ { type: 'header', content: `HI, I'm ${user.displayname}` },
{ type: 'image', content: '', image: user.avatar, imageAlt: user.name, imageWidth: 120, inline: true },
{ type: 'output', content: `(&muted)${user.bio}(&)`, inline: true },
{ type: 'divider', content: 'NAVIGATION' },
// Interactive navigation buttons
- ...navigation.map(nav => ({
+ ...navigation.map((nav, i) => ({
type: 'button' as const,
- content: nav.name,
+ content: nav.name + ` (&text, bold)[${i+1}](&)`,
icon: nav.icon === '📁' ? 'mdi:folder' : nav.icon === '🎨' ? 'mdi:palette' : 'mdi:trophy',
style: 'primary' as const,
href: nav.path,
inline: true
})),
+
{ type: 'divider', content: 'Website Keybinds' },
{ type: 'output', content: '(&orange)Toggle Light/Dark Mode(&) (&text, bold)(Alt/Option+B)(&)' , inline: true },
- { type: 'output', content: '(&muted)•(&)' , inline: true },
- { type: 'output', content: '(&orange)Select Theme(&) (&text, bold)(Alt/Option+T + [#])(&)' , inline: true },
- { type: 'output', content: '(&muted)•(&)' , inline: true },
- { type: 'output', content: '(&orange)Skip typing animation(&) (&text, bold)(Y)(&)' , inline: true },
- { type: 'output', content: '(&muted)•(&)' , inline: true },
- { type: 'output', content: '(&orange)Navigate to page(&) (&text, bold)(Ctrl/Cmd+ [#])(&)' , inline: true },
- { type: 'blank', content: '' },
- // list navigation with numeric shortcuts
- { type: 'output', content: '(&text, bold)Pages -(&)', inline: true },
- ...navigation.map((nav, i) => ({ type: 'output' as const, content: `(&blue)${nav.name}(&) (&text, bold)[${i+1}](&)`, inline: true })),
+ { type: 'output', content: '(&muted)•(&) (&orange)Select Theme(&) (&text, bold)(Alt/Option+T + [#])(&)' , inline: true },
+ { type: 'output', content: '(&muted)•(&) (&orange)Skip typing animation(&) (&text, bold)(Y)(&)' , inline: true },
+ { type: 'output', content: '(&muted)•(&) (&orange)Navigate to page(&) (&text, bold)(Ctrl/Cmd+ [#])(&)' , inline: true },
{ type: 'blank', content: '' },
];
\ No newline at end of file
diff --git a/src/lib/pages/portfolio.ts b/src/lib/pages/portfolio.ts
index 4ff3402..d21b260 100644
--- a/src/lib/pages/portfolio.ts
+++ b/src/lib/pages/portfolio.ts
@@ -6,26 +6,35 @@ export const lines: TerminalLine[] = [
// Header command
{ type: 'command', content: 'cat ~/about.md' },
{ type: 'blank', content: '' },
-
+
// Avatar image
- { type: 'image', content: '', image: user.avatar, imageAlt: user.name, imageWidth: 150 },
- { type: 'blank', content: '' },
+ { type: 'image', content: '', image: user.avatar, imageAlt: user.name, imageWidth: 180, inline: true },
+
+ {
+ type: 'group',
+ content: '',
+ groupDirection: 'column',
+ groupAlign: 'start',
+ inline: true,
+ children: [
+ // User info
+ { type: 'header', content: `(&primary,bold)${user.name}(&)` },
+ { type: 'info', content: `(&accent)${user.title}(&)` },
+ { type: 'output', content: `(&white)Location:(&) (&primary)${user.location}(&)` },
+ { type: 'output', content: `(&muted)${user.bio}(&)` },
+ ]
+ },
- // User info
- { type: 'header', content: `(&primary,bold)${user.name}(&)` },
- { type: 'info', content: `(&accent)${user.title}(&)` },
- { type: 'output', content: `(&white)Location:(&) (&primary)${user.location}(&)` },
- { type: 'output', content: `(&muted)${user.bio}(&)` },
{ type: 'blank', content: '' },
- { type: 'output', content: `(&primary, bold)Links >(&)`, inline: true },
- { type: 'link', href: "/portfolio#contact", content: `(&bg-blue,black)Contact(&)`, inline: true },
- { type: 'link', href: "/portfolio#skills", content: `(&bg-orange,black)Skills(&)`, inline: true },
- { type: 'link', href: "/portfolio#projects", content: `(&bg-green,black)Projects(&)`, inline: true },
- { type: 'blank', content: '' },
-
+ { 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 },
+ { type: 'link', href: "/portfolio#skills", content: `(&bg-orange,black)Skills(&)`, inline: true },
+ { type: 'link', href: "/portfolio#projects", content: `(&bg-green,black)Projects(&)`, inline: true },
+ ]
+ },
{ type: 'divider', content: 'CONTACT', id: 'contact' },
- { type: 'blank', content: '' },
-
// Contact buttons - dynamically generated from socials array
...user.socials.map(social => ({
type: 'button' as const,
@@ -45,7 +54,6 @@ export const lines: TerminalLine[] = [
{ type: 'blank', content: '' },
{ type: 'divider', content: 'SKILLS', id: 'skills' },
- { type: 'blank', content: '' },
// Skills as TUI sections
@@ -81,9 +89,9 @@ export const lines: TerminalLine[] = [
// Interests
{ type: 'info', content: '(&accent,bold)▸ Interests(&)' },
- { type: 'output', content: ' ' + skills.interests.map(s => `(&muted)${s}(&)`).join(' (&muted)•(&) ') },
-
+ { type: 'output', content: ' ' + skills.interests.map(s => `(&muted)${s}(&)`).join(' (&muted)•(&) ') },
{ type: 'blank', content: '' },
+
{ type: 'divider', content: 'PROJECTS', id: 'projects' },
{ type: 'blank', content: '' },
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
new file mode 100644
index 0000000..add3c31
--- /dev/null
+++ b/src/routes/+layout.server.ts
@@ -0,0 +1,16 @@
+import type { LayoutServerLoad } from './$types';
+
+import { bot } from '$lib/discordbot';
+
+export const load: LayoutServerLoad = async () => {
+ const info = await bot.getUserActivityInGuild().catch(() => null);
+
+ return {
+ status: info?.status ?? 'offline',
+ activities: info?.activities ?? [],
+ displayName: info?.displayName ?? null,
+ avatarUrl: info?.avatarUrl ?? null,
+ guildTag: info?.guildTag ?? null,
+ guildTagBadgeImage: info?.guildTagBadgeImage ?? null
+ };
+};
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 66a63c9..359c1d0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -20,7 +20,7 @@
diff --git a/src/routes/models/+page.svelte b/src/routes/models/+page.svelte
index 2bb7fd3..9851901 100644
--- a/src/routes/models/+page.svelte
+++ b/src/routes/models/+page.svelte
@@ -44,7 +44,6 @@
{ type: 'blank', content: '' },
{ type: 'divider', content: 'VIEWER' },
- { type: 'blank', content: '' },
// Interactive model buttons
...glbModels.map(model => ({
+ {#each parsedChildren as parsed, idx}
+ {@const child = parsed.line}
+ {@const visibleSegments = parsed.segments}
+ {@const childInline = child.inline !== false}
+
+ {#if child.type === 'image'}
+ onLinkClick(idx)} />
+ {:else if child.type === 'tooltip'}
+
+
+
diff --git a/src/lib/components/tui/TuiInput.svelte b/src/lib/components/tui/TuiInput.svelte
index 6b09521..246a21b 100644
--- a/src/lib/components/tui/TuiInput.svelte
+++ b/src/lib/components/tui/TuiInput.svelte
@@ -195,4 +195,13 @@
color: #f38ba8;
font-size: 0.8rem;
}
+
+ /* Mobile: inline inputs become full-width */
+ @media (max-width: 768px) {
+ .tui-input.inline {
+ display: flex;
+ width: 100%;
+ margin: 0.5rem 0;
+ }
+ }
diff --git a/src/lib/components/tui/TuiProgress.svelte b/src/lib/components/tui/TuiProgress.svelte
index f4230c3..73e2f49 100644
--- a/src/lib/components/tui/TuiProgress.svelte
+++ b/src/lib/components/tui/TuiProgress.svelte
@@ -156,4 +156,19 @@
vertical-align: middle;
margin: 0 0.15em;
}
+
+ /* Mobile: inline progress becomes full-width */
+ @media (max-width: 768px) {
+ .tui-progress.inline {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ width: 100%;
+ margin: 0.5rem 0;
+ }
+
+ .tui-progress.inline .progress-bar {
+ min-width: 100%;
+ }
+ }
diff --git a/src/lib/components/tui/TuiToggle.svelte b/src/lib/components/tui/TuiToggle.svelte
index f7c934c..a3d68bf 100644
--- a/src/lib/components/tui/TuiToggle.svelte
+++ b/src/lib/components/tui/TuiToggle.svelte
@@ -173,4 +173,13 @@
color: var(--toggle-color);
transform: translateX(0.5rem);
}
+
+ /* Mobile: inline toggles become full-width */
+ @media (max-width: 768px) {
+ .tui-toggle.inline {
+ display: flex;
+ width: 100%;
+ margin: 0.35rem 0;
+ }
+ }
diff --git a/src/lib/components/tui/types.ts b/src/lib/components/tui/types.ts
index fdde6d7..a9a854e 100644
--- a/src/lib/components/tui/types.ts
+++ b/src/lib/components/tui/types.ts
@@ -5,7 +5,8 @@ export type LineType =
| 'command' | 'output' | 'prompt' | 'error' | 'success' | 'info' | 'warning'
| 'image' | 'blank' | 'header' | 'button' | 'divider' | 'link'
| 'card' | 'progress' | 'accordion' | 'table' | 'tooltip' | 'cardgrid'
- | 'input' | 'textarea' | 'checkbox' | 'radio' | 'select' | 'toggle';
+ | 'input' | 'textarea' | 'checkbox' | 'radio' | 'select' | 'toggle'
+ | 'group';
// Option type for radio and select components
export interface FormOption {
@@ -117,6 +118,14 @@ export interface TerminalLine {
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
diff --git a/src/lib/components/tui/utils.ts b/src/lib/components/tui/utils.ts
index 3a32851..1e78a75 100644
--- a/src/lib/components/tui/utils.ts
+++ b/src/lib/components/tui/utils.ts
@@ -188,6 +188,8 @@ export function getLinePrefix(type: string): string {
return '✗ ';
case 'success':
return '✓ ';
+ case 'warning':
+ return '⚠ ';
case 'info':
return '› ';
default:
diff --git a/src/lib/config/terminal.ts b/src/lib/config/terminal.ts
index 9858751..9b7d193 100644
--- a/src/lib/config/terminal.ts
+++ b/src/lib/config/terminal.ts
@@ -134,7 +134,7 @@ export const pageSpeedSettings: Record
+ 
+ {#if child.content}
+ {child.content}
+ {/if}
+
+ {:else if child.type === 'button'}
+