
=== button (9 stories) ===
# button

────────────────────────────────────────
## normal (30x5)
────────────────────────────────────────
╭ Submit ──╮
│          │
╰──────────╯

────────────────────────────────────────
## hover (30x5)
────────────────────────────────────────
╭ Submit ──╮
│          │
╰──────────╯

────────────────────────────────────────
## pressed (30x5)
────────────────────────────────────────
╭ Submit ──╮
│          │
╰──────────╯

────────────────────────────────────────
## focused (30x5)
────────────────────────────────────────
╭ Submit ──╮
│          │
╰──────────╯

────────────────────────────────────────
## disabled (30x5)
────────────────────────────────────────
╭ Submit ──╮
│          │
╰──────────╯

────────────────────────────────────────
## short_label (30x5)
────────────────────────────────────────
╭ OK ──╮
│      │
╰──────╯

────────────────────────────────────────
## long_label (25x5)
────────────────────────────────────────
╭ Click to Continue ──╮
│                     │
╰─────────────────────╯

────────────────────────────────────────
## icon_normal (30x5)
────────────────────────────────────────
✕

────────────────────────────────────────
## icon_hover (30x5)
────────────────────────────────────────
✕


=== text_button (4 stories) ===
# text_button

────────────────────────────────────────
## default (15x3)
────────────────────────────────────────
Learn more

────────────────────────────────────────
## focused (15x3)
────────────────────────────────────────
Learn more

────────────────────────────────────────
## pressed (15x3)
────────────────────────────────────────
Learn more

────────────────────────────────────────
## disabled (15x3)
────────────────────────────────────────
Learn more


=== checkbox (6 stories) ===
# checkbox

────────────────────────────────────────
## unchecked (10x3)
────────────────────────────────────────
[ ]

────────────────────────────────────────
## checked (10x3)
────────────────────────────────────────
[x]

────────────────────────────────────────
## labeled_unchecked (20x3)
────────────────────────────────────────
[ ] Accept terms

────────────────────────────────────────
## labeled_checked (20x3)
────────────────────────────────────────
[x] Accept terms

────────────────────────────────────────
## labeled_right (20x3)
────────────────────────────────────────
[x] Remember me

────────────────────────────────────────
## focused (10x3)
────────────────────────────────────────
[x]


=== switch (7 stories) ===
# switch

────────────────────────────────────────
## off (10x3)
────────────────────────────────────────
 [--*] OFF

────────────────────────────────────────
## on (10x3)
────────────────────────────────────────
 [*--] ON

────────────────────────────────────────
## disabled_off (10x3)
────────────────────────────────────────
 [--*] OFF

────────────────────────────────────────
## disabled_on (10x3)
────────────────────────────────────────
 [*--] ON

────────────────────────────────────────
## focused (10x3)
────────────────────────────────────────
 [*--] ON

────────────────────────────────────────
## labeled_off (20x3)
────────────────────────────────────────
Dark mode [--*] OFF

────────────────────────────────────────
## labeled_on (20x3)
────────────────────────────────────────
Dark mode [*--] ON


=== radio (6 stories) ===
# radio

────────────────────────────────────────
## single_selected (15x3)
────────────────────────────────────────
(*) Option A

────────────────────────────────────────
## single_unselected (15x3)
────────────────────────────────────────
( ) Option A

────────────────────────────────────────
## group_first (15x6)
────────────────────────────────────────
(*) Small


( ) Medium

────────────────────────────────────────
## group_middle (15x6)
────────────────────────────────────────
( ) Small


(*) Medium

────────────────────────────────────────
## group_focused (15x6)
────────────────────────────────────────
(*) Small


( ) Medium

────────────────────────────────────────
## group_horizontal (30x3)
────────────────────────────────────────
( ) Small  (*) Medium  ( ) Lar


=== listbox (4 stories) ===
# listbox

────────────────────────────────────────
## first_selected (21x15)
────────────────────────────────────────
┌─────────┐
│> Apple  │
│         │
│         │
│  Banana │
│         │
│         │
│  Cherry │
│         │
│         │
│  Date   │
│         │
│         │
└─────────┘

────────────────────────────────────────
## middle_selected (21x15)
────────────────────────────────────────
┌─────────┐
│  Apple  │
│         │
│         │
│> Banana │
│         │
│         │
│  Cherry │
│         │
│         │
│  Date   │
│         │
│         │
└─────────┘

