import { LiveArea } from 'clui-live';
 
const area = new LiveArea();
 
for ( let i = 0; i < 100; i++ ) {
    area.write( 'Progress' + i );
 
    await sleepRandom();
}
 
// Closing the `LiveArea` will keep any text that was written to it last on screen and prevent any further updates. To avoid that, call area.clear().close() instead
area.close();

import { LiveContainer, LiveArea } from 'clui-live';
 
const container = new LiveContainer();
 
// How to add an area to a container
const area1 = new LiveArea();
 
container.addLiveArea( area );
 
// A shortcut for that is
const area2 = container.createLiveArea();
 
for ( let i = 0; i < 100; i++ ) {
    // Update each area in an alternated way. They will both be updated in place
    // If the first area grew (or shrinked), the vertical positions of all areas below would adjust accordingly
    if ( i % 2 == 0 ) {
        area1.write( 'Progress' + i );
    } else {
        area2.write( 'Progress' + i * 2 );
    }
 
    await sleepRandom();
}
 
// Also, since the terminal doesn't allow to update text outside the viewport (when the text is above the buffer and you would
// have to scroll to see it), and so when any LiveArea falls off view, it's state is "forgotten" and when it updates next it 
// will be appended at the bottom.

const container = new LiveContainer().hook();

const area1 = new LiveArea().hook();
const area2 = new LiveArea().hook();