@farming-labs/theme 0.0.2-beta.9 → 0.0.2

package/dist/docs-command-search.mjs

@@ -0,0 +1,654 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/docs-command-search.tsx
+function cn(...classes) {
+	return classes.filter(Boolean).join(" ");
+}
+function stripHtml(html) {
+	if (typeof document !== "undefined") {
+		const el = document.createElement("div");
+		el.innerHTML = html;
+		return el.textContent || el.innerText || "";
+	}
+	return html.replace(/<[^>]+>/g, "");
+}
+function fuzzyScore(query, text) {
+	const q = query.trim().toLowerCase();
+	const t = text.toLowerCase();
+	if (!q) return {
+		score: 0,
+		indices: []
+	};
+	let score = 0;
+	const indices = [];
+	const idx = t.indexOf(q);
+	if (idx >= 0) {
+		score += 100 + Math.max(0, 20 - idx);
+		for (let i = 0; i < q.length; i++) indices.push(idx + i);
+	} else {
+		let tPos = 0;
+		let chain = 0;
+		for (let i = 0; i < q.length; i++) {
+			const found = t.indexOf(q[i], tPos);
+			if (found === -1) score -= 5;
+			else {
+				indices.push(found);
+				if (found === tPos) chain += 2;
+				else chain = 0;
+				score += 2 + chain;
+				tPos = found + 1;
+				if (found === 0 || /\s|-|_|\/|\./.test(text[found - 1])) score += 3;
+			}
+		}
+	}
+	return {
+		score,
+		indices: Array.from(new Set(indices)).sort((a, b) => a - b)
+	};
+}
+function HighlightedLabel({ label, indices }) {
+	if (!indices.length) return /* @__PURE__ */ jsx(Fragment, { 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", {
+			className: "omni-highlight",
+			children: run
+		}, `m-${pos}`));
+		pos = p - 1;
+	} else out.push(/* @__PURE__ */ jsx("span", { children: label[pos] }, `t-${pos}`));
+	return /* @__PURE__ */ jsx(Fragment, { children: out });
+}
+function SearchIcon() {
+	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("circle", {
+			cx: "11",
+			cy: "11",
+			r: "8"
+		}), /* @__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", {
+		width: "12",
+		height: "12",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		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" })]
+	});
+}
+function ArrowUpIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "12",
+		height: "12",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" })
+	});
+}
+function ArrowDownIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "12",
+		height: "12",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		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" })
+	});
+}
+function LoaderIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "12",
+		height: "12",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: "omni-spin",
+		children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+	});
+}
+function HistoryIcon() {
+	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: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+			/* @__PURE__ */ jsx("path", { d: "M3 3v5h5" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 7v5l4 2" })
+		]
+	});
+}
+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
+* fuzzy-search experience. Styled entirely via omni-* CSS classes
+* so each theme provides its own visual variant.
+*/
+function DocsCommandSearch() {
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useState("");
+	const [debouncedQuery, setDebouncedQuery] = useState("");
+	const [results, setResults] = useState([]);
+	const [loading, setLoading] = useState(false);
+	const [activeIndex, setActiveIndex] = useState(0);
+	const [recents, setRecents] = useState([]);
+	const [mounted, setMounted] = useState(false);
+	const inputRef = useRef(null);
+	const listRef = useRef(null);
+	useEffect(() => {
+		setMounted(true);
+		try {
+			const raw = localStorage.getItem("fd:omni:recents");
+			if (raw) setRecents(JSON.parse(raw));
+		} catch {}
+	}, []);
+	useEffect(() => {
+		const id = setTimeout(() => setDebouncedQuery(query), 150);
+		return () => clearTimeout(id);
+	}, [query]);
+	useEffect(() => {
+		function handler(e) {
+			if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+				e.preventDefault();
+				e.stopPropagation();
+				e.stopImmediatePropagation();
+				setOpen(true);
+			}
+		}
+		document.addEventListener("keydown", handler, true);
+		return () => document.removeEventListener("keydown", handler, true);
+	}, []);
+	useEffect(() => {
+		function handler(e) {
+			const button = e.target.closest("button");
+			if (!button) return;
+			const text = button.textContent || "";
+			const ariaLabel = (button.getAttribute("aria-label") || "").toLowerCase();
+			if (text.includes("Search") && (text.includes("⌘") || text.includes("K")) || ariaLabel.includes("search") || text === "Open Search") {
+				e.preventDefault();
+				e.stopPropagation();
+				e.stopImmediatePropagation();
+				setOpen(true);
+			}
+		}
+		document.addEventListener("click", handler, true);
+		return () => document.removeEventListener("click", handler, true);
+	}, []);
+	useEffect(() => {
+		if (!debouncedQuery.trim()) {
+			setResults([]);
+			setActiveIndex(0);
+			return;
+		}
+		let cancelled = false;
+		setLoading(true);
+		(async () => {
+			try {
+				const res = await fetch(`/api/docs?query=${encodeURIComponent(debouncedQuery)}`);
+				if (!res.ok || cancelled) return;
+				const items = (await res.json()).map((r) => {
+					const label = stripHtml(r.content);
+					const { score, indices } = fuzzyScore(debouncedQuery, label);
+					return {
+						id: r.id,
+						label,
+						subtitle: labelForType(r.type),
+						url: r.url,
+						icon: iconForType(r.type),
+						score,
+						indices
+					};
+				});
+				items.sort((a, b) => b.score - a.score || a.label.localeCompare(b.label));
+				if (!cancelled) {
+					setResults(items);
+					setActiveIndex(0);
+				}
+			} catch {}
+			if (!cancelled) setLoading(false);
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [debouncedQuery]);
+	useEffect(() => {
+		if (open) setTimeout(() => inputRef.current?.focus(), 10);
+		else {
+			setQuery("");
+			setResults([]);
+			setActiveIndex(0);
+		}
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		function handler(e) {
+			if (e.key === "Escape") setOpen(false);
+		}
+		document.addEventListener("keydown", handler);
+		return () => document.removeEventListener("keydown", handler);
+	}, [open]);
+	const saveRecent = useCallback((item) => {
+		try {
+			const entry = {
+				id: item.id,
+				label: item.label,
+				url: item.url
+			};
+			const next = [entry, ...recents.filter((r) => r.id !== entry.id)].slice(0, 8);
+			setRecents(next);
+			localStorage.setItem("fd:omni:recents", JSON.stringify(next));
+		} catch {}
+	}, [recents]);
+	const execute = useCallback((item) => {
+		saveRecent(item);
+		setOpen(false);
+		if (item.url.startsWith("http")) window.open(item.url, "_blank", "noopener");
+		else window.location.href = item.url;
+	}, [saveRecent]);
+	const displayItems = useMemo(() => {
+		if (results.length > 0) return results;
+		return [];
+	}, [results]);
+	const recentItems = useMemo(() => {
+		if (query.trim() || results.length > 0) return [];
+		return recents.map((r) => ({
+			id: r.id,
+			label: r.label,
+			subtitle: "Recently viewed",
+			url: r.url,
+			icon: /* @__PURE__ */ jsx(FileIcon, {}),
+			score: 0,
+			indices: []
+		}));
+	}, [
+		query,
+		results,
+		recents
+	]);
+	function moveActive(delta) {
+		const total = displayItems.length + recentItems.length;
+		if (!total) return;
+		let next = activeIndex + delta;
+		if (next < 0) next = total - 1;
+		if (next >= total) next = 0;
+		setActiveIndex(next);
+		const allItems = [...recentItems, ...displayItems];
+		(listRef.current?.querySelector(`[data-id="${allItems[next]?.id}"]`))?.scrollIntoView({ block: "nearest" });
+	}
+	function handleKeyDown(e) {
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			moveActive(1);
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			moveActive(-1);
+		} else if (e.key === "Enter") {
+			e.preventDefault();
+			const allItems = [...recentItems, ...displayItems];
+			if (allItems[activeIndex]) execute(allItems[activeIndex]);
+		}
+	}
+	if (!mounted || !open) return null;
+	const allItems = [...recentItems, ...displayItems];
+	return createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "omni-overlay",
+		onClick: () => setOpen(false)
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "omni-content",
+		role: "dialog",
+		"aria-label": "Search documentation",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "omni-header",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "omni-search-row",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "omni-search-icon",
+							children: /* @__PURE__ */ jsx(SearchIcon, {})
+						}),
+						/* @__PURE__ */ jsx("input", {
+							ref: inputRef,
+							type: "text",
+							role: "combobox",
+							"aria-expanded": "true",
+							placeholder: "Search documentation…",
+							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: () => setOpen(false),
+							children: /* @__PURE__ */ jsx(CloseIcon, {})
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "omni-body",
+				ref: listRef,
+				role: "listbox",
+				"aria-label": "Search results",
+				children: [
+					loading && /* @__PURE__ */ jsxs("div", {
+						className: "omni-loading",
+						children: [/* @__PURE__ */ jsx(LoaderIcon, {}), " Searching…"]
+					}),
+					recentItems.length > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "omni-group",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "omni-group-label",
+							children: "Recent"
+						}), /* @__PURE__ */ jsx("div", {
+							className: "omni-group-items",
+							children: recentItems.map((item, i) => /* @__PURE__ */ jsxs("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, {})
+								]
+							}, item.id))
+						})]
+					}),
+					displayItems.length > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "omni-group",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "omni-group-label",
+							children: "Documentation"
+						}), /* @__PURE__ */ jsx("div", {
+							className: "omni-group-items",
+							children: displayItems.map((item, i) => {
+								const idx = recentItems.length + i;
+								return /* @__PURE__ */ jsxs("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", {
+												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.id);
+							})
+						})]
+					}),
+					allItems.length === 0 && !loading && /* @__PURE__ */ jsxs("div", {
+						className: "omni-empty",
+						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."]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "omni-footer",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "omni-footer-inner",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "omni-footer-hints",
+						children: [
+							/* @__PURE__ */ jsxs("span", {
+								className: "omni-footer-hint",
+								children: [/* @__PURE__ */ jsx(EnterIcon, {}), " to select"]
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "omni-footer-hint",
+								children: [
+									/* @__PURE__ */ jsx(ArrowUpIcon, {}),
+									/* @__PURE__ */ jsx(ArrowDownIcon, {}),
+									" to navigate"
+								]
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "omni-footer-hint omni-footer-hint-desktop",
+								children: [/* @__PURE__ */ jsx(CloseIcon, {}), " to close"]
+							})
+						]
+					})
+				})
+			})
+		]
+	})] }), document.body);
+}
+
+//#endregion
+export { DocsCommandSearch };

