How to programmatically pin a component to the top?

[abea]

I'm looking to programmatically add an article title as the first component in the editor. I don't want to let the user change this in the editor or move it from the top spot (it's edited elsewhere).

So far I'm doing this:

this.editor.Components.addComponent({
          tagName: 'h1',
          type: 'text',
          removable: false,
          draggable: false,
          styleable: false,
          copyable: false,
          content: 'My Post Title',
          style: { padding: '16px 16px 0' },
          attributes: { class: 'heading' }
        });

That adds the component as expected, however all the subsequent components I drag in are slotted in above that "heading" component, rather than below. Is there a way to ensure it stays in the top position?

Update:
I noticed that the programmatically-added component is not shown in my layers panel, so it's probably not considered part of the root layer. This would explain why others are added above it. I then attempted this, which add a component, but mostly ends up crashing the editor:

 const root = this.editor.Layers.getRoot();
 root.append({ ...same config as above });