Terminal UI API Update

src/lib/pages/components.ts

@@ -514,6 +514,66 @@ export const lines: TerminalLine[] = [
     { type: 'output', content: "{ type: 'select', content: 'Choose:', selectOptions: [{ value: 'a', label: 'Option A' }] }" },
     { type: 'blank', content: '' },
 
+    // ═══════════════════════════════════════════════════════════════
+    // TERMINAL API
+    // ═══════════════════════════════════════════════════════════════
+    { 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(&)" },
+    { type: 'output', content: "(&muted)terminal.getLineCount()(&)                               (&dim)// Get count(&)" },
+    { 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(&)';" },
+    { type: 'output', content: "(&cyan)import type(&) { TerminalAPI } (&cyan)from(&) '(&green)$lib(&)';" },
+    { type: 'output', content: "" },
+    { type: 'output', content: "(&magenta)let(&) terminal = (&yellow)$state(&)<TerminalAPI>();" },
+    { type: 'output', content: "(&magenta)let(&) lines = (&yellow)$state(&)([{ type: '(&green)output(&)', content: '(&green)Hello!(&)' }]);" },
+    { type: 'output', content: "" },
+    { type: 'output', content: "(&dim)// In template:(&)" },
+    { type: 'output', content: "<TerminalTUI (&cyan)bind:terminal(&) (&cyan)bind:lines(&) />" },
+    { type: 'output', content: "" },
+    { type: 'output', content: "(&dim)// Then use the API:(&)" },
+    { type: 'output', content: "terminal?.write({ type: '(&green)success(&)', content: '(&green)Done!(&)' });" },
+    { type: 'blank', content: '' },
+
     // End
     { type: 'success', content: '(&success)Component showcase complete!(&)' }
 ];