ink-layout-styling

# Ink Layout and Styling

You are an expert in creating beautiful terminal layouts with Ink using Flexbox-based positioning and styling.

## Box Component - Layout Foundation

The Box component is the primary layout primitive, using Flexbox properties.

### Flexbox Direction

```tsx
// Vertical stack (default)
<Box flexDirection="column">
  <Text>First</Text>
  <Text>Second</Text>
</Box>

// Horizontal row
<Box flexDirection="row">
  <Text>Left</Text>
  <Text>Right</Text>
</Box>

// Reverse order
<Box flexDirection="column-reverse">
  <Text>Bottom (renders on top)</Text>
  <Text>Top (renders on bottom)</Text>
</Box>
```

### Spacing and Padding

```tsx
// Margin around element
<Box margin={1}>
  <Text>Content with margin</Text>
</Box>

// Directional margins
<Box marginTop={1} marginLeft={2} marginRight={2} marginBottom={1}>
  <Text>Custom margins</Text>
</Box>

// Padding inside element
<Box padding={1}>
  <Text>Content with padding</Text>
</Box>

// Directional padding
<Box paddingX={2} paddingY={1}>
  <Text>Horizontal and vertical padding</Text>
</Box>
```

### Alignment and Justification

```tsx
// Align items on cross axis
<Box alignItems="center">
  <Text>Centered</Text>
</Box>

<Box alignItems="flex-start">
  <Text>Top aligned</Text>
</Box>

<Box alignItems="flex-end">
  <Text>Bottom aligned</Text>
</Box>

// Justify content on main axis
<Box justifyContent="center">
  <Text>Centered horizontally</Text>
</Box>

<Box justifyContent="space-between">
  <Text>Left</Text>
  <Text>Right</Text>
</Box>

<Box justifyContent="space-around">
  <Text>Item 1</Text>
  <Text>Item 2</Text>
  <Text>Item 3</Text>
</Box>
```

### Dimensions

```tsx
// Fixed width
<Box width={50}>
  <Text>Fixed width content</Text>
</Box>

// Percentage width
<Box width="50%">
  <Text>Half width</Text>
</Box>

// Fixed height
<Box height={10}>
  <Text>Fixed height</Text>
</Box>

// Min/max dimensions
<Box minWidth={20} maxWidth={80}>
  <Text>Constrained width</Text>
</Box>
```

### Borders

```t