@farming-labs/theme 0.2.38 → 0.2.40

package/dist/docs-command-search.mjs

@@ -11,6 +11,12 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 function cn(...classes) {
 	return classes.filter(Boolean).join(" ");
 }
+const BREADCRUMB_SEPARATOR = "\xA0\xA0>\xA0\xA0";
+const FILTER_LABELS = {
+	all: "All",
+	pages: "Pages",
+	inside: "Inside pages"
+};
 function stripHtml(html) {
 	if (typeof document !== "undefined") {
 		const el = document.createElement("div");
@@ -22,6 +28,73 @@ function stripHtml(html) {
 function stripSearchPreview(text) {
 	return text.replace(/```[\s\S]*?```/g, "").replace(/~~~[\s\S]*?~~~/g, "").replace(/!\[([^\]]*)\]\([^)]+\)/g, "$1").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/^#{1,6}\s+/gm, "").replace(/^\|?[\s:-]+(\|[\s:-]+)+\|?\s*$/gm, "").replace(/\|/g, " ").replace(/^[-*+]\s+/gm, "").replace(/(\*{1,3}|_{1,3})(.*?)\1/g, "$2").replace(/`([^`]+)`/g, "$1").replace(/`+/g, "").replace(/\s{2,}/g, " ").trim();
 }
+function breadcrumbForUrl(url) {
+	try {
+		const parts = new URL(url, "https://docs.local").pathname.split("/").filter(Boolean).map((part) => decodeURIComponent(part).replace(/[-_]+/g, " ").replace(/\b\w/g, (char) => char.toUpperCase()));
+		return parts.length > 0 ? parts.join(BREADCRUMB_SEPARATOR) : "Docs";
+	} catch {
+		return "Docs";
+	}
+}
+function normalizeSearchPhrase(value) {
+	return value.toLowerCase().replace(/[?!.,;:]+$/g, "").replace(/\s+/g, " ").trim();
+}
+function escapeRegExp(value) {
+	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function literalMatchPriority(query, value) {
+	const q = normalizeSearchPhrase(query);
+	const text = normalizeSearchPhrase(value ?? "");
+	if (!q || !text) return 0;
+	if (text === q) return 2;
+	const boundary = "[^\\p{L}\\p{N}]";
+	return new RegExp(`(^|${boundary})${escapeRegExp(q)}(?=$|${boundary})`, "u").test(text) ? 1 : 0;
+}
+function tokenizeLiteralQuery(query) {
+	return Array.from(new Set(query.toLowerCase().replace(/[^\p{L}\p{N}@/_:.-]+/gu, " ").split(/\s+/).map((word) => word.replace(/^[^\p{L}\p{N}@]+|[^\p{L}\p{N}]+$/gu, "")).filter((word) => word.length > 1)));
+}
+function isLiteralLookupQuery(query) {
+	const q = normalizeSearchPhrase(query);
+	const words = tokenizeLiteralQuery(q);
+	return words.length > 0 && words.length <= 3 && words.join(" ") === q;
+}
+function hasDistinctSearchSection(result, label) {
+	if (result.type === "page") return false;
+	if (!result.section) return true;
+	const title = label.split(/\s+[—–]\s+/)[0] ?? "";
+	return normalizeSearchPhrase(result.section) !== normalizeSearchPhrase(title);
+}
+function getUrlSearchSegments(url) {
+	try {
+		const parsed = new URL(url, "https://docs.local");
+		return Array.from(new Set(parsed.pathname.split("/").flatMap((segment) => {
+			const decoded = decodeURIComponent(segment);
+			return [decoded, decoded.replace(/[-_]+/g, " ")];
+		}).map(normalizeSearchPhrase).filter(Boolean)));
+	} catch {
+		return [];
+	}
+}
+function exactMatchPriority(query, label, url) {
+	const q = normalizeSearchPhrase(query);
+	if (!q) return 0;
+	const normalizedLabel = normalizeSearchPhrase(label);
+	const joinedLabel = normalizeSearchPhrase(label.replace(/\s+[—–-]\s+/g, " "));
+	const labelParts = normalizedLabel.split(/\s+[—–-]\s+/).map(normalizeSearchPhrase).filter(Boolean);
+	if (normalizedLabel === q || joinedLabel === q) return 4;
+	if (labelParts.includes(q)) return 3;
+	if (getUrlSearchSegments(url).includes(q)) return 2;
+	if (normalizedLabel.startsWith(q) || joinedLabel.startsWith(q)) return 1;
+	return 0;
+}
+function resultDisplayLabel(result) {
+	const section = result.section ? stripSearchPreview(stripHtml(result.section)) : "";
+	if (section) return section;
+	const label = stripSearchPreview(stripHtml(result.content));
+	const parts = label.split(/\s+[—–]\s+/).map((part) => part.trim()).filter(Boolean);
+	if (result.type === "heading" && parts.length > 1) return parts[parts.length - 1] ?? label;
+	return label;
+}
 function fuzzyScore(query, text) {
 	const q = query.trim().toLowerCase();
 	const t = text.toLowerCase();
@@ -56,22 +129,23 @@ function fuzzyScore(query, text) {
 		indices: Array.from(new Set(indices)).sort((a, b) => a - b)
 	};
 }
-function HighlightedLabel({ label, indices }) {
+function HighlightedLabel({ label, indices = [] }) {
 	if (!indices.length) return /* @__PURE__ */ jsx(Fragment$1, { children: label });
 	const out = [];
-	for (let pos = 0; pos < label.length; pos++) if (indices.includes(pos)) {
-		let run = label[pos];
-		let p = pos + 1;
-		while (indices.includes(p) && p < label.length) {
-			run += label[p];
-			p++;
-		}
-		out.push(/* @__PURE__ */ jsx("mark", {
+	const highlighted = new Set(indices);
+	let pos = 0;
+	while (pos < label.length) {
+		const marked = highlighted.has(pos);
+		let end = pos + 1;
+		while (end < label.length && highlighted.has(end) === marked) end++;
+		const run = label.slice(pos, end);
+		if (marked) out.push(/* @__PURE__ */ jsx("mark", {
 			className: "omni-highlight",
 			children: run
 		}, `m-${pos}`));
-		pos = p - 1;
-	} else out.push(/* @__PURE__ */ jsx("span", { children: label[pos] }, `t-${pos}`));
+		else out.push(/* @__PURE__ */ jsx("span", { children: run }, `t-${pos}`));
+		pos = end;
+	}
 	return /* @__PURE__ */ jsx(Fragment$1, { children: out });
 }
 function SearchIcon() {
@@ -91,99 +165,8 @@ function SearchIcon() {
 		}), /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })]
 	});
 }
