tuiuiu.js 0.1.1

package/dist/design-system/layout/tabs.js

@@ -0,0 +1,373 @@
+/**
+ * Tabs - Tabbed content switcher
+ *
+ * Features:
+ * - Tab header bar with clickable tabs
+ * - Content panels that switch based on selection
+ * - Top/bottom tab bar position
+ * - Multiple visual styles (line, box, pills)
+ * - Keyboard navigation (arrows)
+ * - Closable tabs (optional)
+ */
+import { Box, Text } from '../../primitives/nodes.js';
+import { createSignal } from '../../primitives/signal.js';
+import { useInput } from '../../hooks/index.js';
+import { getChars, getRenderMode } from '../../core/capabilities.js';
+// =============================================================================
+// State Factory
+// =============================================================================
+/**
+ * Create a Tabs state manager
+ */
+export function createTabs(options) {
+    const { tabs: initialTabs, initialTab, onChange, onClose } = options;
+    const [tabsSignal, setTabs] = createSignal(initialTabs);
+    const [activeTab, setActiveTabSignal] = createSignal(initialTab ?? initialTabs[0]?.key ?? '');
+    const [focusIndex, setFocusIndex] = createSignal(initialTab
+        ? Math.max(0, initialTabs.findIndex((t) => t.key === initialTab))
+        : 0);
+    const setActiveTab = (key) => {
+        const currentTabs = tabsSignal();
+        const tab = currentTabs.find((t) => t.key === key);
+        if (tab && !tab.disabled) {
+            setActiveTabSignal(key);
+            setFocusIndex(currentTabs.findIndex((t) => t.key === key));
+            onChange?.(key);
+        }
+    };
+    const movePrev = () => {
+        const currentTabs = tabsSignal();
+        setFocusIndex((i) => {
+            let newIndex = i - 1;
+            while (newIndex >= 0 && currentTabs[newIndex]?.disabled) {
+                newIndex--;
+            }
+            return newIndex >= 0 ? newIndex : i;
+        });
+    };
+    const moveNext = () => {
+        const currentTabs = tabsSignal();
+        setFocusIndex((i) => {
+            let newIndex = i + 1;
+            while (newIndex < currentTabs.length && currentTabs[newIndex]?.disabled) {
+                newIndex++;
+            }
+            return newIndex < currentTabs.length ? newIndex : i;
+        });
+    };
+    const selectFocused = () => {
+        const currentTabs = tabsSignal();
+        const tab = currentTabs[focusIndex()];
+        if (tab && !tab.disabled) {
+            setActiveTabSignal(tab.key);
+            onChange?.(tab.key);
+        }
+    };
+    const closeTab = (key) => {
+        const currentTabs = tabsSignal();
+        const index = currentTabs.findIndex((t) => t.key === key);
+        if (index >= 0) {
+            const newTabs = currentTabs.filter((t) => t.key !== key);
+            setTabs(newTabs);
+            onClose?.(key);
+            // If closed tab was active, select adjacent
+            if (activeTab() === key && newTabs.length > 0) {
+                const newIndex = Math.min(index, newTabs.length - 1);
+                setActiveTab(newTabs[newIndex].key);
+            }
+        }
+    };
+    const addTab = (tab) => {
+        setTabs((tabs) => [...tabs, tab]);
+    };
+    return {
+        activeTab,
+        focusIndex,
+        tabs: tabsSignal,
+        setActiveTab,
+        movePrev,
+        moveNext,
+        selectFocused,
+        closeTab,
+        addTab,
+    };
+}
+/**
+ * Tabs - Tabbed content switcher
+ *
+ * @example
+ * // Basic tabs
+ * Tabs({
+ *   tabs: [
+ *     { key: 'home', label: 'Home', content: Text({}, 'Home content') },
+ *     { key: 'settings', label: 'Settings', content: Text({}, 'Settings') },
+ *   ],
+ * })
+ *
+ * @example
+ * // With style and icons
+ * Tabs({
+ *   tabs: [
+ *     { key: 'code', label: 'Code', icon: '📝', content: codeView() },
+ *     { key: 'output', label: 'Output', icon: '▶️', content: outputView() },
+ *   ],
+ *   style: 'pills',
+ *   activeColor: 'cyan',
+ * })
+ */
+export function Tabs(props) {
+    const { position = 'top', style = 'line', activeColor = 'cyan', inactiveColor = 'gray', closable = false, showCount = false, isActive = true, contentHeight, width, state: externalState, } = props;
+    const state = externalState || createTabs(props);
+    const chars = getChars();
+    const isAscii = getRenderMode() === 'ascii';
+    // Setup keyboard handling
+    useInput((input, key) => {
+        if (key.leftArrow || input === 'h')
+            state.movePrev();
+        else if (key.rightArrow || input === 'l')
+            state.moveNext();
+        else if (key.return || input === ' ')
+            state.selectFocused();
+        else if (closable && (input === 'x' || input === 'w')) {
+            const currentTabs = state.tabs();
+            const tab = currentTabs[state.focusIndex()];
+            if (tab?.closable !== false) {
+                state.closeTab(tab.key);
+            }
+        }
+    }, { isActive });
+    const currentTabs = state.tabs();
+    const activeKey = state.activeTab();
+    const focusIdx = state.focusIndex();
+    // Render tab header
+    const renderTabHeader = () => {
+        const tabNodes = [];
+        currentTabs.forEach((tab, i) => {
+            const isTabActive = tab.key === activeKey;
+            const isFocused = i === focusIdx;
+            const isDisabled = tab.disabled;
+            let tabContent;
+            // Build tab label
+            const labelParts = [];
+            if (tab.icon) {
+                labelParts.push(Text({}, tab.icon + ' '));
+            }
+            labelParts.push(Text({}, tab.label));
+            if (closable && tab.closable !== false) {
+                labelParts.push(Text({ dim: true }, ' ×'));
+            }
+            // Style-specific rendering
+            switch (style) {
+                case 'box': {
+                    const borderColor = isTabActive
+                        ? activeColor
+                        : isFocused
+                            ? 'white'
+                            : inactiveColor;
+                    const bgColor = isTabActive ? activeColor : undefined;
+                    if (isAscii) {
+                        const wrapper = isTabActive ? '[' + tab.label + ']' : ' ' + tab.label + ' ';
+                        tabContent = Text({ color: isDisabled ? 'gray' : borderColor, dim: isDisabled }, wrapper);
+                    }
+                    else {
+                        tabContent = Box({
+                            borderStyle: 'round',
+                            borderColor,
+                            paddingLeft: 1,
+                            paddingRight: 1,
+                        }, Text({
+                            color: isTabActive ? 'black' : isDisabled ? 'gray' : 'white',
+                            backgroundColor: bgColor,
+                            dim: isDisabled,
+                        }, tab.icon ? `${tab.icon} ${tab.label}` : tab.label));
+                    }
+                    break;
+                }
+                case 'pills': {
+                    const pillBg = isTabActive ? activeColor : undefined;
+                    const pillColor = isTabActive ? 'black' : isDisabled ? 'gray' : 'white';
+                    if (isAscii) {
+                        const wrapper = isTabActive
+                            ? `(${tab.label})`
+                            : ` ${tab.label} `;
+                        tabContent = Text({
+                            color: isTabActive ? activeColor : isDisabled ? 'gray' : 'white',
+                            dim: isDisabled,
+                        }, wrapper);
+                    }
+                    else {
+                        tabContent = Box({
+                            paddingLeft: 1,
+                            paddingRight: 1,
+                        }, Text({
+                            color: pillColor,
+                            backgroundColor: pillBg,
+                            dim: isDisabled,
+                        }, tab.icon ? `${tab.icon} ${tab.label}` : tab.label));
+                    }
+                    break;
+                }
+                case 'line':
+                default: {
+                    const lineColor = isTabActive
+                        ? activeColor
+                        : isFocused
+                            ? 'white'
+                            : inactiveColor;
+                    const underline = isTabActive
+                        ? isAscii
+                            ? '─'.repeat(tab.label.length + (tab.icon ? 2 : 0))
+                            : '━'.repeat(tab.label.length + (tab.icon ? 2 : 0))
+                        : '';
+                    tabContent = Box({ flexDirection: 'column' }, Box({ flexDirection: 'row' }, ...labelParts.map((n) => Text({
+                        color: lineColor,
+                        dim: isDisabled,
+                        bold: isTabActive,
+                    }, '')), Text({
+                        color: lineColor,
+                        dim: isDisabled,
+                        bold: isTabActive,
+                    }, tab.icon ? `${tab.icon} ${tab.label}` : tab.label)), isTabActive
+                        ? Text({ color: activeColor }, underline)
+                        : Text({ dim: true }, ' '.repeat(tab.label.length + (tab.icon ? 2 : 0))));
+                    break;
+                }
+            }
+            // Wrap tab content with onClick handler
+            const clickableTab = Box({
+                onClick: isDisabled ? undefined : () => state.setActiveTab(tab.key),
+            }, tabContent);
+            tabNodes.push(clickableTab);
+            // Add separator between tabs (except for pills)
+            if (i < currentTabs.length - 1 && style !== 'pills') {
+                tabNodes.push(Text({ dim: true }, style === 'box' ? ' ' : '  '));
+            }
+        });
+        // Show count badge
+        if (showCount) {
+            tabNodes.push(Box({ marginLeft: 2 }, Text({ color: 'gray', dim: true }, `(${currentTabs.length})`)));
+        }
+        return Box({
+            flexDirection: 'row',
+            width,
+        }, ...tabNodes);
+    };
+    // Render active content
+    const activeTab = currentTabs.find((t) => t.key === activeKey);
+    const content = activeTab
+        ? typeof activeTab.content === 'function'
+            ? activeTab.content()
+            : activeTab.content
+        : null;
+    const contentBox = content
+        ? Box({
+            height: contentHeight,
+            marginTop: position === 'top' ? 1 : 0,
+            marginBottom: position === 'bottom' ? 1 : 0,
+        }, content)
+        : null;
+    // Compose layout
+    if (position === 'bottom') {
+        return Box({ flexDirection: 'column', width }, contentBox, renderTabHeader());
+    }
+    return Box({ flexDirection: 'column', width }, renderTabHeader(), contentBox);
+}
+/**
+ * TabPanel - Wrapper for tab content
+ */
+export function TabPanel(props) {
+    const { children, active = true, padding = 0 } = props;
+    if (!active)
+        return null;
+    return Box({ padding }, children);
+}
+/**
+ * VerticalTabs - Tabs with vertical tab bar on the left
+ */
+export function VerticalTabs(props) {
+    const { tabs, tabWidth = 20, contentWidth, activeColor = 'cyan', inactiveColor = 'gray', isActive = true, } = props;
+    const state = createTabs(props);
+    const chars = getChars();
+    // Setup keyboard handling
+    useInput((input, key) => {
+        if (key.upArrow || input === 'k')
+            state.movePrev();
+        else if (key.downArrow || input === 'j')
+            state.moveNext();
+        else if (key.return || input === ' ')
+            state.selectFocused();
+    }, { isActive });
+    const currentTabs = state.tabs();
+    const activeKey = state.activeTab();
+    const focusIdx = state.focusIndex();
+    // Tab bar
+    const tabNodes = currentTabs.map((tab, i) => {
+        const isTabActive = tab.key === activeKey;
+        const isFocused = i === focusIdx;
+        const indicator = isTabActive ? chars.radio.selected : ' ';
+        const color = isTabActive
+            ? activeColor
+            : isFocused
+                ? 'white'
+                : inactiveColor;
+        return Box({
+            flexDirection: 'row',
+            onClick: tab.disabled ? undefined : () => state.setActiveTab(tab.key),
+        }, Text({ color: activeColor }, indicator + ' '), Text({ color, bold: isTabActive, dim: tab.disabled }, tab.icon ? `${tab.icon} ${tab.label}` : tab.label));
+    });
+    // Active content
+    const activeTab = currentTabs.find((t) => t.key === activeKey);
+    const content = activeTab
+        ? typeof activeTab.content === 'function'
+            ? activeTab.content()
+            : activeTab.content
+        : null;
+    return Box({ flexDirection: 'row' }, Box({
+        flexDirection: 'column',
+        width: tabWidth,
+        borderStyle: 'single',
+        borderRight: true,
+        borderTop: false,
+        borderBottom: false,
+        borderLeft: false,
+        paddingRight: 1,
+    }, ...tabNodes), Box({
+        width: contentWidth,
+        paddingLeft: 2,
+    }, content));
+}
+/**
+ * LazyTabs - Tabs that only render content when activated
+ *
+ * Content functions are called lazily, only when the tab becomes active.
+ */
+export function LazyTabs(props) {
+    const { loadingContent = Text({ dim: true }, 'Loading...'), ...rest } = props;
+    // Track which tabs have been loaded
+    const [loadedTabs, setLoadedTabs] = createSignal(new Set());
+    const state = createTabs({
+        ...rest,
+        onChange: (key) => {
+            setLoadedTabs((loaded) => {
+                const newLoaded = new Set(loaded);
+                newLoaded.add(key);
+                return newLoaded;
+            });
+            rest.onChange?.(key);
+        },
+    });
+    // Mark initial tab as loaded
+    const initialKey = state.activeTab();
+    if (initialKey && !loadedTabs().has(initialKey)) {
+        setLoadedTabs((loaded) => {
+            const newLoaded = new Set(loaded);
+            newLoaded.add(initialKey);
+            return newLoaded;
+        });
+    }
+    return Tabs({
+        ...rest,
+        state,
+    });
+}
+//# sourceMappingURL=tabs.js.map

