@assistant-ui/docs-theme 0.0.0 → 0.0.3

package/dist/site/toc.js

@@ -0,0 +1,92 @@
+"use client";
+import { cn } from "./utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+// src/site/toc.tsx
+function headingId(url) {
+	const fragment = url.slice(1);
+	try {
+		return decodeURIComponent(fragment);
+	} catch {
+		return fragment;
+	}
+}
+function DocsTableOfContents({ items, children }) {
+	const [activeId, setActiveId] = useState(null);
+	const listRef = useRef(null);
+	useEffect(() => {
+		if (items.length === 0) return;
+		const headingIds = items.map((item) => headingId(item.url));
+		const viewport = window.matchMedia("(min-width: 1280px)");
+		let observer;
+		const observeVisibleHeadings = () => {
+			observer?.disconnect();
+			if (!viewport.matches) return;
+			observer = new IntersectionObserver((entries) => {
+				for (const entry of entries) if (entry.isIntersecting) {
+					setActiveId(entry.target.id);
+					break;
+				}
+			}, {
+				rootMargin: "-80px 0px -70% 0px",
+				threshold: 0
+			});
+			for (const id of headingIds) {
+				const element = document.getElementById(id);
+				if (element) observer.observe(element);
+			}
+		};
+		observeVisibleHeadings();
+		viewport.addEventListener("change", observeVisibleHeadings);
+		return () => {
+			observer?.disconnect();
+			viewport.removeEventListener("change", observeVisibleHeadings);
+		};
+	}, [items]);
+	useEffect(() => {
+		if (!activeId || !listRef.current) return;
+		const activeElement = Array.from(listRef.current.children).find((item) => item.getAttribute("data-toc-id") === activeId);
+		if (activeElement) activeElement.scrollIntoView({
+			behavior: "smooth",
+			block: "nearest"
+		});
+	}, [activeId]);
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "docs-toc w-56 max-xl:hidden",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "sticky top-[calc(var(--docs-header-height)_+_1rem)] flex max-h-[calc(100vh_-_var(--docs-header-height)_-_1rem)] flex-col pe-4 pt-4 pb-2",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground mb-3 shrink-0 text-xs",
+					children: "On this page"
+				}),
+				/* @__PURE__ */ jsx("ul", {
+					ref: listRef,
+					className: "flex min-h-0 flex-1 [scrollbar-width:none] flex-col gap-1 overflow-x-hidden overflow-y-auto [&::-webkit-scrollbar]:hidden",
+					children: items.map((item) => {
+						const id = headingId(item.url);
+						const isActive = activeId === id;
+						const indent = Math.max(0, item.depth - 2) * 12;
+						return /* @__PURE__ */ jsx("li", {
+							"data-toc-id": id,
+							children: /* @__PURE__ */ jsx("a", {
+								href: item.url,
+								style: { paddingLeft: indent || void 0 },
+								className: cn("block py-1 text-[13px] leading-snug wrap-break-word transition-colors", isActive ? "text-foreground font-medium" : "text-muted-foreground hover:text-foreground"),
+								children: item.title
+							})
+						}, item.url);
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "mt-6 shrink-0",
+					children
+				})
+			]
+		})
+	});
+}
+export { DocsTableOfContents };
+
+//# sourceMappingURL=toc.js.map

