890 lines
33 KiB
Markdown
890 lines
33 KiB
Markdown
# µFrame — A DSL for Rich Terminal UIs rendered as ASCII and Micron
|
||
|
||
## Overview
|
||
|
||
**µFrame** is a declarative DSL that compiles to rich terminal
|
||
interfaces built from Unicode box-drawing, block elements, braille
|
||
patterns, and careful spatial layout. It produces two outputs from
|
||
the same source:
|
||
|
||
1. **Plain ASCII** — the raw visual layout, viewable in any terminal
|
||
2. **Micron `.mu`** — the same visual layout enhanced with Micron's
|
||
color, styling, links, and interactive form fields
|
||
|
||
Both outputs share the same rich character art. Micron doesn't
|
||
degrade the visuals — it *elevates* them. The ASCII art passes
|
||
through verbatim into the `.mu` file, and Micron tags wrap it
|
||
with color, emphasis, alignment, and interactivity that plain
|
||
text cannot express.
|
||
|
||
```
|
||
┌──────────────────────────────────┐
|
||
┌───▶│ Plain ASCII │
|
||
│ │ Box drawing, braille, blocks │
|
||
│ │ No color, no links, no forms │
|
||
.uf ──▶ Parser ──▶ IR ─┤ └──────────────────────────────────┘
|
||
│ ┌──────────────────────────────────┐
|
||
└───▶│ Micron .mu │
|
||
│ Same visual base │
|
||
│ + `Fhex color`f │
|
||
│ + `!bold`! `*italic`* │
|
||
│ + `[links`/dest] │
|
||
│ + `<form fields`> │
|
||
│ + `c alignment`a │
|
||
└──────────────────────────────────┘
|
||
```
|
||
|
||
The relationship is additive:
|
||
|
||
```
|
||
Plain ASCII = layout + structure + data viz
|
||
Micron = layout + structure + data viz + color + style + interaction
|
||
```
|
||
|
||
---
|
||
|
||
## 1. Design Philosophy
|
||
|
||
### The terminal is the canvas — in both modes
|
||
|
||
A NomadNet node browser is a terminal. A local shell is a terminal.
|
||
The character grid is the shared substrate. Unicode box-drawing,
|
||
block elements, and braille dots render identically in both
|
||
contexts. µFrame exploits this fully:
|
||
|
||
- **Box drawing** (`┌─┐│└┘`) creates bordered panels, tables,
|
||
nested layouts — same characters in ASCII and Micron
|
||
- **Block elements** (`█▉▊▋▌▍▎▏░▒▓`) build bar charts, gauges,
|
||
heatmaps — passed through as literal text in Micron
|
||
- **Braille** (`⠀`–`⣿`, 256 patterns) gives 2×4 sub-cell resolution
|
||
for sparklines and dot plots — just text, works everywhere
|
||
- **Micron then paints on top**: colored bars, highlighted thresholds,
|
||
bold headers, clickable links, interactive form fields
|
||
|
||
### What Micron adds beyond ASCII
|
||
|
||
Micron's tag system maps perfectly onto the styling layer that
|
||
plain ASCII lacks:
|
||
|
||
| Capability | Plain ASCII | Micron |
|
||
|--------------------|---------------------|---------------------------------------|
|
||
| Borders & boxes | ✓ box-drawing chars | ✓ same chars + colored with `Fhex` |
|
||
| Bar charts | ✓ block elements | ✓ same blocks + colored thresholds |
|
||
| Sparklines | ✓ braille dots | ✓ same braille + colored |
|
||
| Status indicators | ✓ ● ○ ◐ chars | ✓ same chars + `F0f0` green/red |
|
||
| Table data | ✓ monospace align | ✓ same alignment + bold headers |
|
||
| Emphasis | ✗ (no mechanism) | ✓ `!bold`! `*italic`* `_underline`_ |
|
||
| Color | ✗ (no mechanism)* | ✓ `Fhex text`f / `Bhex text`b |
|
||
| Alignment | manual spacing | ✓ `c center`a / `r right`a |
|
||
| Links | ✗ display only | ✓ `[click here`/page.mu] |
|
||
| Text input | ✗ display only | ✓ `<name`placeholder> |
|
||
| Radio / checkbox | ✗ visual only | ✓ `<^|group|val`label> `<?|..`label> |
|
||
| Headings | manual styling | ✓ `>` / `>>` / `>>>` with styling |
|
||
|
||
*ASCII mode can optionally emit ANSI escape codes with `--ansi`,
|
||
but the default is pure text.
|
||
|
||
---
|
||
|
||
## 2. The Rendering Model
|
||
|
||
Both renderers share a common **CharGrid** — a 2D matrix of
|
||
characters that represents the visual layout. They diverge only
|
||
in the final emission step.
|
||
|
||
```
|
||
┌──────────┐
|
||
.uf ──▶ Parse ──▶│ IR Tree │
|
||
└────┬─────┘
|
||
│
|
||
┌────▼─────┐
|
||
│ Layout │ ◀── width resolution, row splits,
|
||
│ Engine │ border merging, chart rendering
|
||
└────┬─────┘
|
||
│
|
||
┌────▼─────┐
|
||
│ CharGrid │ ◀── 2D array of (char, style) pairs
|
||
│ + Styles │ style = {fg, bg, bold, italic,
|
||
└──┬────┬──┘ underline, link, field_meta}
|
||
│ │
|
||
┌───────▼┐ ┌▼─────────┐
|
||
│ ASCII │ │ Micron │
|
||
│ Emitter │ │ Emitter │
|
||
└─────────┘ └──────────┘
|
||
chars only chars + tags
|
||
```
|
||
|
||
### The CharGrid
|
||
|
||
Every cell in the grid stores:
|
||
|
||
```
|
||
Cell:
|
||
char : string # the visible character (e.g. "█", "┌", "⣿")
|
||
fg : string|null # foreground color, 3-digit hex
|
||
bg : string|null # background color, 3-digit hex
|
||
bold : bool
|
||
italic : bool
|
||
underline : bool
|
||
link : string|null # destination path for clickable cells
|
||
field : FieldMeta|null # form field metadata for interactive cells
|
||
```
|
||
|
||
### ASCII Emitter
|
||
|
||
Reads only `cell.char` from each cell. Produces a plain text file.
|
||
With `--ansi`, reads `fg`, `bg`, `bold`, `italic`, `underline`
|
||
and emits ANSI escape codes.
|
||
|
||
### Micron Emitter
|
||
|
||
Reads every cell property. Scans each line left-to-right, tracks
|
||
style state, and opens/closes Micron tags at style transitions:
|
||
|
||
```
|
||
Line scan: ┌── gauge "CPU" ──────────┐
|
||
Chars: C P U █ █ █ ░ ░ 6 2 %
|
||
Styles: bold fg:0f0 fg:f00
|
||
↓ ↓
|
||
Micron: `!CPU`! `F0f0███`f`Ff00░░`f `Ff0062%`f
|
||
```
|
||
|
||
This means the exact same box-drawing layout appears in both
|
||
outputs. The Micron version simply has color and emphasis tags
|
||
woven between the same characters.
|
||
|
||
---
|
||
|
||
## 3. Visual Primitives — The Shared Toolkit
|
||
|
||
Everything below renders identically in both ASCII and Micron.
|
||
The Micron output adds color/style annotations on top.
|
||
|
||
### 3.1 Box Drawing
|
||
|
||
Four border weights:
|
||
|
||
```
|
||
Light Heavy Double Rounded
|
||
┌──────┐ ┏━━━━━━┓ ╔══════╗ ╭──────╮
|
||
│ │ ┃ ┃ ║ ║ │ │
|
||
└──────┘ ┗━━━━━━┛ ╚══════╝ ╰──────╯
|
||
```
|
||
|
||
Nested boxes with automatic junction merging:
|
||
|
||
```
|
||
┌─────────────────┬──────────┐
|
||
│ Left Panel │ Right │
|
||
│ │ │
|
||
├─────────────────┴──────────┤
|
||
│ Footer spans full width │
|
||
└────────────────────────────┘
|
||
```
|
||
|
||
Titled boxes (title inlined in top border):
|
||
|
||
```
|
||
┌─ System Health ─────────────────────────┐
|
||
│ │
|
||
└─────────────────────────────────────────┘
|
||
|
||
┏━ ALERT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
||
┃ ┃
|
||
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
|
||
```
|
||
|
||
In Micron, the border characters are plain text. The title
|
||
can be wrapped in `!bold`! and `Fhex color`f tags.
|
||
|
||
### 3.2 Data Visualization
|
||
|
||
**Horizontal bars** — block elements with optional color thresholds:
|
||
|
||
```
|
||
ASCII: CPU ████████████████████░░░░░░░░░░ 62%
|
||
|
||
Micron: CPU `F0f0████████████████████`f`F333░░░░░░░░░░`f 62%
|
||
↑ green fill ↑ dim empty
|
||
```
|
||
|
||
**Gauges with thresholds** — color shifts at warn/crit boundaries:
|
||
|
||
```
|
||
ASCII: MEM █████████████████████████████░ 93% ⚠
|
||
|
||
Micron: MEM `Ff00█████████████████████████████`f░ `Ff00 93% ⚠`f
|
||
↑ red because value > crit threshold
|
||
```
|
||
|
||
**Vertical bar charts**:
|
||
|
||
```
|
||
ASCII: Micron adds color per bar:
|
||
|
||
█ `F08f█`f
|
||
█ █ `F08f█`f `F0f0█`f
|
||
█ █ █ █ `F08f█`f `Fff0█`f `F0f0█`f `Fff0█`f
|
||
█ █ █ █ █ █ `F08f█`f `Fff0█`f █ `F0f0█`f █ `Fff0█`f
|
||
█ █ █ █ █ █ █ █ ...
|
||
─────────────────
|
||
0 3 6 9 12 15
|
||
```
|
||
|
||
**Sparklines** — braille characters for inline time series:
|
||
|
||
```
|
||
ASCII: NET ⣀⣤⣶⣿⣿⣷⣶⣤⣀⣀⣤⣶⣿⣷⣤⣀ avg 31%
|
||
|
||
Micron: NET `F0ff⣀⣤⣶⣿⣿⣷⣶⣤⣀⣀⣤⣶⣿⣷⣤⣀`f avg 31%
|
||
↑ cyan sparkline
|
||
```
|
||
|
||
**Heatmap** — using shade blocks with per-cell color:
|
||
|
||
```
|
||
Mon `F0f0░`f`F0f0░`f`F4f0▒`f`F8f0▓`f`Fff0█`f`F8f0▓`f`F4f0▒`f
|
||
Tue `F4f0▒`f`F8f0▓`f`Fff0█`f`Fff0█`f`Fff0█`f`F8f0▓`f`F4f0▒`f
|
||
Wed `F0f0░`f`F0f0░`f`F0f0░`f`F4f0▒`f`F4f0▒`f`F0f0░`f`F0f0░`f
|
||
0 4 8 12 16 20 24
|
||
```
|
||
|
||
In plain ASCII, same characters, no color — the shade density
|
||
still communicates intensity.
|
||
|
||
**Status indicators** — colored in Micron, shape-coded in ASCII:
|
||
|
||
```
|
||
ASCII: ● Online ○ Offline ◐ Degraded ◌ Unknown
|
||
|
||
Micron: `F0f0●`f Online `Ff00○`f Offline `Fff0◐`f Degraded
|
||
```
|
||
|
||
Both modes are readable — color adds clarity but shape carries
|
||
the information alone.
|
||
|
||
### 3.3 Tables
|
||
|
||
Tables use box-drawing for structure. Identical in both outputs.
|
||
Micron adds bold headers and colored status cells:
|
||
|
||
```
|
||
ASCII:
|
||
┌──────────────────────┬──────┬─────────┬──────────┐
|
||
│ Destination │ Hops │ Latency │ Status │
|
||
├──────────────────────┼──────┼─────────┼──────────┤
|
||
│ a7f2::relay-east │ 2 │ 34ms │ ● alive │
|
||
│ c4e1::bridge-south │ 4 │ 112ms │ ● alive │
|
||
│ 01ab::node-gamma │ 7 │ 580ms │ ○ stale │
|
||
└──────────────────────┴──────┴─────────┴──────────┘
|
||
|
||
Micron:
|
||
┌──────────────────────┬──────┬─────────┬──────────┐
|
||
│ `!Destination`! │`!Hops`!│`!Latency`!│`!Status`!│
|
||
├──────────────────────┼──────┼─────────┼──────────┤
|
||
│ a7f2::relay-east │ 2 │ 34ms │ `F0f0●`f alive │
|
||
│ c4e1::bridge-south │ 4 │ 112ms │ `F0f0●`f alive │
|
||
│ 01ab::node-gamma │ 7 │ 580ms │ `Ff00○`f stale │
|
||
└──────────────────────┴──────┴─────────┴──────────┘
|
||
```
|
||
|
||
### 3.4 Form Elements
|
||
|
||
In ASCII, forms are visual representations. In Micron, the same
|
||
characters appear but the input areas become live interactive
|
||
fields.
|
||
|
||
```
|
||
ASCII (visual only):
|
||
┌─ Search ──────────────────────────────┐
|
||
│ │
|
||
│ Query: [ _________________________ ] │
|
||
│ │
|
||
│ Scope: (•) Local ( ) Network │
|
||
│ [ ] Include offline nodes │
|
||
│ │
|
||
│ ┌──────────┐ │
|
||
│ │ Search │ │
|
||
│ └──────────┘ │
|
||
└───────────────────────────────────────┘
|
||
|
||
Micron (interactive):
|
||
┌─ `!Search`! ──────────────────────────┐
|
||
│ │
|
||
│ Query: `<32|query`Enter search...> │
|
||
│ │
|
||
│ Scope: `<^|scope|local|*`Local> `<^|scope|net`Network>
|
||
│ `<?|offline|yes`Include offline nodes>
|
||
│ │
|
||
│ `[`!Search`!`:/action/search]
|
||
│ │
|
||
└───────────────────────────────────────┘
|
||
```
|
||
|
||
The border characters are identical. Micron replaces the
|
||
placeholder bracket notation with live form tags and turns
|
||
the button into a clickable link.
|
||
|
||
---
|
||
|
||
## 4. The DSL — `.uf` Files
|
||
|
||
### 4.1 Syntax
|
||
|
||
- **Indentation** defines nesting (2-space)
|
||
- **Keywords** lead each line
|
||
- **Strings** in double quotes
|
||
- **Pipe `|`** separates inline list items
|
||
- **`$`** references variables
|
||
- **`#`** starts comments
|
||
|
||
### 4.2 Layout Primitives
|
||
|
||
```
|
||
page "Title" [width]
|
||
# Root container. Default width: 64.
|
||
|
||
box [weight] "Title"
|
||
# Bordered region. weight: light|heavy|double|rounded
|
||
# Title is inset in the top border.
|
||
# In Micron: title gets `!bold`!, border chars are literal.
|
||
|
||
row [gap]
|
||
# Horizontal layout. Children split available width.
|
||
# gap: chars between children (default: 1)
|
||
|
||
col [width]
|
||
# Explicit column in a row. Width in chars or percentage.
|
||
|
||
spacer [lines]
|
||
# Vertical whitespace. Default: 1
|
||
|
||
pad [top] [right] [bottom] [left]
|
||
# Inner margin for a container.
|
||
```
|
||
|
||
### 4.3 Content Primitives
|
||
|
||
```
|
||
heading [1|2|3] "Text"
|
||
# Rendered with underline/box in ASCII.
|
||
# In Micron: > / >> / >>> plus `!bold`!
|
||
|
||
text "Content with @bold{inline} @color{0f0}{modifiers}"
|
||
# @bold{...} → Micron `!...`!
|
||
# @italic{...} → Micron `*...*`
|
||
# @under{...} → Micron `_..._`
|
||
# @color{hex}{...} → Micron `Fhex...`f
|
||
# @bg{hex}{...} → Micron `Bhex...`b
|
||
# In ASCII: modifiers stripped (or ANSI with --ansi)
|
||
|
||
label "Key" "Value"
|
||
# Aligned key-value pair.
|
||
|
||
list [bullet|number|dash|arrow]
|
||
item "First"
|
||
item "Second"
|
||
|
||
link "Display text" "/destination.mu"
|
||
# ASCII: [Display text]
|
||
# Micron: `[Display text`/destination.mu]
|
||
|
||
divider [light|heavy|double|dash|dot]
|
||
# Full-width horizontal rule using appropriate chars.
|
||
```
|
||
|
||
### 4.4 Data Visualization Primitives
|
||
|
||
```
|
||
gauge "Label" [value] [max] [width]
|
||
# Horizontal progress bar.
|
||
# Thresholds: warn=[n] crit=[n]
|
||
# ASCII: Label ████████████░░░░ 62%
|
||
# Micron: same, with color shifts at thresholds
|
||
|
||
meter "Label" [value] [max]
|
||
# Compact inline gauge (no border, just bar + %)
|
||
|
||
bar_h "Label" [value] [max] [width]
|
||
# Single horizontal bar in a chart context.
|
||
|
||
bar_v [height]
|
||
# Vertical bar chart container.
|
||
bar "Label" [value]
|
||
bar "Label" [value]
|
||
# Uses ▁▂▃▄▅▆▇█ stacked vertically.
|
||
|
||
sparkline "Label" [values] [width]
|
||
# Braille-dot inline chart.
|
||
# values: comma-separated or $variable
|
||
|
||
heatmap [rows] [cols]
|
||
# Grid of colored shade blocks.
|
||
# Uses ░▒▓█ for intensity.
|
||
# Micron adds per-cell `Fhex` color.
|
||
|
||
status "Label" [online|offline|degraded|unknown|alert]
|
||
# Shape-coded indicator + label.
|
||
# Micron adds color to the indicator.
|
||
|
||
table "Title"
|
||
columns "Name" [width] | "Name" [width] | ...
|
||
row "val" | "val" | ...
|
||
# Box-drawn table with header separator.
|
||
# Micron: bold headers, colored cells via @modifiers in values.
|
||
```
|
||
|
||
### 4.5 Form Primitives
|
||
|
||
```
|
||
form "name"
|
||
field "name" [width] "placeholder"
|
||
password "name" [width] "placeholder"
|
||
radio "group" "Opt A" | "Opt B" | "Opt C"
|
||
checkbox "name" "Label"
|
||
toggle "name" "Label" [on|off]
|
||
dropdown "name" "Opt A" | "Opt B" | "Opt C"
|
||
button "Label" ["/action/path"]
|
||
|
||
# ASCII: visual placeholders (brackets, radio dots, etc.)
|
||
# Micron: live interactive fields using native form tags
|
||
```
|
||
|
||
### 4.6 Style Modifiers
|
||
|
||
Applied as indented children of any node:
|
||
|
||
```
|
||
align [left|center|right]
|
||
color [3-digit hex]
|
||
bg [3-digit hex]
|
||
border [light|heavy|double|rounded|none]
|
||
bold
|
||
italic
|
||
underline
|
||
```
|
||
|
||
### 4.7 Variables & Components
|
||
|
||
```
|
||
# Variables
|
||
let name = "Relay Alpha-7"
|
||
let cpu_data = 42, 67, 55, 78, 91, 63, 48
|
||
|
||
# Component definition
|
||
component stat(label, value, max, trend)
|
||
box light "$label"
|
||
gauge "$label" $value $max 20
|
||
text "@italic{$trend}"
|
||
|
||
# Component usage
|
||
row 2
|
||
stat "CPU" 62 100 "▲ +5%"
|
||
stat "MEM" 84 100 "▼ -2%"
|
||
```
|
||
|
||
---
|
||
|
||
## 5. Complete Example
|
||
|
||
### 5.1 Source
|
||
|
||
```
|
||
let node = "Relay Alpha-7"
|
||
let uptime = "14d 3h 22m"
|
||
|
||
page "$node" 66
|
||
|
||
box double "$node"
|
||
align center
|
||
text "Reticulum Network Node"
|
||
text "Online $uptime"
|
||
|
||
spacer
|
||
|
||
heading 1 "Resources"
|
||
|
||
row 2
|
||
col
|
||
gauge "CPU" 62 100 28 warn=75 crit=90
|
||
gauge "GPU" 21 100 28
|
||
col
|
||
gauge "MEM" 84 100 28 warn=80 crit=95
|
||
gauge "SWP" 3 100 28
|
||
|
||
spacer
|
||
|
||
heading 1 "Network"
|
||
|
||
row 2
|
||
col 40
|
||
text "Traffic (60s)"
|
||
sparkline "IN" 1,3,5,8,7,5,3,2,1,3,6,8,7,4 20
|
||
sparkline "OUT" 2,2,3,5,8,7,5,3,2,1,1,3,5,8 20
|
||
col
|
||
label "Peers" "7 / 12"
|
||
status "East Relay" online
|
||
status "South Bridge" online
|
||
status "Node Gamma" degraded
|
||
|
||
spacer
|
||
|
||
heading 1 "Routing"
|
||
|
||
table "Routes"
|
||
columns "Destination" 22 | "Hops" 6 | "RTT" 8 | "State" 10
|
||
row "a7f2::relay-east" | "2" | "34ms" | "@color{0f0}{● alive}"
|
||
row "c4e1::bridge-south" | "4" | "112ms" | "@color{0f0}{● alive}"
|
||
row "01ab::node-gamma" | "7" | "580ms" | "@color{f00}{○ stale}"
|
||
row "f390::hub-north" | "1" | "8ms" | "@color{0f0}{● alive}"
|
||
|
||
spacer
|
||
|
||
heading 1 "Actions"
|
||
|
||
box rounded "Quick Command"
|
||
form "cmd"
|
||
field "target" 30 "Destination hash..."
|
||
radio "mode" "Ping" | "Trace" | "Page"
|
||
checkbox "verbose" "Verbose output"
|
||
button "Execute" "/action/exec"
|
||
|
||
divider heavy
|
||
|
||
text "@center{© 2026 $node · Reticulum Network}"
|
||
```
|
||
|
||
### 5.2 ASCII Output
|
||
|
||
```
|
||
╔══ Relay Alpha-7 ═════════════════════════════════════════════════╗
|
||
║ Reticulum Network Node ║
|
||
║ Online 14d 3h 22m ║
|
||
╚══════════════════════════════════════════════════════════════════╝
|
||
|
||
── Resources ─────────────────────────────────────────────────────
|
||
|
||
CPU ████████████████████░░░░░░░░ 62% MEM █████████████████████████░░ 84% ⚠
|
||
GPU ██████░░░░░░░░░░░░░░░░░░░░░ 21% SWP █░░░░░░░░░░░░░░░░░░░░░░░░░ 3%
|
||
|
||
── Network ───────────────────────────────────────────────────────
|
||
|
||
Traffic (60s) Peers: 7 / 12
|
||
IN ⣀⣤⣶⣿⣷⣶⣤⣀⣀⣤⣶⣿⣷⣤ 4.2 KB/s East Relay ● online
|
||
OUT ⣀⣀⣠⣤⣶⣿⣷⣶⣤⣀⣀⣠⣤⣶⣿ 2.1 KB/s South Bridge ● online
|
||
Node Gamma ◐ degraded
|
||
|
||
── Routing ───────────────────────────────────────────────────────
|
||
|
||
┌────────────────────────┬────────┬──────────┬────────────┐
|
||
│ Destination │ Hops │ RTT │ State │
|
||
├────────────────────────┼────────┼──────────┼────────────┤
|
||
│ a7f2::relay-east │ 2 │ 34ms │ ● alive │
|
||
│ c4e1::bridge-south │ 4 │ 112ms │ ● alive │
|
||
│ 01ab::node-gamma │ 7 │ 580ms │ ○ stale │
|
||
│ f390::hub-north │ 1 │ 8ms │ ● alive │
|
||
└────────────────────────┴────────┴──────────┴────────────┘
|
||
|
||
── Actions ───────────────────────────────────────────────────────
|
||
|
||
╭─ Quick Command ──────────────────────────────────────────────╮
|
||
│ │
|
||
│ target: [ Destination hash...________________ ] │
|
||
│ mode: (•) Ping ( ) Trace ( ) Page │
|
||
│ [ ] Verbose output │
|
||
│ ┌───────────┐ │
|
||
│ │ Execute │ │
|
||
│ └───────────┘ │
|
||
╰──────────────────────────────────────────────────────────────╯
|
||
|
||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||
© 2026 Relay Alpha-7 · Reticulum Network
|
||
```
|
||
|
||
### 5.3 Micron Output
|
||
|
||
The **same characters** — every box corner, every bar segment, every
|
||
braille dot — with Micron tags added for color and interactivity:
|
||
|
||
```
|
||
╔══ `!Relay Alpha-7`! ═════════════════════════════════════════════╗
|
||
║`c Reticulum Network Node`a ║
|
||
║`c Online 14d 3h 22m`a ║
|
||
╚══════════════════════════════════════════════════════════════════╝
|
||
|
||
>Resources
|
||
|
||
`!CPU`! `F0f0████████████████████`f`F555░░░░░░░░`f 62% `!MEM`! `Ff80█████████████████████████`f`F555░░`f `Ff8084%`f ⚠
|
||
`!GPU`! `F0f0██████`f`F555░░░░░░░░░░░░░░░░░░░░░`f 21% `!SWP`! `F0f0█`f`F555░░░░░░░░░░░░░░░░░░░░░░░░░`f 3%
|
||
|
||
>Network
|
||
|
||
`!Traffic (60s)`! `!Peers:`! 7 / 12
|
||
IN `F0cf⣀⣤⣶⣿⣷⣶⣤⣀⣀⣤⣶⣿⣷⣤`f 4.2 KB/s East Relay `F0f0●`f online
|
||
OUT `F0cf⣀⣀⣠⣤⣶⣿⣷⣶⣤⣀⣀⣠⣤⣶⣿`f 2.1 KB/s South Bridge `F0f0●`f online
|
||
Node Gamma `Fff0◐`f degraded
|
||
|
||
>Routing
|
||
|
||
┌────────────────────────┬────────┬──────────┬────────────┐
|
||
│ `!Destination`! │ `!Hops`! │ `!RTT`! │ `!State`! │
|
||
├────────────────────────┼────────┼──────────┼────────────┤
|
||
│ a7f2::relay-east │ 2 │ 34ms │ `F0f0●`f alive │
|
||
│ c4e1::bridge-south │ 4 │ 112ms │ `F0f0●`f alive │
|
||
│ 01ab::node-gamma │ 7 │ 580ms │ `Ff00○`f stale │
|
||
│ f390::hub-north │ 1 │ 8ms │ `F0f0●`f alive │
|
||
└────────────────────────┴────────┴──────────┴────────────┘
|
||
|
||
>Actions
|
||
|
||
╭─ `!Quick Command`! ──────────────────────────────────────────╮
|
||
│ │
|
||
│ target: `<30|target`Destination hash...> │
|
||
│ mode: `<^|mode|ping|*`Ping> `<^|mode|trace`Trace> `<^|mode|page`Page>
|
||
│ `<?|verbose|yes`Verbose output> │
|
||
│ `[`!Execute`!`:/action/exec]
|
||
│ │
|
||
╰──────────────────────────────────────────────────────────────╯
|
||
|
||
-━
|
||
|
||
`c© 2026 Relay Alpha-7 · Reticulum Network`a
|
||
```
|
||
|
||
Note how the table borders, box corners, and gauge characters
|
||
are **byte-for-byte identical** in both outputs. Micron simply
|
||
interleaves its backtick tags around the characters that need
|
||
color or emphasis.
|
||
|
||
---
|
||
|
||
## 6. Intermediate Representation
|
||
|
||
### IR Node
|
||
|
||
```
|
||
IRNode:
|
||
type : NodeType
|
||
label : string | null
|
||
children : IRNode[]
|
||
styles : {
|
||
fg : string | null # 3-digit hex
|
||
bg : string | null
|
||
bold : bool
|
||
italic : bool
|
||
underline: bool
|
||
align : left | center | right
|
||
border : light | heavy | double | rounded | none
|
||
}
|
||
layout : {
|
||
width : int | pct | null
|
||
height : int | null
|
||
gap : int
|
||
pad : [top, right, bottom, left]
|
||
}
|
||
data : { # type-specific
|
||
value : number | null
|
||
max : number | null
|
||
warn : number | null
|
||
crit : number | null
|
||
values : number[] | null # sparkline, bar_v
|
||
state : enum | null # status indicator
|
||
options : string[] | null # radio, dropdown
|
||
columns : Column[] | null # table
|
||
rows : Row[] | null # table
|
||
link : string | null # destination
|
||
field : FieldMeta | null # form metadata
|
||
}
|
||
inline : InlineSpan[] # parsed @modifiers
|
||
```
|
||
|
||
### The CharGrid
|
||
|
||
```
|
||
CharGrid:
|
||
width : int
|
||
height : int
|
||
cells : Cell[height][width]
|
||
|
||
Cell:
|
||
char : char # visible character
|
||
style : CellStyle # for Micron emission
|
||
field : FieldMeta? # if this cell is part of a form field
|
||
link : string? # if this cell is clickable
|
||
|
||
CellStyle:
|
||
fg : string? # 3-digit hex
|
||
bg : string?
|
||
bold : bool
|
||
italic : bool
|
||
underline : bool
|
||
```
|
||
|
||
The layout engine fills the CharGrid. Both emitters read it.
|
||
The ASCII emitter ignores the style layer. The Micron emitter
|
||
scans for style transitions and inserts tags.
|
||
|
||
---
|
||
|
||
## 7. Rendering Pipeline
|
||
|
||
```
|
||
Phase 1: Parse
|
||
.uf source → token stream → IR tree
|
||
Variables resolved, components expanded.
|
||
|
||
Phase 2: Measure
|
||
Bottom-up pass: compute min/preferred width and height
|
||
for each node. Leaf nodes (text, gauge, field) report
|
||
their intrinsic sizes. Containers aggregate children.
|
||
|
||
Phase 3: Layout
|
||
Top-down pass: assign (x, y, w, h) to every node.
|
||
Row nodes divide width among columns.
|
||
Box nodes reserve border characters (1 char each side).
|
||
|
||
Phase 4: Paint
|
||
Depth-first traversal. Each node writes characters into
|
||
the CharGrid at its assigned position:
|
||
- Box: draw border chars, set title style
|
||
- Gauge: compute bar length, write █ and ░, set fg color
|
||
based on thresholds
|
||
- Sparkline: convert values to braille patterns
|
||
- Table: draw grid, write cell content, set header bold
|
||
- Form: write visual placeholders, attach FieldMeta
|
||
- Status: write indicator char, set color by state
|
||
|
||
Phase 5: Merge Borders
|
||
Post-pass: scan for adjacent border characters and replace
|
||
with correct junction characters (┬ ┴ ├ ┤ ┼ etc.).
|
||
Weight priority: double > heavy > light > rounded.
|
||
|
||
Phase 6: Emit
|
||
ASCII: read cell.char for every cell, join into lines.
|
||
Micron: scan each line, diff style between adjacent cells,
|
||
open/close Micron tags at transitions.
|
||
```
|
||
|
||
### Border Merging Detail
|
||
|
||
```
|
||
Before: After:
|
||
┌────┐┌────┐ ┌────┬────┐
|
||
│ ││ │ ──▶ │ │ │
|
||
└────┘└────┘ └────┴────┘
|
||
|
||
┌────────┐ ┌────────┐
|
||
│┌──────┐│ ├──────┐ │ (nested box shares
|
||
││ ││ ──▶ │ │ │ parent left edge)
|
||
│└──────┘│ ├──────┘ │
|
||
└────────┘ └────────┘
|
||
```
|
||
|
||
The merging pass checks each cell against its 4 neighbors
|
||
and selects from a lookup table of ~40 junction characters.
|
||
|
||
---
|
||
|
||
## 8. Character Reference
|
||
|
||
### Boxes
|
||
|
||
```
|
||
Light: ┌ ─ ┐ │ └ ┘ ├ ┤ ┬ ┴ ┼
|
||
Heavy: ┏ ━ ┓ ┃ ┗ ┛ ┣ ┫ ┳ ┻ ╋
|
||
Double: ╔ ═ ╗ ║ ╚ ╝ ╠ ╣ ╦ ╩ ╬
|
||
Rounded: ╭ ╮ ╰ ╯
|
||
Mixed: ╒ ╓ ╕ ╖ ╘ ╙ ╛ ╜ (light+double junctions)
|
||
```
|
||
|
||
### Blocks
|
||
|
||
```
|
||
Horizontal fill: █ ▉ ▊ ▋ ▌ ▍ ▎ ▏ (full → 1/8)
|
||
Vertical fill: ▁ ▂ ▃ ▄ ▅ ▆ ▇ █ (1/8 → full)
|
||
Shade: ░ ▒ ▓ █ (25% → 100%)
|
||
Quadrants: ▖ ▗ ▘ ▝ ▞ ▟ ▙ ▛ ▜ ▚
|
||
```
|
||
|
||
### Braille (sparklines, dot plots)
|
||
|
||
```
|
||
Range: U+2800–U+28FF (256 patterns)
|
||
Each char = 2×4 dot matrix (2 cols × 4 rows)
|
||
Smooth curves: ⠀⣀⣠⣤⣴⣶⣾⣿⣷⣶⣤⣀⠀
|
||
```
|
||
|
||
### Indicators
|
||
|
||
```
|
||
Status: ● ○ ◐ ◑ ◒ ◓ ◌ ◉
|
||
Arrows: ▲ ▼ ◀ ▶ ← → ↑ ↓ ↗ ↘
|
||
Marks: ✓ ✗ ◆ ◇ ★ ☆ ⚠ ⚡
|
||
```
|
||
|
||
---
|
||
|
||
## 9. CLI
|
||
|
||
```bash
|
||
uframe render <file.uf> # emit ASCII (stdout) + .mu (file)
|
||
--ascii # ASCII only
|
||
--micron # .mu only
|
||
--ansi # ANSI colors in ASCII output
|
||
--width <int> # override page width
|
||
--out <dir> # directory for .mu output
|
||
|
||
uframe preview <file.uf> # live terminal preview
|
||
--watch # re-render on file change
|
||
|
||
uframe check <file.uf> # validate / lint
|
||
|
||
uframe deploy <file.uf> [dest] # render + copy to NomadNet pages dir
|
||
# default dest: ~/.nomadnetwork/storage/pages/
|
||
```
|
||
|
||
---
|
||
|
||
## 10. Standard Component Library
|
||
|
||
```
|
||
use std/dashboard
|
||
use std/filebrowser
|
||
use std/board
|
||
|
||
# Pre-built patterns:
|
||
dashboard.banner node_name uptime
|
||
dashboard.resources cpu mem gpu swap
|
||
dashboard.peers peer_list
|
||
dashboard.traffic in_data out_data
|
||
|
||
filebrowser.tree root_path
|
||
filebrowser.listing dir_path
|
||
|
||
board.recent count
|
||
board.compose action_path
|
||
|
||
nav.tabs items active
|
||
nav.breadcrumb path
|
||
|
||
chart.timeseries label values width
|
||
chart.compare items
|
||
chart.histogram bins
|
||
```
|
||
|
||
---
|
||
|
||
## 11. Future Directions
|
||
|
||
- **Responsive reflow** — breakpoints that stack `row` children
|
||
vertically at narrow widths
|
||
- **Themes** — `.uf-theme` files defining color palettes and
|
||
border preferences shared across pages
|
||
- **Animation** — frame-by-frame for live dashboards using
|
||
terminal cursor repositioning
|
||
- **Bidirectional** — parse existing `.mu` into `.uf` for editing
|
||
- **HTML export** — for web-based Reticulum browsers (rBrowser)
|
||
- **Shebang mode** — `#!/usr/bin/env uframe --micron` for
|
||
executable dynamic NomadNet pages
|
||
- **LSP** — editor support: highlighting, completion, live preview
|