Merge branch 'addAdminFixScriptTool-#3801' of https://github.com/G-Ambatte/homebrewery into addAdminFixScriptTool-#3801

2025-12-24 18:32:41 +00:00 · 2024-11-10 19:23:47 +13:00
parent bd26f02ddb c6b0b6a0ea
commit 49d30007d3
22 changed files with 1275 additions and 418 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -76,6 +76,9 @@ jobs:
      - run:
          name: Test - Routes
          command: npm run test:route
+      - run:
+          name: Test - HTML sanitization
+          command: npm run test:safehtml
      - run:
          name: Test - Coverage
          command: npm run test:coverage
--- a/client/components/Anchored.jsx
+++ b/client/components/Anchored.jsx
@@ -0,0 +1,91 @@
+import React, { useState, useRef, forwardRef, useEffect, cloneElement, Children } from 'react';
+import './Anchored.less';
+
+// Anchored is a wrapper component that must have as children an <AnchoredTrigger> and a <AnchoredBox> component.
+// AnchoredTrigger must have a unique `id` prop, which is passed up to Anchored, saved in state on mount, and
+// then passed down through props into AnchoredBox.  The `id` is used for the CSS Anchor Positioning properties.
+// **The Anchor Positioning API is not available in Firefox yet**
+// So in Firefox the positioning isn't perfect but is likely sufficient, and FF team seems to be working on the API quickly.
+
+
+const Anchored = ({ children })=>{
+	const [visible, setVisible] = useState(false);
+	const [anchorId, setAnchorId] = useState(null);
+	const boxRef = useRef(null);
+	const triggerRef = useRef(null);
+
+	// promote trigger id to Anchored id (to pass it back down to the box as "anchorId")
+	useEffect(()=>{
+		if(triggerRef.current){
+			setAnchorId(triggerRef.current.id);
+		}
+	}, []);
+
+	// close box on outside click or Escape key
+	useEffect(()=>{
+		const handleClickOutside = (evt)=>{
+			if(
+				boxRef.current &&
+				!boxRef.current.contains(evt.target) &&
+				triggerRef.current &&
+				!triggerRef.current.contains(evt.target)
+			) {
+				setVisible(false);
+			}
+		};
+
+		const handleEscapeKey = (evt)=>{
+			if(evt.key === 'Escape') setVisible(false);
+		};
+
+		window.addEventListener('click', handleClickOutside);
+		window.addEventListener('keydown', handleEscapeKey);
+
+		return ()=>{
+			window.removeEventListener('click', handleClickOutside);
+			window.removeEventListener('keydown', handleEscapeKey);
+		};
+	}, []);
+
+	const toggleVisibility = ()=>setVisible((prev)=>!prev);
+
+	// Map children to inject necessary props
+	const mappedChildren = Children.map(children, (child)=>{
+		if(child.type === AnchoredTrigger) {
+			return cloneElement(child, { ref: triggerRef, toggleVisibility, visible });
+		}
+		if(child.type === AnchoredBox) {
+			return cloneElement(child, { ref: boxRef, visible, anchorId });
+		}
+		return child;
+	});
+
+	return <>{mappedChildren}</>;
+};
+
+// forward ref for AnchoredTrigger
+const AnchoredTrigger = forwardRef(({ toggleVisibility, visible, children, className, ...props }, ref)=>(
+	<button
+		ref={ref}
+		className={`anchored-trigger${visible ? ' active' : ''} ${className}`}
+		onClick={toggleVisibility}
+		style={{ anchorName: `--${props.id}` }}   // setting anchor properties here allows greater recyclability.
+		{...props}
+	>
+		{children}
+	</button>
+));
+
+// forward ref for AnchoredBox
+const AnchoredBox = forwardRef(({ visible, children, className, anchorId, ...props }, ref)=>(
+	<div
+		ref={ref}
+		className={`anchored-box${visible ? ' active' : ''} ${className}`}
+		style={{ positionAnchor: `--${anchorId}` }}   // setting anchor properties here allows greater recyclability.
+		{...props}
+	>
+		{children}
+	</div>
+));
+
+export { Anchored, AnchoredTrigger, AnchoredBox };
--- a/client/components/Anchored.less
+++ b/client/components/Anchored.less
@@ -0,0 +1,13 @@
+
+
+.anchored-box {
+	position:absolute;
+	@supports (inset-block-start: anchor(bottom)){
+		inset-block-start: anchor(bottom);
+	}
+	justify-self: anchor-center;
+	visibility: hidden;
+	&.active {
+		visibility: visible;
+	}
+}
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -16,8 +16,7 @@ const Frame = require('react-frame-component').default;
 const dedent = require('dedent-tabs').default;
 const { printCurrentBrew } = require('../../../shared/helpers.js');

-const DOMPurify = require('dompurify');
-const purifyConfig = { FORCE_BODY: true, SANITIZE_DOM: false };
+import { safeHTML } from './safeHTML.js';

 const PAGE_HEIGHT = 1056;

@@ -29,6 +28,7 @@ const INITIAL_CONTENT = dedent`
 	<base target=_blank>
 	</head><body style='overflow: hidden'><div></div></body></html>`;