────────────────────────────────────────
## with_focus (21x15)
────────────────────────────────────────
┌─────────┐
│  Apple  │
│         │
│         │
│  Banana │
│         │
│         │
│> Cherry │
│         │
│         │
│  Date   │
│         │
│         │
└─────────┘

────────────────────────────────────────
## with_disabled (21x11)
────────────────────────────────────────
┌───────────┐
│> Enabled  │
│           │
│           │
│  Disabled │
│           │
│           │
│  Enabled  │
│           │
│           │
└───────────┘


=== select (4 stories) ===
# select

────────────────────────────────────────
## closed (21x5)
────────────────────────────────────────
┌──────────────┐
│ JavaScript v │
└──────────────┘

────────────────────────────────────────
## closed_ts (21x5)
────────────────────────────────────────
┌──────────────┐
│ TypeScript v │
└──────────────┘

────────────────────────────────────────
## open (21x13)
────────────────────────────────────────
┌─────────────┐
│ JavaScript ^│
│             │
└─────────────┘
 JavaScript


 TypeScript

 Python

────────────────────────────────────────
## placeholder (21x5)
────────────────────────────────────────
┌─────────────┐
│ Choose... v │
└─────────────┘


=== tabs (5 stories) ===
# tabs

────────────────────────────────────────
## default_home (41x9)
────────────────────────────────────────
╭───────────────────────────╮
│ Home   Profile   Settings │
│                           │
│                           │
│ Welcome to Home           │
│                           │
│                           │
│                           │
╰───────────────────────────╯

────────────────────────────────────────
## default_profile (41x9)
────────────────────────────────────────
╭───────────────────────────╮
│ Home   Profile   Settings │
│                           │
│                           │
│ User Profile              │
│                           │
│                           │
╰───────────────────────────╯

────────────────────────────────────────
## default_focused (41x9)
────────────────────────────────────────
╭───────────────────────────╮
│ Home   Profile   Settings │
│                           │
│                           │
│ Home (Settings focused)   │
│                           │
│                           │
│                           │
╰───────────────────────────╯

────────────────────────────────────────
## underline (41x11)
────────────────────────────────────────
 Home   Profile   Settings


 Underline style content

────────────────────────────────────────
## boxed (41x11)
────────────────────────────────────────
 Home   Profile   Settings


 Boxed style content


=== accordion (3 stories) ===
# accordion

────────────────────────────────────────
## collapsed (31x9)
────────────────────────────────────────
┌──────────────┐
│[+] Section 1 │
│              │
│              │
└──────────────┘
┌──────────────┐
│[+] Section 2 │
│              │
│              │

────────────────────────────────────────
## first_expanded (31x15)
────────────────────────────────────────
┌──────────────┐
│[-] Section 1 │
│              │
│              │
│Content 1     │
│              │
│              │
│              │
└──────────────┘
┌──────────────┐
│[+] Section 2 │
│              │
│              │
└──────────────┘

────────────────────────────────────────
## second_expanded (31x15)
────────────────────────────────────────
┌──────────────┐
│[+] Section 1 │
│              │
│              │
└──────────────┘
┌──────────────┐
│[-] Section 2 │
│              │
│              │
│Content 2     │
│              │
│              │
│              │
└──────────────┘


=== menu (4 stories) ===
# menu

────────────────────────────────────────
## no_focus (23x13)
────────────────────────────────────────
┌────────────────────┐
│                    │
│                    │
│                    │
│--------------------│
│                    │
└────────────────────┘

────────────────────────────────────────
## first_focused (23x13)
────────────────────────────────────────
┌────────────────────┐
│                    │
│                    │
│                    │
│--------------------│
│                    │
└────────────────────┘

────────────────────────────────────────
## middle_focused (23x13)
────────────────────────────────────────
┌────────────────────┐
│                    │
│                    │
│                    │
│--------------------│
│                    │
└────────────────────┘

────────────────────────────────────────
## disabled_focused (23x13)
────────────────────────────────────────
┌────────────────────┐
│                    │
│                    │
│                    │
│--------------------│
│                    │
└────────────────────┘


=== context_menu (2 stories) ===
# context_menu

────────────────────────────────────────
## default (21x7)
────────────────────────────────────────
┌──────────┐
│          │
│          │
└──────────┘

────────────────────────────────────────
## focused (21x7)
────────────────────────────────────────
┌──────────┐
│          │
│          │
└──────────┘


=== menubar (3 stories) ===
# menubar

