@rlabs-inc/create-tui 0.1.6 → 0.2.0

package/templates/counter/src/components/CounterPanel.ts

@@ -0,0 +1,74 @@
+/**
+ * Counter Panel Component
+ *
+ * Displays all counters using the `each` template primitive.
+ * Demonstrates:
+ * - Reactive list rendering with each()
+ * - Focus tracking per item
+ */
+
+import { derived } from '@rlabs-inc/signals'
+import { box, text, each, t, BorderStyle, Attr, focusManager } from '@rlabs-inc/tui'
+import { counters } from '../state/counters'
+import { Counter } from './Counter'
+
+export function CounterPanel() {
+  box({
+    border: BorderStyle.SINGLE,
+    borderColor: t.border,
+    flexDirection: 'column',
+    grow: 1,
+    children: () => {
+      // Panel header
+      box({
+        padding: 1,
+        borderBottom: BorderStyle.SINGLE,
+        borderColor: t.border,
+        children: () => {
+          text({
+            content: 'COUNTERS',
+            fg: t.textBright,
+            attrs: Attr.BOLD,
+          })
+          text({
+            content: 'Tab to navigate, +/- to change value',
+            fg: t.textDim,
+          })
+        },
+      })
+
+      // Counter grid using each() primitive
+      box({
+        padding: 1,
+        gap: 1,
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        children: () => {
+          each(
+            () => counters.value,
+            (getCounter, key) => {
+              const counter = getCounter()
+              // Find index for focus tracking
+              const counterIndex = counters.value.findIndex(c => String(c.id) === key)
+              const isFocused = derived(
+                () => focusManager.focusedIndex === counterIndex
+              )
+
+              return box({
+                width: '48%',
+                minWidth: 20,
+                children: () => {
+                  Counter({
+                    counter,
+                    focused: isFocused.value,
+                  })
+                },
+              })
+            },
+            { key: (c) => String(c.id) }
+          )
+        },
+      })
+    },
+  })
+}

package/templates/counter/src/components/Header.ts

@@ -0,0 +1,55 @@
+/**
+ * Header Component
+ *
+ * Shows app title and current theme.
+ */
+
+import { box, text, t, BorderStyle, Attr } from '@rlabs-inc/tui'
+import { currentThemeName } from '../state/counters'
+
+export function Header() {
+  box({
+    height: 3,
+    width: '100%',
+    border: BorderStyle.SINGLE,
+    borderColor: t.primary,
+    paddingLeft: 1,
+    paddingRight: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    children: () => {
+      // Left: Title
+      box({
+        flexDirection: 'row',
+        gap: 2,
+        alignItems: 'center',
+        children: () => {
+          text({
+            content: '{{PROJECT_NAME}}',
+            fg: t.primary,
+            attrs: Attr.BOLD,
+          })
+          text({ content: '|', fg: t.textDim })
+          text({ content: 'Reactive Counter Showcase', fg: t.textMuted })
+        },
+      })
+
+      // Right: Theme indicator
+      box({
+        flexDirection: 'row',
+        gap: 1,
+        alignItems: 'center',
+        children: () => {
+          text({ content: 'Theme:', fg: t.textDim })
+          text({
+            content: currentThemeName,
+            fg: t.accent,
+            attrs: Attr.BOLD,
+          })
+          text({ content: '[t]', fg: t.textDim })
+        },
+      })
+    },
+  })
+}

package/templates/counter/src/components/HistoryPanel.ts

@@ -0,0 +1,96 @@
+/**
+ * History Panel Component
+ *
+ * Scrollable history log demonstrating auto-scroll detection.
+ * When content exceeds the container height, TUI automatically
+ * enables scrolling.
+ *
+ * Demonstrates:
+ * - Auto-scroll when content overflows
+ * - each() for dynamic list rendering
+ * - show() for conditional empty state
+ */
+
+import { derived } from '@rlabs-inc/signals'
+import { box, text, each, show, t, BorderStyle, Attr } from '@rlabs-inc/tui'
+import { history } from '../state/counters'
+
+export function HistoryPanel() {
+  box({
+    border: BorderStyle.SINGLE,
+    borderColor: t.border,
+    grow: 1,
+    flexDirection: 'column',
+    children: () => {
+      // Header
+      box({
+        padding: 1,
+        borderBottom: BorderStyle.SINGLE,
+        borderColor: t.border,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        children: () => {
+          text({
+            content: 'HISTORY',
+            fg: t.textBright,
+            attrs: Attr.BOLD,
+          })
+          text({
+            content: derived(() => `${history.value.length} entries`),
+            fg: t.textDim,
+          })
+        },
+      })
+
+      // Scrollable content area
+      box({
+        grow: 1,
+        padding: 1,
+        overflow: 'scroll', // Enable scrolling
+        children: () => {
+          // Empty state using show()
+          show(
+            () => history.value.length === 0,
+            () => {
+              return box({
+                alignItems: 'center',
+                padding: 2,
+                children: () => {
+                  text({ content: 'No history yet', fg: t.textDim })
+                  text({
+                    content: 'Actions will appear here',
+                    fg: t.textDim,
+                  })
+                },
+              })
+            }
+          )
+
+          // History entries using each()
+          each(
+            () => history.value,
+            (getEntry) => {
+              const entry = getEntry()
+              return box({
+                flexDirection: 'row',
+                gap: 1,
+                children: () => {
+                  text({
+                    content: entry.timestamp,
+                    fg: t.textDim,
+                    width: 10,
+                  })
+                  text({
+                    content: entry.message,
+                    fg: t.text,
+                  })
+                },
+              })
+            },
+            { key: (e) => String(e.id) }
+          )
+        },
+      })
+    },
+  })
+}

