Tools

Toolbars are generic: the app supplies the items, the active id and the change handler. Here the items are doodl's drawing tools, from toToolItems() in @n-uf/doodl-react, and every page carries a doodl drawing layer. Pick Rectangle (R) or Freehand (F) and draw on any page, Select (V) to move or delete shapes; Interact (I), the default, gives the pointer back to the page's live components.

const items = toToolItems(undefined, {
  only: ["select", "rect", "freehand"],
});

<HarbuzDossier
  toolbar={{ items, activeId, onChange, shortcuts: "shell" }}
  renderPage={(p) => (
    <Page {...p}>
      <PageAnnotationLayer tool={activeId} scale={p.zoom / 100} … />
    </Page>
  )}
/>

The same items feed the toolbar above and the dossier's own toolbar on the right edge. shortcuts picks who listens for the keys: the toolbar, the shell (keys keep working while the toolbar is hidden) or nobody. Drawings stay in this browser.