Ascii User Interfaces

Question

In this challenge, we render Ascii user interfaces.

+----------------------+
|+-----------++-------+|
||<- Previous||Next ->||
|+-----------++-------+|
|== The title == |
| |
|Lorem ipsum dolor |
|sit amet... |
|+--------------+ |
||Post a comment| |
|+--------------+ |
|+-----------------+ |
||User X commented:| |
|| | |
||This is amazing! | |
|+-----------------+ |
|+-----------------+ |
||User Y commented:| |
|| | |
||lol | |
|+-----------------+ |
+----------------------+

Each drawing like this is made of one element, which can contain subelements. The possible elements are listed below:

1. Text element. Contains one or more lines of text.
2. Box element. Contains one subelement that is surrounded with borders. The borders have +s at the corners and -s and | at the edges.
3. Horizontal list. Contains one or more elements that are aligned horizontally.
4. Vertical list. Contains one or more elements that are aligned over each other vertically and to left horizontally.

Every element is a rectangle.

Each element, in addition to its content, has a property called baseline. The baseline is used to align the elements vertically: every element of a horizontal list is aligned such that their baselines are on the same line. In the example below, the baseline contain characters aeg. The baselines of the three box elements are (0-indexed) 1, 3 and 2.

 +-+ 
 |c|+-+
+-+|d||f|
|a||e||g|
|b|+-+|h|
+-+ +-+

The baselines are determined with the following rules:

1. For text elements, the first line of text is the baseline, ie. 0.
2. For box elements, the baseline is 1 + the baseline of the subelement.
3. For horizontal lists, the baseline is the maximum baseline in the list (3 in the example above).
4. For vertical lists, the baseline is the baseline of an element, which must be specified in the input.

Input

The input is a specification of an interface in some format (eg. lists, json). The example inputs have the following format:

1. A string element is a string: "..."
2. A box element is a list thats first element is "b": ["b", subelement]
3. A horizontal list is a list thats first element is "h": ["h", items...]
4. A vertical list is a list thats first element is "v" and the second element is the (0-indexed) number of the element thats baseline is used: ["v", n, items...]

Output

The output must contain the elements aligned using the rules I specified above. The output can be stdout, a list of strings or anything else meaningful.

Scoring

This is code-golf, the usual rules apply.

Test cases

1

["b", ["v", 0, ["h", ["b", "<- Previous"], ["b", "Next ->"]], "== The title ==\n\nLorem ipsum dolor\nsit amet...", ["b", "Post a comment"], ["b", "User X commented:\n\nThis is amazing!"], ["b", "User Y commented:\n\nlol"]]]
+----------------------+
|+-----------++-------+|
||<- Previous||Next ->||
|+-----------++-------+|
|== The title == |
| |
|Lorem ipsum dolor |
|sit amet... |
|+--------------+ |
||Post a comment| |
|+--------------+ |
|+-----------------+ |
||User X commented:| |
|| | |
||This is amazing! | |
|+-----------------+ |
|+-----------------+ |
||User Y commented:| |
|| | |
||lol | |
|+-----------------+ |
+----------------------+

2

["h", ["b", ["v", 0, "a", "b"]], ["b", ["v", 2, "c", "d", "e"]], ["b", ["v", 1, "f", "g", "h"]]]
 +-+ 
 |c|+-+
+-+|d||f|
|a||e||g|
|b|+-+|h|
+-+ +-+

3

["h", ["b", ["v", 0, ["b", ["h", "a\nb", "c"]], "d", "e", ["h", ["h", "f"], ["b", ["h", "g"]], "h"]]], ["b", "ijk\nl\nmn\no"], ["v", 2, ["b", "pqrst"], ["b", "uv\nw"], ["b", "x"]], ["b", ["b", ["b", "yz"]]]]
 +-----+ 
 |pqrst| 
 +-----+ 
 +--+ 
 |uv| 
 |w | +------+
+-----+ +--+ |+----+|
|+--+ |+---++-+ ||+--+||
||ac| ||ijk||x| |||yz|||
||b | ||l |+-+ ||+--+||
|+--+ ||mn | |+----+|
|d ||o | +------+
|e |+---+ 
| +-+ | 
|f|g|h| 
| +-+ | 
+-----+ 

4

["h", "a * b = ", ["v", 0, "a + a + ... + a", "\\_____________/", " b times"]]
a * b = a + a + ... + a
 \_____________/
 b times 

• Magic Octopus Urn: Sweet jesus... It's geocities all over again.
• Stan Strum: I'm not quite sure how the baseline works, could you explain it further?
• fergusq: @StanStrum The baseline is used to align the items in a horizontal list vertically. The baselines of the items should match, ie. they should all be the same physical row. For example, in the swcond example the first box has been moved downwards so that the letter a is at the same line as e, as they are both at the baseline of their boxes. I'm not completely sure if "baseline" is the correct word for this, I know only that it is used in the field of typography for a similar purpose.
• Stan Strum: @fergusq On the first clause: "For text elements, the first line of text is the baseline, ie. 0.", does this mean the other "baselines" are shifting the text up?
• ASCII-only: @fergusq Baseline should be the correct word, IIRC it's used in the descriptions for CSS flexbox as well