-function FileIcon() {
-	return /* @__PURE__ */ jsxs("svg", {
-		width: "16",
-		height: "16",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "2",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		children: [/* @__PURE__ */ jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }), /* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })]
-	});
-}
-function HashIcon() {
-	return /* @__PURE__ */ jsxs("svg", {
-		width: "16",
-		height: "16",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "2",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		children: [
-			/* @__PURE__ */ jsx("line", {
-				x1: "4",
-				x2: "20",
-				y1: "9",
-				y2: "9"
-			}),
-			/* @__PURE__ */ jsx("line", {
-				x1: "4",
-				x2: "20",
-				y1: "15",
-				y2: "15"
-			}),
-			/* @__PURE__ */ jsx("line", {
-				x1: "10",
-				x2: "8",
-				y1: "3",
-				y2: "21"
-			}),
-			/* @__PURE__ */ jsx("line", {
-				x1: "16",
-				x2: "14",
-				y1: "3",
-				y2: "21"
-			})
-		]
-	});
-}
-function TypeIcon() {
-	return /* @__PURE__ */ jsxs("svg", {
-		width: "16",
-		height: "16",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "2",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		children: [
-			/* @__PURE__ */ jsx("polyline", { points: "4 7 4 4 20 4 20 7" }),
-			/* @__PURE__ */ jsx("line", {
-				x1: "9",
-				x2: "15",
-				y1: "20",
-				y2: "20"
-			}),
-			/* @__PURE__ */ jsx("line", {
-				x1: "12",
-				x2: "12",
-				y1: "4",
-				y2: "20"
-			})
-		]
-	});
-}
-function CloseIcon() {
-	return /* @__PURE__ */ jsxs("svg", {
-		width: "16",
-		height: "16",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "2",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
-	});
-}
-function EnterIcon() {
-	return /* @__PURE__ */ jsxs("svg", {
+function ArrowDownIcon() {
+	return /* @__PURE__ */ jsx("svg", {
 		width: "12",
 		height: "12",
 		viewBox: "0 0 24 24",
@@ -192,7 +175,7 @@ function EnterIcon() {
 		strokeWidth: "2",
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
-		children: [/* @__PURE__ */ jsx("polyline", { points: "9 10 4 15 9 20" }), /* @__PURE__ */ jsx("path", { d: "M20 4v7a4 4 0 0 1-4 4H4" })]
+		children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
 	});
 }
 function ArrowUpIcon() {
@@ -208,8 +191,8 @@ function ArrowUpIcon() {
 		children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" })
 	});
 }
-function ArrowDownIcon() {
-	return /* @__PURE__ */ jsx("svg", {
+function CornerDownLeftIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
 		width: "12",
 		height: "12",
 		viewBox: "0 0 24 24",
@@ -218,37 +201,7 @@ function ArrowDownIcon() {
 		strokeWidth: "2",
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
-		children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
-	});
-}
-function ExternalLinkIcon() {
-	return /* @__PURE__ */ jsxs("svg", {
-		width: "14",
-		height: "14",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "2",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		children: [
-			/* @__PURE__ */ jsx("path", { d: "M15 3h6v6" }),
-			/* @__PURE__ */ jsx("path", { d: "M10 14 21 3" }),
-			/* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
-		]
-	});
-}
-function ChevronRightIcon() {
-	return /* @__PURE__ */ jsx("svg", {
-		width: "14",
-		height: "14",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "2",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+		children: [/* @__PURE__ */ jsx("path", { d: "m9 10-5 5 5 5" }), /* @__PURE__ */ jsx("path", { d: "M20 4v7a4 4 0 0 1-4 4H4" })]
 	});
 }
 function LoaderIcon() {
@@ -282,21 +235,6 @@ function HistoryIcon() {
 		]
 	});
 }
-function iconForType(type) {
-	switch (type) {
-		case "heading": return /* @__PURE__ */ jsx(HashIcon, {});
-		case "text": return /* @__PURE__ */ jsx(TypeIcon, {});
-		default: return /* @__PURE__ */ jsx(FileIcon, {});
-	}
-}
-function labelForType(type) {
-	switch (type) {
-		case "page": return "Page";
-		case "heading": return "Section";
-		case "text": return "Content";
-		default: return "Result";
-	}
-}
 /**
 * Built-in docs search command palette.
 * Intercepts Cmd+K and sidebar search button to provide an advanced
@@ -311,11 +249,14 @@ function DocsCommandSearch({ api = "/api/docs", locale, analytics = false }) {
 	const [loading, setLoading] = useState(false);
 	const [activeIndex, setActiveIndex] = useState(0);
 	const [recents, setRecents] = useState([]);
+	const [filter, setFilter] = useState("all");
+	const [filterOpen, setFilterOpen] = useState(false);
 	const [mounted, setMounted] = useState(false);
 	const activeLocale = resolveClientLocale(useWindowSearchParams(), locale);
 	const searchApi = useMemo(() => withLangInUrl(api, activeLocale), [activeLocale, api]);
 	const inputRef = useRef(null);
 	const listRef = useRef(null);
+	const searchCacheRef = useRef(/* @__PURE__ */ new Map());
 	const setOpenWithAnalytics = useCallback((nextOpen, trigger) => {
 		setOpen(nextOpen);
 		if (!analytics) return;
@@ -374,29 +315,57 @@ function DocsCommandSearch({ api = "/api/docs", locale, analytics = false }) {
 			return;
 		}
 		let cancelled = false;
+		const controller = new AbortController();
+		const cacheKey = `${activeLocale ?? ""}:${searchApi}:${debouncedQuery}`;
+		const cached = searchCacheRef.current.get(cacheKey);
+		if (cached) {
+			setResults(cached);
+			setActiveIndex(0);
+			setLoading(false);
+			return;
+		}
 		setLoading(true);
 		(async () => {
 			const startedAt = Date.now();
 			try {
 				const requestUrl = new URL(searchApi, window.location.origin);
 				requestUrl.searchParams.set("query", debouncedQuery);
-				const res = await fetch(requestUrl.toString());
+				const res = await fetch(requestUrl.toString(), { signal: controller.signal });
 				if (!res.ok || cancelled) return;
-				const items = (await res.json()).map((r) => {
-					const label = stripSearchPreview(stripHtml(r.content));
+				const items = (await res.json()).map((r, sourceIndex) => {
+					const sourceLabel = stripSearchPreview(stripHtml(r.content));
+					const label = resultDisplayLabel(r);
+					const description = r.description ? stripSearchPreview(stripHtml(r.description)).slice(0, 220) : void 0;
 					const { score, indices } = fuzzyScore(debouncedQuery, label);
+					const descriptionMatch = description ? fuzzyScore(debouncedQuery, description) : { indices: [] };
+					const url = withLangInUrl(r.url, activeLocale);
 					return {
 						id: r.id,
 						label,
-						subtitle: r.description ? stripSearchPreview(stripHtml(r.description)) : labelForType(r.type),
-						url: withLangInUrl(r.url, activeLocale),
-						icon: iconForType(r.type),
+						subtitle: breadcrumbForUrl(r.url),
+						description,
+						url,
+						type: r.type,
 						score,
-						indices
+						exactPriority: exactMatchPriority(debouncedQuery, sourceLabel, r.url),
+						insideLiteralPriority: hasDistinctSearchSection(r, sourceLabel) && isLiteralLookupQuery(debouncedQuery) ? Math.max(literalMatchPriority(debouncedQuery, r.section), literalMatchPriority(debouncedQuery, description)) : 0,
+						sourceIndex,
+						indices,
+						descriptionIndices: descriptionMatch.indices
 					};
 				});
-				items.sort((a, b) => b.score - a.score || a.label.localeCompare(b.label));
+				items.sort((a, b) => {
+					const literalDelta = b.insideLiteralPriority - a.insideLiteralPriority;
+					if (literalDelta) return literalDelta;
+					if (a.insideLiteralPriority > 0 && b.insideLiteralPriority > 0) return a.sourceIndex - b.sourceIndex;
+					return b.exactPriority - a.exactPriority || b.score - a.score || a.sourceIndex - b.sourceIndex || a.label.localeCompare(b.label);
+				});
 				if (!cancelled) {
+					if (searchCacheRef.current.size >= 20) {
+						const firstKey = searchCacheRef.current.keys().next().value;
+						if (firstKey) searchCacheRef.current.delete(firstKey);
+					}
+					searchCacheRef.current.set(cacheKey, items);
 					setResults(items);
 					setActiveIndex(0);
 					if (analytics) emitClientAnalyticsEvent({
@@ -411,6 +380,7 @@ function DocsCommandSearch({ api = "/api/docs", locale, analytics = false }) {
 					});
 				}
 			} catch {
+				if (controller.signal.aborted) return;
 				if (!cancelled && analytics) emitClientAnalyticsEvent({
 					type: "search_error",
 					locale: activeLocale,
@@ -425,6 +395,7 @@ function DocsCommandSearch({ api = "/api/docs", locale, analytics = false }) {
 		})();
 		return () => {
 			cancelled = true;
+			controller.abort();
 		};
 	}, [
 		activeLocale,
@@ -437,6 +408,8 @@ function DocsCommandSearch({ api = "/api/docs", locale, analytics = false }) {
 		else {
 			setQuery("");
 			setResults([]);
+			setFilter("all");
+			setFilterOpen(false);
 			setActiveIndex(0);
 		}
 	}, [open]);
@@ -500,9 +473,11 @@ function DocsCommandSearch({ api = "/api/docs", locale, analytics = false }) {
 		saveRecent
 	]);
 	const displayItems = useMemo(() => {
-		if (results.length > 0) return results;
-		return [];
-	}, [results]);
+		if (results.length === 0) return [];
+		if (filter === "pages") return results.filter((item) => item.type === "page");
+		if (filter === "inside") return results.filter((item) => item.type !== "page");
+		return results;
+	}, [filter, results]);
 	const recentItems = useMemo(() => {
 		if (query.trim() || results.length > 0) return [];
 		return recents.map((r) => ({
@@ -510,15 +485,27 @@ function DocsCommandSearch({ api = "/api/docs", locale, analytics = false }) {
 			label: r.label,
 			subtitle: "Recently viewed",
 			url: r.url,
-			icon: /* @__PURE__ */ jsx(FileIcon, {}),
+			type: "page",
 			score: 0,
-			indices: []
+			exactPriority: 0,
+			insideLiteralPriority: 0,
+			sourceIndex: 0,
+			indices: [],
+			descriptionIndices: []
 		}));
 	}, [
 		query,
 		results,
 		recents
 	]);
+	useEffect(() => {
+		setActiveIndex(0);
+	}, [filter, debouncedQuery]);
+	function updateFilter(nextFilter) {
+		setFilter(nextFilter);
+		setFilterOpen(false);
+		setActiveIndex(0);
+	}
 	function moveActive(delta) {
 		const total = displayItems.length + recentItems.length;
 		if (!total) return;
@@ -567,21 +554,17 @@ function DocsCommandSearch({ api = "/api/docs", locale, analytics = false }) {
 							type: "text",
 							role: "combobox",
 							"aria-expanded": "true",
-							placeholder: "Search documentation…",
+							placeholder: "Search",
 							value: query,
 							onChange: (e) => setQuery(e.target.value),
 							onKeyDown: handleKeyDown,
 							className: "omni-search-input"
 						}),
-						/* @__PURE__ */ jsx("kbd", {
-							className: "omni-kbd",
-							children: "⌘ K"
-						}),
 						/* @__PURE__ */ jsx("button", {
 							"aria-label": "Close",
 							className: "omni-close-btn",
 							onClick: () => setOpenWithAnalytics(false, "button"),
-							children: /* @__PURE__ */ jsx(CloseIcon, {})
+							children: "ESC"
 						})
 					]
 				})
@@ -603,41 +586,23 @@ function DocsCommandSearch({ api = "/api/docs", locale, analytics = false }) {
 							children: "Recent"
 						}), /* @__PURE__ */ jsx("div", {
 							className: "omni-group-items",
-							children: recentItems.map((item, i) => /* @__PURE__ */ jsxs("button", {
+							children: recentItems.map((item, i) => /* @__PURE__ */ jsx("button", {
 								"data-id": item.id,
 								role: "option",
 								"aria-selected": i === activeIndex,
 								onMouseEnter: () => setActiveIndex(i),
 								onClick: () => execute(item),
 								className: cn("omni-item", i === activeIndex && "omni-item-active"),
-								children: [
-									/* @__PURE__ */ jsx("div", {
-										className: "omni-item-icon",
-										children: item.icon
-									}),
-									/* @__PURE__ */ jsxs("div", {
-										className: "omni-item-text",
-										children: [/* @__PURE__ */ jsx("div", {
-											className: "omni-item-label",
-											children: item.label
-										}), /* @__PURE__ */ jsx("div", {
-											className: "omni-item-subtitle",
-											children: item.subtitle
-										})]
-									}),
-									/* @__PURE__ */ jsx("a", {
-										href: item.url,
-										target: "_blank",
-										rel: "noopener noreferrer",
-										className: "omni-item-ext",
-										title: "Open in new tab",
-										onClick: (e) => {
-											e.stopPropagation();
-										},
-										children: /* @__PURE__ */ jsx(ExternalLinkIcon, {})
-									}),
-									/* @__PURE__ */ jsx(ChevronRightIcon, {})
-								]
+								children: /* @__PURE__ */ jsxs("div", {
+									className: "omni-item-text",
+									children: [/* @__PURE__ */ jsx("div", {
+										className: "omni-item-subtitle",
+										children: item.subtitle
+									}), /* @__PURE__ */ jsx("div", {
+										className: "omni-item-label",
+										children: item.label
+									})]
+								})
 							}, item.id))
 						})]
 					}),
@@ -650,44 +615,36 @@ function DocsCommandSearch({ api = "/api/docs", locale, analytics = false }) {
 							className: "omni-group-items",
 							children: displayItems.map((item, i) => {
 								const idx = recentItems.length + i;
-								return /* @__PURE__ */ jsxs("button", {
+								return /* @__PURE__ */ jsx("button", {
 									"data-id": item.id,
 									role: "option",
 									"aria-selected": idx === activeIndex,
 									onMouseEnter: () => setActiveIndex(idx),
 									onClick: () => execute(item),
 									className: cn("omni-item", idx === activeIndex && "omni-item-active"),
-									children: [
-										/* @__PURE__ */ jsx("div", {
-											className: "omni-item-icon",
-											children: item.icon
-										}),
-										/* @__PURE__ */ jsxs("div", {
-											className: "omni-item-text",
-											children: [/* @__PURE__ */ jsx("div", {
+									children: /* @__PURE__ */ jsxs("div", {
+										className: "omni-item-text",
+										children: [
+											/* @__PURE__ */ jsx("div", {
+												className: "omni-item-subtitle",
+												children: item.subtitle
+											}),
+											/* @__PURE__ */ jsx("div", {
 												className: "omni-item-label",
 												children: /* @__PURE__ */ jsx(HighlightedLabel, {
 													label: item.label,
 													indices: item.indices
 												})
-											}), /* @__PURE__ */ jsx("div", {
-												className: "omni-item-subtitle",
-												children: item.subtitle
-											})]
-										}),
-										/* @__PURE__ */ jsx("a", {
-											href: item.url,
-											target: "_blank",
-											rel: "noopener noreferrer",
-											className: "omni-item-ext",
-											title: "Open in new tab",
-											onClick: (e) => {
-												e.stopPropagation();
-											},
-											children: /* @__PURE__ */ jsx(ExternalLinkIcon, {})
-										}),
-										/* @__PURE__ */ jsx(ChevronRightIcon, {})
-									]
+											}),
+											item.description && /* @__PURE__ */ jsx("div", {
+												className: "omni-item-description",
+												children: /* @__PURE__ */ jsx(HighlightedLabel, {
+													label: item.description,
+													indices: item.descriptionIndices
+												})
+											})
+										]
+									})
 								}, item.id);
 							})
 						})]
@@ -697,20 +654,20 @@ function DocsCommandSearch({ api = "/api/docs", locale, analytics = false }) {
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "omni-empty-icon",
 							children: /* @__PURE__ */ jsx(HistoryIcon, {})
-						}), debouncedQuery ? "No results found. Try a different query." : "Type to search the docs, or browse recent items."]
+						}), debouncedQuery && results.length > 0 ? `No ${FILTER_LABELS[filter].toLowerCase()} results found.` : debouncedQuery ? "No results found. Try a different query." : "Type to search the docs, or browse recent items."]
 					})
 				]
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "omni-footer",
-				children: /* @__PURE__ */ jsx("div", {
+				children: /* @__PURE__ */ jsxs("div", {
 					className: "omni-footer-inner",
-					children: /* @__PURE__ */ jsxs("div", {
+					children: [/* @__PURE__ */ jsxs("div", {
 						className: "omni-footer-hints",
 						children: [
 							/* @__PURE__ */ jsxs("span", {
 								className: "omni-footer-hint",
-								children: [/* @__PURE__ */ jsx(EnterIcon, {}), " to select"]
+								children: [/* @__PURE__ */ jsx(CornerDownLeftIcon, {}), " to select"]
 							}),
 							/* @__PURE__ */ jsxs("span", {
 								className: "omni-footer-hint",
@@ -722,10 +679,44 @@ function DocsCommandSearch({ api = "/api/docs", locale, analytics = false }) {
 							}),
 							/* @__PURE__ */ jsxs("span", {
 								className: "omni-footer-hint omni-footer-hint-desktop",
-								children: [/* @__PURE__ */ jsx(CloseIcon, {}), " to close"]
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "omni-kbd-sm",
+									children: "ESC"
+								}), " to close"]
 							})
 						]
-					})
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "omni-footer-filter",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "omni-filter-label",
+								children: "Filter"
+							}),
+							/* @__PURE__ */ jsxs("button", {
+								type: "button",
+								className: "omni-filter-button",
+								"aria-expanded": filterOpen,
+								onClick: () => setFilterOpen((value) => !value),
+								children: [FILTER_LABELS[filter], /* @__PURE__ */ jsx(ArrowDownIcon, {})]
+							}),
+							filterOpen && /* @__PURE__ */ jsx("div", {
+								className: "omni-filter-menu",
+								role: "group",
+								"aria-label": "Search filter",
+								children: [
+									"all",
+									"pages",
+									"inside"
+								].map((mode) => /* @__PURE__ */ jsx("button", {
+									type: "button",
+									"aria-pressed": filter === mode,
+									className: cn("omni-filter-option", filter === mode && "omni-filter-option-active"),
+									onClick: () => updateFilter(mode),
+									children: FILTER_LABELS[mode]
+								}, mode))
+							})
+						]
+					})]
 				})
 			})
 		]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/theme",
