Copy
+=========================================================================+
|| ||
|| THE BRICK PRINCIPLE ||
|| ||
|| "CodexMono is The Brick - the fundamental unit that enables ||
|| Monokinetics: unified Human + AI experience through ||
|| predictable, trustable visual alignment." ||
|| ||
|| When you navigate Back/Forward in documents, it feels as ||
|| natural as Up/Down arrow in terminal. When you view JSON, ||
|| HTML, or Markdown, the monospace foundation remains constant. ||
|| ||
+=========================================================================+
Navigation: Terminal-Inspired Document History
Copy
+-------------------------------------------------------------------------+
| TERMINAL AND DOCUMENT NAVIGATION - SAME PATTERN |
+-------------------------------------------------------------------------+
| |
| Terminal History: Document History: |
| +-------------------+ +-------------------+ |
| | Command Stack | | File Stack | |
| | | | | |
| | [ls -la] <--+- Up | [doc1.md] <--+- Back |
| | [cd /home] | | [doc2.md] | |
| | [git status] | | [doc3.md] <--+- Current |
| | -->--+- Down | -->--+- Forward |
| +-------------------+ +-------------------+ |
| |
| Same concept: stack-based history with bidirectional traversal |
| |
+-------------------------------------------------------------------------+
How Navigation Works
Copy
+-------------------------------------------------------------------------+
| NAVIGATION FLOW |
+-------------------------------------------------------------------------+
| |
| File History (Stack): |
| +---------------------------------------------------------------+ |
| | doc1.md doc2.md doc3.md doc4.md doc5.md | |
| +---------------------------------------------------------------+ |
| ^ |
| | |
| Current Position |
| |
| Operations: |
| +---------------------------------------------------------------+ |
| | Back: Move left, load previous file | |
| | Forward: Move right, load next file | |
| | New File: Truncate forward history, add to end | |
| +---------------------------------------------------------------+ |
| |
| Tab-Aware: Each history entry remembers its tab |
| Navigation can switch tabs AND load file in one action |
| |
+-------------------------------------------------------------------------+
Keyboard Shortcuts
Copy
+-------------------------------------------------------------------------+
| NAVIGATION SHORTCUTS |
+-------------------------------------------------------------------------+
| |
| Back Navigation: |
| +-------------------------------------------+ |
| | Platform | Shortcut | |
| +-------------+-----------------------------+ |
| | macOS | Cmd + Left Arrow | |
| | Windows | Alt + Left Arrow | |
| | All | Ctrl + [ | |
| +-------------------------------------------+ |
| |
| Forward Navigation: |
| +-------------------------------------------+ |
| | Platform | Shortcut | |
| +-------------+-----------------------------+ |
| | macOS | Cmd + Right Arrow | |
| | Windows | Alt + Right Arrow | |
| | All | Ctrl + ] | |
| +-------------------------------------------+ |
| |
+-------------------------------------------------------------------------+
Auto-Refresh with NIIA Watcher
Copy
+-------------------------------------------------------------------------+
| AUTO-REFRESH FLOW |
+-------------------------------------------------------------------------+
| |
| NIIA Watcher (Rust Daemon) |
| | |
| | File change detected |
| v |
| +----------------------------+ |
| | Is this the current file? | |
| +----------------------------+ |
| | |
| No --+-> Skip (irrelevant change) |
| Yes v |
| +----------------------------+ |
| | Is editor open? | |
| +----------------------------+ |
| | |
| Yes -+-> Skip (user is editing) |
| No v |
| +----------------------------+ |
| | Debounce (500ms) | |
| +----------------------------+ |
| | |
| v |
| +----------------------------+ |
| | 1. Save scroll position | |
| | 2. Reload file | |
| | 3. Restore scroll position | |
| +----------------------------+ |
| |
+-------------------------------------------------------------------------+
Rendering: Multiple File Types, One Interface
Copy
+-------------------------------------------------------------------------+
| UNIFIED RENDERING PATTERN |
+-------------------------------------------------------------------------+
| |
| Terminal: VariableMD: |
| +-------------------+ +-------------------+ |
| | PTY Output | | File Content | |
| | | | | | | |
| | v | | v | |
| | VTE Parser | | Type Detector | |
| | | | | | | |
| | v | | v | |
| | Cell Grid | | Renderer | |
| | | | | | | |
| | v | | v | |
| | xterm.js | | DOM Container | |
| +-------------------+ +-------------------+ |
| |
| Unified interface, specialized implementations |
| |
+-------------------------------------------------------------------------+
Renderer Selection
Copy
+-------------------------------------------------------------------------+
| HOW FILE TYPE IS DETECTED |
+-------------------------------------------------------------------------+
| |
| Input: File content + extension |
| | |
| v |
| +-----------------------------------+ |
| | Gitignore file? | (.gitignore, .dockerignore) |
| +-----------------------------------+ |
| | |
| Yes -+-> Gitignore Viewer |
| | |
| No v |
| +-----------------------------------+ |
| | JSON file? | (.json, .jsonc) |
| +-----------------------------------+ |
| | |
| Yes -+-> JSON Viewer (tree view) |
| | |
| No v |
| +-----------------------------------+ |
| | HTML file? | (.html, .htm) |
| +-----------------------------------+ |
| | |
| Yes -+-> HTML Viewer (sandboxed) |
| | |
| No v |
| +-----------------------------------+ |
| | Image file? | (.png, .jpg, .gif, .svg) |
| +-----------------------------------+ |
| | |
| Yes -+-> Image Viewer |
| | |
| No v |
| +-----------------------------------+ |
| | Code file? | (.ts, .js, .py, .rs, etc.) |
| +-----------------------------------+ |
| | |
| Yes -+-> Syntax Highlighter |
| | |
| No v |
| +-----------------------------------+ |
| | Default: Markdown | |
| +-----------------------------------+ |
| |
+-------------------------------------------------------------------------+
CodexMono Typography: Visual Unity
Copy
+=========================================================================+
|| ||
|| THE BRICK'S VISUAL FORM ||
|| ||
|| Terminal (xterm.js): VariableMD: ||
|| +-------------------+ +-------------------+ ||
|| | +-+-+-+-+-+-+-+ | | +-+-+-+-+-+-+-+ | ||
|| | |H|e|l|l|o| |W| | | |H|e|l|l|o| |W| | ||
|| | +-+-+-+-+-+-+-+ | | +-+-+-+-+-+-+-+ | ||
|| | CodexMono 12px | | CodexMono 12px | ||
|| | Cell Grid | | Inline Flow | ||
|| +-------------------+ +-------------------+ ||
|| ||
|| Same font family ensures visual consistency ||
|| Character widths align (especially for ASCII art) ||
|| ||
+=========================================================================+
Font Stack Architecture
Copy
+-------------------------------------------------------------------------+
| FONT FALLBACK CHAIN |
+-------------------------------------------------------------------------+
| |
| +---------------------------------------------------------------+ |
| | Priority | Font | Purpose | |
| +---------+-----------------+----------------------------------+ |
| | 1 | CodexMono | Primary Latin | |
| | 2 | CodexMono EA | East Asian (CJK) | |
| | 3 | Emoji Font | Emoji rendering | |
| | 4 | SF Mono | macOS fallback | |
| | 5 | Monaco | macOS legacy | |
| | 6 | Menlo | macOS classic | |
| | 7 | Consolas | Windows fallback | |
| | 8 | Courier New | Cross-platform fallback | |
| | 9 | monospace | Generic fallback | |
| +---------------------------------------------------------------+ |
| |
+-------------------------------------------------------------------------+
Responsive Typography
Copy
+-------------------------------------------------------------------------+
| HEADING SCALE SYSTEM |
+-------------------------------------------------------------------------+
| |
| Progressive heading sizes from H1 (largest) to H6 (smallest): |
| |
| +-------------------------------------------+ |
| | Level | Scale | If base = 12px | |
| +-------+---------+-------------------------+ |
| | H1 | 2.0x | 24px | |
| | H2 | 1.8x | 21.6px | |
| | H3 | 1.6x | 19.2px | |
| | H4 | 1.4x | 16.8px | |
| | H5 | 1.2x | 14.4px | |
| | H6 | 1.0x | 12px | |
| +-------------------------------------------+ |
| |
| All sizes scale proportionally when base font changes |
| |
+-------------------------------------------------------------------------+
Narrow Mode Adaptation
Copy
+-------------------------------------------------------------------------+
| NARROW MODE (< 500px container) |
+-------------------------------------------------------------------------+
| |
| Wide Container (600px): Narrow Container (400px): |
| +-------------------+ +-------------------+ |
| | # Large Heading | | # Large Heading | |
| | | | | |
| | Body text flows | | Body text | |
| | across the full | | flows across | |
| | width naturally | | narrower space | |
| +-------------------+ +-------------------+ |
| |
| Narrow mode adjusts heading sizes to fit container width |
| Font size = Container Width / Characters Per Line |
| |
+-------------------------------------------------------------------------+
Summary
Copy
+=========================================================================+
|| ||
|| NAVIGATION & INTEGRATION ||
|| ||
|| Navigation System: ||
|| +---------------------------------------------------------------+ ||
|| | - Stack-based history (like terminal command history) | ||
|| | - Tab-aware (remembers which tab each file was in) | ||
|| | - Keyboard shortcuts (Cmd/Alt + Arrow, Ctrl+[/]) | ||
|| | - Auto-refresh with NIIA Watcher integration | ||
|| +---------------------------------------------------------------+ ||
|| ||
|| Renderer System: ||
|| +---------------------------------------------------------------+ ||
|| | - Unified interface for all file types | ||
|| | - Automatic type detection (JSON, HTML, Image, Code, MD) | ||
|| | - Same pattern as terminal VTE parsing | ||
|| +---------------------------------------------------------------+ ||
|| ||
|| CodexMono Typography: ||
|| +---------------------------------------------------------------+ ||
|| | - Same monospace font across terminal and documents | ||
|| | - Fallback chain ensures consistent rendering | ||
|| | - Responsive heading scales | ||
|| | - Narrow mode for smaller containers | ||
|| +---------------------------------------------------------------+ ||
|| ||
|| Result: Visual boundary between terminal and documents disappears, ||
|| creating a unified reading and navigation experience. ||
|| ||
+=========================================================================+
The Brick in Action
Copy
+-------------------------------------------------------------------------+
| WHY THIS MATTERS |
+-------------------------------------------------------------------------+
| |
| When you copy an ASCII diagram from terminal: |
| |
| Terminal: |
| +-------------------+ |
| | +---+ +---+ | |
| | | A |--->| B | | |
| | +---+ +---+ | |
| +-------------------+ |
| |
| And paste it into a Markdown document: |
| |
| VariableMD: |
| +-------------------+ |
| | +---+ +---+ | |
| | | A |--->| B | | |
| | +---+ +---+ | |
| +-------------------+ |
| |
| It renders IDENTICALLY. |
| |
| This is The Brick: predictable visual behavior across all contexts. |
| |
+-------------------------------------------------------------------------+