could the pattern handle adding and removing elements? i mean, i bet it could be taught to, but in the current state it looks to deal a lot with nodes and not a node's participation in a tree. was just curious.

Yes, this can be extended to inserting, removing and reordering components by storing the parent, index in the parent and the selector itself. This would also work with text content as well. Using something like the Component below. I'm actively working on coming up with a good schema for this atm, I would appreciate your thoughts on this.

export type EditEvent = {
  createdAt: string;
  selector: string;
  editType: EditType;
  newVal: Record<string, string> | Component | TextVal;
  oldVal: Record<string, string> | Component | TextVal;
}

export type TextVal = {
  text: string;
}

export enum EditType {
  TEXT = "TEXT",
  STYLE = "STYLE",
  ATTR = "ATTR",
  INSERT = "INSERT",
  REMOVE = "REMOVE",
}

export interface Component {
  selector: string;
  parentSelector: string; // Parent selector
  index: number; // Index within parent
  content: string; // String content of the element (For reversibility)
}

how often is that unique selector used instead of the node as the key?

I like the selector better since it can be stored across sessions or exported as a string (to reproduce on another browser for example). But a weakmap to the element on the same session works too.

i imagine margin/padding/font/position adjustments are pretty easy to do next?

Positions are trickier, more on the insert-remove side but the rest are pretty straight forward.

small favor, consider temporarily disabling your formatter before a PR, so it's easier for me to see which lines you actually changed 😅

Yeah sorry I noticed that happening after making the PR but had already messed up everything 😞. Will do next time.

Let me know if you think this is worth pursuing and I can find some time to clean up and add more :)