@farming-labs/theme 0.0.7 → 0.0.9-beta.1

package/dist/docs-layout.mjs

@@ -424,8 +424,9 @@ function createDocsLayout(config) {
 	const githubUrl = typeof githubRaw === "string" ? githubRaw.replace(/\/$/, "") : githubRaw?.url.replace(/\/$/, "");
 	const githubBranch = typeof githubRaw === "object" ? githubRaw.branch ?? "main" : "main";
 	const githubDirectory = typeof githubRaw === "object" ? githubRaw.directory?.replace(/^\/|\/$/g, "") : void 0;
+	const staticExport = !!config.staticExport;
 	const aiConfig = config.ai;
-	const aiEnabled = !!aiConfig?.enabled;
+	const aiEnabled = !staticExport && !!aiConfig?.enabled;
 	const aiMode = aiConfig?.mode ?? "search";
 	const aiPosition = aiConfig?.position ?? "bottom-right";
 	const aiFloatingStyle = aiConfig?.floatingStyle ?? "panel";
@@ -465,7 +466,7 @@ function createDocsLayout(config) {
 				/* @__PURE__ */ jsx(TypographyStyle, { typography }),
 				/* @__PURE__ */ jsx(LayoutStyle, { layout: layoutDimensions }),
 				forcedTheme && /* @__PURE__ */ jsx(ForcedThemeScript, { theme: forcedTheme }),
-				/* @__PURE__ */ jsx(DocsCommandSearch, {}),
+				!staticExport && /* @__PURE__ */ jsx(DocsCommandSearch, {}),
 				aiEnabled && /* @__PURE__ */ jsx(DocsAIFeatures, {
 					mode: aiMode,
 					position: aiPosition,

package/dist/mdx-img.d.mts

@@ -0,0 +1,9 @@
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import Image from "next/image";
+
+//#region src/mdx-img.d.ts
+type ImgProps = ComponentProps<typeof Image>;
+declare function MDXImg(props: ImgProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { MDXImg };

package/dist/mdx-img.mjs

@@ -0,0 +1,33 @@
+"use client";
+
+import { jsx } from "react/jsx-runtime";
+import Image from "next/image";
+
+//#region src/mdx-img.tsx
+/**
+* MDX image component that works with ![alt](url) when width/height are not provided.
+* Fumadocs-ui's default img uses Next.js Image which requires width and height;
+* markdown image syntax cannot provide these. This override uses unoptimized Image
+* with default dimensions when missing, so external (e.g. GitHub) images work.
+*/
+const DEFAULT_WIDTH = 800;
+const DEFAULT_HEIGHT = 600;
+function MDXImg(props) {
+	const { src, alt = "", width, height, style, ...rest } = props;
+	return /* @__PURE__ */ jsx(Image, {
+		src,
+		alt,
+		width: width != null ? Number(width) : DEFAULT_WIDTH,
+		height: height != null ? Number(height) : DEFAULT_HEIGHT,
+		unoptimized: !(width != null && height != null),
+		style: {
+			maxWidth: "100%",
+			height: "auto",
+			...style
+		},
+		...rest
+	});
+}
+
+//#endregion
+export { MDXImg };

package/dist/mdx.d.mts

@@ -1,3 +1,4 @@
+import { MDXImg } from "./mdx-img.mjs";
 import * as react from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
@@ -8,6 +9,7 @@ import * as fumadocs_ui_components_callout0 from "fumadocs-ui/components/callout
 
 //#region src/mdx.d.ts
 declare const extendedMdxComponents: {
+  img: typeof MDXImg;
   Tab: typeof Tab;
   Tabs: typeof Tabs;
   CodeBlockTab: typeof fumadocs_ui_components_codeblock0.CodeBlockTab;
@@ -18,9 +20,6 @@ declare const extendedMdxComponents: {
   Card: typeof fumadocs_ui_components_card0.Card;
   Cards: typeof fumadocs_ui_components_card0.Cards;
   a: react.FC<react.AnchorHTMLAttributes<HTMLAnchorElement>>;
-  img: (props: react.ImgHTMLAttributes<HTMLImageElement> & {
-    sizes?: string;
-  }) => react_jsx_runtime0.JSX.Element;
   h1: (props: react.HTMLAttributes<HTMLHeadingElement>) => react_jsx_runtime0.JSX.Element;
   h2: (props: react.HTMLAttributes<HTMLHeadingElement>) => react_jsx_runtime0.JSX.Element;
   h3: (props: react.HTMLAttributes<HTMLHeadingElement>) => react_jsx_runtime0.JSX.Element;

package/dist/mdx.mjs

@@ -1,3 +1,4 @@
+import { MDXImg } from "./mdx-img.mjs";
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 import defaultMdxComponents from "fumadocs-ui/mdx";
 
@@ -7,12 +8,15 @@ import defaultMdxComponents from "fumadocs-ui/mdx";
 *
 * Includes all default MDX components (headings, code blocks, callouts, cards)
 * plus Tabs/Tab for tabbed content and InstallTabs for package manager tabs.
+* Overrides `img` so that ![alt](url) in markdown works without width/height
+* (uses Next Image with unoptimized + default dimensions for external URLs).
 *
 * Usage in mdx-components.tsx:
 *   import { getMDXComponents } from "@farming-labs/theme/mdx";
 */
 const extendedMdxComponents = {
 	...defaultMdxComponents,
+	img: MDXImg,
 	Tab,
 	Tabs
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/theme",
-  "version": "0.0.7",
+  "version": "0.0.9-beta.1",
   "description": "Theme package for @farming-labs/docs — layout, provider, MDX components, and styles",
   "keywords": [
     "docs",
@@ -103,7 +103,7 @@
     "next": ">=14.0.0",
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
-    "@farming-labs/docs": "0.0.7"
+    "@farming-labs/docs": "0.0.9-beta.1"
   },
   "peerDependencies": {
     "@farming-labs/docs": ">=0.0.1",

package/styles/colorful.css

@@ -122,6 +122,124 @@
   --color-fd-muted-foreground: hsl(0, 0%, 72%);
 }
 
+/* ─── Sidebar AI trigger (sidebar-icon mode) — search + Ask AI row ─────
+ * Use !important where base.css would otherwise win (e.g. background). */
+.fd-ai-model-dropdown-menu {
+  box-shadow: none !important;
+}
+.fd-ai-model-dropdown-item {
+  padding: 6px 10px !important;
+  border: none !important;
+  border-radius: var(--radius, 8px) !important;
+}
+.fd-sidebar-search-ai-row {
+  display: flex !important;
+  gap: 10px !important;
+  align-items: stretch !important;
+  width: 100% !important;
+  margin-bottom: 2px;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-search-btn {
+  flex: 1 !important;
+  min-width: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+  padding: 6px 12px !important;
+  font-size: 0.875rem !important;
+  color: var(--color-fd-muted-foreground) !important;
+  background: transparent !important;
+  border: 1px solid var(--color-fd-border) !important;
+  border-radius: 8px !important;
+  cursor: pointer;
+  transition: background-color 150ms, border-color 150ms, color 150ms;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-search-btn:hover {
+  background: var(--color-fd-accent) !important;
+  color: var(--color-fd-foreground) !important;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-search-btn svg {
+  flex-shrink: 0 !important;
+  width: 16px !important;
+  height: 16px !important;
+}
+
+.fd-sidebar-search-ai-row .fd-sidebar-search-kbd {
+  display: flex !important;
+  gap: 2px !important;
+  margin-left: auto !important;
+  font-size: 0.75rem !important;
+  opacity: 0.8;
+}
+
+.fd-sidebar-search-ai-row .fd-sidebar-search-kbd kbd {
+  font-family: inherit !important;
+  font-size: 0.7rem !important;
+  padding: 2px 5px !important;
+  border: 1px solid var(--color-fd-border) !important;
+  border-radius: 4px !important;
+  background: var(--color-fd-muted) !important;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-ai-btn {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 38px !important;
+  min-width: 38px !important;
+  flex-shrink: 0 !important;
+  border-radius: 8px !important;
+  border: 1px solid var(--color-fd-border) !important;
+  background: transparent !important;
+  color: var(--color-fd-muted-foreground) !important;
+  cursor: pointer;
+  transition: background-color 150ms, color 150ms, border-color 150ms;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-ai-btn:hover {
+  background: var(--color-fd-accent) !important;
+  color: var(--color-fd-primary) !important;
+  border-color: var(--color-fd-primary) !important;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-ai-btn svg {
+  width: 16px !important;
+  height: 16px !important;
+}
+
+/* Dark mode: .dark can be on html or body; row may be inside or outside .fd-sidebar */
+.dark .fd-sidebar-search-ai-row > .fd-sidebar-search-btn {
+  background: hsl(0 0% 18%) !important;
+  border-color: hsl(0 0% 28%) !important;
+  color: hsl(0 0% 72%) !important;
+}
+
+.dark .fd-sidebar-search-ai-row > .fd-sidebar-search-btn:hover {
+  background: hsl(0 0% 24%) !important;
+  color: hsl(0 0% 95%) !important;
+}
+
+.dark .fd-sidebar-search-ai-row .fd-sidebar-search-kbd kbd {
+  background: hsl(0 0% 22%) !important;
+  border-color: hsl(0 0% 28%) !important;
+  color: hsl(0 0% 72%) !important;
+}
+
+.dark .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn {
+  background: hsl(0 0% 18%) !important;
+  border-color: hsl(0 0% 28%) !important;
+  color: hsl(0 0% 72%) !important;
+}
+
+.dark .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn:hover {
+  background: hsl(0 0% 24%) !important;
+  color: hsl(45 100% 60%) !important;
+  border-color: hsl(45 100% 60%) !important;
+}
+
 /* ─── Cards (fumadocs style) ────────────────────────────────────────── */
 
 .fd-card {

package/styles/default.css

@@ -92,6 +92,127 @@
   border-radius: 4px;
 }
 
+/* ─── AI model dropdown (default) ────────────────────────────────── */
+
+.fd-ai-model-dropdown-menu {
+  box-shadow: none !important;
+}
+
+.fd-ai-model-dropdown-item {
+  padding: 6px 10px !important;
+  border: none !important;
+  border-radius: var(--radius, 8px) !important;
+}
+
+/* ─── Sidebar AI trigger (sidebar-icon mode) — search + Ask AI row ───── */
+
+.fd-sidebar-search-ai-row {
+  display: flex !important;
+  gap: 10px !important;
+  align-items: stretch !important;
+  width: 100% !important;
+  margin-bottom: 2px;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-search-btn {
+  flex: 1 !important;
+  min-width: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+  padding: 8px 12px !important;
+  font-size: 0.875rem !important;
+  color: var(--color-fd-muted-foreground) !important;
+  background: transparent !important;
+  border: 1px solid var(--color-fd-border) !important;
+  border-radius: 8px !important;
+  cursor: pointer;
+  transition: background-color 150ms, border-color 150ms, color 150ms;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-search-btn:hover {
+  background: var(--color-fd-accent) !important;
+  color: var(--color-fd-foreground) !important;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-search-btn svg {
+  flex-shrink: 0 !important;
+  width: 16px !important;
+  height: 16px !important;
+}
+
+.fd-sidebar-search-ai-row .fd-sidebar-search-kbd {
+  display: flex !important;
+  gap: 2px !important;
+  margin-left: auto !important;
+  font-size: 0.75rem !important;
+  opacity: 0.8;
+}
+
+.fd-sidebar-search-ai-row .fd-sidebar-search-kbd kbd {
+  font-family: inherit !important;
+  font-size: 0.7rem !important;
+  padding: 2px 5px !important;
+  border: 1px solid var(--color-fd-border) !important;
+  border-radius: 4px !important;
+  background: var(--color-fd-muted) !important;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-ai-btn {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 38px !important;
+  min-width: 38px !important;
+  flex-shrink: 0 !important;
+  border-radius: 8px !important;
+  border: 1px solid var(--color-fd-border) !important;
+  background: transparent !important;
+  color: var(--color-fd-muted-foreground) !important;
+  cursor: pointer;
+  transition: background-color 150ms, color 150ms, border-color 150ms;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-ai-btn:hover {
+  background: var(--color-fd-accent) !important;
+  color: var(--color-fd-primary) !important;
+  border-color: var(--color-fd-primary) !important;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-ai-btn svg {
+  width: 16px !important;
+  height: 16px !important;
+}
+
+.dark .fd-sidebar-search-ai-row > .fd-sidebar-search-btn {
+  background: hsl(0 0% 18%) !important;
+  border-color: hsl(0 0% 28%) !important;
+  color: hsl(0 0% 72%) !important;
+}
+
+.dark .fd-sidebar-search-ai-row > .fd-sidebar-search-btn:hover {
+  background: hsl(0 0% 24%) !important;
+  color: hsl(0 0% 95%) !important;
+}
+
+.dark .fd-sidebar-search-ai-row .fd-sidebar-search-kbd kbd {
+  background: hsl(0 0% 22%) !important;
+  border-color: hsl(0 0% 28%) !important;
+  color: hsl(0 0% 72%) !important;
+}
+
+.dark .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn {
+  background: hsl(0 0% 18%) !important;
+  border-color: hsl(0 0% 28%) !important;
+  color: hsl(0 0% 72%) !important;
+}
+
+.dark .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn:hover {
+  background: hsl(0 0% 24%) !important;
+  color: var(--color-fd-primary) !important;
+  border-color: var(--color-fd-primary) !important;
+}
+
 /* ─── Omni Command Palette (default theme) ──────────────────────── */
 
 .omni-content {

package/styles/shiny.css

@@ -163,6 +163,127 @@
   border-radius: 6px;
 }
 
+/* ─── AI model dropdown (shiny) ──────────────────────────────────────── */
+
+.fd-ai-model-dropdown-menu {
+  box-shadow: none !important;
+}
+
+.fd-ai-model-dropdown-item {
+  padding: 6px 10px !important;
+  border: none !important;
+  border-radius: var(--radius, 8px) !important;
+}
+
+/* ─── Sidebar AI trigger (sidebar-icon mode) — search + Ask AI row ───── */
+
+.fd-sidebar-search-ai-row {
+  display: flex !important;
+  gap: 10px !important;
+  align-items: stretch !important;
+  width: 100% !important;
+  margin-bottom: 2px;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-search-btn {
+  flex: 1 !important;
+  min-width: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+  padding: 8px 12px !important;
+  font-size: 0.875rem !important;
+  color: var(--color-fd-muted-foreground) !important;
+  background: transparent !important;
+  border: 1px solid var(--color-fd-border) !important;
+  border-radius: 8px !important;
+  cursor: pointer;
+  transition: background-color 150ms, border-color 150ms, color 150ms;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-search-btn:hover {
+  background: var(--color-fd-accent) !important;
+  color: var(--color-fd-foreground) !important;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-search-btn svg {
+  flex-shrink: 0 !important;
+  width: 16px !important;
+  height: 16px !important;
+}
+
+.fd-sidebar-search-ai-row .fd-sidebar-search-kbd {
+  display: flex !important;
+  gap: 2px !important;
+  margin-left: auto !important;
+  font-size: 0.75rem !important;
+  opacity: 0.8;
+}
+
+.fd-sidebar-search-ai-row .fd-sidebar-search-kbd kbd {
+  font-family: inherit !important;
+  font-size: 0.7rem !important;
+  padding: 2px 5px !important;
+  border: 1px solid var(--color-fd-border) !important;
+  border-radius: 4px !important;
+  background: var(--color-fd-muted) !important;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-ai-btn {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 38px !important;
+  min-width: 38px !important;
+  flex-shrink: 0 !important;
+  border-radius: 8px !important;
+  border: 1px solid var(--color-fd-border) !important;
+  background: transparent !important;
+  color: var(--color-fd-muted-foreground) !important;
+  cursor: pointer;
+  transition: background-color 150ms, color 150ms, border-color 150ms;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-ai-btn:hover {
+  background: var(--color-fd-accent) !important;
+  color: var(--color-fd-primary) !important;
+  border-color: var(--color-fd-primary) !important;
+}
+
+.fd-sidebar-search-ai-row > .fd-sidebar-ai-btn svg {
+  width: 16px !important;
+  height: 16px !important;
+}
+
+.dark .fd-sidebar-search-ai-row > .fd-sidebar-search-btn {
+  background: var(--color-fd-secondary) !important;
+  border-color: var(--color-fd-border) !important;
+  color: var(--color-fd-muted-foreground) !important;
+}
+
+.dark .fd-sidebar-search-ai-row > .fd-sidebar-search-btn:hover {
+  background: var(--color-fd-accent) !important;
+  color: var(--color-fd-foreground) !important;
+}
+
+.dark .fd-sidebar-search-ai-row .fd-sidebar-search-kbd kbd {
+  background: var(--color-fd-muted) !important;
+  border-color: var(--color-fd-border) !important;
+  color: var(--color-fd-muted-foreground) !important;
+}
+
+.dark .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn {
+  background: var(--color-fd-secondary) !important;
+  border-color: var(--color-fd-border) !important;
+  color: var(--color-fd-muted-foreground) !important;
+}
+
+.dark .fd-sidebar-search-ai-row > .fd-sidebar-ai-btn:hover {
+  background: var(--color-fd-accent) !important;
+  color: var(--color-fd-primary) !important;
+  border-color: var(--color-fd-primary) !important;
+}
+
 /* ─── Sidebar shiny overrides ────────────────────────────────────────── */
 
 :root .fd-sidebar {