7GUIs — Circle drawer

How it works

SVG through h() — the namespace is inferred down the tree. Undo/redo works on snapshots, and a whole radius drag collapses into one undo step: the first resize remembers the pre-drag state, and releasing the slider commits it.

} else if (msg.type === 'resize') {
  if (dragBase === null) dragBase = circles   // remember where the drag began
  circles = circles.map((c) => (c.id === msg.id ? { ...c, r: msg.r } : c))
} else if (msg.type === 'commit') {
  if (dragBase !== null && dragBase !== circles) snapshot(dragBase)
  dragBase = null                             // the whole drag is one undo step
}