-  "version": "0.2.38",
+  "version": "0.2.40",
   "description": "Theme package for @farming-labs/docs — layout, provider, MDX components, and styles",
   "keywords": [
     "docs",
@@ -146,7 +146,7 @@
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
     "vitest": "^4.1.8",
-    "@farming-labs/docs": "0.2.38"
+    "@farming-labs/docs": "0.2.40"
   },
   "peerDependencies": {
     "@farming-labs/docs": ">=0.0.1",

package/styles/command-grid.css

@@ -605,6 +605,7 @@ figure.shiki:has(figcaption) > div:first-child,
 }
 
 .omni-group-label {
+  display: block !important;
   letter-spacing: 0.14em;
   color: color-mix(in srgb, var(--color-fd-foreground) 72%, transparent) !important;
 }

package/styles/omni.css

@@ -22,7 +22,7 @@
 @keyframes omni-scale-in {
   from {
     opacity: 0;
-    transform: translateX(-50%) scale(0.96) translateY(-4px);
+    transform: translateX(-50%) scale(0.98) translateY(-6px);
   }
   to {
     opacity: 1;
@@ -36,7 +36,7 @@
   }
   to {
     opacity: 0;
-    transform: translateX(-50%) scale(0.96) translateY(-4px);
+    transform: translateX(-50%) scale(0.98) translateY(-6px);
   }
 }
 
