Behavior

A set can say how it behaves: which state shows first, which events move it on, and what decides the way in each scenario. One build stores the set, its statechart, the binding of states to variants and its design axes, as a feature named after the set in lower case with dashes (Raga card is raga-card). The build's reply names it; every chart command takes that name.

The raga card above carries this behavior:

"behavior": {
  "axes": {"history": ["fresh", "practised"],
           "streak": {"values": ["short", "long"], "when": {"history": ["practised"]}}},
  "start": "Loading",
  "states": {
    "Loading": {"LOADED": "route"},
    "route": ["history == 'fresh' -> New", "streak == 'long' -> Learning", "Locked"],
    "New": {"START": "Learning"},
    "Learning": {"PAUSE": "Locked"},
    "Locked": {"UNLOCK": "Learning"}
  },
  "plays": {"Begin a new raga": ["LOADED", "START"]},
  "targets": {"START": "Start learning"}
}

#States

• A state named like a value of the set's variant property shows that variant (New, Learning, Locked).
• {"EVENT": "Target"} moves on when the event happens. A target may be "guard -> Target", a list of those (the first whose guard holds wins), or {"target", "guard", "assign"}.
• A state written as a list moves on at once: route picks the next state by the scenario. It is never on screen, so it needs no variant.
• note, nested states, initial and type (parallel, final) are written as in the full chart format.

#Scenarios

axes name what varies between situations. Every combination is a scenario; guards read the axis values. An axis with when applies only where earlier axes take those values and keeps its first value elsewhere, so streak does not double the fresh scenarios.

$ facet chart raga-card
3 scenarios over history (fresh, practised) × streak (short, long): 3 to 4 configurations each

Views:
  New          reachable where history is fresh, streak is short
  Learning     reachable in every scenario
  Locked       reachable in every scenario

Coverage: 4/10 transitions over every scenario
  untested in 3 scenario(s): Learning --PAUSE--> Locked
  untested in 3 scenario(s): Locked --UNLOCK--> Learning

Play skeletons (shortest paths to what no play reaches):
  Covers Learning --PAUSE--> Locked: LOADED → START → PAUSE
  Covers Locked --UNLOCK--> Learning: LOADED → START → PAUSE → UNLOCK
  Reaches Locked: LOADED → START → PAUSE
  Covers Locked --UNLOCK--> Learning: LOADED → UNLOCK
  Covers Learning --PAUSE--> Locked: LOADED → UNLOCK → PAUSE
  Reaches Learning: LOADED → UNLOCK
  Covers Learning --PAUSE--> Locked: LOADED → PAUSE
  Covers Locked --UNLOCK--> Learning: LOADED → PAUSE → UNLOCK
  Reaches Locked: LOADED → PAUSE

facet chart says where each view is reachable by axis values, what is not covered, and the shortest event sequences to reach what no play reaches (--full lists every scenario). Its words:

#Plays and targets

plays name event sequences to replay on the canvas: facet plays run raga-card "Begin a new raga" runs one in every scenario and says where it ends. targets name the layer each event acts on, so replays click the right thing; they are optional, and events without one replay without a click.

#Looks

looks are design axes: {"Look": {"Light": "Kit/Light", "Dark": "Kit/Dark"}} shows each option in a mode of the kit's variables. Lattice views (facet lattice) cross them with the scenarios.

The full chart format, for what the compact one does not cover, is in Chart.