Reduce the visual prominence of the page input by using a darker background and a text color that matches the rest of the toolbar icons. Darker background still indicates this is an interactive item (is an input), hopefully.
Bad commit here with too much stuff. I apologize.
This sets up two Intersection Observers: the first captures every page that is at least 30% visible inside the `.pages` container, and the second captures every page that has at least one pixel on the horizontal center line of `.pages`. Both can be arrays of integers (page index).
The "visiblePages" array is duplicated and formatted into a "formattedPages" state, which gets displayed in the toolbar.
The toolbar displays that, unless the user clicks into the page input and enters their own integer (only a single integer, no range), which can then jump the preview to that page on Enter or blur().
The Arrow 'change page' buttons jump the preview back and forth by a 'full set'.
If one page is viewed at a time, this is moved on page a time, and if 10 pages are viewed at a time it jumps the pages by 10.
Left to do: adapt the "jump editor to match preview" divider button to work with new "centerPage".
This commit only renames things, changes no logic. Any mention of "book", "view", or "mode" is renamed in relation to "spreads".
The AnchoredBox.jsx file is renamed to Anchored.jsx
Extra icons are deleted, and the remaining ones are renamed.
Big change to how the AnchoredBox component is structured so that it can be used in more than just one spot. Now composed of the wrapper Anchored, with two children AnchoredTrigger and AnchoredBox, each of which can have their own arbitrary children.
Next steps will involve renaming the component file to Anchored.jsx, moving most styling out of the attached stylesheet (and into brewRenderer.less), and adding props to pass in Anchor Positioning properties.
If there were two inputs sending styles to the same target (ie row and column gap), they would override each other.
This change fixes that by deepening the merges. Admittedly, I turned to cGPT to help me with this as the nesting was throwing me for a loop. It works, though, and I understand it now that I can read it.
defaultValue matches the normal styled values of the gap property on the .pages element.
removed the "tooltip" that showed the current value from the range sliders inside the anchoredbox (the gap sliders).
Refactoring the AnchoredBox component because I wanted to set focus on the trigger button when the expanded box was closed. Wrapping the trigger into it's own component, with forwardRef, allows for passing the `ref` to the actual DOM node. Then the `.focus()` method will work on it.
