tuiuiu.js 0.1.1

package/dist/storybook/components/preview.js

@@ -0,0 +1,248 @@
+/**
+ * Storybook Preview Component
+ *
+ * Renders the current story with various view modes:
+ * - Preview: Simple story render
+ * - Playground: Story with live prop editing
+ * - Comparatives: Side-by-side variant comparison
+ * - Docs: Story documentation and API reference
+ */
+import { Box, Text } from '../../primitives/nodes.js';
+import { Divider } from '../../primitives/divider.js';
+/**
+ * Render the story content
+ */
+function StoryContent(props) {
+    const { story, controlValues } = props;
+    try {
+        return story.render(controlValues);
+    }
+    catch (error) {
+        return Box({
+            flexDirection: 'column',
+            padding: 1,
+            borderStyle: 'single',
+            borderColor: 'red',
+        }, Text({ color: 'red', bold: true }, 'Render Error'), Text({ color: 'red' }, error.message || String(error)));
+    }
+}
+/**
+ * Render story metadata header
+ */
+function StoryHeader(props) {
+    const { story } = props;
+    return Box({ flexDirection: 'column', marginBottom: 1 }, Box({}, Text({ color: 'gray' }, `${story.category} / `), Text({ color: 'cyan', bold: true }, story.name)), story.description &&
+        Text({ color: 'gray', dim: true }, story.description));
+}
+/**
+ * Render controls info panel
+ */
+function ControlsInfo(props) {
+    const { controls, values } = props;
+    const entries = Object.entries(controls);
+    if (entries.length === 0) {
+        return Text({ color: 'gray', dim: true }, 'No controls defined');
+    }
+    return Box({ flexDirection: 'column' }, Box({ marginBottom: 1 }, Text({ color: 'white', bold: true }, 'Controls')), ...entries.map(([key, control]) => Box({}, Text({ color: 'gray' }, `${control.label}: `), Text({ color: 'cyan' }, formatValue(values[key], control.type)))));
+}
+/**
+ * Format a control value for display
+ */
+function formatValue(value, type) {
+    if (value === undefined || value === null)
+        return 'undefined';
+    switch (type) {
+        case 'boolean':
+            return value ? 'true' : 'false';
+        case 'color':
+            return String(value);
+        case 'text':
+            return `"${value}"`;
+        default:
+            return String(value);
+    }
+}
+/**
+ * Render the preview panel in preview mode
+ */
+function PreviewMode(props) {
+    const { navigator, controlValues, isFocused } = props;
+    const story = navigator.currentStory();
+    if (!story) {
+        return Box({ padding: 2, flexDirection: 'column' }, Text({ color: 'gray', dim: true }, 'No story selected'), Text({ color: 'gray', dim: true }, 'Select a story from the sidebar'));
+    }
+    return Box({ flexDirection: 'column', padding: 1 }, 
+    // Header
+    StoryHeader({ story }), Divider({}), 
+    // Story content
+    Box({
+        marginTop: 1,
+        padding: 1,
+        borderStyle: 'round',
+        borderColor: isFocused ? 'cyan' : 'gray',
+    }, StoryContent({ story, controlValues })), 
+    // Controls info
+    Box({ marginTop: 1 }, ControlsInfo({ controls: story.controls || {}, values: controlValues })));
+}
+/**
+ * Render the preview panel in playground mode
+ */
+function PlaygroundMode(props) {
+    const { navigator, controlValues, isFocused } = props;
+    const story = navigator.currentStory();
+    if (!story) {
+        return Box({ padding: 2 }, Text({ color: 'gray', dim: true }, 'No story selected'));
+    }
+    return Box({ flexDirection: 'column', padding: 1 }, 
+    // Header
+    Box({ marginBottom: 1 }, Text({ color: 'yellow', bold: true }, 'Playground: '), Text({ color: 'white' }, story.name)), 
+    // Two columns: preview and controls
+    Box({ flexDirection: 'row', gap: 2 }, 
+    // Preview
+    Box({
+        flexGrow: 1,
+        borderStyle: 'single',
+        borderColor: isFocused ? 'cyan' : 'gray',
+        padding: 1,
+    }, StoryContent({ story, controlValues }))), 
+    // Hint
+    Box({ marginTop: 1 }, Text({ color: 'gray', dim: true }, 'Tab to switch to controls panel')));
+}
+/**
+ * Render the preview panel in comparatives mode
+ */
+function ComparativesMode(props) {
+    const { navigator, controlValues, isFocused } = props;
+    const story = navigator.currentStory();
+    if (!story) {
+        return Box({ padding: 2 }, Text({ color: 'gray', dim: true }, 'No story selected'));
+    }
+    // Generate variants based on control types
+    const variants = [];
+    // Default variant
+    variants.push({ label: 'Default', values: controlValues });
+    // Generate variants for select controls
+    for (const [key, control] of Object.entries(story.controls || {})) {
+        if (control.type === 'select' && control.options) {
+            for (const option of control.options.slice(0, 4)) {
+                variants.push({
+                    label: `${control.label}: ${option}`,
+                    values: { ...controlValues, [key]: option },
+                });
+            }
+        }
+    }
+    // Limit to 4 variants
+    const displayVariants = variants.slice(0, 4);
+    return Box({ flexDirection: 'column', padding: 1 }, 
+    // Header
+    Box({ marginBottom: 1 }, Text({ color: 'green', bold: true }, 'Comparatives: '), Text({ color: 'white' }, story.name)), 
+    // Grid of variants
+    Box({ flexDirection: 'column', gap: 1 }, ...displayVariants.map((variant, idx) => Box({
+        flexDirection: 'column',
+        borderStyle: 'single',
+        borderColor: 'gray',
+        padding: 1,
+    }, Box({ marginBottom: 1 }, Text({ color: 'cyan', bold: true }, variant.label)), StoryContent({ story, controlValues: variant.values })))), 
+    // Hint
+    Box({ marginTop: 1 }, Text({ color: 'gray', dim: true }, `Showing ${displayVariants.length} variants`)));
+}
+/**
+ * Render the preview panel in docs mode
+ */
+function DocsMode(props) {
+    const { navigator, controlValues, isFocused } = props;
+    const story = navigator.currentStory();
+    if (!story) {
+        return Box({ padding: 2 }, Text({ color: 'gray', dim: true }, 'No story selected'));
+    }
+    const controls = Object.entries(story.controls || {});
+    return Box({ flexDirection: 'column', padding: 1 }, 
+    // Header
+    Box({ marginBottom: 1 }, Text({ color: 'magenta', bold: true }, 'Documentation: '), Text({ color: 'white' }, story.name)), Divider({}), 
+    // Description
+    Box({ marginTop: 1, marginBottom: 1 }, Text({ color: 'white' }, story.description || 'No description provided.')), 
+    // Category
+    Box({}, Text({ color: 'gray' }, 'Category: '), Text({ color: 'cyan' }, story.category)), 
+    // Controls API
+    controls.length > 0 &&
+        Box({ flexDirection: 'column', marginTop: 1 }, Box({ marginBottom: 1 }, Text({ color: 'white', bold: true }, 'Props/Controls')), ...controls.map(([key, control]) => Box({ flexDirection: 'column', marginBottom: 1 }, Box({}, Text({ color: 'cyan' }, key), Text({ color: 'gray' }, `: ${control.type}`)), Text({ color: 'gray', dim: true }, `  ${control.label}`), Text({ color: 'gray', dim: true }, `  Default: ${formatValue(control.defaultValue, control.type)}`)))), 
+    // Example preview
+    Box({ marginTop: 1, flexDirection: 'column' }, Box({ marginBottom: 1 }, Text({ color: 'white', bold: true }, 'Preview')), Box({
+        borderStyle: 'round',
+        borderColor: 'gray',
+        padding: 1,
+    }, StoryContent({ story, controlValues }))));
+}
+/**
+ * Main Preview component
+ */
+export function Preview(props) {
+    const { navigator, controlValues, isFocused = false } = props;
+    const state = navigator.state();
+    return Box({
+        flexDirection: 'column',
+        flexGrow: 1,
+        borderStyle: 'single',
+        borderColor: isFocused ? 'cyan' : 'gray',
+    }, 
+    // Mode indicator
+    Box({
+        borderStyle: 'single',
+        borderColor: isFocused ? 'cyan' : 'gray',
+        paddingX: 1,
+    }, Text({ color: 'gray' }, 'Mode: '), Text({ color: getModeColor(state.viewMode), bold: true }, state.viewMode.toUpperCase())), 
+    // Content based on mode
+    Box({ flexGrow: 1 }, renderMode(state.viewMode, props)));
+}
+/**
+ * Get color for view mode
+ */
+function getModeColor(mode) {
+    switch (mode) {
+        case 'preview':
+            return 'cyan';
+        case 'playground':
+            return 'yellow';
+        case 'comparatives':
+            return 'green';
+        case 'docs':
+            return 'magenta';
+        default:
+            return 'white';
+    }
+}
+/**
+ * Render content based on view mode
+ */
+function renderMode(mode, props) {
+    switch (mode) {
+        case 'preview':
+            return PreviewMode(props);
+        case 'playground':
+            return PlaygroundMode(props);
+        case 'comparatives':
+            return ComparativesMode(props);
+        case 'docs':
+            return DocsMode(props);
+        default:
+            return PreviewMode(props);
+    }
+}
+/**
+ * Render mode switcher
+ */
+export function ModeSwitcher(props) {
+    const { currentMode, isFocused } = props;
+    const modes = [
+        { mode: 'preview', key: 'p', label: 'Preview' },
+        { mode: 'playground', key: 'g', label: 'Playground' },
+        { mode: 'comparatives', key: 'c', label: 'Compare' },
+        { mode: 'docs', key: 'd', label: 'Docs' },
+    ];
+    return Box({ gap: 2 }, ...modes.map(({ mode, key, label }) => Box({}, Text({
+        color: currentMode === mode ? getModeColor(mode) : 'gray',
+        bold: currentMode === mode,
+    }, `[${key.toUpperCase()}] ${label}`))));
+}
+//# sourceMappingURL=preview.js.map

