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

package/dist/code-block-copy-wrapper.d.mts

@@ -0,0 +1,13 @@
+import * as React$1 from "react";
+import { CodeBlockCopyData } from "@farming-labs/docs";
+
+//#region src/code-block-copy-wrapper.d.ts
+type PreProps = React$1.ComponentPropsWithoutRef<"pre">;
+/**
+ * Creates a wrapper around the default MDX `pre` component that calls
+ * `onCopyClick` when the user clicks the code block's copy button.
+ * The actual copy-to-clipboard is still done by the default component.
+ */
+declare function createPreWithCopyCallback(DefaultPre: React$1.ComponentType<PreProps> | "pre", onCopyClick?: (data: CodeBlockCopyData) => void): React$1.ComponentType<PreProps>;
+//#endregion
+export { createPreWithCopyCallback };

package/dist/code-block-copy-wrapper.mjs

@@ -0,0 +1,50 @@
+"use client";
+
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/code-block-copy-wrapper.tsx
+/**
+* Creates a wrapper around the default MDX `pre` component that calls
+* `onCopyClick` when the user clicks the code block's copy button.
+* The actual copy-to-clipboard is still done by the default component.
+*/
+function createPreWithCopyCallback(DefaultPre, onCopyClick) {
+	if (!onCopyClick) return typeof DefaultPre === "string" ? DefaultPre : DefaultPre;
+	function PreWithCopyCallback(props) {
+		const ref = React$1.useRef(null);
+		React$1.useEffect(() => {
+			const wrapper = ref.current;
+			if (!wrapper) return;
+			const figure = wrapper.closest("figure");
+			if (!figure) return;
+			const handleClick = (e) => {
+				if (!e.target.closest?.("button")) return;
+				const code = figure.querySelector("pre")?.querySelector("code");
+				if (!code) return;
+				const content = code.textContent ?? "";
+				const url = typeof window !== "undefined" ? window.location.href : "";
+				const language = code.getAttribute("data-language") ?? figure.getAttribute("data-language") ?? void 0;
+				onCopyClick({
+					title: figure.querySelector("[data-title]")?.textContent?.trim() ?? figure.querySelector(".fd-codeblock-title-text")?.textContent?.trim() ?? void 0,
+					content,
+					url,
+					language
+				});
+			};
+			figure.addEventListener("click", handleClick, true);
+			return () => figure.removeEventListener("click", handleClick, true);
+		}, [onCopyClick]);
+		const Pre = DefaultPre;
+		return /* @__PURE__ */ jsx("div", {
+			ref,
+			"data-fd-copy-wrapper": true,
+			style: { display: "contents" },
+			children: typeof Pre === "string" ? /* @__PURE__ */ jsx("pre", { ...props }) : /* @__PURE__ */ jsx(Pre, { ...props })
+		});
+	}
+	return PreWithCopyCallback;
+}
+
+//#endregion
+export { createPreWithCopyCallback };

package/dist/docs-layout.mjs

@@ -452,54 +452,58 @@ function createDocsLayout(config) {
 			collapsible: sidebarProps.collapsible !== false,
 			flat: !!sidebarFlat
 		});
