Overview
The Monolex Tint System is implemented in both Rust (Production) and TypeScript/JavaScript (Lab/Tool). Both implementations follow the identical Gestalt Core-Flow pattern and are algorithmically equivalent.┌─────────────────────────────────────────────────────────────────┐
│ DUAL IMPLEMENTATION ARCHITECTURE │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────┐ ┌──────────────────────────┐ │
│ │ Rust (Production) │ │ TypeScript (Lab/Tool) │ │
│ │ ───────────────────── │ │ ────────────────────────│ │
│ │ theme_transform.rs │ │ hue-warp-lab.html │ │
│ │ theme_cache.rs │ │ (embedded JS) │ │
│ │ oklab.rs │ │ │ │
│ │ │ │ │ │
│ │ Purpose: │ │ Purpose: │ │
│ │ • Runtime transforms │ │ • Interactive tuning │ │
│ │ • LRU cache │ │ • Visual verification │ │
│ │ • High performance │ │ • Parameter exploration │ │
│ └────────────┬────────────┘ └─────────────┬────────────┘ │
│ │ │ │
│ └───────────────┬───────────────┘ │
│ ▼ │
│ ┌───────────────────────┐ │
│ │ IDENTICAL ALGORITHM │ │
│ │ • Core-Flow pattern │ │
│ │ • Same math │ │
│ │ • Same parameters │ │
│ └───────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Core Functions Comparison
warp_hue_compress (CORE Function)
Role: Hue compression inside the Caustic region - OkLCH Polar space operation┌───────────────────────────────────────────────────────────────────────┐
│ warp_hue_compress() ALGORITHM │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ INPUTS: hue, pull_hue, strength, width (all in radians) │
│ │
│ STEP 1: Early Exit │
│ if width == 0 OR strength == 0 → return hue (no change) │
│ │
│ STEP 2: Normalize Delta to [-π, π] │
│ delta = hue - pull_hue │
│ while delta > π: delta -= 2π │
│ while delta < -π: delta += 2π │
│ │
│ STEP 3: Zone Decision │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ |delta| ≤ width → INSIDE ZONE (compress toward pull_hue) │ │
│ │ ratio = |delta| / width │ │
│ │ compressed = ratio × (1 - strength) │ │
│ │ result = pull_hue + sign(delta) × compressed × width │ │
│ │ │ │
│ │ |delta| > width → OUTSIDE ZONE (expand away from pull_hue) │ │
│ │ Redistribute remaining hue space │ │
│ │ Maintain total coverage of [0, 2π] │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ OUTPUT: warped_hue (normalized to [0, 2π]) │
│ │
└───────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ warp_hue_compress = PURE CORE FUNCTION │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Input: hue (radian) - Polar angle │
│ Output: warped_hue (radian) - Transformed Polar angle │
│ │
│ Operation characteristics: │
│ • Operates entirely in angle (Hue) space │
│ • Does not reference L, C │
│ • Manipulates color identity (Hue) only │
│ │
│ → CORE: Polar space, identity definition │
│ │
│ Match: Rust === TypeScript │
│ │
└─────────────────────────────────────────────────────────────────┘
fill_with_oklab_gradient (FLOW Function)
Role: OkLab linear interpolation inside Caustic region - Cartesian space operation┌─────────────────────────────────────────────────────────────────┐
│ fill_with_oklab_gradient = PURE FLOW FUNCTION │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Input: hue, L, C (Polar coordinates) │
│ Output: (L, a, b) (Cartesian coordinates) │
│ │
│ Key operation: │
│ • left_a = C * cos(left_hue) ← Polar → Cartesian transform │
│ • right_a = C * cos(right_hue) │
│ • result_a = lerp(left_a, right_a, t) ← FLOW: linear interp │
│ │
│ Why FLOW? │
│ • Straight path in OkLab Cartesian space │
│ • Avoids Hue space discontinuities │
│ • Smooth gradient without muddy colors │
│ │
│ → FLOW: Cartesian space, derived color generation │
│ │
│ Match: Rust === TypeScript │
│ │
└─────────────────────────────────────────────────────────────────┘
apply_hue_warp (CORE + FLOW Hybrid)
Mode Comparison:┌─────────────────────────────────────────────────────────────────┐
│ apply_hue_warp: MODE COMPARISON │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Mode 0 (none): │
│ ───────────── │
│ • Bypass all processing │
│ • Preserve original colors │
│ • Neither CORE nor FLOW │
│ │
│ Mode 1 (compress): │
│ ──────────────── │
│ • warp_hue_compress() only │
│ • Hue redistribution │
│ • PURE CORE │
│ │
│ Mode 2 (compressGradient) - DEFAULT: │
│ ───────────────────────────────────── │
│ • Inside zone: fill_with_oklab_gradient() │
│ • Outside zone: warp_hue_compress() │
│ • FLOW inside + CORE outside │
│ • Optimal harmony │
│ │
└─────────────────────────────────────────────────────────────────┘
Parameter Mapping
Full Parameter Table
| Rust (snake_case) | TypeScript (camelCase) | Type | Gestalt |
|---|---|---|---|
dark_anchor_hue | darkAnchorHue | f32 | CORE |
dark_anchor_chroma | darkAnchorChroma | f32 | CORE |
tint_hue | tintHue | f32 | CORE |
tint_strength | tintStrength | f32 | CORE |
tint_chroma | tintChroma | f32 | CORE |
bg_hue_inherit | bgHueInherit | f32 | CORE |
bg_chroma_boost | bgChromaBoost | f32 | CORE |
text_hue_inherit | textHueInherit | f32 | CORE |
border_hue_inherit | borderHueInherit | f32 | CORE |
ansi_hue_inherit | ansiHueInherit | f32 | CORE |
bright_hue_inherit | brightHueInherit | f32 | CORE |
pull_complementary | pullComplementary | f32 | CORE |
pull_width | pullWidth | f32 | CORE |
pull_strength | pullStrength | f32 | CORE+FLOW |
pull_mode | pullMode | enum | CORE+FLOW |
bg_secondary_ratio | bgSecondaryRatio | f32 | FLOW |
bg_tertiary_ratio | bgTertiaryRatio | f32 | FLOW |
text_secondary_ratio | textSecondaryRatio | f32 | FLOW |
text_tertiary_ratio | textTertiaryRatio | f32 | FLOW |
Numeric Precision
Float Type Comparison
| Aspect | Rust | TypeScript |
|---|---|---|
| Type | f32 (32-bit) | number (64-bit) |
| Significand | 23 bits | 52 bits |
| Max precision | ~7 digits | ~15 digits |
Practical Impact
┌─────────────────────────────────────────────────────────────────┐
│ PRECISION IMPACT ON COLOR │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Output: 8-bit RGB per channel (0-255) │
│ │
│ Required precision: 1/256 ~ 0.0039 │
│ f32 precision: ~1.2e-7 │
│ f64 precision: ~2.2e-16 │
│ │
│ Both far exceed requirements → NO VISIBLE DIFFERENCE │
│ │
│ Edge case: Hue angle wrapping │
│ • Rust: result.rem_euclid(two_pi) │
│ • JS: ((result % TWO_PI) + TWO_PI) % TWO_PI │
│ • Both produce identical [0, 2pi) range │
│ │
└─────────────────────────────────────────────────────────────────┘
OkLab Implementation
Both implementations use the standard Bjorn Ottosson OkLab matrices (M1 for RGB-to-LMS, M2 for LMS’-to-OkLab). These are publicly documented at bottosson.github.io/posts/oklab.Development Workflow
┌─────────────────────────────────────────────────────────────────┐
│ RUST <-> TYPESCRIPT DEVELOPMENT WORKFLOW │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ 1. EXPERIMENT (TypeScript) │ │
│ │ ───────────────────────── │ │
│ │ hue-warp-lab.html │ │
│ │ • Real-time parameter adjustment │ │
│ │ • Immediate visual feedback │ │
│ │ • Color Wheel, Palette preview │ │
│ └────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ 2. VERIFY (TypeScript) │ │
│ │ ──────────────────── │ │
│ │ • Confirm desired color results │ │
│ │ • Test edge cases │ │
│ │ • Copy theme definition object │ │
│ └────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ 3. APPLY (Rust) │ │
│ │ ────────────── │ │
│ │ theme_cache.rs │ │
│ │ • Update ThemeParams defaults │ │
│ │ • Or pass dynamically via Frontend invoke() │ │
│ └────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ 4. TEST (Rust) │ │
│ │ ──────────── │ │
│ │ cargo test │ │
│ │ • Unit tests for transforms │ │
│ │ • Integration with LRU cache │ │
│ │ • Actual terminal verification │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ Since algorithms are identical: │
│ Success in TypeScript → Success in Rust │
│ │
└─────────────────────────────────────────────────────────────────┘
Verification Summary
┌─────────────────────────────────────────────────────────────────┐
│ IMPLEMENTATION VERIFICATION SUMMARY │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Category Status Notes │
│ ──────────────────────────────────────────────────────────── │
│ warp_hue_compress OK CORE function identical │
│ fill_with_oklab_gradient OK FLOW function identical │
│ apply_hue_warp OK Mode selection identical │
│ transform_truecolor OK 7-step pipeline identical │
│ OkLab conversions OK Same matrices │
│ Parameter mapping OK All 20+ params mapped │
│ Numeric precision OK Both exceed requirements │
│ Gestalt Core-Flow OK Same pattern in both │
│ │
│ ═══════════════════════════════════════════════════════════ │
│ │
│ VERDICT: Rust === TypeScript (Functionally Identical) │
│ │
└─────────────────────────────────────────────────────────────────┘
THE CENTER
Language-Agnostic Pattern
The dual implementation proves that Gestalt Core-Flow is a language-independent mathematical pattern.Connection to Core-Flow:
├── CORE operations: Same Polar angle math in any language
│ → atan2, cos, sin work identically everywhere
├── FLOW operations: Same Cartesian lerp in any language
│ → Linear algebra is universal
├── Development flexibility: Experiment in JS, deploy in Rust
│ → Rapid iteration without sacrificing performance
└── Mathematical foundation: Not framework-dependent
→ Can be ported to any platform (GPU shaders, WASM, etc.)
- Portable: Same algorithm works everywhere
- Verifiable: Test in JS, confident in Rust
- Maintainable: Single source of truth (the math)
- Extensible: Add new platforms without redesign
Back to Tint System Overview
Return to the TrueColor Tint System architecture overview