tuiuiu.js 0.1.1

package/dist/design-system/layout/grid.d.ts

@@ -0,0 +1,232 @@
+/**
+ * Grid - CSS Grid-like layout system
+ *
+ * Features:
+ * - Column/row definitions
+ * - Cell spanning
+ * - Gap between cells
+ * - Alignment options
+ * - Responsive column counts
+ */
+import type { VNode } from '../../utils/types.js';
+export type GridTrackSize = number | 'auto' | 'fr' | `${number}fr`;
+export interface GridOptions {
+    /** Number of columns (simple mode) */
+    columns?: number;
+    /** Column template (advanced mode) */
+    templateColumns?: GridTrackSize[];
+    /** Row template (optional) */
+    templateRows?: GridTrackSize[];
+    /** Gap between cells */
+    gap?: number;
+    /** Row gap (overrides gap for rows) */
+    rowGap?: number;
+    /** Column gap (overrides gap for columns) */
+    columnGap?: number;
+    /** Total width */
+    width?: number;
+    /** Total height */
+    height?: number;
+    /** Align items */
+    alignItems?: 'start' | 'center' | 'end' | 'stretch';
+    /** Justify items */
+    justifyItems?: 'start' | 'center' | 'end' | 'stretch';
+}
+export interface GridCellOptions {
+    /** Column start (1-based) */
+    column?: number;
+    /** Column span */
+    columnSpan?: number;
+    /** Row start (1-based) */
+    row?: number;
+    /** Row span */
+    rowSpan?: number;
+    /** Cell alignment override */
+    alignSelf?: 'start' | 'center' | 'end' | 'stretch';
+    /** Cell justification override */
+    justifySelf?: 'start' | 'center' | 'end' | 'stretch';
+}
+export interface GridProps extends GridOptions {
+    /** Grid cells */
+    children: VNode[];
+}
+/**
+ * Grid - CSS Grid-like layout
+ *
+ * @example
+ * // Simple 3-column grid
+ * Grid(
+ *   { columns: 3, gap: 1 },
+ *   Text({}, 'Cell 1'),
+ *   Text({}, 'Cell 2'),
+ *   Text({}, 'Cell 3'),
+ *   Text({}, 'Cell 4'),
+ *   Text({}, 'Cell 5'),
+ *   Text({}, 'Cell 6'),
+ * )
+ *
+ * @example
+ * // With column template
+ * Grid(
+ *   { templateColumns: [10, '1fr', '2fr'], gap: 2, width: 60 },
+ *   Text({}, 'Fixed'),
+ *   Text({}, 'Flex 1'),
+ *   Text({}, 'Flex 2'),
+ * )
+ */
+export declare function Grid(props: GridProps): VNode;
+export interface GridCellProps extends GridCellOptions {
+    /** Cell content */
+    children: VNode;
+}
+/**
+ * GridCell - Positioned grid cell
+ *
+ * Note: For spanning to work properly, use PositionedGrid instead of Grid.
+ */
+export declare function GridCell(props: GridCellProps): VNode;
+export interface SimpleGridOptions {
+    /** Number of columns */
+    columns: number;
+    /** Gap between cells */
+    spacing?: number;
+    /** Total width */
+    width?: number;
+    /** Children */
+    children: VNode[];
+}
+/**
+ * SimpleGrid - Equal-width column grid
+ *
+ * @example
+ * SimpleGrid(
+ *   { columns: 4, spacing: 2 },
+ *   ...items.map(item => ItemCard(item))
+ * )
+ */
+export declare function SimpleGrid(props: SimpleGridOptions): VNode;
+export interface AutoGridOptions {
+    /** Minimum column width */
+    minColumnWidth: number;
+    /** Maximum columns */
+    maxColumns?: number;
+    /** Gap between cells */
+    gap?: number;
+    /** Total width */
+    width: number;
+    /** Children */
+    children: VNode[];
+}
+/**
+ * AutoGrid - Auto-calculate column count based on width
+ *
+ * @example
+ * AutoGrid({
+ *   minColumnWidth: 20,
+ *   width: 80,
+ *   gap: 2,
+ *   children: items.map(i => ItemCard(i))
+ * })
+ */
+export declare function AutoGrid(props: AutoGridOptions): VNode;
+export interface MasonryGridOptions {
+    /** Number of columns */
+    columns: number;
+    /** Gap between items */
+    gap?: number;
+    /** Total width */
+    width?: number;
+    /** Items with heights */
+    items: {
+        content: VNode;
+        height: number;
+    }[];
+}
+/**
+ * MasonryGrid - Pinterest-style masonry layout
+ *
+ * @example
+ * MasonryGrid({
+ *   columns: 3,
+ *   items: cards.map(c => ({ content: Card(c), height: c.lines }))
+ * })
+ */
+export declare function MasonryGrid(props: MasonryGridOptions): VNode;
+export interface GridAreaDefinition {
+    /** Area name */
+    name: string;
+    /** Row start (1-based) */
+    rowStart: number;
+    /** Row end (exclusive) */
+    rowEnd: number;
+    /** Column start (1-based) */
+    colStart: number;
+    /** Column end (exclusive) */
+    colEnd: number;
+    /** Content */
+    content: VNode;
+}
+export interface TemplateGridOptions {
+    /** Grid template as string array */
+    template: string[];
+    /** Area contents mapped by name */
+    areas: Record<string, VNode>;
+    /** Row height */
+    rowHeight?: number;
+    /** Column width */
+    columnWidth?: number;
+    /** Gap */
+    gap?: number;
+}
+/**
+ * TemplateGrid - Grid with named template areas
+ *
+ * @example
+ * TemplateGrid({
+ *   template: [
+ *     'header header header',
+ *     'sidebar main main',
+ *     'footer footer footer',
+ *   ],
+ *   areas: {
+ *     header: HeaderComponent(),
+ *     sidebar: SidebarComponent(),
+ *     main: MainComponent(),
+ *     footer: FooterComponent(),
+ *   },
+ * })
+ */
+export declare function TemplateGrid(props: TemplateGridOptions): VNode;
+export interface ResponsiveBreakpoint {
+    /** Minimum width for this breakpoint */
+    minWidth: number;
+    /** Number of columns at this breakpoint */
+    columns: number;
+}
+export interface ResponsiveGridOptions {
+    /** Breakpoints */
+    breakpoints: ResponsiveBreakpoint[];
+    /** Current width */
+    width: number;
+    /** Gap */
+    gap?: number;
+    /** Children */
+    children: VNode[];
+}
+/**
+ * ResponsiveGrid - Grid that adapts to width
+ *
+ * @example
+ * ResponsiveGrid({
+ *   breakpoints: [
+ *     { minWidth: 80, columns: 4 },
+ *     { minWidth: 60, columns: 3 },
+ *     { minWidth: 40, columns: 2 },
+ *     { minWidth: 0, columns: 1 },
+ *   ],
+ *   width: terminalWidth,
+ *   children: items,
+ * })
+ */
+export declare function ResponsiveGrid(props: ResponsiveGridOptions): VNode;
+//# sourceMappingURL=grid.d.ts.map