package/dist/site/toc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toc.js","names":[],"sources":["../../src/site/toc.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"./utils\";\n\ntype TOCItem = {\n  title: ReactNode;\n  url: string;\n  depth: number;\n};\n\nfunction headingId(url: string) {\n  const fragment = url.slice(1);\n  try {\n    return decodeURIComponent(fragment);\n  } catch {\n    return fragment;\n  }\n}\n\nexport function DocsTableOfContents({\n  items,\n  children,\n}: {\n  items: TOCItem[];\n  children?: ReactNode;\n}) {\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  useEffect(() => {\n    if (items.length === 0) return;\n\n    const headingIds = items.map((item) => headingId(item.url));\n\n    const viewport = window.matchMedia(\"(min-width: 1280px)\");\n    let observer: IntersectionObserver | undefined;\n    const observeVisibleHeadings = () => {\n      observer?.disconnect();\n      if (!viewport.matches) return;\n      observer = new IntersectionObserver(\n        (entries) => {\n          for (const entry of entries) {\n            if (entry.isIntersecting) {\n              setActiveId(entry.target.id);\n              break;\n            }\n          }\n        },\n        { rootMargin: \"-80px 0px -70% 0px\", threshold: 0 },\n      );\n      for (const id of headingIds) {\n        const element = document.getElementById(id);\n        if (element) observer.observe(element);\n      }\n    };\n    observeVisibleHeadings();\n    viewport.addEventListener(\"change\", observeVisibleHeadings);\n    return () => {\n      observer?.disconnect();\n      viewport.removeEventListener(\"change\", observeVisibleHeadings);\n    };\n  }, [items]);\n\n  useEffect(() => {\n    if (!activeId || !listRef.current) return;\n\n    const activeElement = Array.from(listRef.current.children).find(\n      (item) => item.getAttribute(\"data-toc-id\") === activeId,\n    );\n    if (activeElement) {\n      activeElement.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n      });\n    }\n  }, [activeId]);\n\n  if (items.length === 0) return null;\n\n  return (\n    <div className=\"docs-toc w-56 max-xl:hidden\">\n      <div className=\"sticky top-[calc(var(--docs-header-height)_+_1rem)] flex max-h-[calc(100vh_-_var(--docs-header-height)_-_1rem)] flex-col pe-4 pt-4 pb-2\">\n        <p className=\"text-muted-foreground mb-3 shrink-0 text-xs\">\n          On this page\n        </p>\n        <ul\n          ref={listRef}\n          className=\"flex min-h-0 flex-1 [scrollbar-width:none] flex-col gap-1 overflow-x-hidden overflow-y-auto [&::-webkit-scrollbar]:hidden\"\n        >\n          {items.map((item) => {\n            const id = headingId(item.url);\n            const isActive = activeId === id;\n            const indent = Math.max(0, item.depth - 2) * 12;\n\n            return (\n              <li key={item.url} data-toc-id={id}>\n                <a\n                  href={item.url}\n                  style={{ paddingLeft: indent || undefined }}\n                  className={cn(\n                    \"block py-1 text-[13px] leading-snug wrap-break-word transition-colors\",\n                    isActive\n                      ? \"text-foreground font-medium\"\n                      : \"text-muted-foreground hover:text-foreground\",\n                  )}\n                >\n                  {item.title}\n                </a>\n              </li>\n            );\n          })}\n        </ul>\n        <div className=\"mt-6 shrink-0\">{children}</div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAWA,SAAS,UAAU,KAAa;CAC9B,MAAM,WAAW,IAAI,MAAM,CAAC;CAC5B,IAAI;EACF,OAAO,mBAAmB,QAAQ;CACpC,QAAQ;EACN,OAAO;CACT;AACF;AAEA,SAAgB,oBAAoB,EAClC,OACA,YAIC;CACD,MAAM,CAAC,UAAU,eAAe,SAAwB,IAAI;CAC5D,MAAM,UAAU,OAAyB,IAAI;CAE7C,gBAAgB;EACd,IAAI,MAAM,WAAW,GAAG;EAExB,MAAM,aAAa,MAAM,KAAK,SAAS,UAAU,KAAK,GAAG,CAAC;EAE1D,MAAM,WAAW,OAAO,WAAW,qBAAqB;EACxD,IAAI;EACJ,MAAM,+BAA+B;GACnC,UAAU,WAAW;GACrB,IAAI,CAAC,SAAS,SAAS;GACvB,WAAW,IAAI,sBACZ,YAAY;IACX,KAAK,MAAM,SAAS,SAClB,IAAI,MAAM,gBAAgB;KACxB,YAAY,MAAM,OAAO,EAAE;KAC3B;IACF;GAEJ,GACA;IAAE,YAAY;IAAsB,WAAW;GAAE,CACnD;GACA,KAAK,MAAM,MAAM,YAAY;IAC3B,MAAM,UAAU,SAAS,eAAe,EAAE;IAC1C,IAAI,SAAS,SAAS,QAAQ,OAAO;GACvC;EACF;EACA,uBAAuB;EACvB,SAAS,iBAAiB,UAAU,sBAAsB;EAC1D,aAAa;GACX,UAAU,WAAW;GACrB,SAAS,oBAAoB,UAAU,sBAAsB;EAC/D;CACF,GAAG,CAAC,KAAK,CAAC;CAEV,gBAAgB;EACd,IAAI,CAAC,YAAY,CAAC,QAAQ,SAAS;EAEnC,MAAM,gBAAgB,MAAM,KAAK,QAAQ,QAAQ,QAAQ,CAAC,CAAC,MACxD,SAAS,KAAK,aAAa,aAAa,MAAM,QACjD;EACA,IAAI,eACF,cAAc,eAAe;GAC3B,UAAU;GACV,OAAO;EACT,CAAC;CAEL,GAAG,CAAC,QAAQ,CAAC;CAEb,IAAI,MAAM,WAAW,GAAG,OAAO;CAE/B,OACE,oBAAC,OAAD;EAAK,WAAU;EACb,UAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,oBAAC,KAAD;KAAG,WAAU;KAA8C,UAAA;IAExD,CAAA;IACH,oBAAC,MAAD;KACE,KAAK;KACL,WAAU;KAET,UAAA,MAAM,KAAK,SAAS;MACnB,MAAM,KAAK,UAAU,KAAK,GAAG;MAC7B,MAAM,WAAW,aAAa;MAC9B,MAAM,SAAS,KAAK,IAAI,GAAG,KAAK,QAAQ,CAAC,IAAI;MAE7C,OACE,oBAAC,MAAD;OAAmB,eAAa;OAC9B,UAAA,oBAAC,KAAD;QACE,MAAM,KAAK;QACX,OAAO,EAAE,aAAa,UAAU,KAAA,EAAU;QAC1C,WAAW,GACT,yEACA,WACI,gCACA,6CACN;QAEC,UAAA,KAAK;OACL,CAAA;MACD,GAbK,KAAK,GAaV;KAER,CAAC;IACC,CAAA;IACJ,oBAAC,OAAD;KAAK,WAAU;KAAiB;IAAc,CAAA;GAC3C;;CACF,CAAA;AAET"}

