@filipgutica/ui 1.3.0 → 1.4.1

package/README.md

@@ -85,7 +85,55 @@ applySemanticTheme({ root: document.documentElement, theme })
 
 Themes supply colors; the library keeps typography, spacing, and component
 structure consistent. Open VSX search and imports are available through
-`@filipgutica/ui/open-vsx`, which must run on a Node server.
+`createOpenVsxThemeService` from `@filipgutica/ui/open-vsx`. It runs on Node
+or in a browser with HTTPS and Web Crypto. Browser requests depend on the
+registry and its resource host allowing cross-origin access.
+
+The gallery's search-and-install dialog is docs-only, not an exported component.
+Applications can build their own picker with the exported components and theme
+helpers. `UiSiteHeader` includes the built-in System, Light, and Dark control.
+
+The default theme is unchanged. To opt in to Graphite Indigo, import it after
+`theme.css`:
+
+```css
+@import "@filipgutica/ui/theme.css";
+@import "@filipgutica/ui/themes/graphite-indigo.css";
+```
+
+## Project sites
+
+The `site` entry gives the project sites one header, one appearance choice, and
+shared page styles. Import `@filipgutica/ui/site.css` and the Graphite Indigo
+theme above, which supplies the type and spacing roles `site.css` reads. Keep
+document-wide link styles in `@layer base` so the header owns its navigation
+appearance.
+
+```vue
+<script setup lang="ts">
+import { UiSiteHeader } from '@filipgutica/ui/site'
+</script>
+
+<template>
+  <UiSiteHeader
+    project="wtree"
+    :links="[{ label: 'User guide', href: '#guide' }]"
+  />
+</template>
+```
+
+`project` is `wtree`, `annoterm`, `devps`, `workbench`, or `ui`. The project
+menu is a native disclosure that works without JavaScript; Escape closes it and
+returns focus to its button. Without a default slot the header renders a
+System, Light, and Dark picker. A page with its own appearance control passes it
+in the default slot and uses `useSiteAppearance({ applyToRoot: false })` when it
+owns the root element.
+
+`useSiteAppearance()` returns `choice`, the resolved `appearance`, and
+`chooseAppearance(value)`. The choice is stored under `tool-site-theme`, follows
+the operating system and other tabs, and is safe during server rendering and
+when storage is blocked. To avoid a flash of the wrong appearance, inline
+`siteThemeBootScript` in the document head.
 
 ## Development
 
@@ -94,3 +142,8 @@ pnpm install
 pnpm docs:dev
 pnpm verify
 ```
+
+Graphite Indigo values live in `themes/graphite-indigo.json`. After editing it,
+run `pnpm themes:build` to regenerate the opt-in theme and the standalone
+`themes/graphite-indigo.tokens.css`; `pnpm themes:check` fails when either is
+stale.

package/dist/open-vsx.js

@@ -1,38 +1,37 @@
 import { i as e, t } from "./theme-CIwueiir.js";
 import { parse as n } from "jsonc-parser";
-import { createHash as r } from "node:crypto";
-import i from "jszip";
+import r from "jszip";
 //#region src/open-vsx/index.ts
-var a = "https://open-vsx.org", o = "https://openvsx.eclipsecontent.org", s = `${a}/api/-/search`, c = 524288, l = 262144, u = 262144, d = 1048576, f = 20971520, p = 5e3, m = 104857600, h = 200, g = 40, _ = 8, v = 15e3, y = class extends Error {
+var i = "https://open-vsx.org", a = "https://openvsx.eclipsecontent.org", o = `${i}/api/-/search`, s = 524288, c = 262144, l = 262144, u = 1048576, d = 20971520, f = 5e3, p = 104857600, m = 200, h = 40, g = 8, _ = 15e3, v = class extends Error {
 	code;
 	constructor(e, t) {
 		super(t), this.name = "OpenVsxThemeError", this.code = e;
 	}
-}, b = (e) => typeof e == "object" && !!e && !Array.isArray(e), x = (e, t) => {
+}, y = (e) => typeof e == "object" && !!e && !Array.isArray(e), b = (e, t) => {
 	let r = [], i = n(e, r, { allowTrailingComma: !0 });
-	if (r.length > 0 || !b(i)) throw new y("unsupported-extension", `${t} is not valid JSON.`);
+	if (r.length > 0 || !y(i)) throw new v("unsupported-extension", `${t} is not valid JSON.`);
 	return i;
-}, S = (e, { allowResourceOrigin: t = !1 } = {}) => {
+}, x = (e, { allowResourceOrigin: t = !1 } = {}) => {
 	if (typeof e != "string") return null;
 	try {
 		let n = new URL(e), r = n.origin.toLowerCase();
-		return r === a || t && r === o ? n.toString() : null;
+		return r === i || t && r === a ? n.toString() : null;
 	} catch {
 		return null;
 	}
-}, C = (e) => {
+}, S = (e) => {
 	let t = /^([a-z0-9][a-z0-9_-]{0,99})\.([a-z0-9][a-z0-9_-]{0,99})$/i.exec(e);
-	if (!t?.[1] || !t[2]) throw new y("unsupported-extension", "The selected Open VSX extension identifier is invalid.");
+	if (!t?.[1] || !t[2]) throw new v("unsupported-extension", "The selected Open VSX extension identifier is invalid.");
 	return [t[1], t[2]];
-}, w = (e) => {
-	let t = b(e.contributes) ? e.contributes : null;
-	return Array.isArray(t?.themes) ? t.themes.filter(b) : [];
-}, T = async (e, t, n) => {
+}, C = (e) => {
+	let t = y(e.contributes) ? e.contributes : null;
+	return Array.isArray(t?.themes) ? t.themes.filter(y) : [];
+}, w = async (e, t, n) => {
 	let r = Number(e.headers.get("content-length"));
-	if (Number.isFinite(r) && r > t) throw new y("file-too-large", n);
+	if (Number.isFinite(r) && r > t) throw new v("file-too-large", n);
 	if (!e.body) {
 		let r = new Uint8Array(await e.arrayBuffer());
-		if (r.byteLength > t) throw new y("file-too-large", n);
+		if (r.byteLength > t) throw new v("file-too-large", n);
 		return r;
 	}
 	let i = e.body.getReader(), a = [], o = 0;
@@ -40,7 +39,7 @@ var a = "https://open-vsx.org", o = "https://openvsx.eclipsecontent.org", s = `$
 		for (;;) {
 			let { done: e, value: r } = await i.read();
 			if (e) break;
-			if (o += r.byteLength, o > t) throw await i.cancel(), new y("file-too-large", n);
+			if (o += r.byteLength, o > t) throw await i.cancel(), new v("file-too-large", n);
 			a.push(r);
 		}
 	} finally {
@@ -49,24 +48,24 @@ var a = "https://open-vsx.org", o = "https://openvsx.eclipsecontent.org", s = `$
 	let s = new Uint8Array(o), c = 0;
 	for (let e of a) s.set(e, c), c += e.byteLength;
 	return s;
-}, E = (e) => async ({ url: t, limit: n, failureMessage: r, tooLargeMessage: i, allowResourceOrigin: a = !1 }) => {
-	let o = new AbortController(), s = setTimeout(() => o.abort(), v);
+}, T = (e) => async ({ url: t, limit: n, failureMessage: r, tooLargeMessage: i, allowResourceOrigin: a = !1 }) => {
+	let o = new AbortController(), s = setTimeout(() => o.abort(), _);
 	try {
-		let s = S(String(t), { allowResourceOrigin: a });
-		if (!s) throw new y("open-vsx-unavailable", r);
+		let s = x(String(t), { allowResourceOrigin: a });
+		if (!s) throw new v("open-vsx-unavailable", r);
 		let c = await e(s, {
 			redirect: "follow",
 			signal: o.signal
 		});
-		if (!S(c.url || s, { allowResourceOrigin: a }) || !c.ok) throw new y("open-vsx-unavailable", r);
-		return await T(c, n, i);
+		if (!x(c.url || s, { allowResourceOrigin: a }) || !c.ok) throw new v("open-vsx-unavailable", r);
+		return await w(c, n, i);
 	} catch (e) {
-		throw e instanceof y ? e : new y("open-vsx-unavailable", o.signal.aborted ? "Open VSX took too long to respond." : r);
+		throw e instanceof v ? e : new v("open-vsx-unavailable", o.signal.aborted ? "Open VSX took too long to respond." : r);
 	} finally {
 		clearTimeout(s);
 	}
-}, D = (e) => {
-	if (!b(e)) return null;
+}, E = (e) => {
+	if (!y(e)) return null;
 	let t = typeof e.namespace == "string" ? e.namespace.trim() : "", n = typeof e.name == "string" ? e.name.trim() : "";
 	if (!t || !n) return null;
 	let r = typeof e.displayName == "string" && e.displayName.trim() ? e.displayName.trim() : n;
@@ -77,49 +76,49 @@ var a = "https://open-vsx.org", o = "https://openvsx.eclipsecontent.org", s = `$
 		description: typeof e.description == "string" ? e.description.slice(0, 300) : "",
 		downloadCount: typeof e.downloadCount == "number" && Number.isFinite(e.downloadCount) ? Math.max(0, e.downloadCount) : 0
 	};
