Add View Mode Options

Adds a new AnchoredBox component that is functionally a clone of the "saving error" notifications, but drops a lot of the JS in favor of the new (chrome-only!) CSS Anchor Positioning API.  In subsequent commits, either alternate styling or a polyfill will be added non-supported browsers.

The box contains a few inputs that modify the CSS applied to `.pages`, most critically a "start on right" toggle for the Facing Pages mode.

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -67,7 +67,8 @@ const BrewRenderer = (props)=>{
 		height     : PAGE_HEIGHT,
 		isMounted  : false,
 		visibility : 'hidden',
-		zoom       : 100
+		zoom       : 100,
+		pagesStyle : null
 	});
 
 	const mainRef  = useRef(null);
@@ -187,6 +188,13 @@ const BrewRenderer = (props)=>{
 		}));
 	};
 
+	const handleStyle = (newStyle)=>{
+		setState((prevState)=>({
+			...prevState,
+			pagesStyle : { ...prevState.pagesStyle, ...newStyle }, 
+		}));
+	};
+
 	return (
 		<>
 			{/*render dummy page while iFrame is mounting.*/}
@@ -204,7 +212,7 @@ const BrewRenderer = (props)=>{
 				<NotificationPopup />
 			</div>
 
-			<ToolBar onZoomChange={handleZoom} currentPage={props.currentBrewRendererPageNum}  totalPages={rawPages.length}/>
+			<ToolBar onZoomChange={handleZoom} currentPage={props.currentBrewRendererPageNum}  totalPages={rawPages.length} onStyleChange={handleStyle} />
 
 			{/*render in iFrame so broken code doesn't crash the site.*/}
 			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
@@ -223,7 +231,7 @@ const BrewRenderer = (props)=>{
 						&&
 						<>
 							{renderStyle()}
-							<div className='pages' lang={`${props.lang || 'en'}`} style={{ zoom: `${state.zoom}%` }}>
+							<div className='pages' lang={`${props.lang || 'en'}`} style={{ zoom: `${state.zoom}%`, ...state.pagesStyle }}>
 								{renderPages()}
 							</div>
 						</>