Reader setting toggles
Tap the page to reveal the toolbar. ViewModeToggle, ReadingDirectionToggle, and PageFitModeToggle drive the settings the viewer context exposes, so a toolbar does not have to wire the setters itself. None of them is part of the default toolbar, which keeps showing the reading progress alone: each is an independent named export that reaches the tree only where it is placed.
The view-mode toggle reports the mode through aria-pressed and disables itself on a viewport too narrow for a spread. The page-fit buttons each name one mode, so they compose into the group around them; a single one given no mode would cycle through the three instead.
Source code
1import * as ComicViewer from "@publira/comic-viewer";23export const Reader = ({ pages }) => (4 <ComicViewer.Root pages={pages}>5 <ComicViewer.Viewport />6 <ComicViewer.Toolbar>7 <ComicViewer.ViewModeToggle />8 <ComicViewer.ReadingDirectionToggle />9 <ComicViewer.PageProgress>10 <ComicViewer.PageProgressSlider />11 <ComicViewer.PageStatus />12 </ComicViewer.PageProgress>13 <div role="group" aria-label="Page fit">14 <ComicViewer.PageFitModeToggle mode="height" />15 <ComicViewer.PageFitModeToggle mode="width" />16 <ComicViewer.PageFitModeToggle mode="actual" />17 </div>18 </ComicViewer.Toolbar>19 <ComicViewer.PageNavigation />20 </ComicViewer.Root>21);