package/dist/storybook/components/preview.js.map

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

package/dist/storybook/components/sidebar.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Storybook Sidebar Component
+ *
+ * A tree navigation component for browsing categories and stories:
+ * - Expandable/collapsible categories
+ * - Story selection with highlighting
+ * - Keyboard navigation support
+ * - Search filtering
+ */
+import type { VNode } from '../../utils/types.js';
+import type { Navigator } from '../core/navigator.js';
+export interface SidebarProps {
+    navigator: Navigator;
+    width?: number;
+    isFocused?: boolean;
+}
+/**
+ * Render the sidebar tree
+ */
+export declare function Sidebar(props: SidebarProps): VNode;
+/**
+ * Render a compact sidebar (just category names)
+ */
+export declare function CompactSidebar(props: SidebarProps): VNode;
+/**
+ * Render keyboard shortcuts help
+ */
+export declare function SidebarHelp(): VNode;
+//# sourceMappingURL=sidebar.d.ts.map

package/dist/storybook/components/sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/storybook/components/sidebar.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,sBAAsB,CAAC;AAEjE,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAsED;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAuIlD;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAkCzD;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI,KAAK,CA4BnC"}

package/dist/storybook/components/sidebar.js

@@ -0,0 +1,176 @@
+/**
+ * Storybook Sidebar Component
+ *
+ * A tree navigation component for browsing categories and stories:
+ * - Expandable/collapsible categories
+ * - Story selection with highlighting
+ * - Keyboard navigation support
+ * - Search filtering
+ */
+import { Box, Text } from '../../primitives/nodes.js';
+/**
+ * Render a category header
+ */
+function CategoryHeader(props) {
+    const { category, isExpanded, isSelected } = props;
+    const icon = isExpanded ? '▼' : '▶';
+    return Box({ paddingX: 1 }, Text({
+        color: isSelected ? 'cyan' : 'white',
+        bold: isSelected,
+    }, `${icon} ${category.name}`), Text({ color: 'gray', dim: true }, ` (${category.stories.length})`));
+}
+/**
+ * Render a story item
+ */
+function StoryItem(props) {
+    const { story, isSelected, indent = 2 } = props;
+    const prefix = isSelected ? '●' : '○';
+    const padding = ' '.repeat(indent);
+    return Box({ paddingX: 1 }, Text({
+        color: isSelected ? 'cyan' : 'gray',
+        bold: isSelected,
+    }, `${padding}${prefix} ${story.name}`));
+}
+/**
+ * Render search input display
+ */
+function SearchBar(props) {
+    const { query, isFocused } = props;
+    return Box({
+        borderStyle: 'single',
+        borderColor: isFocused ? 'cyan' : 'gray',
+        paddingX: 1,
+        marginBottom: 1,
+    }, Text({ color: 'gray' }, '/ '), query
+        ? Text({ color: 'white' }, query)
+        : Text({ color: 'gray', dim: true }, 'Search...'));
+}
+/**
+ * Render the sidebar tree
+ */
+export function Sidebar(props) {
+    const { navigator, width = 30, isFocused = false } = props;
+    const state = navigator.state();
+    const categories = navigator.filteredCategories();
+    const items = [];
+    // Search bar
+    items.push(SearchBar({ query: state.searchQuery, isFocused }));
+    // Categories and stories
+    let categoryIndex = 0;
+    for (const category of categories) {
+        // Find original category index for selection check
+        const originalCategoryIndex = state.categories.findIndex((c) => c.name === category.name);
+        const isCategorySelected = state.currentCategoryIndex === originalCategoryIndex;
+        const isExpanded = state.expandedCategories.has(category.name);
+        // Category header
+        items.push(Box({}, CategoryHeader({
+            category,
+            isExpanded,
+            isSelected: isCategorySelected && state.currentStoryIndex === -1,
+        })));
+        // Stories (if expanded) with virtual scroll
+        if (isExpanded) {
+            const maxVisible = 15;
+            const totalStories = category.stories.length;
+            const currentStoryIdx = isCategorySelected ? state.currentStoryIndex : 0;
+            // Calculate visible window
+            let startIdx = 0;
+            let endIdx = Math.min(maxVisible, totalStories);
+            if (totalStories > maxVisible && currentStoryIdx >= 0) {
+                const halfWindow = Math.floor(maxVisible / 2);
+                startIdx = Math.max(0, currentStoryIdx - halfWindow);
+                endIdx = Math.min(totalStories, startIdx + maxVisible);
+                if (endIdx === totalStories) {
+                    startIdx = Math.max(0, totalStories - maxVisible);
+                }
+            }
+            // Scroll up indicator
+            if (startIdx > 0) {
+                items.push(Box({ paddingX: 1 }, Text({ color: 'gray', dim: true }, `    ▲ ${startIdx} more`)));
+            }
+            // Visible stories
+            for (let storyIdx = startIdx; storyIdx < endIdx; storyIdx++) {
+                const story = category.stories[storyIdx];
+                const isStorySelected = isCategorySelected && state.currentStoryIndex === storyIdx;
+                items.push(Box({}, StoryItem({
+                    story,
+                    isSelected: isStorySelected,
+                })));
+            }
+            // Scroll down indicator
+            if (endIdx < totalStories) {
+                items.push(Box({ paddingX: 1 }, Text({ color: 'gray', dim: true }, `    ▼ ${totalStories - endIdx} more`)));
+            }
+        }
+        categoryIndex++;
+    }
+    // Empty state
+    if (categories.length === 0) {
+        items.push(Box({ padding: 1 }, Text({ color: 'gray', dim: true }, 'No stories found')));
+    }
+    return Box({
+        flexDirection: 'column',
+        width,
+        borderStyle: 'single',
+        borderColor: isFocused ? 'cyan' : 'gray',
+    }, 
+    // Header
+    Box({
+        borderStyle: 'single',
+        borderColor: isFocused ? 'cyan' : 'gray',
+        paddingX: 1,
+    }, Text({ color: isFocused ? 'cyan' : 'white', bold: true }, 'Stories')), 
+    // Content
+    Box({ flexDirection: 'column', padding: 1 }, ...items), 
+    // Footer with stats
+    Box({
+        borderStyle: 'single',
+        borderColor: 'gray',
+        paddingX: 1,
+    }, Text({ color: 'gray', dim: true }, `${state.categories.length} categories`)));
+}
+/**
+ * Render a compact sidebar (just category names)
+ */
+export function CompactSidebar(props) {
+    const { navigator, width = 20, isFocused = false } = props;
+    const state = navigator.state();
+    const categories = navigator.filteredCategories();
+    return Box({
+        flexDirection: 'column',
+        width,
+        borderStyle: 'single',
+        borderColor: isFocused ? 'cyan' : 'gray',
+    }, 
+    // Categories
+    ...categories.map((category, idx) => {
+        const originalIdx = state.categories.findIndex((c) => c.name === category.name);
+        const isSelected = state.currentCategoryIndex === originalIdx;
+        return Box({
+            paddingX: 1,
+            backgroundColor: isSelected ? 'blue' : undefined,
+        }, Text({
+            color: isSelected ? 'white' : 'gray',
+            bold: isSelected,
+        }, category.name));
+    }));
+}
+/**
+ * Render keyboard shortcuts help
+ */
+export function SidebarHelp() {
+    const shortcuts = [
+        { key: 'j/k', desc: 'Navigate' },
+        { key: 'h/l', desc: 'Collapse/Expand' },
+        { key: '/', desc: 'Search' },
+        { key: 'Tab', desc: 'Switch panel' },
+        { key: 'Enter', desc: 'Select' },
+    ];
+    return Box({
+        flexDirection: 'column',
+        borderStyle: 'single',
+        borderColor: 'gray',
+        padding: 1,
+    }, Box({ marginBottom: 1 }, Text({ color: 'white', bold: true }, 'Navigation')), ...shortcuts.map(({ key, desc }) => Box({}, Text({ color: 'cyan' }, `[${key}]`), Text({ color: 'gray' }, ` ${desc}`))));
+}
+//# sourceMappingURL=sidebar.js.map