package/dist/site/tree.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+interface DocsNodeBase {
+    $id?: string;
+    name?: ReactNode;
+    icon?: ReactNode;
+}
+export interface DocsPage extends DocsNodeBase {
+    type: "page";
+    name: ReactNode;
+    url: string;
+}
+export interface DocsFolder extends DocsNodeBase {
+    type: "folder";
+    name: ReactNode;
+    index?: DocsPage;
+    children: DocsNode[];
+}
+export interface DocsSeparator extends DocsNodeBase {
+    type: "separator";
+}
+export type DocsNode = DocsPage | DocsFolder | DocsSeparator;
+export declare function findActivePath(nodes: readonly DocsNode[], pathname: string): DocsNode[] | null;
+export {};
+//# sourceMappingURL=tree.d.ts.map

package/dist/site/tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../src/site/tree.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,UAAU,YAAY;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AACD,MAAM,WAAW,QAAS,SAAQ,YAAY;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;CACb;AACD,MAAM,WAAW,UAAW,SAAQ,YAAY;IAC9C,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,QAAQ,EAAE,QAAQ,EAAE,CAAC;CACtB;AACD,MAAM,WAAW,aAAc,SAAQ,YAAY;IACjD,IAAI,EAAE,WAAW,CAAC;CACnB;AACD,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,aAAa,CAAC;AAE7D,wBAAgB,cAAc,CAC5B,KAAK,EAAE,SAAS,QAAQ,EAAE,EAC1B,QAAQ,EAAE,MAAM,GACf,QAAQ,EAAE,GAAG,IAAI,CASnB"}

package/dist/site/tree.js