────────────────────────────────────────
## all_closed (25x3)
────────────────────────────────────────
 File  Edit   View

────────────────────────────────────────
## file_open (25x3)
────────────────────────────────────────
 File  Edit   View

────────────────────────────────────────
## edit_open (25x3)
────────────────────────────────────────
 File  Edit   View


=== input (7 stories) ===
# input

────────────────────────────────────────
## idle (25x5)
────────────────────────────────────────
╭──────────────────╮
│value             │
│                  │
╰──────────────────╯

────────────────────────────────────────
## focused (25x5)
────────────────────────────────────────
╭──────────────────╮
│value             │
│                  │
╰──────────────────╯

────────────────────────────────────────
## editing (25x5)
────────────────────────────────────────
╭──────────────────╮
│value_            │
│                  │
╰──────────────────╯

────────────────────────────────────────
## disabled (25x5)
────────────────────────────────────────
╭──────────────────╮
│value             │
│                  │
╰──────────────────╯

────────────────────────────────────────
## placeholder (25x5)
────────────────────────────────────────
╭──────────────────╮
│Enter name...     │
│                  │
│                  │
╰──────────────────╯

────────────────────────────────────────
## plain_idle (15x3)
────────────────────────────────────────
text

────────────────────────────────────────
## plain_focused (15x3)
────────────────────────────────────────
text


=== textarea (4 stories) ===
# textarea

────────────────────────────────────────
## idle (31x9)
────────────────────────────────────────
╭───────────────────────╮
│Line 1                 │
│Line 2                 │
│                       │
│                       │
│                       │
╰───────────────────────╯

────────────────────────────────────────
## focused (31x9)
────────────────────────────────────────
╭───────────────────────╮
│Line 1                 │
│Line 2                 │
│                       │
│                       │
│                       │
╰───────────────────────╯

────────────────────────────────────────
## editing (31x9)
────────────────────────────────────────
╭───────────────────────╮
│Line 1                 │
│Line 2_                │
│                       │
│                       │
│                       │
╰───────────────────────╯

────────────────────────────────────────
## placeholder (31x9)
────────────────────────────────────────
╭───────────────────────╮
│Enter description...   │
│                       │
│                       │
╰───────────────────────╯


=== label (3 stories) ===
# label

────────────────────────────────────────
## basic (15x3)
────────────────────────────────────────
Email

────────────────────────────────────────
## required (15x3)
────────────────────────────────────────
Password *

────────────────────────────────────────
## with_for_id (15x3)
────────────────────────────────────────
Username *


=== fieldset (2 stories) ===
# fieldset

────────────────────────────────────────
## basic (30x7)
────────────────────────────────────────
╭─────────────────────────╮
│                         │
│ Contact Info            │
│                         │
│                         │
│ Name: John              │
│                         │

────────────────────────────────────────
## with_fields (25x11)
────────────────────────────────────────
╭──────────────╮
│              │
│ Login        │
│              │
│ Username *   │
│              │
│              │
│ [__________] │
│ Password *   │
│              │
│              │


=== error_message (3 stories) ===
# error_message

────────────────────────────────────────
## visible (30x3)
────────────────────────────────────────
!This field is required

────────────────────────────────────────
## hidden (30x3)
────────────────────────────────────────


────────────────────────────────────────
## email_error (30x3)
────────────────────────────────────────
!Invalid email format


=== help_text (2 stories) ===
# help_text

────────────────────────────────────────
## basic (30x3)
────────────────────────────────────────
Enter your email address

────────────────────────────────────────
## format_hint (25x3)
────────────────────────────────────────
Format: YYYY-MM-DD


=== form_field (4 stories) ===
# form_field

────────────────────────────────────────
## basic (25x5)
────────────────────────────────────────
Email
[user@example.com]

────────────────────────────────────────
## required (25x5)
────────────────────────────────────────
Password *

[**********]

────────────────────────────────────────
## with_help (35x7)
────────────────────────────────────────
Username
[__________]

3-20 characters, alphanumeric

────────────────────────────────────────
## with_error (30x7)
────────────────────────────────────────
Email *

[invalid-email]


!Invalid email format


=== progress (8 stories) ===
# progress

────────────────────────────────────────
## 0_percent (25x3)
────────────────────────────────────────
[░░░░░░░░░░░░░░░░░░] 0%

────────────────────────────────────────
## 25_percent (25x3)
────────────────────────────────────────
[████░░░░░░░░░░░░░░] 25%

