tuiuiu.js 0.1.1

package/dist/design-system/visual/tooltip.js

@@ -0,0 +1,276 @@
+/**
+ * Tooltip - Hover/focus tooltips
+ *
+ * Features:
+ * - Position relative to target (top/bottom/left/right)
+ * - Arrow pointer
+ * - Border styles
+ * - Background color
+ * - Show/hide control
+ */
+import { Box, Text } from '../../primitives/nodes.js';
+import { getRenderMode } from '../../core/capabilities.js';
+// =============================================================================
+// Arrow Characters
+// =============================================================================
+const ARROWS = {
+    unicode: {
+        top: '▲',
+        bottom: '▼',
+        left: '◀',
+        right: '▶',
+    },
+    ascii: {
+        top: '^',
+        bottom: 'v',
+        left: '<',
+        right: '>',
+    },
+};
+// =============================================================================
+// Components
+// =============================================================================
+/**
+ * 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 function Tooltip(props) {
+    const { content, position = 'top', arrow = true, borderStyle = 'round', borderColor = 'gray', color = 'white', backgroundColor, visible = true, maxWidth, } = props;
+    if (!visible)
+        return null;
+    const isAscii = getRenderMode() === 'ascii';
+    const arrowChars = isAscii ? ARROWS.ascii : ARROWS.unicode;
+    // Build content
+    const contentNode = typeof content === 'string' ? Text({ color }, content) : content;
+    // Arrow node
+    const arrowNode = arrow
+        ? Text({ color: borderColor }, arrowChars[position])
+        : null;
+    // Tooltip box
+    const tooltipBox = Box({
+        borderStyle,
+        borderColor,
+        paddingLeft: 1,
+        paddingRight: 1,
+        maxWidth,
+    }, contentNode);
+    // Compose based on position
+    switch (position) {
+        case 'top':
+            return Box({ flexDirection: 'column' }, tooltipBox, arrowNode ? Box({ marginLeft: 2 }, arrowNode) : null);
+        case 'bottom':
+            return Box({ flexDirection: 'column' }, arrowNode ? Box({ marginLeft: 2 }, arrowNode) : null, tooltipBox);
+        case 'left':
+            return Box({ flexDirection: 'row' }, tooltipBox, arrowNode);
+        case 'right':
+            return Box({ flexDirection: 'row' }, arrowNode, tooltipBox);
+        default:
+            return tooltipBox;
+    }
+}
+/**
+ * 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 function WithTooltip(props) {
+    const { children, tooltip, position = 'top', active = false, tooltipProps = {}, } = props;
+    const tooltipNode = active
+        ? Tooltip({
+            content: tooltip,
+            position,
+            visible: true,
+            ...tooltipProps,
+        })
+        : null;
+    switch (position) {
+        case 'top':
+            return Box({ flexDirection: 'column' }, tooltipNode, children);
+        case 'bottom':
+            return Box({ flexDirection: 'column' }, children, tooltipNode);
+        case 'left':
+            return Box({ flexDirection: 'row' }, tooltipNode, children);
+        case 'right':
+            return Box({ flexDirection: 'row' }, children, tooltipNode);
+        default:
+            return children;
+    }
+}
+/**
+ * HelpTooltip - Help icon that shows tooltip when active
+ *
+ * @example
+ * HelpTooltip({
+ *   text: 'Enter your email address',
+ *   position: 'right',
+ *   active: focused,
+ * })
+ */
+export function HelpTooltip(props) {
+    const { text, position = 'right', active = false, icon = '?', iconColor = 'cyan', } = props;
+    const iconNode = Text({ color: iconColor }, `[${icon}]`);
+    return WithTooltip({
+        children: iconNode,
+        tooltip: text,
+        position,
+        active,
+        tooltipProps: {
+            borderStyle: 'round',
+            borderColor: iconColor,
+        },
+    });
+}
+const INFO_BOX_STYLES = {
+    info: { icon: 'ℹ', color: 'blue' },
+    warning: { icon: '⚠', color: 'yellow' },
+    error: { icon: '✖', color: 'red' },
+    success: { icon: '✔', color: 'green' },
+    tip: { icon: '💡', color: 'cyan' },
+};
+const INFO_BOX_STYLES_ASCII = {
+    info: { icon: 'i', color: 'blue' },
+    warning: { icon: '!', color: 'yellow' },
+    error: { icon: 'x', color: 'red' },
+    success: { icon: '*', color: 'green' },
+    tip: { icon: '>', color: 'cyan' },
+};
+/**
+ * InfoBox - Information callout box
+ *
+ * @example
+ * InfoBox({
+ *   type: 'warning',
+ *   title: 'Caution',
+ *   message: 'This action cannot be undone.',
+ * })
+ */
+export function InfoBox(props) {
+    const { message, type = 'info', title, showIcon = true, width, } = props;
+    const isAscii = getRenderMode() === 'ascii';
+    const styles = isAscii ? INFO_BOX_STYLES_ASCII : INFO_BOX_STYLES;
+    const style = styles[type];
+    const contentNode = typeof message === 'string' ? Text({}, message) : message;
+    const parts = [];
+    // Header with icon and title
+    if (showIcon || title) {
+        const headerParts = [];
+        if (showIcon) {
+            headerParts.push(Text({ color: style.color, bold: true }, style.icon + ' '));
+        }
+        if (title) {
+            headerParts.push(Text({ color: style.color, bold: true }, title));
+        }
+        parts.push(Box({ flexDirection: 'row' }, ...headerParts));
+    }
+    // Content
+    parts.push(Box({ marginTop: title ? 1 : 0 }, contentNode));
+    return Box({
+        flexDirection: 'column',
+        borderStyle: 'round',
+        borderColor: style.color,
+        paddingLeft: 1,
+        paddingRight: 1,
+        paddingTop: 0,
+        paddingBottom: 0,
+        width,
+    }, ...parts);
+}
+/**
+ * Popover - Positioned popover content
+ *
+ * @example
+ * Popover({
+ *   content: MenuItems(),
+ *   position: 'bottom',
+ *   visible: isOpen,
+ *   width: 30,
+ * })
+ */
+export function Popover(props) {
+    const { content, position = 'bottom', visible = true, borderStyle = 'round', borderColor = 'gray', width, arrow = true, } = props;
+    if (!visible)
+        return null;
+    const isAscii = getRenderMode() === 'ascii';
+    const arrowChars = isAscii ? ARROWS.ascii : ARROWS.unicode;
+    // Arrow based on position (inverted for popover)
+    const arrowChar = position === 'top'
+        ? arrowChars.bottom
+        : position === 'bottom'
+            ? arrowChars.top
+            : position === 'left'
+                ? arrowChars.right
+                : arrowChars.left;
+    const arrowNode = arrow
+        ? Text({ color: borderColor }, arrowChar)
+        : null;
+    const popoverBox = Box({
+        borderStyle,
+        borderColor,
+        width,
+        padding: 1,
+    }, content);
+    switch (position) {
+        case 'top':
+            return Box({ flexDirection: 'column' }, popoverBox, arrowNode ? Box({ marginLeft: 2 }, arrowNode) : null);
+        case 'bottom':
+            return Box({ flexDirection: 'column' }, arrowNode ? Box({ marginLeft: 2 }, arrowNode) : null, popoverBox);
+        case 'left':
+            return Box({ flexDirection: 'row' }, popoverBox, arrowNode);
+        case 'right':
+            return Box({ flexDirection: 'row' }, arrowNode, popoverBox);
+        default:
+            return popoverBox;
+    }
+}
+/**
+ * Badge - Small badge/chip
+ *
+ * @example
+ * Badge({ text: 'NEW', color: 'green' })
+ * Badge({ text: '5', color: 'red', variant: 'solid' })
+ */
+export function Badge(props) {
+    const { text, color = 'gray', variant = 'subtle' } = props;
+    switch (variant) {
+        case 'solid':
+            return Text({ color: 'black', backgroundColor: color, bold: true }, ` ${text} `);
+        case 'outline':
+            return Box({ borderStyle: 'round', borderColor: color }, Text({ color }, text));
+        case 'subtle':
+        default:
+            return Text({ color, dim: true }, `[${text}]`);
+    }
+}
+/**
+ * Tag - Labeled tag with optional remove
+ *
+ * @example
+ * Tag({ label: 'TypeScript', color: 'blue' })
+ * Tag({ label: 'React', color: 'cyan', removable: true })
+ */
+export function Tag(props) {
+    const { label, color = 'gray', removable = false } = props;
+    return Box({ flexDirection: 'row' }, Text({ color }, `[${label}`), removable ? Text({ color, dim: true }, ' ×') : null, Text({ color }, ']'));
+}
+//# sourceMappingURL=tooltip.js.map