@@ -56,42 +56,40 @@
 .omni-overlay {
   position: fixed;
   inset: 0;
-  z-index: 100;
-  background: rgba(0, 0, 0, 0.55);
-  backdrop-filter: blur(4px);
+  z-index: 50;
+  background: rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(2px);
   animation: omni-fade-in 150ms ease-out;
 }
 
 .omni-content {
+  --omni-content-top: clamp(5rem, 16vh, 7rem);
   position: fixed;
-  z-index: 101;
-  top: 18%;
+  z-index: 51;
+  top: var(--omni-content-top);
   left: 50%;
   transform: translateX(-50%);
-  width: min(720px, calc(100% - 32px));
-  border-radius: var(--radius, 0.75rem);
-  border: 1px solid var(--color-fd-border, #262626);
-  background: var(--color-fd-popover, #0c0c0c);
-  color: var(--color-fd-foreground, #fafafa);
+  display: flex;
+  flex-direction: column;
+  width: min(720px, calc(100% - 1rem));
+  border-radius: 0.75rem;
+  border: 1px solid color-mix(in srgb, var(--color-fd-border, #d4d4d4) 70%, transparent);
+  background: var(--color-fd-popover, #fafafa);
+  color: var(--color-fd-popover-foreground, var(--color-fd-foreground, #272727));
   font-family: var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
       ui-sans-serif, sans-serif);
-  box-shadow:
-    0 24px 60px -12px rgba(0, 0, 0, 0.5),
-    0 0 0 1px rgba(255, 255, 255, 0.04);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
   outline: none;
-  overflow: hidden;
   overscroll-behavior: contain;
   animation: omni-scale-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 @media (max-width: 639px) {
   .omni-content {
-    top: 10%;
-    width: calc(100% - 24px);
-    max-height: 75vh;
-  }
-  .omni-kbd {
-    display: none;
+    --omni-content-top: 1rem;
+    top: var(--omni-content-top);
+    width: calc(100% - 1rem);
+    max-height: calc(100vh - 2rem);
   }
 }
 
@@ -103,54 +101,77 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.625rem 0.875rem;
+  padding: 0.75rem;
 }
 .omni-search-icon {
   color: var(--color-fd-muted-foreground, #a3a3a3);
   flex-shrink: 0;
 }
+.omni-search-icon svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
 .omni-search-input {
+  width: 0;
   flex: 1;
   background: transparent;
   outline: none;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  color: var(--color-fd-foreground, #fafafa);
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  color: var(--color-fd-popover-foreground, var(--color-fd-foreground, #272727));
   border: none;
 }
 .omni-search-input::placeholder {
   color: var(--color-fd-muted-foreground, #a3a3a3);
 }
 .omni-kbd {
-  border-radius: 0.25rem;
-  background: var(--color-fd-muted, #262626);
-  padding: 0.125rem 0.375rem;
-  font-size: 10px;
+  border-radius: 0.375rem;
+  border: 1px solid var(--color-fd-border, #d4d4d4);
+  background: transparent;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
   color: var(--color-fd-muted-foreground, #a3a3a3);
   font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
       "Liberation Mono", "Courier New", monospace);
-  line-height: 1.4;
+  line-height: 1rem;
 }
 .omni-close-btn {
-  margin-left: 0.25rem;
-  border-radius: 0.25rem;
-  padding: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  min-width: 2.5rem;
+  border-radius: 0.375rem;
+  border: 1px solid var(--color-fd-border, #d4d4d4);
+  padding: 0.375rem 0.5rem;
   color: var(--color-fd-muted-foreground, #a3a3a3);
-  transition: background 120ms;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+  transition:
+    background 120ms,
+    color 120ms;
   cursor: pointer;
-  border: none;
   background: none;
 }
 .omni-close-btn:hover {
-  background: var(--color-fd-muted, #262626);
+  color: var(--color-fd-accent-foreground, var(--color-fd-foreground, #171717));
+  background: var(--color-fd-accent, #e5e5e5);
+}
+.omni-close-btn svg {
+  display: none;
 }
 
 /* Body / listbox */
 .omni-body {
-  max-height: 60vh;
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: min(540px, calc(100vh - var(--omni-content-top, 7rem) - 8rem));
   overflow: auto;
   overscroll-behavior: contain;
-  padding: 0.25rem;
+  padding: 0.5rem;
 }
 .omni-body::-webkit-scrollbar {
   width: 6px;
@@ -168,36 +189,32 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
+  padding: 0.75rem 0.625rem;
   color: var(--color-fd-muted-foreground, #a3a3a3);
-  font-size: 0.75rem;
+  font-size: 0.875rem;
 }
 
 /* Groups */
 .omni-group {
-  padding: 0.25rem 0;
+  padding: 0;
 }
 .omni-group-label {
-  padding: 0.25rem 0.75rem;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--color-fd-muted-foreground, #a3a3a3);
-  font-weight: 500;
+  display: none;
 }
 .omni-group-items {
   display: flex;
   flex-direction: column;
+  gap: 0.25rem;
 }
 
 /* Items */
 .omni-item {
-  display: flex;
+  position: relative;
+  display: block;
   width: 100%;
-  align-items: center;
-  gap: 0.75rem;
-  border-radius: calc(var(--radius, 0.75rem) - 4px);
-  padding: 0.5rem 0.75rem;
+  flex-shrink: 0;
+  border-radius: 0.5rem;
+  padding: 0.75rem 0.875rem;
   text-align: left;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -209,10 +226,10 @@
 }
 .omni-item:hover,
 .omni-item-active {
-  background: color-mix(in srgb, var(--color-fd-accent, #262626) 60%, transparent);
+  background: var(--color-fd-accent, rgba(209, 209, 209, 0.5));
 }
 .omni-item-active {
-  color: var(--color-fd-accent-foreground, #fafafa);
+  color: var(--color-fd-accent-foreground, #171717);
 }
 .omni-item-disabled {
   opacity: 0.5;
@@ -220,51 +237,56 @@
 }
 
 .omni-item-icon {
-  flex-shrink: 0;
-  color: var(--color-fd-muted-foreground, #a3a3a3);
+  display: none;
 }
 .omni-item-active .omni-item-icon {
   color: var(--color-fd-accent-foreground, #fafafa);
 }
 .omni-item-text {
-  flex: 1;
   min-width: 0;
 }
 .omni-item-label {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: var(--color-fd-popover-foreground, var(--color-fd-foreground, #272727));
+  font-weight: 500;
+  line-height: 1.35;
 }
 .omni-item-subtitle {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 0.75rem;
+  line-height: 1rem;
   color: var(--color-fd-muted-foreground, #a3a3a3);
-  opacity: 0.8;
+  opacity: 1;
 }
 .omni-item-active .omni-item-subtitle {
-  color: var(--color-fd-accent-foreground, #fafafa);
-  opacity: 0.7;
+  color: var(--color-fd-muted-foreground, #737373);
+  opacity: 1;
+}
+.omni-item-description {
+  min-width: 0;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  margin-top: 0.625rem;
+  padding-left: 0.75rem;
+  border-left: 1px solid color-mix(in srgb, var(--color-fd-border, #d4d4d4) 70%, transparent);
+  color: color-mix(in srgb, var(--color-fd-popover-foreground, #272727) 82%, transparent);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  font-weight: 400;
 }
 .omni-item-badge {
-  color: var(--color-fd-muted-foreground, #a3a3a3);
-  flex-shrink: 0;
+  display: none;
 }
 .omni-item-ext {
-  position: relative;
-  z-index: 2;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.25rem;
-  border-radius: 0.25rem;
-  color: var(--color-fd-muted-foreground, #a3a3a3);
-  flex-shrink: 0;
-  transition:
-    color 100ms,
-    background 100ms;
-  text-decoration: none;
+  display: none;
 }
 .omni-item-ext:hover {
   color: var(--color-fd-foreground, #fafafa);
@@ -290,24 +312,16 @@
       "Liberation Mono", "Courier New", monospace);
 }
 .omni-item-chevron {
-  width: 0.875rem;
-  height: 0.875rem;
-  margin-left: 0.25rem;
-  color: var(--color-fd-muted-foreground, #a3a3a3);
-  opacity: 0;
-  transition: opacity 120ms;
-  flex-shrink: 0;
-}
-.omni-item:hover .omni-item-chevron {
-  opacity: 1;
+  display: none;
 }
-
 /* Highlight */
 .omni-highlight {
-  border-radius: 2px;
-  background: color-mix(in srgb, var(--color-fd-primary, #6366f1) 30%, transparent);
-  padding: 0 2px;
-  color: inherit;
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  color: var(--color-fd-primary, #ca8a04);
+  text-decoration: underline;
+  text-underline-offset: 2px;
 }
 
 /* Empty states */
@@ -317,7 +331,7 @@
   color: var(--color-fd-muted-foreground, #a3a3a3);
 }
 .omni-empty {
-  padding: 2rem 0.75rem;
+  padding: 1.5rem 0.75rem;
   text-align: center;
   font-size: 0.875rem;
   color: var(--color-fd-muted-foreground, #a3a3a3);
@@ -336,30 +350,105 @@
 /* Footer */
 .omni-footer {
   border-top: 1px solid var(--color-fd-border, #262626);
+  background: color-mix(in srgb, var(--color-fd-secondary, #f5f5f5) 50%, transparent);
 }
 .omni-footer-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5rem 0.75rem;
+  gap: 0.75rem;
+  padding: 0.625rem 0.75rem;
   font-size: 0.75rem;
   color: var(--color-fd-muted-foreground, #a3a3a3);
 }
 .omni-footer-hints {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  flex-wrap: wrap;
+  gap: 0.75rem;
 }
 .omni-footer-hint {
   display: flex;
   align-items: center;
   gap: 0.25rem;
+  white-space: nowrap;
+}
+.omni-footer-hint svg {
+  box-sizing: border-box;
+  width: 1.375rem;
+  height: 1.375rem;
+  padding: 0.25rem;
+  border-radius: 0.375rem;
+  border: 1px solid var(--color-fd-border, #d4d4d4);
+  background: color-mix(in srgb, var(--color-fd-muted, #e5e5e5) 70%, transparent);
+  color: var(--color-fd-muted-foreground, #737373);
+  flex-shrink: 0;
 }
 .omni-footer-hint-desktop {
   display: none;
 }
+.omni-footer-filter {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: auto;
+  white-space: nowrap;
+}
 @media (min-width: 640px) {
   .omni-footer-hint-desktop {
     display: flex;
   }
 }
+.omni-filter-label {
+  color: var(--color-fd-muted-foreground, #a3a3a3);
+}
+.omni-filter-value {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--color-fd-popover-foreground, var(--color-fd-foreground, #272727));
+}
+.omni-filter-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border: 0;
+  background: transparent;
+  color: var(--color-fd-popover-foreground, var(--color-fd-foreground, #272727));
+  font: inherit;
+  cursor: pointer;
+  padding: 0;
+}
+.omni-filter-button:hover {
+  color: var(--color-fd-accent-foreground, var(--color-fd-foreground, #171717));
+}
+.omni-filter-menu {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 0.5rem);
+  z-index: 1;
+  width: 10rem;
+  border: 1px solid var(--color-fd-border, #d4d4d4);
+  border-radius: 0.5rem;
+  background: var(--color-fd-popover, #fafafa);
+  padding: 0.25rem;
+  box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.45);
+}
+.omni-filter-option {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--color-fd-popover-foreground, var(--color-fd-foreground, #272727));
+  cursor: pointer;
+  font: inherit;
+  padding: 0.5rem 0.625rem;
+  text-align: left;
+}
+.omni-filter-option:hover,
+.omni-filter-option-active {
+  background: var(--color-fd-accent, rgba(209, 209, 209, 0.5));
+}

package/styles/pixel-border.css

@@ -965,7 +965,7 @@ hr {
 }
 
 .omni-search-input {
-  font-family: var(--fd-font-mono, ui-monospace, monospace);
+  font-family: var(--fd-font-sans, system-ui, -apple-system, sans-serif);
 }
 
 .omni-group-label {
@@ -977,6 +977,15 @@ hr {
   font-family: var(--fd-font-mono, ui-monospace, monospace);
 }
 
+.omni-footer-hint svg {
+  border-radius: 0 !important;
+}
+
+.omni-filter-menu,
+.omni-filter-option {
+  border-radius: 0 !important;
+}
+
 .omni-highlight {
   background: color-mix(in srgb, var(--color-fd-primary, #6366f1) 25%, transparent);
   border-radius: 0 !important;

package/styles/threadline.css

@@ -693,7 +693,7 @@ figure.shiki button[aria-label*="Copy"]:hover {
     inset-inline-start: var(--fd-threadline-frame-gutter) !important;
     width: var(--fd-sidebar-width, 260px) !important;
     height: calc(100vh - var(--docs-header-height, 48px)) !important;
-    z-index: 102 !important;
+    z-index: 49 !important;
     pointer-events: none !important;
   }
 
@@ -710,24 +710,19 @@ figure.shiki button[aria-label*="Copy"]:hover {
     ) !important;
     width: var(--fd-toc-width, 224px) !important;
     height: calc(100vh - var(--docs-header-height, 48px)) !important;
+    z-index: 49 !important;
     pointer-events: none !important;
   }
 
   body:has(#nd-sidebar) .omni-overlay {
-    left: calc(var(--fd-threadline-frame-gutter) + var(--fd-sidebar-width, 260px)) !important;
+    left: 0 !important;
     right: 0 !important;
     width: auto !important;
   }
 
   body:has(#nd-sidebar) .omni-content {
-    left: calc(
-      var(--fd-threadline-frame-gutter) + var(--fd-sidebar-width, 260px) +
-        (var(--fd-threadline-main-width) + var(--fd-toc-width, 224px)) / 2
-    ) !important;
-    width: min(
-      720px,
-      calc(var(--fd-threadline-main-width) + var(--fd-toc-width, 224px) - 32px)
-    ) !important;
+    left: 50% !important;
+    width: min(720px, calc(100% - 1rem)) !important;
   }
 }
 
@@ -775,6 +770,7 @@ figure.shiki button[aria-label*="Copy"]:hover {
 }
 
 .omni-group-label {
+  display: block !important;
   color: var(--muted-foreground) !important;
   font-size: 0.6875rem !important;
   font-weight: 500 !important;