tuiuiu.js 0.1.1

package/dist/design-system/visual/splash-screen.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Splash Screen - Animated loading/intro screen
+ *
+ * Features:
+ * - Fade-in animation
+ * - Logo display (text or ASCII art)
+ * - Colored ASCII art support (via Picture component)
+ * - Loading indicator (spinner or progress)
+ * - Auto-dismiss with callback
+ * - Customizable colors and timing
+ */
+import { type SpinnerStyle } from '../../design-system/feedback/spinner.js';
+import { type BigTextFont } from './big-text.js';
+import { type PixelGrid } from '../media/picture.js';
+import type { VNode, ColorValue } from '../../utils/types.js';
+export { parseColoredBBCode, type PixelGrid } from '../media/picture.js';
+export interface SplashScreenOptions {
+    /** Main title text */
+    title?: string;
+    /** Subtitle or tagline */
+    subtitle?: string;
+    /** ASCII art to display (overrides title BigText) */
+    asciiArt?: string;
+    /** BigText font for title */
+    font?: BigTextFont;
+    /** Primary color */
+    color?: ColorValue;
+    /** Secondary color for subtitle/spinner */
+    secondaryColor?: ColorValue;
+    /** Loading indicator type */
+    loadingType?: 'spinner' | 'progress' | 'dots' | 'none';
+    /** Spinner style (if loadingType is 'spinner') */
+    spinnerStyle?: SpinnerStyle;
+    /** Loading message */
+    loadingMessage?: string;
+    /** Auto-dismiss after ms (0 = manual) */
+    duration?: number;
+    /** Fade-in duration in ms */
+    fadeInDuration?: number;
+    /** Callback when splash completes */
+    onComplete?: () => void;
+    /** Show version */
+    version?: string;
+}
+export interface SplashScreenState {
+    /** Current opacity (0-1) for fade effect */
+    opacity: () => number;
+    /** Current progress (0-100) for progress bar */
+    progress: () => number;
+    /** Set progress manually */
+    setProgress: (value: number) => void;
+    /** Whether splash is visible */
+    isVisible: () => boolean;
+    /** Dismiss the splash screen */
+    dismiss: () => void;
+    /** Current frame for animations */
+    frame: () => number;
+}
+/**
+ * Create splash screen state
+ */
+export declare function createSplashScreen(options?: SplashScreenOptions): SplashScreenState;
+export interface SplashScreenProps extends SplashScreenOptions {
+    /** State from createSplashScreen */
+    state?: SplashScreenState;
+    /** Width (defaults to terminal width for fullscreen) */
+    width?: number | string;
+    /** Height (defaults to terminal height for fullscreen) */
+    height?: number | string;
+    /** Colored pixel grid (overrides asciiArt and title) - use parseColoredBBCode() */
+    coloredArt?: PixelGrid;
+}
+/**
+ * Splash Screen Component
+ *
+ * Layout:
+ * - Image + subtitle centered both horizontally and vertically
+ * - Loading indicator at the bottom with 1 line gap from terminal edge
+ */
+export declare function SplashScreen(props: SplashScreenProps): VNode | null;
+/**
+ * Tuiuiu branded splash screen
+ */
+export declare function TuiuiuSplash(props?: Omit<SplashScreenProps, 'title' | 'asciiArt'>): VNode | null;
+/**
+ * Minimal splash screen
+ */
+export declare function MinimalSplash(props: SplashScreenProps): VNode | null;
+/**
+ * Progress splash screen
+ */
+export declare function ProgressSplash(props: SplashScreenProps): VNode | null;
+//# sourceMappingURL=splash-screen.d.ts.map

