diff --git a/CHANGELOG.md b/CHANGELOG.md
index 55b9743..5c1a154 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,15 @@
 aiur version history
 ====================
 
+v0.12.0
+-------
+
+_TBD_
+
+maintenance release to update dependencies
+
+* bumped Node requirement to v20 or later, dropping support for obsolete versions
+
 v0.11.0
 -------
 
diff --git a/bin/aiur b/bin/aiur
index 7a0dda5..711d9ad 100755
--- a/bin/aiur
+++ b/bin/aiur
@@ -1,9 +1,9 @@
 #!/usr/bin/env node
 "use strict";
 
-let faucet = require("faucet-pipeline-core");
+let { faucetDispatch } = require("faucet-pipeline-core");
 let parseCLI = require("../lib/cli");
 
 let { referenceDir, config, options } = parseCLI();
 
-faucet(referenceDir, config, options);
+faucetDispatch(referenceDir, config, options);
diff --git a/example/package.json b/example/package.json
index c081e96..2da2bea 100644
--- a/example/package.json
+++ b/example/package.json
@@ -1,10 +1,9 @@
 {
 	"scripts": {
-		"start": "aiur --watch --liveserve",
+		"start": "aiur --watch --serve 0.0.0.0:8080",
 		"compile": "aiur --fingerprint --compact"
 	},
 	"dependencies": {
-		"aiur": "..",
-		"prismjs": "^1.17.0"
+		"aiur": ".."
 	}
 }
diff --git a/lib/cli.js b/lib/cli.js
index 42d50f3..7403df3 100644
--- a/lib/cli.js
+++ b/lib/cli.js
@@ -56,6 +56,7 @@ module.exports = function parseCLI(argv = process.argv.slice(2), help = HELP) {
 				"mode to avoid littering your file system with obsolete bundles");
 	}
 
+	// TODO: remove the baseuri option, use the setting from the manifest config instead
 	let { source, target, baseuri } = argv;
 	let rawConfig = require(path.resolve(process.cwd(), source));
 	let watchDirs = rawConfig.watchDirs || [];
