ARCHITECTURE

Architecture

TRANSLUX relies on a simple Finite State Machine (FSM) mapped to user interactions and styled purely using advanced CSS techniques.

System State Machine

The core interaction flow modeled by our FSM.

stateDiagram-v2
    [*] --> IDLE
    IDLE --> OBSERVED : APPROACH
    OBSERVED --> IDLE : LEAVE

    IDLE --> ENGAGED : ENTER
    OBSERVED --> ENGAGED : ENTER
    ENGAGED --> OBSERVED : EXIT

    ENGAGED --> INTERACTING : PRESS
    INTERACTING --> ENGAGED : RELEASE
    INTERACTING --> OBSERVED : EXIT

    IDLE --> HALTED : TERMINATE
    OBSERVED --> HALTED : TERMINATE
    ENGAGED --> HALTED : TERMINATE
    INTERACTING --> HALTED : TERMINATE

    HALTED --> IDLE : RESUME

Layers

Spec Blueprint: IEEE-830 specification dictating all interfaces.
Core FSM (TypeScript): The universal truth of state transitions.
Adapters: Framework-specific bindings (React, Vue, Solid).
Styles (Sass/CSS): The Glassmorphic Pink mode implementation that styles the outputs.