package/dist/design-system/visual/splash-screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"splash-screen.d.ts","sourceRoot":"","sources":["../../../src/design-system/visual/splash-screen.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAErF,OAAO,EAAW,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAG9D,OAAO,EAAE,kBAAkB,EAAE,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAMzE,MAAM,WAAW,mBAAmB;IAClC,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,6BAA6B;IAC7B,WAAW,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IACvD,kDAAkD;IAClD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,sBAAsB;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,4CAA4C;IAC5C,OAAO,EAAE,MAAM,MAAM,CAAC;IACtB,gDAAgD;IAChD,QAAQ,EAAE,MAAM,MAAM,CAAC;IACvB,4BAA4B;IAC5B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gCAAgC;IAChC,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,gCAAgC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,mCAAmC;IACnC,KAAK,EAAE,MAAM,MAAM,CAAC;CACrB;AASD;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,GAAE,mBAAwB,GAAG,iBAAiB,CAwEvF;AAMD,MAAM,WAAW,iBAAkB,SAAQ,mBAAmB;IAC5D,oCAAoC;IACpC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,mFAAmF;IACnF,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,GAAG,IAAI,CAqInE;AAMD;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,GAAE,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,UAAU,CAAM,GAAG,KAAK,GAAG,IAAI,CAoBpG;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,GAAG,IAAI,CAOpE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,GAAG,IAAI,CAKrE"}

package/dist/design-system/visual/splash-screen.js

