import React from 'react'; export interface ScrollProgressSection { id: string; label: string; } /** Which side of the rail the section list opens toward. */ export type ScrollProgressPlacement = 'right' | 'left'; export interface ScrollProgressProps extends Omit, 'onSelect'> { /** 0-100. The caller computes this from whatever it is tracking — a * window scroll fraction, a custom scroll container, a reading-time * estimate. This component has no opinion on the source. */ progress: number; sections: ScrollProgressSection[]; /** The section the rail's heavier tick and the panel's selected row point * to. Also the caller's to compute — see `progress`. */ activeId?: string; /** Fired when a row is chosen. The component does not scroll anywhere * itself; matching Menu, it reports the choice and lets the caller decide * what "select this section" means for their page. */ onSelect?: (id: string) => void; /** Which way the section list opens. `right` suits a rail on the left of the * content; a rail against the right edge of the page needs `left`, or the * open list runs off the screen. */ placement?: ScrollProgressPlacement; /** * The rail button's name — "Reading progress: 32%. Currently in Usage. * Activate to jump to a section." in English. Receives the rounded * percentage and the active section's label, when there is one. */ triggerLabel?: (progress: number, section?: string) => string; } /** * The compact rail is the disclosure trigger. It is a real `