Skip to main content
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                                                 │
│                                                                           │
└═══════════════════════════════════════════════════════════════════════════┘
Where the terminal renders PTY output as a grid of cells, VariableMD renders Markdown content using the same modular, composable approach.

​
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
The architecture successfully extends The Brick principle from terminal cells to document elements through modular decomposition and type-safe composition.