────────────────────────────────────────
## 50_percent (25x3)
────────────────────────────────────────
[█████████░░░░░░░░░] 50%

────────────────────────────────────────
## 75_percent (25x3)
────────────────────────────────────────
[█████████████░░░░░] 75%

────────────────────────────────────────
## 100_percent (25x3)
────────────────────────────────────────
[██████████████████] 100%

────────────────────────────────────────
## with_label (25x3)
────────────────────────────────────────
[█████████░░░░░░░░░] 50%

────────────────────────────────────────
## style_blocks (25x3)
────────────────────────────────────────
[█████████░░░░░░░░░] 50%

────────────────────────────────────────
## style_dots (25x3)
────────────────────────────────────────
[█████████░░░░░░░░░] 50%


=== spinner (4 stories) ===
# spinner

────────────────────────────────────────
## frame_0 (10x3)
────────────────────────────────────────
|

────────────────────────────────────────
## frame_1 (10x3)
────────────────────────────────────────
/

────────────────────────────────────────
## frame_2 (10x3)
────────────────────────────────────────
-

────────────────────────────────────────
## with_label (20x3)
────────────────────────────────────────
| Loading...


=== loading_dots (4 stories) ===
# loading_dots

────────────────────────────────────────
## frame_0 (15x3)
────────────────────────────────────────
.

────────────────────────────────────────
## frame_1 (15x3)
────────────────────────────────────────
..

────────────────────────────────────────
## frame_2 (15x3)
────────────────────────────────────────
...

────────────────────────────────────────
## with_label (20x3)
────────────────────────────────────────
Processing...


=== card (2 stories) ===
# card

────────────────────────────────────────
## simple (20x6)
────────────────────────────────────────
╭──────────────╮
│              │
│ Card content │
│              │
│              │
╰──────────────╯

────────────────────────────────────────
## with_title (20x7)
────────────────────────────────────────
╭──────────────╮
│              │
│ Title        │
│ Card content │
│              │
│              │
╰──────────────╯


=== panel (1 stories) ===
# panel

────────────────────────────────────────
## simple (20x6)
────────────────────────────────────────
┌───────────────┐
│               │
│ Panel content │
│               │
│               │
└───────────────┘


=== divider (2 stories) ===
# divider

────────────────────────────────────────
## horizontal (15x5)
────────────────────────────────────────
Above
───────────────
Below

────────────────────────────────────────
## vertical (20x5)
────────────────────────────────────────
Left | Right


=== bordered (4 stories) ===
# bordered

────────────────────────────────────────
## rounded (15x5)
────────────────────────────────────────
╭─────────╮
│         │
│ Rounded │
│         │
╰─────────╯

────────────────────────────────────────
## single (15x5)
────────────────────────────────────────
┌────────┐
│        │
│ Single │
│        │
└────────┘

────────────────────────────────────────
## double (15x5)
────────────────────────────────────────
╔════════╗
║        ║
║ Double ║
║        ║
╚════════╝

────────────────────────────────────────
## ascii (15x5)
────────────────────────────────────────
+-------+
|       |
| ASCII |
|       |
+-------+


=== text (4 stories) ===
# text

────────────────────────────────────────
## plain (15x3)
────────────────────────────────────────
Hello World

────────────────────────────────────────
## bold (15x3)
────────────────────────────────────────
Bold Text

────────────────────────────────────────
## colored (15x3)
────────────────────────────────────────
Colored

────────────────────────────────────────
## with_bg (15x3)
────────────────────────────────────────
Highlight


=== grid (5 stories) ===
# grid

────────────────────────────────────────
## basic_3col (20x5)
────────────────────────────────────────
A B C

D E F

────────────────────────────────────────
## unequal_columns (30x5)
────────────────────────────────────────
Sidebar Main Content

Footer  Footer

────────────────────────────────────────
## with_border (20x7)
────────────────────────────────────────
╭─────╮
│     │
│ 1 2 │
│     │
│ 3 4 │
│     │
╰─────╯

────────────────────────────────────────
## 2x2 (24x7)
────────────────────────────────────────
┌─┐┌─┐
│1││2│
└─┘└─┘
┌─┐┌─┐
│3││4│
└─┘└─┘

────────────────────────────────────────
## 3x2 (30x7)
────────────────────────────────────────
┌─┐┌─┐┌─┐
│A││B││C│
└─┘└─┘└─┘
┌─┐┌─┐┌─┐
│D││E││F│
└─┘└─┘└─┘