@@ -0,0 +1,14 @@
+// src/site/tree.ts
+function findActivePath(nodes, pathname) {
+	for (const node of nodes) {
+		if (node.type === "page" && node.url === pathname) return [node];
+		if (node.type !== "folder") continue;
+		if (node.index?.url === pathname) return [node, node.index];
+		const path = findActivePath(node.children, pathname);
+		if (path) return [node, ...path];
+	}
+	return null;
+}
+export { findActivePath };
+
+//# sourceMappingURL=tree.js.map

package/dist/site/tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.js","names":[],"sources":["../../src/site/tree.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n\ninterface DocsNodeBase {\n  $id?: string;\n  name?: ReactNode;\n  icon?: ReactNode;\n}\nexport interface DocsPage extends DocsNodeBase {\n  type: \"page\";\n  name: ReactNode;\n  url: string;\n}\nexport interface DocsFolder extends DocsNodeBase {\n  type: \"folder\";\n  name: ReactNode;\n  index?: DocsPage;\n  children: DocsNode[];\n}\nexport interface DocsSeparator extends DocsNodeBase {\n  type: \"separator\";\n}\nexport type DocsNode = DocsPage | DocsFolder | DocsSeparator;\n\nexport function findActivePath(\n  nodes: readonly DocsNode[],\n  pathname: string,\n): DocsNode[] | null {\n  for (const node of nodes) {\n    if (node.type === \"page\" && node.url === pathname) return [node];\n    if (node.type !== \"folder\") continue;\n    if (node.index?.url === pathname) return [node, node.index];\n    const path = findActivePath(node.children, pathname);\n    if (path) return [node, ...path];\n  }\n  return null;\n}\n"],"mappings":";AAuBA,SAAgB,eACd,OACA,UACmB;CACnB,KAAK,MAAM,QAAQ,OAAO;EACxB,IAAI,KAAK,SAAS,UAAU,KAAK,QAAQ,UAAU,OAAO,CAAC,IAAI;EAC/D,IAAI,KAAK,SAAS,UAAU;EAC5B,IAAI,KAAK,OAAO,QAAQ,UAAU,OAAO,CAAC,MAAM,KAAK,KAAK;EAC1D,MAAM,OAAO,eAAe,KAAK,UAAU,QAAQ;EACnD,IAAI,MAAM,OAAO,CAAC,MAAM,GAAG,IAAI;CACjC;CACA,OAAO;AACT"}

package/dist/site/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const cn: (...values: (string | false | undefined)[]) => string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/site/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/site/utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,EAAE,GAAI,GAAG,QAAQ,CAAC,MAAM,GAAG,KAAK,GAAG,SAAS,CAAC,EAAE,WAC1B,CAAC"}

package/dist/site/utils.js

@@ -0,0 +1,5 @@
+// src/site/utils.ts
+const cn = (...values) => values.filter(Boolean).join(" ");
+export { cn };
+
+//# sourceMappingURL=utils.js.map

package/dist/site/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/site/utils.ts"],"sourcesContent":["export const cn = (...values: (string | false | undefined)[]) =>\n  values.filter(Boolean).join(\" \");\n"],"mappings":";AAAA,MAAa,MAAM,GAAG,WACpB,OAAO,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG"}

package/dist/ui.d.ts

@@ -0,0 +1,10 @@
+export { DocsShell, DocsContent } from "./site/layout.js";
+export { DocsPageShell, DocsBody } from "./site/page.js";
+export { DocsFooter } from "./site/footer.js";
+export { DOCS_SIDEBAR_ID, DocsSidebar, DocsSidebarProvider, useDocsSidebar, } from "./site/sidebar.js";
+export { DocsSidebarNavigation } from "./site/sidebar-navigation.js";
+export { DocsTableOfContents } from "./site/toc.js";
+export type { DocsNode, DocsPage, DocsFolder, DocsSeparator, } from "./site/tree.js";
+export { DocsSiteHeader } from "./site/header.js";
+export { DocsPagerNavigation } from "./site/pager.js";
+//# sourceMappingURL=ui.d.ts.map