package/dist/design-system/visual/tooltip.js.map

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

package/dist/dev-tools/debugger.d.ts

@@ -0,0 +1,223 @@
+/**
+ * Developer Tools - Debugging utilities for tuiuiu applications
+ *
+ * Provides:
+ * - Layout Inspector: Visualize layout tree with dimensions
+ * - Event Log: Track events as they occur
+ * - Performance Monitor: Frame times and render stats
+ * - Component Tree: VNode hierarchy visualization
+ * - Signal Graph: Dependency tracking
+ * - Dev Mode: Global toggle for debug features
+ */
+import type { VNode } from '../utils/types.js';
+export interface DevToolsConfig {
+    enabled: boolean;
+    showLayoutBounds: boolean;
+    showEventLog: boolean;
+    showPerformance: boolean;
+    showComponentTree: boolean;
+    showSignalGraph: boolean;
+    maxEventLogSize: number;
+    performanceWarningThreshold: number;
+}
+export interface LayoutInfo {
+    type: string;
+    id?: string;
+    className?: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    padding: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    children: LayoutInfo[];
+}
+export interface EventLogEntry {
+    id: number;
+    timestamp: number;
+    type: string;
+    target?: string;
+    data?: unknown;
+    phase?: 'capture' | 'bubble';
+}
+export interface PerformanceMetrics {
+    frameCount: number;
+    lastFrameTime: number;
+    averageFrameTime: number;
+    minFrameTime: number;
+    maxFrameTime: number;
+    fps: number;
+    renderCount: number;
+    layoutCount: number;
+    signalUpdateCount: number;
+    memoryUsage?: number;
+}
+export interface FrameStats {
+    startTime: number;
+    endTime: number;
+    duration: number;
+    renderTime: number;
+    layoutTime: number;
+    signalTime: number;
+}
+export interface ComponentTreeNode {
+    type: string;
+    id?: string;
+    className?: string;
+    props: Record<string, unknown>;
+    children: ComponentTreeNode[];
+    depth: number;
+    path: string;
+}
+export interface SignalNode {
+    id: string;
+    name: string;
+    value: unknown;
+    dependencies: string[];
+    dependents: string[];
+    updateCount: number;
+    lastUpdate: number;
+}
+export interface SignalGraph {
+    nodes: SignalNode[];
+    edges: Array<{
+        from: string;
+        to: string;
+    }>;
+}
+/**
+ * Enable or disable dev mode globally
+ */
+export declare function setDevMode(enabled: boolean): void;
+/**
+ * Check if dev mode is enabled
+ */
+export declare function isDevMode(): boolean;
+/**
+ * Configure dev tools options
+ */
+export declare function configureDevTools(options: Partial<DevToolsConfig>): void;
+/**
+ * Get current dev tools configuration
+ */
+export declare function getDevToolsConfig(): Readonly<DevToolsConfig>;
+/**
+ * Extract layout information from a VNode tree
+ */
+export declare function inspectLayout(node: VNode, x?: number, y?: number, width?: number, height?: number): LayoutInfo;
+/**
+ * Format layout info as a string tree
+ */
+export declare function formatLayoutTree(info: LayoutInfo, indent?: number): string;
+/**
+ * Log an event to the dev tools event log
+ */
+export declare function logEvent(type: string, target?: string, data?: unknown, phase?: 'capture' | 'bubble'): void;
+/**
+ * Get the current event log
+ */
+export declare function getEventLog(): readonly EventLogEntry[];
+/**
+ * Clear the event log
+ */
+export declare function clearEventLog(): void;
+/**
+ * Format event log as string
+ */
+export declare function formatEventLog(limit?: number): string;
+/**
+ * Start timing a frame
+ */
+export declare function startFrame(): {
+    end: () => FrameStats;
+};
+/**
+ * Record a render operation
+ */
+export declare function recordRender(): void;
+/**
+ * Record a layout operation
+ */
+export declare function recordLayout(): void;
+/**
+ * Record a signal update
+ */
+export declare function recordSignalUpdate(): void;
+/**
+ * Get current performance metrics
+ */
+export declare function getPerformanceMetrics(): Readonly<PerformanceMetrics>;
+/**
+ * Reset performance metrics
+ */
+export declare function resetPerformanceMetrics(): void;
+/**
+ * Format performance metrics as string
+ */
+export declare function formatPerformanceMetrics(): string;
+/**
+ * Build a component tree from a VNode
+ */
+export declare function buildComponentTree(node: VNode, depth?: number, path?: string): ComponentTreeNode;
+/**
+ * Format component tree as string
+ */
+export declare function formatComponentTree(node: ComponentTreeNode, options?: {
+    showProps?: boolean;
+    maxDepth?: number;
+}): string;
+/**
+ * Find component by path
+ */
+export declare function findComponentByPath(tree: ComponentTreeNode, path: string): ComponentTreeNode | null;
+/**
+ * Count components in tree
+ */
+export declare function countComponents(tree: ComponentTreeNode): number;
+/**
+ * Register a signal for tracking
+ */
+export declare function registerSignal(name: string, value: unknown): string;
+/**
+ * Update signal value and track
+ */
+export declare function updateSignalValue(id: string, value: unknown): void;
+/**
+ * Add dependency between signals
+ */
+export declare function addSignalDependency(dependentId: string, dependencyId: string): void;
+/**
+ * Get signal graph
+ */
+export declare function getSignalGraph(): SignalGraph;
+/**
+ * Format signal graph as string
+ */
+export declare function formatSignalGraph(): string;
+/**
+ * Clear signal registry
+ */
+export declare function clearSignalRegistry(): void;
+export interface DebugPanelData {
+    layout?: LayoutInfo;
+    componentTree?: ComponentTreeNode;
+    eventLog: readonly EventLogEntry[];
+    performance: Readonly<PerformanceMetrics>;
+    signalGraph: SignalGraph;
+    config: Readonly<DevToolsConfig>;
+}
+/**
+ * Get all debug panel data
+ */
+export declare function getDebugPanelData(rootNode?: VNode): DebugPanelData;
+//# sourceMappingURL=debugger.d.ts.map

package/dist/dev-tools/debugger.d.ts.map

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