=== grid_item (2 stories) ===
# grid_item

────────────────────────────────────────
## column_span (25x5)
────────────────────────────────────────
Header (span 3)

A     B     C

────────────────────────────────────────
## positioned (20x5)
────────────────────────────────────────
        At (2,1)
At (1,2)


=== grid_area (2 stories) ===
# grid_area

────────────────────────────────────────
## basic_layout (25x8)
────────────────────────────────────────
Header

Sidebar Main

Footer

────────────────────────────────────────
## dashboard (35x10)
────────────────────────────────────────
Navigation

┌────┐   Main Content Area
│Menu│
│    │
└────┘

Footer


=== view (3 stories) ===
# view

────────────────────────────────────────
## default_column (15x5)
────────────────────────────────────────
Line 1

Line 2

Line 3

────────────────────────────────────────
## row_direction (15x3)
────────────────────────────────────────
A B C

────────────────────────────────────────
## with_padding (20x6)
────────────────────────────────────────
┌────────────────┐
│                │
│ Padded content │
│                │
│                │
└────────────────┘


=== sparkline (3 stories) ===
# sparkline

────────────────────────────────────────
## basic (15x3)
────────────────────────────────────────
▁▃▂▅▄▇▆█

────────────────────────────────────────
## with_width (15x3)
────────────────────────────────────────
▁▁▁▁▁▁▅▃█▂

────────────────────────────────────────
## constant (15x3)
────────────────────────────────────────
▄▄▄▄▄


=== gauge (4 stories) ===
# gauge

────────────────────────────────────────
## 50_percent (25x3)
────────────────────────────────────────
[██████░░░░░░░] 50%

────────────────────────────────────────
## with_label (25x3)
────────────────────────────────────────
CPU [███████░░░] 75%

────────────────────────────────────────
## high_usage (25x3)
────────────────────────────────────────
MEM [█████████░] 95%

────────────────────────────────────────
## thin_style (25x3)
────────────────────────────────────────
[███████░░░░░░] 60%


=== stat (2 stories) ===
# stat

────────────────────────────────────────
## basic (20x3)
────────────────────────────────────────
Total: 32.0 GiB

────────────────────────────────────────
## with_width (25x3)
────────────────────────────────────────
Used    : 13.0 GiB


=== meter (3 stories) ===
# meter

────────────────────────────────────────
## cpu_low (30x3)
────────────────────────────────────────
C0  ████░░░░░░░░░░░░ 25%

────────────────────────────────────────
## cpu_medium (30x3)
────────────────────────────────────────
C1  ████████░░░░░░░░ 56%

────────────────────────────────────────
## cpu_high (30x3)
────────────────────────────────────────
C2  ██████████████░░ 92%


=== table (2 stories) ===
# table

────────────────────────────────────────
## basic (30x4)
────────────────────────────────────────
   Pid Name        CPU%
  1234 process1    12.3
  5678 process2     5.1

────────────────────────────────────────
## selected (30x4)
────────────────────────────────────────
   Pid Name        CPU%
  1234 process1    12.3
  5678 process2     5.1


=== titled_box (2 stories) ===
# titled_box

────────────────────────────────────────
## basic (25x7)
────────────────────────────────────────
╭──────────────────╮
│                  │
│ mem              │
│ Content here     │
│                  │
│                  │
╰──────────────────╯

────────────────────────────────────────
## with_stats (25x7)
────────────────────────────────────────
╭──────────────────╮
│                  │
│ cpu              │
│ Total: 100%      │
│ User: 45%        │
│                  │
╰──────────────────╯


=== modal (15 stories) ===
# modal

────────────────────────────────────────
## simple_overlay (20x5)
────────────────────────────────────────
BASE
OVER

────────────────────────────────────────
## modal_box (25x7)
────────────────────────────────────────
╭───────────────╮
│               │
│ Modal Content │
│               │
│               │
╰───────────────╯

────────────────────────────────────────
## bordered_content (15x5)
────────────────────────────────────────
┌─────────┐
│         │
│ Content │
│         │
└─────────┘

────────────────────────────────────────
## text_overlay (15x5)
────────────────────────────────────────
AAAA
BB

────────────────────────────────────────
## dialog_layout (25x9)
────────────────────────────────────────
╭───────────────╮
│               │
│ Title         │
│               │
│ Message text  │
│               │
│               │
│ [OK] [Cancel] │
│               │

