feat: add kitty-inspired layout system with 7 layout modes

docs/KITTY_LAYOUTS.md

@@ -0,0 +1,227 @@
+# Kitty-Inspired Layouts
+
+> Window layout system for the Workspace IDE, inspired by the [kitty terminal emulator](https://sw.kovidgoyal.net/kitty/overview/#layouts).
+
+---
+
+## Overview
+
+The Workspace IDE supports **7 kitty-inspired layout modes** that control how panes are arranged within a workspace window. You can switch layouts via the layout selector in the top bar or by pressing **Ctrl+Shift+L** to cycle through them.
+
+All layouts dynamically rearrange existing panes — no panes are created or destroyed when switching layouts.
+
+---
+
+## Available Layouts
+
+### Stack
+
+Displays a **single pane** using all available space. Other panes are hidden behind it and accessible via pane tabs at the top.
+
+```
+┌──────────────────────────────────┐
+│                                  │
+│                                  │
+│         Active Pane              │
+│                                  │
+│                                  │
+└──────────────────────────────────┘
+```
+
+**Use case:** Focus on a single task without distraction.
+
+---
+
+### Tall
+
+Displays one (or more) **full-height pane(s)** on the left. Remaining panes are stacked vertically on the right.
+
+```
+┌──────────────┬───────────────┐
+│              │               │
+│              │               │
+│              ├───────────────┤
+│    Main      │    Side 1     │
+│              ├───────────────┤
+│              │    Side 2     │
+│              │               │
+└──────────────┴───────────────┘
+```
+
+**Options:**
+| Option | Default | Description |
+|--------|---------|-------------|
+| `bias` | 50 | Width percentage for main pane(s), 10–90 |
+| `fullSize` | 1 | Number of full-height main panes |
+| `mirrored` | false | Place main pane(s) on the right |
+
+**Use case:** Code editor on the left with preview/console stacked on the right.
+
+---
+
+### Fat
+
+Displays one (or more) **full-width pane(s)** on top. Remaining panes are tiled horizontally on the bottom.
+
+```
+┌──────────────────────────────┐
+│            Main              │
+│                              │
+├─────────┬──────────┬─────────┤
+│ Side 1  │  Side 2  │ Side 3  │
+│         │          │         │
+└─────────┴──────────┴─────────┘
+```
+
+**Options:** Same as Tall layout (bias, fullSize, mirrored).
+
+**Use case:** Wide editor on top with terminal, console, and preview below.
+
+---
+
+### Grid
+
+Displays panes in a **balanced grid** with all panes roughly the same size.
+
+```
+┌─────────┬──────────┬─────────┐
+│         │          │         │
+│         │          │         │
+├─────────┼──────────┼─────────┤
+│         │          │         │
+│         │          │         │
+└─────────┴──────────┴─────────┘
+```
+
+The grid automatically computes the optimal number of rows and columns based on the pane count.
+
+**Use case:** Monitoring multiple outputs simultaneously (editor, preview, console, shell).
+
+---
+
+### Splits
+
+The most **flexible layout**. Panes are arranged using the existing recursive split tree. This is the default layout and preserves manual split arrangements.
+
+```
+┌──────────────┬───────────────┐
+│              │               │
+│              ├───────┬───────┤
+│              │       │       │
+│              ├───────┴───────┤
+│              │               │
+└──────────────┴───────────────┘
+```
+
+**Options:**
+| Option | Default | Description |
+|--------|---------|-------------|
+| `splitAxis` | horizontal | Default split direction: `horizontal`, `vertical`, or `auto` |
+
+**Use case:** Custom arrangements for complex workflows.
+
+---
+
+### Horizontal
+
+All panes shown **side by side** (columns).
+
+```
+┌─────────┬──────────┬─────────┐
+│         │          │         │
+│         │          │         │
+│         │          │         │
+│         │          │         │
+│         │          │         │
+└─────────┴──────────┴─────────┘
+```
+
+**Use case:** Comparing files or outputs side by side.
+
+---
+
+### Vertical
+
+All panes shown **one below the other** (rows).
+
+```
+┌──────────────────────────────┐
+│                              │
+├──────────────────────────────┤
+│                              │
+├──────────────────────────────┤
+│                              │
+└──────────────────────────────┘
+```
+
+**Use case:** Stacking editor, output, and terminal in a single column.
+
+---
+
+## Keyboard Shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| `Ctrl+Shift+L` | Cycle to next layout |
+
+---
+
+## Configuration
+
+See [`kitty.conf`](../kitty.conf) in the project root for the full configuration reference, including:
+
+- Enabling/disabling specific layouts
+- Layout-specific options (bias, full_size, mirrored)
+- Keyboard shortcut mappings
+- Window resizing controls
+- Split management shortcuts
+
+---
+
+## Architecture
+
+### Layout Engine (`src/layouts/kittyLayouts.ts`)
+
+The layout engine converts between a flat list of panes and a `PaneSplit` tree:
+
+1. **`collectPanes(layout)`** — Recursively flattens a layout tree into an ordered list of panes.
+2. **`applyKittyLayout(layout, config)`** — Takes the current layout tree and a `KittyLayoutConfig`, extracts all panes, and rebuilds the tree according to the selected layout algorithm.
+
+### State Management
+
+Layout state is managed in the Zustand store (`workspaceStore.ts`):
+
+- `kittyLayout: KittyLayoutConfig` — Current layout configuration
+- `enabledLayouts: KittyLayoutType[]` — List of available layouts
+- `activePaneIndex: number` — Active pane index for Stack layout
+- `setKittyLayout(type)` — Switch to a specific layout
+- `updateKittyLayoutConfig(config)` — Update layout options (bias, mirrored, etc.)
+- `cycleLayout()` — Advance to the next enabled layout
+
+### Components
+
+- **`LayoutSelector`** (`src/components/layout/LayoutSelector.tsx`) — Dropdown in the top bar for selecting layouts and configuring options.
+- **`WorkspaceLayout`** (`src/components/layout/WorkspaceLayout.tsx`) — Renders the layout tree; handles Stack mode by showing only the active pane.
+
+---
+
+## Types
+
+```typescript
+type KittyLayoutType =
+  | 'stack'
+  | 'tall'
+  | 'fat'
+  | 'grid'
+  | 'splits'
+  | 'horizontal'
+  | 'vertical';
+
+interface KittyLayoutConfig {
+  type: KittyLayoutType;
+  bias: number;        // 10–90, percentage split for Tall/Fat
+  fullSize: number;    // Number of full-size panes for Tall/Fat
+  mirrored: boolean;   // Reverse main/side positions for Tall/Fat
+  splitAxis: 'horizontal' | 'vertical' | 'auto';  // Default axis for Splits
+}
+```

kitty.conf

@@ -0,0 +1,164 @@
+# Workspace IDE - Kitty-Inspired Layout Configuration
+# ===================================================
+#
+# This file configures the kitty-inspired layout system for the Workspace IDE.
+# Layouts define how panes are arranged within a workspace window.
+#
+# Reload configuration: The IDE reads this on startup; changes take effect
+# after reloading the page or switching layouts.
+#
+# Syntax: key value
+# Comments start with #
+
+# ─── Enabled Layouts ────────────────────────────────────────────────
+# Comma-separated list of layout names. The first layout is the default.
+# Available: stack, tall, fat, grid, splits, horizontal, vertical
+# Use "all" to enable every layout.
+enabled_layouts all
+
+# ─── Layout Cycling ─────────────────────────────────────────────────
+# Keyboard shortcut to cycle through enabled layouts.
+# Default: ctrl+shift+l
+map ctrl+shift+l next_layout
+
+# ─── Stack Layout ───────────────────────────────────────────────────
+# Displays a single pane using all available space.
+# Other panes are hidden behind it. Switch between them via pane tabs.
+#
+# ┌──────────────────────────────────┐
+# │                                  │
+# │         Active Pane              │
+# │                                  │
+# └──────────────────────────────────┘
+
+# ─── Tall Layout ────────────────────────────────────────────────────
+# Full-height pane(s) on the left, remaining panes stacked on the right.
+#
+# Options:
+#   bias       - Percentage of width for the main pane(s) (10-90, default: 50)
+#   full_size  - Number of full-height panes (default: 1)
+#   mirrored   - If true, main pane(s) on the right (default: false)
+#
+# enabled_layouts tall:bias=50;full_size=1;mirrored=false
+#
+# ┌──────────────┬───────────────┐
+# │              │               │
+# │              │               │
+# │              ├───────────────┤
+# │   Main       │   Side 1     │
+# │              ├───────────────┤
+# │              │   Side 2     │
+# │              │               │
+# └──────────────┴───────────────┘
+
+# ─── Fat Layout ─────────────────────────────────────────────────────
+# Full-width pane(s) on top, remaining panes tiled horizontally on bottom.
+#
+# Options:
+#   bias       - Percentage of height for the main pane(s) (10-90, default: 50)
+#   full_size  - Number of full-width panes (default: 1)
+#   mirrored   - If true, main pane(s) on the bottom (default: false)
+#
+# enabled_layouts fat:bias=50;full_size=1;mirrored=false
+#
+# ┌──────────────────────────────┐
+# │           Main               │
+# │                              │
+# ├─────────┬──────────┬─────────┤
+# │ Side 1  │  Side 2  │ Side 3  │
+# │         │          │         │
+# └─────────┴──────────┴─────────┘
+
+# ─── Grid Layout ────────────────────────────────────────────────────
+# Balanced grid with all panes the same size.
+#
+# ┌─────────┬──────────┬─────────┐
+# │         │          │         │
+# │         │          │         │
+# ├─────────┼──────────┼─────────┤
+# │         │          │         │
+# │         │          │         │
+# └─────────┴──────────┴─────────┘
+
+# ─── Splits Layout ──────────────────────────────────────────────────
+# The most flexible layout. Panes are arranged via recursive splits.
+# This is the default layout for manual pane management.
+#
+# Options:
+#   split_axis - Default split direction: horizontal, vertical, or auto
+#
+# enabled_layouts splits:split_axis=horizontal
+#
+# ┌──────────────┬───────────────┐
+# │              │               │
+# │              ├───────┬───────┤
+# │              │       │       │
+# │              ├───────┴───────┤
+# │              │               │
+# └──────────────┴───────────────┘
+
+# ─── Horizontal Layout ──────────────────────────────────────────────
+# All panes shown side by side (columns).
+#
+# ┌─────────┬──────────┬─────────┐
+# │         │          │         │
+# │         │          │         │
+# │         │          │         │
+# │         │          │         │
+# └─────────┴──────────┴─────────┘
+
+# ─── Vertical Layout ────────────────────────────────────────────────
+# All panes shown one below the other (rows).
+#
+# ┌──────────────────────────────┐
+# │                              │
+# ├──────────────────────────────┤
+# │                              │
+# ├──────────────────────────────┤
+# │                              │
+# └──────────────────────────────┘
+
+# ─── Layout Action Shortcuts ────────────────────────────────────────
+# These shortcuts control layout-specific behavior.
+
+# Decrease/increase the number of full-size panes (Tall/Fat layouts)
+map ctrl+[ layout_action decrease_num_full_size_windows
+map ctrl+] layout_action increase_num_full_size_windows
+
+# Toggle or set mirrored mode (Tall/Fat layouts)
+map ctrl+/ layout_action mirror toggle
+
+# Adjust bias (Tall/Fat layouts) - cycles through percentages
+map ctrl+. layout_action bias 50 62 70
+map ctrl+, layout_action bias 62
+
+# ─── Window Resizing ────────────────────────────────────────────────
+# Resize the active pane within the current layout.
+map ctrl+left  resize_window narrower
+map ctrl+right resize_window wider
+map ctrl+up    resize_window taller
+map ctrl+down  resize_window shorter
+
+# Reset all panes to default sizes
+map ctrl+home resize_window reset
+
+# ─── Split Management (Splits Layout) ──────────────────────────────
+# Create new panes by splitting the current one.
+map f5 launch --location=hsplit
+map f6 launch --location=vsplit
+map f4 launch --location=split
+
+# Rotate the current split axis
+map f7 layout_action rotate
+
+# Move the active pane in the indicated direction
+map shift+up    move_window up
+map shift+left  move_window left
+map shift+right move_window right
+map shift+down  move_window down
+
+# Switch focus to the neighboring pane
+map ctrl+left  neighboring_window left
+map ctrl+right neighboring_window right
+map ctrl+up    neighboring_window up
+map ctrl+down  neighboring_window down