package/dist/design-system/layout/grid.d.ts.map

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

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

@@ -0,0 +1,333 @@
+/**
+ * Grid - CSS Grid-like layout system
+ *
+ * Features:
+ * - Column/row definitions
+ * - Cell spanning
+ * - Gap between cells
+ * - Alignment options
+ * - Responsive column counts
+ */
+import { Box, Text } from '../../primitives/nodes.js';
+// =============================================================================
+// Helper Functions
+// =============================================================================
+/**
+ * Parse grid track size to actual width
+ */
+function parseTrackSize(size, availableSpace, totalFr) {
+    if (typeof size === 'number') {
+        return size;
+    }
+    if (size === 'auto') {
+        return 0; // Will be calculated based on content
+    }
+    if (size === 'fr') {
+        return Math.floor(availableSpace / totalFr);
+    }
+    if (size.endsWith('fr')) {
+        const fr = parseFloat(size);
+        return Math.floor((fr / totalFr) * availableSpace);
+    }
+    return 0;
+}
+/**
+ * Calculate column widths from template
+ */
+function calculateColumnWidths(template, totalWidth, columnGap) {
+    const gaps = (template.length - 1) * columnGap;
+    const availableSpace = totalWidth - gaps;
+    // Count total fr units
+    let totalFr = 0;
+    let fixedWidth = 0;
+    template.forEach((size) => {
+        if (typeof size === 'number') {
+            fixedWidth += size;
+        }
+        else if (size === 'fr') {
+            totalFr += 1;
+        }
+        else if (typeof size === 'string' && size.endsWith('fr')) {
+            totalFr += parseFloat(size);
+        }
+    });
+    const frSpace = availableSpace - fixedWidth;
+    return template.map((size) => parseTrackSize(size, frSpace, totalFr));
+}
+/**
+ * Grid - CSS Grid-like layout
+ *
+ * @example
+ * // Simple 3-column grid
+ * Grid(
+ *   { columns: 3, gap: 1 },
+ *   Text({}, 'Cell 1'),
+ *   Text({}, 'Cell 2'),
+ *   Text({}, 'Cell 3'),
+ *   Text({}, 'Cell 4'),
+ *   Text({}, 'Cell 5'),
+ *   Text({}, 'Cell 6'),
+ * )
+ *
+ * @example
+ * // With column template
+ * Grid(
+ *   { templateColumns: [10, '1fr', '2fr'], gap: 2, width: 60 },
+ *   Text({}, 'Fixed'),
+ *   Text({}, 'Flex 1'),
+ *   Text({}, 'Flex 2'),
+ * )
+ */
+export function Grid(props) {
+    const { columns = 3, templateColumns, gap = 0, rowGap = gap, columnGap = gap, width, children, } = props;
+    // Determine column template
+    const colTemplate = templateColumns ?? Array(columns).fill('1fr');
+    const numColumns = colTemplate.length;
+    // Calculate column widths if width is specified
+    let colWidths;
+    if (width) {
+        colWidths = calculateColumnWidths(colTemplate, width, columnGap);
+    }
+    // Arrange children into rows
+    const rows = [];
+    let currentRow = [];
+    children.forEach((child, i) => {
+        currentRow.push(child);
+        if (currentRow.length === numColumns) {
+            rows.push(currentRow);
+            currentRow = [];
+        }
+    });
+    // Add remaining cells
+    if (currentRow.length > 0) {
+        // Pad with empty cells
+        while (currentRow.length < numColumns) {
+            currentRow.push(Text({}, ''));
+        }
+        rows.push(currentRow);
+    }
+    // Render rows
+    const rowNodes = rows.map((row, rowIndex) => {
+        const cellNodes = row.map((cell, colIndex) => {
+            const cellWidth = colWidths?.[colIndex];
+            return Box({
+                width: cellWidth,
+                marginRight: colIndex < numColumns - 1 ? columnGap : 0,
+            }, cell);
+        });
+        return Box({
+            flexDirection: 'row',
+            marginBottom: rowIndex < rows.length - 1 ? rowGap : 0,
+        }, ...cellNodes);
+    });
+    return Box({ flexDirection: 'column', width }, ...rowNodes);
+}
+/**
+ * GridCell - Positioned grid cell
+ *
+ * Note: For spanning to work properly, use PositionedGrid instead of Grid.
+ */
+export function GridCell(props) {
+    const { children } = props;
+    // Store positioning info in a wrapper
+    // The parent Grid will read these for positioning
+    return children;
+}
+/**
+ * SimpleGrid - Equal-width column grid
+ *
+ * @example
+ * SimpleGrid(
+ *   { columns: 4, spacing: 2 },
+ *   ...items.map(item => ItemCard(item))
+ * )
+ */
+export function SimpleGrid(props) {
+    const { columns, spacing = 1, width, children } = props;
+    return Grid({
+        columns,
+        gap: spacing,
+        width,
+        children,
+    });
+}
+/**
+ * AutoGrid - Auto-calculate column count based on width
+ *
+ * @example
+ * AutoGrid({
+ *   minColumnWidth: 20,
+ *   width: 80,
+ *   gap: 2,
+ *   children: items.map(i => ItemCard(i))
+ * })
+ */
+export function AutoGrid(props) {
+    const { minColumnWidth, maxColumns, gap = 1, width, children } = props;
+    // Calculate number of columns that fit
+    let columns = Math.floor((width + gap) / (minColumnWidth + gap));
+    columns = Math.max(1, columns);
+    if (maxColumns) {
+        columns = Math.min(columns, maxColumns);
+    }
+    return Grid({
+        columns,
+        gap,
+        width,
+        children,
+    });
+}
+/**
+ * MasonryGrid - Pinterest-style masonry layout
+ *
+ * @example
+ * MasonryGrid({
+ *   columns: 3,
+ *   items: cards.map(c => ({ content: Card(c), height: c.lines }))
+ * })
+ */
+export function MasonryGrid(props) {
+    const { columns, gap = 1, width, items } = props;
+    // Track column heights
+    const columnHeights = Array(columns).fill(0);
+    const columnItems = Array.from({ length: columns }, () => []);
+    // Distribute items to shortest column
+    items.forEach((item) => {
+        // Find shortest column
+        let minHeight = columnHeights[0];
+        let minCol = 0;
+        columnHeights.forEach((h, i) => {
+            if (h < minHeight) {
+                minHeight = h;
+                minCol = i;
+            }
+        });
+        // Add item to shortest column
+        columnItems[minCol].push(item.content);
+        columnHeights[minCol] += item.height + gap;
+    });
+    // Calculate column width
+    const colWidth = width
+        ? Math.floor((width - (columns - 1) * gap) / columns)
+        : undefined;
+    // Render columns
+    const columnNodes = columnItems.map((items, i) => Box({
+        flexDirection: 'column',
+        width: colWidth,
+        gap,
+        marginRight: i < columns - 1 ? gap : 0,
+    }, ...items));
+    return Box({ flexDirection: 'row', width }, ...columnNodes);
+}
+/**
+ * TemplateGrid - Grid with named template areas
+ *
+ * @example
+ * TemplateGrid({
+ *   template: [
+ *     'header header header',
+ *     'sidebar main main',
+ *     'footer footer footer',
+ *   ],
+ *   areas: {
+ *     header: HeaderComponent(),
+ *     sidebar: SidebarComponent(),
+ *     main: MainComponent(),
+ *     footer: FooterComponent(),
+ *   },
+ * })
+ */
+export function TemplateGrid(props) {
+    const { template, areas, rowHeight = 1, columnWidth, gap = 0 } = props;
+    const rows = template.length;
+    const cols = template[0]?.split(/\s+/).length ?? 1;
+    // Parse areas from template
+    const parsedAreas = new Map();
+    template.forEach((row, rowIndex) => {
+        const cells = row.trim().split(/\s+/);
+        cells.forEach((cell, colIndex) => {
+            if (cell === '.')
+                return; // Empty cell
+            if (!parsedAreas.has(cell)) {
+                parsedAreas.set(cell, {
+                    name: cell,
+                    rowStart: rowIndex + 1,
+                    rowEnd: rowIndex + 2,
+                    colStart: colIndex + 1,
+                    colEnd: colIndex + 2,
+                    content: areas[cell] ?? Text({}, ''),
+                });
+            }
+            else {
+                const area = parsedAreas.get(cell);
+                area.rowEnd = Math.max(area.rowEnd, rowIndex + 2);
+                area.colEnd = Math.max(area.colEnd, colIndex + 2);
+            }
+        });
+    });
+    // For simplicity, render as regular grid rows
+    // (A full implementation would handle spanning properly)
+    const rowNodes = [];
+    for (let r = 0; r < rows; r++) {
+        const cells = template[r].trim().split(/\s+/);
+        const cellNodes = [];
+        const seen = new Set();
+        for (let c = 0; c < cols; c++) {
+            const areaName = cells[c] ?? '.';
+            if (areaName === '.' || seen.has(areaName)) {
+                // Empty or already rendered (spanning)
+                cellNodes.push(Box({ width: columnWidth, marginRight: c < cols - 1 ? gap : 0 }, Text({}, '')));
+            }
+            else {
+                seen.add(areaName);
+                const area = parsedAreas.get(areaName);
+                const content = area?.content ?? Text({}, '');
+                cellNodes.push(Box({
+                    width: columnWidth,
+                    height: rowHeight,
+                    marginRight: c < cols - 1 ? gap : 0,
+                }, content));
+            }
+        }
+        rowNodes.push(Box({
+            flexDirection: 'row',
+            marginBottom: r < rows - 1 ? gap : 0,
+        }, ...cellNodes));
+    }
+    return Box({ flexDirection: 'column' }, ...rowNodes);
+}
+/**
+ * ResponsiveGrid - Grid that adapts to width
+ *
+ * @example
+ * ResponsiveGrid({
+ *   breakpoints: [
+ *     { minWidth: 80, columns: 4 },
+ *     { minWidth: 60, columns: 3 },
+ *     { minWidth: 40, columns: 2 },
+ *     { minWidth: 0, columns: 1 },
+ *   ],
+ *   width: terminalWidth,
+ *   children: items,
+ * })
+ */
+export function ResponsiveGrid(props) {
+    const { breakpoints, width, gap = 1, children } = props;
+    // Sort breakpoints by minWidth descending
+    const sorted = [...breakpoints].sort((a, b) => b.minWidth - a.minWidth);
+    // Find matching breakpoint
+    let columns = 1;
+    for (const bp of sorted) {
+        if (width >= bp.minWidth) {
+            columns = bp.columns;
+            break;
+        }
+    }
+    return Grid({
+        columns,
+        gap,
+        width,
+        children,
+    });
+}
+//# sourceMappingURL=grid.js.map

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

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

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

