Copy
+===============================================================================+
| |
| 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.Copy
+-----------------------------------------------------------------------------+
| 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.Copy
+-----------------------------------------------------------------------------+
| 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.Copy
+-----------------------------------------------------------------------------+
| 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.Copy
+-----------------------------------------------------------------------------+
| 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.Copy
+-----------------------------------------------------------------------------+
| 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.Copy
+-----------------------------------------------------------------------------+
| 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.Copy
+-----------------------------------------------------------------------------+
| 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
Copy
+-----------------------------------------------------------------------------+
| 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.
Copy
+===============================================================================+
| |
| THE BRICK GUARANTEE |
| |
| Terminal tabs and document tabs share the same foundation: |
| CodexMono typography for predictable, aligned, readable content. |
| |
+===============================================================================+