-		return /* @__PURE__ */ jsxs(DocsLayout, {
-			tree,
-			nav: {
-				title: navTitle,
-				url: navUrl
-			},
-			themeSwitch,
-			sidebar: finalSidebarProps,
-			...aiMode === "sidebar-icon" && aiEnabled ? { searchToggle: { components: { lg: /* @__PURE__ */ jsx(SidebarSearchWithAI, {}) } } } : {},
-			children: [
-				/* @__PURE__ */ jsx(ColorStyle, { colors }),
-				/* @__PURE__ */ jsx(TypographyStyle, { typography }),
-				/* @__PURE__ */ jsx(LayoutStyle, { layout: layoutDimensions }),
-				forcedTheme && /* @__PURE__ */ jsx(ForcedThemeScript, { theme: forcedTheme }),
-				!staticExport && /* @__PURE__ */ jsx(DocsCommandSearch, {}),
-				aiEnabled && /* @__PURE__ */ jsx(DocsAIFeatures, {
-					mode: aiMode,
-					position: aiPosition,
-					floatingStyle: aiFloatingStyle,
-					triggerComponentHtml: aiTriggerComponentHtml,
-					suggestedQuestions: aiSuggestedQuestions,
-					aiLabel,
-					loaderVariant: aiLoaderVariant,
-					loadingComponentHtml: aiLoadingComponentHtml,
-					models: aiModels,
-					defaultModelId: aiDefaultModelId
-				}),
-				/* @__PURE__ */ jsx(DocsPageClient, {
-					tocEnabled,
-					tocStyle,
-					breadcrumbEnabled,
-					entry: config.entry,
-					copyMarkdown: copyMarkdownEnabled,
-					openDocs: openDocsEnabled,
-					openDocsProviders,
-					pageActionsPosition,
-					pageActionsAlignment,
-					githubUrl,
-					githubBranch,
-					githubDirectory,
-					lastModifiedMap,
-					lastUpdatedEnabled,
-					lastUpdatedPosition,
-					llmsTxtEnabled,
-					descriptionMap,
-					children
-				})
-			]
+		return /* @__PURE__ */ jsx("div", {
+			id: "nd-docs-layout",
+			style: { display: "contents" },
+			children: /* @__PURE__ */ jsxs(DocsLayout, {
+				tree,
+				nav: {
+					title: navTitle,
+					url: navUrl
+				},
+				themeSwitch,
+				sidebar: finalSidebarProps,
+				...aiMode === "sidebar-icon" && aiEnabled ? { searchToggle: { components: { lg: /* @__PURE__ */ jsx(SidebarSearchWithAI, {}) } } } : {},
+				children: [
+					/* @__PURE__ */ jsx(ColorStyle, { colors }),
+					/* @__PURE__ */ jsx(TypographyStyle, { typography }),
+					/* @__PURE__ */ jsx(LayoutStyle, { layout: layoutDimensions }),
+					forcedTheme && /* @__PURE__ */ jsx(ForcedThemeScript, { theme: forcedTheme }),
+					!staticExport && /* @__PURE__ */ jsx(DocsCommandSearch, {}),
+					aiEnabled && /* @__PURE__ */ jsx(DocsAIFeatures, {
+						mode: aiMode,
+						position: aiPosition,
+						floatingStyle: aiFloatingStyle,
+						triggerComponentHtml: aiTriggerComponentHtml,
+						suggestedQuestions: aiSuggestedQuestions,
+						aiLabel,
+						loaderVariant: aiLoaderVariant,
+						loadingComponentHtml: aiLoadingComponentHtml,
+						models: aiModels,
+						defaultModelId: aiDefaultModelId
+					}),
+					/* @__PURE__ */ jsx(DocsPageClient, {
+						tocEnabled,
+						tocStyle,
+						breadcrumbEnabled,
+						entry: config.entry,
+						copyMarkdown: copyMarkdownEnabled,
+						openDocs: openDocsEnabled,
+						openDocsProviders,
+						pageActionsPosition,
+						pageActionsAlignment,
+						githubUrl,
+						githubBranch,
+						githubDirectory,
+						lastModifiedMap,
+						lastUpdatedEnabled,
+						lastUpdatedPosition,
+						llmsTxtEnabled,
+						descriptionMap,
+						children
+					})
+				]
+			})
 		});
 	};
 }

package/dist/mdx.d.mts

@@ -1,6 +1,7 @@
 import { MDXImg } from "./mdx-img.mjs";
-import * as react from "react";
+import React from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { CodeBlockCopyData } from "@farming-labs/docs";
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 import * as fumadocs_ui_components_codeblock0 from "fumadocs-ui/components/codeblock";
 import defaultMdxComponents from "fumadocs-ui/mdx";
@@ -16,22 +17,26 @@ declare const extendedMdxComponents: {
   CodeBlockTabs: typeof fumadocs_ui_components_codeblock0.CodeBlockTabs;
   CodeBlockTabsList: typeof fumadocs_ui_components_codeblock0.CodeBlockTabsList;
   CodeBlockTabsTrigger: typeof fumadocs_ui_components_codeblock0.CodeBlockTabsTrigger;
-  pre: (props: react.HTMLAttributes<HTMLPreElement>) => react_jsx_runtime0.JSX.Element;
+  pre: (props: React.HTMLAttributes<HTMLPreElement>) => react_jsx_runtime0.JSX.Element;
   Card: typeof fumadocs_ui_components_card0.Card;
   Cards: typeof fumadocs_ui_components_card0.Cards;
-  a: react.FC<react.AnchorHTMLAttributes<HTMLAnchorElement>>;
-  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;
-  h4: (props: react.HTMLAttributes<HTMLHeadingElement>) => react_jsx_runtime0.JSX.Element;
-  h5: (props: react.HTMLAttributes<HTMLHeadingElement>) => react_jsx_runtime0.JSX.Element;
-  h6: (props: react.HTMLAttributes<HTMLHeadingElement>) => react_jsx_runtime0.JSX.Element;
-  table: (props: react.TableHTMLAttributes<HTMLTableElement>) => react_jsx_runtime0.JSX.Element;
+  a: React.FC<React.AnchorHTMLAttributes<HTMLAnchorElement>>;
+  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;
+  h4: (props: React.HTMLAttributes<HTMLHeadingElement>) => react_jsx_runtime0.JSX.Element;
+  h5: (props: React.HTMLAttributes<HTMLHeadingElement>) => react_jsx_runtime0.JSX.Element;
+  h6: (props: React.HTMLAttributes<HTMLHeadingElement>) => react_jsx_runtime0.JSX.Element;
+  table: (props: React.TableHTMLAttributes<HTMLTableElement>) => react_jsx_runtime0.JSX.Element;
   Callout: typeof fumadocs_ui_components_callout0.Callout;
   CalloutContainer: typeof fumadocs_ui_components_callout0.CalloutContainer;
   CalloutTitle: typeof fumadocs_ui_components_callout0.CalloutTitle;
   CalloutDescription: typeof fumadocs_ui_components_callout0.CalloutDescription;
 };
