// the following is from an ArrayController whose content is a set of Pages; the TreeController's content property is bound to this property:

  outline: function () {
    var contentLength = this.getPath('content.length') || 0;

    return contentLength === 0 ? null : SC.Object.create({
      title: 'toplevel',
      treeItemIsExpanded: YES,
      pages: this.map( function (page) { return page; } ),
      treeItemChildren: this.map( function (page) {
        var stepNum = 1;
        return SC.Object.create({
          title: page.get('name') || 'Page %@'.fmt(page.get('pageNumber') + 1),
          treeItemIsExpanded: YES,
          treeItemIsGrouped: NO,    // just added; doesn't make the page selectable
          page: page,
          steps: page.get('steps'),
          treeItemChildren: page.get('steps').map( function (step) {
            return SC.Object.create({
              title: 'Step %@'.fmt(stepNum++),
              step: step,
              treeItemIsExpanded: YES,
              treeItemChildren: null
            });
          })
        });
      })
    });
    // FIXME this will NOT update when steps are added/removed or have their properties changed
  }.property('[]').cacheable()