@@ -0,0 +1,27 @@
+/**
+ * Design System Layout - Layout utility components
+ *
+ * Basic Layouts:
+ * - VStack, HStack: Stack layouts with gap
+ * - Center: Center content
+ * - FullScreen: Fill terminal
+ * - Spacer, Divider: Layout helpers
+ *
+ * Split Layouts:
+ * - SplitPanel: Two-panel split
+ * - ThreePanel: Three-panel layout
+ *
+ * App Layouts:
+ * - Page: Single page with header/footer
+ * - AppShell: Complete app structure
+ * - Header, StatusBar: App chrome
+ * - Container: Constrained width container
+ */
+export { VStack, HStack, Center, FullScreen, Spacer, Divider, type VStackProps, type HStackProps, type CenterProps, type FullScreenProps, type SpacerProps, type DividerProps, } from './stack.js';
+export { SplitPanel, ThreePanel, createSplitPanel, type SplitPanelProps, type SplitPanelState, type ThreePanelProps, type DividerStyle, } from './split-panel.js';
+export { Page, AppShell, StatusBar, Header, Container, type PageProps, type AppShellProps, type StatusBarProps, type HeaderProps, type ContainerProps, } from './app.js';
+export { Tabs, createTabs, TabPanel, VerticalTabs, LazyTabs, type Tab, type TabsOptions, type TabsState, type TabsProps, type TabPanelProps, type VerticalTabsOptions, type LazyTabsProps, } from './tabs.js';
+export { Collapsible, createCollapsible, Accordion, createAccordion, Details, ExpandableText, type CollapsibleOptions, type CollapsibleState, type CollapsibleProps, type AccordionSection, type AccordionOptions, type AccordionState, type AccordionProps, type DetailsProps, type ExpandableTextProps, } from './collapsible.js';
+export { ScrollArea, createScrollArea, VirtualList, createVirtualList, ScrollableText, LogViewer, type ScrollAreaOptions, type ScrollAreaState, type ScrollAreaProps, type VirtualListItem, type VirtualListOptions, type VirtualListState, type VirtualListProps, type ScrollableTextProps, type LogViewerOptions, } from './scroll-area.js';
+export { Grid, GridCell, SimpleGrid, AutoGrid, MasonryGrid, TemplateGrid, ResponsiveGrid, type GridTrackSize, type GridOptions, type GridCellOptions, type GridProps, type GridCellProps, type SimpleGridOptions, type AutoGridOptions, type MasonryGridOptions, type GridAreaDefinition, type TemplateGridOptions, type ResponsiveBreakpoint, type ResponsiveGridOptions, } from './grid.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/design-system/layout/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAGH,OAAO,EACL,MAAM,EACN,MAAM,EACN,MAAM,EACN,UAAU,EACV,MAAM,EACN,OAAO,EACP,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,YAAY,GAClB,MAAM,YAAY,CAAC;AAGpB,OAAO,EACL,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,YAAY,GAClB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,cAAc,GACpB,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,KAAK,GAAG,EACR,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,mBAAmB,EACxB,KAAK,aAAa,GACnB,MAAM,WAAW,CAAC;AAGnB,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,SAAS,EACT,eAAe,EACf,OAAO,EACP,cAAc,EACd,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,mBAAmB,GACzB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,SAAS,EACT,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,GACtB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,cAAc,EACd,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,GAC3B,MAAM,WAAW,CAAC"}

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