@@ -63,18 +64,7 @@ module.exports = function parseCLI(argv = process.argv.slice(2), help = HELP) {
 	let config = {
 		aiur: [{
 			source,
-			target,
-			baseURI: baseuri
-		}],
-
-		sass: [{
-			source: "aiur/lib/style.scss",
-			target: `${target}/style-aiur.css`
-		}],
-
-		js: [{
-			source: "aiur/lib/client/index.js",
-			target: `${target}/script-aiur.js`
+			target
 		}],
 
 		watchDirs: [source, ...watchDirs],
@@ -85,13 +75,7 @@ module.exports = function parseCLI(argv = process.argv.slice(2), help = HELP) {
 			webRoot: target
 		},
 
-		plugins: [
-			{
-				bucket: "markup",
-				key: "aiur",
-				plugin: aiur
-			}
-		]
+		plugins: [aiur]
 	};
 
 	Object.entries(rawConfig.snippetAssets || {}).forEach(([pipeline, entries]) => {
diff --git a/lib/client/component_preview.js b/lib/client/component_preview.js
deleted file mode 100644
index 88dfe6a..0000000
--- a/lib/client/component_preview.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/* global HTMLElement */
-export default class ComponentPreview extends HTMLElement {
-	connectedCallback() {
-		this._previewFrame = this.querySelector("." + this.getAttribute("preview")) ||
-			this.querySelector("#" + this.getAttribute("preview"));
-		this.setDimensions();
-		this._previewFrame.addEventListener("load", event => this.fitPreviewFrame());
-	}
-
-	setDimensions() {
-		let height = this.getAttribute("height");
-		let width = this.getAttribute("width");
-		if(height) this._previewFrame.style.height = parseInt(height) + "px";
-		if(width) this._previewFrame.style.width = parseInt(width) + "px";
-	}
-
-	fitPreviewFrame() {
-		if(!this.hasAttribute("height")) {
-			let frameBody = this._previewFrame.contentWindow.document.body;
-			let bodyDisplay = frameBody.style.display;
-			frameBody.style.display = "inline-block";
-			let height = frameBody.offsetHeight;
-			frameBody.style.display = bodyDisplay;
-			// TODO: fix me: 16, a magic number for now to prevent scrollbars
-			this._previewFrame.style.height = height + 16 + "px";
-		}
-	}
-}
diff --git a/lib/client/external_text.js b/lib/client/external_text.js
deleted file mode 100644
index 6f9d96d..0000000
--- a/lib/client/external_text.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/* global HTMLElement, fetch */
-// TODO use "find" attribute with css selector to extract parts of external page
-// TODO overall proper embedding process ...
-
-export default class ExternalText extends HTMLElement {
-	connectedCallback() {
-		this._wrapElementType = this.getAttribute("wrap");
-		this._src = this.getAttribute("src");
-		this._embedTarget = this;
-
-		this.prepareEmbed();
-		this.loadExternal();
-	}
-
-	prepareEmbed() {
-		if(this._wrapElementType !== null) {
-			let bed = document.createElement(this._wrapElementType);
-			this.append(bed);
-			this._embedTarget = bed;
-		}
-	}
-
-	async loadExternal() {
-		let response = await fetch(this._src);
-		let externalText = await response.text();
-		this.embedExternal(externalText);
-	}
-
-	embedExternal(body) {
-		body = body.replace(/^<!DOCTYPE[^>[]*(\[[^]]*\])?>/gm, "").trim();
-		body = body.replace(/(<!--.*?-->)|(<!--[\S\s]+?-->)|(<!--[\S\s]*?$)/g, "");
-		if(body.includes("<body")) {
-			body = body.replace("//").split("<body>")[1].split("</body>")[0].trim();
-		}
-		body = body.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
-		this._embedTarget.innerText = body;
-	}
-}
diff --git a/lib/client/index.js b/lib/client/index.js
index b8e16b5..07e695b 100644
--- a/lib/client/index.js
+++ b/lib/client/index.js
@@ -1,9 +1,233 @@
-/* global customElements */
+/* eslint-env browser */
 
-import ComponentPreview from "./component_preview.js";
-import ExternalText from "./external_text.js";
-import ResizeHandle from "./resize_handle.js";
-import TabsControl from "./tabs_control.js";
+class ComponentPreview extends HTMLElement {
+	connectedCallback() {
+		this._previewFrame = this.querySelector("." + this.getAttribute("preview")) ||
+			this.querySelector("#" + this.getAttribute("preview"));
+		this.setDimensions();
+		this._previewFrame.addEventListener("load", event => this.fitPreviewFrame());
+	}
+
+	setDimensions() {
+		let height = this.getAttribute("height");
+		let width = this.getAttribute("width");
+		if(height) this._previewFrame.style.height = parseInt(height) + "px";
+		if(width) this._previewFrame.style.width = parseInt(width) + "px";
+	}
+
+	fitPreviewFrame() {
+		if(!this.hasAttribute("height")) {
+			let frameBody = this._previewFrame.contentWindow.document.body;
+			let bodyDisplay = frameBody.style.display;
+			frameBody.style.display = "inline-block";
+			let height = frameBody.offsetHeight;
+			frameBody.style.display = bodyDisplay;
+			// TODO: fix me: 16, a magic number for now to prevent scrollbars
+			this._previewFrame.style.height = height + 16 + "px";
+		}
+	}
+}
+
+// TODO use "find" attribute with css selector to extract parts of external page
+// TODO overall proper embedding process ...
+class ExternalText extends HTMLElement {
+	connectedCallback() {
+		this._wrapElementType = this.getAttribute("wrap");
+		this._src = this.getAttribute("src");
+		this._embedTarget = this;
+
+		this.prepareEmbed();
+		this.loadExternal();
+	}
+
+	prepareEmbed() {
+		if(this._wrapElementType !== null) {
+			let bed = document.createElement(this._wrapElementType);
+			this.append(bed);
+			this._embedTarget = bed;
+		}
+	}
+
+	async loadExternal() {
+		let response = await fetch(this._src);
+		let externalText = await response.text();
+		this.embedExternal(externalText);
+	}
+
+	embedExternal(body) {
+		body = body.replace(/^<!DOCTYPE[^>[]*(\[[^]]*\])?>/gm, "").trim();
+		body = body.replace(/(<!--.*?-->)|(<!--[\S\s]+?-->)|(<!--[\S\s]*?$)/g, "");
+		if(body.includes("<body")) {
+			body = body.replace("//").split("<body>")[1].split("</body>")[0].trim();
+		}
+		body = body.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
+		this._embedTarget.innerText = body;
+	}
+}
+
+function betterParseInt(string) {
+	let parsed = parseInt(string);
+	return isNaN(parsed) ? 0 : parsed;
+}
+
+// TODO enhance with touches: https://github.com/stbaer/ev-pos/blob/master/src/index.js
+// TODO consider snap feature? snap to edges? stepped resize?
+class ResizeHandle extends HTMLElement {
+	connectedCallback() {
+		this.init();
+	}
+
+	adoptedCallback() {
+		this.init();
+	}
+
+	init() {
+		this._target = document.querySelector("#" + this.getAttribute("for"));
+		if(this._target) {
+			this.addEventListener("mousedown", this.startDrag.bind(this));
+			document.addEventListener("mouseup", this.stopDrag.bind(this));
+			document.addEventListener("mousemove", this.drag.bind(this));
+			let directions = this.getAttribute("direction").toLowerCase();
+			this._useDirectionX = directions.indexOf("x") > -1;
+			this._useDirectionY = directions.indexOf("y") > -1;
+			if(this.hasAttribute("remember") && this.hasAttribute("id")) {
+				this._rememberState = true;
+				this._storageId = "resize-handle#" + this.id;
+				this.recallState();
+			}
+		}
+	}
+
+	startDrag(event) {
+		event.preventDefault();
+		let targetsComputedStyle = window.getComputedStyle(this._target);
+		this._targetsBoxSizing = targetsComputedStyle.getPropertyValue("box-sizing");
+
+		if(this._targetsBoxSizing === "content-box") {
+			this._targetsOriginWidth = this._target.offsetWidth -
+				betterParseInt(targetsComputedStyle.getPropertyValue("padding-left")) -
+				betterParseInt(targetsComputedStyle.getPropertyValue("padding-right")) -
+				betterParseInt(targetsComputedStyle.getPropertyValue("border-left-width")) -
+				betterParseInt(targetsComputedStyle.getPropertyValue("border-right-width"));
+			this._targetsOriginHeight = this._target.offsetHeight -
+				betterParseInt(targetsComputedStyle.getPropertyValue("padding-top")) -
+				betterParseInt(targetsComputedStyle.getPropertyValue("padding-bottom")) -
+				betterParseInt(targetsComputedStyle.getPropertyValue("border-top-width")) -
+				betterParseInt(targetsComputedStyle.getPropertyValue("border-bottom-width"));
+		} else {
+			this._targetsOriginWidth = this._target.offsetWidth;
+			this._targetsOriginHeight = this._target.offsetHeight;
+		}
+
+		this._mouseOriginX = event.pageX;
+		this._mouseOriginY = event.pageY;
+
+		this._isBeingDragged = true;
+		window.requestAnimationFrame(() => this.classList.add("dragging"));
+
+		this.dispatchEvent(new CustomEvent("resizestart", {
+			detail: {
+				directionX: this._useDirectionX,
+				directionY: this._useDirectionY,
+				targetWidth: this._useDirectionX ? this._target.style.width : undefined,
+				targetHeight: this._useDirectionY ? this._target.style.height : undefined,
+				pageX: event.pageX,
+				pageY: event.pageY
+			}
+		}));
+	}
+
+	drag(event) {
+		if(this._isBeingDragged) {
+			window.requestAnimationFrame(() => {
+				let deltaX = event.pageX - this._mouseOriginX;
+				let deltaY = event.pageY - this._mouseOriginY;
+				if(this._useDirectionX) {
+					this._target.style.width = this._targetsOriginWidth + deltaX + "px";
+				}
+				if(this._useDirectionY) {
+					this._target.style.height = this._targetsOriginHeight + deltaY + "px";
+				}
+			});
+		}
+	}
+
+	stopDrag(event) {
+		if(this._isBeingDragged) {
+			this._isBeingDragged = false;
+			window.requestAnimationFrame(() => this.classList.remove("dragging"));
+
+			this.rememberState(this._target.style.width, this._target.style.height);
+
+			this.dispatchEvent(new CustomEvent("resizeend", {
+				detail: {
+					directionX: this._useDirectionX,
+					directionY: this._useDirectionY,
+					targetWidth: this._useDirectionX ? this._target.style.width : undefined,
+					targetHeight: this._useDirectionY ? this._target.style.height : undefined,
+					pageX: event.pageX,
+					pageY: event.pageY
+				}
+			}));
+		}
+	}
+
+	rememberState(width, height) {
+		if(this._rememberState) {
+			localStorage.setItem(this._storageId, JSON.stringify({ width, height }));
+		}
+	}
+
+	recallState() {
+		if(this._rememberState) {
+			let state = JSON.parse(localStorage.getItem(this._storageId));
+			if(state && state.width !== "") {
+				this._target.style.width = state.width;
+			}
+			if(state && state.height !== "") {
+				this._target.style.height = state.height;
+			}
+		}
+	}
+}
+
+class TabsControl extends HTMLElement {
+	connectedCallback() {
+		window.requestAnimationFrame(() => {
+			this.setAttribute("role", "tablist");
+			this._triggers = Array.from(this.querySelectorAll("[role=\"tab\"]"));
+			this._triggers.forEach(trigger => trigger.setAttribute("tabindex", 0));
+			this._targetMap = new Map();
+			this._triggers.forEach(triggerElement => {
+				let triggerTargetId = "#" + triggerElement.getAttribute("aria-controls");
+				let triggerTargetElement = document.querySelector(triggerTargetId);
+				this._targetMap.set(triggerTargetId, triggerTargetElement);
+				triggerElement.addEventListener("click", e => this.switch(triggerElement));
+			});
+
+			this._triggers.forEach(triggerElement => {
+				if(triggerElement.getAttribute("aria-selected") !== "true") {
+					this._targetMap.
+						get("#" + triggerElement.getAttribute("aria-controls")).
+						setAttribute("hidden", "true");
+				}
+			});
+		});
+	}
+
+	switch(clickedElement) {
+		if(clickedElement.getAttribute("aria-selected") === "true") {
+			return;
+		}
+		window.requestAnimationFrame(() => {
+			this._triggers.forEach(trigger => trigger.setAttribute("aria-selected", "false"));
+			clickedElement.setAttribute("aria-selected", "true");
+			this._targetMap.forEach(targetElement => targetElement.setAttribute("hidden", "true"));
+			let clickTargetElement = this._targetMap.get("#" + clickedElement.getAttribute("aria-controls"));
+			clickTargetElement.removeAttribute("hidden");
+		});
+	}
+}
 
 customElements.define("component-preview", ComponentPreview);
 customElements.define("external-text", ExternalText);
diff --git a/lib/client/resize_handle.js b/lib/client/resize_handle.js
deleted file mode 100644
index 6022b5c..0000000
--- a/lib/client/resize_handle.js
+++ /dev/null
@@ -1,128 +0,0 @@
-/* global HTMLElement, CustomEvent, localStorage */
-
-// TODO enhance with touches: https://github.com/stbaer/ev-pos/blob/master/src/index.js
-// TODO consider snap feature? snap to edges? stepped resize?
-
-function betterParseInt(string) {
-	let parsed = parseInt(string);
-	return isNaN(parsed) ? 0 : parsed;
-}
-
-export default class ResizeHandle extends HTMLElement {
-	connectedCallback() {
-		this.init();
-	}
-
-	adoptedCallback() {
-		this.init();
-	}
-
-	init() {
-		this._target = document.querySelector("#" + this.getAttribute("for"));
-		if(this._target) {
-			this.addEventListener("mousedown", this.startDrag.bind(this));
-			document.addEventListener("mouseup", this.stopDrag.bind(this));
-			document.addEventListener("mousemove", this.drag.bind(this));
-			let directions = this.getAttribute("direction").toLowerCase();
-			this._useDirectionX = directions.indexOf("x") > -1;
-			this._useDirectionY = directions.indexOf("y") > -1;
-			if(this.hasAttribute("remember") && this.hasAttribute("id")) {
-				this._rememberState = true;
-				this._storageId = "resize-handle#" + this.id;
-				this.recallState();
-			}
-		}
-	}
-
-	startDrag(event) {
-		event.preventDefault();
-		let targetsComputedStyle = window.getComputedStyle(this._target);
-		this._targetsBoxSizing = targetsComputedStyle.getPropertyValue("box-sizing");
-
-		if(this._targetsBoxSizing === "content-box") {
-			this._targetsOriginWidth = this._target.offsetWidth -
-				betterParseInt(targetsComputedStyle.getPropertyValue("padding-left")) -
-				betterParseInt(targetsComputedStyle.getPropertyValue("padding-right")) -
-				betterParseInt(targetsComputedStyle.getPropertyValue("border-left-width")) -
-				betterParseInt(targetsComputedStyle.getPropertyValue("border-right-width"));
-			this._targetsOriginHeight = this._target.offsetHeight -
-				betterParseInt(targetsComputedStyle.getPropertyValue("padding-top")) -
-				betterParseInt(targetsComputedStyle.getPropertyValue("padding-bottom")) -
-				betterParseInt(targetsComputedStyle.getPropertyValue("border-top-width")) -
-				betterParseInt(targetsComputedStyle.getPropertyValue("border-bottom-width"));
-		} else {
-			this._targetsOriginWidth = this._target.offsetWidth;
-			this._targetsOriginHeight = this._target.offsetHeight;
-		}
-
-		this._mouseOriginX = event.pageX;
-		this._mouseOriginY = event.pageY;
-
-		this._isBeingDragged = true;
-		window.requestAnimationFrame(() => this.classList.add("dragging"));
-
-		this.dispatchEvent(new CustomEvent("resizestart", {
-			detail: {
-				directionX: this._useDirectionX,
-				directionY: this._useDirectionY,
-				targetWidth: this._useDirectionX ? this._target.style.width : undefined,
-				targetHeight: this._useDirectionY ? this._target.style.height : undefined,
-				pageX: event.pageX,
-				pageY: event.pageY
-			}
-		}));
-	}
-
-	drag(event) {
-		if(this._isBeingDragged) {
-			window.requestAnimationFrame(() => {
-				let deltaX = event.pageX - this._mouseOriginX;
-				let deltaY = event.pageY - this._mouseOriginY;
-				if(this._useDirectionX) {
-					this._target.style.width = this._targetsOriginWidth + deltaX + "px";
-				}
-				if(this._useDirectionY) {
-					this._target.style.height = this._targetsOriginHeight + deltaY + "px";
-				}
-			});
-		}
-	}
-
-	stopDrag(event) {
-		if(this._isBeingDragged) {
-			this._isBeingDragged = false;
-			window.requestAnimationFrame(() => this.classList.remove("dragging"));
-
-			this.rememberState(this._target.style.width, this._target.style.height);
-
-			this.dispatchEvent(new CustomEvent("resizeend", {
-				detail: {
-					directionX: this._useDirectionX,
-					directionY: this._useDirectionY,
-					targetWidth: this._useDirectionX ? this._target.style.width : undefined,
-					targetHeight: this._useDirectionY ? this._target.style.height : undefined,
-					pageX: event.pageX,
-					pageY: event.pageY
-				}
-			}));
-		}
-	}
-
-	rememberState(width, height) {
-		if(this._rememberState) {
-			localStorage.setItem(this._storageId, JSON.stringify({ width, height }));
-		}
-	}
-
-	recallState() {
-		if(this._rememberState) {
-			let state = JSON.parse(localStorage.getItem(this._storageId));
-			if(state && state.width !== "") {
-				this._target.style.width = state.width;
-			}
-			if(state && state.height !== "") {
-				this._target.style.height = state.height;
-			}
-		}
-	}
-}
diff --git a/lib/style.scss b/lib/client/style.css
similarity index 53%
rename from lib/style.scss
rename to lib/client/style.css
index 557cabb..3b42ff8 100644
--- a/lib/style.scss
+++ b/lib/client/style.css
@@ -1,40 +1,12 @@
-@import "prismjs/themes/prism";
-
-$padding-layout: 1.5rem;
-
-@mixin text-column {
-  max-width: 68ch;
-}
-
-// is this cool?
-@mixin nav-hover-module {
-	position: relative;
-	max-width: 24ch;
-	overflow: hidden;
-	z-index: 100;
-
-	&:hover {
-		overflow: visible;
-	}
-
-	li {
-		width: max-content;
-	}
-
-	a {
-		background-color: white;
-		border-radius: .4em;
-		padding-right: .25em;
-	}
+:root {
+	--padding-layout: 1.5rem;
+	--text-column-max-width: 68ch;
 }
 
 html,
 body {
+	font-family: system-ui;
 	margin: 0;
-	padding: 0;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-
-	font-size: 14px;
 }
 
 @media (min-width: 740px) {
@@ -66,37 +38,35 @@ h1 {
 }
 
 #aiur-nav {
-	// @include nav-hover-module;
 	border-right: 1px solid whitesmoke;
 	grid-area: nav;
-	padding: $padding-layout;
+	padding: var(--padding-layout);
 	position: relative;
 	overflow: hidden;
+}
 
-	ul {
-		list-style-type: none;
-		padding-left: 0;
-	}
-
-	li {
-		list-style-type: none;
-		padding-left: 1rem;
-		white-space: nowrap;
-	}
+#aiur-nav ul {
+	list-style-type: none;
+	padding-left: 0;
+}
 
-	> ul > li {
-		padding-left: 0;
-	}
+#aiur-nav li {
+	list-style-type: none;
+	padding-left: 1rem;
+	white-space: nowrap;
+}
 
-	ul > :last-child {
-		margin-bottom: .5rem;
-	}
+#aiur-nav > ul > li {
+	padding-left: 0;
 }
 
+#aiur-nav ul > :last-child {
+	margin-bottom: .5rem;
+}
 
 main {
 	grid-area: main;
-	padding: $padding-layout;
+	padding: var(--padding-layout);
 }
 
 main > :first-child,
