@filipgutica/ui 1.5.0 → 1.6.0

package/dist/site/CaptureScreen.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    html: string;
+    label: string;
+    /** Scales the capture down to the available width instead of scrolling it. */
+    fit: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/site/SiteNavLinks.vue.d.ts

@@ -0,0 +1,14 @@
+import type { UiSiteNavGroup } from './UiSiteNav.vue';
+type __VLS_Props = {
+    contentId: string;
+    label: string;
+    groups: readonly UiSiteNavGroup[];
+    activeId: string | undefined;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    navigate: (href: string, click: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onNavigate?: (href: string, click: MouseEvent) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/site/UiCapture.vue.d.ts

@@ -0,0 +1,40 @@
+export interface UiCaptureItem {
+    id: string;
+    label: string;
+    /** Trusted, checked-in terminal markup. It is rendered as HTML. */
+    html: string;
+    /** The command that produced the capture, shown below it. */
+    command?: string;
+}
+export interface UiCaptureProps {
+    items: readonly UiCaptureItem[];
+    /** The accessible name of the tab list. */
+    label: string;
+    /** Prefix for each capture's element ID, so `#frame-<id>` links select its tab. */
+    idPrefix?: string;
+}
+type __VLS_Props = UiCaptureProps;
+type __VLS_Slots = {
+    /** Text shown below the command, such as what the capture shows. */
+    caption?(props: {
+        item: UiCaptureItem;
+    }): unknown;
+};
+type __VLS_ModelProps = {
+    /** The active capture ID. Defaults to the first item. */
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: string | undefined) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/site/UiCommandList.vue.d.ts

@@ -0,0 +1,26 @@
+export interface UiCommandItem {
+    command: string;
+    description?: string;
+}
+export interface UiCommandListProps {
+    items: readonly UiCommandItem[];
+    /** Adds a copy button to each row once the page is interactive. */
+    copyable?: boolean;
+    commandHeader?: string;
+    descriptionHeader?: string;
+}
+type __VLS_Slots = {
+    /** Replaces the plain description, for text with `<kbd>` or `<code>`. */
+    description?(props: {
+        item: UiCommandItem;
+    }): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiCommandListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiCommandListProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/site/UiSiteNav.vue.d.ts

@@ -0,0 +1,21 @@
+export interface UiSiteNavItem {
+    label: string;
+    /** A `#id` link is tracked as the reader scrolls and marked as the current location. */
+    href: string;
+    /** Marks the current page on a multi-page site. */
+    current?: boolean;
+    /** Shows the label in the monospace font, for command or file names. */
+    code?: boolean;
+}
+export interface UiSiteNavGroup {
+    label?: string;
+    items: readonly UiSiteNavItem[];
+}
+export interface UiSiteNavProps {
+    /** The visible heading and accessible name of the navigation. */
+    label: string;
+    groups: readonly UiSiteNavGroup[];
+}
+declare const __VLS_export: import("vue").DefineComponent<UiSiteNavProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiSiteNavProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/site/index.d.ts

@@ -1,5 +1,11 @@
 export { default as UiSiteHeader } from './UiSiteHeader.vue';
 export type { UiSiteHeaderProps, UiSiteLink } from './UiSiteHeader.vue';
+export { default as UiSiteNav } from './UiSiteNav.vue';
+export type { UiSiteNavGroup, UiSiteNavItem, UiSiteNavProps } from './UiSiteNav.vue';
+export { default as UiCapture } from './UiCapture.vue';
+export type { UiCaptureItem, UiCaptureProps } from './UiCapture.vue';
+export { default as UiCommandList } from './UiCommandList.vue';
+export type { UiCommandItem, UiCommandListProps } from './UiCommandList.vue';
 export { SITE_PROJECTS } from './projects.js';
 export type { SiteProject, SiteProjectId } from './projects.js';
 export { applySiteAppearance, SITE_APPEARANCE_KEY, siteThemeBootScript, useSiteAppearance, } from './appearance.js';

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",
@@ -72,24 +73,24 @@ var y = "tool-site-theme", b = (e) => e === "system" || e === "light" || e === "
 		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",
@@ -97,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"
@@ -120,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",
@@ -151,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 };