> ## Documentation Index > Fetch the complete documentation index at: https://docs.monolex.ai/llms.txt > Use this file to discover all available pages before exploring further. # Rust and TypeScript Implementation > Dual implementation of the Tint System for production and development ## 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π]) │ │ │ └───────────────────────────────────────────────────────────────────────┘ ``` Both Rust and TypeScript implement this algorithm identically. The pseudocode in the diagram above describes the complete logic. Both languages use standard circular arithmetic (modular wrapping to \[0, 2pi]) and handle inside/outside zones with the same compression and expansion formulas. **Gestalt Core Analysis**: ``` ┌─────────────────────────────────────────────────────────────────┐ │ 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](https://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.) ``` **Key Insight**: Gestalt Core-Flow is the **mathematical language of color manipulation**. Whether implemented in Rust, TypeScript, Python, or GPU shaders, the same pattern produces the same results because it is grounded in mathematics, not implementation details. This makes the Tint System: * **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 *** Return to the TrueColor Tint System architecture overview