package/dist/storybook/components/sidebar.js.map

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

package/dist/storybook/core/comparatives.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Storybook Comparatives Engine
+ *
+ * Handles side-by-side comparison of component variants:
+ * - Generate variants from control options
+ * - Custom variant definitions
+ * - Layout modes (horizontal, vertical, grid)
+ * - Diff highlighting
+ */
+import type { Story, ControlDefinition } from '../types.js';
+export type LayoutMode = 'horizontal' | 'vertical' | 'grid';
+export interface Variant {
+    /** Variant label */
+    label: string;
+    /** Prop overrides for this variant */
+    props: Record<string, any>;
+    /** Optional description */
+    description?: string;
+}
+export interface VariantGroup {
+    /** Group name */
+    name: string;
+    /** Group description */
+    description?: string;
+    /** Variants in this group */
+    variants: Variant[];
+    /** What prop does this group vary */
+    varyingProp?: string;
+}
+export interface ComparativeState {
+    /** Base props (default values) */
+    baseProps: Record<string, any>;
+    /** Active variant groups */
+    groups: VariantGroup[];
+    /** Currently selected group index */
+    selectedGroupIndex: number;
+    /** Layout mode */
+    layoutMode: LayoutMode;
+    /** Number of columns for grid layout */
+    gridColumns: number;
+    /** Show labels */
+    showLabels: boolean;
+    /** Show borders */
+    showBorders: boolean;
+}
+export interface Comparatives {
+    state: () => ComparativeState;
+    addVariant: (groupIndex: number, variant: Variant) => void;
+    removeVariant: (groupIndex: number, variantIndex: number) => void;
+    updateVariant: (groupIndex: number, variantIndex: number, variant: Partial<Variant>) => void;
+    addGroup: (group: VariantGroup) => void;
+    removeGroup: (index: number) => void;
+    selectGroup: (index: number) => void;
+    generateFromControl: (key: string, control: ControlDefinition) => VariantGroup;
+    generateAllGroups: (controls: Record<string, ControlDefinition>) => void;
+    setLayoutMode: (mode: LayoutMode) => void;
+    setGridColumns: (columns: number) => void;
+    toggleLabels: () => void;
+    toggleBorders: () => void;
+    getCurrentVariants: () => Variant[];
+    getVariantProps: (variant: Variant) => Record<string, any>;
+    loadStory: (story: Story) => void;
+}
+export interface ComparativesOptions {
+    /** Initial story */
+    story?: Story;
+    /** Initial layout mode */
+    layoutMode?: LayoutMode;
+    /** Grid columns */
+    gridColumns?: number;
+}
+/**
+ * Create a comparatives manager
+ */
+export declare function createComparatives(options?: ComparativesOptions): Comparatives;
+/**
+ * Create a comparison definition for a specific component
+ */
+export declare function createComparison(config: {
+    title: string;
+    description?: string;
+    variants: Variant[];
+    layout?: LayoutMode;
+}): VariantGroup;
+/**
+ * Built-in comparison templates
+ */
+export declare const comparisonTemplates: {
+    borderStyles: () => VariantGroup;
+    colors: () => VariantGroup;
+    sizes: () => VariantGroup;
+    states: () => VariantGroup;
+};
+//# sourceMappingURL=comparatives.d.ts.map

package/dist/storybook/core/comparatives.d.ts.map

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