@@ -107,28 +77,27 @@ nav > :first-child {
 tabs-control {
 	display: block;
 	margin: 1.5rem 0 1rem;
+}
 
-	> [aria-selected] {
-		appearance: none;
-		-webkit-appearance: none;
-		border: 2px solid transparent;
-		border-radius: 2em;
-		cursor: pointer;
-		font-size: 1rem;
-		margin: 0;
-		margin-right: .75rem;
-		padding: .5em 1em;
-	}
+tabs-control > [aria-selected] {
+	appearance: none;
+	border: 2px solid transparent;
+	border-radius: 2em;
+	cursor: pointer;
+	font-size: 1rem;
+	margin: 0;
+	margin-right: .75rem;
+	padding: .5em 1em;
+}
 
-	> [aria-selected=true] {
-		background: whitesmoke;
-		font-weight: bold;
-		box-shadow: 2px 2px 0 0 silver;
-	}
+tabs-control > [aria-selected=true] {
+	background: whitesmoke;
+	font-weight: bold;
+	box-shadow: 2px 2px 0 0 silver;
+}
 
-	> [aria-selected=false] {
-		background: transparent;
-	}
+tabs-control > [aria-selected=false] {
+	background: transparent;
 }
 
 external-text pre {
@@ -139,21 +108,20 @@ external-text pre {
 resize-handle {
 	background: gainsboro;
 	position: absolute;
-
 	right: 0px;
 	width: 3px;
 	height: 100%;
 	cursor: grab;
 	top: 0;
+}
 
-	&.dragging {
-		cursor: grabbing;
-		background: coral;
-	}
+resize-handle.dragging {
+	cursor: grabbing;
+	background: coral;
+}
 
-	&:hover {
-		background: coral;
-	}
+resize-handle:hover {
+	background: coral;
 }
 
 .component-preview {
@@ -161,10 +129,10 @@ resize-handle {
 	flex-direction: column;
 	margin-bottom: 3.5rem;
 	margin-top: 1rem;
+}
 
-	> * {
-		margin-top: 1rem;
-	}
+.component-preview > * {
+	margin-top: 1rem;
 }
 
 .component-preview-frame {
@@ -203,45 +171,45 @@ resize-handle {
 	margin-right: .25em;
 }
 
-#aiur-doc .aiur-status-deprecated,
+.aiur-status-deprecated,
 :hover > .aiur-status-deprecated,
 .aiur-status-deprecated::before {
 	background-color: darkslategray;
 	color: white;
 }
 
-#aiur-doc .aiur-status-prototype,
+.aiur-status-prototype,
 :hover > .aiur-status-prototype,
 .aiur-status-prototype::before {
 	background-color: darkred;
 	color: white;
 }
 
-#aiur-doc .aiur-status-wip,
+.aiur-status-wip,
 :hover > .aiur-status-wip,
 .aiur-status-wip::before {
 	background-color: coral;
 	color: white;
 }
 
-#aiur-doc .aiur-status-ready,
-#aiur-doc .aiur-status-ready::before,
+.aiur-status-ready,
+.aiur-status-ready::before,
 :hover > .aiur-status-ready,
 :hover > .aiur-status-ready::before {
 	background-color: springgreen;
 	color: black;
 }
 
-#aiur-doc .aiur-status-deprecated::before,
+.aiur-status-deprecated::before,
 :hover > .aiur-status-deprecated::before,
-#aiur-doc .aiur-status-prototype::before,
+.aiur-status-prototype::before,
 :hover > .aiur-status-prototype::before,
-#aiur-doc .aiur-status-wip::before,
+.aiur-status-wip::before,
 :hover > .aiur-status-wip::before {
 	background-color: white;
 }
 
-#aiur-doc .aiur-status-ready::before,
+.aiur-status-ready::before,
 :hover > .aiur-status-ready::before {
 	background-color: black;
 }
@@ -252,45 +220,41 @@ resize-handle {
 	font-size: .875rem;
 	letter-spacing: .02em;
 	padding-bottom: .75rem;
+}
 
-	&:hover {
-		color: black;
-	}
+.aiur-doc-meta:hover {
+	color: black;
 }
 
 /* aiur-doc markdown */
+#aiur-doc h2,
+#aiur-doc h3,
+#aiur-doc h4,
+#aiur-doc h5,
+#aiur-doc h6 {
+	max-width: var(--text-column-max-width);
+}
 
-#aiur #aiur-doc {
-
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		@include text-column;
-	}
-
-	h1 {
-		font-size: 2.75rem;
-		margin-top: 1.5rem;
-		margin-bottom: 3rem;
-	}
+#aiur-doc h1 {
+	font-size: 2.75rem;
+	margin-top: 1.5rem;
+	margin-bottom: 3rem;
+}
 
-	p {
-		@include text-column;
-	}
+#aiur-doc p {
+	max-width: var(--text-column-max-width);
+}
 
-	a {
-		color: royalblue;
-	}
+#aiur-doc a {
+	color: royalblue;
+}
 