package/templates/counter/src/components/KeyBindings.ts

@@ -0,0 +1,60 @@
+/**
+ * Key Bindings Component
+ *
+ * Footer showing available keyboard shortcuts.
+ */
+
+import { box, text, t, BorderStyle } from '@rlabs-inc/tui'
+
+export function KeyBindings() {
+  box({
+    height: 3,
+    width: '100%',
+    border: BorderStyle.SINGLE,
+    borderColor: t.border,
+    paddingLeft: 1,
+    paddingRight: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    children: () => {
+      // Navigation keys
+      box({
+        flexDirection: 'row',
+        gap: 2,
+        children: () => {
+          KeyHint({ key: 'Tab', action: 'Focus' })
+          KeyHint({ key: '+/-', action: 'Change' })
+          KeyHint({ key: 'r', action: 'Reset' })
+        },
+      })
+
+      // Action keys
+      box({
+        flexDirection: 'row',
+        gap: 2,
+        children: () => {
+          KeyHint({ key: 'R', action: 'Reset All' })
+          KeyHint({ key: 't', action: 'Theme' })
+          KeyHint({ key: 'q', action: 'Quit' })
+        },
+      })
+    },
+  })
+}
+
+interface KeyHintProps {
+  key: string
+  action: string
+}
+
+function KeyHint({ key, action }: KeyHintProps) {
+  box({
+    flexDirection: 'row',
+    gap: 1,
+    children: () => {
+      text({ content: `[${key}]`, fg: t.info })
+      text({ content: action, fg: t.textDim })
+    },
+  })
+}

package/templates/counter/src/components/StatsPanel.ts

@@ -0,0 +1,101 @@
+/**
+ * Stats Panel Component
+ *
+ * Displays derived statistics computed from counter values.
+ * Demonstrates reactive derived state.
+ */
+
+import { derived } from '@rlabs-inc/signals'
+import { box, text, t, BorderStyle, Attr } from '@rlabs-inc/tui'
+import { total, average, min, max, counters } from '../state/counters'
+
+export function StatsPanel() {
+  box({
+    border: BorderStyle.SINGLE,
+    borderColor: t.border,
+    children: () => {
+      // Header
+      box({
+        padding: 1,
+        borderBottom: BorderStyle.SINGLE,
+        borderColor: t.border,
+        children: () => {
+          text({
+            content: 'STATISTICS',
+            fg: t.textBright,
+            attrs: Attr.BOLD,
+          })
+        },
+      })
+
+      // Stats grid
+      box({
+        padding: 1,
+        gap: 1,
+        children: () => {
+          // Row 1: Total and Average
+          box({
+            flexDirection: 'row',
+            gap: 2,
+            children: () => {
+              StatItem({ label: 'Total', value: total, color: t.primary })
+              StatItem({
+                label: 'Average',
+                value: derived(() => average.value.toFixed(1)),
+                color: t.secondary,
+              })
+            },
+          })
+
+          // Row 2: Min and Max
+          box({
+            flexDirection: 'row',
+            gap: 2,
+            children: () => {
+              StatItem({ label: 'Min', value: min, color: t.error })
+              StatItem({ label: 'Max', value: max, color: t.success })
+            },
+          })
+
+          // Row 3: Count
+          box({
+            flexDirection: 'row',
+            gap: 2,
+            children: () => {
+              StatItem({
+                label: 'Counters',
+                value: derived(() => counters.value.length),
+                color: t.info,
+              })
+            },
+          })
+        },
+      })
+    },
+  })
+}
+
+interface StatItemProps {
+  label: string
+  value: { value: number | string } | (() => number | string)
+  color: { value: import('@rlabs-inc/tui').RGBA }
+}
+
+function StatItem({ label, value, color }: StatItemProps) {
+  box({
+    flexDirection: 'row',
+    gap: 1,
+    width: '45%',
+    children: () => {
+      text({ content: `${label}:`, fg: t.textDim, width: 10 })
+      text({
+        content: derived(() => {
+          const v = typeof value === 'function' ? value() : value.value
+          return String(v)
+        }),
+        fg: color,
+        attrs: Attr.BOLD,
+      })
+    },
+  })
+}

