[mkroemer]

Builds on #6 (UI texts), #5 (icons) and #4 (theming). Until those are merged this PR shows their commits too; the components part is the last commit.

This lets a host render the toolbars and dialogs with its own design system's controls, for when design tokens are not enough. Each component a host leaves out keeps the built-in one, whose markup is unchanged.

<DocViewer
  src={file}
  editable
  components={{
    Button: ({ title, icon, label, children, active, expanded, disabled, onClick, onMouseDown }) => (
      <MyIconButton tooltip={title} aria-label={title} pressed={active} aria-expanded={expanded}
        disabled={disabled} onClick={onClick} onMouseDown={onMouseDown}>
        {icon}{label}{children}
      </MyIconButton>
    ),
    Separator: () => <MyDivider vertical />,
  }}
/>

There are five: Button, Select, Separator, Dialog and Toast, with typed props (ButtonProps, SelectProps, DialogProps, ToastProps).

• Every toolbar button goes through Button: the plain buttons, the toggles that open the color, table and border pickers, the overflow button and the font size steps. The dropdowns go through Select.
• PromptDialog and ConfirmDialog build their body and actions and render them through Dialog; Toast keeps its timer and renders through Toast.
• components is a prop of DocViewer, and UIComponentsProvider gives it to views mounted on their own. OfficeUIProvider carries icons, components, locale and strings in one provider.
• The overflow menu measures each toolbar item from a wrapper of its own, so a host component needs no ref.
• The overflow button's title is now its accessible name ("More tools"), so the unused "More" text is gone from the strings table.

The one thing a host component has to get right is the focus: the document must keep it while a toolbar control is used, or the command loses its selection. docs/theming.md ("Your own components") says how, for Button (pass onMouseDown on) and Select (open on mouse down, handle keys without focusing the list), and lists every prop.

test/ui.test.tsx covers each component and nested providers. e2e/components.spec.ts runs the viewer with host components: the toolbar renders them, formatting through a host button keeps the selection, the overflow menu still works at a narrow width, and the link prompt opens and submits through a host dialog. bun run typecheck, bun test and the e2e suite pass in CI.

🤖 Generated with Claude Code