@@ -0,0 +1,219 @@
+/**
+ * Splash Screen - Animated loading/intro screen
+ *
+ * Features:
+ * - Fade-in animation
+ * - Logo display (text or ASCII art)
+ * - Colored ASCII art support (via Picture component)
+ * - Loading indicator (spinner or progress)
+ * - Auto-dismiss with callback
+ * - Customizable colors and timing
+ */
+import { Box, Text } from '../../primitives/nodes.js';
+import { createSignal } from '../../primitives/signal.js';
+import { Spinner } from '../../design-system/feedback/spinner.js';
+import { ProgressBar } from '../../design-system/feedback/progress-bar.js';
+import { BigText } from './big-text.js';
+import { ColoredPicture } from '../media/picture.js';
+// Re-export useful types and functions from Picture for convenience
+export { parseColoredBBCode } from '../media/picture.js';
+// =============================================================================
+// State Factory
+// =============================================================================
+/** Minimum duration in ms (0.7s) */
+const MIN_DURATION = 700;
+/**
+ * Create splash screen state
+ */
+export function createSplashScreen(options = {}) {
+    const { duration = MIN_DURATION, fadeInDuration = 500, onComplete, } = options;
+    // Ensure minimum duration
+    const effectiveDuration = Math.max(duration, MIN_DURATION);
+    const [opacity, setOpacity] = createSignal(0);
+    const [progress, setProgress] = createSignal(0);
+    const [isVisible, setIsVisible] = createSignal(true);
+    const [frame, setFrame] = createSignal(0);
+    let fadeInTimer = null;
+    let dismissTimer = null;
+    let frameTimer = null;
+    // Fade-in animation
+    const fadeSteps = Math.max(1, Math.floor(fadeInDuration / 50));
+    let currentStep = 0;
+    fadeInTimer = setInterval(() => {
+        currentStep++;
+        setOpacity(Math.min(1, currentStep / fadeSteps));
+        if (currentStep >= fadeSteps && fadeInTimer) {
+            clearInterval(fadeInTimer);
+            fadeInTimer = null;
+        }
+    }, 50);
+    // Frame counter for spinner
+    frameTimer = setInterval(() => {
+        setFrame((f) => f + 1);
+    }, 80);
+    // Auto-dismiss
+    if (effectiveDuration > 0) {
+        // Auto-progress
+        const progressInterval = setInterval(() => {
+            setProgress((p) => {
+                const newProgress = p + (100 / (effectiveDuration / 50));
+                if (newProgress >= 100) {
+                    clearInterval(progressInterval);
+                    return 100;
+                }
+                return newProgress;
+            });
+        }, 50);
+        dismissTimer = setTimeout(() => {
+            dismiss();
+        }, effectiveDuration);
+    }
+    function dismiss() {
+        if (fadeInTimer)
+            clearInterval(fadeInTimer);
+        if (dismissTimer)
+            clearTimeout(dismissTimer);
+        if (frameTimer)
+            clearInterval(frameTimer);
+        setIsVisible(false);
+        onComplete?.();
+    }
+    return {
+        opacity,
+        progress,
+        setProgress,
+        isVisible,
+        dismiss,
+        frame,
+    };
+}
+/**
+ * Splash Screen Component
+ *
+ * Layout:
+ * - Image + subtitle centered both horizontally and vertically
+ * - Loading indicator at the bottom with 1 line gap from terminal edge
+ */
+export function SplashScreen(props) {
+    const { title = 'TUIUIU', subtitle, asciiArt, coloredArt, font = 'block', color = 'cyan', secondaryColor = 'gray', loadingType = 'spinner', spinnerStyle = 'dots', loadingMessage = 'Loading...', version, state, width, height, } = props;
+    // Use provided state or create a simple visible state
+    const isVisible = state?.isVisible?.() ?? true;
+    const frame = state?.frame?.() ?? 0;
+    const progress = state?.progress?.() ?? 0;
+    if (!isVisible)
+        return null;
+    // Build center content (image + subtitle + version)
+    // All elements need width: '100%' to allow justifyContent: 'center' to work
+    const centerContent = [];
+    // Colored pixel grid (highest priority)
+    if (coloredArt) {
+        centerContent.push(Box({ justifyContent: 'center', width: '100%' }, ColoredPicture({ pixels: coloredArt })));
+        // ASCII art (second priority)
+    }
+    else if (asciiArt) {
+        centerContent.push(Box({ justifyContent: 'center', width: '100%' }, Text({ color }, asciiArt)));
+        // BigText title (fallback)
+    }
+    else {
+        centerContent.push(Box({ justifyContent: 'center', width: '100%' }, BigText({ text: title, font, color })));
+    }
+    // Subtitle (1 line gap below image)
+    if (subtitle) {
+        centerContent.push(Box({ justifyContent: 'center', marginTop: 1, width: '100%' }, Text({ color: secondaryColor }, subtitle)));
+    }
+    // Version (below subtitle, on separate line)
+    if (version) {
+        centerContent.push(Box({ justifyContent: 'center', width: '100%' }, Text({ color: secondaryColor, dim: true }, `v${version}`)));
+    }
+    // Build loading indicator
+    let loadingNode = null;
+    if (loadingType === 'spinner') {
+        loadingNode = Box({ justifyContent: 'center', alignItems: 'center', gap: 1 }, Spinner({ style: spinnerStyle, color }), Text({ color: secondaryColor }, loadingMessage));
+    }
+    else if (loadingType === 'progress') {
+        loadingNode = Box({ flexDirection: 'column', alignItems: 'center', gap: 1, width: 40 }, ProgressBar({
+            value: progress,
+            width: 30,
+            showPercentage: true,
+            color,
+        }), Text({ color: secondaryColor }, loadingMessage));
+    }
+    else if (loadingType === 'dots') {
+        const dots = '.'.repeat((frame % 4));
+        loadingNode = Box({ justifyContent: 'center' }, Text({ color: secondaryColor }, `${loadingMessage}${dots}`));
+    }
+    // Get terminal dimensions for fullscreen
+    const termWidth = process.stdout.columns || 80;
+    const termHeight = process.stdout.rows || 24;
+    // Layout strategy:
+    // - Top spacer (flexGrow: 1) pushes content down
+    // - Center content (image + subtitle)
+    // - Bottom spacer (flexGrow: 1) pushes content up
+    // - Loading fixed at bottom
+    // The two spacers with equal flexGrow center the content vertically
+    return Box({
+        flexDirection: 'column',
+        width: width ?? termWidth,
+        height: height ?? termHeight,
+    }, 
+    // Top spacer
+    Box({ flexGrow: 1 }), 
+    // Center content (image + subtitle) - each child handles its own centering
+    Box({
+        flexDirection: 'column',
+        width: '100%',
+    }, ...centerContent), 
+    // Bottom spacer
+    Box({ flexGrow: 1 }), 
+    // Loading at bottom with 1 line gap from terminal edge
+    loadingNode
+        ? Box({ justifyContent: 'center', width: '100%', marginBottom: 1 }, loadingNode)
+        : Box({}));
+}
+// =============================================================================
+// Preset Splash Screens
+// =============================================================================
+/**
+ * Tuiuiu branded splash screen
+ */
+export function TuiuiuSplash(props = {}) {
+    const TUIUIU_LOGO = `
+████████╗██╗   ██╗██╗██╗   ██╗██╗██╗   ██╗
+╚══██╔══╝██║   ██║██║██║   ██║██║██║   ██║
+   ██║   ██║   ██║██║██║   ██║██║██║   ██║
+   ██║   ██║   ██║██║██║   ██║██║██║   ██║
+   ██║   ╚██████╔╝██║╚██████╔╝██║╚██████╔╝
+  ╚═╝    ╚═════╝ ╚═╝ ╚═════╝ ╚═╝ ╚═════╝
+`.trim();
+    return SplashScreen({
+        asciiArt: TUIUIU_LOGO,
+        subtitle: 'Zero-dependency Terminal UI',
+        color: 'cyan',
+        secondaryColor: 'gray',
+        loadingType: 'spinner',
+        spinnerStyle: 'dots',
+        loadingMessage: 'Initializing...',
+        ...props,
+    });
+}
+/**
+ * Minimal splash screen
+ */
+export function MinimalSplash(props) {
+    return SplashScreen({
+        font: 'small',
+        loadingType: 'dots',
+        secondaryColor: 'gray',
+        ...props,
+    });
+}
+/**
+ * Progress splash screen
+ */
+export function ProgressSplash(props) {
+    return SplashScreen({
+        loadingType: 'progress',
+        ...props,
+    });
+}
+//# sourceMappingURL=splash-screen.js.map