────────────────────────────────────────
## centered_content (17x5)
────────────────────────────────────────
     CENTER

────────────────────────────────────────
## centered_modal (21x9)
────────────────────────────────────────
      ╭───────╮
      │       │
      │ Modal │
      │       │
      ╰───────╯

────────────────────────────────────────
## stacked_modal (25x9)
────────────────────────────────────────
Background
Content Here

...........
       ╭────────╮
       │        │
       │ Dialog │
       │        │
       ╰────────╯

────────────────────────────────────────
## nested_modals (25x9)
────────────────────────────────────────
App Content

      ╭──────────╮
      │          │
      │ Confirm? │
      │          │
      ╰──────────╯

────────────────────────────────────────
## full_overlay (31x13)
────────────────────────────────────────
╭──────────────────────────────
│
│ Confirm
│ -----------------------------
│ Save changes?
│
│ ╭ Yes ─╮
│ │      │
│ ╰──────╯
│
╰──────────────────────────────

────────────────────────────────────────
## alert_modal (25x11)
────────────────────────────────────────
╭────────────────────────
│
│ ! Error !
│
│ -----------------------
│
│  Connection lost
│
│               ╭ OK ─╮
│               │     │
│               ╰─────╯

────────────────────────────────────────
## confirm_dialog (31x13)
────────────────────────────────────────
╭──────────────────────────────
│
│ Confirm
│ -----------------------------
│
│  Delete this file?
│
│
│ ╭ Yes ─╮
│ │      │
│ ╰──────╯
│
╰──────────────────────────────

────────────────────────────────────────
## confirm_dialog_custom (31x13)
────────────────────────────────────────
╭──────────────────────────────
│
│ Unsaved Changes
│
│
│ -----------------------------
│
│  Save changes?
│
│ ╭ Save ─╮               ╭ Dis
│ │       │               │
│ ╰───────╯               ╰────
│

────────────────────────────────────────
## command_launcher (24x15)
────────────────────────────────────────
╭────────╮
│        │
│ > open │
│        │
│ * Open │
│        │
│        │
╰────────╯

────────────────────────────────────────
## spotlight_top_center (20x10)
────────────────────────────────────────
    ╭─────────╮
    │         │
    │ [Popup] │
    │         │
    ╰─────────╯
Background
Line 2

Line 3


=== search_input (5 stories) ===
# search_input

────────────────────────────────────────
## empty (30x3)
────────────────────────────────────────
> Type to search..._

────────────────────────────────────────
## with_query (30x3)
────────────────────────────────────────
> hello_

────────────────────────────────────────
## custom_prompt (30x3)
────────────────────────────────────────
$ test_

────────────────────────────────────────
## no_cursor (30x3)
────────────────────────────────────────
> query

────────────────────────────────────────
## custom_placeholder (30x3)
────────────────────────────────────────
> Search files..._


=== highlight_text (4 stories) ===
# highlight_text

────────────────────────────────────────
## no_highlight (20x3)
────────────────────────────────────────
hello world

────────────────────────────────────────
## partial_highlight (20x3)
────────────────────────────────────────
hello world

────────────────────────────────────────
## full_highlight (20x3)
────────────────────────────────────────
hello

────────────────────────────────────────
## custom_colors (20x3)
────────────────────────────────────────
rainbow


=== search_result (7 stories) ===
# search_result

────────────────────────────────────────
## normal (25x3)
────────────────────────────────────────
document.txt

────────────────────────────────────────
## selected (25x3)
────────────────────────────────────────
document.txt

────────────────────────────────────────
## with_highlight (25x3)
────────────────────────────────────────
document.txt

────────────────────────────────────────
## selected_with_highlight (25x3)
────────────────────────────────────────
document.txt

────────────────────────────────────────
## with_icon (25x3)
────────────────────────────────────────
 📄 main.mbt

────────────────────────────────────────
## selected_with_icon (25x3)
────────────────────────────────────────
 📄 main.mbt

────────────────────────────────────────
## full_featured (25x3)
────────────────────────────────────────
 🌙 moonbit.txt


=== nested (3 stories) ===
# nested

────────────────────────────────────────
## row_in_column (20x5)
────────────────────────────────────────
Header
LeftRight
Footer

────────────────────────────────────────
## column_in_row (25x5)
────────────────────────────────────────
Top   |A
Bottom B

────────────────────────────────────────
## deep_3_levels (20x5)
────────────────────────────────────────
┌──┐
│1A│
│2B│
└──┘