+
 //v=====----------------------< Brew Page Component >---------------------=====v//
 const BrewPage = (props)=>{
 	props = {
@@ -36,8 +36,8 @@ const BrewPage = (props)=>{
 		index    : 0,
 		...props
 	};
-	const cleanText = props.contents; //DOMPurify.sanitize(props.contents, purifyConfig);
-	return <div className={props.className} id={`p${props.index + 1}`} >
+	const cleanText = safeHTML(props.contents);
+	return <div className={props.className} id={`p${props.index + 1}`} style={props.style}>
 	         <div className='columnWrapper' dangerouslySetInnerHTML={{ __html: cleanText }} />
 	       </div>;
 };
@@ -65,8 +65,14 @@ const BrewRenderer = (props)=>{

 	const [state, setState] = useState({
 		isMounted  : false,
-		visibility : 'hidden',
-		zoom       : 100
+		visibility : 'hidden'
+	});
+
+	const [displayOptions, setDisplayOptions] = useState({
+		zoomLevel    : 100,
+		spread       : 'single',
+		startOnRight : true,
+		pageShadows  : true
 	});

 	const mainRef  = useRef(null);
@@ -77,19 +83,19 @@ const BrewRenderer = (props)=>{
 		rawPages = props.text.split(/^\\page$/gm);
 	}

-	const scrollToHash = (hash) => {
-		if (!hash) return;
+	const scrollToHash = (hash)=>{
+		if(!hash) return;

 		const iframeDoc = document.getElementById('BrewRenderer').contentDocument;
 		let anchor = iframeDoc.querySelector(hash);

-		if (anchor) {
+		if(anchor) {
 			anchor.scrollIntoView({ behavior: 'smooth' });
 		} else {
 			// Use MutationObserver to wait for the element if it's not immediately available
-			new MutationObserver((mutations, obs) => {
-				anchor = iframeDoc.querySelector(hash);	
-				if (anchor) {
+			new MutationObserver((mutations, obs)=>{
+				anchor = iframeDoc.querySelector(hash);
+				if(anchor) {
 					anchor.scrollIntoView({ behavior: 'smooth' });
 					obs.disconnect();
 				}
@@ -125,9 +131,9 @@ const BrewRenderer = (props)=>{
 	};

 	const renderStyle = ()=>{
-		const cleanStyle = props.style; //DOMPurify.sanitize(props.style, purifyConfig);
 		const themeStyles = props.themeBundle?.joinedStyles ?? '<style>@import url("/themes/V3/Blank/style.css");</style>';
-		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `${themeStyles} \n\n <style> ${cleanStyle} </style>` }} />;
+		const cleanStyle = safeHTML(`${themeStyles} \n\n <style> ${props.style} </style>`);
+		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: cleanStyle }} />;
 	};

 	const renderPage = (pageText, index)=>{
@@ -137,7 +143,13 @@ const BrewRenderer = (props)=>{
 		} else {
 			pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
 			const html = Markdown.render(pageText, index);
-			return <BrewPage className='page' index={index} key={index} contents={html} />;
+
+			const styles = {
+				...(!displayOptions.pageShadows ? { boxShadow: 'none' } : {})
+				// Add more conditions as needed
+			};
+
+			return <BrewPage className='page' index={index} key={index} contents={html} style={styles} />;
 		}
 	};

@@ -187,12 +199,14 @@ const BrewRenderer = (props)=>{
 		document.dispatchEvent(new MouseEvent('click'));
 	};

-	//Toolbar settings:
-	const handleZoom = (newZoom)=>{
-		setState((prevState)=>({
-			...prevState,
-			zoom : newZoom
-		}));
+	const handleDisplayOptionsChange = (newDisplayOptions)=>{
+		setDisplayOptions(newDisplayOptions);
+	};
+
+	const pagesStyle = {
+		zoom      : `${displayOptions.zoomLevel}%`,
+		columnGap : `${displayOptions.columnGap}px`,
+		rowGap    : `${displayOptions.rowGap}px`
 	};

 	const styleObject = {};
@@ -201,8 +215,8 @@ const BrewRenderer = (props)=>{
 		styleObject.backgroundImage = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40px' width='200px'><text x='0' y='15' fill='%23fff7' font-size='20'>${global.config.deployment}</text></svg>")`;
 	}

-	const renderedStyle = useMemo(()=> renderStyle(), [props.style, props.themeBundle]);
-	renderedPages = useMemo(() => renderPages(), [props.text]);
+	const renderedStyle = useMemo(()=>renderStyle(), [props.style, props.themeBundle]);
+	renderedPages = useMemo(()=>renderPages(), [props.text]);

 	return (
 		<>
@@ -221,7 +235,7 @@ const BrewRenderer = (props)=>{
 				<NotificationPopup />
 			</div>

-			<ToolBar onZoomChange={handleZoom} currentPage={props.currentBrewRendererPageNum}  totalPages={rawPages.length}/>
+			<ToolBar displayOptions={displayOptions} currentPage={props.currentBrewRendererPageNum} totalPages={rawPages.length} onDisplayOptionsChange={handleDisplayOptionsChange} />

 			{/*render in iFrame so broken code doesn't crash the site.*/}
 			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
@@ -240,7 +254,8 @@ const BrewRenderer = (props)=>{
 						&&
 						<>
 							{renderedStyle}
-							<div className='pages' lang={`${props.lang || 'en'}`} style={{ zoom: `${state.zoom}%` }}>
+							<div lang={`${props.lang || 'en'}`} style={pagesStyle} className={
+								`pages ${displayOptions.startOnRight ? 'recto' : 'verso'}	${displayOptions.spread}` } >
 								{renderedPages}
 							</div>
 						</>
--- a/client/homebrew/brewRenderer/brewRenderer.less
+++ b/client/homebrew/brewRenderer/brewRenderer.less
@@ -3,13 +3,45 @@
 .brewRenderer {
 	overflow-y    : scroll;
 	will-change   : transform;
-	padding-top   : 30px;
+	padding-top   : 60px;
 	height        : 100vh;
+	&:has(.facing, .flow) {
+		padding : 60px 30px;
+	}
 	&.deployment {
 		background-color: darkred;
 	}
 	:where(.pages) {
-		margin : 30px 0px;
+		&.facing {
+			display: grid; 
+			grid-template-columns: repeat(2, auto); 
+			grid-template-rows: repeat(3, auto); 
+			gap: 10px 10px; 
+			justify-content: center;
+			&.recto .page:first-child {
+				// sets first page on 'right' ('recto') of the preview, as if for a Cover page.  
+				// todo: add a checkbox to toggle this setting
+				grid-column-start: 2; 
+			}
+			& :where(.page) {
+				margin-left: unset !important;
+				margin-right: unset !important;
+			}
+		}
+
+		&.flow {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 10px;
+			justify-content: flex-start;
+			& :where(.page) {
+				flex: 0 0 auto;
+				margin-left: unset !important;
+				margin-right: unset !important;
+			}
+
+		}
+
 		& > :where(.page) {
 			width         : 215.9mm;
 			height        : 279.4mm;
--- a/client/homebrew/brewRenderer/safeHTML.js
+++ b/client/homebrew/brewRenderer/safeHTML.js
@@ -0,0 +1,46 @@
+// Derived from the vue-html-secure package, customized for Homebrewery
+
+let doc = null;
+let div = null;
+
+function safeHTML(htmlString) {
+	// If the Document interface doesn't exist, exit
+	if(typeof document == 'undefined') return null;
+	// If the test document and div don't exist, create them
+	if(!doc) doc = document.implementation.createHTMLDocument('');
+	if(!div) div = doc.createElement('div');
+
+	// Set the test div contents to the evaluation string
+	div.innerHTML = htmlString;
+	// Grab all nodes from the test div
+	const elements = div.querySelectorAll('*');
+
+	// Blacklisted tags
+	const blacklistTags = ['script', 'noscript', 'noembed'];
+	// Tests to remove attributes
+	const blacklistAttrs = [
+		(test)=>{return test.localName.indexOf('on') == 0;},
+		(test)=>{return test.localName.indexOf('type') == 0 && test.value.match(/submit/i);},
+		(test)=>{return test.value.replace(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205f\u3000]/g, '').toLowerCase().trim().indexOf('javascript:') == 0;}
+	];
+
+
+	elements.forEach((element)=>{
+		// Check each element for blacklisted type
+		if(blacklistTags.includes(element?.localName?.toLowerCase())) {
+			element.remove();
+			return;
+		}
+		// Check remaining elements for blacklisted attributes
+		for (const attribute of element.attributes){
+			if(blacklistAttrs.some((test)=>{return test(attribute);})) {
+				element.removeAttribute(attribute.localName);
+				break;
+			};
+		};
+	});
+
+	return div.innerHTML;
+};
+
+module.exports.safeHTML = safeHTML;
--- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx
@@ -3,26 +3,28 @@ const React = require('react');
 const { useState, useEffect } = React;
 const _ = require('lodash');

+import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anchored.jsx';
+// import * as ZoomIcons from '../../../icons/icon-components/zoomIcons.jsx';

 const MAX_ZOOM = 300;
 const MIN_ZOOM = 10;

-const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
+const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChange })=>{

-	const [zoomLevel, setZoomLevel] = useState(100);
-	const [pageNum, setPageNum]     = useState(currentPage);
+	const [pageNum, setPageNum] = useState(currentPage);
 	const [toolsVisible, setToolsVisible] = useState(true);

-	useEffect(()=>{
-		onZoomChange(zoomLevel);
-	}, [zoomLevel]);
-
 	useEffect(()=>{
 		setPageNum(currentPage);
 	}, [currentPage]);

 	const handleZoomButton = (zoom)=>{
-		setZoomLevel(_.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
+		handleOptionChange('zoomLevel', _.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
+	};
+
+	const handleOptionChange = (optionKey, newValue)=>{
+		//setDisplayOptions(prevOptions => ({ ...prevOptions, [optionKey]: newValue }));
+		onDisplayOptionsChange({ ...displayOptions, [optionKey]: newValue });
 	};

 	const handlePageInput = (pageInput)=>{
@@ -63,47 +65,51 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{

 		const margin = 5;  // extra space so page isn't edge to edge (not truly "to fill")

-		const deltaZoom = (desiredZoom - zoomLevel) - margin;
+		const deltaZoom = (desiredZoom - displayOptions.zoomLevel) - margin;
 		return deltaZoom;
 	};

 	return (
-		<div className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`}>
+		<div id='preview-toolbar' className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`} role='toolbar'>
 			<button className='toggleButton' title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{setToolsVisible(!toolsVisible);}}><i className='fas fa-glasses' /></button>
 			{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
-			<div className='group'>
+			<div className='group' role='group' aria-label='Zoom' aria-hidden={!toolsVisible}>
 				<button
 					id='fill-width'
 					className='tool'
-					onClick={()=>handleZoomButton(zoomLevel + calculateChange('fill'))}
+					title='Set zoom to fill preview with one page'
+					onClick={()=>handleZoomButton(displayOptions.zoomLevel + calculateChange('fill'))}
 				>
 					<i className='fac fit-width' />
 				</button>
 				<button
 					id='zoom-to-fit'
 					className='tool'
-					onClick={()=>handleZoomButton(zoomLevel + calculateChange('fit'))}
+					title='Set zoom to fit entire page in preview'
+					onClick={()=>handleZoomButton(displayOptions.zoomLevel + calculateChange('fit'))}
 				>
 					<i className='fac zoom-to-fit' />
 				</button>
 				<button
 					id='zoom-out'
 					className='tool'
-					onClick={()=>handleZoomButton(zoomLevel - 20)}
-					disabled={zoomLevel <= MIN_ZOOM}
+					onClick={()=>handleZoomButton(displayOptions.zoomLevel - 20)}
+					disabled={displayOptions.zoomLevel <= MIN_ZOOM}
+					title='Zoom Out'
 				>
 					<i className='fas fa-magnifying-glass-minus' />
 				</button>
 				<input
 					id='zoom-slider'
-					className='range-input tool'
+					className='range-input tool hover-tooltip'
 					type='range'
 					name='zoom'
+					title='Set Zoom'
 					list='zoomLevels'
 					min={MIN_ZOOM}
 					max={MAX_ZOOM}
 					step='1'
-					value={zoomLevel}
+					value={displayOptions.zoomLevel}
 					onChange={(e)=>handleZoomButton(parseInt(e.target.value))}
 				/>
 				<datalist id='zoomLevels'>
@@ -113,18 +119,72 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				<button
 					id='zoom-in'
 					className='tool'
-					onClick={()=>handleZoomButton(zoomLevel + 20)}
-					disabled={zoomLevel >= MAX_ZOOM}
+					onClick={()=>handleZoomButton(displayOptions.zoomLevel + 20)}
+					disabled={displayOptions.zoomLevel >= MAX_ZOOM}
+					title='Zoom In'
 				>
 					<i className='fas fa-magnifying-glass-plus' />
 				</button>
 			</div>

+			{/*v=====----------------------< Spread Controls >---------------------=====v*/}
+			<div className='group' role='group' aria-label='Spread' aria-hidden={!toolsVisible}>
+				<div className='radio-group' role='radiogroup'>
+					<button role='radio'
+						id='single-spread'
+						className='tool'
+						title='Single Page'
+						onClick={()=>{handleOptionChange('spread', 'active');}}
+						aria-checked={displayOptions.spread === 'single'}
+					><i className='fac single-spread' /></button>
+					<button role='radio'
+						id='facing-spread'
+						className='tool'
+						title='Facing Pages'
+						onClick={()=>{handleOptionChange('spread', 'facing');}}
+						aria-checked={displayOptions.spread === 'facing'}
+					><i className='fac facing-spread' /></button>
+					<button role='radio'
+						id='flow-spread'
+						className='tool'
+						title='Flow Pages'
+						onClick={()=>{handleOptionChange('spread', 'flow');}}
+						aria-checked={displayOptions.spread === 'flow'}
+					><i className='fac flow-spread' /></button>
+
+				</div>
+				<Anchored>
+					<AnchoredTrigger id='spread-settings' className='tool' title='Spread options'><i className='fas fa-gear' /></AnchoredTrigger>
+					<AnchoredBox title='Options'>
+						<h1>Options</h1>
+						<label title='Modify the horizontal space between pages.'>
+							Column gap
+							<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>handleOptionChange('columnGap', evt.target.value)} />
+						</label>
+						<label title='Modify the vertical space between rows of pages.'>
+							Row gap
+							<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>handleOptionChange('rowGap', evt.target.value)} />
+						</label>
+						<label title='Start 1st page on the right side, such as if you have cover page.'>
+							Start on right
+							<input type='checkbox' checked={displayOptions.startOnRight} onChange={()=>{handleOptionChange('startOnRight', !displayOptions.startOnRight);}}
+								title={displayOptions.spread !== 'facing' ? 'Switch to Facing to enable toggle.' : null} />
+						</label>
+						<label title='Toggle the page shadow on every page.'>
+							Page shadows
+							<input type='checkbox' checked={displayOptions.pageShadows} onChange={()=>{handleOptionChange('pageShadows', !displayOptions.pageShadows);}} />
+						</label>
+					</AnchoredBox>
+				</Anchored>
+			</div>
+
 			{/*v=====----------------------< Page Controls >---------------------=====v*/}
-			<div className='group'>
+			<div className='group' role='group'  aria-label='Pages' aria-hidden={!toolsVisible}>
 				<button
 					id='previous-page'
 					className='previousPage tool'
+					type='button'
+					title='Previous Page(s)'
 					onClick={()=>scrollToPage(pageNum - 1)}
 					disabled={pageNum <= 1}
 				>
@@ -137,6 +197,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 						className='text-input'
 						type='text'
 						name='page'
+						title='Current page(s) in view'
 						inputMode='numeric'
 						pattern='[0-9]'
 						value={pageNum}
@@ -145,12 +206,14 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 						onBlur={()=>scrollToPage(pageNum)}
 						onKeyDown={(e)=>e.key == 'Enter' && scrollToPage(pageNum)}
 					/>
-					<span id='page-count'>/ {totalPages}</span>
+					<span id='page-count' title='Total Page Count'>/ {totalPages}</span>
 				</div>

 				<button
 					id='next-page'
 					className='tool'
+					type='button'
+					title='Next Page(s)'
 					onClick={()=>scrollToPage(pageNum + 1)}
 					disabled={pageNum >= totalPages}
 				>
--- a/client/homebrew/brewRenderer/toolBar/toolBar.less
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.less
@@ -16,8 +16,8 @@
 	color            : #CCCCCC;
 	background-color : #555555;
 	& > *:not(.toggleButton) {
-		opacity: 1;
-		transition: all .2s ease;
+		opacity    : 1;
+		transition : all 0.2s ease;
 	}

 	.group {
@@ -34,6 +34,70 @@
 		align-items : center;
 	}

+	.active, [aria-checked='true'] { background-color : #444444; }
+
+	.anchored-trigger {
+		&.active { background-color : #444444; }
+	}
+
+	.anchored-box {
+		--box-color      : #555555;
+		top              : 30px;
+		display          : flex;
+		flex-direction   : column;
+		gap              : 5px;
+		padding          : 15px;
+		margin-top       : 10px;
+		font-size        : 0.8em;
+		color            : #CCCCCC;
+		background-color : var(--box-color);
+		border-radius    : 5px;
+	
+		h1 {
+			padding-bottom : 0.3em;
+			margin-bottom  : 0.5em;
+			border-bottom  : 1px solid currentColor;
+		}
+	
+		h2 {
+			padding-bottom : 0.3em;
+			margin         : 1em 0 0.5em 0;
+			color          : lightgray;
+			border-bottom  : 1px solid currentColor;
+		}
+	
+		label {
+			display         : flex;
+			gap             : 6px;
+			align-items     : center;
+			justify-content : space-between;
+	
+		}
+		input {
+			height : unset;
+			&[type='range'] { padding : 0; }
+		}
+		&::before {
+			position       : absolute;
+			top            : -20px;
+			left           : 50%;
+			width          : 0px;
+			height         : 0px;
+			pointer-events : none;
+			content        : '';
+			border         : 10px solid transparent;
+			border-bottom  : 10px solid var(--box-color);
+			transform      : translateX(-50%);
+		}
+
+	}
+
+	.radio-group:has(button[role='radio']) {
+		display : flex;
+		height  : 100%;
+		border  : 1px solid #333333;
+	}
+
 	input {
 		position       : relative;
 		height         : 1.5em;
@@ -57,7 +121,7 @@
 				outline          : none;
 			}

-			&:hover::after {
+			&.hover-tooltip[value]:hover::after {
 				position         : absolute;
 				bottom           : -30px;
 				left             : 50%;
@@ -83,7 +147,7 @@
 	}

 	button {
-		box-sizing       : content-box;
+		box-sizing       : border-box;
 		display          : flex;
 		align-items      : center;
 		justify-content  : center;
@@ -94,35 +158,36 @@
 		font-weight      : unset;
 		color            : inherit;
 		background-color : unset;
+
+		&:not(button:has(i, svg)) { padding : 0 8px; }
+
 		&:hover { background-color : #444444; }
-		&:focus { outline : 1px solid #D3D3D3; }
+		&:focus { border  : 1px solid #D3D3D3;outline : none;}
 		&:disabled {
 			color            : #777777;
 			background-color : unset !important;
 		}
-		i {
-			font-size:1.2em;
-		}
+		i { font-size : 1.2em; }
 	}

 	&.hidden {
-		width: 32px;
-		transition: all .3s ease;
-		flex-wrap:nowrap;
-		overflow: hidden;
-		background-color: unset;
-		opacity: .5;
+		flex-wrap        : nowrap;
+		width            : 32px;
+		overflow         : hidden;
+		background-color : unset;
+		opacity          : 0.5;
+		transition       : all 0.3s ease;
 		& > *:not(.toggleButton) {
-			opacity: 0;
-			transition: all .2s ease;
+			opacity    : 0;
+			transition : all 0.2s ease;
 		}
 	}
 }

 button.toggleButton {
-	z-index : 5;
-	position:absolute;
-	left: 0;
-	width: 32px;
-	min-width: unset;
+	position  : absolute;
+	left      : 0;
+	z-index   : 5;
+	width     : 32px;
+	min-width : unset;
 }
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -430,6 +430,7 @@ const EditPage = createClass({
 			{this.renderNavbar()}

 			{this.props.brew.lock && <LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} />}
+			<div className="content">
 			<SplitPane onDragFinish={this.handleSplitMove}>
 				<Editor
 					ref={this.editor}
@@ -463,6 +464,7 @@ const EditPage = createClass({
 					allowPrint={true}
 				/>
 			</SplitPane>
+			</div>
 		</div>;
 	}
 });
--- a/client/homebrew/pages/homePage/homePage.jsx
+++ b/client/homebrew/pages/homePage/homePage.jsx
@@ -100,6 +100,7 @@ const HomePage = createClass({
 		return <div className='homePage sitePage'>
 			<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
 			{this.renderNavbar()}
+			<div className="content">
 			<SplitPane onDragFinish={this.handleSplitMove}>
 				<Editor
 					ref={this.editor}
@@ -125,6 +126,7 @@ const HomePage = createClass({
 					themeBundle={this.state.themeBundle}
 				/>
 			</SplitPane>
+			</div>
 			<div className={cx('floatingSaveButton', { show: this.state.welcomeText != this.state.brew.text })} onClick={this.handleSave}>
 				Save current <i className='fas fa-save' />
 			</div>
--- a/client/homebrew/pages/newPage/newPage.jsx
+++ b/client/homebrew/pages/newPage/newPage.jsx
@@ -223,6 +223,7 @@ const NewPage = createClass({
 	render : function(){
 		return <div className='newPage sitePage'>
 			{this.renderNavbar()}
+			<div className="content">
 			<SplitPane onDragFinish={this.handleSplitMove}>
 				<Editor
 					ref={this.editor}
@@ -254,6 +255,7 @@ const NewPage = createClass({
 					allowPrint={true}
 				/>
 			</SplitPane>
+			</div>
 		</div>;
 	}
 });
--- a/client/homebrew/pages/vaultPage/vaultPage.jsx
+++ b/client/homebrew/pages/vaultPage/vaultPage.jsx
@@ -411,10 +411,11 @@ const VaultPage = (props)=>{
 	};

 	return (
-		<div className='vaultPage'>
+		<div className='sitePage vaultPage'>
 			<link href='/themes/V3/Blank/style.css' rel='stylesheet' />
 			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet' />
 			{renderNavItems()}
+			<div className="content">
 			<SplitPane showDividerButtons={false}>
 				<div className='form dataGroup'>{renderForm()}</div>
 				<div className='resultsContainer dataGroup'>
@@ -422,6 +423,7 @@ const VaultPage = (props)=>{
 					{renderFoundBrews()}
 				</div>
 			</SplitPane>
+			</div>
 		</div>
 	);
 };
--- a/client/homebrew/pages/vaultPage/vaultPage.less
+++ b/client/homebrew/pages/vaultPage/vaultPage.less
@@ -5,373 +5,369 @@

 	*:not(input) { user-select : none; }

-	.content {
+	.content .dataGroup {
+		width      : 100%;
 		height     : 100%;
-		background : #2C3E50;
+		background : white;

-		.dataGroup {
-			width      : 100%;
-			height     : 100%;
-			background : white;
+		&.form .brewLookup {
+			position : relative;
+			padding  : 50px clamp(20px, 4vw, 50px);

-			&.form .brewLookup {
-				position : relative;
-				padding  : 50px clamp(20px, 4vw, 50px);
-
-				small {
-					font-size : 10pt;
-					color     : #555555;
+			small {
+				font-size : 10pt;
+				color     : #555555;
 			
-					a { color : #333333; }
-				}
+				a { color : #333333; }
+			}

-				code {
-					padding-inline : 5px;
-					font-family    : monospace;
-					background     : lightgrey;
-					border-radius  : 5px;
-				}
+			code {
+				padding-inline : 5px;
+				font-family    : monospace;
+				background     : lightgrey;
+				border-radius  : 5px;
+			}

-				h1, h2, h3, h4 {
-					font-family    : 'CodeBold';
-					letter-spacing : 2px;
-				}
+			h1, h2, h3, h4 {
+				font-family    : 'CodeBold';
+				letter-spacing : 2px;
+			}
 				
-				legend {
-					h3 {
-						margin-block  : 30px 20px;
-						font-size     : 20px;
-						text-align    : center;
-						border-bottom : 2px solid;
-					}
-					ul {
-						padding-inline : 30px 10px;
-						li {
-							margin-block : 5px;
-							line-height  : calc(1em + 5px);
-							list-style   : disc;
-						}
-					} 
-				}
-
-				&::after {
-					position    : absolute;
-					top         : 0;
-					right       : 0;
-					left        : 0;
-					display     : block;
-					padding     : 10px;
-					font-weight : 900;
-					color       : white;
-					white-space : pre-wrap;
-					content     : 'Error:\A At least one renderer should be enabled to make a search';
-					background  : rgb(255, 60, 60);
-					opacity     : 0;
-					transition  : opacity 0.5s;
-				}
-				&:not(:has(input[type='checkbox']:checked))::after { opacity : 1; }
-
-				.formTitle {
-					margin        : 20px 0;
-					font-size     : 30px;
-					color         : black;
+			legend {
+				h3 {
+					margin-block  : 30px 20px;
+					font-size     : 20px;
 					text-align    : center;
 					border-bottom : 2px solid;
 				}
-
-				.formContents {
-					position       : relative;
-					display        : flex;
-					flex-direction : column;
-
-					label {
-						display     : flex;
-						align-items : center; 
-						margin      : 10px 0;
+				ul {
+					padding-inline : 30px 10px;
+					li {
+						margin-block : 5px;
+						line-height  : calc(1em + 5px);
+						list-style   : disc;
 					}
-					select { margin : 0 10px; }
-
-					input { 
-						margin   : 0 10px; 
-
-						&:invalid { background : rgb(255, 188, 181); }
-					
-						&[type='checkbox'] {
-							position       : relative;
-							display        : inline-block;
-							width          : 50px;
-							height         : 30px;
-							font-family    : 'WalterTurncoat';
-							font-size      : 20px;
-							font-weight    : 800;
-							color          : white;
-							letter-spacing : 2px;
-							appearance     : none;
-							background     : red;
-							isolation      : isolate;
-							border-radius  : 5px;
-
-							&::before,&::after {
-								position    : absolute;
-								inset       : 0;
-								z-index     : 5;
-								padding-top : 2px;
-								text-align  : center;
-							}
-
-							&::before {
-								display : block;
-								content : 'No';
-							}
-
-							&::after {
-								display : none;
-								content : 'Yes';
-							}
-
-							&:checked {
-								background : green;
-
-								&::before { display : none; }
-								&::after { display : block; }
-							}
-						}
-					}
-
-					#searchButton {
-						position : absolute;
-						right    : 20px;
-						bottom   : 0;
-
-						i {
-							margin-left         : 10px;
-							animation-duration  : 1000s;
-						}
-					}
-				}
+				} 
 			}

-			&.resultsContainer {
+			&::after {
+				position    : absolute;
+				top         : 0;
+				right       : 0;
+				left        : 0;
+				display     : block;
+				padding     : 10px;
+				font-weight : 900;
+				color       : white;
+				white-space : pre-wrap;
+				content     : 'Error:\A At least one renderer should be enabled to make a search';
+				background  : rgb(255, 60, 60);
+				opacity     : 0;
+				transition  : opacity 0.5s;
+			}
+			&:not(:has(input[type='checkbox']:checked))::after { opacity : 1; }
+
+			.formTitle {
+				margin        : 20px 0;
+				font-size     : 30px;
+				color         : black;
+				text-align    : center;
+				border-bottom : 2px solid;
+			}
+
+			.formContents {
+				position       : relative;
 				display        : flex;
 				flex-direction : column;
-				height         : 100%;
-				overflow-y     : auto;
-				font-family    : 'BookInsanityRemake';
-				font-size      : 0.34cm;
-				
-				h3 {
-					font-family : 'Open Sans';
-					font-weight : 900;
-					color       : white;
+
+				label {
+					display     : flex;
+					align-items : center; 
+					margin      : 10px 0;
 				}
+				select { margin : 0 10px; }

-				.sort-container {
-					display               : flex;
-					flex-wrap             : wrap;
-					column-gap            : 15px;
-					justify-content       : center;
-					height                : 30px;
-					color                 : white;
-					background-color      : #555555;
-					border-top            : 1px solid #666666;
-					border-bottom         : 1px solid #666666;
+				input { 
+					margin   : 0 10px; 
+
+					&:invalid { background : rgb(255, 188, 181); }
 					
-					.sort-option {
-						display     : flex;
-						align-items : center;
-						padding     : 0 8px;
-				
-						&:hover { background-color : #444444; }
-				
-						&.active {
-							background-color : #333333;
-				
-							button {
-								font-weight : 800;
-								color       : white;
-								
-								& + .sortDir { padding-left : 5px; }
-							}
+					&[type='checkbox'] {
+						position       : relative;
+						display        : inline-block;
+						width          : 50px;
+						height         : 30px;
+						font-family    : 'WalterTurncoat';
+						font-size      : 20px;
+						font-weight    : 800;
+						color          : white;
+						letter-spacing : 2px;
+						appearance     : none;
+						background     : red;
+						isolation      : isolate;
+						border-radius  : 5px;
+
+						&::before,&::after {
+							position    : absolute;
+							inset       : 0;
+							z-index     : 5;
+							padding-top : 2px;
+							text-align  : center;
 						}

-						button {
-							padding          : 0;
-							font-size        : 11px;
-							font-weight      : normal;
-							color            : #CCCCCC;
-							text-transform   : uppercase;
-							background-color : transparent;
-					
-							&:hover { background : none; }
-						}
-					}
-				}
-
-				.foundBrews {
-					position         : relative;
-					width            : 100%;
-					height           : 100%;
-					max-height       : 100%;
-					padding          : 50px 50px 70px 50px;
-					overflow-y       : scroll;
-					background-color : #2C3E50;
-
-					h3 { font-size : 25px; }
-
-					&.noBrews {
-						display     : grid;
-						place-items : center;
-						color       : white;
-					}
-
-					&.searching {
-						display     : grid;
-						place-items : center;
-						color       : white;
-
-						h3 { position : relative; }
-
-						h3.searchAnim::after {
-							position  : absolute;
-							top       : 50%;
-							right     : 0;
-							width     : max-content;
-							height    : 1em;
-							content   : '';
-							translate : calc(100% + 5px) -50%;
-							animation : trailingDots 2s ease infinite;
-						}
-					}
-
-					.totalBrews {
-						position         : fixed;
-						right            : 0;
-						bottom           : 0;
-						z-index          : 1000;
-						padding          : 8px 10px;
-						font-family      : 'Open Sans';
-						font-size        : 11px;
-						font-weight      : 800;
-						color            : white;
-						background-color : #333333;
-
-						.searchAnim {
-							position : relative;
-							display  : inline-block;
-							width    : 3ch;
-							height   : 1em;
+						&::before {
+							display : block;
+							content : 'No';
 						}

-						.searchAnim::after {
-							position  : absolute;
-							top       : 50%;
-							right     : 0;
-							width     : max-content;
-							height    : 1em;
-							content   : '';
-							translate : -50% -50%;
-							animation : trailingDots 2s ease infinite;
-						}
-					}
-
-					.brewItem {
-						width            : 47%;
-						margin-right     : 40px;
-						color            : black;
-						isolation        : isolate;
-						
 						&::after {
-							position         : absolute;
-							inset            : 0;
-							z-index          : -2;
-							display          : block;
-							content          : '';
-							background-image : url('/assets/parchmentBackground.jpg');
+							display : none;
+							content : 'Yes';
 						}

-						&:nth-child(even of .brewItem) { margin-right : 0; }
+						&:checked {
+							background : green;

-						h2 {
-							font-family : 'MrEavesRemake';
-							font-size   : 0.75cm;
-							font-weight : 800;
-							line-height : 0.988em;
-							color       : var(--HB_Color_HeaderText);
+							&::before { display : none; }
+							&::after { display : block; }
 						}
-						.info {
-							position    : relative;
-							z-index     : 2;
-							font-family : 'ScalySansRemake';
-							font-size   : 1.2em;
-
-							>span {
-								margin-right : 12px;
-								line-height  : 1.5em;
-							}
-						}
-						.links { z-index : 2; }
-
-						hr {
-							margin     : 0px;
-							visibility : hidden;
-						}
-
-						.thumbnail { z-index : -1; }
 					}
+				}

-					.paginationControls {
-						position              : absolute;
-						left                  : 50%;
-						display               : grid;
-						grid-template-areas   : 'previousPage currentPage nextPage';
-						grid-template-columns : 50px 1fr 50px;
-						place-items           : center;
-						width                 : auto;
-						translate             : -50%;
-
-						.pages {
-							display         : flex;
-							grid-area       : currentPage;
-							justify-content : space-evenly;
-							width           : 100%;
-							height          : 100%;
-							padding         : 5px 8px;
-							text-align      : center;
-
-							.pageNumber {
-								margin-inline           : 1vw;
-								font-family             : 'Open Sans';
-								font-weight             : 900;
-								color                   : white;
-								text-underline-position : under;
-								text-wrap               : nowrap;
-								cursor                  : pointer;
-
-								&.currentPage {
-									color           : gold;
-									text-decoration : underline;
-									pointer-events  : none;
-								}
-
-								&.firstPage { margin-right : -5px; }
-
-								&.lastPage { margin-left : -5px; }
-							}
-						}
-
-						button {
-							width : max-content;
-
-							&.previousPage { grid-area : previousPage; }
-
-							&.nextPage { grid-area : nextPage; }
-						}
+				#searchButton {
+					position : absolute;
+					right    : 20px;
+					bottom   : 0;

+					i {
+						margin-left         : 10px;
+						animation-duration  : 1000s;
 					}
 				}
 			}
 		}
+
+		&.resultsContainer {
+			display        : flex;
+			flex-direction : column;
+			height         : 100%;
+			overflow-y     : auto;
+			font-family    : 'BookInsanityRemake';
+			font-size      : 0.34cm;
+				
+			h3 {
+				font-family : 'Open Sans';
+				font-weight : 900;
+				color       : white;
+			}
+
+			.sort-container {
+				display               : flex;
+				flex-wrap             : wrap;
+				column-gap            : 15px;
+				justify-content       : center;
+				height                : 30px;
+				color                 : white;
+				background-color      : #555555;
+				border-top            : 1px solid #666666;
+				border-bottom         : 1px solid #666666;
+					
+				.sort-option {
+					display     : flex;
+					align-items : center;
+					padding     : 0 8px;
+				
+					&:hover { background-color : #444444; }
+				
+					&.active {
+						background-color : #333333;
+				
+						button {
+							font-weight : 800;
+							color       : white;
+								
+							& + .sortDir { padding-left : 5px; }
+						}
+					}
+
+					button {
+						padding          : 0;
+						font-size        : 11px;
+						font-weight      : normal;
+						color            : #CCCCCC;
+						text-transform   : uppercase;
+						background-color : transparent;
+					
+						&:hover { background : none; }
+					}
+				}
+			}
+
+			.foundBrews {
+				position         : relative;
+				width            : 100%;
+				height           : 100%;
+				max-height       : 100%;
+				padding          : 50px 50px 70px 50px;
+				overflow-y       : scroll;
+				background-color : #2C3E50;
+
+				h3 { font-size : 25px; }
+
+				&.noBrews {
+					display     : grid;
+					place-items : center;
+					color       : white;
+				}
+
+				&.searching {
+					display     : grid;
+					place-items : center;
+					color       : white;
+
+					h3 { position : relative; }
+
+					h3.searchAnim::after {
+						position  : absolute;
+						top       : 50%;
+						right     : 0;
+						width     : max-content;
+						height    : 1em;
+						content   : '';
+						translate : calc(100% + 5px) -50%;
+						animation : trailingDots 2s ease infinite;
+					}
+				}
+
+				.totalBrews {
+					position         : fixed;
+					right            : 0;
+					bottom           : 0;
+					z-index          : 1000;
+					padding          : 8px 10px;
+					font-family      : 'Open Sans';
+					font-size        : 11px;
+					font-weight      : 800;
+					color            : white;
+					background-color : #333333;
+
+					.searchAnim {
+						position : relative;
+						display  : inline-block;
+						width    : 3ch;
+						height   : 1em;
+					}
+
+					.searchAnim::after {
+						position  : absolute;
+						top       : 50%;
+						right     : 0;
+						width     : max-content;
+						height    : 1em;
+						content   : '';
+						translate : -50% -50%;
+						animation : trailingDots 2s ease infinite;
+					}
+				}
+
+				.brewItem {
+					width            : 47%;
+					margin-right     : 40px;
+					color            : black;
+					isolation        : isolate;
+						
+					&::after {
+						position         : absolute;
+						inset            : 0;
+						z-index          : -2;
+						display          : block;
+						content          : '';
+						background-image : url('/assets/parchmentBackground.jpg');
+					}
+
+					&:nth-child(even of .brewItem) { margin-right : 0; }
+
+					h2 {
+						font-family : 'MrEavesRemake';
+						font-size   : 0.75cm;
+						font-weight : 800;
+						line-height : 0.988em;
+						color       : var(--HB_Color_HeaderText);
+					}
+					.info {
+						position    : relative;
+						z-index     : 2;
+						font-family : 'ScalySansRemake';
+						font-size   : 1.2em;
+
+						>span {
+							margin-right : 12px;
+							line-height  : 1.5em;
+						}
+					}
+					.links { z-index : 2; }
+
+					hr {
+						margin     : 0px;
+						visibility : hidden;
+					}
+
+					.thumbnail { z-index : -1; }
+				}
+
+				.paginationControls {
+					position              : absolute;
+					left                  : 50%;
+					display               : grid;
+					grid-template-areas   : 'previousPage currentPage nextPage';
+					grid-template-columns : 50px 1fr 50px;
+					place-items           : center;
+					width                 : auto;
+					translate             : -50%;
+
+					.pages {
+						display         : flex;
+						grid-area       : currentPage;
+						justify-content : space-evenly;
+						width           : 100%;
+						height          : 100%;
+						padding         : 5px 8px;
+						text-align      : center;
+
+						.pageNumber {
+							margin-inline           : 1vw;
+							font-family             : 'Open Sans';
+							font-weight             : 900;
+							color                   : white;
+							text-underline-position : under;
+							text-wrap               : nowrap;
+							cursor                  : pointer;
+
+							&.currentPage {
+								color           : gold;
+								text-decoration : underline;
+								pointer-events  : none;
+							}
+
+							&.firstPage { margin-right : -5px; }
+
+							&.lastPage { margin-left : -5px; }
+						}
+					}
+
+					button {
+						width : max-content;
+
+						&.previousPage { grid-area : previousPage; }
+
+						&.nextPage { grid-area : nextPage; }
+					}
+
+				}
+			}
+		}
 	}
+	
 }

@keyframes trailingDots {
@@ -388,7 +384,7 @@

 // media query for when the page is smaller than 1079 px in width
@media screen and (max-width : 1079px) {
-	.vaultPage .content {
+	.vaultPage {

 		.dataGroup.form .brewLookup { padding : 1px 20px 20px 10px; }

--- a/client/homebrew/utils/customIDBStore.js
+++ b/client/homebrew/utils/customIDBStore.js
@@ -0,0 +1,19 @@
+import * as IDB from 'idb-keyval/dist/index.js';
+
+export function initCustomStore(db, store){
+	const createCustomStore = async ()=>IDB.createStore(db, store);
+
+	return {
+		entries : async ()=>IDB.entries(await createCustomStore()),
+		keys    : async ()=>IDB.keys(await createCustomStore()),
+		values  : async ()=>IDB.values(await createCustomStore()),
+		clear   : async ()=>IDB.clear(await createCustomStore),
+		get     : async (key)=>IDB.get(key, await createCustomStore()),
+		getMany : async (keys)=>IDB.getMany(keys, await createCustomStore()),
+		set     : async (key, value)=>IDB.set(key, value, await createCustomStore()),
+		setMany : async (entries)=>IDB.setMany(entries, await createCustomStore()),
+		update  : async (key, updateFn)=>IDB.update(key, updateFn, await createCustomStore()),
+		del     : async (key)=>IDB.del(key, await createCustomStore()),
+		delMany : async (keys)=>IDB.delMany(keys, await createCustomStore())
+	};
+};
--- a/client/homebrew/utils/versionHistory.js
+++ b/client/homebrew/utils/versionHistory.js
@@ -1,4 +1,4 @@
-import * as IDB from 'idb-keyval/dist/index.js';
+import { initCustomStore } from './customIDBStore.js';

 export const HISTORY_PREFIX = 'HOMEBREWERY-HISTORY';
 export const HISTORY_SLOTS = 5;
@@ -21,13 +21,15 @@ const HISTORY_SAVE_DELAYS = {
 // 	'5' : 5
 // };

-const HB_DB = 'HOMEBREWERY-DB';
-const HB_STORE = 'HISTORY';
-
 const GARBAGE_COLLECT_DELAY = 28 * 24 * 60;
 // const GARBAGE_COLLECT_DELAY = 10;


+const HB_DB = 'HOMEBREWERY-DB';
+const HB_STORE = 'HISTORY';
+
+const IDB = initCustomStore(HB_DB, HB_STORE);
+
 function getKeyBySlot(brew, slot){
 	// Return a string representing the key for this brew and history slot
 	return `${HISTORY_PREFIX}-${brew.shareId}-${slot}`;
@@ -53,11 +55,6 @@ function parseBrewForStorage(brew, slot = 0) {
 	return [key, archiveBrew];
 }

-// Create a custom IDB store
-async function createHBStore(){
-	return await IDB.createStore(HB_DB, HB_STORE);
-}
-
 export async function loadHistory(brew){
 	const DEFAULT_HISTORY_ITEM = { expireAt: '2000-01-01T00:00:00.000Z', shareId: brew.shareId, noData: true };

@@ -69,7 +66,7 @@ export async function loadHistory(brew){
 	};

 	// Load all keys from IDB at once
-	const dataArray = await IDB.getMany(historyKeys, await createHBStore());
+	const dataArray = await IDB.getMany(historyKeys);
 	return dataArray.map((data)=>{ return data ?? DEFAULT_HISTORY_ITEM; });
 }

@@ -97,7 +94,7 @@ export async function updateHistory(brew) {
 			// Update the most recent brew
 			historyUpdate.push(parseBrewForStorage(brew, 1));

-			await IDB.setMany(historyUpdate, await createHBStore());
+			await IDB.setMany(historyUpdate);

 			// Break out of data checks because we found an expired value
 			break;
@@ -106,14 +103,17 @@ export async function updateHistory(brew) {
 };

 export async function versionHistoryGarbageCollection(){
+	const entries = await IDB.entries();

-	const entries = await IDB.entries(await createHBStore());
-
+	const expiredKeys = [];
 	for (const [key, value] of entries){
 		const expireAt = new Date(value.savedAt);
 		expireAt.setMinutes(expireAt.getMinutes() + GARBAGE_COLLECT_DELAY);
 		if(new Date() > expireAt){
-			await IDB.del(key, await createHBStore());
+			expiredKeys.push(key);
 		};
 	};
+	if(expiredKeys.length > 0){
+		await IDB.delMany(expiredKeys);
+	}
 };
--- a/client/icons/customIcons.less
+++ b/client/icons/customIcons.less
@@ -73,3 +73,12 @@
 .fit-width {
 	mask-image: url('../icons/fit-width.svg');
 }
+.single-spread {
+	mask-image: url('../icons/single-spread.svg');
+}
+.facing-spread {
+	mask-image: url('../icons/facing-spread.svg');
+}
+.flow-spread {
+	mask-image: url('../icons/flow-spread.svg');
+}
--- a/client/icons/facing-spread.svg
+++ b/client/icons/facing-spread.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.979101,0,0,0.919064,-29.0748,1.98095)">
+        <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
+    </g>
+    <g transform="matrix(0.979101,0,0,0.919064,23.058,1.98095)">
+        <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
+    </g>
+</svg>
--- a/client/icons/flow-spread.svg
+++ b/client/icons/flow-spread.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.0781,0,0,1.0781,-3.90545,-3.90502)">
+        <g transform="matrix(0.590052,0,0,0.553871,-13.8993,-2.19227)">
+            <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
+        </g>
+        <g transform="matrix(0.590052,0,0,0.553871,-13.8993,44.3152)">
+            <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
+        </g>
+        <g transform="matrix(0.590052,0,0,0.553871,17.5184,-2.19227)">
+            <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
+        </g>
+        <g transform="matrix(0.590052,0,0,0.553871,50.0095,-2.19227)">
+            <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
+        </g>
+        <g transform="matrix(0.590052,0,0,0.553871,17.5184,44.3152)">
+            <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
+        </g>
+        <g transform="matrix(0.590052,0,0,0.553871,50.0095,44.3152)">
+            <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
+        </g>
+    </g>
+</svg>
--- a/client/icons/single-spread.svg
+++ b/client/icons/single-spread.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.41826,0,0,1.3313,-26.7845,-19.5573)">
+        <path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
+    </g>
+</svg>
--- a/package-lock.json
+++ b/package-lock.json
@@ -58,6 +58,7 @@
        "globals": "^15.11.0",
        "jest": "^29.7.0",
        "jest-expect-message": "^1.1.3",
+        "jsdom-global": "^3.0.2",
        "postcss-less": "^6.0.0",
        "stylelint": "^16.10.0",
        "stylelint-config-recess-order": "^5.1.1",
@@ -5036,12 +5037,81 @@
        "node": ">=4"
      }
    },
+    "node_modules/cssstyle": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.1.0.tgz",
+      "integrity": "sha512-h66W1URKpBS5YMI/V8PyXvTMFT8SupJ1IzoIV8IeBC/ji8WVmrO8dGlTi+2dh6whmdk6BiKJLD/ZBkhWbcg6nA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "rrweb-cssom": "^0.7.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/dash-ast": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/dash-ast/-/dash-ast-1.0.0.tgz",
      "integrity": "sha512-Vy4dx7gquTeMcQR/hDkYLGUnwVil6vk4FOOct+djUnHOUWt+zJPJAaRIXaAFkPXtJjvlY7o3rfRu0/3hpnwoUA==",
      "license": "Apache-2.0"
    },
+    "node_modules/data-urls": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/data-urls/node_modules/tr46": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz",
+      "integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/data-urls/node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/data-urls/node_modules/whatwg-url": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.0.0.tgz",
+      "integrity": "sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "tr46": "^5.0.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/data-view-buffer": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
@@ -5112,6 +5182,14 @@
        }
      }
    },
+    "node_modules/decimal.js": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
    "node_modules/decode-uri-component": {
      "version": "0.2.2",
      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
@@ -5446,6 +5524,20 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
    "node_modules/env-paths": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
@@ -7163,6 +7255,20 @@
        "minimalistic-crypto-utils": "^1.0.1"
      }
    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "whatwg-encoding": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/html-escaper": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@@ -7208,6 +7314,21 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
    "node_modules/https-browserify": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
@@ -7768,6 +7889,14 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
    "node_modules/is-regex": {
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -9770,6 +9899,121 @@
        "js-yaml": "bin/js-yaml.js"
      }
    },
+    "node_modules/jsdom": {
+      "version": "25.0.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-25.0.1.tgz",
+      "integrity": "sha512-8i7LzZj7BF8uplX+ZyOlIz86V6TAsSs+np6m1kpW9u0JWi4z/1t+FzcK1aek+ybTnAC4KhBL4uXCNT0wcUIeCw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "cssstyle": "^4.1.0",
+        "data-urls": "^5.0.0",
+        "decimal.js": "^10.4.3",
+        "form-data": "^4.0.0",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.5",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.12",
+        "parse5": "^7.1.2",
+        "rrweb-cssom": "^0.7.1",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^5.0.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0",
+        "ws": "^8.18.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "canvas": "^2.11.2"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsdom-global": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/jsdom-global/-/jsdom-global-3.0.2.tgz",
+      "integrity": "sha512-t1KMcBkz/pT5JrvcJbpUR2u/w1kO9jXctaaGJ0vZDzwFnIvGWw9IDSRciT83kIs8Bnw4qpOl8bQK08V01YgMPg==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "jsdom": ">=10.0.0"
+      }
+    },
+    "node_modules/jsdom/node_modules/tr46": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz",
+      "integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/jsdom/node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jsdom/node_modules/whatwg-url": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.0.0.tgz",
+      "integrity": "sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "tr46": "^5.0.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/jsdom/node_modules/ws": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/jsesc": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
@@ -11039,6 +11283,14 @@
        "node": ">=8"
      }
    },
+    "node_modules/nwsapi": {
+      "version": "2.2.13",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.13.tgz",
+      "integrity": "sha512-cTGB9ptp9dY9A5VbMSe7fQBcl/tt22Vcqdq8+eN93rblOuE0aCFu4aZ2vMwct/2t+lFnosm8RkQW1I0Omb1UtQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
    "node_modules/object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -11371,6 +11623,20 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/parse5": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
+      "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "entities": "^4.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
    "node_modules/parseurl": {
      "version": "1.3.3",
      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -12386,6 +12652,14 @@
        "inherits": "^2.0.1"
      }
    },
+    "node_modules/rrweb-cssom": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz",
+      "integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
    "node_modules/run-parallel": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -12491,6 +12765,20 @@
        "truncate-utf8-bytes": "^1.0.0"
      }
    },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
    "node_modules/scheduler": {
      "version": "0.23.2",
      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -13688,6 +13976,14 @@
      "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
      "dev": true
    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
    "node_modules/syntax-error": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/syntax-error/-/syntax-error-1.4.0.tgz",
@@ -13787,6 +14083,28 @@
        "node": ">=0.6.0"
      }
    },
+    "node_modules/tldts": {
+      "version": "6.1.56",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.56.tgz",
+      "integrity": "sha512-2PT1oRZCxtsbLi5R2SQjE/v4vvgRggAtVcYj+3Rrcnu2nPZvu7m64+gDa/EsVSWd3QzEc0U0xN+rbEKsJC47kA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "tldts-core": "^6.1.56"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "6.1.56",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.56.tgz",
+      "integrity": "sha512-Ihxv/Bwiyj73icTYVgBUkQ3wstlCglLoegSgl64oSrGUBX1hc7Qmf/CnrnJLaQdZrCnTaLqMYOwKMKlkfkFrxQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
    "node_modules/tmpl": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -13926,6 +14244,20 @@
        "nodetouch": "bin/nodetouch.js"
      }
    },
+    "node_modules/tough-cookie": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.0.0.tgz",
+      "integrity": "sha512-FRKsF7cz96xIIeMZ82ehjC3xW2E+O2+v11udrDYewUbszngYhsGa8z6YUMMzO9QJZzzyd0nGGXnML/TReX6W8Q==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "tldts": "^6.1.32"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
    "node_modules/tr46": {
      "version": "0.0.3",
      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -14507,6 +14839,20 @@
      "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
      "license": "MIT"
    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/walker": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
@@ -14832,6 +15178,45 @@
      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
      "license": "BSD-2-Clause"
    },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-encoding/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/whatwg-url": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
@@ -15040,6 +15425,25 @@
        }
      }
    },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
    "node_modules/xtend": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
  "version": "3.16.0",
  "engines": {
    "npm": "^10.2.x",
-    "node": "^20.17.x"
+    "node": "^20.18.x"
  },
  "repository": {
    "type": "git",
@@ -38,6 +38,7 @@
    "test:hard-breaks": "jest tests/markdown/hard-breaks.test.js --verbose --noStackTrace",
    "test:emojis": "jest tests/markdown/emojis.test.js --verbose --noStackTrace",
    "test:route": "jest tests/routes/static-pages.test.js --verbose",
+    "test:safehtml": "jest tests/html/safeHTML.test.js --verbose",
    "phb": "node --experimental-require-module scripts/phb.js",
    "prod": "set NODE_ENV=production && npm run build",
    "postinstall": "npm run build",
@@ -134,6 +135,7 @@
    "globals": "^15.11.0",
    "jest": "^29.7.0",
    "jest-expect-message": "^1.1.3",
+    "jsdom-global": "^3.0.2",
    "postcss-less": "^6.0.0",
    "stylelint": "^16.10.0",
    "stylelint-config-recess-order": "^5.1.1",
--- a/tests/html/safeHTML.test.js
+++ b/tests/html/safeHTML.test.js
@@ -0,0 +1,50 @@
+
+
+require('jsdom-global')();
+
+import { safeHTML } from '../../client/homebrew/brewRenderer/safeHTML';
+
+test('Javascript via href', function() {
+	const source = `<a href="javascript:alert('This is a JavaScript injection via href attribute')">Click me</a>`;
+	const rendered = safeHTML(source);
+	expect(rendered).toBe('<a>Click me</a>');
+});
+
+test('Javascript via src', function() {
+	const source = `<img src="javascript:alert('This is a JavaScript injection via src attribute')">`;
+	const rendered = safeHTML(source);
+	expect(rendered).toBe('<img>');
+});
+
+test('Javascript via form submit action', function() {
+	const source = `<form action="javascript:alert('This is a JavaScript injection via action attribute')">\n<input type="submit" value="Submit">\n</form>`;
+	const rendered = safeHTML(source);
+	expect(rendered).toBe('<form>\n<input value=\"Submit\">\n</form>');
+});
+
+test('Javascript via inline event handler - onClick', function() {
+	const source = `<div style="background-color: red; color: white; width: 100px; height: 100px;" onclick="alert('This is a JavaScript injection via inline event handler')">\nClick me\n</div>`;
+	const rendered = safeHTML(source);
+	expect(rendered).toBe('<div style=\"background-color: red; color: white; width: 100px; height: 100px;\">\nClick me\n</div>');
+});
+
+test('Javascript via inline event handler - onMouseOver', function() {
+	const source = `<div onmouseover="alert('This is a JavaScript injection via inline event handler')">Hover over me</div>`;
+	const rendered = safeHTML(source);
+	expect(rendered).toBe('<div>Hover over me</div>');
+});
+
+test('Javascript via data attribute', function() {
+	const source = `<div data-code="javascript:alert('This is a JavaScript injection via data attribute')">Test</div>`;
+	const rendered = safeHTML(source);
+	expect(rendered).toBe('<div>Test</div>');
+});
+
+test('Javascript via event delegation', function() {
+	const source = `<div id="parent"><button id="child">Click me</button></div><script>document.getElementById('parent').addEventListener('click', function(event) {if (event.target.id === 'child') {console.log('This is JavaScript executed via event delegation');}});</script>`;
+	const rendered = safeHTML(source);
+	expect(rendered).toBe('<div id="parent"><button id="child">Click me</button></div>');
+});
+
+
+