package/dist/docs-layout.d.mts

@@ -14,20 +14,29 @@ import { DocsConfig } from "@farming-labs/docs";
  * export const metadata = createDocsMetadata(docsConfig);
  * ```
  */
-declare function createDocsMetadata(config: DocsConfig): {
-  twitter?: {
-    card: "summary" | "summary_large_image";
-  } | undefined;
-  description?: string | undefined;
-  title: {
-    template: string;
-    default: string;
-  };
-};
+declare function createDocsMetadata(config: DocsConfig): Record<string, unknown>;
+/**
+ * Generate page-level metadata with dynamic OG images.
+ *
+ * Usage in a docs page or [[...slug]] route:
+ * ```ts
+ * export function generateMetadata({ params }) {
+ *   const page = getPage(params.slug);
+ *   return createPageMetadata(docsConfig, {
+ *     title: page.data.title,
+ *     description: page.data.description,
+ *   });
+ * }
+ * ```
+ */
+declare function createPageMetadata(config: DocsConfig, page: {
+  title: string;
+  description?: string;
+}): Record<string, unknown>;
 declare function createDocsLayout(config: DocsConfig): ({
   children
 }: {
   children: ReactNode;
 }) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { createDocsLayout, createDocsMetadata };
+export { createDocsLayout, createDocsMetadata, createPageMetadata };