package/templates/counter/src/main.ts

@@ -0,0 +1,87 @@
+/**
+ * {{PROJECT_NAME}} - Reactive Counter Showcase
+ *
+ * Demonstrates TUI Framework's key features:
+ * - Fine-grained reactivity with signals
+ * - Template primitives (each, show)
+ * - Focus management
+ * - Auto-scroll detection
+ * - Theme switching
+ */
+
+import { mount, keyboard, focusManager } from '@rlabs-inc/tui'
+import { App } from './App'
+import { counters, resetAll, addHistoryEntry, cycleTheme } from './state/counters'
+
+async function main() {
+  const cleanup = await mount(
+    () => App(),
+    { mode: 'fullscreen', mouse: true }
+  )
+
+  // ==========================================================================
+  // KEYBOARD HANDLERS
+  // ==========================================================================
+
+  // Counter controls (apply to focused counter)
+  keyboard.onKey(['+', '='], () => {
+    const idx = focusManager.focusedIndex
+    if (idx >= 0 && idx < counters.value.length) {
+      const counter = counters.value[idx]
+      counter.value.value++
+      addHistoryEntry(`Counter ${idx + 1}: +1 = ${counter.value.value}`)
+    }
+    return true
+  })
+
+  keyboard.onKey('-', () => {
+    const idx = focusManager.focusedIndex
+    if (idx >= 0 && idx < counters.value.length) {
+      const counter = counters.value[idx]
+      counter.value.value--
+      addHistoryEntry(`Counter ${idx + 1}: -1 = ${counter.value.value}`)
+    }
+    return true
+  })
+
+  keyboard.onKey('r', () => {
+    const idx = focusManager.focusedIndex
+    if (idx >= 0 && idx < counters.value.length) {
+      const counter = counters.value[idx]
+      counter.value.value = 0
+      addHistoryEntry(`Counter ${idx + 1}: reset to 0`)
+    }
+    return true
+  })
+
+  keyboard.onKey('R', () => {
+    resetAll()
+    addHistoryEntry('All counters reset')
+    return true
+  })
+
+  // Theme cycling
+  keyboard.onKey('t', () => {
+    const themeName = cycleTheme()
+    addHistoryEntry(`Theme: ${themeName}`)
+    return true
+  })
+
+  // Focus navigation
+  keyboard.onKey('Tab', () => {
+    focusManager.focusNext()
+    return true
+  })
+
+  keyboard.onKey('Shift+Tab', () => {
+    focusManager.focusPrevious()
+    return true
+  })
+
+  // Quit
+  keyboard.onKey(['q', 'Q', 'Escape'], () => {
+    cleanup()
+  })
+}
+
+main().catch(console.error)

package/templates/counter/src/state/counters.ts

