Display Widgets

import { StreamingText } from '@termuijs/widgets'

const widget = new StreamingText(
    {
        text: 'Generating response...',
        speed: 30,                           // characters per second
        cursor: '▋',                         // blinking cursor (ASCII: '_')
        onComplete: () => console.log('done'),
    },
    { flexGrow: 1 }
)

import { ChatMessage } from '@termuijs/widgets'

const userMsg = new ChatMessage(
    { role: 'user', content: 'How do I sort an array in TypeScript?' },
    { flexGrow: 1 }
)

const assistantMsg = new ChatMessage(
    { role: 'assistant', content: 'Use `.sort()` with a comparator function...' },
    { flexGrow: 1 }
)

import { ToolCall } from '@termuijs/widgets'

const widget = new ToolCall(
    {
        name: 'readFile',
        status: 'running',
        args: { path: '/etc/hosts' },
    },
    { flexGrow: 1 }
)

// Update status as the call progresses
widget.setStatus('done')
widget.setResult('127.0.0.1  localhost\n::1        localhost\n')

import { JSONView } from '@termuijs/widgets'

const widget = new JSONView(
    {
        data: { name: 'Alice', scores: [98, 87, 92], active: true },
        indent: 2,
        onSelect: (path, value) => console.log(path, value),
    },
    { flexGrow: 1 }
)

import { DiffView } from '@termuijs/widgets'
import type { DiffLine } from '@termuijs/widgets'

const lines: DiffLine[] = [
    { type: 'context', content: '  function greet(name: string) {' },
    { type: 'remove',  content: '    return "Hello " + name' },
    { type: 'add',     content: '    return `Hello, ${name}!`' },
    { type: 'context', content: '  }' },
]

const widget = new DiffView({ lines }, { flexGrow: 1 })

import { diffView } from '@termuijs/quick'

const w = diffView('+ added line\n- removed line\n  unchanged')

import { BigText } from '@termuijs/widgets'

const banner = new BigText('HELLO', { flexGrow: 1 }, {
    color: { type: 'named', name: 'cyan' },
})

import { Gradient } from '@termuijs/widgets'

const header = new Gradient('Terminal Dashboard',
    { flexGrow: 1 },
    { startColor: '#ff6b6b', endColor: '#4ecdc4', align: 'center' }
)

import { Markdown } from '@termuijs/widgets'

const widget = new Markdown({ flexGrow: 1 }, { content: '# Hello\n\nThis is **bold** text.' })

import { Code } from '@termuijs/widgets'

const widget = new Code({ flexGrow: 1 }, {
    source: 'const x = 1',
    language: 'typescript',
    lineNumbers: true,
})

import { Highlight } from '@termuijs/widgets'

const widget = new Highlight({ flexGrow: 1 }, { text: 'Hello world', query: 'world' })

import { Typewriter } from '@termuijs/widgets'

const widget = new Typewriter({ flexGrow: 1 }, { text: 'Loading...', delayMs: 40 })

import { Digits } from '@termuijs/widgets'

const widget = new Digits({ height: 5 }, { value: '12:34', color: { type: 'named', name: 'cyan' } })

import { Marquee } from '@termuijs/widgets'

const widget = new Marquee({ height: 1, flexGrow: 1 }, { text: 'Breaking news: TermUI v0.1.6 released', speed: 8 })

import { Callout } from '@termuijs/widgets'

const widget = new Callout({ flexGrow: 1 }, { message: 'Run with --debug for verbose output.', variant: 'tip' })

import { Kbd } from '@termuijs/widgets'

const widget = new Kbd({}, { keys: ['Ctrl', 'S'] })

import { Hexdump } from '@termuijs/widgets'

const widget = new Hexdump({ flexGrow: 1 }, { data: Buffer.from('Hello, TermUI!') })

import { Stat } from '@termuijs/widgets'

const widget = new Stat({}, { label: 'Requests', value: '4,821', delta: '+8%' })

import { Avatar } from '@termuijs/widgets'

const widget = new Avatar({}, { name: 'Alice B', color: { type: 'named', name: 'blue' } })

import { Badge } from '@termuijs/widgets'

const widget = new Badge({}, { label: 'NEW', color: { type: 'named', name: 'green' } })

import { Tag } from '@termuijs/widgets'

const widget = new Tag({}, { label: 'v0.1.6', color: { type: 'named', name: 'cyan' } })

import { EmptyState } from '@termuijs/widgets'

const widget = new EmptyState({ flexGrow: 1 }, { message: 'No results found', hint: 'Try a different search term.' })

import { Placeholder } from '@termuijs/widgets'

const widget = new Placeholder({ width: 20, height: 5 }, { label: 'Chart goes here' })

import { Watermark } from '@termuijs/widgets'

const widget = new Watermark({ flexGrow: 1 }, { text: 'DRAFT' })