package/dist/design-system/visual/splash-screen.js.map

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

package/dist/design-system/visual/tooltip.d.ts

@@ -0,0 +1,188 @@
+/**
+ * Tooltip - Hover/focus tooltips
+ *
+ * Features:
+ * - Position relative to target (top/bottom/left/right)
+ * - Arrow pointer
+ * - Border styles
+ * - Background color
+ * - Show/hide control
+ */
+import type { VNode, ColorValue } from '../../utils/types.js';
+type BorderStyle = 'single' | 'double' | 'round' | 'bold' | 'none';
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+export interface TooltipOptions {
+    /** Tooltip content */
+    content: string | VNode;
+    /** Position relative to target */
+    position?: TooltipPosition;
+    /** Show arrow pointer */
+    arrow?: boolean;
+    /** Border style */
+    borderStyle?: BorderStyle;
+    /** Border color */
+    borderColor?: ColorValue;
+    /** Text color */
+    color?: ColorValue;
+    /** Background color */
+    backgroundColor?: ColorValue;
+    /** Is visible */
+    visible?: boolean;
+    /** Max width */
+    maxWidth?: number;
+}
+/**
+ * Tooltip - Tooltip display (position is relative to parent layout)
+ *
+ * @example
+ * // Tooltip above content
+ * Box({ flexDirection: 'column' },
+ *   Tooltip({ content: 'Press Enter to select', position: 'top', visible: focused }),
+ *   Text({}, 'Button')
+ * )
+ *
+ * @example
+ * // Tooltip with arrow
+ * Tooltip({
+ *   content: 'Help text here',
+ *   position: 'right',
+ *   arrow: true,
+ *   borderStyle: 'round',
+ * })
+ */
+export declare function Tooltip(props: TooltipOptions): VNode | null;
+export interface WithTooltipOptions {
+    /** Target element */
+    children: VNode;
+    /** Tooltip content */
+    tooltip: string | VNode;
+    /** Position */
+    position?: TooltipPosition;
+    /** Is focused/hovered */
+    active?: boolean;
+    /** Tooltip props */
+    tooltipProps?: Partial<TooltipOptions>;
+}
+/**
+ * WithTooltip - Wrapper that shows tooltip when active
+ *
+ * @example
+ * WithTooltip({
+ *   children: Button({ label: 'Submit' }),
+ *   tooltip: 'Press Enter to submit the form',
+ *   position: 'top',
+ *   active: isFocused,
+ * })
+ */
+export declare function WithTooltip(props: WithTooltipOptions): VNode;
+export interface HelpTooltipOptions {
+    /** Help text */
+    text: string;
+    /** Position */
+    position?: TooltipPosition;
+    /** Is active/focused */
+    active?: boolean;
+    /** Icon */
+    icon?: string;
+    /** Icon color */
+    iconColor?: ColorValue;
+}
+/**
+ * HelpTooltip - Help icon that shows tooltip when active
+ *
+ * @example
+ * HelpTooltip({
+ *   text: 'Enter your email address',
+ *   position: 'right',
+ *   active: focused,
+ * })
+ */
+export declare function HelpTooltip(props: HelpTooltipOptions): VNode;
+export type InfoBoxType = 'info' | 'warning' | 'error' | 'success' | 'tip';
+export interface InfoBoxOptions {
+    /** Message content */
+    message: string | VNode;
+    /** Box type */
+    type?: InfoBoxType;
+    /** Title (optional) */
+    title?: string;
+    /** Show icon */
+    showIcon?: boolean;
+    /** Width */
+    width?: number;
+}
+/**
+ * InfoBox - Information callout box
+ *
+ * @example
+ * InfoBox({
+ *   type: 'warning',
+ *   title: 'Caution',
+ *   message: 'This action cannot be undone.',
+ * })
+ */
+export declare function InfoBox(props: InfoBoxOptions): VNode;
+export interface PopoverOptions {
+    /** Popover content */
+    content: VNode;
+    /** Position */
+    position?: TooltipPosition;
+    /** Is visible */
+    visible?: boolean;
+    /** Border style */
+    borderStyle?: BorderStyle;
+    /** Border color */
+    borderColor?: ColorValue;
+    /** Width */
+    width?: number;
+    /** Show arrow */
+    arrow?: boolean;
+}
+/**
+ * Popover - Positioned popover content
+ *
+ * @example
+ * Popover({
+ *   content: MenuItems(),
+ *   position: 'bottom',
+ *   visible: isOpen,
+ *   width: 30,
+ * })
+ */
+export declare function Popover(props: PopoverOptions): VNode | null;
+export interface BadgeOptions {
+    /** Badge text */
+    text: string;
+    /** Badge color */
+    color?: ColorValue;
+    /** Variant */
+    variant?: 'solid' | 'outline' | 'subtle';
+}
+/**
+ * Badge - Small badge/chip
+ *
+ * @example
+ * Badge({ text: 'NEW', color: 'green' })
+ * Badge({ text: '5', color: 'red', variant: 'solid' })
+ */
+export declare function Badge(props: BadgeOptions): VNode;
+export interface TagOptions {
+    /** Tag label */
+    label: string;
+    /** Tag color */
+    color?: ColorValue;
+    /** Removable */
+    removable?: boolean;
+    /** On remove callback */
+    onRemove?: () => void;
+}
+/**
+ * Tag - Labeled tag with optional remove
+ *
+ * @example
+ * Tag({ label: 'TypeScript', color: 'blue' })
+ * Tag({ label: 'React', color: 'cyan', removable: true })
+ */
+export declare function Tag(props: TagOptions): VNode;
+export {};
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/design-system/visual/tooltip.d.ts.map

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