{/if}
-
+
- {#each Array(Math.max(rows, value.split('\n').length)) as _, i}
+ {#each Array(Math.max(rows, value.split("\n").length)) as _, i}
{i + 1}
{/each}
@@ -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}
>
@@ -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 {
diff --git a/src/lib/components/tui/TuiToggle.svelte b/src/lib/components/tui/TuiToggle.svelte
index a3d68bf..08ecb90 100644
--- a/src/lib/components/tui/TuiToggle.svelte
+++ b/src/lib/components/tui/TuiToggle.svelte
@@ -1,56 +1,63 @@
-
{#if line.icon}
{/if}
-
+
{#if line.content}
{#each labelSegments as segment}
@@ -70,7 +77,7 @@
{offLabel}
{/if}
- {checked ? '●' : '○'}
+ {checked ? "●" : "○"}
{#if showLabels}
{onLabel}
diff --git a/src/lib/components/tui/TuiTooltip.svelte b/src/lib/components/tui/TuiTooltip.svelte
index 4bc5d4a..9ca7616 100644
--- a/src/lib/components/tui/TuiTooltip.svelte
+++ b/src/lib/components/tui/TuiTooltip.svelte
@@ -1,44 +1,48 @@
-
{#each contentSegments as segment}
@@ -80,7 +84,10 @@
{#if showTooltip && line.tooltipText}
-
+
{line.tooltipText}
diff --git a/src/lib/components/tui/terminal-api.ts b/src/lib/components/tui/terminal-api.ts
index a6b13e7..91c5cb7 100644
--- 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) => {
const state = getState();
if (index < 0 || index >= state.lines.length) return;
- state.lines[index] = { ...state.lines[index], ...updates };
+ // Cast to TerminalLine to allow partial updates across union types
+ state.lines[index] = { ...state.lines[index], ...updates } as TerminalLine;
refreshDisplayedLines();
},
@@ -182,7 +183,8 @@ export function createTerminalAPI(options: TerminalAPIOptions): TerminalAPI {
const state = getState();
const index = state.lines.findIndex(line => line.id === id);
if (index !== -1) {
- state.lines[index] = { ...state.lines[index], ...updates };
+ // Cast to TerminalLine to allow partial updates across union types
+ state.lines[index] = { ...state.lines[index], ...updates } as TerminalLine;
refreshDisplayedLines();
}
},
@@ -207,7 +209,7 @@ export function createTerminalAPI(options: TerminalAPIOptions): TerminalAPI {
skip: () => {
const state = getState();
if (!state.isTyping) return;
-
+
const colorMap = getColorMap();
const displayedLines = state.lines.map(line => {
const parsed = parseLine(line, colorMap);
diff --git a/src/lib/components/tui/types.ts b/src/lib/components/tui/types.ts
index 2cf0f0c..2b797f7 100644
--- a/src/lib/components/tui/types.ts
+++ b/src/lib/components/tui/types.ts
@@ -4,7 +4,7 @@ import type { Card } from '$lib/config';
// Re-export TextSegment for convenience
export type { TextSegment };
-export type LineType =
+export type LineType =
| 'command' | 'output' | 'prompt' | 'error' | 'success' | 'info' | 'warning'
| 'image' | 'blank' | 'header' | 'button' | 'divider' | 'link'
| 'card' | 'progress' | 'accordion' | 'table' | 'tooltip' | 'cardgrid'
@@ -19,6 +19,194 @@ export interface FormOption {
disabled?: boolean;
}
+// Base interface for all terminal lines
+export interface BaseTerminalLine {
+ type: LineType;
+ content: string;
+ id?: string;
+ inline?: boolean;
+ display?: 'flex' | 'block' | 'grid' | 'inline';
+ delay?: number;
+ style?: 'primary' | 'secondary' | 'accent' | 'warning' | 'error';
+}
+
+// Specific line types
+export interface CommandLine extends BaseTerminalLine {
+ type: 'command';
+}
+
+export interface OutputLine extends BaseTerminalLine {
+ type: 'output';
+}
+
+export interface PromptLine extends BaseTerminalLine {
+ type: 'prompt';
+}
+
+export interface ErrorLine extends BaseTerminalLine {
+ type: 'error';
+}
+
+export interface SuccessLine extends BaseTerminalLine {
+ type: 'success';
+}
+
+export interface InfoLine extends BaseTerminalLine {
+ type: 'info';
+}
+
+export interface WarningLine extends BaseTerminalLine {
+ type: 'warning';
+}
+
+export interface BlankLine extends BaseTerminalLine {
+ type: 'blank';
+}
+
+export interface DividerLine extends BaseTerminalLine {
+ type: 'divider';
+}
+
+export interface HeaderLine extends BaseTerminalLine {
+ type: 'header';
+}
+
+export interface ButtonLine extends BaseTerminalLine {
+ type: 'button';
+ action?: () => void;
+ href?: string;
+ icon?: string;
+ external?: boolean;
+}
+
+export interface LinkLine extends BaseTerminalLine {
+ type: 'link';
+ href: string;
+ external?: boolean;
+ icon?: string;
+}
+
+export interface ImageLine extends BaseTerminalLine {
+ type: 'image';
+ image: string;
+ imageAlt?: string;
+ imageWidth?: number;
+}
+
+export interface CardLine extends BaseTerminalLine {
+ type: 'card';
+ cardTitle?: string;
+ cardFooter?: string;
+ icon?: string;
+ image?: string;
+ imageAlt?: string;
+ children?: TerminalLine[];
+}
+
+export interface ProgressLine extends BaseTerminalLine {
+ type: 'progress';
+ progress: number; // 0-100
+ progressLabel?: string;
+}
+
+export interface AccordionLine extends BaseTerminalLine {
+ type: 'accordion';
+ accordionItems?: { title: string; content: string }[];
+ children?: TerminalLine[];
+ accordionOpen?: boolean;
+}
+
+export interface TableLine extends BaseTerminalLine {
+ type: 'table';
+ tableHeaders: string[];
+ tableRows: string[][];
+}
+
+export interface TooltipLine extends BaseTerminalLine {
+ type: 'tooltip';
+ tooltipText: string;
+ tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+export interface CardGridLine extends BaseTerminalLine {
+ type: 'cardgrid';
+ cards: Card[];
+}
+
+export interface InputLine extends BaseTerminalLine {
+ type: 'input';
+ inputPlaceholder?: string;
+ inputType?: 'text' | 'email' | 'password' | 'number' | 'url' | 'tel' | 'search';
+ inputDisabled?: boolean;
+ inputError?: boolean;
+ inputErrorMessage?: string;
+ inputPrefix?: string;
+ inputSuffix?: string;
+ icon?: string;
+}
+
+export interface TextareaLine extends BaseTerminalLine {
+ type: 'textarea';
+ inputPlaceholder?: string;
+ textareaRows?: number;
+ textareaMaxLength?: number;
+ inputDisabled?: boolean;
+ inputError?: boolean;
+ inputErrorMessage?: string;
+ icon?: string;
+}
+
+export interface CheckboxLine extends BaseTerminalLine {
+ type: 'checkbox';
+ checkboxIndeterminate?: boolean;
+ inputDisabled?: boolean;
+ icon?: string;
+}
+
+export interface RadioLine extends BaseTerminalLine {
+ type: 'radio';
+ radioOptions: FormOption[];
+ radioHorizontal?: boolean;
+ inputDisabled?: boolean;
+ icon?: string;
+}
+
+export interface SelectLine extends BaseTerminalLine {
+ type: 'select';
+ selectOptions: FormOption[];
+ selectSearchable?: boolean;
+ inputPlaceholder?: string;
+ inputDisabled?: boolean;
+ inputError?: boolean;
+ inputErrorMessage?: string;
+ icon?: string;
+}
+
+export interface ToggleLine extends BaseTerminalLine {
+ type: 'toggle';
+ toggleOnLabel?: string;
+ toggleOffLabel?: string;
+ toggleShowLabels?: boolean;
+ inputDisabled?: boolean;
+ icon?: string;
+}
+
+export interface GroupLine extends BaseTerminalLine {
+ type: 'group';
+ children: TerminalLine[];
+ groupDirection?: 'row' | 'column';
+ groupAlign?: 'start' | 'center' | 'end';
+ groupGap?: string;
+}
+
+// Discriminated union of all line types
+export type TerminalLine =
+ | CommandLine | OutputLine | PromptLine | ErrorLine | SuccessLine | InfoLine | WarningLine
+ | BlankLine | DividerLine | HeaderLine | ButtonLine | LinkLine | ImageLine
+ | CardLine | ProgressLine | AccordionLine | TableLine | TooltipLine | CardGridLine
+ | InputLine | TextareaLine | CheckboxLine | RadioLine | SelectLine | ToggleLine
+ | GroupLine;
+
// Terminal API for reactive manipulation
export interface TerminalAPI {
/** Clear all lines from the terminal */
@@ -63,74 +251,6 @@ export interface TerminalAPI {
restart: () => void;
}
-export interface TerminalLine {
- type: LineType;
- content: string;
- delay?: number;
- image?: string;
- imageAlt?: string;
- imageWidth?: number;
- // For anchor scrolling (e.g., #skills)
- id?: string;
- // For inline rendering (multiple elements on same line)
- inline?: boolean;
- // For button and link types
- action?: () => void;
- href?: string;
- icon?: string;
- external?: boolean; // Opens in new tab
- // For styling
- style?: 'primary' | 'secondary' | 'accent' | 'warning' | 'error';
- // For card type
- cardTitle?: string;
- cardFooter?: string;
- // For progress type
- progress?: number; // 0-100
- progressLabel?: string;
- // For accordion type
- accordionOpen?: boolean;
- accordionItems?: { title: string; content: string }[];
- // For table type
- tableHeaders?: string[];
- tableRows?: string[][];
- // For tooltip type
- tooltipText?: string;
- tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
- // For cardgrid type
- cards?: Card[];
- // For form input types (input, textarea, checkbox, radio, select, toggle)
- inputPlaceholder?: string;
- inputType?: 'text' | 'email' | 'password' | 'number' | 'url' | 'tel' | 'search';
- inputDisabled?: boolean;
- inputError?: boolean;
- inputErrorMessage?: string;
- inputPrefix?: string;
- inputSuffix?: string;
- // For textarea type
- textareaRows?: number;
- textareaMaxLength?: number;
- // For checkbox type
- checkboxIndeterminate?: boolean;
- // For radio type
- radioOptions?: FormOption[];
- radioHorizontal?: boolean;
- // For select type
- selectOptions?: FormOption[];
- selectSearchable?: boolean;
- // For toggle type
- toggleOnLabel?: string;
- toggleOffLabel?: string;
- toggleShowLabels?: boolean;
- // For group type - contains child lines rendered together
- children?: TerminalLine[];
- // Group layout direction
- groupDirection?: 'row' | 'column';
- // Group alignment
- groupAlign?: 'start' | 'center' | 'end';
- // Group gap
- groupGap?: string;
-}
-
// Pre-parsed line with segments ready for rendering
export interface ParsedLine {
line: TerminalLine;
diff --git a/src/lib/config/terminal.ts b/src/lib/config/terminal.ts
index 9b7d193..aee7b14 100644
--- 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
diff --git a/src/lib/pages/components.ts b/src/lib/pages/components.ts
index 85f4d7a..8f22c6c 100644
--- a/src/lib/pages/components.ts
+++ b/src/lib/pages/components.ts
@@ -28,19 +28,19 @@ export const lines: TerminalLine[] = [
// ═══════════════════════════════════════════════════════════════
{ type: 'divider', content: 'TEXT FORMATTING', id: 'text-formatting' },
{ type: 'blank', content: '' },
-
+
{ type: 'info', content: '(&blue,bold)Colors(&)' },
{ type: 'output', content: '(&red)red(&) (&green)green(&) (&yellow)yellow(&) (&blue)blue(&) (&magenta)magenta(&) (&cyan)cyan(&) (&orange)orange(&) (&pink)pink(&)' },
{ type: 'blank', content: '' },
-
+
{ type: 'info', content: '(&blue,bold)Semantic Colors(&)' },
{ type: 'output', content: '(&primary)primary(&) (&accent)accent(&) (&muted)muted(&) (&error)error(&) (&success)success(&) (&warning)warning(&) (&info)info(&)' },
{ type: 'blank', content: '' },
-
+
{ type: 'info', content: '(&blue,bold)Text Styles(&)' },
{ type: 'output', content: '(&bold)bold(&) (&dim)dim(&) (&italic)italic(&) (&underline)underline(&) (&strikethrough)strikethrough(&)' },
{ type: 'blank', content: '' },
-
+
{ type: 'info', content: '(&blue,bold)Combined Styles(&)' },
{ type: 'output', content: '(&bold,red)bold red(&) (&italic,cyan)italic cyan(&) (&bold,underline,yellow)bold underline yellow(&)' },
{ type: 'blank', content: '' },
@@ -58,7 +58,7 @@ export const lines: TerminalLine[] = [
// ═══════════════════════════════════════════════════════════════
{ type: 'divider', content: 'LINE TYPES' },
{ type: 'blank', content: '' },
-
+
{ type: 'command', content: 'echo "This is a command line"' },
{ type: 'output', content: 'This is an output line' },
{ type: 'info', content: 'This is an info line' },
@@ -72,39 +72,39 @@ export const lines: TerminalLine[] = [
// ═══════════════════════════════════════════════════════════════
{ type: 'divider', content: 'BUTTONS', id: 'buttons' },
{ type: 'blank', content: '' },
-
+
{ type: 'info', content: '(&blue,bold)Button Styles(&)' },
- {
- type: 'button',
- content: 'Primary Button',
+ {
+ type: 'button',
+ content: 'Primary Button',
icon: 'mdi:check',
style: 'primary',
action: () => console.log('Primary clicked')
},
- {
- type: 'button',
- content: 'Secondary Button',
+ {
+ type: 'button',
+ content: 'Secondary Button',
icon: 'mdi:information',
style: 'secondary',
action: () => console.log('Secondary clicked')
},
- {
- type: 'button',
- content: 'Accent Button',
+ {
+ type: 'button',
+ content: 'Accent Button',
icon: 'mdi:star',
style: 'accent',
action: () => console.log('Accent clicked')
},
- {
- type: 'button',
- content: 'Warning Button',
+ {
+ type: 'button',
+ content: 'Warning Button',
icon: 'mdi:alert',
style: 'warning',
action: () => console.log('Warning clicked')
},
- {
- type: 'button',
- content: 'Error Button',
+ {
+ type: 'button',
+ content: 'Error Button',
icon: 'mdi:close-circle',
style: 'error',
action: () => console.log('Error clicked')
@@ -112,17 +112,17 @@ export const lines: TerminalLine[] = [
{ type: 'blank', content: '' },
{ type: 'info', content: '(&blue,bold)Link Buttons(&)' },
- {
- type: 'button',
- content: 'External Link (GitHub)',
+ {
+ type: 'button',
+ content: 'External Link (GitHub)',
icon: 'mdi:github',
style: 'primary',
href: 'https://github.com',
external: true
},
- {
- type: 'button',
- content: 'Internal Link (Home)',
+ {
+ type: 'button',
+ content: 'Internal Link (Home)',
icon: 'mdi:home',
style: 'accent',
href: '/'
@@ -134,17 +134,17 @@ export const lines: TerminalLine[] = [
// ═══════════════════════════════════════════════════════════════
{ type: 'divider', content: 'LINKS' },
{ type: 'blank', content: '' },
-
- {
- type: 'link',
- content: 'Click here to visit GitHub',
+
+ {
+ type: 'link',
+ content: 'Click here to visit GitHub',
href: 'https://github.com',
icon: 'mdi:github',
external: true
},
- {
- type: 'link',
- content: 'Go to portfolio page',
+ {
+ type: 'link',
+ content: 'Go to portfolio page',
href: '/portfolio',
icon: 'mdi:folder'
},
@@ -155,28 +155,28 @@ export const lines: TerminalLine[] = [
// ═══════════════════════════════════════════════════════════════
{ type: 'divider', content: 'PROGRESS BARS' },
{ type: 'blank', content: '' },
-
- {
- type: 'progress',
- content: 'Loading...',
+
+ {
+ type: 'progress',
+ content: 'Loading...',
progress: 25,
progressLabel: 'Installing packages'
},
- {
- type: 'progress',
- content: '',
+ {
+ type: 'progress',
+ content: '',
progress: 50,
progressLabel: 'Building project'
},
- {
- type: 'progress',
- content: '',
+ {
+ type: 'progress',
+ content: '',
progress: 75,
progressLabel: 'Running tests'
},
- {
- type: 'progress',
- content: '',
+ {
+ type: 'progress',
+ content: '',
progress: 100,
progressLabel: 'Complete!'
},
@@ -187,9 +187,9 @@ export const lines: TerminalLine[] = [
// ═══════════════════════════════════════════════════════════════
{ type: 'divider', content: 'GROUPS' },
{ type: 'blank', content: '' },
-
+
{ type: 'info', content: '(&blue,bold)Horizontal Group (Row)(&)' },
- {
+ {
type: 'group',
content: '',
groupDirection: 'row',
@@ -204,7 +204,7 @@ export const lines: TerminalLine[] = [
{ type: 'blank', content: '' },
{ type: 'info', content: '(&blue,bold)Vertical Group (Column)(&)' },
- {
+ {
type: 'group',
content: '',
groupDirection: 'column',
@@ -220,7 +220,7 @@ export const lines: TerminalLine[] = [
{ type: 'blank', content: '' },
{ type: 'info', content: '(&blue,bold)Group with Links(&)' },
- {
+ {
type: 'group',
content: '',
groupAlign: 'start',
@@ -235,51 +235,141 @@ export const lines: TerminalLine[] = [
{ type: 'blank', content: '' },
{ type: 'info', content: '(&blue,bold)Nested Groups(&)' },
- {
+ {
type: 'group',
content: '',
groupDirection: 'column',
groupGap: '0.5rem',
children: [
{ type: 'header', content: '(&cyan,bold)Settings Panel(&)' },
- {
+ {
type: 'group',
content: '',
groupDirection: 'row',
groupGap: '1rem',
children: [
{ type: 'output', content: '(&muted)Theme:(&)', inline: true },
- { type: 'button', content: 'Dark', icon: 'mdi:weather-night', style: 'primary', inline: true, action: () => {} },
- { type: 'button', content: 'Light', icon: 'mdi:weather-sunny', style: 'accent', inline: true, action: () => {} }
+ { type: 'button', content: 'Dark', icon: 'mdi:weather-night', style: 'primary', inline: true, action: () => { } },
+ { type: 'button', content: 'Light', icon: 'mdi:weather-sunny', style: 'accent', inline: true, action: () => { } }
]
},
- {
+ {
type: 'group',
content: '',
groupDirection: 'row',
groupGap: '1rem',
children: [
{ type: 'output', content: '(&muted)Speed:(&)', inline: true },
- { type: 'button', content: 'Slow', style: 'secondary', inline: true, action: () => {} },
- { type: 'button', content: 'Normal', style: 'primary', inline: true, action: () => {} },
- { type: 'button', content: 'Fast', style: 'accent', inline: true, action: () => {} }
+ { type: 'button', content: 'Slow', style: 'secondary', inline: true, action: () => { } },
+ { type: 'button', content: 'Normal', style: 'primary', inline: true, action: () => { } },
+ { type: 'button', content: 'Fast', style: 'accent', inline: true, action: () => { } }
]
}
]
},
{ type: 'blank', content: '' },
+ // ═══════════════════════════════════════════════════════════════
+ // INLINE COMPONENTS
+ // ═══════════════════════════════════════════════════════════════
+ { type: 'divider', content: 'INLINE COMPONENTS' },
+ { type: 'blank', content: '' },
+
+ { type: 'info', content: '(&blue,bold)Inline Cards(&)' },
+ { type: 'output', content: '(&muted)Cards can be displayed inline for compact layouts:(&)' },
+ {
+ type: 'group',
+ content: '',
+ groupDirection: 'row',
+ groupAlign: 'start',
+ groupGap: '1rem',
+ children: [
+ {
+ type: 'card',
+ content: 'Small card 1',
+ cardTitle: 'Card A',
+ inline: true
+ },
+ {
+ type: 'card',
+ content: 'Small card 2',
+ cardTitle: 'Card B',
+ style: 'accent',
+ inline: true
+ },
+ {
+ type: 'card',
+ content: 'Small card 3',
+ cardTitle: 'Card C',
+ style: 'warning',
+ inline: true
+ }
+ ]
+ },
+ { type: 'blank', content: '' },
+
+ { type: 'info', content: '(&blue,bold)Inline Tables(&)' },
+ { type: 'output', content: '(&muted)Tables can also be inline:(&)' },
+ {
+ type: 'group',
+ content: '',
+ groupDirection: 'row',
+ groupAlign: 'start',
+ groupGap: '1rem',
+ children: [
+ {
+ type: 'table',
+ content: 'Server 1',
+ tableHeaders: ['Metric', 'Value'],
+ tableRows: [['CPU', '45%'], ['RAM', '2.4GB']],
+ inline: true
+ },
+ {
+ type: 'table',
+ content: 'Server 2',
+ tableHeaders: ['Metric', 'Value'],
+ tableRows: [['CPU', '12%'], ['RAM', '1.1GB']],
+ inline: true
+ }
+ ]
+ },
+ { type: 'blank', content: '' },
+
+ { type: 'info', content: '(&blue,bold)Inline Accordions(&)' },
+ {
+ type: 'group',
+ content: '',
+ groupDirection: 'row',
+ groupAlign: 'start',
+ groupGap: '1rem',
+ children: [
+ {
+ type: 'accordion',
+ content: 'Details A',
+ accordionItems: [{ title: 'More Info', content: 'Hidden details here.' }],
+ inline: true
+ },
+ {
+ type: 'accordion',
+ content: 'Details B',
+ accordionItems: [{ title: 'More Info', content: 'Hidden details here.' }],
+ inline: true
+ }
+ ]
+ },
+ { type: 'blank', content: '' },
+
// ═══════════════════════════════════════════════════════════════
// IMAGES
// ═══════════════════════════════════════════════════════════════
{ type: 'divider', content: 'IMAGES' },
{ type: 'blank', content: '' },
-
+
{ type: 'info', content: '(&blue,bold)Image with Caption(&)' },
- {
- type: 'image',
- content: 'User Avatar',
- image: user.avatar,
+ {
+ type: 'image',
+ content: 'User Avatar',
+ image: user.avatar,
imageAlt: 'Profile picture',
imageWidth: 100
},
@@ -290,23 +380,43 @@ export const lines: TerminalLine[] = [
// ═══════════════════════════════════════════════════════════════
{ type: 'divider', content: 'CARDS' },
{ type: 'blank', content: '' },
-
- {
- type: 'card',
+
+ {
+ type: 'card',
content: 'This is card content. Cards can contain formatted text and are great for highlighting information.',
cardTitle: 'Card Title',
cardFooter: 'Card Footer'
},
{ type: 'blank', content: '' },
+ {
+ type: 'card',
+ content: 'Cards can now include images and icons directly.',
+ cardTitle: 'Rich Card',
+ cardFooter: 'Updated Feature',
+ icon: 'mdi:star',
+ image: 'https://placehold.co/600x200/1e1e2e/cdd6f4?text=Card+Image',
+ imageAlt: 'Placeholder image',
+ children: [
+ {
+ type: 'button',
+ content: 'View on GitHub',
+ href: 'https://github.com/adithyakrishnan2004',
+ icon: 'mdi:github',
+ style: 'primary'
+ }
+ ],
+ display: 'flex'
+ },
+ { type: 'blank', content: '' },
// ═══════════════════════════════════════════════════════════════
// TABLES
// ═══════════════════════════════════════════════════════════════
{ type: 'divider', content: 'TABLES' },
{ type: 'blank', content: '' },
-
- {
- type: 'table',
+
+ {
+ type: 'table',
content: '',
tableHeaders: sampleTableHeaders,
tableRows: sampleTableRows
@@ -318,9 +428,9 @@ export const lines: TerminalLine[] = [
// ═══════════════════════════════════════════════════════════════
{ type: 'divider', content: 'ACCORDIONS' },
{ type: 'blank', content: '' },
-
- {
- type: 'accordion',
+
+ {
+ type: 'accordion',
content: '',
accordionItems: sampleAccordionItems,
accordionOpen: false
@@ -332,9 +442,9 @@ export const lines: TerminalLine[] = [
// ═══════════════════════════════════════════════════════════════
{ type: 'divider', content: 'TOOLTIPS' },
{ type: 'blank', content: '' },
-
- {
- type: 'tooltip',
+
+ {
+ type: 'tooltip',
content: 'Hover over me for more info!',
tooltipText: 'This is tooltip content that appears on hover.',
tooltipPosition: 'top'
@@ -346,7 +456,7 @@ export const lines: TerminalLine[] = [
// ═══════════════════════════════════════════════════════════════
{ type: 'divider', content: 'DIVIDER STYLES' },
{ type: 'blank', content: '' },
-
+
{ type: 'output', content: '(&muted)Dividers are simple horizontal separators with optional text:(&)' },
{ type: 'divider', content: 'SECTION A' },
{ type: 'output', content: '(&muted)Content for section A...(&)' },
@@ -363,39 +473,39 @@ export const lines: TerminalLine[] = [
{ type: 'blank', content: '' },
{ type: 'info', content: '(&blue,bold)Text Input(&)' },
- {
- type: 'input',
+ {
+ type: 'input',
content: 'Username:',
icon: 'mdi:account',
inputPlaceholder: 'Enter your username',
style: 'primary'
},
- {
- type: 'input',
+ {
+ type: 'input',
content: 'Email:',
icon: 'mdi:email',
inputPlaceholder: 'you@example.com',
inputType: 'email',
style: 'accent'
},
- {
- type: 'input',
+ {
+ type: 'input',
content: 'With prefix/suffix:',
inputPlaceholder: '100',
inputPrefix: '$',
inputSuffix: '.00',
inputType: 'number'
},
- {
- type: 'input',
+ {
+ type: 'input',
content: 'Error state:',
inputPlaceholder: 'Invalid input',
inputError: true,
inputErrorMessage: 'This field is required',
style: 'error'
},
- {
- type: 'input',
+ {
+ type: 'input',
content: 'Disabled:',
inputPlaceholder: 'Cannot edit',
inputDisabled: true
@@ -409,16 +519,16 @@ export const lines: TerminalLine[] = [
{ type: 'blank', content: '' },
{ type: 'info', content: '(&blue,bold)Multi-line Text Area(&)' },
- {
- type: 'textarea',
+ {
+ type: 'textarea',
content: 'Message:',
icon: 'mdi:message-text',
inputPlaceholder: 'Type your message here...',
textareaRows: 4,
style: 'primary'
},
- {
- type: 'textarea',
+ {
+ type: 'textarea',
content: 'With character limit:',
inputPlaceholder: 'Limited to 100 characters',
textareaRows: 3,
@@ -426,6 +536,16 @@ export const lines: TerminalLine[] = [
style: 'accent'
},
{ type: 'blank', content: '' },
+ {
+ type: 'textarea',
+ content: 'Error state:',
+ inputPlaceholder: 'Invalid input...',
+ textareaRows: 2,
+ style: 'error',
+ inputError: true,
+ inputErrorMessage: 'Message is too short'
+ },
+ { type: 'blank', content: '' },
// ═══════════════════════════════════════════════════════════════
// CHECKBOX
@@ -434,25 +554,25 @@ export const lines: TerminalLine[] = [
{ type: 'blank', content: '' },
{ type: 'info', content: '(&blue,bold)Checkbox Options(&)' },
- {
- type: 'checkbox',
+ {
+ type: 'checkbox',
content: 'Enable notifications',
icon: 'mdi:bell',
style: 'primary'
},
- {
- type: 'checkbox',
+ {
+ type: 'checkbox',
content: 'Accept terms and conditions',
style: 'accent'
},
- {
- type: 'checkbox',
+ {
+ type: 'checkbox',
content: 'Indeterminate state',
checkboxIndeterminate: true,
style: 'warning'
},
- {
- type: 'checkbox',
+ {
+ type: 'checkbox',
content: 'Disabled checkbox',
inputDisabled: true
},
@@ -465,8 +585,8 @@ export const lines: TerminalLine[] = [
{ type: 'blank', content: '' },
{ type: 'info', content: '(&blue,bold)Radio Group (Vertical)(&)' },
- {
- type: 'radio',
+ {
+ type: 'radio',
content: 'Select theme:',
icon: 'mdi:palette',
style: 'primary',
@@ -479,8 +599,8 @@ export const lines: TerminalLine[] = [
{ type: 'blank', content: '' },
{ type: 'info', content: '(&blue,bold)Radio Group (Horizontal)(&)' },
- {
- type: 'radio',
+ {
+ type: 'radio',
content: 'Size:',
style: 'accent',
radioHorizontal: true,
@@ -500,8 +620,8 @@ export const lines: TerminalLine[] = [
{ type: 'blank', content: '' },
{ type: 'info', content: '(&blue,bold)Basic Select(&)' },
- {
- type: 'select',
+ {
+ type: 'select',
content: 'Country:',
icon: 'mdi:earth',
inputPlaceholder: 'Select a country...',
@@ -517,8 +637,8 @@ export const lines: TerminalLine[] = [
{ type: 'blank', content: '' },
{ type: 'info', content: '(&blue,bold)Searchable Select(&)' },
- {
- type: 'select',
+ {
+ type: 'select',
content: 'Programming Language:',
icon: 'mdi:code-braces',
inputPlaceholder: 'Search languages...',
@@ -535,6 +655,18 @@ export const lines: TerminalLine[] = [
]
},
{ type: 'blank', content: '' },
+ {
+ type: 'select',
+ content: 'Error state:',
+ inputPlaceholder: 'Select something...',
+ style: 'error',
+ inputError: true,
+ inputErrorMessage: 'Selection required',
+ selectOptions: [
+ { value: '1', label: 'Option 1' }
+ ]
+ },
+ { type: 'blank', content: '' },
// ═══════════════════════════════════════════════════════════════
// TOGGLE SWITCH
@@ -543,36 +675,36 @@ export const lines: TerminalLine[] = [
{ type: 'blank', content: '' },
{ type: 'info', content: '(&blue,bold)Toggle Options(&)' },
- {
- type: 'toggle',
+ {
+ type: 'toggle',
content: 'Dark Mode',
icon: 'mdi:theme-light-dark',
style: 'primary'
},
- {
- type: 'toggle',
+ {
+ type: 'toggle',
content: 'Airplane Mode',
icon: 'mdi:airplane',
style: 'accent',
toggleOnLabel: 'ON',
toggleOffLabel: 'OFF'
},
- {
- type: 'toggle',
+ {
+ type: 'toggle',
content: 'Custom Labels',
icon: 'mdi:toggle-switch',
style: 'warning',
toggleOnLabel: 'YES',
toggleOffLabel: 'NO'
},
- {
- type: 'toggle',
+ {
+ type: 'toggle',
content: 'No Labels',
toggleShowLabels: false,
style: 'accent'
},
- {
- type: 'toggle',
+ {
+ type: 'toggle',
content: 'Disabled Toggle',
inputDisabled: true
},
@@ -583,7 +715,7 @@ export const lines: TerminalLine[] = [
// ═══════════════════════════════════════════════════════════════
{ type: 'divider', content: 'USAGE' },
{ type: 'blank', content: '' },
-
+
{ type: 'info', content: '(&blue,bold)Code Example(&)' },
{ type: 'output', content: "(&muted)// Text formatting(&)" },
{ type: 'output', content: "{ type: 'output', content: '(&green)colored text(&)' }" },
@@ -609,38 +741,38 @@ export const lines: TerminalLine[] = [
// ═══════════════════════════════════════════════════════════════
{ type: 'divider', content: 'TERMINAL API', id: 'terminal-api' },
{ type: 'blank', content: '' },
-
+
{ type: 'info', content: '(&blue,bold)Reactive Terminal Control(&)' },
{ type: 'output', content: 'The (&cyan)TerminalAPI(&) allows programmatic control of terminal content.' },
{ type: 'output', content: 'Use (&primary)bind:terminal(&) to access the API from your component.' },
{ type: 'blank', content: '' },
-
+
{ type: 'info', content: '(&blue,bold)Writing Lines(&)' },
{ type: 'output', content: "(&muted)terminal.write({ type: 'output', content: 'Hello!' })(&) (&dim)// Append line(&)" },
{ type: 'output', content: "(&muted)terminal.writeLines([...lines])(&) (&dim)// Append multiple(&)" },
{ type: 'output', content: "(&muted)terminal.clear()(&) (&dim)// Clear all(&)" },
{ type: 'output', content: "(&muted)terminal.setLines([...lines])(&) (&dim)// Replace all(&)" },
{ type: 'blank', content: '' },
-
+
{ type: 'info', content: '(&blue,bold)Updating Lines(&)' },
{ type: 'output', content: "(&muted)terminal.update(0, { content: 'New text' })(&) (&dim)// Update by index(&)" },
{ type: 'output', content: "(&muted)terminal.updateContent(0, 'New text')(&) (&dim)// Update content only(&)" },
{ type: 'output', content: "(&muted)terminal.updateById('my-id', { content: 'New' })(&) (&dim)// Update by ID(&)" },
{ type: 'blank', content: '' },
-
+
{ type: 'info', content: '(&blue,bold)Removing Lines(&)' },
{ type: 'output', content: "(&muted)terminal.remove(0)(&) (&dim)// Remove by index(&)" },
{ type: 'output', content: "(&muted)terminal.removeRange(0, 3)(&) (&dim)// Remove range(&)" },
{ type: 'output', content: "(&muted)terminal.removeById('my-id')(&) (&dim)// Remove by ID(&)" },
{ type: 'blank', content: '' },
-
+
{ type: 'info', content: '(&blue,bold)Navigation & Control(&)' },
{ type: 'output', content: "(&muted)terminal.scrollToBottom()(&) (&dim)// Scroll to end(&)" },
{ type: 'output', content: "(&muted)terminal.scrollToLine(5)(&) (&dim)// Scroll to line(&)" },
{ type: 'output', content: "(&muted)terminal.skip()(&) (&dim)// Skip animation(&)" },
{ type: 'output', content: "(&muted)terminal.restart()(&) (&dim)// Restart animation(&)" },
{ type: 'blank', content: '' },
-
+
{ type: 'info', content: '(&blue,bold)Reading State(&)' },
{ type: 'output', content: "(&muted)terminal.getLine(0)(&) (&dim)// Get line by index(&)" },
{ type: 'output', content: "(&muted)terminal.getLines()(&) (&dim)// Get all lines(&)" },
@@ -648,7 +780,7 @@ export const lines: TerminalLine[] = [
{ type: 'output', content: "(&muted)terminal.findById('my-id')(&) (&dim)// Find index by ID(&)" },
{ type: 'output', content: "(&muted)terminal.isAnimating()(&) (&dim)// Check if typing(&)" },
{ type: 'blank', content: '' },
-
+
{ type: 'info', content: '(&blue,bold)Usage Example(&)' },
{ type: 'output', content: "(&dim)// In your Svelte component:(&)" },
{ type: 'output', content: "(&cyan)import(&) TerminalTUI (&cyan)from(&) '(&green)$lib/components/TerminalTUI.svelte(&)';" },
@@ -664,6 +796,63 @@ export const lines: TerminalLine[] = [
{ type: 'output', content: "terminal?.write({ type: '(&green)success(&)', content: '(&green)Done!(&)' });" },
{ type: 'blank', content: '' },
+ // ═══════════════════════════════════════════════════════════════
+ // DISPLAY & NESTING
+ // ═══════════════════════════════════════════════════════════════
+ { type: 'divider', content: 'DISPLAY & NESTING' },
+ { type: 'blank', content: '' },
+
+ { type: 'info', content: '(&blue,bold)Inline Grouping Logic(&)' },
+ { type: 'output', content: '(&muted)Consecutive inline elements are grouped. Non-consecutive are separated.(&)' },
+ { type: 'output', content: '(&muted)1(&)', inline: true },
+ { type: 'output', content: '(&muted)2(&)', inline: true },
+ { type: 'blank', content: '' },
+ { type: 'output', content: '(&muted)3(&)', inline: true },
+ { type: 'output', content: '(&muted)4(&)', inline: true },
+ { type: 'blank', content: '' },
+
+ { type: 'info', content: '(&blue,bold)Card with Nested Children (Grid)(&)' },
+ {
+ type: 'card',
+ content: 'This card contains other cards in a grid layout.',
+ cardTitle: 'Parent Card (Grid)',
+ display: 'grid',
+ children: [
+ { type: 'card', content: 'Child 1', cardTitle: 'C1' },
+ { type: 'card', content: 'Child 2', cardTitle: 'C2' },
+ { type: 'card', content: 'Child 3', cardTitle: 'C3' },
+ { type: 'card', content: 'Child 4', cardTitle: 'C4' }
+ ]
+ },
+ { type: 'blank', content: '' },
+
+ { type: 'info', content: '(&blue,bold)Accordion with Nested Children (Flex)(&)' },
+ {
+ type: 'accordion',
+ content: 'Open to see nested items',
+ display: 'flex',
+ children: [
+ { type: 'button', content: 'Action 1', style: 'primary', icon: 'mdi:check' },
+ { type: 'button', content: 'Action 2', style: 'secondary', icon: 'mdi:close' },
+ { type: 'button', content: 'Action 3', style: 'accent', icon: 'mdi:star' }
+ ]
+ },
+ { type: 'blank', content: '' },
+
+ { type: 'info', content: '(&blue,bold)Group with Grid Layout(&)' },
+ {
+ type: 'group',
+ content: '',
+ display: 'grid',
+ groupGap: '1rem',
+ children: [
+ { type: 'card', content: 'Grid Item 1', cardTitle: 'G1' },
+ { type: 'card', content: 'Grid Item 2', cardTitle: 'G2' },
+ { type: 'card', content: 'Grid Item 3', cardTitle: 'G3' }
+ ]
+ },
+ { type: 'blank', content: '' },
+
// End
{ type: 'success', content: '(&success)Component showcase complete!(&)' }
];
\ No newline at end of file
diff --git a/src/lib/pages/home.ts b/src/lib/pages/home.ts
index 8970041..10b496f 100644
--- a/src/lib/pages/home.ts
+++ b/src/lib/pages/home.ts
@@ -13,7 +13,7 @@ export const lines: TerminalLine[] = [
{ type: 'output', content: '(&dim,red)███(&)(&dim,orange)███(&)(&dim,yellow)███(&)(&dim,green)███(&)(&dim,cyan)███(&)(&dim,blue)███(&)(&dim,magenta)███(&)(&dim,pink)███(&)', inline: true },
{ type: 'blank', content: '' },
- { type: 'header', content: `HI, I'm ${user.displayname}` },
+ { type: 'header', content: `HI, I'm ${user.displayname}` },
{ type: 'image', content: '', image: user.avatar, imageAlt: user.name, imageWidth: 120, inline: true },
{ type: 'group', content: '', inline: true, groupDirection: 'column', children: [
diff --git a/src/lib/pages/portfolio.ts b/src/lib/pages/portfolio.ts
index 8a5a2c2..411f23c 100644
--- a/src/lib/pages/portfolio.ts
+++ b/src/lib/pages/portfolio.ts
@@ -2,7 +2,7 @@
import type { TerminalLine } from '$lib/components/tui/types';
import { user, skills, projects } from '$lib/config';
-export const lines: TerminalLine[] = [
+export const lines: TerminalLine[] = [
// Header command
{ type: 'command', content: 'cat ~/about.md' },
{ type: 'blank', content: '' },
@@ -24,9 +24,10 @@ export const lines: TerminalLine[] = [
{ type: 'output', content: `(&muted)${user.bio}(&)` },
]
},
-
+
{ type: 'blank', content: '' },
- { type: 'group', content: '', groupAlign: 'start', groupGap: '1rem',
+ {
+ type: 'group', content: '', groupAlign: 'start', groupGap: '1rem',
children: [
{ type: 'output', content: `(&primary, bold)Links >(&)`, inline: true },
{ type: 'link', href: "/portfolio#contact", content: `(&bg-blue,black)Contact(&)`, inline: true },
@@ -44,9 +45,9 @@ export const lines: TerminalLine[] = [
href: social.link,
inline: true
})),
-
+
{ type: 'divider', content: 'SKILLS', id: 'skills' },
-
+
// Skills as TUI sections
// Languages
@@ -81,54 +82,54 @@ export const lines: TerminalLine[] = [
// Interests
{ type: 'info', content: '(&accent,bold)▸ Interests(&)' },
- { type: 'output', content: ' ' + skills.interests.map(s => `(&muted)${s}(&)`).join(' (&muted)•(&) ') },
-
+ { type: 'output', content: ' ' + skills.interests.map(s => `(&muted)${s}(&)`).join(' (&muted)•(&) ') },
+
{ type: 'divider', content: 'PROJECTS', id: 'projects' },
-
+
// Featured projects with buttons
...projects.filter(p => p.featured).flatMap(project => [
{ type: 'header' as const, content: `(&bold)${project.name}(&)` },
{ type: 'output' as const, content: `(&muted)${project.description}(&)` },
- { type: 'info' as const, content: `(&info)TechStack: (&primary)${project.tech.join(', ')}(&)` },
- ...(project.github ? [{
- type: 'button' as const,
- content: 'View on GitHub',
+ { type: 'info' as const, content: `(&info)TechStack:(&) (&magenta)${project.tech.join(', ')}(&)` },
+ ...(project.github ? [{
+ type: 'button' as const,
+ content: 'View on GitHub',
icon: 'mdi:github',
style: 'accent' as const,
href: project.github
}] : []),
- ...(project.live ? [{
- type: 'button' as const,
- content: 'View Live Demo',
+ ...(project.live ? [{
+ type: 'button' as const,
+ content: 'View Live Demo',
icon: 'mdi:open-in-new',
style: 'accent' as const,
href: project.live
}] : []),
{ type: 'blank' as const, content: '' }
]),
-
+
// Other projects
...projects.filter(p => !p.featured).flatMap(project => [
{ type: 'success' as const, content: `(&success)${project.name}(&)` },
{ type: 'output' as const, content: `(&muted)${project.description}(&)` },
- { type: 'info' as const, content: `(&info)TechStack:(&) (&primary)${project.tech.join(', ')}(&)` },
- ...(project.github ? [{
- type: 'button' as const,
- content: 'View on GitHub',
+ { type: 'info' as const, content: `(&info)TechStack:(&) (&magenta)${project.tech.join(', ')}(&)` },
+ ...(project.github ? [{
+ type: 'button' as const,
+ content: 'View on GitHub',
icon: 'mdi:github',
style: 'accent' as const,
href: project.github
}] : []),
- ...(project.live ? [{
- type: 'button' as const,
- content: 'View Live',
+ ...(project.live ? [{
+ type: 'button' as const,
+ content: 'View Live',
icon: 'mdi:open-in-new',
style: 'accent' as const,
href: project.live
}] : []),
{ type: 'blank' as const, content: '' }
]),
-
+
// End
{ type: 'success', content: `(&success)Portfolio loaded successfully!(&)` }
];
\ No newline at end of file
diff --git a/src/lib/pages/projects.ts b/src/lib/pages/projects.ts
index 8d61378..8fecaf9 100644
--- a/src/lib/pages/projects.ts
+++ b/src/lib/pages/projects.ts
@@ -7,22 +7,22 @@ const featuredCount = sortedCards.filter(c => c.featured).length;
// Build the terminal lines with card grid
export const lines: TerminalLine[] = [
- { type: 'command', content: 'ls ~/projects --grid' },
+ { type: 'command', content: 'ls ~/projects' },
{ type: 'divider', content: 'PROJECTS' },
...projects.filter(p => p.featured).flatMap(project => [
{ type: 'header' as const, content: `(&bold)${project.name}(&)` },
{ type: 'output' as const, content: `(&muted)${project.description}(&)` },
- { type: 'info' as const, content: `(&info)Tech: (&primary)${project.tech.join(', ')}(&)` },
- ...(project.github ? [{
- type: 'button' as const,
- content: 'View on GitHub',
+ { type: 'info' as const, content: `(&info)TechStack:(&) (&magenta)${project.tech.join(', ')}(&)` },
+ ...(project.github ? [{
+ type: 'button' as const,
+ content: 'View on GitHub',
icon: 'mdi:github',
style: 'accent' as const,
href: project.github
}] : []),
- ...(project.live ? [{
- type: 'button' as const,
- content: 'View Live Demo',
+ ...(project.live ? [{
+ type: 'button' as const,
+ content: 'View Live Demo',
icon: 'mdi:open-in-new',
style: 'accent' as const,
href: project.live
@@ -32,17 +32,17 @@ export const lines: TerminalLine[] = [
...projects.filter(p => !p.featured).flatMap(project => [
{ type: 'success' as const, content: `(&success)${project.name}(&)` },
{ type: 'output' as const, content: `(&muted)${project.description}(&)` },
- { type: 'info' as const, content: `(&info)Tech:(&) (&primary)${project.tech.join(', ')}(&)` },
- ...(project.github ? [{
- type: 'button' as const,
- content: 'View on GitHub',
+ { type: 'info' as const, content: `(&info)TechStack:(&) (&magenta)${project.tech.join(', ')}(&)` },
+ ...(project.github ? [{
+ type: 'button' as const,
+ content: 'View on GitHub',
icon: 'mdi:github',
style: 'accent' as const,
href: project.github
}] : []),
- ...(project.live ? [{
- type: 'button' as const,
- content: 'View Live',
+ ...(project.live ? [{
+ type: 'button' as const,
+ content: 'View Live',
icon: 'mdi:open-in-new',
style: 'accent' as const,
href: project.live