Prep for Preferences API

[JayPanoz]

This is a transitional PR whose purpose is to set the Playground for the Preferences API in ts-toolkit.

At the time of drafting, it contains the following changes:

• the placement of navigation arrows (on top of content vs. on each side of the container) has been removed from the EPUBNavigator custom hook;
• their logic and state (placement based on breakpoints) has been moved to the highest component (Reader) so that it’s handled in a single place – will come in handy with the Preference for the Arrows’ Visibility;
• consistency of React Aria’s FocusScope in DockedSheet has been improved; reverted as it created a focus trap;
• an unnecessary variable was removed from the DockPanel component.

These changes don’t introduce any change in how the Reader and its components currently work, or their affordances behave.

Considering the significant changes the Preferences API will bring to the Playground, the upgrade and migration should be handled as a second step, in another specific PR.

[cloudflare-workers-and-pages]

Deploying playground with    Cloudflare Pages

Latest commit:	8080d9a
Status:	✅  Deploy successful!
Preview URL:	https://b17bd8d6.playground-7xz.pages.dev
Branch Preview URL:	https://prefapi-prep.playground-7xz.pages.dev

View logs

[JayPanoz]

In addition:

• it makes the docking panels’ resize handler non-tabbeable when it’s empty or closed (but can be focused to expand if it’s been previously collapsed as it’s a separate state);
• it makes the docking panel inert when collapsed so that you can't tab into it;
• it improves the aria-label of the docking panel by the returning its state (closed, collapsed) and content (action heading);
• it adds a custom hook for prefersReducedTransparency and a state in theming so that all MQ listed in Support additional Media Features #55 are implemented and available to developers;
• it corrects the custom hook for prefersContrast since it’s an enum and not a boolean and could result in a logic that didn’t fulfil the intent (value can be less or custom with forced colors, which return true if not specified as the value you’re targeting);
• it adds a custom hook that checks window is defined:
  • it is used in custom hooks when it makes sense i.e. exposed functions in custom hooks;
  • otherwise useEffect should guarantee you’re on the client side and window, document, etc. are not undefined.
• it updates the intro sentence in the landing page, which was overseen while adding entries into the list.

[JayPanoz]

Finally, this PR updates dependencies and removes Vercel, that was originally added only to be pinned and get around a bug in Cloudflare's next-on-pages and make the project deployable. It also remove the @babel/core override to resolve #34 entirely.