package/dist/design-system/layout/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/design-system/layout/tabs.ts"],"names":[],"mappings":"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"}

package/dist/design-system/media/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Media Components
+ *
+ * Components for displaying media content like ASCII art, images, and graphics.
+ *
+ * Color support:
+ * - Named colors: 'red', 'cyan', 'magenta', etc.
+ * - Hex colors: '#ff0000', '#0ff'
+ * - RGB (True Color): 'rgb(255, 128, 0)' - 16.7 million colors!
+ * - ANSI 256: 'ansi256(196)' - 256 colors
+ */
+export { Picture, FramedPicture, ColoredPicture, createPixelGrid, createPixelGridFromColors, renderPixelGrid, createSprite, getSpriteFrame, nextSpriteFrame, createGradientBar, rainbowText, createShadowedText, AsciiPatterns, createBanner, type Pixel, type PixelGrid, type ColorPalette, type PictureProps, type FramedPictureProps, type ColoredPictureProps, type PictureFit, type PictureAlignX, type PictureAlignY, type Sprite, type GradientStop, } from './picture.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/design-system/media/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/design-system/media/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAEL,OAAO,EACP,aAAa,EACb,cAAc,EAGd,eAAe,EACf,yBAAyB,EACzB,eAAe,EAGf,YAAY,EACZ,cAAc,EACd,eAAe,EAGf,iBAAiB,EACjB,WAAW,EACX,kBAAkB,EAGlB,aAAa,EACb,YAAY,EAGZ,KAAK,KAAK,EACV,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,MAAM,EACX,KAAK,YAAY,GAClB,MAAM,cAAc,CAAC"}

