@filipgutica/ui 1.14.1 → 1.16.0

package/dist/site.js

@@ -1,30 +1,30 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "./use-active-section-DCS_wyYq.js";
-import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, nextTick as g, normalizeClass as _, normalizeStyle as v, onBeforeUnmount as y, onMounted as b, onUnmounted as x, openBlock as S, ref as C, renderList as w, renderSlot as T, shallowRef as E, toDisplayString as D, unref as O, useId as k, useModel as A, useSlots as j, useTemplateRef as M, watch as N, withCtx as P } from "vue";
-import { tryOnMounted as F, usePreferredDark as I, useStorage as L } from "@vueuse/core";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./use-active-section-DMbpGE2f.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, nextTick as _, normalizeClass as v, normalizeStyle as y, onBeforeUnmount as b, onMounted as x, onUnmounted as S, openBlock as C, ref as w, renderList as T, renderSlot as E, shallowRef as D, toDisplayString as O, unref as k, useId as A, useModel as j, useSlots as M, useTemplateRef as N, watch as P, withCtx as F } from "vue";
+import { tryOnMounted as I, usePreferredDark as L, useStorage as R } from "@vueuse/core";
 //#region src/site/appearance.ts
-var R = "tool-site-theme", z = (e) => e === "system" || e === "light" || e === "dark", ee = `(function () {
+var z = "tool-site-theme", B = (e) => e === "system" || e === "light" || e === "dark", ee = `(function () {
   var root = document.documentElement, choice;
-  try { choice = localStorage.getItem('${R}'); } catch (error) {}
+  try { choice = localStorage.getItem('${z}'); } catch (error) {}
   var dark = choice === 'dark';
   if (choice !== 'light' && choice !== 'dark') {
     try { dark = matchMedia('(prefers-color-scheme: dark)').matches; } catch (error) {}
   }
   root.classList.toggle('dark', dark);
   if (choice === 'light' || choice === 'dark') root.dataset.theme = choice;
-})();`, B = ({ root: e, choice: t, appearance: n }) => {
+})();`, V = ({ root: e, choice: t, appearance: n }) => {
 	e.classList.toggle("dark", n === "dark"), t === "system" ? delete e.dataset.theme : e.dataset.theme = t;
-}, V = ({ applyToRoot: e = !0 } = {}) => {
-	let t = L(R, "system", void 0, {
+}, H = ({ applyToRoot: e = !0 } = {}) => {
+	let t = R(z, "system", void 0, {
 		initOnMounted: !0,
 		writeDefaults: !1,
 		onError: () => {},
 		serializer: {
-			read: (e) => z(e) ? e : "system",
+			read: (e) => B(e) ? e : "system",
 			write: (e) => e
 		}
-	}), n = I(), r = s(() => t.value), i = s(() => t.value === "system" ? n.value ? "dark" : "light" : t.value);
-	return e && F(() => {
-		N([r, i], () => B({
+	}), n = L(), r = c(() => t.value), i = c(() => t.value === "system" ? n.value ? "dark" : "light" : t.value);
+	return e && I(() => {
+		P([r, i], () => V({
 			root: document.documentElement,
 			choice: r.value,
 			appearance: i.value
@@ -33,10 +33,10 @@ var R = "tool-site-theme", z = (e) => e === "system" || e === "light" || e === "
 		choice: r,
 		appearance: i,
 		chooseAppearance: (e) => {
-			z(e) && (t.value = e);
+			B(e) && (t.value = e);
 		}
 	};
-}, H = [
+}, U = [
 	{
 		id: "annoterm",
 		label: "annoterm",
@@ -73,24 +73,7 @@ var R = "tool-site-theme", z = (e) => e === "system" || e === "light" || e === "
 		href: "https://filipgutica.github.io/ui/",
 		repository: "https://github.com/filipgutica/ui"
 	}
-], te = { class: "fg-site-header" }, ne = { class: "fg-site-header__inner" }, re = ["aria-label"], ie = {
-	class: "fg-site-projects__menu fg-site-nav",
-	"aria-label": "Projects"
-}, U = ["href", "aria-current"], W = { class: "fg-site-header__end" }, G = {
-	key: 0,
-	class: "fg-site-header__links",
-	"aria-label": "Site links"
-}, K = ["href"], q = {
-	key: 0,
-	class: "fg-site-appearance",
-	role: "group",
-	"aria-label": "Color theme"
-}, J = [
-	"aria-label",
-	"title",
-	"aria-pressed",
-	"onClick"
-], Y = {
+], te = {
 	viewBox: "0 0 24 24",
 	width: "18",
 	height: "18",
@@ -98,52 +81,88 @@ var R = "tool-site-theme", z = (e) => e === "system" || e === "light" || e === "
 	stroke: "currentColor",
 	"stroke-width": "1.5",
 	"aria-hidden": "true"
-}, ae = {
+}, ne = {
 	key: 2,
 	d: "M20.5 13.5A9 9 0 0 1 10.5 3a9 9 0 1 0 10 10.5Z"
-}, oe = /* @__PURE__ */ m({
-	__name: "UiSiteHeader",
-	props: {
-		project: {},
-		links: { default: () => [] }
-	},
-	setup(e) {
-		let t = [
+}, W = /* @__PURE__ */ h({
+	__name: "UiSiteAppearancePicker",
+	props: { modelValue: { default: () => void 0 } },
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = t, r = [
 			{
 				value: "system",
-				label: "System"
+				label: "System theme"
 			},
 			{
 				value: "light",
-				label: "Light"
+				label: "Light theme"
 			},
 			{
 				value: "dark",
-				label: "Dark"
+				label: "Dark theme"
 			}
-		], n = s(() => H.find(({ id: t }) => t === e.project)?.label ?? e.project), r = j().default ? void 0 : V(), i = C(!1), a = C(), c = C(), f = () => {
-			a.value && (a.value.open = !1);
+		];
+		return (t, a) => (C(), l(i, {
+			class: "fg-site-appearance",
+			label: "Color theme",
+			size: "lg",
+			"icon-only": "",
+			items: r,
+			"model-value": e.modelValue,
+			"onUpdate:modelValue": a[0] ||= (e) => n("update:modelValue", e)
+		}, {
+			icon: F(({ item: e }) => [(C(), d("svg", te, [e.value === "system" ? (C(), d(s, { key: 0 }, [a[1] ||= f("rect", {
+				x: "3",
+				y: "4",
+				width: "18",
+				height: "13",
+				rx: "2"
+			}, null, -1), a[2] ||= f("path", { d: "M8 21h8m-4-4v4" }, null, -1)], 64)) : e.value === "light" ? (C(), d(s, { key: 1 }, [a[3] ||= f("circle", {
+				cx: "12",
+				cy: "12",
+				r: "4"
+			}, null, -1), a[4] ||= f("path", { d: "M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5" }, null, -1)], 64)) : (C(), d("path", ne))]))]),
+			_: 1
+		}, 8, ["model-value"]));
+	}
+}), re = { class: "fg-site-header" }, ie = { class: "fg-site-header__inner" }, G = ["aria-label"], K = {
+	class: "fg-site-projects__menu fg-site-nav",
+	"aria-label": "Projects"
+}, q = ["href", "aria-current"], J = { class: "fg-site-header__end" }, Y = {
+	key: 0,
+	class: "fg-site-header__links",
+	"aria-label": "Site links"
+}, ae = ["href"], oe = /* @__PURE__ */ h({
+	__name: "UiSiteHeader",
+	props: {
+		project: {},
+		links: { default: () => [] }
+	},
+	setup(e) {
+		let t = c(() => U.find(({ id: t }) => t === e.project)?.label ?? e.project), n = M().default ? void 0 : H(), r = w(!1), i = w(), a = w(), o = () => {
+			i.value && (i.value.open = !1);
 		}, p = (e) => {
-			e.key !== "Escape" || !a.value?.open || (f(), c.value?.focus());
+			e.key !== "Escape" || !i.value?.open || (o(), a.value?.focus());
 		}, m = (e) => {
-			e.relatedTarget instanceof Node && !a.value?.contains(e.relatedTarget) && f();
+			e.relatedTarget instanceof Node && !i.value?.contains(e.relatedTarget) && o();
 		}, h = (e) => {
-			e.target instanceof Node && !a.value?.contains(e.target) && f();
+			e.target instanceof Node && !i.value?.contains(e.target) && o();
 		};
-		return b(() => {
-			i.value = !0, document.addEventListener("pointerdown", h);
-		}), y(() => document.removeEventListener("pointerdown", h)), (s, f) => (S(), u("header", te, [d("div", ne, [d("details", {
+		return x(() => {
+			r.value = !0, document.addEventListener("pointerdown", h);
+		}), b(() => document.removeEventListener("pointerdown", h)), (o, c) => (C(), d("header", re, [f("div", ie, [f("details", {
 			ref_key: "menu",
-			ref: a,
+			ref: i,
 			class: "fg-site-projects",
 			onKeydown: p,
 			onFocusout: m
-		}, [d("summary", {
+		}, [f("summary", {
 			ref_key: "trigger",
-			ref: c,
+			ref: a,
 			class: "fg-site-projects__trigger",
-			"aria-label": `Project: ${n.value}`
-		}, [d("span", null, D(n.value), 1), f[0] ||= d("svg", {
+			"aria-label": `Project: ${t.value}`
+		}, [f("span", null, O(t.value), 1), c[0] ||= f("svg", {
 			class: "fg-site-projects__chevron",
 			viewBox: "0 0 16 16",
 			width: "16",
@@ -152,38 +171,24 @@ var R = "tool-site-theme", z = (e) => e === "system" || e === "light" || e === "
 			stroke: "currentColor",
 			"stroke-width": "1.5",
 			"aria-hidden": "true"
-		}, [d("path", { d: "m4 6 4 4 4-4" })], -1)], 8, re), d("nav", ie, [(S(!0), u(o, null, w(O(H), (t) => (S(), u("a", {
+		}, [f("path", { d: "m4 6 4 4 4-4" })], -1)], 8, G), f("nav", K, [(C(!0), d(s, null, T(k(U), (t) => (C(), d("a", {
 			key: t.id,
 			href: t.href,
 			"aria-current": t.id === e.project ? "page" : void 0
-		}, D(t.label), 9, U))), 128))])], 544), d("div", W, [e.links.length > 0 ? (S(), u("nav", G, [(S(!0), u(o, null, w(e.links, (e) => (S(), u("a", {
+		}, O(t.label), 9, q))), 128))])], 544), f("div", J, [e.links.length > 0 ? (C(), d("nav", Y, [(C(!0), d(s, null, T(e.links, (e) => (C(), d("a", {
 			key: e.href,
 			href: e.href
-		}, D(e.label), 9, K))), 128))])) : l("", !0), T(s.$slots, "default", {}, () => [i.value && O(r) ? (S(), u("div", q, [(S(), u(o, null, w(t, (e) => d("button", {
-			key: e.value,
-			type: "button",
-			class: "fg-site-appearance__choice",
-			"aria-label": `${e.label} theme`,
-			title: `${e.label} theme`,
-			"aria-pressed": O(r).choice.value === e.value,
-			onClick: (t) => O(r).chooseAppearance(e.value)
-		}, [(S(), u("svg", Y, [e.value === "system" ? (S(), u(o, { key: 0 }, [f[1] ||= d("rect", {
-			x: "3",
-			y: "4",
-			width: "18",
-			height: "13",
-			rx: "2"
-		}, null, -1), f[2] ||= d("path", { d: "M8 21h8m-4-4v4" }, null, -1)], 64)) : e.value === "light" ? (S(), u(o, { key: 1 }, [f[3] ||= d("circle", {
-			cx: "12",
-			cy: "12",
-			r: "4"
-		}, null, -1), f[4] ||= d("path", { d: "M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5" }, null, -1)], 64)) : (S(), u("path", ae))]))], 8, J)), 64))])) : l("", !0)])])])]));
+		}, O(e.label), 9, ae))), 128))])) : u("", !0), E(o.$slots, "default", {}, () => [r.value && k(n) ? (C(), l(W, {
+			key: 0,
+			"model-value": k(n).choice.value,
+			"onUpdate:modelValue": k(n).chooseAppearance
+		}, null, 8, ["model-value", "onUpdate:modelValue"])) : u("", !0)])])])]));
 	}
 }), se = ["id"], ce = ["role", "aria-labelledby"], le = ["id"], ue = [
 	"href",
 	"aria-current",
 	"onClick"
-], de = { key: 0 }, X = /* @__PURE__ */ m({
+], de = { key: 0 }, X = /* @__PURE__ */ h({
 	__name: "SiteNavLinks",
 	props: {
 		contentId: {},
@@ -194,95 +199,95 @@ var R = "tool-site-theme", z = (e) => e === "system" || e === "light" || e === "
 	emits: ["navigate"],
 	setup(e, { emit: t }) {
 		let n = t, r = `${e.contentId}-label`, i = (t) => `${e.contentId}-group-${t}`, a = (t) => t.current ? "page" : e.activeId !== void 0 && t.href === `#${e.activeId}` ? "location" : void 0;
-		return (t, s) => (S(), u("div", {
+		return (t, o) => (C(), d("div", {
 			id: e.contentId,
 			class: "fg-site-rail__content"
-		}, [d("nav", {
+		}, [f("nav", {
 			class: "fg-site-rail__nav fg-site-nav",
 			"aria-labelledby": r
-		}, [d("h2", {
+		}, [f("h2", {
 			id: r,
 			class: "fg-site-rail__label"
-		}, D(e.label), 1), (S(!0), u(o, null, w(e.groups, (e, t) => (S(), u("div", {
+		}, O(e.label), 1), (C(!0), d(s, null, T(e.groups, (e, t) => (C(), d("div", {
 			key: e.label ?? t,
 			class: "fg-site-rail__group",
 			role: e.label ? "group" : void 0,
 			"aria-labelledby": e.label ? i(t) : void 0
-		}, [e.label ? (S(), u("span", {
+		}, [e.label ? (C(), d("span", {
 			key: 0,
 			id: i(t),
 			class: "fg-site-rail__group-label"
-		}, D(e.label), 9, le)) : l("", !0), (S(!0), u(o, null, w(e.items, (e) => (S(), u("a", {
+		}, O(e.label), 9, le)) : u("", !0), (C(!0), d(s, null, T(e.items, (e) => (C(), d("a", {
 			key: e.href,
 			href: e.href,
 			"aria-current": a(e),
 			onClick: (t) => n("navigate", e.href, t)
-		}, [e.code ? (S(), u("code", de, D(e.label), 1)) : (S(), u(o, { key: 1 }, [f(D(e.label), 1)], 64))], 8, ue))), 128))], 8, ce))), 128))])], 8, se));
+		}, [e.code ? (C(), d("code", de, O(e.label), 1)) : (C(), d(s, { key: 1 }, [p(O(e.label), 1)], 64))], 8, ue))), 128))], 8, ce))), 128))])], 8, se));
 	}
-}), fe = ["data-enhanced"], pe = ["open"], me = ["aria-controls"], he = "(max-width: 800px)", ge = /* @__PURE__ */ m({
+}), fe = ["data-enhanced"], pe = ["open"], me = ["aria-controls"], he = "(max-width: 800px)", ge = /* @__PURE__ */ h({
 	__name: "UiSiteNav",
 	props: {
 		label: {},
 		groups: {}
 	},
 	setup(e) {
-		let t = k(), n = C(), o = C(!1), l = C(!1), m = C(!1), h = a({ targetIds: e.groups.flatMap((e) => e.items).flatMap(({ href: e }) => e.startsWith("#") && e.length > 1 ? [e.slice(1)] : []) }), _ = s(() => e.groups.flatMap((e) => e.items).find((e) => e.current)?.label), v = s(() => e.groups.flatMap((e) => e.items).find((e) => e.href === `#${h.value}`)?.label), y = s(() => {
-			let t = _.value ?? v.value;
+		let n = A(), r = w(), i = w(!1), s = w(!1), u = w(!1), h = o({ targetIds: e.groups.flatMap((e) => e.items).flatMap(({ href: e }) => e.startsWith("#") && e.length > 1 ? [e.slice(1)] : []) }), g = c(() => e.groups.flatMap((e) => e.items).find((e) => e.current)?.label), v = c(() => e.groups.flatMap((e) => e.items).find((e) => e.href === `#${h.value}`)?.label), y = c(() => {
+			let t = g.value ?? v.value;
 			return t ? `${e.label}: ${t}` : e.label;
-		}), w, T = null, E = () => n.value?.querySelector("button.fg-site-rail__toggle"), A = () => {
-			g(() => n.value?.querySelector(".fg-site-nav a")?.focus({ preventScroll: !0 }));
+		}), b, T = null, E = () => r.value?.querySelector("button.fg-site-rail__toggle"), D = () => {
+			_(() => r.value?.querySelector(".fg-site-nav a")?.focus({ preventScroll: !0 }));
 		}, j = () => {
-			let e = w?.matches && !l.value && n.value?.contains(document.activeElement), t = w?.matches === !1 && l.value && !m.value && E() === document.activeElement;
-			l.value = w?.matches === !0, l.value || (m.value = !1), e ? g(() => E()?.focus({ preventScroll: !0 })) : t && A();
+			let e = b?.matches && !s.value && r.value?.contains(document.activeElement), t = b?.matches === !1 && s.value && !u.value && E() === document.activeElement;
+			s.value = b?.matches === !0, s.value || (u.value = !1), e ? _(() => E()?.focus({ preventScroll: !0 })) : t && D();
 		}, M = (e, t) => {
-			!m.value || t.button !== 0 || t.metaKey || t.ctrlKey || t.altKey || t.shiftKey || (T = e.startsWith("#") ? document.getElementById(e.slice(1)) : null, m.value = !1);
+			!u.value || t.button !== 0 || t.metaKey || t.ctrlKey || t.altKey || t.shiftKey || (T = e.startsWith("#") ? document.getElementById(e.slice(1)) : null, u.value = !1);
 		}, N = (e) => {
-			T ? (e.preventDefault(), T.tabIndex = -1, T.focus({ preventScroll: !0 }), T = null) : l.value || (e.preventDefault(), A());
+			T ? (e.preventDefault(), T.tabIndex = -1, T.focus({ preventScroll: !0 }), T = null) : s.value || (e.preventDefault(), D());
 		};
-		return b(() => {
-			w = matchMedia(he), j(), o.value = !0, w.addEventListener("change", j);
-		}), x(() => w?.removeEventListener("change", j)), (a, s) => (S(), u("div", {
+		return x(() => {
+			b = matchMedia(he), j(), i.value = !0, b.addEventListener("change", j);
+		}), S(() => b?.removeEventListener("change", j)), (o, c) => (C(), d("div", {
 			ref_key: "root",
-			ref: n,
+			ref: r,
 			class: "fg-site-rail",
-			"data-enhanced": o.value
-		}, [!o.value || !l.value ? (S(), u("details", {
+			"data-enhanced": i.value
+		}, [!i.value || !s.value ? (C(), d("details", {
 			key: 0,
 			class: "fg-site-rail__menu",
-			open: o.value && !l.value
-		}, [d("summary", {
+			open: i.value && !s.value
+		}, [f("summary", {
 			class: "fg-site-rail__summary",
-			"aria-controls": O(t)
-		}, D(y.value), 9, me), p(X, {
-			"content-id": O(t),
+			"aria-controls": k(n)
+		}, O(y.value), 9, me), m(X, {
+			"content-id": k(n),
 			label: e.label,
 			groups: e.groups,
-			"active-id": O(h)
+			"active-id": k(h)
 		}, null, 8, [
 			"content-id",
 			"label",
 			"groups",
 			"active-id"
-		])], 8, pe)) : (S(), c(i, {
+		])], 8, pe)) : (C(), l(t, {
 			key: 1,
-			open: m.value,
-			"onUpdate:open": s[0] ||= (e) => m.value = e,
+			open: u.value,
+			"onUpdate:open": c[0] ||= (e) => u.value = e,
 			title: e.label,
 			onCloseAutoFocus: N
 		}, {
-			trigger: P(() => [p(r, {
+			trigger: F(() => [m(a, {
 				variant: "ghost",
 				size: "lg",
 				class: "fg-site-rail__toggle"
 			}, {
-				default: P(() => [f(D(y.value), 1)]),
+				default: F(() => [p(O(y.value), 1)]),
 				_: 1
 			})]),
-			default: P(() => [p(X, {
-				"content-id": O(t),
+			default: F(() => [m(X, {
+				"content-id": k(n),
 				label: e.label,
 				groups: e.groups,
-				"active-id": O(h),
+				"active-id": k(h),
 				onNavigate: M
 			}, null, 8, [
 				"content-id",
@@ -298,7 +303,7 @@ var R = "tool-site-theme", z = (e) => e === "system" || e === "light" || e === "
 	"tabindex",
 	"data-fit",
 	"innerHTML"
-], Z = .7, Q = /* @__PURE__ */ m({
+], Z = .7, Q = /* @__PURE__ */ h({
 	__name: "CaptureScreen",
 	props: {
 		html: {},
@@ -306,7 +311,7 @@ var R = "tool-site-theme", z = (e) => e === "system" || e === "light" || e === "
 		fit: { type: Boolean }
 	},
 	setup(e) {
-		let t = C(), n = C(1), r = C(), i = s(() => r.value !== void 0), a, o = () => {
+		let t = w(), n = w(1), r = w(), i = c(() => r.value !== void 0), a, o = () => {
 			if (!e.fit) {
 				r.value = void 0, n.value = 1;
 				return;
@@ -316,9 +321,9 @@ var R = "tool-site-theme", z = (e) => e === "system" || e === "light" || e === "
 			let o = Math.min(1, i.clientWidth / a.offsetWidth);
 			o >= Z && (i.scrollLeft = 0), n.value = o >= Z ? o : 1, r.value = o >= Z ? Math.ceil(a.offsetHeight * n.value) + i.offsetHeight - i.clientHeight : void 0;
 		};
-		return N(() => [e.fit, e.html], o, { flush: "post" }), b(() => {
+		return P(() => [e.fit, e.html], o, { flush: "post" }), x(() => {
 			typeof ResizeObserver < "u" && (a = new ResizeObserver(o), t.value && a.observe(t.value)), o();
-		}), x(() => a?.disconnect()), (a, o) => (S(), u("div", {
+		}), S(() => a?.disconnect()), (a, o) => (C(), d("div", {
 			ref_key: "container",
 			ref: t,
 			class: "fg-capture__screen",
@@ -326,7 +331,7 @@ var R = "tool-site-theme", z = (e) => e === "system" || e === "light" || e === "
 			"aria-label": e.label,
 			tabindex: i.value ? void 0 : 0,
 			"data-fit": i.value || void 0,
-			style: v({
+			style: y({
 				height: r.value === void 0 ? void 0 : `${r.value}px`,
 				"--capture-scale": n.value
 			}),
@@ -336,9 +341,9 @@ var R = "tool-site-theme", z = (e) => e === "system" || e === "light" || e === "
 }), ve = ["data-enhanced"], ye = ["aria-label"], be = ["id"], xe = { class: "fg-capture__preview" }, Se = ["title", "onClick"], Ce = {
 	key: 0,
 	class: "fg-capture__caption"
-}, we = { key: 0 }, Te = /* @__PURE__ */ m({
+}, we = { key: 0 }, Te = /* @__PURE__ */ h({
 	__name: "UiCapture",
-	props: /*@__PURE__*/ h({
+	props: /*@__PURE__*/ g({
 		items: {},
 		label: {},
 		idPrefix: { default: "frame-" }
@@ -347,14 +352,14 @@ var R = "tool-site-theme", z = (e) => e === "system" || e === "light" || e === "
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(e) {
-		let i = A(e, "modelValue"), a = C(!1), m = s(() => e.items.map(({ id: e, label: t }) => ({
+	setup(t) {
+		let r = j(t, "modelValue"), i = w(!1), o = c(() => t.items.map(({ id: e, label: t }) => ({
 			value: e,
 			label: t
-		}))), h = s(() => i.value ?? e.items[0]?.id ?? ""), _ = s(() => e.items.find(({ id: e }) => e === h.value)), v = C(!1), y = E(), O = 0, k = 0, j = M("fullSizeButton"), N = (e) => {
+		}))), h = c(() => r.value ?? t.items[0]?.id ?? ""), g = c(() => t.items.find(({ id: e }) => e === h.value)), v = w(!1), y = D(), b = 0, k = 0, A = N("fullSizeButton"), M = (e) => {
 			y.value = e, v.value = !0;
-		}, F = (e) => {
-			j.value?.isConnected && (e.preventDefault(), j.value.focus({ preventScroll: !0 }));
+		}, P = (e) => {
+			A.value?.isConnected && (e.preventDefault(), A.value.focus({ preventScroll: !0 }));
 		}, I = () => {
 			try {
 				return document.getElementById(decodeURIComponent(location.hash.slice(1)));
@@ -362,99 +367,99 @@ var R = "tool-site-theme", z = (e) => e === "system" || e === "light" || e === "
 				return null;
 			}
 		}, L = async () => {
-			await g(), cancelAnimationFrame(O), cancelAnimationFrame(k), O = requestAnimationFrame(() => {
+			await _(), cancelAnimationFrame(b), cancelAnimationFrame(k), b = requestAnimationFrame(() => {
 				k = requestAnimationFrame(() => I()?.scrollIntoView({
 					behavior: "instant",
 					block: "start"
 				}));
 			});
 		}, R = () => {
-			let t = I();
-			if (!t) return !1;
-			let n = e.items.find(({ id: n }) => document.getElementById(`${e.idPrefix}${n}`)?.contains(t));
-			return !n || h.value === n.id ? !1 : (i.value = n.id, !0);
+			let e = I();
+			if (!e) return !1;
+			let n = t.items.find(({ id: n }) => document.getElementById(`${t.idPrefix}${n}`)?.contains(e));
+			return !n || h.value === n.id ? !1 : (r.value = n.id, !0);
 		}, z = () => {
 			R() && L();
 		};
-		return b(() => {
-			a.value = !0, R(), location.hash && L(), window.addEventListener("hashchange", z), window.addEventListener("popstate", z);
-		}), x(() => {
-			cancelAnimationFrame(O), cancelAnimationFrame(k), window.removeEventListener("hashchange", z), window.removeEventListener("popstate", z);
-		}), (s, g) => (S(), u("div", {
+		return x(() => {
+			i.value = !0, R(), location.hash && L(), window.addEventListener("hashchange", z), window.addEventListener("popstate", z);
+		}), S(() => {
+			cancelAnimationFrame(b), cancelAnimationFrame(k), window.removeEventListener("hashchange", z), window.removeEventListener("popstate", z);
+		}), (c, _) => (C(), d("div", {
 			class: "fg-capture",
-			"data-enhanced": a.value
+			"data-enhanced": i.value
 		}, [
-			a.value && _.value ? (S(), u("button", {
+			i.value && g.value ? (C(), d("button", {
 				key: 0,
 				ref_key: "fullSizeButton",
-				ref: j,
+				ref: A,
 				type: "button",
 				class: "fg-capture__full",
-				"aria-label": `Expand ${_.value.label} capture at full size`,
+				"aria-label": `Expand ${g.value.label} capture at full size`,
 				"aria-haspopup": "dialog",
-				onClick: g[0] ||= (e) => N(_.value)
-			}, [...g[4] ||= [d("svg", {
+				onClick: _[0] ||= (e) => M(g.value)
+			}, [..._[4] ||= [f("svg", {
 				viewBox: "0 0 24 24",
 				fill: "none",
 				stroke: "currentColor",
 				"stroke-width": "1.5",
 				"aria-hidden": "true"
-			}, [d("path", { d: "M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" })], -1), d("span", { class: "fg-capture__full-label" }, "Full size", -1)]], 8, ye)) : l("", !0),
-			p(n, {
+			}, [f("path", { d: "M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" })], -1), f("span", { class: "fg-capture__full-label" }, "Full size", -1)]], 8, ye)) : u("", !0),
+			m(n, {
 				"model-value": h.value,
-				items: m.value,
-				label: e.label,
-				"onUpdate:modelValue": g[1] ||= (e) => i.value = e
+				items: o.value,
+				label: t.label,
+				"onUpdate:modelValue": _[1] ||= (e) => r.value = e
 			}, {
-				panel: P(({ value: t }) => [(S(!0), u(o, null, w(e.items, (n) => (S(), u(o, { key: n.id }, [n.id === t ? (S(), u("figure", {
+				panel: F(({ value: e }) => [(C(!0), d(s, null, T(t.items, (n) => (C(), d(s, { key: n.id }, [n.id === e ? (C(), d("figure", {
 					key: 0,
-					id: `${e.idPrefix}${n.id}`,
+					id: `${t.idPrefix}${n.id}`,
 					class: "fg-capture__figure"
-				}, [d("div", xe, [p(Q, {
+				}, [f("div", xe, [m(Q, {
 					html: n.html,
 					label: `Terminal capture: ${n.label}`,
-					fit: a.value
+					fit: i.value
 				}, null, 8, [
 					"html",
 					"label",
 					"fit"
-				]), a.value ? (S(), u("button", {
+				]), i.value ? (C(), d("button", {
 					key: 0,
 					type: "button",
 					class: "fg-capture__expand",
 					tabindex: "-1",
 					"aria-hidden": "true",
 					title: `Open ${n.label} capture at full size`,
-					onClick: (e) => N(n)
-				}, null, 8, Se)) : l("", !0)]), n.command || s.$slots.caption ? (S(), u("figcaption", Ce, [n.command ? (S(), u("code", we, D(n.command), 1)) : l("", !0), T(s.$slots, "caption", { item: n })])) : l("", !0)], 8, be)) : l("", !0)], 64))), 128))]),
+					onClick: (e) => M(n)
+				}, null, 8, Se)) : u("", !0)]), n.command || c.$slots.caption ? (C(), d("figcaption", Ce, [n.command ? (C(), d("code", we, O(n.command), 1)) : u("", !0), E(c.$slots, "caption", { item: n })])) : u("", !0)], 8, be)) : u("", !0)], 64))), 128))]),
 				_: 3
 			}, 8, [
 				"model-value",
 				"items",
 				"label"
 			]),
-			p(t, {
+			m(e, {
 				open: v.value,
-				"onUpdate:open": g[3] ||= (e) => v.value = e,
+				"onUpdate:open": _[3] ||= (e) => v.value = e,
 				title: `${y.value?.label ?? ""} capture`,
 				description: "Scroll to read the full capture.",
 				class: "fg-capture-viewer",
-				onCloseAutoFocus: F
+				onCloseAutoFocus: P
 			}, {
-				footer: P(() => [p(r, {
+				footer: F(() => [m(a, {
 					variant: "secondary",
 					size: "lg",
-					onClick: g[2] ||= (e) => v.value = !1
+					onClick: _[2] ||= (e) => v.value = !1
 				}, {
-					default: P(() => [...g[5] ||= [f(" Close capture ", -1)]]),
+					default: F(() => [..._[5] ||= [p(" Close capture ", -1)]]),
 					_: 1
 				})]),
-				default: P(() => [y.value ? (S(), c(Q, {
+				default: F(() => [y.value ? (C(), l(Q, {
 					key: 0,
 					html: y.value.html,
 					label: `${y.value.label} capture at full size`,
 					fit: !1
-				}, null, 8, ["html", "label"])) : l("", !0)]),
+				}, null, 8, ["html", "label"])) : u("", !0)]),
 				_: 1
 			}, 8, ["open", "title"])
 		], 8, ve));
@@ -476,7 +481,7 @@ var R = "tool-site-theme", z = (e) => e === "system" || e === "light" || e === "
 }, Fe = {
 	key: 0,
 	d: "m5 12 4 4L19 6"
-}, Ie = /* @__PURE__ */ m({
+}, Ie = /* @__PURE__ */ h({
 	__name: "UiCommandList",
 	props: {
 		items: {},
@@ -487,42 +492,42 @@ var R = "tool-site-theme", z = (e) => e === "system" || e === "light" || e === "
 		commandHeader: { default: "Command" },
 		descriptionHeader: { default: "What it does" }
 	},
-	setup(t) {
-		let n = C(!1);
-		b(() => {
-			n.value = !0;
+	setup(e) {
+		let t = w(!1);
+		x(() => {
+			t.value = !0;
 		});
-		let { copied: r, pending: i, error: a, copy: c } = e({
+		let { copied: n, pending: i, error: a, copy: o } = r({
 			unavailableMessage: "Clipboard unavailable. Select the command to copy it.",
 			failureMessage: "Could not copy. Select the command to copy it."
-		}), p = C(""), m = s(() => a.value || (r.value ? `${p.value} copied to clipboard.` : "")), h = (e) => (p.value = e, c(e));
-		return (e, s) => (S(), u("div", Ee, [d("table", De, [d("thead", null, [d("tr", null, [
-			d("th", $, D(t.commandHeader), 1),
-			d("th", Oe, D(t.descriptionHeader), 1),
-			t.copyable ? (S(), u("td", ke)) : l("", !0)
-		])]), d("tbody", null, [(S(!0), u(o, null, w(t.items, (c) => (S(), u("tr", { key: c.command }, [
-			d("td", Ae, [T(e.$slots, "command", { item: c }, () => [d("code", null, D(c.command), 1)])]),
-			d("td", je, [T(e.$slots, "description", { item: c }, () => [f(D(c.description), 1)])]),
-			t.copyable ? (S(), u("td", Me, [n.value ? (S(), u("button", {
+		}), l = w(""), m = c(() => a.value || (n.value ? `${l.value} copied to clipboard.` : "")), h = (e) => (l.value = e, o(e));
+		return (r, o) => (C(), d("div", Ee, [f("table", De, [f("thead", null, [f("tr", null, [
+			f("th", $, O(e.commandHeader), 1),
+			f("th", Oe, O(e.descriptionHeader), 1),
+			e.copyable ? (C(), d("td", ke)) : u("", !0)
+		])]), f("tbody", null, [(C(!0), d(s, null, T(e.items, (c) => (C(), d("tr", { key: c.command }, [
+			f("td", Ae, [E(r.$slots, "command", { item: c }, () => [f("code", null, O(c.command), 1)])]),
+			f("td", je, [E(r.$slots, "description", { item: c }, () => [p(O(c.description), 1)])]),
+			e.copyable ? (C(), d("td", Me, [t.value ? (C(), d("button", {
 				key: 0,
 				type: "button",
 				class: "fg-command-list__copy",
-				disabled: O(i),
+				disabled: k(i),
 				"aria-label": `Copy ${c.command}`,
 				title: `Copy ${c.command}`,
 				onClick: (e) => h(c.command)
-			}, [(S(), u("svg", Pe, [O(r) && !O(a) && p.value === c.command ? (S(), u("path", Fe)) : (S(), u(o, { key: 1 }, [s[0] ||= d("rect", {
+			}, [(C(), d("svg", Pe, [k(n) && !k(a) && l.value === c.command ? (C(), d("path", Fe)) : (C(), d(s, { key: 1 }, [o[0] ||= f("rect", {
 				x: "8",
 				y: "8",
 				width: "12",
 				height: "13",
 				rx: "2"
-			}, null, -1), s[1] ||= d("path", { d: "M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" }, null, -1)], 64))]))], 8, Ne)) : l("", !0)])) : l("", !0)
-		]))), 128))])]), d("span", {
-			class: _(["fg-command-list__status", { "fg-site-sr-only": !O(a) }]),
+			}, null, -1), o[1] ||= f("path", { d: "M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" }, null, -1)], 64))]))], 8, Ne)) : u("", !0)])) : u("", !0)
+		]))), 128))])]), f("span", {
+			class: v(["fg-command-list__status", { "fg-site-sr-only": !k(a) }]),
 			role: "status"
-		}, D(m.value), 3)]));
+		}, O(m.value), 3)]));
 	}
 });
 //#endregion
-export { R as SITE_APPEARANCE_KEY, H as SITE_PROJECTS, Te as UiCapture, Ie as UiCommandList, oe as UiSiteHeader, ge as UiSiteNav, B as applySiteAppearance, ee as siteThemeBootScript, V as useSiteAppearance };
+export { z as SITE_APPEARANCE_KEY, U as SITE_PROJECTS, Te as UiCapture, Ie as UiCommandList, W as UiSiteAppearancePicker, oe as UiSiteHeader, ge as UiSiteNav, V as applySiteAppearance, ee as siteThemeBootScript, H as useSiteAppearance };