One File, Two Shapes — A List That Does Not Know Its Length

So far the values changed but the shape did not. Real screens are not like that — nobody waiting and three waiting need to show different things.

Where it splits

{ "type": "conditional", "condition": "{{empty}}",
  "then":   { "type": "text", "text": "Nobody is waiting", ... },
  "orElse": { "type": "box", ... } }

True takes then, false takes orElse. Both are ordinary nodes, so anything can go in either.

Using {{empty}} here is the point. It is not {{waiting == 0}}. Who decides the condition is the server, not the screen — if the definition of "empty" changes (say, reservations stop counting), only the server changes.

Rows without a count

{ "type": "list", "items": "{{rows}}",
  "itemTemplate": { "type": "linear", "direction": "horizontal", "distribution": "space-between",
    "children": [
      { "type": "text", "text": "{{item.no}}", ... },
      { "type": "text", "text": "{{item.since}}", ... } ] } }

items points at an array; itemTemplate is the shape of one row. How many rows there are is not written anywhere.

Inside the template, {{item.*}} reaches that row's values, so they never collide with the state outside.

Put three in {{rows}} and there are three; put ten and there are ten. The file stays 1,234 bytes.