THE CENTER“CodexMono is The Brick - the fundamental unit that enables Monokinetics: unified Human + AI experience through predictable, trustable visual alignment.”Module Architecture implements The Brick principle by decomposing document rendering into 14 specialized modules - each a brick in the larger structure.
The Brick Extended
┌═══════════════════════════════════════════════════════════════════════════┐
│ │
│ THE BRICK CONCEPT │
│ │
│ Terminal World: Document World: │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ PTY Cell │ │ VMD Element │ │
│ │ - character │ ======> │ - content │ │
│ │ - colors │ EXTENDS │ - styling │ │
│ │ - attributes │ │ - interactions │ │
│ └──────────────────┘ └──────────────────┘ │
│ │
│ Both share: │
│ - Monospace rendering (CodexMono) │
│ - Modular composition │
│ - Event-driven interaction │
│ - Theme-aware styling │
│ │
└═══════════════════════════════════════════════════════════════════════════┘
Module Decomposition
14 specialized modules, each handling a specific aspect:┌─────────────────────────────────────────────────────────────────────────┐
│ VARIABLEMD MODULE ARCHITECTURE │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────┐ │
│ │ CORE │ │
│ │ (Orchestrator) │ │
│ └────────┬─────────┘ │
│ │ │
│ ┌──────────┬──────────┼──────────┬──────────┐ │
│ │ │ │ │ │ │
│ v v v v v │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Styles │ │ Box │ │ Nav │ │ Editors │ │Renderers│ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ │ │ │ │ │
│ │ │ v v │
│ │ │ ┌───────┴──────────┐ │
│ │ │ │ Edit + Utils │ │
│ │ │ └──────────────────┘ │
│ │ │ │ │
│ v v v │
│ ┌──────────────────────────────────────────────────┐ │
│ │ Typography (CodexMono) │ │
│ └──────────────────────────────────────────────────┘ │
│ │ │
│ v │
│ ┌────────────────────┐ │
│ │ Supporting │ │
│ │ - Context Menu │ │
│ │ - Color │ │
│ │ - Emoji │ │
│ │ - Header │ │
│ │ - Diff │ │
│ │ - Settings │ │
│ └────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Module Categories
┌─────────────────────────────────────────────────────────────────────────┐
│ 14 MODULES BY CATEGORY │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ CORE ORCHESTRATION │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ Core │ Coordinates all modules, manages state │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ VISUAL RENDERING │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ Styles │ CSS injection, dynamic theming │ │
│ │ Box │ ASCII art containers, drag/resize │ │
│ │ Renderers │ HTML, JSON, Image rendering │ │
│ │ Diff │ Side-by-side comparisons │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ INTERACTION │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ Navigation │ History, back/forward, file loading │ │
│ │ Editors │ Monaco, code editing integration │ │
│ │ Context │ Right-click menus │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ UTILITIES │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ Color │ Theme color adjustments │ │
│ │ Emoji │ Cross-platform emoji handling │ │
│ │ Header │ File metadata display │ │
│ │ Settings │ User preferences │ │
│ │ Utils │ Shared helper functions │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Context Pattern
Each module communicates through typed Context interfaces - enabling clean separation without tight coupling:┌─────────────────────────────────────────────────────────────────────────┐
│ CONTEXT FLOW │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ NativeMdViewer Instance │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ State: container, current file, history, tabs │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │ │
│ │ Creates context objects │
│ v │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ 9 Context Types: │ │
│ │ │ │
│ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │
│ │ │ Style │ │ Box │ │ Navigation │ │ │
│ │ │ Context │ │ Context │ │ Context │ │ │
│ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │
│ │ │ │
│ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │
│ │ │ Editor │ │ Renderer │ │ Header │ │ │
│ │ │ Context │ │ Context │ │ Context │ │ │
│ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │
│ │ │ │
│ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │
│ │ │ Diff │ │ Settings │ │Context Menu │ │ │
│ │ │ Context │ │ Context │ │ Context │ │ │
│ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │ │
│ │ Passed to module functions │
│ v │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ Module Functions receive only what they need │ │
│ │ - No global state access │ │
│ │ - Type-safe contracts │ │
│ │ - Easy to test in isolation │ │
│ └───────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Initialization Flow
┌─────────────────────────────────────────────────────────────────────────┐
│ STARTUP SEQUENCE │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Step 1: Container Discovery │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Find the VMD container element │ │
│ │ │ │ │
│ │ └──-> Success: Ready to render │ │
│ │ └──-> Failure: Show error │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │ │
│ v │
│ Step 2: Tab Manager (if multi-tab mode) │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Initialize tab management for multiple documents │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │ │
│ v │
│ Step 3: Typography Setup │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Load saved font settings │ │
│ │ Inject base CSS styles │ │
│ │ Apply CodexMono typography │ │
│ │ Configure responsive breakpoints │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │ │
│ v │
│ Step 4: Protocol Resolution (via Tauri) │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Resolve monolex:// and niia:// paths │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │ │
│ v │
│ Step 5: Event Binding │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Mouse interactions, keyboard shortcuts │ │
│ │ Context menus, tab navigation │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │ │
│ v │
│ Step 6: Global Registration │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Register renderMarkdown() for external calls │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │ │
│ v │
│ Step 7: Auto-Refresh │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Connect to NIIA Watcher for live updates │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │ │
│ v │
│ [READY TO RENDER] │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Style Injection
┌─────────────────────────────────────────────────────────────────────────┐
│ THREE-LAYER STYLE SYSTEM │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Layer 1: Base Styles │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Core VMD classes │ │
│ │ Heading styles (h1-h6) │ │
│ │ Box wrappers │ │
│ │ Base responsive rules │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ Layer 2: Dynamic Styles │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ User font preferences │ │
│ │ Font size, weight, line height │ │
│ │ CodexMono for code/ASCII │ │
│ │ CSS custom properties (--vmd-unit) │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ Layer 3: Responsive Styles │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Container queries for narrow mode │ │
│ │ Adaptive typography scaling │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Tauri Integration
┌─────────────────────────────────────────────────────────────────────────┐
│ PROTOCOL PATH HANDLING │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Supported Paths: │
│ ┌──────────────────────────────┬───────────────────────────────┐ │
│ │ /absolute/path/file.md │ Direct file system │ │
│ │ monolex://path/file.md │ Monolex protocol │ │
│ │ niia://path/file.md │ NIIA protocol │ │
│ │ project://path/file.md │ Project-relative │ │
│ └──────────────────────────────┴───────────────────────────────┘ │
│ │
│ Resolution Flow: │
│ │
│ Input Path │
│ │ │
│ v │
│ ┌───────────────────┐ │
│ │ Protocol Check │ │
│ │ monolex:// ? │──-> Resolve via Tauri backend │
│ │ niia:// ? │──-> Resolve via Tauri backend │
│ └───────────────────┘ │
│ │ │
│ v │
│ ┌───────────────────┐ │
│ │ File Existence │ ──-> Tauri check_file command │
│ └───────────────────┘ │
│ │ │
│ v │
│ ┌───────────────────┐ │
│ │ Read Content │ ──-> Tauri read_file command │
│ └───────────────────┘ │
│ │ │
│ v │
│ Render Document │
│ │
└─────────────────────────────────────────────────────────────────────────┘
File Type Support
┌─────────────────────────────────────────────────────────────────────────┐
│ SUPPORTED FILE TYPES │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ CODE FILES (36 types): │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ Programming: js, ts, py, rs, go, java, cpp, c, swift, kotlin │ │
│ │ Config: yaml, toml, ini, env, properties, gradle │ │
│ │ Other: sql, sh, xml, css, scss, diff, patch │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ DOCUMENT FILES: │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ Markdown: md, mdx │ │
│ │ HTML: html, htm │ │
│ │ Data: json │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ MEDIA FILES: │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ Images: png, jpg, gif, svg, webp, ico, bmp │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ SPECIAL FILES: │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ Git: .gitignore, .gitattributes │ │
│ │ Package: .npmignore, .dockerignore │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
Summary
┌═══════════════════════════════════════════════════════════════════════════┐
│ │
│ VARIABLEMD: EXTENDING THE BRICK │
│ │
│ THE CENTER teaches us that the Brick is a universal unit. │
│ In Terminal: PTY cells. In Documents: VMD elements. │
│ │
│ The architecture achieves this through: │
│ │
│ 1. Module Decomposition (14 modules) │
│ - Each handles one aspect │
│ - SMPC: Simplicity through separation │
│ │
│ 2. Context Pattern │
│ - Type-safe dependency injection │
│ - Clean interface contracts │
│ │
│ 3. Tauri Integration │
│ - Native file system access │
│ - Protocol path handling │
│ │
│ 4. CodexMono Typography │
│ - Consistent monospace rendering │
│ - Terminal-document visual unity │
│ │
└═══════════════════════════════════════════════════════════════════════════┘
Brick Verification
Terminal Cell: VMD Element:
┌──────────────┐ ┌──────────────┐
│ character: A │ │ content: A │
│ color: green │ ==========> │ style: theme │
│ bold: true │ ISOMORPHIC │ font: Mono │
└──────────────┘ └──────────────┘
Both are:
- Atomic rendering units
- Theme-aware
- Monospace-rendered
- Event-driven