=== flex (3 stories) ===
# flex

────────────────────────────────────────
## equal_3_columns (30x4)
────────────────────────────────────────
╭─╮╭─╮╭─╮
│A││B││C│
╰─╯╰─╯╰─╯

────────────────────────────────────────
## ratio_1_2_1 (32x4)
────────────────────────────────────────
╭─╮╭─╮╭─╮
│1││2││1│
╰─╯╰─╯╰─╯

────────────────────────────────────────
## fixed_and_flex (30x4)
────────────────────────────────────────
╭──────╮╭────────╮
│Fix   ││Flexible│
╰──────╯╰────────╯


=== sidebar (2 stories) ===
# sidebar

────────────────────────────────────────
## left_fixed (30x6)
────────────────────────────────────────
╭──────╮╭───────╮
│Nav   ││Content│
│      ││       │
│      ││       │
╰──────╯╰───────╯

────────────────────────────────────────
## dual (30x6)
────────────────────────────────────────
╭────╮╭────╮╭────╮
│L   ││Main││R   │
│    ││    ││    │
│    ││    ││    │
╰────╯╰────╯╰────╯


=== header_footer (2 stories) ===
# header_footer

────────────────────────────────────────
## basic (25x10)
────────────────────────────────────────
╭───────╮
│Header │
╰───────╯
╭───────╮
│Content│
╰───────╯
╭───────╮
│Footer │
╰───────╯

────────────────────────────────────────
## with_sidebar (30x8)
────────────────────────────────────────
╭────────────╮
│Header      │
╰────────────╯
╭──────╮╭────╮
│Nav   ││Main│
╰──────╯╰────╯


=== cjk (4 stories) ===
# cjk

────────────────────────────────────────
## japanese_bordered (18x4)
────────────────────────────────────────
┌────────────┐
│日本語テスト│
└────────────┘

────────────────────────────────────────
## mixed_width (20x5)
────────────────────────────────────────
Hello 世界

Width: 漢字

ABC あいう

────────────────────────────────────────
## aligned_columns (20x6)
────────────────────────────────────────
名前値
────────────────────
項目A100
項目B200

────────────────────────────────────────
## emoji (20x3)
────────────────────────────────────────
Status:✓ Done


=== edge (5 stories) ===
# edge

────────────────────────────────────────
## narrow (5x4)
────────────────────────────────────────
┌─┐
│X│
└─┘

────────────────────────────────────────
## short (15x3)
────────────────────────────────────────
┌──┐
│Hi│
└──┘

────────────────────────────────────────
## overflow_text (20x4)
────────────────────────────────────────
┌───────────────────
│This is a very long
│
│

────────────────────────────────────────
## many_items (15x3)
────────────────────────────────────────
ABCDE

────────────────────────────────────────
## empty_column (10x4)
────────────────────────────────────────
┌┐
└┘


=== dashboard (3 stories) ===
# dashboard

────────────────────────────────────────
## cpu_panel (30x8)
────────────────────────────────────────
╭───────────────────────╮
│                       │
│ cpu                   │
│ C0  ████░░░░░░░ 45%   │
│ C1  ███████░░░░ 72%   │
│ C2  ██░░░░░░░░░ 23%   │
│                       │
╰───────────────────────╯

────────────────────────────────────────
## stats_row (40x3)
────────────────────────────────────────
CPU: 45%MEM: 8.2GSWP: 0.0G

────────────────────────────────────────
## mini (35x14)
────────────────────────────────────────
╭──────────────╮╭──────────────╮
│cpu           ││mem           │
│[█████░░░] 65%││[███░░░░░] 42%│
│              ││              │
╰──────────────╯╰──────────────╯
╭──────────────────────────────╮
│net                           │
│rx: 1.2 MB/s                  │
│                              │
│                              │
│tx: 0.5 MB/s                  │
│                              │
│                              │
╰──────────────────────────────╯


=== deep (3 stories) ===
# deep

────────────────────────────────────────
## nested_borders_4 (20x9)
────────────────────────────────────────
┌──────────┐
│┌────────┐│
││┌──────┐││
│││┌────┐│││
││││Deep││││
│││└────┘│││
││└──────┘││
│└────────┘│
└──────────┘

────────────────────────────────────────
## alternating_5_levels (15x4)
────────────────────────────────────────
XY

────────────────────────────────────────
## tree_structure (25x7)
────────────────────────────────────────
root/
├─ src/

