3d:T4c68,
// Every change is a named step: the list before and after, so undo and redo are exact.
// A delete offers undo as it happens; ⌘Z and ⇧⌘Z reach this list from anywhere on it,
// its buttons included, and from the page when it was the last thing used.
const START = ["water the basil", "book the ferry", "back up the sd cards"]

function List() {
  const root = React.useRef<HTMLDivElement>(null)
  const history = useHistory({ root })
  const [items, setItems] = React.useState(START)
  const seq = React.useRef(START.length)
  const change = (next: string[], label: string, offer = false) => {
    const before = items
    setItems(next)
    history.record(
      {
        label,
        undo: () => setItems(before),
        redo: () => setItems(next),
      },
      { offer },
    )
  }
  return (
    // A panel of work, undo and redo in its head where a toolbar keeps them, and
    // beside it the history's own panel, filling as the work is done.
    <div
      ref={root}
      className="grid w-full max-w-3xl items-start gap-5 md:grid-cols-[minmax(0,1fr)_16rem]"
    >
      <Card
        title="tasks"
        action={<UndoRedo history={history} />}
        footer={
          <Button
            variant="secondary"
            size="sm"
            onClick={() => {
              const item = `task ${++seq.current}`
              change([...items, item], `add ${item}`)
            }}
          >
            <Plus /> add a task
          </Button>
        }
      >
        <ul className="-mx-2 flex flex-col">
          {items.map((item, i) => (
            <li
              key={item}
              className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-fill-row-hover"
            >
              <span className="flex-1">{item}</span>
              <Button
                variant="ghost"
                size="icon-sm"
                aria-label={`move ${item} up`}
                disabled={i === 0}
                onClick={() =>
                  change(
                    [
                      ...items.slice(0, i - 1),
                      item,
                      items[i - 1] as string,
                      ...items.slice(i + 1),
                    ],
                    `move ${item} up`,
                  )
                }
              >
                <ArrowUp />
              </Button>
              <Button
                variant="ghost"
                size="icon-sm"
                aria-label={`delete ${item}`}
                onClick={() =>
                  change(
                    items.filter((x) => x !== item),
                    `delete ${item}`,
                    true,
                  )
                }
              >
                <Trash2 />
              </Button>
            </li>
          ))}
          {items.length === 0 && (
            <li className="px-2 py-1.5 text-sm text-foreground/45">
              no tasks: ⌘Z brings them back
            </li>
          )}
        </ul>
      </Card>
      <Card
        title="history"
        description="every change lands here; ⌘Z takes back the last, a press goes to any"
      >
        <HistoryList history={history} className="-mx-2" />
      </Card>
    </div>
  )
}

<List />
3c:["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$3d"}}]