@@ -0,0 +1,121 @@
+/**
+ * Counter State Management
+ *
+ * Centralized state using signals with derived computations.
+ */
+
+import { signal, derived, type WritableSignal } from '@rlabs-inc/signals'
+import { setTheme, themes } from '@rlabs-inc/tui'
+
+// =============================================================================
+// COUNTER STATE
+// =============================================================================
+
+export interface Counter {
+  id: number
+  name: string
+  value: WritableSignal<number>
+  variant: 'primary' | 'secondary' | 'success' | 'warning' | 'info'
+}
+
+let nextId = 1
+
+function createCounter(
+  name: string,
+  variant: Counter['variant'],
+  initial = 0
+): Counter {
+  return {
+    id: nextId++,
+    name,
+    value: signal(initial),
+    variant,
+  }
+}
+
+// Initial counters with different variants
+export const counters = signal<Counter[]>([
+  createCounter('Alpha', 'primary', 0),
+  createCounter('Beta', 'secondary', 10),
+  createCounter('Gamma', 'success', 5),
+  createCounter('Delta', 'warning', -3),
+])
+
+// =============================================================================
+// DERIVED STATE
+// =============================================================================
+
+/** Total of all counter values */
+export const total = derived(() =>
+  counters.value.reduce((sum, c) => sum + c.value.value, 0)
+)
+
+/** Average of all counter values */
+export const average = derived(() => {
+  const list = counters.value
+  if (list.length === 0) return 0
+  return Math.round(total.value / list.length * 10) / 10
+})
+
+/** Minimum counter value */
+export const min = derived(() => {
+  const values = counters.value.map(c => c.value.value)
+  return values.length > 0 ? Math.min(...values) : 0
+})
+
+/** Maximum counter value */
+export const max = derived(() => {
+  const values = counters.value.map(c => c.value.value)
+  return values.length > 0 ? Math.max(...values) : 0
+})
+
+// =============================================================================
+// HISTORY (demonstrates auto-scroll)
+// =============================================================================
+
+export interface HistoryEntry {
+  id: number
+  timestamp: string
+  message: string
+}
+
+let historyId = 1
+export const history = signal<HistoryEntry[]>([])
+
+export function addHistoryEntry(message: string) {
+  const entry: HistoryEntry = {
+    id: historyId++,
+    timestamp: new Date().toLocaleTimeString(),
+    message,
+  }
+  // Keep last 50 entries
+  history.value = [...history.value.slice(-49), entry]
+}
+
+// =============================================================================
+// ACTIONS
+// =============================================================================
+
+export function resetAll() {
+  counters.value.forEach(c => {
+    c.value.value = 0
+  })
+}
+
+// =============================================================================
+// THEME MANAGEMENT
+// =============================================================================
+
+const themeNames = Object.keys(themes)
+export const currentThemeIndex = signal(0)
+export const currentThemeName = derived(() => themeNames[currentThemeIndex.value])
+
+export function cycleTheme(): string {
+  currentThemeIndex.value = (currentThemeIndex.value + 1) % themeNames.length
+  const themeName = themeNames[currentThemeIndex.value]
+  setTheme(themeName as any)
+  return themeName
+}
+
+// Initialize with first entry
+addHistoryEntry('Application started')

package/templates/counter/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "types": ["bun-types"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/dashboard/README.md

@@ -0,0 +1,95 @@
+# {{PROJECT_NAME}}
+
+A comprehensive system dashboard demonstrating all TUI Framework features.
+
+## Features
+
+- **Multi-panel layout** with header, sidebar, main content, and footer
+- **Real-time reactive updates** with simulated system metrics
+- **Theme system** with 12+ built-in themes and live switching
+- **Auto-scrolling logs** that track activity
+- **Progress bars** and status indicators
+- **Variant-based styling** for semantic colors
+- **Keyboard navigation** and shortcuts
+- **Component composition** patterns
+
+## Getting Started
+
+```bash
+# Install dependencies
+bun install
+
+# Run the application
+bun run dev
+```
+
+## Controls
+
+| Key | Action |
+|-----|--------|
+| `1-4` | Switch between panels |
+| `t` | Cycle through themes |
+| `r` | Refresh metrics |
+| `p` | Pause/Resume updates |
+| `q` / `Escape` | Quit |
+
+## Project Structure
+
+```
+{{PROJECT_NAME}}/
+├── src/
+│   ├── main.ts              # Entry point and keyboard handling
+│   ├── App.ts               # Root layout component
+│   ├── state/
+│   │   ├── metrics.ts       # System metrics state
+│   │   ├── theme.ts         # Theme management
+│   │   └── logs.ts          # Activity log state
+│   └── components/
+│       ├── Header.ts        # Top bar with status
+│       ├── Sidebar.ts       # Navigation + quick stats
+│       ├── MetricsPanel.ts  # CPU, Memory, Disk meters
+│       ├── TrafficPanel.ts  # Network and request stats
+│       ├── ServicesPanel.ts # Service status indicators
+│       ├── LogsPanel.ts     # Scrollable activity logs
+│       └── Footer.ts        # Bottom bar with shortcuts
+├── package.json
+└── README.md
+```
+
+## Architecture Highlights
+
+### Reactive State
+All metrics use signals that automatically propagate changes:
+
+```typescript
+const cpuUsage = signal(45)
+const cpuBar = derived(() => progressBar(cpuUsage.value, 20))
+```
+
+### Component Composition
+Panels are composed from smaller, reusable components:
+
+```typescript
+function Sidebar() {
+  box({ children: () => {
+    QuickStats()
+    Navigation()
+  }})
+}
+```
+
+### Theme Integration
+Components use semantic theme colors for consistent styling:
+
+```typescript
+box({
+  variant: 'primary',
+  borderColor: t.primary,
+  fg: t.text,
+})
+```
+
+## Learn More
+
+- [TUI Framework](https://github.com/rlabs-inc/tui)
+- [Signals Library](https://github.com/rlabs-inc/signals)