│  ├─ main.mbt

│  └─ lib.mbt


=== ide (2 stories) ===
# ide

────────────────────────────────────────
## three_pane (40x14)
────────────────────────────────────────
 File  Edit  View
Explorer    ┌───────────┐
─────────   │main.mbt   │
 src/       │fn main {  │
            │           │
   main.mbt │           │
            │  println()│
            │           │
            │}          │
            │           │
            └───────────┘
 Ln 1, Col 1 | UTF-8

────────────────────────────────────────
## editor_terminal (30x12)
────────────────────────────────────────
┌─────────────┐
│// Editor    │
│             │
│let x = 42   │
│             │
│             │
│             │
└─────────────┘
┌─────────────┐
│$ moon run   │
│             │
│             │


=== form (2 stories) ===
# form

────────────────────────────────────────
## login_dialog (26x10)
────────────────────────────────────────
╭──────────────────────╮
│                      │
│ Login                │
│ ──────────────────── │
│ User: [_______]      │
│ Pass: [*******]      │
│ ──────────────────── │
│  [Cancel]  [ OK ]    │
│                      │
╰──────────────────────╯

────────────────────────────────────────
## settings (25x9)
────────────────────────────────────────
Settings
────────────────────
Theme:    [Dark  ▼]
Font:     [Mono  ▼]
[x] Auto-save


=== split (4 stories) ===
# split

────────────────────────────────────────
## horizontal (20x8)
────────────────────────────────────────
┌───────────┐
│Top Pane   │
│           │
└───────────┘
┌───────────┐
│Bottom Pane│
│           │
└───────────┘

────────────────────────────────────────
## vertical (24x7)
────────────────────────────────────────
┌────┐┌─────┐
│Left││Right│
│    ││     │
│    ││     │
│    ││     │
└────┘└─────┘

────────────────────────────────────────
## quad (20x8)
────────────────────────────────────────
┌──┐┌──┐
│TL││TR│
└──┘└──┘
┌──┐┌──┐
│BL││BR│
└──┘└──┘

────────────────────────────────────────
## asymmetric (30x6)
────────────────────────────────────────
┌───┐┌───┐
│30%││70%│
│   ││   │
│   ││   │
└───┘└───┘


=== cards (3 stories) ===
# cards

────────────────────────────────────────
## horizontal_list (35x5)
────────────────────────────────────────
╭────────╮ ╭────────╮ ╭────────╮
│        │ │        │ │        │
│ Card 1 │ │ Card 2 │ │ Card 3 │
╰────────╯ ╰────────╯ ╰────────╯

────────────────────────────────────────
## vertical_list (18x15)
────────────────────────────────────────
╭────────╮
│        │
│ Item 1 │
│        │
│ Desc   │
│        │
╰────────╯

╭────────╮
│        │
│ Item 2 │
│        │
│ Desc   │
│        │
╰────────╯

────────────────────────────────────────
## sectioned (20x10)
────────────────────────────────────────
╭──────────────╮
│              │
│ Title        │
│ ──────────── │
│ Content      │
│ ──────────── │
│ [Actions]    │
│              │
╰──────────────╯


=== status (3 stories) ===
# status

────────────────────────────────────────
## simple (20x5)
────────────────────────────────────────
Content
Ready

────────────────────────────────────────
## multi_section (35x5)
────────────────────────────────────────
Editor
 INSERT │ main.mbt │ 42:10

────────────────────────────────────────
## vim_style (20x6)
────────────────────────────────────────
~ VIM

~
~
:wq


=== real (3 stories) ===
# real

────────────────────────────────────────
## htop (40x10)
────────────────────────────────────────
1   ██░░░░ 35%2   ███░░░ 62%
3   █░░░░░ 18%4   █████░ 91%
Mem[███████░░░░░░░░░░░] 42%
────────────────────
PID   CPU%  CMD
 1234  12.3  node

────────────────────────────────────────
## chat_app (30x10)
────────────────────────────────────────
  # general

 Alice: Hello!


 Bob: Hi there


 Alice: How are you?

────────────────────────────────────────
## file_manager (40x12)
────────────────────────────────────────
 /home/user/projects
┌─────────┐┌──────────┐
│Left Pane││Right Pane│
│         ││          │
│         ││ test/    │
│ docs/   ││          │
│         ││ build/   │
│ src/    ││          │
│         ││          │
└─────────┘└──────────┘
 5 items | 1 selected



