┌═════════════════════════════════════════════════════════════════════════┐
│ │
│ 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
┌─────────────────────────────────────────────────────────────────────────┐
│ 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
┌─────────────────────────────────────────────────────────────────────────┐
│ 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
┌─────────────────────────────────────────────────────────────────────────┐
│ 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
┌─────────────────────────────────────────────────────────────────────────┐
│ 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
┌─────────────────────────────────────────────────────────────────────────┐
│ 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
┌─────────────────────────────────────────────────────────────────────────┐
│ 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
┌═════════════════════════════════════════════════════════════════════════┐
│ │
│ 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
┌─────────────────────────────────────────────────────────────────────────┐
│ 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
┌─────────────────────────────────────────────────────────────────────────┐
│ 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
┌─────────────────────────────────────────────────────────────────────────┐
│ 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
┌═════════════════════════════════════════════════════════════════════════┐
│ │
│ 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
┌─────────────────────────────────────────────────────────────────────────┐
│ 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. │
│ │
└─────────────────────────────────────────────────────────────────────────┘