╔═══════════════════════════════════════════════════════════════════════════════╗
║ ║
║ TAB LIFECYCLE ║
║ ║
║ "Just like browser tabs, but for documents" ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════════╝
How Tabs Work
VariableMD lets you open multiple documents at once, just like browser tabs. Each tab remembers exactly where you were.┌──────────────────────────────────────────────────────────────────────────────┐
│ TABS AT A GLANCE │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────┬────────┬────────┐ │
│ │ README │ config │[styles]│ <── Click any tab to switch │
│ └────────┴────────┴────────┘ │
│ │ │ │ │
│ v v v │
│ Each tab remembers: │
│ - What file you opened │
│ - Where you scrolled to │
│ - The file's header info │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
The Brick: Same Font Everywhere
Whether you are in a terminal or viewing a document, CodexMono keeps everything aligned.┌──────────────────────────────────────────────────────────────────────────────┐
│ THE BRICK EXTENDED TO DOCUMENTS │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ TERMINAL TAB DOCUMENT TAB │
│ ════════════ ════════════ │
│ │
│ ┌───────────────────────────┐ ┌───────────────────────────┐ │
│ │ │ │ │ │
│ │ $ ls -la │ │ # README │ │
│ │ drwxr-xr-x 5 user 160 │ │ │ │
│ │ -rw-r--r-- 1 user 42 │ │ ```bash │ │
│ │ │ │ npm install │ │
│ └───────────────────────────┘ │ ``` │ │
│ │ └───────────────────────────┘ │
│ │ │ │
│ └───────────────┬───────────────────┘ │
│ │ │
│ ┌───────┴───────┐ │
│ │ CodexMono │ │
│ │ (600 unit) │ │
│ └───────────────┘ │
│ │
│ SAME FONT = SAME ALIGNMENT = EASY TO READ │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
The Brick Principle: CodexMono (600-unit) monospace font ensures consistent character width across terminals and documents. Code blocks, tables, and ASCII art all line up perfectly.
Creating a Tab
When you open a file, a new tab appears.┌──────────────────────────────────────────────────────────────────────────────┐
│ TAB CREATION │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ You double-click "config.json" in the file explorer │
│ │
│ │ │
│ v │
│ │
│ ┌───────────────────┐ │
│ │ 1. Check Limit │ Is there room for another tab? │
│ └───────────────────┘ (Maximum: 10 tabs) │
│ │ │
│ v │
│ ┌───────────────────┐ │
│ │ 2. Create Tab │ Make a new container for the content │
│ └───────────────────┘ │
│ │ │
│ v │
│ ┌───────────────────┐ │
│ │ 3. Show Tab │ Display the new tab as active │
│ └───────────────────┘ │
│ │ │
│ v │
│ │
│ TAB BAR BEFORE: ┌────────┬────────┐ │
│ │ README │[styles]│ │
│ └────────┴────────┘ │
│ │
│ TAB BAR AFTER: ┌────────┬────────┬────────┐ │
│ │ README │ styles │[config]│ <── New tab active │
│ └────────┴────────┴────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Switching Tabs
Click any tab to switch. Your previous position is saved automatically.┌──────────────────────────────────────────────────────────────────────────────┐
│ TAB SWITCHING │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ BEFORE: Tab 2 active │
│ ┌──────┬────────┬──────┐ │
│ │ Tab1 │ [Tab2] │ Tab3 │ │
│ └──────┴────────┴──────┘ │
│ │ │
│ v │
│ ┌──────────────────────────────────┐ │
│ │ Tab2 Content │ │
│ │ (currently visible) │ │
│ └──────────────────────────────────┘ │
│ │
│ Click Tab3... │
│ │
│ ┌───────────────────┐ │
│ │ 1. Save Tab2 │ Remember scroll position, header state │
│ └───────────────────┘ │
│ │ │
│ v │
│ ┌───────────────────┐ │
│ │ 2. Hide Tab2 │ Content hidden but preserved │
│ └───────────────────┘ │
│ │ │
│ v │
│ ┌───────────────────┐ │
│ │ 3. Show Tab3 │ Restore Tab3's previous state │
│ └───────────────────┘ │
│ │ │
│ v │
│ │
│ AFTER: Tab 3 active │
│ ┌──────┬──────┬────────┐ │
│ │ Tab1 │ Tab2 │ [Tab3] │ │
│ └──────┴──────┴────────┘ │
│ │ │
│ v │
│ ┌──────────────────────────────────┐ │
│ │ Tab3 Content │ │
│ │ (now visible, exactly as left) │ │
│ └──────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
State Preservation: When you switch back to a tab, everything is exactly as you left it - scroll position, expanded sections, and header information.
Opening the Same File
If you open a file that is already in a tab, it just switches to that tab.┌──────────────────────────────────────────────────────────────────────────────┐
│ REUSING EXISTING TABS │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ Current tabs: │
│ ┌────────┬────────┬────────┐ │
│ │[README]│ config │ styles │ │
│ └────────┴────────┴────────┘ │
│ │
│ You open "config.json" from file explorer... │
│ │
│ │ │
│ v │
│ ┌────────────────────┐ │
│ │ Already open? │ │
│ │ config.json = YES │ │
│ └────────────────────┘ │
│ │ │
│ v │
│ ┌────────────────────┐ │
│ │ Switch to Tab 2 │ No new tab created │
│ └────────────────────┘ │
│ │ │
│ v │
│ │
│ Result: │
│ ┌────────┬────────┬────────┐ │
│ │ README │[config]│ styles │ <── Just switched, no duplicate │
│ └────────┴────────┴────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Tab Limit: 10 Maximum
A simple limit prevents clutter and keeps things fast.┌──────────────────────────────────────────────────────────────────────────────┐
│ TAB LIMIT │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐ │
│ │ 1 │ 2 │ 3 │ 4 │ 5 │ 6 │ 7 │ 8 │ 9 │10 │ <── 10 tabs (maximum) │
│ └───┴───┴───┴───┴───┴───┴───┴───┴───┴───┘ │
│ │
│ Try to open 11th file: │
│ │
│ ┌────────────────────────┐ │
│ │ Tab limit reached │ │
│ │ Close a tab first │ │
│ └────────────────────────┘ │
│ │
│ WHY 10? │
│ - Keeps the app fast │
│ - Encourages focus │
│ - Most users need 3-5 tabs │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
SMPC Principle: Simple limits prevent chaos. 10 tabs is enough for most workflows while keeping resource usage predictable.
Viewer Types
Different file types get different viewers, but all use CodexMono for code.┌──────────────────────────────────────────────────────────────────────────────┐
│ VIEWER TYPES │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ FILE EXTENSION VIEWER FONT │
│ ══════════════ ══════ ════ │
│ │
│ .md (Markdown) ──> Markdown Renderer ──> CodexMono (code blocks) │
│ │
│ .json ──> JSON Tree Viewer ──> CodexMono (all) │
│ │
│ .ts / .js ──> Syntax Highlighter ──> CodexMono (all) │
│ │
│ (git-diff) ──> Diff Viewer ──> CodexMono (all) │
│ │
│ ┌──────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ All viewers share: │ │
│ │ │ │
│ │ - CodexMono font for code and technical content │ │
│ │ - Same container structure │ │
│ │ - Same state preservation │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
The Complete Picture
┌──────────────────────────────────────────────────────────────────────────────┐
│ TAB LIFECYCLE SUMMARY │
├──────────────────────────────────────────────────────────────────────────────┤
│ │
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ │ │ │ │ │ │
│ │ CREATE │ ──────> │ ACTIVE │ ──────> │ SWITCH │ │
│ │ │ │ │ │ │ │
│ └─────────────┘ └──────┬──────┘ └──────┬──────┘ │
│ ^ │ │ │
│ │ │ │ │
│ │ v v │
│ │ ┌─────────────┐ ┌─────────────┐ │
│ │ │ │ │ │ │
│ └─────────────────┤ CLOSE │ <────── │ SAVED │ │
│ │ │ │ STATE │ │
│ └─────────────┘ └─────────────┘ │
│ │
│ │
│ Each tab: │
│ - Has a unique identity │
│ - Preserves its state when inactive │
│ - Uses CodexMono for consistent typography │
│ - Respects the 10-tab limit │
│ │
└──────────────────────────────────────────────────────────────────────────────┘
Key Points
Unique Identity
Each tab has a unique ID combining timestamp and counter. No two tabs can collide.
State Preservation
Header info, scroll position, and content state are saved when switching tabs.
Visual Alignment
CodexMono (600-unit) font used across all tabs for consistent character width.
Simple Limit
Maximum 10 tabs keeps the interface fast and focused.
╔═══════════════════════════════════════════════════════════════════════════════╗
║ ║
║ THE BRICK GUARANTEE ║
║ ║
║ Terminal tabs and document tabs share the same foundation: ║
║ CodexMono typography for predictable, aligned, readable content. ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════════╝