package/dist/design-system/media/index.js

@@ -0,0 +1,23 @@
+/**
+ * Media Components
+ *
+ * Components for displaying media content like ASCII art, images, and graphics.
+ *
+ * Color support:
+ * - Named colors: 'red', 'cyan', 'magenta', etc.
+ * - Hex colors: '#ff0000', '#0ff'
+ * - RGB (True Color): 'rgb(255, 128, 0)' - 16.7 million colors!
+ * - ANSI 256: 'ansi256(196)' - 256 colors
+ */
+export { 
+// Picture components
+Picture, FramedPicture, ColoredPicture, 
+// Pixel grid utilities
+createPixelGrid, createPixelGridFromColors, renderPixelGrid, 
+// Sprite/animation utilities
+createSprite, getSpriteFrame, nextSpriteFrame, 
+// Effects
+createGradientBar, rainbowText, createShadowedText, 
+// Pre-made patterns
+AsciiPatterns, createBanner, } from './picture.js';
+//# sourceMappingURL=index.js.map

package/dist/design-system/media/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/design-system/media/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO;AACL,qBAAqB;AACrB,OAAO,EACP,aAAa,EACb,cAAc;AAEd,uBAAuB;AACvB,eAAe,EACf,yBAAyB,EACzB,eAAe;AAEf,6BAA6B;AAC7B,YAAY,EACZ,cAAc,EACd,eAAe;AAEf,UAAU;AACV,iBAAiB,EACjB,WAAW,EACX,kBAAkB;AAElB,oBAAoB;AACpB,aAAa,EACb,YAAY,GAcb,MAAM,cAAc,CAAC"}