-declare function getMDXComponents<T extends Record<string, unknown> = Record<string, unknown>>(overrides?: T): typeof extendedMdxComponents & T;
+interface GetMDXComponentsOptions {
+  /** Called when the user clicks the copy button on a code block (in addition to the default copy). */
+  onCopyClick?: (data: CodeBlockCopyData) => void;
+}
+declare function getMDXComponents<T extends Record<string, unknown> = Record<string, unknown>>(overrides?: T, options?: GetMDXComponentsOptions): typeof extendedMdxComponents & T;
 //#endregion
-export { Tab, Tabs, defaultMdxComponents, extendedMdxComponents, getMDXComponents };
+export { GetMDXComponentsOptions, Tab, Tabs, defaultMdxComponents, extendedMdxComponents, getMDXComponents };

package/dist/mdx.mjs

@@ -1,30 +1,25 @@
+import { createPreWithCopyCallback } from "./code-block-copy-wrapper.mjs";
 import { MDXImg } from "./mdx-img.mjs";
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 import defaultMdxComponents from "fumadocs-ui/mdx";
 
 //#region src/mdx.ts
-/**
-* Re-export fumadocs-ui MDX components.
-*
-* 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
 };
-function getMDXComponents(overrides) {
-	return {
+function getMDXComponents(overrides, options) {
+	const base = {
 		...extendedMdxComponents,
 		...overrides
 	};
+	if (options?.onCopyClick) {
+		const DefaultPre = defaultMdxComponents.pre;
+		if (DefaultPre) base.pre = createPreWithCopyCallback(DefaultPre, options.onCopyClick);
+	}
+	return base;
 }
 
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/theme",
-  "version": "0.0.9-beta.1",
+  "version": "0.0.10",
   "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.9-beta.1"
+    "@farming-labs/docs": "0.0.10"
   },
   "peerDependencies": {
     "@farming-labs/docs": ">=0.0.1",

package/styles/base.css

@@ -290,7 +290,9 @@ figure.shiki:has(figcaption) figcaption {
     border-color 0.15s;
   user-select: none;
 }
-
+.fd-ai-fm-msg-content .fd-ai-code-block pre {
+  padding:10px !important;
+}
 .fd-page-action-btn:hover {
   color: var(--color-fd-accent-foreground);
   background: var(--color-fd-accent);

package/styles/pixel-border.css

@@ -139,14 +139,19 @@ code:not(pre code) {
  * ═══════════════════════════════════════════════════════════════════ */
 
 /* ─── Wider content area on desktop ──────────────────────────────── */
-/* :root {
-  --fd-layout-width: 1400px;
-} */
 
-/* ─── Docs grid: pin sidebar left, TOC right, content fills middle ── */
+@media (min-width: 1024px) {
+  :root {
+    --fd-layout-width: 1400px;
+  }
+}
+
+/* ─── Docs grid: sidebar | content | TOC — with gap and constrained TOC ── */
 @media (min-width: 768px) {
-  #nd-docs-layout {
-    grid-template-columns: var(--fd-sidebar-col, 0px) 1fr min-content !important;
+  #nd-docs-layout,
+  [style*="fd-sidebar-col"] {
+    grid-template-columns: var(--fd-sidebar-col, 0px) minmax(0, 1fr) min(var(--fd-toc-width, 260px), 260px) !important;
+    gap: 24px !important;
   }
 }