package/dist/ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,yBAAsB;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,uBAAoB;AACtD,OAAO,EAAE,UAAU,EAAE,yBAAsB;AAC3C,OAAO,EACL,eAAe,EACf,WAAW,EACX,mBAAmB,EACnB,cAAc,GACf,0BAAuB;AACxB,OAAO,EAAE,qBAAqB,EAAE,qCAAkC;AAClE,OAAO,EAAE,mBAAmB,EAAE,sBAAmB;AACjD,YAAY,EACV,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,aAAa,GACd,uBAAoB;AACrB,OAAO,EAAE,cAAc,EAAE,yBAAsB;AAC/C,OAAO,EAAE,mBAAmB,EAAE,wBAAqB"}

package/dist/ui.js

@@ -0,0 +1,9 @@
+import { DocsFooter } from "./site/footer.js";
+import { DOCS_SIDEBAR_ID, DocsSidebar, DocsSidebarProvider, useDocsSidebar } from "./site/sidebar.js";
+import { DocsSiteHeader } from "./site/header.js";
+import { DocsContent, DocsShell } from "./site/layout.js";
+import { DocsBody, DocsPageShell } from "./site/page.js";
+import { DocsPagerNavigation } from "./site/pager.js";
+import { DocsSidebarNavigation } from "./site/sidebar-navigation.js";
+import { DocsTableOfContents } from "./site/toc.js";
+export { DOCS_SIDEBAR_ID, DocsBody, DocsContent, DocsFooter, DocsPageShell, DocsPagerNavigation, DocsShell, DocsSidebar, DocsSidebarNavigation, DocsSidebarProvider, DocsSiteHeader, DocsTableOfContents, useDocsSidebar };

package/package.json

@@ -1 +1,101 @@
-{"name":"@assistant-ui/docs-theme","version":"0.0.0","description":"placeholder","license":"MIT"}
+{
+  "name": "@assistant-ui/docs-theme",
+  "version": "0.0.3",
+  "description": "Composable assistant-ui documentation UI and theme for Next.js",
+  "license": "MIT",
+  "author": "AgentbaseAI Inc.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./next": {
+      "types": "./dist/next.d.ts",
+      "default": "./dist/next.js"
+    },
+    "./provider": {
+      "types": "./dist/provider.d.ts",
+      "default": "./dist/provider.js"
+    },
+    "./styles.css": "./styles/theme.css",
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "default": "./dist/ui.js"
+    },
+    "./site.css": "./styles/site.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "styles",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.2.1",
+    "lucide-react": "^1.61.0"
+  },
+  "peerDependencies": {
+    "@farming-labs/docs": "0.2.137",
+    "@farming-labs/theme": "0.2.137",
+    "fumadocs-ui": "16.17.8",
+    "next": "^16.0.0",
+    "next-themes": "^0.4.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "motion": "^14.0.0"
+  },
+  "devDependencies": {
+    "@assistant-ui/x-buildutils": "0.0.32",
+    "@farming-labs/docs": "0.2.137",
+    "@farming-labs/theme": "0.2.137",
+    "@types/node": "^26.6.5",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitest/coverage-v8": "^5.0.5",
+    "fumadocs-ui": "16.17.8",
+    "jsdom": "^30.1.3",
+    "next": "^16.4.3",
+    "next-themes": "^0.4.6",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "typescript": "^7.0.2",
+    "vitest": "^5.0.5",
+    "motion": "^14.6.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/assistant-ui/assistant-ui.git",
+    "directory": "packages/docs-theme"
+  },
+  "private": false,
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    },
+    "next-themes": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "motion": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "aui-build",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  }
+}

package/src/action-icons.tsx

