@filipgutica/ui 1.4.1 → 1.6.0

package/dist/site.js

@@ -1,41 +1,42 @@
-import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, onBeforeUnmount as o, onMounted as s, openBlock as c, ref as l, renderList as u, renderSlot as d, toDisplayString as f, unref as p, useSlots as m, watch as h } from "vue";
-import { tryOnMounted as g, usePreferredDark as _, useStorage as v } from "@vueuse/core";
+import { a as e, i as t, n, o as r, r as i, t as a } from "./use-active-section-CiflgGBI.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 ee, useSlots as A, watch as j, withCtx as M } from "vue";
+import { tryOnMounted as N, usePreferredDark as P, useStorage as F } from "@vueuse/core";
 //#region src/site/appearance.ts
-var y = "tool-site-theme", b = (e) => e === "system" || e === "light" || e === "dark", x = `(function () {
+var I = "tool-site-theme", L = (e) => e === "system" || e === "light" || e === "dark", te = `(function () {
   var root = document.documentElement, choice;
-  try { choice = localStorage.getItem('${y}'); } catch (error) {}
+  try { choice = localStorage.getItem('${I}'); } 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;
-})();`, S = ({ root: e, choice: t, appearance: n }) => {
+})();`, R = ({ root: e, choice: t, appearance: n }) => {
 	e.classList.toggle("dark", n === "dark"), t === "system" ? delete e.dataset.theme : e.dataset.theme = t;
-}, C = ({ applyToRoot: e = !0 } = {}) => {
-	let n = v(y, "system", void 0, {
+}, z = ({ applyToRoot: e = !0 } = {}) => {
+	let t = F(I, "system", void 0, {
 		initOnMounted: !0,
 		writeDefaults: !1,
 		onError: () => {},
 		serializer: {
-			read: (e) => b(e) ? e : "system",
+			read: (e) => L(e) ? e : "system",
 			write: (e) => e
 		}
-	}), r = _(), i = t(() => n.value), a = t(() => n.value === "system" ? r.value ? "dark" : "light" : n.value);
-	return e && g(() => {
-		h([i, a], () => S({
+	}), n = P(), r = s(() => t.value), i = s(() => t.value === "system" ? n.value ? "dark" : "light" : t.value);
+	return e && N(() => {
+		j([r, i], () => R({
 			root: document.documentElement,
-			choice: i.value,
-			appearance: a.value
+			choice: r.value,
+			appearance: i.value
 		}), { immediate: !0 });
 	}), {
-		choice: i,
-		appearance: a,
+		choice: r,
+		appearance: i,
 		chooseAppearance: (e) => {
-			b(e) && (n.value = e);
+			L(e) && (t.value = e);
 		}
 	};
-}, w = [
+}, B = [
 	{
 		id: "annoterm",
 		label: "annoterm",
@@ -60,30 +61,36 @@ var y = "tool-site-theme", b = (e) => e === "system" || e === "light" || e === "
 		href: "https://filipgutica.github.io/t3code/",
 		repository: "https://github.com/filipgutica/t3code"
 	},
+	{
+		id: "filip-stack",
+		label: "Filip Stack",
+		href: "https://filipgutica.github.io/filip-stack/",
+		repository: "https://github.com/filipgutica/filip-stack"
+	},
 	{
 		id: "ui",
 		label: "UI",
 		href: "https://filipgutica.github.io/ui/",
 		repository: "https://github.com/filipgutica/ui"
 	}
-], T = { class: "fg-site-header" }, E = { class: "fg-site-header__inner" }, D = ["aria-label"], O = {
+], ne = { class: "fg-site-header" }, re = { class: "fg-site-header__inner" }, V = ["aria-label"], H = {
 	class: "fg-site-projects__menu fg-site-nav",
 	"aria-label": "Projects"
-}, k = ["href", "aria-current"], A = { class: "fg-site-header__end" }, j = {
+}, U = ["href", "aria-current"], W = { class: "fg-site-header__end" }, G = {
 	key: 0,
 	class: "fg-site-header__links",
 	"aria-label": "Site links"
-}, M = ["href"], N = {
+}, K = ["href"], q = {
 	key: 0,
 	class: "fg-site-appearance",
 	role: "group",
 	"aria-label": "Color theme"
-}, P = [
+}, J = [
 	"aria-label",
 	"title",
 	"aria-pressed",
 	"onClick"
-], F = {
+], Y = {
 	viewBox: "0 0 24 24",
 	width: "18",
 	height: "18",
@@ -91,17 +98,17 @@ var y = "tool-site-theme", b = (e) => e === "system" || e === "light" || e === "
 	stroke: "currentColor",
 	"stroke-width": "1.5",
 	"aria-hidden": "true"
-}, I = {
+}, X = {
 	key: 2,
 	d: "M20.5 13.5A9 9 0 0 1 10.5 3a9 9 0 1 0 10 10.5Z"
-}, L = /* @__PURE__ */ a({
+}, ie = /* @__PURE__ */ m({
 	__name: "UiSiteHeader",
 	props: {
 		project: {},
 		links: { default: () => [] }
 	},
-	setup(a) {
-		let h = [
+	setup(e) {
+		let t = [
 			{
 				value: "system",
 				label: "System"
@@ -114,29 +121,29 @@ var y = "tool-site-theme", b = (e) => e === "system" || e === "light" || e === "
 				value: "dark",
 				label: "Dark"
 			}
-		], g = t(() => w.find(({ id: e }) => e === a.project)?.label ?? a.project), _ = m().default ? void 0 : C(), v = l(!1), y = l(), b = l(), x = () => {
-			y.value && (y.value.open = !1);
-		}, S = (e) => {
-			e.key !== "Escape" || !y.value?.open || (x(), b.value?.focus());
-		}, L = (e) => {
-			e.relatedTarget instanceof Node && !y.value?.contains(e.relatedTarget) && x();
-		}, R = (e) => {
-			e.target instanceof Node && !y.value?.contains(e.target) && x();
+		], n = s(() => B.find(({ id: t }) => t === e.project)?.label ?? e.project), r = A().default ? void 0 : z(), i = C(!1), a = C(), c = C(), f = () => {
+			a.value && (a.value.open = !1);
+		}, p = (e) => {
+			e.key !== "Escape" || !a.value?.open || (f(), c.value?.focus());
+		}, m = (e) => {
+			e.relatedTarget instanceof Node && !a.value?.contains(e.relatedTarget) && f();
+		}, h = (e) => {
+			e.target instanceof Node && !a.value?.contains(e.target) && f();
 		};
-		return s(() => {
-			v.value = !0, document.addEventListener("pointerdown", R);
-		}), o(() => document.removeEventListener("pointerdown", R)), (t, o) => (c(), r("header", T, [i("div", E, [i("details", {
+		return b(() => {
+			i.value = !0, document.addEventListener("pointerdown", h);
+		}), y(() => document.removeEventListener("pointerdown", h)), (s, f) => (S(), u("header", ne, [d("div", re, [d("details", {
 			ref_key: "menu",
-			ref: y,
+			ref: a,
 			class: "fg-site-projects",
-			onKeydown: S,
-			onFocusout: L
-		}, [i("summary", {
+			onKeydown: p,
+			onFocusout: m
+		}, [d("summary", {
 			ref_key: "trigger",
-			ref: b,
+			ref: c,
 			class: "fg-site-projects__trigger",
-			"aria-label": `Project: ${g.value}`
-		}, [i("span", null, f(g.value), 1), o[0] ||= i("svg", {
+			"aria-label": `Project: ${n.value}`
+		}, [d("span", null, D(n.value), 1), f[0] ||= d("svg", {
 			class: "fg-site-projects__chevron",
 			viewBox: "0 0 16 16",
 			width: "16",
@@ -145,33 +152,357 @@ var y = "tool-site-theme", b = (e) => e === "system" || e === "light" || e === "
 			stroke: "currentColor",
 			"stroke-width": "1.5",
 			"aria-hidden": "true"
-		}, [i("path", { d: "m4 6 4 4 4-4" })], -1)], 8, D), i("nav", O, [(c(!0), r(e, null, u(p(w), (e) => (c(), r("a", {
-			key: e.id,
-			href: e.href,
-			"aria-current": e.id === a.project ? "page" : void 0
-		}, f(e.label), 9, k))), 128))])], 544), i("div", A, [a.links.length > 0 ? (c(), r("nav", j, [(c(!0), r(e, null, u(a.links, (e) => (c(), r("a", {
+		}, [d("path", { d: "m4 6 4 4 4-4" })], -1)], 8, V), d("nav", H, [(S(!0), u(o, null, w(O(B), (t) => (S(), u("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", {
 			key: e.href,
 			href: e.href
-		}, f(e.label), 9, M))), 128))])) : n("", !0), d(t.$slots, "default", {}, () => [v.value && p(_) ? (c(), r("div", N, [(c(), r(e, null, u(h, (t) => i("button", {
-			key: t.value,
+		}, 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": `${t.label} theme`,
-			title: `${t.label} theme`,
-			"aria-pressed": p(_).choice.value === t.value,
-			onClick: (e) => p(_).chooseAppearance(t.value)
-		}, [(c(), r("svg", F, [t.value === "system" ? (c(), r(e, { key: 0 }, [o[1] ||= i("rect", {
+			"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), o[2] ||= i("path", { d: "M8 21h8m-4-4v4" }, null, -1)], 64)) : t.value === "light" ? (c(), r(e, { key: 1 }, [o[3] ||= i("circle", {
+		}, 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), o[4] ||= i("path", { d: "M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5" }, null, -1)], 64)) : (c(), r("path", I))]))], 8, P)), 64))])) : n("", !0)])])])]));
+		}, 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", X))]))], 8, J)), 64))])) : l("", !0)])])])]));
+	}
+}), ae = ["id"], oe = ["role", "aria-labelledby"], se = ["id"], ce = [
+	"href",
+	"aria-current",
+	"onClick"
+], le = { key: 0 }, Z = /* @__PURE__ */ m({
+	__name: "SiteNavLinks",
+	props: {
+		contentId: {},
+		label: {},
+		groups: {},
+		activeId: {}
+	},
+	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", {
+			id: e.contentId,
+			class: "fg-site-rail__content"
+		}, [d("nav", {
+			class: "fg-site-rail__nav fg-site-nav",
+			"aria-labelledby": r
+		}, [d("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", {
+			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", {
+			key: 0,
+			id: i(t),
+			class: "fg-site-rail__group-label"
+		}, D(e.label), 9, se)) : l("", !0), (S(!0), u(o, null, w(e.items, (e) => (S(), u("a", {
+			key: e.href,
+			href: e.href,
+			"aria-current": a(e),
+			onClick: (t) => n("navigate", e.href, t)
+		}, [e.code ? (S(), u("code", le, D(e.label), 1)) : (S(), u(o, { key: 1 }, [f(D(e.label), 1)], 64))], 8, ce))), 128))], 8, oe))), 128))])], 8, ae));
+	}
+}), ue = ["data-enhanced"], de = ["open"], fe = ["aria-controls"], pe = "(max-width: 800px)", me = /* @__PURE__ */ m({
+	__name: "UiSiteNav",
+	props: {
+		label: {},
+		groups: {}
+	},
+	setup(e) {
+		let t = k(), n = C(), o = C(!1), s = C(!1), l = C(!1), m = a({ targetIds: e.groups.flatMap((e) => e.items).flatMap(({ href: e }) => e.startsWith("#") && e.length > 1 ? [e.slice(1)] : []) }), h, _ = null, v = () => n.value?.querySelector("button.fg-site-rail__toggle"), y = () => {
+			g(() => n.value?.querySelector(".fg-site-nav a")?.focus({ preventScroll: !0 }));
+		}, w = () => {
+			let e = h?.matches && !s.value && n.value?.contains(document.activeElement), t = h?.matches === !1 && s.value && !l.value && v() === document.activeElement;
+			s.value = h?.matches === !0, s.value || (l.value = !1), e ? g(() => v()?.focus({ preventScroll: !0 })) : t && y();
+		}, T = (e, t) => {
+			!l.value || t.button !== 0 || t.metaKey || t.ctrlKey || t.altKey || t.shiftKey || (_ = e.startsWith("#") ? document.getElementById(e.slice(1)) : null, l.value = !1);
+		}, E = (e) => {
+			_ ? (e.preventDefault(), _.tabIndex = -1, _.focus({ preventScroll: !0 }), _ = null) : s.value || (e.preventDefault(), y());
+		};
+		return b(() => {
+			h = matchMedia(pe), w(), o.value = !0, h.addEventListener("change", w);
+		}), x(() => h?.removeEventListener("change", w)), (a, h) => (S(), u("div", {
+			ref_key: "root",
+			ref: n,
+			class: "fg-site-rail",
+			"data-enhanced": o.value
+		}, [!o.value || !s.value ? (S(), u("details", {
+			key: 0,
+			class: "fg-site-rail__menu",
+			open: o.value && !s.value
+		}, [d("summary", {
+			class: "fg-site-rail__summary",
+			"aria-controls": O(t)
+		}, " Menu ", 8, fe), p(Z, {
+			"content-id": O(t),
+			label: e.label,
+			groups: e.groups,
+			"active-id": O(m)
+		}, null, 8, [
+			"content-id",
+			"label",
+			"groups",
+			"active-id"
+		])], 8, de)) : (S(), c(i, {
+			key: 1,
+			open: l.value,
+			"onUpdate:open": h[0] ||= (e) => l.value = e,
+			title: "Navigation",
+			onCloseAutoFocus: E
+		}, {
+			trigger: M(() => [p(r, {
+				variant: "ghost",
+				size: "lg",
+				class: "fg-site-rail__toggle"
+			}, {
+				default: M(() => [...h[1] ||= [f(" Menu ", -1)]]),
+				_: 1
+			})]),
+			default: M(() => [p(Z, {
+				"content-id": O(t),
+				label: e.label,
+				groups: e.groups,
+				"active-id": O(m),
+				onNavigate: T
+			}, null, 8, [
+				"content-id",
+				"label",
+				"groups",
+				"active-id"
+			])]),
+			_: 1
+		}, 8, ["open"]))], 8, ue));
+	}
+}), he = [
+	"aria-label",
+	"tabindex",
+	"data-fit",
+	"innerHTML"
+], Q = /* @__PURE__ */ m({
+	__name: "CaptureScreen",
+	props: {
+		html: {},
+		label: {},
+		fit: { type: Boolean }
+	},
+	setup(e) {
+		let t = C(), n = C(1), r = C(), i, a = () => {
+			if (!e.fit) {
+				r.value = void 0, n.value = 1;
+				return;
+			}
+			let i = t.value, a = i?.firstElementChild;
+			!i?.clientWidth || !(a instanceof HTMLElement) || !a.offsetWidth || (n.value = Math.min(1, i.clientWidth / a.offsetWidth), r.value = Math.ceil(a.offsetHeight * n.value) + i.offsetHeight - i.clientHeight);
+		};
+		return j(() => [e.fit, e.html], a, { flush: "post" }), b(() => {
+			typeof ResizeObserver < "u" && (i = new ResizeObserver(a), t.value && i.observe(t.value)), a();
+		}), x(() => i?.disconnect()), (i, a) => (S(), u("div", {
+			ref_key: "container",
+			ref: t,
+			class: "fg-capture__screen",
+			role: "region",
+			"aria-label": e.label,
+			tabindex: e.fit ? void 0 : 0,
+			"data-fit": e.fit || void 0,
+			style: v({
+				height: r.value === void 0 ? void 0 : `${r.value}px`,
+				"--capture-scale": n.value
+			}),
+			innerHTML: e.html
+		}, null, 12, he));
+	}
+}), ge = ["data-enhanced"], _e = ["id"], ve = { class: "fg-capture__preview" }, ye = [
+	"aria-label",
+	"title",
+	"onClick"
+], be = {
+	key: 0,
+	class: "fg-capture__caption"
+}, xe = { key: 0 }, Se = /* @__PURE__ */ m({
+	__name: "UiCapture",
+	props: /*@__PURE__*/ h({
+		items: {},
+		label: {},
+		idPrefix: { default: "frame-" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let i = ee(e, "modelValue"), a = C(!1), m = s(() => e.items.map(({ id: e, label: t }) => ({
+			value: e,
+			label: t
+		}))), h = s(() => i.value ?? e.items[0]?.id ?? ""), _ = C(!1), v = E(), y, O = 0, k = 0, A = (e, t) => {
+			t.currentTarget instanceof HTMLElement && (y = t.currentTarget), v.value = e, _.value = !0;
+		}, j = (e) => {
+			y?.isConnected && (e.preventDefault(), y.focus({ preventScroll: !0 }));
+		}, N = () => {
+			try {
+				return document.getElementById(decodeURIComponent(location.hash.slice(1)));
+			} catch {
+				return null;
+			}
+		}, P = async () => {
+			await g(), cancelAnimationFrame(O), cancelAnimationFrame(k), O = requestAnimationFrame(() => {
+				k = requestAnimationFrame(() => N()?.scrollIntoView({
+					behavior: "instant",
+					block: "start"
+				}));
+			});
+		}, F = () => {
+			let t = N();
+			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);
+		}, I = () => {
+			F() && P();
+		};
+		return b(() => {
+			a.value = !0, F(), location.hash && P(), window.addEventListener("hashchange", I), window.addEventListener("popstate", I);
+		}), x(() => {
+			cancelAnimationFrame(O), cancelAnimationFrame(k), window.removeEventListener("hashchange", I), window.removeEventListener("popstate", I);
+		}), (s, g) => (S(), u("div", {
+			class: "fg-capture",
+			"data-enhanced": a.value
+		}, [p(n, {
+			"model-value": h.value,
+			items: m.value,
+			label: e.label,
+			"onUpdate:modelValue": g[0] ||= (e) => i.value = e
+		}, {
+			panel: M(({ value: t }) => [(S(!0), u(o, null, w(e.items, (n) => (S(), u(o, { key: n.id }, [n.id === t ? (S(), u("figure", {
+				key: 0,
+				id: `${e.idPrefix}${n.id}`,
+				class: "fg-capture__figure"
+			}, [d("div", ve, [p(Q, {
+				html: n.html,
+				label: `Terminal capture: ${n.label}`,
+				fit: a.value
+			}, null, 8, [
+				"html",
+				"label",
+				"fit"
+			]), a.value ? (S(), u("button", {
+				key: 0,
+				type: "button",
+				class: "fg-capture__expand",
+				"aria-label": `Expand ${n.label} capture`,
+				"aria-haspopup": "dialog",
+				title: `Open ${n.label} capture at full size`,
+				onClick: (e) => A(n, e)
+			}, null, 8, ye)) : l("", !0)]), n.command || s.$slots.caption ? (S(), u("figcaption", be, [n.command ? (S(), u("code", xe, D(n.command), 1)) : l("", !0), T(s.$slots, "caption", { item: n })])) : l("", !0)], 8, _e)) : l("", !0)], 64))), 128))]),
+			_: 3
+		}, 8, [
+			"model-value",
+			"items",
+			"label"
+		]), p(t, {
+			open: _.value,
+			"onUpdate:open": g[2] ||= (e) => _.value = e,
+			title: `${v.value?.label ?? ""} capture`,
+			description: "Scroll to read the full capture.",
+			class: "fg-capture-viewer",
+			onCloseAutoFocus: j
+		}, {
+			footer: M(() => [p(r, {
+				variant: "secondary",
+				size: "lg",
+				onClick: g[1] ||= (e) => _.value = !1
+			}, {
+				default: M(() => [...g[3] ||= [f(" Close capture ", -1)]]),
+				_: 1
+			})]),
+			default: M(() => [v.value ? (S(), c(Q, {
+				key: 0,
+				html: v.value.html,
+				label: `${v.value.label} capture at full size`,
+				fit: !1
+			}, null, 8, ["html", "label"])) : l("", !0)]),
+			_: 1
+		}, 8, ["open", "title"])], 8, ge));
+	}
+}), Ce = { class: "fg-command-list" }, we = { class: "fg-command-list__table" }, Te = { scope: "col" }, Ee = { scope: "col" }, De = { key: 0 }, $ = { class: "fg-command-list__command" }, Oe = { class: "fg-command-list__description" }, ke = {
+	key: 0,
+	class: "fg-command-list__action"
+}, Ae = [
+	"disabled",
+	"aria-label",
+	"title",
+	"onClick"
+], je = {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "1.5",
+	"aria-hidden": "true"
+}, Me = {
+	key: 0,
+	d: "m5 12 4 4L19 6"
+}, Ne = /* @__PURE__ */ m({
+	__name: "UiCommandList",
+	props: {
+		items: {},
+		copyable: {
+			type: Boolean,
+			default: !0
+		},
+		commandHeader: { default: "Command" },
+		descriptionHeader: { default: "What it does" }
+	},
+	setup(t) {
+		let n = C(!1);
+		b(() => {
+			n.value = !0;
+		});
+		let { copied: r, pending: i, error: a, copy: c } = e({
+			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", Ce, [d("table", we, [d("thead", null, [d("tr", null, [
+			d("th", Te, D(t.commandHeader), 1),
+			d("th", Ee, D(t.descriptionHeader), 1),
+			t.copyable ? (S(), u("td", De)) : l("", !0)
+		])]), d("tbody", null, [(S(!0), u(o, null, w(t.items, (c) => (S(), u("tr", { key: c.command }, [
+			d("td", $, [d("code", null, D(c.command), 1)]),
+			d("td", Oe, [T(e.$slots, "description", { item: c }, () => [f(D(c.description), 1)])]),
+			t.copyable ? (S(), u("td", ke, [n.value ? (S(), u("button", {
+				key: 0,
+				type: "button",
+				class: "fg-command-list__copy",
+				disabled: O(i),
+				"aria-label": `Copy ${c.command}`,
+				title: `Copy ${c.command}`,
+				onClick: (e) => h(c.command)
+			}, [(S(), u("svg", je, [O(r) && !O(a) && p.value === c.command ? (S(), u("path", Me)) : (S(), u(o, { key: 1 }, [s[0] ||= d("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, Ae)) : l("", !0)])) : l("", !0)
+		]))), 128))])]), d("span", {
+			class: _(["fg-command-list__status", { "fg-site-sr-only": !O(a) }]),
+			role: "status"
+		}, D(m.value), 3)]));
 	}
 });
 //#endregion
-export { y as SITE_APPEARANCE_KEY, w as SITE_PROJECTS, L as UiSiteHeader, S as applySiteAppearance, x as siteThemeBootScript, C as useSiteAppearance };
+export { I as SITE_APPEARANCE_KEY, B as SITE_PROJECTS, Se as UiCapture, Ne as UiCommandList, ie as UiSiteHeader, me as UiSiteNav, R as applySiteAppearance, te as siteThemeBootScript, z as useSiteAppearance };