tuiuiu.js 1.0.4 → 1.0.6-next.4ff3fbc

package/dist/storybook/app.js

@@ -9,13 +9,16 @@ import { render } from '../app/render-loop.js';
 import { useState, useInput, useApp, useEffect } from '../hooks/index.js';
 import { createRef } from '../core/index.js';
 import { startTick, stopTick, getTick, isTickRunning, setTickRate } from '../core/tick.js';
-import { setTheme, useTheme, getNextTheme, themeColor } from '../core/theme.js';
+import { setTheme, useTheme, getNextTheme, getTheme } from '../core/theme.js';
 import { allStories } from './stories/index.js';
 import { COLORS, TUIUIU_BIRD_COLORED } from './data/ascii-art.js';
 import { SplashScreen, createSplashScreen } from '../design-system/visual/splash-screen.js';
+// Version
+import { getVersion, getVersionSync } from '../version.js';
 // Storybook Global State & Logger
 import { storybookStore, interceptConsole } from './store.js';
-import { LogViewer } from './components/log-viewer.js';
+// Storybook UI Components
+import { Navbar, MetricsStatusBar, SearchBar, searchStories, ConsoleAccordion, HotkeysPanel, PressedKeysIndicator, recordKeyPress, clearOldKeyPresses, } from './components/index.js';
 // =============================================================================
 // Initialization
 // =============================================================================
@@ -41,19 +44,21 @@ function getStoriesByCategory(category) {
  * Render story content safely
  */
 function StoryContent(props) {
+    const theme = getTheme();
     const { story, values, frame = 0 } = props;
     try {
         return story.render(values, frame);
     }
     catch (error) {
         console.error('Render error:', error); // Captured by our interceptor!
-        return Box({ flexDirection: 'column', padding: 1, borderStyle: 'single', borderColor: themeColor('error') }, Text({ color: themeColor('error'), bold: true }, 'Render Error'), Text({ color: themeColor('error') }, error.message || String(error)));
+        return Box({ flexDirection: 'column', padding: 1, borderStyle: 'single', borderColor: theme.accents.critical }, Text({ color: theme.accents.critical, bold: true }, 'Render Error'), Text({ color: theme.accents.critical }, error.message || String(error)));
     }
 }
 /**
  * Sidebar component - category and story list with virtual scroll
  */
 function Sidebar(props) {
+    const theme = getTheme();
     const { categories, currentCategory, stories, selectedIndex, focusArea, onCategoryClick, onFocus } = props;
     const isFocused = focusArea === 'sidebar';
     // Virtual scroll: show window around selected item
@@ -81,12 +86,12 @@ function Sidebar(props) {
         flexDirection: 'column',
         width: 50,
         borderStyle: 'single',
-        borderColor: isFocused ? themeColor('primary') : themeColor('border'),
+        borderColor: isFocused ? theme.palette.primary[500] : theme.borders.default,
     }, 
     // Header
-    Box({ borderStyle: 'single', borderColor: isFocused ? themeColor('primary') : themeColor('border'), paddingX: 1 }, Text({ color: themeColor('primary'), bold: true }, 'Stories')), 
+    Box({ borderStyle: 'single', borderColor: isFocused ? theme.palette.primary[500] : theme.borders.default, paddingX: 1 }, Text({ color: theme.palette.primary[500], bold: true }, 'Stories')), 
     // Categories (horizontal tabs) - clickable
-    Box({ flexDirection: 'row', paddingX: 1, marginY: 1 }, Text({ color: themeColor('mutedForeground') }, '◀ ▶ '), ...categories.map((cat, catIdx) => {
+    Box({ flexDirection: 'row', paddingX: 1, marginY: 1 }, Text({ color: theme.foreground.muted }, '◀ ▶ '), ...categories.map((cat, catIdx) => {
         const isActive = cat === currentCategory;
         const count = getStoriesByCategory(cat).length;
         const shortName = cat.slice(0, 4);
@@ -96,13 +101,13 @@ function Sidebar(props) {
                 onCategoryClick?.(catIdx);
             },
         }, Text({
-            color: isActive ? themeColor('primary') : themeColor('mutedForeground'),
+            color: isActive ? theme.palette.primary[500] : theme.foreground.muted,
             bold: isActive,
             inverse: isActive,
         }, isActive ? `[${shortName}:${count}]` : ` ${shortName}:${count} `));
-    })), Divider({ color: themeColor('border') }), 
+    })), Divider({ color: theme.borders.default }), 
     // Scroll up indicator (always present, may be empty)