-	code {
-		background-color: linen;
-		border-radius: .33em;
-		padding: .15em .4em;
-	}
+#aiur-doc code {
+	background-color: linen;
+	border-radius: .33em;
+	padding: .15em .4em;
+}
 
-	pre > code {
-		display: block;
-	}
+#aiur-doc pre > code {
+	display: block;
 }
diff --git a/lib/client/tabs_control.js b/lib/client/tabs_control.js
deleted file mode 100644
index 2b7ad9f..0000000
--- a/lib/client/tabs_control.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/* global HTMLElement */
-export default class TabsConstrol extends HTMLElement {
-	connectedCallback() {
-		window.requestAnimationFrame(() => {
-			this.setAttribute("role", "tablist");
-			this._triggers = Array.from(this.querySelectorAll("[role=\"tab\"]"));
-			this._triggers.forEach(trigger => trigger.setAttribute("tabindex", 0));
-			this._targetMap = new Map();
-			this._triggers.forEach(triggerElement => {
-				let triggerTargetId = "#" + triggerElement.getAttribute("aria-controls");
-				let triggerTargetElement = document.querySelector(triggerTargetId);
-				this._targetMap.set(triggerTargetId, triggerTargetElement);
-				triggerElement.addEventListener("click", e => this.switch(triggerElement));
-			});
-
-			this._triggers.forEach(triggerElement => {
-				if(triggerElement.getAttribute("aria-selected") !== "true") {
-					this._targetMap.
-						get("#" + triggerElement.getAttribute("aria-controls")).
-						setAttribute("hidden", "true");
-				}
-			});
-		});
-	}
-
-	switch(clickedElement) {
-		if(clickedElement.getAttribute("aria-selected") === "true") {
-			return;
-		}
-		window.requestAnimationFrame(() => {
-			this._triggers.forEach(trigger => trigger.setAttribute("aria-selected", "false"));
-			clickedElement.setAttribute("aria-selected", "true");
-			this._targetMap.forEach(targetElement => targetElement.setAttribute("hidden", "true"));
-			let clickTargetElement = this._targetMap.get("#" + clickedElement.getAttribute("aria-controls"));
-			clickTargetElement.removeAttribute("hidden");
-		});
-	}
-}
diff --git a/lib/generate_layout.js b/lib/generate_layout.js
index c56246e..18499d0 100644
--- a/lib/generate_layout.js
+++ b/lib/generate_layout.js
@@ -11,6 +11,8 @@ module.exports = async (navigation, manifest) => {
 		<meta name="viewport" content="width=device-width,initial-scale=1">
 		${page.meta}
 		<link href="${manifest.get("style-aiur.css")}" rel="stylesheet">
+		<link href="${manifest.get("prism.css")}" rel="stylesheet">
+		<script type="module" src="${manifest.get("script-aiur.js")}"></script>
 	</head>
 	<body id="aiur">
 		<nav id="aiur-nav">
@@ -21,7 +23,6 @@ module.exports = async (navigation, manifest) => {
 		<h1>${page.heading}${StatusBadge(page.status)}</h1>
 		${content}
 		</main>
-		<script src="${manifest.get("script-aiur.js")}"></script>
 	</body>
 </html>`;
 };
diff --git a/lib/index.js b/lib/index.js
index ca0c5a1..610caa9 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -1,7 +1,11 @@
 let Site = require("./site");
 
-module.exports = (config, assetManager, options) => {
+exports.key = "aiur";
+exports.bucket = "markup";
+
+exports.plugin = (config, assetManager, options) => {
 	let sites = config.map(siteConfig => new Site(siteConfig, assetManager));
+
 	return filepaths => {
 		let builds = sites.map(site => site.generate(filepaths));
 		return Promise.all(builds);
diff --git a/lib/site.js b/lib/site.js
index 0f99223..cb24b66 100644
--- a/lib/site.js
+++ b/lib/site.js
@@ -1,8 +1,8 @@
 let generatePageTree = require("./tree");
-let resolvePath = require("faucet-pipeline-core/lib/util/resolve");
+let { resolvePath } = require("faucet-pipeline-core/lib/util");
 let { abort, reportFileStatus } = require("faucet-pipeline-core/lib/util");
 let { mkdirp } = require("mkdirp");
-let { writeFile } = require("node:fs/promises");
+let { readFile, writeFile } = require("node:fs/promises");
 let path = require("path");
 let PageRenderer = require("./page_renderer");
 let SnippetWrapper = require("./snippet_wrapper");
@@ -18,12 +18,12 @@ let DEFAULTS = {
 };
 
 module.exports = class Site {
-	constructor({ source, target, baseURI }, assetManager) {
+	constructor({ source, target }, assetManager) {
 		let { referenceDir } = assetManager;
 		Object.assign(this, {
 			source: resolvePath(source, referenceDir),
 			target: resolvePath(target, referenceDir, { enforceRelative: true }),
-			baseURI,
+			baseURI: assetManager.manifest.baseURI,
 			// TODO: either make this configurable or autoload renderers on use
 			renderers: DEFAULTS.renderers,
 			// TODO: make this configurable, but first find a simpler contract
@@ -34,6 +34,13 @@ module.exports = class Site {
 	}
 
 	async generate(filepaths) {
+		if(filepaths) {
+			// only copy the files on the first run
+			this.copyFile("prismjs/themes/prism.css", `${this.target}/prism.css`);
+			this.copyFile("aiur/lib/client/style.css", `${this.target}/style-aiur.css`);
+			this.copyFile("aiur/lib/client/index.js", `${this.target}/script-aiur.css`);
+		}
+
 		let tree = await this.tree();
 		// TODO: no longer necessary when we can use nite-owl 4.0.0
 		filepaths = new Set(filepaths);
@@ -107,6 +114,11 @@ module.exports = class Site {
 	get referenceDir() {
 		return this.assetManager.referenceDir;
 	}
+
+	async copyFile(source, destination) {
+		let content = await readFile(this.assetManager.resolvePath(source));
+		this.assetManager.writeFile(destination, content);
+	}
 };
 
 // require, but purge the cache beforehand
diff --git a/lib/tree.js b/lib/tree.js
index 66d8a3e..fd1782a 100644
--- a/lib/tree.js
+++ b/lib/tree.js
@@ -1,5 +1,5 @@
 let Page = require("./page");
-let resolvePath = require("faucet-pipeline-core/lib/util/resolve");
+let { resolvePath } = require("faucet-pipeline-core/lib/util");
 
 module.exports = generatePageTree;
 
diff --git a/package.json b/package.json
index 6fa459e..a3dc116 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "aiur",
-	"version": "0.11.0",
+	"version": "0.12.0",
 	"description": "styleguide generator",
 	"main": "lib/index.js",
 	"bin": {
@@ -22,23 +22,22 @@
 		"url": "https://github.com/faucet-pipeline/aiur/issues"
 	},
 	"engines": {
-		"node": ">= 18"
+		"node": ">= 20"
 	},
 	"dependencies": {
 		"commonmark": "^0.31.2",
-		"faucet-pipeline-core": "^2.0.0",
-		"faucet-pipeline-js": "^3.0.0",
-		"faucet-pipeline-sass": "^1.7.0",
-		"faucet-pipeline-static": "^2.0.0",
+		"faucet-pipeline-core": "git+https://github.com/faucet-pipeline/faucet-pipeline-core.git#util-cleanup",
 		"handlebars": "^4.7.7",
-		"metacolon": "^2.0.2",
+		"metacolon": "^2.0.3",
 		"minimist": "^1.2.5",
 		"mkdirp": "^3.0.1",
 		"parse5": "^7.1.2",
 		"prismjs": "^1.26.0"
 	},
 	"devDependencies": {
+		"donny": "^0.3.0",
 		"eslint-config-fnd": "^1.12.0",
+		"nite-owl": "^5.0.5",
 		"release-util-fnd": "^3.0.0",
 		"rimraf": "^6.0.1"
 	}