SmartNote

SketchSystems.spec

SmartNote
  UNFOCUS -> blurred
  FOCUS 1 -> SmartField 1
  FOCUS 2 -> SmartField 2
  FOCUS 3 -> SmartField 3
  blurred
    FOCUS -> focused
  focused
    SmartField 1
      SELECT -> SmartField 2
      NEXT -> SmartField 2
      PREV -> SmartField 3
    SmartField 2
      SELECT -> SmartField 3
      NEXT -> SmartField 3
      PREV -> SmartField 1
    SmartField 3
      SELECT -> blurred
      NEXT -> SmartField 1
      PREV -> SmartField 2

SketchSystems_prototype.js

function render(model){
  let states = model.active_states.map(s => `${s.parent.name} ${s.name}`);
  return states.map(s => <h1>{s}</h1>);
}