-    Box({ paddingX: 1, height: 1 }, Text({ color: themeColor('primary'), dim: true }, scrollUpText)), 
+    Box({ paddingX: 1, height: 1 }, Text({ color: theme.palette.primary[500], dim: true }, scrollUpText)), 
     // Stories list (fixed height container) - clickable items
     Box({ flexDirection: 'column', paddingX: 1, flexGrow: 1 }, ...visibleStories.map((story, idx) => {
         const actualIdx = startIdx + idx;
@@ -113,32 +118,33 @@ function Sidebar(props) {
                 props.onStorySelect(actualIdx);
             },
         }, Text({
-            color: isSelected ? themeColor('foreground') : themeColor('mutedForeground'),
+            color: isSelected ? theme.foreground.primary : theme.foreground.muted,
             bold: isSelected,
             inverse: isSelected && isFocused,
         }, isSelected ? ` ${story.name} ` : `  ${story.name}`));
     })), 
     // Scroll down indicator (always present, may be empty)
-    Box({ paddingX: 1, height: 1 }, Text({ color: themeColor('primary'), dim: true }, scrollDownText)), 
+    Box({ paddingX: 1, height: 1 }, Text({ color: theme.palette.primary[500], dim: true }, scrollDownText)), 
     // Footer
-    Box({ borderStyle: 'single', borderColor: themeColor('border'), paddingX: 1 }, Text({ color: themeColor('mutedForeground'), dim: true }, `${selectedIndex + 1}/${stories.length}`)));
+    Box({ borderStyle: 'single', borderColor: theme.borders.default, paddingX: 1 }, Text({ color: theme.foreground.muted, dim: true }, `${selectedIndex + 1}/${stories.length}`)));
 }
 /**
  * Control Panel component - edit story props
  */
 function ControlPanel(props) {
+    const theme = getTheme();
     const { story, values, focusedControlIndex, focusArea, isEditingText, editingTextValue, onTextChange, onFocus, onSelectControl, onStartTextEdit } = props;
     const isFocused = focusArea === 'controls';
     const controls = Object.entries(story.controls || {});
     if (controls.length === 0) {
-        return Box({ padding: 1, borderStyle: 'single', borderColor: themeColor('border') }, Text({ color: themeColor('mutedForeground'), dim: true }, 'No controls defined'));
+        return Box({ padding: 1, borderStyle: 'single', borderColor: theme.borders.default }, Text({ color: theme.foreground.muted, dim: true }, 'No controls defined'));
     }
     return Box({
         flexDirection: 'column',
         borderStyle: 'single',
-        borderColor: isFocused ? themeColor('primary') : themeColor('border'),
+        borderColor: isFocused ? theme.palette.primary[500] : theme.borders.default,
         width: 30,
-    }, Box({ borderStyle: 'single', borderColor: isFocused ? themeColor('primary') : themeColor('border'), paddingX: 1 }, Text({ color: themeColor('warning'), bold: true }, 'Controls')), Box({ flexDirection: 'column', padding: 1 }, ...controls.map(([key, control], idx) => {
+    }, Box({ borderStyle: 'single', borderColor: isFocused ? theme.palette.primary[500] : theme.borders.default, paddingX: 1 }, Text({ color: theme.accents.warning, bold: true }, 'Controls')), Box({ flexDirection: 'column', padding: 1 }, ...controls.map(([key, control], idx) => {
         const value = values[key] ?? control.defaultValue;
         const isActive = idx === focusedControlIndex && isFocused;
         const isThisEditingText = isActive && isEditingText && control.type === 'text';
@@ -158,7 +164,7 @@ function ControlPanel(props) {
             flexDirection: 'column',
             marginBottom: 1,
             onClick: handleClick,
-        }, Box({}, Text({ color: isActive ? themeColor('primary') : themeColor('mutedForeground') }, `${control.label}: `), isThisEditingText
+        }, Box({}, Text({ color: isActive ? theme.palette.primary[500] : theme.foreground.muted }, `${control.label}: `), isThisEditingText
             ? renderTextInputInline(editingTextValue, isActive, onTextChange)
             : renderControlValue(value, control.type, isActive)));
     })));
@@ -167,18 +173,20 @@ function ControlPanel(props) {
  * Render inline text input for editing
  */
 function renderTextInputInline(value, isActive, onChange) {
+    const theme = getTheme();
     // Create inline text input with visible cursor
     const cursorChar = '▎';
-    return Box({ flexDirection: 'row' }, Text({ color: themeColor('foreground') }, '"'), Text({ color: themeColor('primary') }, value), isActive ? Text({ color: themeColor('primary'), bold: true }, cursorChar) : null, Text({ color: themeColor('foreground') }, '"'));
+    return Box({ flexDirection: 'row' }, Text({ color: theme.foreground.primary }, '"'), Text({ color: theme.palette.primary[500] }, value), isActive ? Text({ color: theme.palette.primary[500], bold: true }, cursorChar) : null, Text({ color: theme.foreground.primary }, '"'));
 }
 /**
  * Render control value display
  */
 function renderControlValue(value, type, isActive) {
-    const color = isActive ? themeColor('foreground') : themeColor('mutedForeground');
+    const theme = getTheme();
+    const color = isActive ? theme.foreground.primary : theme.foreground.muted;
     switch (type) {
         case 'boolean':
-            return Text({ color: value ? themeColor('success') : themeColor('error') }, value ? 'true' : 'false');
+            return Text({ color: value ? theme.accents.positive : theme.accents.critical }, value ? 'true' : 'false');
         case 'number':
         case 'range':
             return Text({ color }, String(value));
@@ -196,50 +204,53 @@ function renderControlValue(value, type, isActive) {
  * Docs view - show story documentation
  */
 function DocsView(props) {
+    const theme = getTheme();
     const { story } = props;
     const controls = Object.entries(story.controls || {});
     const children = [
         // Title
-        Box({ marginBottom: 1 }, Text({ color: themeColor('primary'), bold: true }, `📖 ${story.name}`)),
+        Box({ marginBottom: 1 }, Text({ color: theme.palette.primary[500], bold: true }, `📖 ${story.name}`)),
     ];
     // Description (optional)
     if (story.description) {
-        children.push(Box({ marginBottom: 1 }, Text({ color: themeColor('foreground') }, story.description)));
+        children.push(Box({ marginBottom: 1 }, Text({ color: theme.foreground.primary }, story.description)));
     }
     // Controls documentation (if any)
     if (controls.length > 0) {
-        children.push(Box({ flexDirection: 'column', marginTop: 1 }, Text({ color: themeColor('warning'), bold: true }, 'Props:'), ...controls.map(([key, control]) => Box({ marginLeft: 1 }, Text({ color: themeColor('primary') }, `• ${key}`), Text({ color: themeColor('mutedForeground') }, ` (${control.type})`), Text({ color: themeColor('mutedForeground'), dim: true }, ` - ${control.label}`)))));
+        children.push(Box({ flexDirection: 'column', marginTop: 1 }, Text({ color: theme.accents.warning, bold: true }, 'Props:'), ...controls.map(([key, control]) => Box({ marginLeft: 1 }, Text({ color: theme.palette.primary[500] }, `• ${key}`), Text({ color: theme.foreground.muted }, ` (${control.type})`), Text({ color: theme.foreground.muted, dim: true }, ` - ${control.label}`)))));
     }
     // Category
-    children.push(Box({ marginTop: 1 }, Text({ color: themeColor('mutedForeground') }, 'Category: '), Text({ color: themeColor('accent') }, story.category)));
+    children.push(Box({ marginTop: 1 }, Text({ color: theme.foreground.muted }, 'Category: '), Text({ color: theme.accents.highlight }, story.category)));
     return Box({ flexDirection: 'column', padding: 1 }, ...children);
 }
 /**
  * Compare view - show story variants side by side
  */
 function CompareView(props) {
+    const theme = getTheme();
     const { story, values } = props;
     const controls = Object.entries(story.controls || {});
     // Find a control to compare (prefer select or boolean)
     const compareControl = controls.find(([, c]) => c.type === 'select' || c.type === 'boolean');
     if (!compareControl) {
-        return Box({ padding: 1 }, Text({ color: themeColor('mutedForeground') }, 'No comparable props found for this story'));
+        return Box({ padding: 1 }, Text({ color: theme.foreground.muted }, 'No comparable props found for this story'));
     }
     const [key, control] = compareControl;
     const variants = control.type === 'select' ? (control.options || []) :
         control.type === 'boolean' ? [true, false] : [];
-    return Box({ flexDirection: 'column', padding: 1 }, Text({ color: themeColor('success'), bold: true }, `🔀 Comparing: ${control.label}`), Divider({ color: themeColor('border') }), Box({ flexDirection: 'row', flexWrap: 'wrap', gap: 1 }, ...variants.slice(0, 4).map((variant) => Box({
+    return Box({ flexDirection: 'column', padding: 1 }, Text({ color: theme.accents.positive, bold: true }, `🔀 Comparing: ${control.label}`), Divider({ color: theme.borders.default }), Box({ flexDirection: 'row', flexWrap: 'wrap', gap: 1 }, ...variants.slice(0, 4).map((variant) => Box({
         flexDirection: 'column',
         borderStyle: 'single',
-        borderColor: values[key] === variant ? themeColor('primary') : themeColor('border'),
+        borderColor: values[key] === variant ? theme.palette.primary[500] : theme.borders.default,
         padding: 1,
         minWidth: 20,
-    }, Text({ color: themeColor('primary'), dim: true }, String(variant)), Box({ marginTop: 1 }, StoryContent({ story, values: { ...values, [key]: variant }, frame: 0 }))))));
+    }, Text({ color: theme.palette.primary[500], dim: true }, String(variant)), Box({ marginTop: 1 }, StoryContent({ story, values: { ...values, [key]: variant }, frame: 0 }))))));
 }
 /**
  * Preview Panel component - render story with mode-specific content
  */
 function PreviewPanel(props) {
+    const theme = getTheme();
     const { story, values, viewMode, focusArea, frame, isPaused } = props;
     const isFocused = focusArea === 'preview';
     const isAnimated = story.animation?.enabled;
@@ -260,51 +271,49 @@ function PreviewPanel(props) {
     const previewChildren = [];
     // Header with optional animation indicator
     const headerChildren = [
-        Text({ color: themeColor('mutedForeground') }, `${story.category} / `),
-        Text({ color: themeColor('primary'), bold: true }, story.name),
+        Text({ color: theme.foreground.muted }, `${story.category} / `),
+        Text({ color: theme.palette.primary[500], bold: true }, story.name),
     ];
     if (isAnimated) {
-        headerChildren.push(Text({ color: isPaused ? themeColor('warning') : themeColor('success') }, isPaused ? ' ⏸' : ' ▶'));
+        headerChildren.push(Text({ color: isPaused ? theme.accents.warning : theme.accents.positive }, isPaused ? ' ⏸' : ' ▶'));
     }
-    previewChildren.push(Box({ borderStyle: 'single', borderColor: isFocused ? themeColor('primary') : themeColor('border'), paddingX: 1 }, ...headerChildren));
+    previewChildren.push(Box({ borderStyle: 'single', borderColor: isFocused ? theme.palette.primary[500] : theme.borders.default, paddingX: 1 }, ...headerChildren));
     // View mode tabs
     const modeText = isAnimated
         ? `[P][G][C][D] ${viewMode.toUpperCase()} Frame:${frame}`
         : `[P][G][C][D] ${viewMode.toUpperCase()}`;
     previewChildren.push(Box({ paddingX: 1 }, Text({ color: getModeColor(viewMode) }, modeText)));
     if ((viewMode === 'preview' || viewMode === 'playground') && story.description) {
-        previewChildren.push(Box({ paddingX: 1 }, Text({ color: themeColor('mutedForeground'), dim: true }, story.description)));
+        previewChildren.push(Box({ paddingX: 1 }, Text({ color: theme.foreground.muted, dim: true }, story.description)));
     }
-    previewChildren.push(Divider({ color: themeColor('border') }));
+    previewChildren.push(Divider({ color: theme.borders.default }));
     previewChildren.push(renderContent());
     return Box({
         flexDirection: 'column',
         flexGrow: 1,
         borderStyle: 'single',
-        borderColor: isFocused ? themeColor('primary') : themeColor('border'),
+        borderColor: isFocused ? theme.palette.primary[500] : theme.borders.default,
     }, ...previewChildren);
 }
 /**
  * Get color for view mode
  */
 function getModeColor(mode) {
+    const theme = getTheme();
     switch (mode) {
-        case 'preview': return themeColor('primary');
-        case 'playground': return themeColor('warning');
-        case 'comparatives': return themeColor('success');
-        case 'docs': return themeColor('accent');
-        default: return themeColor('foreground');
+        case 'preview': return theme.palette.primary[500];
+        case 'playground': return theme.accents.warning;
+        case 'comparatives': return theme.accents.positive;
+        case 'docs': return theme.accents.highlight;
+        default: return theme.foreground.primary;
     }
 }
 /**
- * Status bar component
+ * Text editing mode indicator
  */
-function StatusBar(props) {
-    const { isEditingText } = props;
-    if (isEditingText) {
-        return Box({ borderStyle: 'single', borderColor: themeColor('warning'), paddingX: 1 }, Text({ color: themeColor('warning'), bold: true }, '✏️  EDITING TEXT  '), Text({ color: themeColor('mutedForeground') }, '[Enter] Save  '), Text({ color: themeColor('mutedForeground') }, '[Esc] Cancel  '), Text({ color: themeColor('mutedForeground') }, '[Backspace] Delete'));
-    }
-    return Box({ borderStyle: 'single', borderColor: themeColor('border'), paddingX: 1 }, Text({ color: themeColor('mutedForeground') }, '[Esc] Back/Quit  '), Text({ color: themeColor('mutedForeground') }, '[Enter] Select  '), Text({ color: themeColor('mutedForeground') }, '[Tab] Focus  '), Text({ color: themeColor('mutedForeground') }, '[F1] Theme  '), Text({ color: themeColor('mutedForeground') }, '[F12] Logs  '), Text({ color: themeColor('primary'), dim: true }, '🖱️  Mouse enabled'));
+function TextEditingIndicator() {
+    const theme = getTheme();
+    return Box({ borderStyle: 'single', borderColor: theme.accents.warning, paddingX: 1 }, Text({ color: theme.accents.warning, bold: true }, '✏️  EDITING TEXT  '), Text({ color: theme.foreground.muted }, '[Enter] Save  '), Text({ color: theme.foreground.muted }, '[Esc] Cancel  '), Text({ color: theme.foreground.muted }, '[Backspace] Delete'));
 }
 /**
  * Format elapsed time
@@ -314,55 +323,52 @@ function formatTime(seconds) {
     const secs = seconds % 60;
     return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
 }
-/**
- * Navbar component with metrics
- */
-function Navbar(props) {
-    const { componentCount, clicks, keystrokes, fps, elapsedSeconds, themeName } = props;
-    const fpsColor = fps >= 30 ? themeColor('success') : fps >= 15 ? themeColor('warning') : themeColor('error');
-    return Box({
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        borderStyle: 'single',
-        borderColor: themeColor('accent'),
-    }, Box({ flexDirection: 'row' }, Text({ color: themeColor('accent'), bold: true }, ' Tuiuiu.js '), Text({ color: themeColor('warning'), dim: true }, `[${themeName}] `)), Box({ flexDirection: 'row' }, Text({ color: themeColor('foreground'), bold: true }, formatTime(elapsedSeconds)), Text({ color: themeColor('mutedForeground'), dim: true }, ' '), Text({ color: themeColor('primary') }, String(componentCount)), Text({ color: themeColor('mutedForeground'), dim: true }, 's '), Text({ color: themeColor('warning') }, String(clicks)), Text({ color: themeColor('mutedForeground'), dim: true }, 'c '), Text({ color: themeColor('success') }, String(keystrokes)), Text({ color: themeColor('mutedForeground'), dim: true }, 'k '), Text({ color: fpsColor, bold: true }, `${fps}fps `)));
-}
 // =============================================================================
 // Splash Screen
 // =============================================================================
 // Module-level splash state (created once when storybook starts)
 let splashState = null;
+// Module-level flag for splash completion
+let splashCompleted = false;
+let splashCompletionCallbacks = [];
 function getSplashState() {
     if (!splashState) {
         splashState = createSplashScreen({
             duration: 1500,
             fadeInDuration: 300,
+            onComplete: () => {
+                splashCompleted = true;
+                // Notify all callbacks
+                for (const cb of splashCompletionCallbacks) {
+                    cb();
+                }
+                splashCompletionCallbacks = [];
+            },
         });
     }
     return splashState;
 }
+function onSplashComplete(callback) {
+    if (splashCompleted) {
+        callback();
+    }
+    else {
+        splashCompletionCallbacks.push(callback);
+    }
+}
 /**
  * Main Storybook App
  */
 function StorybookApp() {
+    const theme = getTheme();
     const app = useApp();
     // Get or create splash state
     const splash = getSplashState();
-    // Render splash screen if visible
-    if (splash.isVisible()) {
-        const splashNode = SplashScreen({
-            coloredArt: TUIUIU_BIRD_COLORED,
-            subtitle: 'Component Explorer',
-            version: '1.0.0',
-            loadingType: 'spinner',
-            spinnerStyle: 'dots',
-            loadingMessage: 'Loading stories...',
-            state: splash,
-        });
-        // Return splash or empty box (SplashScreen can return null when not visible)
-        return splashNode ?? Box({});
-    }
-    // State
+    // =========================================================================
+    // ALL HOOKS MUST BE CALLED BEFORE ANY CONDITIONAL RETURNS
+    // This ensures consistent hook ordering across renders
+    // =========================================================================
+    // State - always call these regardless of splash visibility
     const categories = getCategories();
     const [currentCategoryIndex, setCurrentCategoryIndex] = useState(0);
     const [selectedStoryIndex, setSelectedStoryIndex] = useState(0);
@@ -375,6 +381,8 @@ function StorybookApp() {
     const [editingTextValue, setEditingTextValue] = useState('');
     // Animation state - now uses global tick
     const [isPaused, setIsPaused] = useState(false);
+    // Track if we've already cleared screen after splash
+    const [splashDone, setSplashDone] = useState(false);
     // Get animation frame from global tick
     const animationFrame = () => getTick();
     // Metrics state
@@ -450,11 +458,27 @@ function StorybookApp() {
         }));
     };
     const controlKeys = currentStory ? Object.keys(currentStory.controls || {}) : [];
+    // Search state from store
+    const [searchSelectedIndex, setSearchSelectedIndex] = useState(0);
+    // Get search results
+    const storeState = storybookStore.state();
+    const searchResults = storeState.searchVisible
+        ? searchStories(allStories, storeState.searchQuery)
+        : [];
     // Input handling
     useInput((input, key) => {
         setKeystrokeCount((c) => c + 1);
-        // Toggle Theme with F1
+        // Record key press for indicator
+        recordKeyPress(input, key);
+        clearOldKeyPresses();
+        // Toggle Search with F1
         if (key.f1) {
+            storybookStore.dispatch({ type: 'TOGGLE_SEARCH' });
+            setSearchSelectedIndex(0);
+            return;
+        }
+        // Toggle Theme with F2
+        if (key.f2) {
             const currentTheme = useTheme();
             const nextTheme = getNextTheme(currentTheme);
             setTheme(nextTheme);
@@ -470,6 +494,56 @@ function StorybookApp() {
             storybookStore.dispatch({ type: 'CLEAR_LOGS' });
         }
         // =========================================================================
+        // SEARCH MODE
+        // =========================================================================
+        if (storeState.searchVisible) {
+            // Escape - close search
+            if (key.escape) {
+                storybookStore.dispatch({ type: 'CLOSE_SEARCH' });
+                return;
+            }
+            // Navigate results
+            if (key.upArrow) {
+                setSearchSelectedIndex((i) => Math.max(0, i - 1));
+                return;
+            }
+            if (key.downArrow) {
+                setSearchSelectedIndex((i) => Math.min(searchResults.length - 1, i + 1));
+                return;
+            }
+            // Select result and navigate
+            if (key.return && searchResults.length > 0) {
+                const selected = searchResults[searchSelectedIndex()];
+                if (selected) {
+                    // Find category and story indices
+                    const catIndex = categories.indexOf(selected.story.category);
+                    const catStories = getStoriesByCategory(selected.story.category);
+                    const storyIndex = catStories.findIndex((s) => s.name === selected.story.name);
+                    if (catIndex >= 0)
+                        setCurrentCategoryIndex(catIndex);
+                    if (storyIndex >= 0)
+                        setSelectedStoryIndex(storyIndex);
+                    storybookStore.dispatch({ type: 'CLOSE_SEARCH' });
+                }
+                return;
+            }
+            // Backspace - delete character from query
+            if (key.backspace) {
+                const current = storeState.searchQuery;
+                storybookStore.dispatch({ type: 'SET_SEARCH_QUERY', payload: current.slice(0, -1) });
+                setSearchSelectedIndex(0);
+                return;
+            }
+            // Regular character input - append to search query
+            if (input && input.length > 0 && !key.ctrl && !key.meta) {
+                storybookStore.dispatch({ type: 'SET_SEARCH_QUERY', payload: storeState.searchQuery + input });
+                setSearchSelectedIndex(0);
+                return;
+            }
+            // Consume all other keys while searching
+            return;
+        }
+        // =========================================================================
         // TEXT EDITING MODE
         // =========================================================================
         if (isEditingText()) {
@@ -641,17 +715,66 @@ function StorybookApp() {
             }
         }
     });
+    // =========================================================================
+    // SPLASH→MAIN TRANSITION
+    // Use callback-based approach to ensure state update triggers re-render
+    // =========================================================================
+    // Register callback to update state when splash completes
+    useEffect(() => {
+        if (!splashDone()) {
+            onSplashComplete(() => {
+                app.clearScreen?.();
+                setSplashDone(true);
+            });
+        }
+    });
+    // Render splash while not done (use module-level flag + state for reactivity)
+    if (!splashDone() && !splashCompleted) {
+        const splashNode = SplashScreen({
+            coloredArt: TUIUIU_BIRD_COLORED,
+            subtitle: 'Component Explorer',
+            version: getVersionSync(),
+            loadingType: 'spinner',
+            spinnerStyle: 'dots',
+            loadingMessage: 'Loading stories...',
+            state: splash,
+        });
+        return splashNode ?? Box({});
+    }
+    // Wait for state to update
+    if (!splashDone()) {
+        return Box({});
+    }
     if (!currentStory) {
-        return Box({ flexDirection: 'column', padding: 2 }, Text({ color: themeColor('warning') }, 'No stories found'), Text({ color: themeColor('mutedForeground') }, 'Add stories to src/storybook/stories/'));
+        return Box({ flexDirection: 'column', padding: 2 }, Text({ color: theme.accents.warning }, 'No stories found'), Text({ color: theme.foreground.muted }, 'Add stories to src/storybook/stories/'));
     }
-    return Box({ flexDirection: 'column', height: '100%' }, Navbar({
-        componentCount: allStories.length,
+    return Box({ flexDirection: 'column', height: '100%' }, 
+    // =========================================================================
+    // HEADER SECTION
+    // =========================================================================
+    // Enhanced Navbar with branding
+    Navbar({ componentCount: allStories.length }), 
+    // StatusBar with metrics
+    MetricsStatusBar({
+        themeName: useTheme().name,
         clicks: clickCount(),
         keystrokes: keystrokeCount(),
         fps: fps(),
         elapsedSeconds: elapsedSeconds(),
-        themeName: useTheme().name,
-    }), Box({ flexDirection: 'row', flexGrow: 1 }, Sidebar({
+    }), 
+    // Search bar (conditional)
+    SearchBar({
+        query: storeState.searchQuery,
+        results: searchResults,
+        selectedIndex: searchSelectedIndex(),
+        isVisible: storeState.searchVisible,
+    }), 
+    // Text editing indicator (when editing)
+    isEditingText() ? TextEditingIndicator() : null, 
+    // =========================================================================
+    // MAIN CONTENT
+    // =========================================================================
+    Box({ flexDirection: 'row', flexGrow: 1 }, Sidebar({
         categories,
         currentCategory,
         stories,
@@ -687,17 +810,28 @@ function StorybookApp() {
                 setEditingTextValue(value);
                 setIsEditingText(true);
             },
-        })), StatusBar({ viewMode: viewMode(), focusArea: focusArea(), isEditingText: isEditingText() }), 
-    // LOG VIEWER OVERLAY
-    LogViewer());
+        })), 
+    // =========================================================================
+    // FOOTER SECTION (Console > Hotkeys > Pressed Keys)
+    // =========================================================================
+    // Console accordion
+    ConsoleAccordion(), 
+    // Hotkeys panel
+    HotkeysPanel(), 
+    // Pressed keys indicator
+    PressedKeysIndicator());
 }
 /**
  * Run the storybook
  */
 export async function runStorybook() {
+    // Pre-cache version (async load, then sync access everywhere)
+    await getVersion();
     // Start global tick for animations
     startTick(100);
-    const { waitUntilExit } = render(() => StorybookApp());
+    const { waitUntilExit } = render(() => StorybookApp(), {
+        fullHeight: true, // Fill entire terminal to cover splash screen content
+    });
     await waitUntilExit();
     // Cleanup tick on exit
     stopTick();