Menus and toolbars

<Toolbar label="Drawing tools" className="rv-toolbar--surface">
  {(['select', 'rectangle', 'line', 'arrow', 'note'] as const).map(
    (tool) => (
      <IconButton
        key={tool}
        label={
          tool === 'select'
            ? 'Select tool'
            : `${tool[0].toUpperCase()}${tool.slice(1)} tool`
        }
        aria-pressed={drawingTool === tool}
        icon={`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="${DRAWING_TOOL_PATHS[tool]}"/></svg>`}
        onClick={() => setDrawingTool(tool)}
      />
    ),
  )}
</Toolbar>
<FieldHint>
  Choose a drawing tool. Drawing behavior stays in Charts.
</FieldHint>
<div class="catalog-row">
  <IconButton
    label="Drawing unavailable"
    disabled
    icon={`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="${DRAWING_TOOL_PATHS.rectangle}"/></svg>`}
  />
  <FieldHint>Drawing unavailable</FieldHint>
</div>

<Toolbar label="Document actions">
  <ToolbarGroup label="History">
    <IconButton
      label="Undo"
      icon={undoIcon}
      badge={history.undo}
      disabled={!history.undo}
      onClick={() =>
        setHistory(({ undo, redo }) => ({
          undo: undo - 1,
          redo: redo + 1,
        }))
      }
    />
    <IconButton
      label="Redo"
      icon={redoIcon}
      badge={history.redo}
      disabled={!history.redo}
      onClick={() =>
        setHistory(({ undo, redo }) => ({
          undo: undo + 1,
          redo: redo - 1,
        }))
      }
    />
  </ToolbarGroup>
  <ToolbarSeparator />
  <IconButton
    label="Export"
    icon={exportIcon}
    onClick={() => setToolbarAction('Export requested')}
  />
</Toolbar>
<FieldHint>History badges show available steps.</FieldHint>
<output aria-label="Toolbar action">{toolbarAction}</output>

<Menu label="Example menu" onClose={() => setMenuAction('Closed')}>
  <MenuItem onClick={() => setMenuAction('Open')}>Open</MenuItem>
  <MenuItem disabled>Unavailable</MenuItem>
  <MenuSeparator />
  <Submenu label="More actions">
    <MenuItem onClick={() => setMenuAction('Duplicate')}>
      Duplicate
    </MenuItem>
  </Submenu>
</Menu>
<output aria-label="Last action" aria-live="polite">
  {menuAction}
</output>