@@ -0,0 +1,34 @@
+/**
+ * Design System Layout - Layout utility components
+ *
+ * Basic Layouts:
+ * - VStack, HStack: Stack layouts with gap
+ * - Center: Center content
+ * - FullScreen: Fill terminal
+ * - Spacer, Divider: Layout helpers
+ *
+ * Split Layouts:
+ * - SplitPanel: Two-panel split
+ * - ThreePanel: Three-panel layout
+ *
+ * App Layouts:
+ * - Page: Single page with header/footer
+ * - AppShell: Complete app structure
+ * - Header, StatusBar: App chrome
+ * - Container: Constrained width container
+ */
+// Stack Layouts
+export { VStack, HStack, Center, FullScreen, Spacer, Divider, } from './stack.js';
+// Split Panel
+export { SplitPanel, ThreePanel, createSplitPanel, } from './split-panel.js';
+// App Layouts
+export { Page, AppShell, StatusBar, Header, Container, } from './app.js';
+// Tabs
+export { Tabs, createTabs, TabPanel, VerticalTabs, LazyTabs, } from './tabs.js';
+// Collapsible
+export { Collapsible, createCollapsible, Accordion, createAccordion, Details, ExpandableText, } from './collapsible.js';
+// Scroll Area
+export { ScrollArea, createScrollArea, VirtualList, createVirtualList, ScrollableText, LogViewer, } from './scroll-area.js';
+// Grid
+export { Grid, GridCell, SimpleGrid, AutoGrid, MasonryGrid, TemplateGrid, ResponsiveGrid, } from './grid.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/design-system/layout/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,gBAAgB;AAChB,OAAO,EACL,MAAM,EACN,MAAM,EACN,MAAM,EACN,UAAU,EACV,MAAM,EACN,OAAO,GAOR,MAAM,YAAY,CAAC;AAEpB,cAAc;AACd,OAAO,EACL,UAAU,EACV,UAAU,EACV,gBAAgB,GAKjB,MAAM,kBAAkB,CAAC;AAE1B,cAAc;AACd,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,GAMV,MAAM,UAAU,CAAC;AAElB,OAAO;AACP,OAAO,EACL,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,QAAQ,GAQT,MAAM,WAAW,CAAC;AAEnB,cAAc;AACd,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,SAAS,EACT,eAAe,EACf,OAAO,EACP,cAAc,GAUf,MAAM,kBAAkB,CAAC;AAE1B,cAAc;AACd,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,SAAS,GAUV,MAAM,kBAAkB,CAAC;AAE1B,OAAO;AACP,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,cAAc,GAaf,MAAM,WAAW,CAAC"}