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.