-}, O = (e) => {
-	if (e.length > 1024 || e.includes("\0") || e.startsWith("/") || /^[a-z]:/i.test(e)) throw new y("unsupported-extension", "A theme path is not safe.");
-}, k = ({ path: e, initialSegments: t, minimumDepth: n }) => {
-	O(e);
+}, D = (e) => {
+	if (e.length > 1024 || e.includes("\0") || e.startsWith("/") || /^[a-z]:/i.test(e)) throw new v("unsupported-extension", "A theme path is not safe.");
+}, O = ({ path: e, initialSegments: t, minimumDepth: n }) => {
+	D(e);
 	let r = [...t];
 	for (let t of e.replaceAll("\\", "/").split("/")) if (!(!t || t === ".")) {
 		if (t === "..") {
-			if (r.length <= n) throw new y("unsupported-extension", "A theme path escapes its package.");
+			if (r.length <= n) throw new v("unsupported-extension", "A theme path escapes its package.");
 			r.pop();
 		} else r.push(t);
 	}
 	return r.join("/");
-}, A = (e, t = "extension/") => {
+}, k = (e, t = "extension/") => {
 	let n = t.split("/").slice(0, -1);
-	return n[0] !== "extension" && n.unshift("extension"), k({
+	return n[0] !== "extension" && n.unshift("extension"), O({
 		path: e,
 		initialSegments: n,
 		minimumDepth: 1
 	});
-}, j = (e) => {
-	let t = k({
+}, A = (e) => {
+	let t = O({
 		path: e,
 		initialSegments: [],
 		minimumDepth: 0
 	});
-	if (!t) throw new y("unsupported-extension", "The extension package has an invalid file name.");
+	if (!t) throw new v("unsupported-extension", "The extension package has an invalid file name.");
 	return t;
-}, M = (e) => {
+}, j = (e) => {
 	let t = e.byteLength, n = Math.max(0, t - 65557), r = t - 22;
 	for (; r >= n && (e.getUint32(r, !0) !== 101010256 || r + 22 + e.getUint16(r + 20, !0) !== t);) --r;
-	if (r < n) throw new y("unsupported-extension", "The extension package is not a valid ZIP file.");
+	if (r < n) throw new v("unsupported-extension", "The extension package is not a valid ZIP file.");
 	return r;
-}, N = (e) => {
-	let t = M(e), n = e.getUint32(t + 12, !0), r = e.getUint32(t + 16, !0), i = r + n;
-	if (i !== t || i > e.byteLength) throw new y("unsupported-extension", "The extension package has an invalid ZIP directory.");
+}, M = (e) => {
+	let t = j(e), n = e.getUint32(t + 12, !0), r = e.getUint32(t + 16, !0), i = r + n;
+	if (i !== t || i > e.byteLength) throw new v("unsupported-extension", "The extension package has an invalid ZIP directory.");
 	return {
 		start: r,
 		end: i
 	};
-}, P = ({ bytes: e, view: t, offset: n, directoryEnd: r }) => {
-	if (n + 46 > r || t.getUint32(n, !0) !== 33639248) throw new y("unsupported-extension", "The extension package has an invalid ZIP directory.");
+}, N = ({ bytes: e, view: t, offset: n, directoryEnd: r }) => {
+	if (n + 46 > r || t.getUint32(n, !0) !== 33639248) throw new v("unsupported-extension", "The extension package has an invalid ZIP directory.");
 	let i = t.getUint32(n + 20, !0), a = t.getUint32(n + 24, !0), o = t.getUint16(n + 28, !0), s = t.getUint16(n + 30, !0), c = t.getUint16(n + 32, !0), l = n + 46 + o + s + c;
-	if (l > r || i === 4294967295 || a === 4294967295 || a > 0 && (i === 0 || a / i > h)) throw new y("unsupported-extension", "The extension package has unsafe ZIP metadata.");
+	if (l > r || i === 4294967295 || a === 4294967295 || a > 0 && (i === 0 || a / i > m)) throw new v("unsupported-extension", "The extension package has unsafe ZIP metadata.");
 	try {
 		return {
 			name: new TextDecoder("utf-8", { fatal: !0 }).decode(e.subarray(n + 46, n + 46 + o)),
@@ -127,32 +126,32 @@ var a = "https://open-vsx.org", o = "https://openvsx.eclipsecontent.org", s = `$
 			nextOffset: l
 		};
 	} catch {
-		throw new y("unsupported-extension", "The extension package has an invalid file name.");
+		throw new v("unsupported-extension", "The extension package has an invalid file name.");
 	}
-}, F = (e) => {
-	let t = new DataView(e.buffer, e.byteOffset, e.byteLength), n = N(t), r = /* @__PURE__ */ new Map(), i = 0, a = 0, o = n.start;
+}, P = (e) => {
+	let t = new DataView(e.buffer, e.byteOffset, e.byteLength), n = M(t), r = /* @__PURE__ */ new Map(), i = 0, a = 0, o = n.start;
 	for (; o < n.end;) {
-		if (a += 1, a > p) throw new y("unsupported-extension", "The extension package has an invalid ZIP directory.");
-		let s = P({
+		if (a += 1, a > f) throw new v("unsupported-extension", "The extension package has an invalid ZIP directory.");
+		let s = N({
 			bytes: e,
 			view: t,
 			offset: o,
 			directoryEnd: n.end
 		});
-		if (i += s.uncompressed, i > m) throw new y("file-too-large", "The extension package expands beyond the safe limit.");
-		r.set(j(s.name), s.uncompressed), o = s.nextOffset;
+		if (i += s.uncompressed, i > p) throw new v("file-too-large", "The extension package expands beyond the safe limit.");
+		r.set(A(s.name), s.uncompressed), o = s.nextOffset;
 	}
 	return r;
-}, I = async ({ zip: e, sizes: t, path: n, description: r }) => {
+}, F = async ({ zip: e, sizes: t, path: n, description: r }) => {
 	let i = t.get(n);
-	if (i === void 0) throw new y("unsupported-extension", `${r} is missing.`);
-	if (i > d) throw new y("file-too-large", `${r} is too large.`);
+	if (i === void 0) throw new v("unsupported-extension", `${r} is missing.`);
+	if (i > u) throw new v("file-too-large", `${r} is too large.`);
 	let a = e.file(n);
-	if (!a) throw new y("unsupported-extension", `${r} is missing.`);
+	if (!a) throw new v("unsupported-extension", `${r} is missing.`);
 	return a.async("string");
-}, L = async ({ zip: e, sizes: t, path: n, ancestors: r = /* @__PURE__ */ new Set() }) => {
-	if (r.size >= _ || r.has(n)) throw new y("unsupported-extension", "Theme includes are cyclic or too deeply nested.");
-	let i = x(await I({
+}, I = async ({ zip: e, sizes: t, path: n, ancestors: r = /* @__PURE__ */ new Set() }) => {
+	if (r.size >= g || r.has(n)) throw new v("unsupported-extension", "Theme includes are cyclic or too deeply nested.");
+	let i = b(await F({
 		zip: e,
 		sizes: t,
 		path: n,
@@ -161,50 +160,50 @@ var a = "https://open-vsx.org", o = "https://openvsx.eclipsecontent.org", s = `$
 	if (typeof i.include != "string") return i;
 	let a = new Set(r);
 	a.add(n);
-	let o = await L({
+	let o = await I({
 		zip: e,
 		sizes: t,
-		path: A(i.include, n),
+		path: k(i.include, n),
 		ancestors: a
 	});
 	return {
 		...o,
 		...i,
 		colors: {
-			...b(o.colors) ? o.colors : {},
-			...b(i.colors) ? i.colors : {}
+			...y(o.colors) ? o.colors : {},
+			...y(i.colors) ? i.colors : {}
 		}
 	};
-}, R = (e) => e === "vs" ? "light" : e === "vs-dark" ? "dark" : e === "hc-black" ? "hc" : e === "hc-light" ? "hcLight" : null, z = (e, t) => e.find((e) => t === "dark" ? e.appearance === "dark" || e.appearance === "high-contrast-dark" : e.appearance === "light" || e.appearance === "high-contrast-light") ?? e[0], B = async ({ request: e, extensionId: t }) => {
-	let [n, r] = C(t), i = await e({
-		url: `${a}/api/${encodeURIComponent(n)}/${encodeURIComponent(r)}`,
-		limit: l,
+}, L = (e) => e === "vs" ? "light" : e === "vs-dark" ? "dark" : e === "hc-black" ? "hc" : e === "hc-light" ? "hcLight" : null, R = (e, t) => e.find((e) => t === "dark" ? e.appearance === "dark" || e.appearance === "high-contrast-dark" : e.appearance === "light" || e.appearance === "high-contrast-light") ?? e[0], z = async ({ request: e, extensionId: t }) => {
+	let [n, r] = S(t), a = await e({
+		url: `${i}/api/${encodeURIComponent(n)}/${encodeURIComponent(r)}`,
+		limit: c,
 		failureMessage: "Open VSX theme details are unavailable right now.",
 		tooLargeMessage: "Open VSX returned unexpectedly large theme details."
-	}), o = JSON.parse(new TextDecoder().decode(i));
-	if (!b(o) || !b(o.files)) throw new y("unsupported-extension", "Open VSX returned malformed theme details.");
-	let s = { allowResourceOrigin: !0 }, c = S(o.files.manifest, s), u = S(o.files.download, s), d = S(o.files.sha256, s), f = typeof o.version == "string" ? o.version : "";
-	if (!c || !u || !d || !f) throw new y("unsupported-extension", "Open VSX returned malformed theme details.");
+	}), o = JSON.parse(new TextDecoder().decode(a));
+	if (!y(o) || !y(o.files)) throw new v("unsupported-extension", "Open VSX returned malformed theme details.");
+	let s = { allowResourceOrigin: !0 }, l = x(o.files.manifest, s), u = x(o.files.download, s), d = x(o.files.sha256, s), f = typeof o.version == "string" ? o.version : "";
+	if (!l || !u || !d || !f) throw new v("unsupported-extension", "Open VSX returned malformed theme details.");
 	return {
 		extensionName: r,
-		manifestUrl: c,
+		manifestUrl: l,
 		packageUrl: u,
 		checksumUrl: d,
 		version: f
 	};
-}, V = async ({ request: e, manifestUrl: t }) => {
+}, B = async ({ request: e, manifestUrl: t }) => {
 	let n = await e({
 		url: t,
-		limit: u,
+		limit: l,
 		failureMessage: "That extension has no readable manifest.",
 		tooLargeMessage: "That extension manifest is too large.",
 		allowResourceOrigin: !0
-	}), r = w(x(new TextDecoder().decode(n), "The extension manifest"));
-	if (r.length === 0 || r.length > g) throw new y("unsupported-extension", "That extension does not contain a supported number of color themes.");
-}, H = async ({ request: e, packageUrl: t, checksumUrl: n }) => {
-	let [i, a] = await Promise.all([e({
+	}), r = C(b(new TextDecoder().decode(n), "The extension manifest"));
+	if (r.length === 0 || r.length > h) throw new v("unsupported-extension", "That extension does not contain a supported number of color themes.");
+}, V = async ({ request: e, packageUrl: t, checksumUrl: n }) => {
+	let [r, i] = await Promise.all([e({
 		url: t,
-		limit: f,
+		limit: d,
 		failureMessage: "That Open VSX theme could not be downloaded.",
 		tooLargeMessage: "That theme extension is too large to import safely.",
 		allowResourceOrigin: !0
@@ -214,40 +213,40 @@ var a = "https://open-vsx.org", o = "https://openvsx.eclipsecontent.org", s = `$
 		failureMessage: "That Open VSX theme has no readable checksum.",
 		tooLargeMessage: "That Open VSX checksum response is invalid.",
 		allowResourceOrigin: !0
-	})]), o = new TextDecoder().decode(a).trim().split(/\s+/)[0], s = r("sha256").update(i).digest("hex");
-	if (!o || !/^[a-f\d]{64}$/i.test(o)) throw new y("integrity-failed", "That Open VSX theme has an invalid checksum.");
-	if (o.toLowerCase() !== s) throw new y("integrity-failed", "That Open VSX theme failed its integrity check.");
-	return i;
-}, U = async (e) => {
-	let t = F(e);
+	})]), a = new TextDecoder().decode(i).trim().split(/\s+/)[0], o = await globalThis.crypto.subtle.digest("SHA-256", new Uint8Array(r)), s = Array.from(new Uint8Array(o), (e) => e.toString(16).padStart(2, "0")).join("");
+	if (!a || !/^[a-f\d]{64}$/i.test(a)) throw new v("integrity-failed", "That Open VSX theme has an invalid checksum.");
+	if (a.toLowerCase() !== s) throw new v("integrity-failed", "That Open VSX theme failed its integrity check.");
+	return r;
+}, H = async (e) => {
+	let t = P(e);
 	try {
 		return {
-			zip: await i.loadAsync(e),
+			zip: await r.loadAsync(e),
 			sizes: t
 		};
 	} catch {
-		throw new y("unsupported-extension", "That extension package could not be opened.");
+		throw new v("unsupported-extension", "That extension package could not be opened.");
 	}
-}, W = async ({ zip: e, sizes: t, extensionId: n, version: r }) => {
-	let i = x(await I({
+}, U = async ({ zip: e, sizes: t, extensionId: n, version: r }) => {
+	let i = b(await F({
 		zip: e,
 		sizes: t,
 		path: "extension/package.json",
 		description: "The packaged extension manifest"
 	}), "The packaged extension manifest");
-	if ((typeof i.publisher == "string" && typeof i.name == "string" ? `${i.publisher}.${i.name}` : "").toLowerCase() !== n.toLowerCase() || i.version !== r) throw new y("integrity-failed", "The downloaded package does not match the selected Open VSX theme.");
+	if ((typeof i.publisher == "string" && typeof i.name == "string" ? `${i.publisher}.${i.name}` : "").toLowerCase() !== n.toLowerCase() || i.version !== r) throw new v("integrity-failed", "The downloaded package does not match the selected Open VSX theme.");
 	return i;
-}, G = async ({ zip: t, sizes: n, manifest: r, fallbackName: i }) => {
-	let a = w(r);
-	if (a.length === 0 || a.length > g) throw new y("unsupported-extension", "That extension has no compatible color themes.");
+}, W = async ({ zip: t, sizes: n, manifest: r, fallbackName: i }) => {
+	let a = C(r);
+	if (a.length === 0 || a.length > h) throw new v("unsupported-extension", "That extension has no compatible color themes.");
 	let o = [];
 	for (let r of a) {
-		if (typeof r.path != "string") throw new y("unsupported-extension", "A contributed theme has no valid path.");
-		let a = A(r.path), s = await L({
+		if (typeof r.path != "string") throw new v("unsupported-extension", "A contributed theme has no valid path.");
+		let a = k(r.path), s = await I({
 			zip: t,
 			sizes: n,
 			path: a
-		}), c = R(r.uiTheme), l = typeof r.label == "string" && r.label.trim() ? r.label.trim() : i;
+		}), c = L(r.uiTheme), l = typeof r.label == "string" && r.label.trim() ? r.label.trim() : i;
 		o.push(e({
 			source: JSON.stringify({
 				...s,
@@ -258,11 +257,11 @@ var a = "https://open-vsx.org", o = "https://openvsx.eclipsecontent.org", s = `$
 		}));
 	}
 	return o;
-}, K = ({ description: e, name: t }) => {
+}, G = ({ description: e, name: t }) => {
 	let n = `${t} ${e}`;
 	return /\b(?:color\s+scheme|theme)\b/i.test(n) && !/\b(?:file\s+icons?|product\s+icons?|icon\s+theme|icons?)\b/i.test(n);
-}, q = ({ fetchImpl: e = fetch } = {}) => {
-	let n = E(e);
+}, K = ({ fetchImpl: e = fetch } = {}) => {
+	let n = T(e);
 	return {
 		search: async (e) => {
 			let t = e.trim();
@@ -271,20 +270,20 @@ var a = "https://open-vsx.org", o = "https://openvsx.eclipsecontent.org", s = `$
 				message: "Search terms must be 100 characters or fewer."
 			};
 			try {
-				let e = new URL(s);
+				let e = new URL(o);
 				t && e.searchParams.set("query", t), e.searchParams.set("category", "Themes"), e.searchParams.set("sortBy", "downloadCount"), e.searchParams.set("sortOrder", "desc"), e.searchParams.set("size", "12");
 				let r = await n({
 					url: e,
-					limit: c,
+					limit: s,
 					failureMessage: "Open VSX search is unavailable right now.",
 					tooLargeMessage: "Open VSX returned an unexpectedly large search response."
 				}), i = JSON.parse(new TextDecoder().decode(r));
-				if (!b(i) || !Array.isArray(i.extensions)) throw Error("invalid response");
+				if (!y(i) || !Array.isArray(i.extensions)) throw Error("invalid response");
 				return {
 					status: "success",
 					themes: i.extensions.flatMap((e) => {
-						let t = D(e);
-						return t && K(t) ? [t] : [];
+						let t = E(e);
+						return t && G(t) ? [t] : [];
 					}).slice(0, 12)
 				};
 			} catch {
@@ -296,24 +295,24 @@ var a = "https://open-vsx.org", o = "https://openvsx.eclipsecontent.org", s = `$
 		},
 		importTheme: async (e, r) => {
 			try {
-				let t = await B({
+				let t = await z({
 					request: n,
 					extensionId: e
 				});
-				await V({
+				await B({
 					request: n,
 					manifestUrl: t.manifestUrl
 				});
-				let { zip: i, sizes: a } = await U(await H({
+				let { zip: i, sizes: a } = await H(await V({
 					request: n,
 					...t
 				}));
 				return {
 					status: "success",
-					theme: z(await G({
+					theme: R(await W({
 						zip: i,
 						sizes: a,
-						manifest: await W({
+						manifest: await U({
 							zip: i,
 							sizes: a,
 							extensionId: e,
@@ -323,7 +322,7 @@ var a = "https://open-vsx.org", o = "https://openvsx.eclipsecontent.org", s = `$
 					}), r)
 				};
 			} catch (e) {
-				return e instanceof t || e instanceof y ? {
+				return e instanceof t || e instanceof v ? {
 					status: "error",
 					error: {
 						code: e.code,
@@ -341,4 +340,4 @@ var a = "https://open-vsx.org", o = "https://openvsx.eclipsecontent.org", s = `$
 	};
 };
 //#endregion
-export { q as createOpenVsxThemeService };
+export { K as createOpenVsxThemeService };

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

@@ -0,0 +1,24 @@
+import type { SiteProjectId } from './projects.js';
+export interface UiSiteLink {
+    label: string;
+    href: string;
+}
+export interface UiSiteHeaderProps {
+    /** The site this header belongs to. It is marked as current in the project menu. */
+    project: SiteProjectId;
+    /** Page links shown beside the appearance control, such as a user guide or releases. */
+    links?: readonly UiSiteLink[];
+}
+type __VLS_Slots = {
+    /** Replaces the System, Light, and Dark picker with a page-specific appearance control. */
+    default?(): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiSiteHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiSiteHeaderProps> & 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/appearance.d.ts

@@ -0,0 +1,35 @@
+import type { ComputedRef } from 'vue';
+export type SiteAppearanceChoice = 'system' | 'light' | 'dark';
+export type SiteAppearance = 'light' | 'dark';
+/** The choice is shared by every site in the family, so it must not change. */
+export declare const SITE_APPEARANCE_KEY = "tool-site-theme";
+/**
+ * Inline this in the document head, before the stylesheet paints, to avoid a flash
+ * of the wrong appearance. It applies the stored choice exactly as
+ * `applySiteAppearance` does and never throws.
+ */
+export declare const siteThemeBootScript = "(function () {\n  var root = document.documentElement, choice;\n  try { choice = localStorage.getItem('tool-site-theme'); } catch (error) {}\n  var dark = choice === 'dark';\n  if (choice !== 'light' && choice !== 'dark') {\n    try { dark = matchMedia('(prefers-color-scheme: dark)').matches; } catch (error) {}\n  }\n  root.classList.toggle('dark', dark);\n  if (choice === 'light' || choice === 'dark') root.dataset.theme = choice;\n})();";
+/** System removes the explicit override. Light and dark set it. */
+export declare const applySiteAppearance: ({ root, choice, appearance }: {
+    root: HTMLElement;
+    choice: SiteAppearanceChoice;
+    appearance: SiteAppearance;
+}) => void;
+/**
+ * The shared System, Light, or Dark choice with the appearance it resolves to.
+ * Every call shares the stored choice, and other tabs and the operating system
+ * update it. Nothing reads storage or the browser until the component mounts, so
+ * server rendering and hydration see `system`. Storage failures leave the choice
+ * working for the current visit.
+ *
+ * By default the composable applies the appearance to `<html>`. Pass
+ * `applyToRoot: false` when the page owns the root, for example while an imported
+ * theme is active, and call `applySiteAppearance` yourself.
+ */
+export declare const useSiteAppearance: ({ applyToRoot }?: {
+    applyToRoot?: boolean;
+}) => {
+    choice: ComputedRef<SiteAppearanceChoice>;
+    appearance: ComputedRef<SiteAppearance>;
+    chooseAppearance: (value: SiteAppearanceChoice) => void;
+};

package/dist/site/index.d.ts

@@ -0,0 +1,6 @@
+export { default as UiSiteHeader } from './UiSiteHeader.vue';
+export type { UiSiteHeaderProps, UiSiteLink } from './UiSiteHeader.vue';
+export { SITE_PROJECTS } from './projects.js';
+export type { SiteProject, SiteProjectId } from './projects.js';
+export { applySiteAppearance, SITE_APPEARANCE_KEY, siteThemeBootScript, useSiteAppearance, } from './appearance.js';
+export type { SiteAppearance, SiteAppearanceChoice } from './appearance.js';

package/dist/site/projects.d.ts

@@ -0,0 +1,36 @@
+declare const projects: readonly [{
+    readonly id: "annoterm";
+    readonly label: "annoterm";
+    readonly href: "https://filipgutica.github.io/annoterm/";
+    readonly repository: "https://github.com/filipgutica/annoterm";
+}, {
+    readonly id: "wtree";
+    readonly label: "wtree";
+    readonly href: "https://filipgutica.github.io/wtree/";
+    readonly repository: "https://github.com/filipgutica/wtree";
+}, {
+    readonly id: "devps";
+    readonly label: "devps";
+    readonly href: "https://filipgutica.github.io/devps/";
+    readonly repository: "https://github.com/filipgutica/devps";
+}, {
+    readonly id: "workbench";
+    readonly label: "Workbench";
+    readonly href: "https://filipgutica.github.io/t3code/";
+    readonly repository: "https://github.com/filipgutica/t3code";
+}, {
+    readonly id: "ui";
+    readonly label: "UI";
+    readonly href: "https://filipgutica.github.io/ui/";
+    readonly repository: "https://github.com/filipgutica/ui";
+}];
+export type SiteProjectId = (typeof projects)[number]['id'];
+export interface SiteProject {
+    readonly id: SiteProjectId;
+    readonly label: string;
+    readonly href: string;
+    readonly repository: string;
+}
+/** Every site in the family, in the order the project menu lists them. */
+export declare const SITE_PROJECTS: readonly SiteProject[];
+export {};

package/dist/site.js

@@ -0,0 +1,177 @@
+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";
+//#region src/site/appearance.ts
+var y = "tool-site-theme", b = (e) => e === "system" || e === "light" || e === "dark", x = `(function () {
+  var root = document.documentElement, choice;
+  try { choice = localStorage.getItem('${y}'); } 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 }) => {
+	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, {
+		initOnMounted: !0,
+		writeDefaults: !1,
+		onError: () => {},
+		serializer: {
+			read: (e) => b(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({
+			root: document.documentElement,
+			choice: i.value,
+			appearance: a.value
+		}), { immediate: !0 });
+	}), {
+		choice: i,
+		appearance: a,
+		chooseAppearance: (e) => {
+			b(e) && (n.value = e);
+		}
+	};
+}, w = [
+	{
+		id: "annoterm",
+		label: "annoterm",
+		href: "https://filipgutica.github.io/annoterm/",
+		repository: "https://github.com/filipgutica/annoterm"
+	},
+	{
+		id: "wtree",
+		label: "wtree",
+		href: "https://filipgutica.github.io/wtree/",
+		repository: "https://github.com/filipgutica/wtree"
+	},
+	{
+		id: "devps",
+		label: "devps",
+		href: "https://filipgutica.github.io/devps/",
+		repository: "https://github.com/filipgutica/devps"
+	},
+	{
+		id: "workbench",
+		label: "Workbench",
+		href: "https://filipgutica.github.io/t3code/",
+		repository: "https://github.com/filipgutica/t3code"
+	},
+	{
+		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 = {
+	class: "fg-site-projects__menu fg-site-nav",
+	"aria-label": "Projects"
+}, k = ["href", "aria-current"], A = { class: "fg-site-header__end" }, j = {
+	key: 0,
+	class: "fg-site-header__links",
+	"aria-label": "Site links"
+}, M = ["href"], N = {
+	key: 0,
+	class: "fg-site-appearance",
+	role: "group",
+	"aria-label": "Color theme"
+}, P = [
+	"aria-label",
+	"title",
+	"aria-pressed",
+	"onClick"
+], F = {
+	viewBox: "0 0 24 24",
+	width: "18",
+	height: "18",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "1.5",
+	"aria-hidden": "true"
+}, I = {
+	key: 2,
+	d: "M20.5 13.5A9 9 0 0 1 10.5 3a9 9 0 1 0 10 10.5Z"
+}, L = /* @__PURE__ */ a({
+	__name: "UiSiteHeader",
+	props: {
+		project: {},
+		links: { default: () => [] }
+	},
+	setup(a) {
+		let h = [
+			{
+				value: "system",
+				label: "System"
+			},
+			{
+				value: "light",
+				label: "Light"
+			},
+			{
+				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();
+		};
+		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", {
+			ref_key: "menu",
+			ref: y,
+			class: "fg-site-projects",
+			onKeydown: S,
+			onFocusout: L
+		}, [i("summary", {
+			ref_key: "trigger",
+			ref: b,
+			class: "fg-site-projects__trigger",
+			"aria-label": `Project: ${g.value}`
+		}, [i("span", null, f(g.value), 1), o[0] ||= i("svg", {
+			class: "fg-site-projects__chevron",
+			viewBox: "0 0 16 16",
+			width: "16",
+			height: "16",
+			fill: "none",
+			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", {
+			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,
+			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", {
+			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", {
+			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)])])])]));
+	}
+});
+//#endregion
+export { y as SITE_APPEARANCE_KEY, w as SITE_PROJECTS, L as UiSiteHeader, S as applySiteAppearance, x as siteThemeBootScript, C as useSiteAppearance };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filipgutica/ui",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "description": "A compact Vue design system with Tailwind CSS and VS Code theme support",
   "type": "module",
   "sideEffects": [
@@ -11,6 +11,8 @@
     "src/theme.css",
     "src/components.css",
     "src/components/*.css",
+    "src/site.css",
+    "src/themes/*.css",
     "README.md",
     "LICENSE"
   ],
@@ -23,12 +25,18 @@
       "types": "./dist/theme/index.d.ts",
       "import": "./dist/theme.js"
     },
+    "./site": {
+      "types": "./dist/site/index.d.ts",
+      "import": "./dist/site.js"
+    },
     "./open-vsx": {
       "types": "./dist/open-vsx/index.d.ts",
       "import": "./dist/open-vsx.js"
     },
     "./theme.css": "./src/theme.css",
-    "./components.css": "./src/components.css"
+    "./components.css": "./src/components.css",
+    "./site.css": "./src/site.css",
+    "./themes/graphite-indigo.css": "./src/themes/graphite-indigo.css"
   },
   "scripts": {
     "build": "vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
@@ -44,8 +52,10 @@
     "release:dry-run": "semantic-release --dry-run --no-ci",
     "test": "vitest run",
     "test:e2e": "playwright test",
+    "themes:build": "node scripts/graphite-indigo.mjs",
+    "themes:check": "node scripts/graphite-indigo.mjs --check",
     "typecheck": "vue-tsc -p tsconfig.json --noEmit",
-    "verify": "pnpm lint && pnpm typecheck && pnpm docs:typecheck && pnpm test && pnpm test:e2e && pnpm build && pnpm docs:build && pnpm pack --dry-run && publint"
+    "verify": "pnpm lint && pnpm themes:check && pnpm typecheck && pnpm docs:typecheck && pnpm test && pnpm test:e2e && pnpm build && pnpm docs:build && pnpm pack --dry-run && publint"
   },
   "engines": {
     "node": ">=22.12"

package/src/components/tabs.css

@@ -1,5 +1,6 @@
 @layer components {
   .fg-tabs {
+    width: 100%;
     min-width: 0;
     font-family: var(--font-ui);
     font-size: var(--text-md);
@@ -8,8 +9,10 @@
 
   .fg-tabs__list {
     display: flex;
+    width: max-content;
     max-width: 100%;
     overflow-x: auto;
+    margin-block-end: var(--space-4);
     border-bottom: 1px solid var(--color-border-subtle);
   }
 
@@ -22,6 +25,7 @@
     color: var(--color-muted);
     background: transparent;
     font: inherit;
+    font-weight: var(--weight-medium);
     white-space: nowrap;
     cursor: pointer;
   }
@@ -30,7 +34,6 @@
   .fg-tabs__tab[aria-selected="true"] {
     border-bottom-color: var(--color-link);
     color: var(--color-text);
-    font-weight: var(--weight-medium);
   }
 
   .fg-tabs__panel { min-width: 0; }

package/src/components.css

@@ -225,14 +225,14 @@
   }
 
   .fg-button[data-variant="danger"] {
-    color: var(--color-error);
+    color: var(--color-status-text, var(--color-error));
     background: var(--color-error-surface);
     box-shadow: none;
   }
 
   .fg-button[data-variant="danger"]:hover:not(:disabled) {
     border-color: var(--color-error);
-    color: var(--color-error);
+    color: var(--color-status-text, var(--color-error));
     background: var(--color-error-surface);
     box-shadow: none;
   }
@@ -522,11 +522,11 @@
     line-height: 1.25;
   }
 
-  .fg-badge[data-tone="info"] { color: var(--color-info); background: var(--color-info-surface); }
-  .fg-badge[data-tone="success"] { color: var(--color-success); background: var(--color-success-surface); }
-  .fg-badge[data-tone="warning"] { color: var(--color-warning); background: var(--color-warning-surface); }
+  .fg-badge[data-tone="info"] { color: var(--color-status-text, var(--color-info)); background: var(--color-info-surface); }
+  .fg-badge[data-tone="success"] { color: var(--color-status-text, var(--color-success)); background: var(--color-success-surface); }
+  .fg-badge[data-tone="warning"] { color: var(--color-status-text, var(--color-warning)); background: var(--color-warning-surface); }
   .fg-badge[data-tone="danger"],
-  .fg-badge[data-tone="error"] { color: var(--color-error); background: var(--color-error-surface); }
+  .fg-badge[data-tone="error"] { color: var(--color-status-text, var(--color-error)); background: var(--color-error-surface); }
 
   .fg-alert {
     display: flex;
@@ -545,7 +545,7 @@
   .fg-alert[data-tone="danger"],
   .fg-alert[data-tone="error"] {
     border-color: var(--color-error);
-    color: var(--color-error);
+    color: var(--color-status-text, var(--color-error));
     background: var(--color-error-surface);
   }
 

package/src/site.css

@@ -0,0 +1,169 @@
+/* Shared chrome and page helpers for the project sites. Use with
+ * @filipgutica/ui/themes/graphite-indigo.css, which supplies the type, space, and
+ * page-measure roles this file reads. Nothing here targets site-specific markup. */
+@layer components {
+  /* A centered frame. The header uses the same edges as the page below it.
+   * Set --site-frame on the header or a frame to change its width. */
+  .fg-site-frame,
+  .fg-site-header__inner {
+    width: min(100%, var(--site-frame, var(--page-max)));
+    margin-inline: auto;
+    padding-inline: var(--site-gutter, var(--space-4));
+  }
+  .fg-site-frame--wide { --site-frame: var(--page-wide); }
+
+  .fg-site-header {
+    position: relative;
+    z-index: 30;
+    border-bottom: 1px solid var(--color-border-subtle);
+    background: var(--color-bg);
+    color: var(--color-text);
+    font-family: var(--font-ui);
+    font-size: var(--text-md);
+    line-height: var(--leading);
+  }
+  .fg-site-header__inner {
+    display: flex;
+    min-height: var(--space-16);
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2) var(--space-4);
+    padding-block: var(--space-2);
+  }
+  .fg-site-header__end {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2) var(--space-8);
+    margin-inline-start: auto;
+  }
+  .fg-site-header__links { display: flex; align-items: center; gap: var(--space-6); }
+  .fg-site-header__links a {
+    display: inline-flex;
+    min-height: var(--control-lg);
+    align-items: center;
+    color: var(--color-muted);
+    font-size: var(--text-sm);
+    text-decoration: none;
+  }
+  .fg-site-header__links a:hover { color: var(--color-text); }
+
+  .fg-site-projects { position: relative; }
+  .fg-site-projects__trigger {
+    display: inline-flex;
+    min-height: var(--control-lg);
+    align-items: center;
+    gap: var(--space-1);
+    padding-inline: var(--space-3);
+    border-radius: var(--radius-control);
+    color: var(--color-text);
+    font-weight: var(--weight-semibold);
+    list-style: none;
+    cursor: pointer;
+    user-select: none;
+  }
+  .fg-site-projects__trigger::-webkit-details-marker { display: none; }
+  .fg-site-projects__trigger:hover,
+  .fg-site-projects[open] > .fg-site-projects__trigger { background: var(--color-row-hover); }
+  .fg-site-projects__chevron { transition: transform var(--duration-fast) ease; }
+  .fg-site-projects[open] .fg-site-projects__chevron { transform: rotate(180deg); }
+  .fg-site-projects__menu {
+    position: absolute;
+    z-index: 1;
+    top: 100%;
+    left: 0;
+    min-width: 14rem;
+    margin-top: var(--space-1);
+    padding: var(--space-1);
+    border-radius: var(--radius-panel);
+    background: var(--color-surface);
+    box-shadow: var(--shadow-dialog);
+  }
+
+  /* Route rows. Hover is neutral, and the current page keeps its selected fill on
+   * hover. Only aria-current="page" is styled: an in-page section marker
+   * (aria-current="location") must look different from the current page. */
+  .fg-site-nav a {
+    display: flex;
+    min-height: var(--row);
+    align-items: center;
+    padding-inline: var(--space-3);
+    border-radius: var(--radius-control);
+    color: var(--color-muted);
+    font-size: var(--text-md);
+    text-decoration: none;
+    transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
+  }
+  .fg-site-nav a:hover { background: var(--color-row-hover); color: var(--color-text); }
+  .fg-site-nav a[aria-current="page"] {
+    background: var(--color-row-selected);
+    box-shadow: inset 2px 0 0 var(--color-accent);
+    color: var(--color-text);
+    font-weight: var(--weight-medium);
+  }
+
+  .fg-site-appearance {
+    display: inline-flex;
+    flex: none;
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--radius-control);
+  }
+  .fg-site-appearance__choice {
+    display: inline-flex;
+    width: var(--control-lg);
+    min-height: var(--control-lg);
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    color: var(--color-muted);
+    background: transparent;
+    font: inherit;
+    cursor: pointer;
+  }
+  .fg-site-appearance__choice + .fg-site-appearance__choice { border-left: 1px solid var(--color-border-subtle); }
+  .fg-site-appearance__choice:first-child { border-radius: var(--radius-control) 0 0 var(--radius-control); }
+  .fg-site-appearance__choice:last-child { border-radius: 0 var(--radius-control) var(--radius-control) 0; }
+  .fg-site-appearance__choice:hover { color: var(--color-text); background: var(--color-row-hover); }
+  .fg-site-appearance__choice[aria-pressed="true"] { color: var(--color-text); background: var(--color-row-selected); }
+
+  .fg-site-header a:focus-visible,
+  .fg-site-projects__trigger:focus-visible,
+  .fg-site-appearance__choice:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
+  .fg-site-appearance__choice:focus-visible { outline-offset: -2px; }
+  .fg-site-nav a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
+
+  /* Type roles for article content. Prose reads at --text-reading. Components set
+   * their own size, and controls and dense content such as tables belong at --text-md.
+   * Zero-specificity heading selectors keep component and page styles in charge. */
+  .fg-site-prose { font-size: var(--text-reading); line-height: var(--leading); }
+  .fg-site-prose :where(h1, h2, h3, h4) {
+    margin: 0;
+    font-weight: var(--weight-semibold);
+    line-height: var(--leading-tight);
+    letter-spacing: var(--tracking-tight);
+    text-wrap: balance;
+  }
+  .fg-site-prose :where(h1) { font-size: var(--text-3xl); }
+  .fg-site-prose :where(h2) { font-size: var(--text-xl); }
+  .fg-site-prose :where(h3, h4) { font-size: var(--text-lg); }
+  .fg-site-prose :where(p, ul, ol) { max-width: var(--measure); margin: 0; }
+  .fg-site-prose :where(p, ul, ol) + :where(p, ul, ol) { margin-top: var(--space-4); }
+  .fg-site-prose :where(p a, li a, dd a) { text-decoration: underline; text-underline-offset: 0.18em; }
+  .fg-site-meta { color: var(--color-muted); font-size: var(--text-sm); }
+
+  @media (min-width: 681px) {
+    .fg-site-frame,
+    .fg-site-header__inner { padding-inline: var(--site-gutter, var(--space-6)); }
+  }
+  @media (max-width: 680px) {
+    .fg-site-prose :where(h1) { font-size: var(--text-2xl); }
+    .fg-site-header__end { gap: var(--space-2) var(--space-4); }
+    .fg-site-header__links { gap: var(--space-4); }
+    .fg-site-projects__menu a { min-height: var(--control-lg); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fg-site-projects__chevron,
+    .fg-site-nav a { transition: none; }
+  }
+}

package/src/themes/graphite-indigo.css

@@ -0,0 +1,111 @@
+/* Generated from themes/graphite-indigo.json by scripts/graphite-indigo.mjs. Do not edit.
+ * Opt-in Graphite Indigo roles for @filipgutica/ui. Import after theme.css.
+ * Dark mode uses the same .dark class as theme.css. Keep exactly one :root.dark block:
+ * sites copy it into a <noscript> prefers-color-scheme rule. */
+
+:root {
+  color-scheme: light;
+  --color-bg: #f4f5f8;
+  --color-surface: #e7e8ec;
+  --color-surface-raised: #ffffff;
+  --color-surface-muted: #e4e6eb;
+  --color-text: #222326;
+  --color-muted: #5d626c;
+  --color-link: #075fc7;
+  --color-accent: #6359a7;
+  --color-focus: #075fc7;
+  --color-border: #777d88;
+  --color-border-subtle: #d8dbe2;
+  --color-button-bg: var(--color-accent);
+  --color-button-text: #ffffff;
+  --color-button-hover: #554b94;
+  --color-input-bg: var(--color-surface-raised);
+  --color-input-text: var(--color-text);
+  --color-input-border: var(--color-border);
+  --color-input-placeholder: var(--color-muted);
+  --color-row-hover: #dfe1e7;
+  --color-row-selected: #ffffff;
+  --color-row-selected-text: var(--color-text);
+  --color-code: var(--color-surface);
+  --color-code-text: var(--color-text);
+  --color-syntax-comment: #626772;
+  --color-syntax-keyword: #715b42;
+  --color-syntax-string: #346347;
+  --color-syntax-number: #86532e;
+  --color-syntax-function: var(--color-syntax-keyword);
+  --color-syntax-type: var(--color-syntax-number);
+  --color-syntax-variable: var(--color-code-text);
+  --color-syntax-operator: var(--color-muted);
+  --color-syntax-punctuation: var(--color-muted);
+  --color-syntax-tag: var(--color-syntax-keyword);
+  --color-syntax-attribute: var(--color-syntax-number);
+  --color-error: #c7372d;
+  --color-warning: #86532e;
+  --color-success: #1f8a5b;
+  --color-info: #175cd3;
+  --color-progress: var(--color-accent);
+  --color-error-surface: color-mix(in srgb, var(--color-error) 10%, var(--color-bg));
+  --color-warning-surface: color-mix(in srgb, var(--color-warning) 12%, var(--color-bg));
+  --color-success-surface: color-mix(in srgb, var(--color-success) 11%, var(--color-bg));
+  --color-info-surface: color-mix(in srgb, var(--color-info) 10%, var(--color-bg));
+  --shadow-dialog: 0 8px 24px rgb(16 16 24 / 12%), 0 0 0 1px var(--color-border-subtle);
+  --color-status-text: var(--color-text);
+  --text-3xl: 32px;
+  --text-reading: 16px;
+  --text-display: 56px;
+  --text-display-sm: 38px;
+  --tracking-tight: -0.01em;
+  --space-20: 80px;
+  --space-24: 96px;
+  --row: 36px;
+  --page-wide: 1120px;
+}
+
+:root.dark {
+  color-scheme: dark;
+  --color-bg: #151619;
+  --color-surface: #191a1d;
+  --color-surface-raised: #212226;
+  --color-surface-muted: #303238;
+  --color-text: #f4f5f8;
+  --color-muted: #b0b5bf;
+  --color-link: #58a6ff;
+  --color-accent: #a99ce2;
+  --color-focus: #58a6ff;
+  --color-border: #818894;
+  --color-border-subtle: #3b3e45;
+  --color-button-bg: var(--color-accent);
+  --color-button-text: #151619;
+  --color-button-hover: #b7ace9;
+  --color-input-bg: var(--color-surface-raised);
+  --color-input-text: var(--color-text);
+  --color-input-border: var(--color-border);
+  --color-input-placeholder: var(--color-muted);
+  --color-row-hover: #25272d;
+  --color-row-selected: #38334f;
+  --color-row-selected-text: var(--color-text);
+  --color-code: var(--color-surface);
+  --color-code-text: var(--color-text);
+  --color-syntax-comment: #a0a6b1;
+  --color-syntax-keyword: #d8c2a5;
+  --color-syntax-string: #a8bd9c;
+  --color-syntax-number: #d5b98c;
+  --color-syntax-function: var(--color-syntax-keyword);
+  --color-syntax-type: var(--color-syntax-number);
+  --color-syntax-variable: var(--color-code-text);
+  --color-syntax-operator: var(--color-muted);
+  --color-syntax-punctuation: var(--color-muted);
+  --color-syntax-tag: var(--color-syntax-keyword);
+  --color-syntax-attribute: var(--color-syntax-number);
+  --color-error: #f0776c;
+  --color-warning: #e2a54b;
+  --color-success: #4cc38a;
+  --color-info: #84adff;
+  --color-progress: var(--color-accent);
+  --color-error-surface: color-mix(in srgb, var(--color-error) 10%, var(--color-bg));
+  --color-warning-surface: color-mix(in srgb, var(--color-warning) 12%, var(--color-bg));
+  --color-success-surface: color-mix(in srgb, var(--color-success) 11%, var(--color-bg));
+  --color-info-surface: color-mix(in srgb, var(--color-info) 10%, var(--color-bg));
+  --shadow-dialog: 0 8px 24px rgb(0 0 0 / 45%), 0 0 0 1px var(--color-border);
+  --color-status-text: var(--color-text);
+}