@filipgutica/ui 0.2.1 → 0.3.0

package/README.md

@@ -79,6 +79,28 @@ redistribute theme assets remain responsible for their licenses.
   this package so applications keep a consistent design language.
 - `@filipgutica/ui/open-vsx` is Node-only. Do not import it into browser bundles.
 
+## Docs and sandbox
+
+Start the component docs and sandbox:
+
+```sh
+pnpm docs:dev
+```
+
+Build the provider-neutral static assets:
+
+```sh
+pnpm docs:build
+```
+
+The docs use hash routes, so the static assets do not require rewrite rules.
+The local Vite server also provides the same-origin `/api/open-vsx` endpoint.
+The theme picker uses this endpoint to search and import Open VSX themes.
+
+A production host must provide the same API endpoint for live Open VSX imports.
+Netlify and Amplify can use a serverless adapter. GitHub Pages needs an external
+API or a catalog of normalized themes built in advance.
+
 ## Development
 
 ```sh
@@ -90,7 +112,10 @@ Commits follow the Conventional Commits format. Releases run from `main`:
 
 - `fix:` publishes a patch release
 - `feat:` publishes a minor release
-- a `BREAKING CHANGE:` footer publishes a major release
+- `BREAKING CHANGE:` or `[BREAKING CHANGE]` anywhere in a commit body publishes
+  a major release
+- the same markers anywhere in an associated merged PR body publish a major
+  release
 
 The `release.yml` workflow publishes through npm trusted publishing with GitHub
 OIDC. Configure the npm package's trusted publisher once with user

package/dist/open-vsx.js

@@ -3,36 +3,36 @@ import { parse as n } from "jsonc-parser";
 import { createHash as r } from "node:crypto";
 import i from "jszip";
 //#region src/open-vsx/index.ts
-var a = "https://open-vsx.org", o = `${a}/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 {
+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 {
 	code;
 	constructor(e, t) {
 		super(t), this.name = "OpenVsxThemeError", this.code = e;
 	}
-}, y = (e) => typeof e == "object" && !!e && !Array.isArray(e), b = (e, t) => {
+}, b = (e) => typeof e == "object" && !!e && !Array.isArray(e), x = (e, t) => {
 	let r = [], i = n(e, r, { allowTrailingComma: !0 });
-	if (r.length > 0 || !y(i)) throw new v("unsupported-extension", `${t} is not valid JSON.`);
+	if (r.length > 0 || !b(i)) throw new y("unsupported-extension", `${t} is not valid JSON.`);
 	return i;
-}, x = (e) => {
+}, S = (e, { allowResourceOrigin: t = !1 } = {}) => {
 	if (typeof e != "string") return null;
 	try {
-		let t = new URL(e);
-		return t.origin.toLowerCase() === a ? t.toString() : null;
+		let n = new URL(e), r = n.origin.toLowerCase();
+		return r === a || t && r === o ? n.toString() : null;
 	} catch {
 		return null;
 	}
-}, S = (e) => {
+}, C = (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 v("unsupported-extension", "The selected Open VSX extension identifier is invalid.");
+	if (!t?.[1] || !t[2]) throw new y("unsupported-extension", "The selected Open VSX extension identifier is invalid.");
 	return [t[1], t[2]];
-}, C = (e) => {
-	let t = y(e.contributes) ? e.contributes : null;
-	return Array.isArray(t?.themes) ? t.themes.filter(y) : [];
-}, w = async (e, t, n) => {
+}, w = (e) => {
+	let t = b(e.contributes) ? e.contributes : null;
+	return Array.isArray(t?.themes) ? t.themes.filter(b) : [];
+}, T = async (e, t, n) => {
 	let r = Number(e.headers.get("content-length"));
-	if (Number.isFinite(r) && r > t) throw new v("file-too-large", n);
+	if (Number.isFinite(r) && r > t) throw new y("file-too-large", n);
 	if (!e.body) {
 		let r = new Uint8Array(await e.arrayBuffer());
-		if (r.byteLength > t) throw new v("file-too-large", n);
+		if (r.byteLength > t) throw new y("file-too-large", n);
 		return r;
 	}
 	let i = e.body.getReader(), a = [], o = 0;
@@ -40,7 +40,7 @@ var a = "https://open-vsx.org", o = `${a}/api/-/search`, s = 524288, c = 262144,
 		for (;;) {
 			let { done: e, value: r } = await i.read();
 			if (e) break;
-			if (o += r.byteLength, o > t) throw await i.cancel(), new v("file-too-large", n);
+			if (o += r.byteLength, o > t) throw await i.cancel(), new y("file-too-large", n);
 			a.push(r);
 		}
 	} finally {
@@ -49,24 +49,24 @@ var a = "https://open-vsx.org", o = `${a}/api/-/search`, s = 524288, c = 262144,
 	let s = new Uint8Array(o), c = 0;
 	for (let e of a) s.set(e, c), c += e.byteLength;
 	return s;
-}, T = (e) => async ({ url: t, limit: n, failureMessage: r, tooLargeMessage: i }) => {
-	let a = new AbortController(), o = setTimeout(() => a.abort(), _);
+}, E = (e) => async ({ url: t, limit: n, failureMessage: r, tooLargeMessage: i, allowResourceOrigin: a = !1 }) => {
+	let o = new AbortController(), s = setTimeout(() => o.abort(), v);
 	try {
-		let o = x(String(t));
-		if (!o) throw new v("open-vsx-unavailable", r);
-		let s = await e(o, {
+		let s = S(String(t), { allowResourceOrigin: a });
+		if (!s) throw new y("open-vsx-unavailable", r);
+		let c = await e(s, {
 			redirect: "follow",
-			signal: a.signal
+			signal: o.signal
 		});
-		if (!x(s.url || o) || !s.ok) throw new v("open-vsx-unavailable", r);
-		return await w(s, n, i);
+		if (!S(c.url || s, { allowResourceOrigin: a }) || !c.ok) throw new y("open-vsx-unavailable", r);
+		return await T(c, n, i);
 	} catch (e) {
-		throw e instanceof v ? e : new v("open-vsx-unavailable", a.signal.aborted ? "Open VSX took too long to respond." : r);
+		throw e instanceof y ? e : new y("open-vsx-unavailable", o.signal.aborted ? "Open VSX took too long to respond." : r);
 	} finally {
-		clearTimeout(o);
+		clearTimeout(s);
 	}
-}, E = (e) => {
-	if (!y(e)) return null;
+}, D = (e) => {
+	if (!b(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 +77,49 @@ var a = "https://open-vsx.org", o = `${a}/api/-/search`, s = 524288, c = 262144,
 		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
 	};
-}, 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);
+}, 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);
 	let r = [...t];
 	for (let t of e.replaceAll("\\", "/").split("/")) if (!(!t || t === ".")) {
 		if (t === "..") {
-			if (r.length <= n) throw new v("unsupported-extension", "A theme path escapes its package.");
+			if (r.length <= n) throw new y("unsupported-extension", "A theme path escapes its package.");
 			r.pop();
 		} else r.push(t);
 	}
 	return r.join("/");
-}, k = (e, t = "extension/") => {
+}, A = (e, t = "extension/") => {
 	let n = t.split("/").slice(0, -1);
-	return n[0] !== "extension" && n.unshift("extension"), O({
+	return n[0] !== "extension" && n.unshift("extension"), k({
 		path: e,
 		initialSegments: n,
 		minimumDepth: 1
 	});
-}, A = (e) => {
-	let t = O({
+}, j = (e) => {
+	let t = k({
 		path: e,
 		initialSegments: [],
 		minimumDepth: 0
 	});
-	if (!t) throw new v("unsupported-extension", "The extension package has an invalid file name.");
+	if (!t) throw new y("unsupported-extension", "The extension package has an invalid file name.");
 	return t;
-}, j = (e) => {
+}, M = (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 v("unsupported-extension", "The extension package is not a valid ZIP file.");
+	if (r < n) throw new y("unsupported-extension", "The extension package is not a valid ZIP file.");
 	return r;
-}, 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.");
+}, 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.");
 	return {
 		start: r,
 		end: i
 	};
-}, 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.");
+}, 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.");
 	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 > m)) throw new v("unsupported-extension", "The extension package has unsafe ZIP metadata.");