@@ -0,0 +1,48 @@
+import type { ComponentProps } from "react";
+
+export const ClaudeIcon = (props: ComponentProps<"svg">) => {
+  return (
+    <svg aria-hidden="true" {...props} viewBox="0 0 24 24" fill="currentColor">
+      <path d="m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z" />
+    </svg>
+  );
+};
+
+export const McpIcon = (props: ComponentProps<"svg">) => {
+  return (
+    <svg aria-hidden="true" {...props} viewBox="0 0 180 180" fill="none">
+      <path
+        d="M18 84.8528L85.8822 16.9706C95.2548 7.59798 110.451 7.59798 119.823 16.9706C129.196 26.3431 129.196 41.5391 119.823 50.9117L68.5581 102.177"
+        stroke="currentColor"
+        strokeWidth={12}
+        strokeLinecap="round"
+      />
+      <path
+        d="M69.2652 101.47L119.823 50.9117C129.196 41.5391 144.392 41.5391 153.765 50.9117L154.118 51.2652C163.491 60.6378 163.491 75.8338 154.118 85.2063L92.7248 146.6C89.6006 149.724 89.6006 154.789 92.7248 157.913L105.331 170.52"
+        stroke="currentColor"
+        strokeWidth={12}
+        strokeLinecap="round"
+      />
+      <path
+        d="M102.853 33.9411L52.6482 84.1457C43.2756 93.5183 43.2756 108.714 52.6482 118.087C62.0208 127.459 77.2167 127.459 86.5893 118.087L136.794 67.8822"
+        stroke="currentColor"
+        strokeWidth={12}
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+};
+
+export const OpenAIIcon = (props: ComponentProps<"svg">) => {
+  return (
+    <svg
+      viewBox="0 0 256 260"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      aria-hidden="true"
+      {...props}
+    >
+      <path d="M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z" />
+    </svg>
+  );
+};

package/src/brand.tsx

@@ -0,0 +1,36 @@
+export const DocsBrand = ({ name }: DocsBrand.Props) => {
+  return (
+    <span className="aui-docs-brand">
+      <svg
+        aria-hidden="true"
+        className="aui-docs-brand-logo"
+        viewBox="40 40 24 24"
+        fill="none"
+      >
+        <path
+          d="M52.5 44C52.5 43.9005 52.4704 43.8042 52.416 43.7227L52.3535 43.6465C52.2597 43.5527 52.1325 43.5 52 43.5H44C43.7284 43.5 43.5 43.7284 43.5 44V51.3789L44.9395 49.9395L45.0498 49.8398C45.3167 49.6212 45.652 49.5 46 49.5H52C52.1326 49.5 52.2597 49.4473 52.3535 49.3535C52.4473 49.2597 52.5 49.1326 52.5 49V44ZM55.5 49C55.5 49.9283 55.131 50.8182 54.4746 51.4746C53.8182 52.131 52.9282 52.5 52 52.5H46.6211L43.0605 56.0605C42.6315 56.4895 41.9863 56.6179 41.4258 56.3857C40.8654 56.1535 40.5 55.6066 40.5 55V44C40.5 42.0716 42.0716 40.5 44 40.5H52C52.9282 40.5 53.8182 40.869 54.4746 41.5254C55.131 42.1818 55.5 43.0718 55.5 44V49Z"
+          fill="currentColor"
+        />
+        <path
+          d="M60.5 51C60.5 50.9006 60.4704 50.8042 60.416 50.7227L60.3535 50.6465C60.2597 50.5527 60.1325 50.5 60 50.5H58C57.1716 50.5 56.5 49.8284 56.5 49C56.5 48.1716 57.1716 47.5 58 47.5H60C60.9282 47.5 61.8182 47.869 62.4746 48.5254C63.131 49.1818 63.5 50.0718 63.5 51V62C63.5 62.6066 63.1346 63.1535 62.5742 63.3857C62.0137 63.6179 61.3685 63.4895 60.9395 63.0605L57.3789 59.5H52C51.0718 59.5 50.1818 59.131 49.5254 58.4746C48.869 57.8182 48.5 56.9282 48.5 56V55C48.5 54.1716 49.1716 53.5 50 53.5C50.8284 53.5 51.5 54.1716 51.5 55V56C51.5 56.1326 51.5527 56.2597 51.6465 56.3535C51.7403 56.4473 51.8674 56.5 52 56.5H58C58.3978 56.5 58.7792 56.6581 59.0605 56.9395L60.5 58.3789V51Z"
+          fill="currentColor"
+        />
+      </svg>
+      <span className="aui-docs-brand-source">assistant-ui</span>
+      {name && (
+        <>
+          <span aria-hidden="true" className="aui-docs-brand-slash">
+            /
+          </span>
+          <span className="aui-docs-brand-product">{name}</span>
+        </>
+      )}
+    </span>
+  );
+};
+
+export namespace DocsBrand {
+  export interface Props {
+    name?: string;
+  }
+}

package/src/config.ts

@@ -0,0 +1,23 @@
+import {
+  defineDocs as defineFarmingDocs,
+  type DocsConfig,
+} from "@farming-labs/docs/config";
+import { assistantUi } from "./index";
+
+export const withThemeDefaults = (options: DocsConfig): DocsConfig =>
+  defineFarmingDocs({
+    ...options,
+    theme: options.theme ?? assistantUi(),
+    sidebar:
+      options.sidebar === false
+        ? false
+        : {
+            collapsible: false,
+            flat: true,
+            folderIndexBehavior: "link",
+            ...(typeof options.sidebar === "object" ? options.sidebar : {}),
+          },
+    breadcrumb: options.breadcrumb ?? { enabled: false },
+    lastUpdated: options.lastUpdated ?? false,
+    pageActions: { copyMarkdown: false, openDocs: false },
+  });

package/src/header.test.tsx

@@ -0,0 +1,41 @@
+// @vitest-environment jsdom
+
+import { renderToStaticMarkup } from "react-dom/server";
+import { SearchProvider } from "fumadocs-ui/contexts/search";
+import { describe, expect, it } from "vitest";
+import { DocsHeader } from "./header";
+
+describe("documentation header", () => {
+  it.each(["Ctrl", "⌘"])(
+    "displays the configured %s search shortcut",
+    (modifier) => {
+      const html = renderToStaticMarkup(
+        <SearchProvider
+          preload={false}
+          hotKey={[
+            { key: "Control", display: modifier },
+            { key: "k", display: "K" },
+          ]}
+        >
+          <DocsHeader
+            brand="Project"
+            brandSlot={null}
+            homeUrl="/"
+            docsUrl="/docs"
+            name="Project"
+            links={[]}
+            themeToggle={false}
+          />
+        </SearchProvider>,
+      );
+      const container = document.createElement("div");
+      container.innerHTML = html;
+      expect(container.querySelector("kbd")?.textContent).toBe(`${modifier} K`);
+      expect(
+        container
+          .querySelector('a[href="/docs"]')
+          ?.getAttribute("aria-current"),
+      ).toBe("true");
+    },
+  );
+});

package/src/header.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import type { ReactNode } from "react";
+import Link from "next/link";
+import { Moon, Search, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useSearchContext } from "fumadocs-ui/contexts/search";
+import type { createDocsLayout } from "./next";
+
+export const DocsHeader = ({
+  brand,
+  brandSlot,
+  homeUrl,
+  docsUrl,
+  name,
+  links,
+  themeToggle,
+}: {
+  brand: ReactNode;
+  brandSlot: ReactNode;
+  homeUrl: string;
+  docsUrl: string;
+  name: string;
+  links: createDocsLayout.Options["links"];
+  themeToggle: boolean;
+}) => {
+  const { resolvedTheme, setTheme } = useTheme();
+  const { setOpenSearch, hotKey } = useSearchContext();
+  return (
+    <header className="aui-docs-header">
+      {brandSlot ? (
+        <div className="aui-docs-header-brand">{brandSlot}</div>
+      ) : (
+        <Link
+          href={homeUrl}
+          className="aui-docs-header-brand"
+          aria-label={`${name} home`}
+        >
+          {brand}
+        </Link>
+      )}
+      <div className="aui-docs-header-controls">
+        <button
+          type="button"
+          className="aui-docs-header-search"
+          aria-label="Search documentation"
+          onClick={() => setOpenSearch(true)}
+        >
+          <Search aria-hidden="true" />
+          <span>Search...</span>
+          {hotKey.length > 0 && (
+            <kbd aria-hidden="true">
+              {hotKey.map((key, index) => (
+                <span key={index}>
+                  {index > 0 && " "}
+                  {key.display}
+                </span>
+              ))}
+            </kbd>
+          )}
+        </button>
+        <nav className="aui-docs-header-links" aria-label="Site navigation">
+          <Link href={docsUrl} aria-current="true">
+            Docs
+          </Link>
+          {links?.map((link) => (
+            <a
+              key={link.href}
+              href={link.href}
+              {...(link.external
+                ? { target: "_blank", rel: "noreferrer noopener" }
+                : {})}
+            >
+              {link.label}
+            </a>
+          ))}
+        </nav>
+        {themeToggle && (
+          <button
+            type="button"
+            className="aui-docs-theme-toggle"
+            aria-label="Toggle color theme"
+            onClick={() =>
+              setTheme(resolvedTheme === "dark" ? "light" : "dark")
+            }
+          >
+            <Sun className="aui-docs-theme-sun" aria-hidden="true" />
+            <Moon className="aui-docs-theme-moon" aria-hidden="true" />
+          </button>
+        )}
+      </div>
+    </header>
+  );
+};

package/src/index.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+import { assistantUi } from "./index";
+import { withThemeDefaults } from "./config";
+
+describe("assistant-ui theme configuration", () => {
+  it("provides the complete theme and a sidebar without a collapse control", () => {
+    const config = withThemeDefaults({ entry: "guide" });
+    expect(config.entry).toBe("guide");
+    expect(config.theme?.name).toBe("assistant-ui");
+    expect(config.sidebar).toMatchObject({ collapsible: false, flat: true });
+    expect(config.pageActions).toEqual({
+      copyMarkdown: false,
+      openDocs: false,
+    });
+  });
+
+  it("merges theme overrides without losing unrelated defaults", () => {
+    const theme = assistantUi({ ui: { layout: { contentWidth: 960 } } });
+    expect(theme.ui?.layout?.contentWidth).toBe(960);
+    expect(theme.ui?.layout?.sidebarWidth).toBe(260);
+    expect(assistantUi().ui?.layout?.contentWidth).toBe(848);
+  });
+
+  it("preserves consumer configuration and explicit disabled features", () => {
+    const config = withThemeDefaults({
+      entry: "guide",
+      sidebar: false,
+      lastUpdated: true,
+      github: "https://github.com/example/project",
+      nav: { title: "Example", url: "/" },
+    });
+    expect(config.sidebar).toBe(false);
+    expect(config.lastUpdated).toBe(true);
+    expect(config.github).toBe("https://github.com/example/project");
+    expect(config.nav?.title).toBe("Example");
+  });
+});

package/src/index.ts

@@ -0,0 +1,38 @@
+import { createTheme, type DocsTheme } from "@farming-labs/docs/config";
+import { shadcn } from "@farming-labs/theme/shadcn";
+
+const createAssistantTheme = createTheme({
+  ...shadcn({
+    ui: {
+      layout: {
+        contentWidth: 848,
+        sidebarWidth: 260,
+        tocWidth: 224,
+        header: { height: 48 },
+      },
+      typography: {
+        font: {
+          style: {
+            sans: "var(--font-public-sans, ui-sans-serif), system-ui, sans-serif",
+            mono: "var(--font-jetbrains-mono, ui-monospace), monospace",
+          },
+          h1: { size: "1.5rem", weight: 500, letterSpacing: "-0.025em" },
+          h2: { size: "1.25rem", weight: 500, letterSpacing: "-0.02em" },
+          h3: { size: "1rem", weight: 500, letterSpacing: "-0.01em" },
+          body: { size: "0.875rem", lineHeight: "1.7" },
+        },
+      },
+      codeBlock: { showCopyButton: true, showLineNumbers: false },
+    },
+  }),
+  name: "assistant-ui",
+});
+
+export const assistantUi = (overrides: assistantUi.Options = {}): DocsTheme =>
+  createAssistantTheme(overrides);
+
+export namespace assistantUi {
+  export interface Options extends Partial<DocsTheme> {}
+}
+
+export { DocsBrand } from "./brand";