Node panel: ports read message first on inputs, code name is text until it differs

An input row now starts from its message and ends as the argument the code
takes it as ("as prompt"); an output keeps its key on top and the message
below. The name the code uses is muted text with a pencil while it follows the
message's last segment, and a field only when it differs. Device Follows ports
get the same order (message, then the port driven). A list port's item type
moves to the second row so it no longer squeezes the name, two ports deriving
one name get a warning, and the rows rebuilt use 44px touch targets on phones.
The stored node spec is unchanged.

docs/interface/flow-editor.md

@@ -33,12 +33,18 @@ and open its settings.
 
 ## The node panel
 
-**Consumes** and **Provides** declare the node's ports. Each has a port name,
-payload type, bound message and delivery interval. Outputs also have a
-streaming toggle.
+**Consumes** and **Provides** declare the node's ports. Each has a bound
+message, a port name, a payload type and a delivery interval. Outputs also have
+a streaming toggle.
+
+A row reads top to bottom, from where a value starts to where it ends. An
+input starts as a message and arrives in your code as an argument, so the
+message is on top and the argument below it (*as* `prompt`). An output starts
+as a key of what your code returns and ends as a message, so the key is on top.
 
 A **Device** node stands for a paired device instead: pick the device, then
-its ports under **Publishes** and **Follows** (see
+its ports under **Publishes** (the device's port, then the message) and
+**Follows** (the message, then the port it drives; see
 [the device's own ports](dashboards.md#the-devices-own-ports)). A device that
 reports its ports offers them in a list with their type filled in and a form
 for the settings each one reads, and the command palette offers each one as a
@@ -47,10 +53,14 @@ shortcut, such as *Hallway camera*.
 Message fields suggest existing names. Matching an output's message is how
 you connect an input.
 
-A blank port-name field follows the message's last segment. Set a port name
-to keep the argument name fixed while changing its message binding. Names use
-letters, digits and `_`, cannot start with a digit, and must be unique among
-the node's inputs or outputs.
+A port name follows the message's last segment (`home.outdoor` becomes
+`outdoor`) until you name it. While it follows, it is shown as muted text, and
+the pencil beside it opens a field. A field only appears on its own when the
+name differs from the message. Set a port name to keep the argument name fixed
+while changing its message binding. Names use letters, digits and `_`, cannot
+start with a digit, and must be unique among the node's inputs or outputs. Two
+messages that end in the same segment, such as `a.level` and `b.level`, get a
+warning until one of them is named differently.
 
 Renaming an output's message updates its consumers in the flow. Changing an
 input binding points that input at a different message.