+	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.");
 	try {
 		return {
 			name: new TextDecoder("utf-8", { fatal: !0 }).decode(e.subarray(n + 46, n + 46 + o)),
@@ -127,32 +127,32 @@ var a = "https://open-vsx.org", o = `${a}/api/-/search`, s = 524288, c = 262144,
 			nextOffset: l
 		};
 	} catch {
-		throw new v("unsupported-extension", "The extension package has an invalid file name.");
+		throw new y("unsupported-extension", "The extension package has an invalid file name.");
 	}
-}, 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;
+}, 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;
 	for (; o < n.end;) {
-		if (a += 1, a > f) throw new v("unsupported-extension", "The extension package has an invalid ZIP directory.");
-		let s = N({
+		if (a += 1, a > p) throw new y("unsupported-extension", "The extension package has an invalid ZIP directory.");
+		let s = P({
 			bytes: e,
 			view: t,
 			offset: o,
 			directoryEnd: n.end
 		});
-		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;
+		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;
 	}
 	return r;
-}, F = async ({ zip: e, sizes: t, path: n, description: r }) => {
+}, I = async ({ zip: e, sizes: t, path: n, description: r }) => {
 	let i = t.get(n);
-	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.`);
+	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.`);
 	let a = e.file(n);
-	if (!a) throw new v("unsupported-extension", `${r} is missing.`);
+	if (!a) throw new y("unsupported-extension", `${r} is missing.`);
 	return a.async("string");
-}, 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({
+}, 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({
 		zip: e,
 		sizes: t,
 		path: n,
@@ -161,90 +161,93 @@ var a = "https://open-vsx.org", o = `${a}/api/-/search`, s = 524288, c = 262144,
 	if (typeof i.include != "string") return i;
 	let a = new Set(r);
 	a.add(n);
-	let o = await I({
+	let o = await L({
 		zip: e,
 		sizes: t,
-		path: k(i.include, n),
+		path: A(i.include, n),
 		ancestors: a
 	});
 	return {
 		...o,
 		...i,
 		colors: {
-			...y(o.colors) ? o.colors : {},
-			...y(i.colors) ? i.colors : {}
+			...b(o.colors) ? o.colors : {},
+			...b(i.colors) ? i.colors : {}
 		}
 	};
-}, 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), i = await e({
+}, 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: c,
+		limit: l,
 		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 (!y(o) || !y(o.files)) throw new v("unsupported-extension", "Open VSX returned malformed theme details.");
-	let s = x(o.files.manifest), l = x(o.files.download), u = x(o.files.sha256), d = typeof o.version == "string" ? o.version : "";
-	if (!s || !l || !u || !d) throw new v("unsupported-extension", "Open VSX returned malformed theme details.");
+	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.");
 	return {
 		extensionName: r,
-		manifestUrl: s,
-		packageUrl: l,
-		checksumUrl: u,
-		version: d
+		manifestUrl: c,
+		packageUrl: u,
+		checksumUrl: d,
+		version: f
 	};
-}, B = async ({ request: e, manifestUrl: t }) => {
+}, V = async ({ request: e, manifestUrl: t }) => {
 	let n = await e({
 		url: t,
-		limit: l,
+		limit: u,
 		failureMessage: "That extension has no readable manifest.",
-		tooLargeMessage: "That extension manifest is too large."
-	}), 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 }) => {
+		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({
 		url: t,
-		limit: d,
+		limit: f,
 		failureMessage: "That Open VSX theme could not be downloaded.",
-		tooLargeMessage: "That theme extension is too large to import safely."
+		tooLargeMessage: "That theme extension is too large to import safely.",
+		allowResourceOrigin: !0
 	}), e({
 		url: n,
 		limit: 256,
 		failureMessage: "That Open VSX theme has no readable checksum.",
-		tooLargeMessage: "That Open VSX checksum response is invalid."
+		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 v("integrity-failed", "That Open VSX theme has an invalid checksum.");
-	if (o.toLowerCase() !== s) throw new v("integrity-failed", "That Open VSX theme failed its integrity check.");
+	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;
-}, H = async (e) => {
-	let t = P(e);
+}, U = async (e) => {
+	let t = F(e);
 	try {
 		return {
 			zip: await i.loadAsync(e),
 			sizes: t
 		};
 	} catch {
-		throw new v("unsupported-extension", "That extension package could not be opened.");
+		throw new y("unsupported-extension", "That extension package could not be opened.");
 	}
-}, U = async ({ zip: e, sizes: t, extensionId: n, version: r }) => {
-	let i = b(await F({
+}, W = async ({ zip: e, sizes: t, extensionId: n, version: r }) => {
+	let i = x(await I({
 		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 v("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 y("integrity-failed", "The downloaded package does not match the selected Open VSX theme.");
 	return i;
-}, W = async ({ zip: e, 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.");
+}, G = async ({ zip: e, 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.");
 	let o = [];
 	for (let r of a) {
-		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({
+		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({
 			zip: e,
 			sizes: n,
 			path: a
-		}), c = L(r.uiTheme), l = typeof r.label == "string" && r.label.trim() ? r.label.trim() : i;
+		}), c = R(r.uiTheme), l = typeof r.label == "string" && r.label.trim() ? r.label.trim() : i;
 		o.push(t({
 			source: JSON.stringify({
 				...s,
@@ -255,8 +258,8 @@ var a = "https://open-vsx.org", o = `${a}/api/-/search`, s = 524288, c = 262144,
 		}));
 	}
 	return o;
-}, G = ({ fetchImpl: t = fetch } = {}) => {
-	let n = T(t);
+}, K = ({ fetchImpl: t = fetch } = {}) => {
+	let n = E(t);
 	return {
 		search: async (e) => {
 			let t = e.trim();
@@ -269,21 +272,35 @@ var a = "https://open-vsx.org", o = `${a}/api/-/search`, s = 524288, c = 262144,
 				message: "Search terms must be 100 characters or fewer."
 			};
 			try {
-				let e = new URL(o);
+				let e = new URL(s);
 				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: s,
+					limit: c,
 					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 (!y(i) || !Array.isArray(i.extensions)) throw Error("invalid response");
+				if (!b(i) || !Array.isArray(i.extensions)) throw Error("invalid response");
+				let a = i.extensions.flatMap((e) => {
+					let t = D(e);
+					return t ? [t] : [];
+				}).slice(0, 12);
 				return {
 					status: "success",
-					themes: i.extensions.flatMap((e) => {
-						let t = E(e);
-						return t ? [t] : [];
-					}).slice(0, 12)
+					themes: (await Promise.all(a.map(async (e) => {
+						try {
+							let t = await B({
+								request: n,
+								extensionId: e.id
+							});
+							return await V({
+								request: n,
+								manifestUrl: t.manifestUrl
+							}), e;
+						} catch {
+							return null;
+						}
+					}))).filter((e) => e !== null)
 				};
 			} catch {
 				return {
@@ -294,24 +311,24 @@ var a = "https://open-vsx.org", o = `${a}/api/-/search`, s = 524288, c = 262144,
 		},
 		importTheme: async (t, r) => {
 			try {
-				let e = await z({
+				let e = await B({
 					request: n,
 					extensionId: t
 				});
-				await B({
+				await V({
 					request: n,
 					manifestUrl: e.manifestUrl
 				});
-				let { zip: i, sizes: a } = await H(await V({
+				let { zip: i, sizes: a } = await U(await H({
 					request: n,
 					...e
 				}));
 				return {
 					status: "success",
-					theme: R(await W({
+					theme: z(await G({
 						zip: i,
 						sizes: a,
-						manifest: await U({
+						manifest: await W({
 							zip: i,
 							sizes: a,
 							extensionId: t,
@@ -321,7 +338,7 @@ var a = "https://open-vsx.org", o = `${a}/api/-/search`, s = 524288, c = 262144,
 					}), r)
 				};
 			} catch (t) {
-				return t instanceof e || t instanceof v ? {
+				return t instanceof e || t instanceof y ? {
 					status: "error",
 					error: {
 						code: t.code,
@@ -339,4 +356,4 @@ var a = "https://open-vsx.org", o = `${a}/api/-/search`, s = 524288, c = 262144,
 	};
 };
 //#endregion
-export { G as createOpenVsxThemeService };
+export { K as createOpenVsxThemeService };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filipgutica/ui",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "A compact Vue design system with Tailwind CSS and VS Code theme support",
   "type": "module",
   "sideEffects": [
@@ -31,12 +31,17 @@
   },
   "scripts": {
     "build": "vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "docs:build": "vite build --config docs/vite.config.ts",
+    "docs:dev": "vite --config docs/vite.config.ts",
+    "docs:preview": "vite preview --config docs/vite.config.ts",
+    "docs:smoke": "node scripts/docs-smoke.mjs",
+    "docs:typecheck": "vue-tsc -p docs/tsconfig.json --noEmit",
     "prepublishOnly": "pnpm verify",
     "release": "semantic-release",
     "release:dry-run": "semantic-release --dry-run --no-ci",
     "test": "vitest run",
     "typecheck": "vue-tsc -p tsconfig.json --noEmit",
-    "verify": "pnpm typecheck && pnpm test && pnpm build && pnpm pack --dry-run && publint"
+    "verify": "pnpm typecheck && pnpm docs:typecheck && pnpm test && pnpm build && pnpm docs:build && pnpm pack --dry-run && publint"
   },
   "engines": {
     "node": ">=22.12"
@@ -67,6 +72,7 @@
     "@commitlint/cli": "^21.2.2",
     "@commitlint/config-conventional": "^21.2.2",
     "@semantic-release/commit-analyzer": "13.0.1",
+    "@tailwindcss/vite": "^4.3.3",
     "@types/node": "^26.0.0",
     "@vitejs/plugin-vue": "^6.0.0",
     "@vue/test-utils": "^2.4.6",

package/src/components.css

@@ -3,10 +3,16 @@
   .fg-input,
   .fg-select,
   .fg-dialog__close {
-    min-height: 2.5rem;
+    min-height: 2.75rem;
     border: 1px solid transparent;
     border-radius: var(--radius-control);
     font: inherit;
+    transition:
+      background-color var(--duration-fast) ease,
+      border-color var(--duration-fast) ease,
+      color var(--duration-fast) ease,
+      box-shadow var(--duration-fast) ease,
+      transform var(--duration-fast) ease;
   }
 
   .fg-button {
@@ -14,10 +20,12 @@
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
-    padding: 0.55rem 0.85rem;
+    padding: 0.65rem 1rem;
     color: var(--color-button-text);
     background: var(--color-button-bg);
-    font-weight: 680;
+    box-shadow: var(--shadow-control);
+    font-weight: 700;
+    letter-spacing: -0.01em;
     line-height: 1.25;
     cursor: pointer;
   }
@@ -26,6 +34,11 @@
     background: var(--color-button-hover);
   }
 
+  .fg-button:active:not(:disabled) {
+    transform: translateY(1px);
+    box-shadow: none;
+  }
+
   .fg-button:disabled,
   .fg-input:disabled,
   .fg-select:disabled,
@@ -38,9 +51,20 @@
     cursor: wait;
   }
 
+  .fg-button[aria-busy="true"]::before {
+    width: 0.85rem;
+    height: 0.85rem;
+    flex: none;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    content: "";
+    animation: fg-button-spin 700ms linear infinite;
+  }
+
   .fg-button[data-size="compact"] {
-    min-height: 2rem;
-    padding: 0.35rem 0.6rem;
+    min-height: 2.25rem;
+    padding: 0.4rem 0.7rem;
     font-size: 0.8125rem;
   }
 
@@ -59,11 +83,20 @@
   .fg-button[data-variant="ghost"] {
     color: var(--color-muted);
     background: transparent;
+    box-shadow: none;
   }
 
   .fg-button[data-variant="danger"] {
     color: 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);
+    background: var(--color-error-surface);
+    box-shadow: inset 0 0 0 1px var(--color-error);
   }
 
   .fg-button[data-variant="text"] {
@@ -73,6 +106,7 @@
     background: transparent;
     text-decoration: underline;
     text-underline-offset: 0.2em;
+    box-shadow: none;
   }
 
   .fg-button[data-variant="text"]:hover:not(:disabled) {
@@ -87,6 +121,7 @@
     border-color: var(--color-input-border);
     color: var(--color-input-text);
     background: var(--color-input-bg);
+    box-shadow: var(--shadow-control);
     line-height: 1.35;
   }
 
@@ -107,9 +142,9 @@
   }
 
   .fg-field__label {
-    color: var(--color-muted);
+    color: var(--color-text);
     font-size: 0.8125rem;
-    font-weight: 680;
+    font-weight: 700;
   }
 
   .fg-field__description,
@@ -132,14 +167,15 @@
   .fg-checkbox__control {
     display: inline-grid;
     flex: none;
-    width: 1.15rem;
-    height: 1.15rem;
+    width: 1.25rem;
+    height: 1.25rem;
     margin-top: 0.1rem;
     place-items: center;
     border: 1px solid var(--color-input-border);
     border-radius: 0.3rem;
     color: var(--color-button-text);
     background: var(--color-input-bg);
+    box-shadow: var(--shadow-control);
   }
 
   .fg-checkbox__control[data-state="checked"] {
@@ -180,14 +216,15 @@
     gap: 0.75rem;
     padding: 0.85rem 1rem;
     border: 1px solid var(--color-border-subtle);
+    border-left: 3px solid var(--color-border);
     border-radius: var(--radius-control);
     color: var(--color-text);
     background: var(--color-surface);
   }
 
-  .fg-alert[data-tone="info"] { background: var(--color-info-surface); }
-  .fg-alert[data-tone="success"] { background: var(--color-success-surface); }
-  .fg-alert[data-tone="warning"] { background: var(--color-warning-surface); }
+  .fg-alert[data-tone="info"] { border-left-color: var(--color-info); background: var(--color-info-surface); }
+  .fg-alert[data-tone="success"] { border-left-color: var(--color-success); background: var(--color-success-surface); }
+  .fg-alert[data-tone="warning"] { border-left-color: var(--color-warning); background: var(--color-warning-surface); }
   .fg-alert[data-tone="danger"],
   .fg-alert[data-tone="error"] {
     border-color: var(--color-error);
@@ -199,6 +236,7 @@
     border: 1px solid var(--color-border-subtle);
     border-radius: var(--radius-panel);
     background: var(--color-surface-raised);
+    box-shadow: 0 1px 2px var(--color-shadow);
   }
 
   .fg-surface[data-padding="compact"] { padding: 0.85rem; }
@@ -225,6 +263,7 @@
     inset: 0;
     z-index: 50;
     background: var(--color-overlay);
+    backdrop-filter: blur(2px);
   }
 
   .fg-dialog__content {
@@ -259,7 +298,8 @@
   .fg-dialog__title {
     margin: 0;
     font-size: 1.1rem;
-    font-weight: 750;
+    font-weight: 760;
+    letter-spacing: -0.02em;
   }
 
   .fg-dialog__description {
@@ -277,7 +317,7 @@
   .fg-dialog__close {
     display: inline-grid;
     flex: none;
-    width: 2.5rem;
+    width: 2.75rem;
     padding: 0;
     place-items: center;
     color: var(--color-muted);
@@ -288,6 +328,10 @@
 
   .fg-dialog__close:hover { color: var(--color-text); background: var(--color-row-hover); }
 
+  @keyframes fg-button-spin {
+    to { transform: rotate(360deg); }
+  }
+
   .fg-button:focus-visible,
   .fg-input:focus-visible,
   .fg-select:focus-visible,
@@ -322,6 +366,12 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
+    .fg-button,
+    .fg-input,
+    .fg-select,
+    .fg-dialog__close,
     .fg-progress__indicator { transition: none; }
+
+    .fg-button[aria-busy="true"]::before { animation-duration: 1.4s; }
   }
 }

package/src/theme.css

@@ -2,78 +2,79 @@
 
 :root {
   color-scheme: light;
-  --color-bg: #eff1f5;
-  --color-surface: #e6e9ef;
+  --color-bg: #ffffff;
+  --color-surface: #f7f8fa;
   --color-surface-raised: #fff;
-  --color-surface-muted: #dce0e8;
-  --color-text: #4c4f69;
-  --color-muted: #6c6f85;
-  --color-link: #1e66f5;
-  --color-accent: #8839ef;
-  --color-focus: #1e66f5;
-  --color-border: #acb0be;
-  --color-border-subtle: #ccd0da;
-  --color-button-bg: #1e66f5;
+  --color-surface-muted: #eef1f5;
+  --color-text: #101828;
+  --color-muted: #5d6979;
+  --color-link: #155eef;
+  --color-accent: #4d7c0f;
+  --color-focus: #155eef;
+  --color-border: #667085;
+  --color-border-subtle: #d8dee8;
+  --color-button-bg: #155eef;
   --color-button-text: #fff;
-  --color-button-hover: #1a5ad7;
+  --color-button-hover: #004eeb;
   --color-input-bg: #fff;
-  --color-input-text: #4c4f69;
-  --color-input-border: #9ca0b0;
-  --color-input-placeholder: #7c7f93;
-  --color-row-hover: #dce0e8;
-  --color-row-selected: #d9e2fa;
-  --color-row-selected-text: #4c4f69;
-  --color-code: #e6e9ef;
-  --color-code-text: #4c4f69;
-  --color-error: #d20f39;
-  --color-warning: #8a5600;
-  --color-success: #287d3c;
-  --color-info: #176b87;
-  --color-progress: #8839ef;
-  --color-shadow: rgb(0 0 0 / 8%);
+  --color-input-text: #101828;
+  --color-input-border: #667085;
+  --color-input-placeholder: #667085;
+  --color-row-hover: #f2f4f7;
+  --color-row-selected: #eaf1ff;
+  --color-row-selected-text: #143d8f;
+  --color-code: #0c1426;
+  --color-code-text: #edf2ff;
+  --color-error: #c01048;
+  --color-warning: #854a0e;
+  --color-success: #067647;
+  --color-info: #175cd3;
+  --color-progress: #155eef;
+  --color-shadow: rgb(16 24 40 / 10%);
   --color-overlay: rgb(0 0 0 / 42%);
   --color-error-surface: color-mix(in srgb, var(--color-error) 12%, var(--color-surface));
   --color-warning-surface: color-mix(in srgb, var(--color-warning) 13%, var(--color-surface));
   --color-success-surface: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
   --color-info-surface: color-mix(in srgb, var(--color-info) 12%, var(--color-surface));
-  --radius-control: 0.55rem;
-  --radius-panel: 0.75rem;
+  --radius-control: 0.375rem;
+  --radius-panel: 0.5rem;
   --radius-pill: 999px;
-  --duration-fast: 180ms;
-  --shadow-dialog: 0 20px 64px rgb(0 0 0 / 24%);
+  --duration-fast: 140ms;
+  --shadow-control: 0 1px 2px rgb(16 24 40 / 8%);
+  --shadow-dialog: 0 24px 80px rgb(5 12 24 / 28%);
 }
 
 :root.dark {
   color-scheme: dark;
-  --color-bg: #1e1e2e;
-  --color-surface: #181825;
-  --color-surface-raised: #242435;
-  --color-surface-muted: #313244;
-  --color-text: #cdd6f4;
-  --color-muted: #a6adc8;
-  --color-link: #89b4fa;
-  --color-accent: #cba6f7;
-  --color-focus: #89b4fa;
-  --color-border: #585b70;
-  --color-border-subtle: #45475a;
-  --color-button-bg: #89b4fa;
-  --color-button-text: #11111b;
-  --color-button-hover: #b4befe;
-  --color-input-bg: #11111b;
-  --color-input-text: #cdd6f4;
-  --color-input-border: #6c7086;
-  --color-input-placeholder: #9399b2;
-  --color-row-hover: #313244;
-  --color-row-selected: #45475a;
-  --color-row-selected-text: #cdd6f4;
-  --color-code: #11111b;
-  --color-code-text: #cdd6f4;
-  --color-error: #f38ba8;
-  --color-warning: #f9e2af;
-  --color-success: #a6e3a1;
-  --color-info: #89dceb;
-  --color-progress: #cba6f7;
-  --color-shadow: rgb(0 0 0 / 28%);
+  --color-bg: #0b1020;
+  --color-surface: #111827;
+  --color-surface-raised: #151d2f;
+  --color-surface-muted: #202a3d;
+  --color-text: #f4f7ff;
+  --color-muted: #a8b3c7;
+  --color-link: #8fb4ff;
+  --color-accent: #b7ef53;
+  --color-focus: #8fb4ff;
+  --color-border: #647189;
+  --color-border-subtle: #2d384d;
+  --color-button-bg: #6e9cff;
+  --color-button-text: #071126;
+  --color-button-hover: #8fb4ff;
+  --color-input-bg: #0d1526;
+  --color-input-text: #f4f7ff;
+  --color-input-border: #647189;
+  --color-input-placeholder: #8995aa;
+  --color-row-hover: #1b2538;
+  --color-row-selected: #1b315b;
+  --color-row-selected-text: #dbe7ff;
+  --color-code: #070d19;
+  --color-code-text: #edf2ff;
+  --color-error: #ff8aad;
+  --color-warning: #f8c477;
+  --color-success: #75e0a7;
+  --color-info: #84adff;
+  --color-progress: #8fb4ff;
+  --color-shadow: rgb(0 0 0 / 32%);
   --color-overlay: rgb(0 0 0 / 62%);
 }