@farming-labs/theme 0.2.45 → 0.2.47

package/dist/docs-page-client.d.mts

@@ -3,6 +3,10 @@ import { CopyMarkdownFormat, DocsFeedbackData, ReadingTimeFormat } from "@farmin
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/docs-page-client.d.ts
+interface PageNavigationItem {
+  name: string;
+  url: string;
+}
 /** Serializable provider — icon is an HTML string, not JSX. */
 interface SerializedProvider {
   name: string;
@@ -55,6 +59,8 @@ interface DocsPageClientProps {
   readingTime?: number | null;
   /** Reading-time label style. */
   readingTimeFormat?: ReadingTimeFormat;
+  previousPage?: PageNavigationItem | null;
+  nextPage?: PageNavigationItem | null;
   /** Map of pathname → serialized Schema.org JSON-LD. */
   structuredDataMap?: Record<string, string>;
   /** Direct serialized Schema.org JSON-LD override for the current page. */
@@ -119,6 +125,8 @@ declare function DocsPageClient({
   readingTimeMap,
   readingTime: readingTimeProp,
   readingTimeFormat,
+  previousPage,
+  nextPage,
   structuredDataMap,
   structuredData: structuredDataProp,
   readingTimeEnabled,

package/dist/docs-page-client.mjs

@@ -255,7 +255,7 @@ function findThreadlineTocActionsContainer() {
 	}
 	return toc.parentElement ?? toc;
 }
-function DocsPageClient({ tocEnabled, tocStyle = "default", breadcrumbEnabled = true, changelogBasePath, entry = "docs", publicPath, locale, copyMarkdown = false, copyMarkdownFormat, copyMarkdownIncludeTitle, copyMarkdownLabel, copyMarkdownCopiedLabel, openDocs = false, openDocsProviders, openDocsTarget, openDocsPrompt, pageActionsPosition = "below-title", pageActionsAlignment = "left", githubUrl, contentDir, githubBranch = "main", githubDirectory, editOnGithubUrl, lastModifiedMap, lastModified: lastModifiedProp, readingTimeMap, readingTime: readingTimeProp, readingTimeFormat = "long", structuredDataMap, structuredData: structuredDataProp, readingTimeEnabled = false, lastUpdatedEnabled = true, lastUpdatedLabel = "Last updated", lastUpdatedPosition = "footer", llmsTxtEnabled = false, descriptionMap, description, feedbackEnabled = false, feedbackQuestion, feedbackPlaceholder, feedbackRequireComment, feedbackPositiveLabel, feedbackNegativeLabel, feedbackSubmitLabel, feedbackSuccessMessage, feedbackErrorMessage, feedbackOnFeedback, analytics = false, children }) {
+function DocsPageClient({ tocEnabled, tocStyle = "default", breadcrumbEnabled = true, changelogBasePath, entry = "docs", publicPath, locale, copyMarkdown = false, copyMarkdownFormat, copyMarkdownIncludeTitle, copyMarkdownLabel, copyMarkdownCopiedLabel, openDocs = false, openDocsProviders, openDocsTarget, openDocsPrompt, pageActionsPosition = "below-title", pageActionsAlignment = "left", githubUrl, contentDir, githubBranch = "main", githubDirectory, editOnGithubUrl, lastModifiedMap, lastModified: lastModifiedProp, readingTimeMap, readingTime: readingTimeProp, readingTimeFormat = "long", previousPage, nextPage, structuredDataMap, structuredData: structuredDataProp, readingTimeEnabled = false, lastUpdatedEnabled = true, lastUpdatedLabel = "Last updated", lastUpdatedPosition = "footer", llmsTxtEnabled = false, descriptionMap, description, feedbackEnabled = false, feedbackQuestion, feedbackPlaceholder, feedbackRequireComment, feedbackPositiveLabel, feedbackNegativeLabel, feedbackSubmitLabel, feedbackSuccessMessage, feedbackErrorMessage, feedbackOnFeedback, analytics = false, children }) {
 	const fdTocStyle = tocStyle === "directional" ? "clerk" : void 0;
 	const [toc, setToc] = useState([]);
 	const [titlePortalHost, setTitlePortalHost] = useState(null);
@@ -437,6 +437,15 @@ function DocsPageClient({ tocEnabled, tocStyle = "default", breadcrumbEnabled =
 	const lastUpdatedLabelText = lastUpdatedLabel.trim();
 	const lastUpdatedText = lastUpdatedLabelText && lastModified ? `${lastUpdatedLabelText} ${lastModified}` : lastModified;
 	const showFooter = !isChangelogRoute && (!!githubFileUrl || showLastUpdatedInFooter || llmsTxtEnabled);
+	const localizedPreviousPage = previousPage?.url ? {
+		...previousPage,
+		url: withLangInUrl(previousPage.url, activeLocale)
+	} : null;
+	const localizedNextPage = nextPage?.url ? {
+		...nextPage,
+		url: withLangInUrl(nextPage.url, activeLocale)
+	} : null;
+	const showPageNavigation = !isChangelogRoute && (!!localizedPreviousPage || !!localizedNextPage);
 	const readingTimeBlock = typeof resolvedReadingTime === "number" ? /* @__PURE__ */ jsxs("div", {
 		className: "fd-page-meta not-prose",
 		children: [/* @__PURE__ */ jsx("span", {
@@ -640,7 +649,54 @@ function DocsPageClient({ tocEnabled, tocStyle = "default", breadcrumbEnabled =
 									children: lastUpdatedText
 								}, "last-updated")
 							]
-						}, "footer")
+						}, "footer"),
+						showPageNavigation && /* @__PURE__ */ jsxs("nav", {
+							className: "not-prose fd-page-nav",
+							"aria-label": "Page navigation",
+							children: [localizedPreviousPage ? /* @__PURE__ */ jsxs("a", {
+								href: localizedPreviousPage.url,
+								className: "fd-page-nav-card fd-page-nav-prev",
+								children: [/* @__PURE__ */ jsxs("span", {
+									className: "fd-page-nav-title fd-page-nav-title-prev",
+									children: [/* @__PURE__ */ jsx("svg", {
+										width: "14",
+										height: "14",
+										viewBox: "0 0 24 24",
+										fill: "none",
+										stroke: "currentColor",
+										strokeWidth: "2",
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										"aria-hidden": "true",
+										children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
+									}), localizedPreviousPage.name]
+								}), /* @__PURE__ */ jsx("span", {
+									className: "fd-page-nav-description",
+									children: "Previous Page"
+								})]
+							}) : /* @__PURE__ */ jsx("div", { "aria-hidden": "true" }), localizedNextPage ? /* @__PURE__ */ jsxs("a", {
+								href: localizedNextPage.url,
+								className: "fd-page-nav-card fd-page-nav-next",
+								children: [/* @__PURE__ */ jsxs("span", {
+									className: "fd-page-nav-title fd-page-nav-title-next",
+									children: [localizedNextPage.name, /* @__PURE__ */ jsx("svg", {
+										width: "14",
+										height: "14",
+										viewBox: "0 0 24 24",
+										fill: "none",
+										stroke: "currentColor",
+										strokeWidth: "2",
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										"aria-hidden": "true",
+										children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
+									})]
+								}), /* @__PURE__ */ jsx("span", {
+									className: "fd-page-nav-description",
+									children: "Next Page"
+								})]
+							}) : /* @__PURE__ */ jsx("div", { "aria-hidden": "true" })]
+						}, "page-navigation")
 					]
 				}, "body")
 			]

package/dist/tanstack-layout.d.mts

@@ -31,6 +31,14 @@ interface TanstackDocsLayoutProps {
   description?: string;
   readingTime?: number | null;
   lastModified?: string;
+  previousPage?: {
+    name: string;
+    url: string;
+  } | null;
+  nextPage?: {
+    name: string;
+    url: string;
+  } | null;
   structuredData?: string;
   editOnGithubUrl?: string;
   children: ReactNode;
@@ -42,6 +50,8 @@ declare function TanstackDocsLayout({
   description,
   readingTime,
   lastModified,
+  previousPage,
+  nextPage,
   structuredData,
   editOnGithubUrl,
   children

package/dist/tanstack-layout.mjs

@@ -223,7 +223,7 @@ function resolveFeedbackConfig(feedback) {
 function ForcedThemeScript({ theme }) {
 	return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: `document.documentElement.classList.remove('light','dark');document.documentElement.classList.add('${theme === "light" || theme === "dark" ? theme : "light"}');` } });
 }
-function TanstackDocsLayout({ config, tree, locale, description, readingTime, lastModified, structuredData, editOnGithubUrl, children }) {
+function TanstackDocsLayout({ config, tree, locale, description, readingTime, lastModified, previousPage, nextPage, structuredData, editOnGithubUrl, children }) {
 	const tocConfig = config.theme?.ui?.layout?.toc;
 	const tocEnabled = tocConfig?.enabled !== false;
 	const tocStyle = tocConfig?.style;
@@ -379,6 +379,8 @@ function TanstackDocsLayout({ config, tree, locale, description, readingTime, la
 					lastUpdatedLabel,
 					lastUpdatedPosition,
 					lastModified,
+					previousPage,
+					nextPage,
 					readingTimeEnabled,
 					readingTimeFormat: readingTimeOptions.format,
 					readingTime: typeof readingTime === "number" ? readingTime : void 0,

package/package.json

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

package/styles/bundles/shared-framework.css

@@ -8704,6 +8704,15 @@ html.dark #nd-docs-layout[data-fd-framework] pre.shiki {
   border-radius: var(--radius, 12px) var(--radius, 12px) 0 0;
 }
 
+#nd-docs-layout[data-fd-framework] .fd-codeblock-title-text,
+#nd-docs-layout[data-fd-framework] .fd-codeblock-title figcaption {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 #nd-docs-layout[data-fd-framework] .fd-codeblock-title + .fd-copy-btn ~ pre {
   border-top-left-radius: 0 !important;
   border-top-right-radius: 0 !important;
@@ -8714,6 +8723,21 @@ html.dark #nd-docs-layout[data-fd-framework] pre.shiki {
   border-top-right-radius: 0 !important;
 }
 
+#nd-docs-layout[data-fd-framework] .fd-codeblock-actions {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock-actions-floating {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 2;
+}
+
 #nd-docs-layout[data-fd-framework] .fd-copy-btn {
   position: absolute;
   top: 4px;
@@ -8737,6 +8761,18 @@ html.dark #nd-docs-layout[data-fd-framework] pre.shiki {
     background 0.15s;
 }
 
+#nd-docs-layout[data-fd-framework] .fd-codeblock-actions .fd-copy-btn,
+#nd-docs-layout[data-fd-framework] .fd-codeblock-actions-floating .fd-copy-btn,
+#nd-docs-layout[data-fd-framework] .fd-codeblock-title .fd-copy-btn {
+  position: static;
+  width: 28px;
+  height: 28px;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock-title .fd-copy-btn {
+  opacity: 1;
+}
+
 #nd-docs-layout[data-fd-framework] .fd-codeblock:hover .fd-copy-btn {
   opacity: 1;
 }
@@ -8787,7 +8823,8 @@ html.dark #nd-docs-layout[data-fd-framework] pre.shiki {
   color: var(--color-fd-foreground);
 }
 
-#nd-docs-layout[data-fd-framework] .fd-tab-trigger.fd-tab-active {
+#nd-docs-layout[data-fd-framework] .fd-tab-trigger.fd-tab-active,
+#nd-docs-layout[data-fd-framework] .fd-tab-trigger[data-state="active"] {
   color: var(--color-fd-foreground);
   font-weight: 600;
   border-bottom-color: var(--color-fd-primary);
@@ -8797,7 +8834,14 @@ html.dark #nd-docs-layout[data-fd-framework] pre.shiki {
   display: none;
 }
 
-#nd-docs-layout[data-fd-framework] .fd-tab-panel-active {
+#nd-docs-layout[data-fd-framework] .fd-tab-panel[data-state="inactive"],
+#nd-docs-layout[data-fd-framework] .fd-code-group-panel[data-state="inactive"] {
+  display: none;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-tab-panel-active,
+#nd-docs-layout[data-fd-framework] .fd-tab-panel[data-state="active"],
+#nd-docs-layout[data-fd-framework] .fd-code-group-panel[data-state="active"] {
   display: block;
 }
 

package/styles/framework.css

@@ -1704,6 +1704,15 @@ html.dark #nd-docs-layout[data-fd-framework] pre.shiki {
   border-radius: var(--radius, 12px) var(--radius, 12px) 0 0;
 }
 
+#nd-docs-layout[data-fd-framework] .fd-codeblock-title-text,
+#nd-docs-layout[data-fd-framework] .fd-codeblock-title figcaption {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 #nd-docs-layout[data-fd-framework] .fd-codeblock-title + .fd-copy-btn ~ pre {
   border-top-left-radius: 0 !important;
   border-top-right-radius: 0 !important;
@@ -1714,6 +1723,21 @@ html.dark #nd-docs-layout[data-fd-framework] pre.shiki {
   border-top-right-radius: 0 !important;
 }
 
+#nd-docs-layout[data-fd-framework] .fd-codeblock-actions {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock-actions-floating {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 2;
+}
+
 #nd-docs-layout[data-fd-framework] .fd-copy-btn {
   position: absolute;
   top: 4px;
@@ -1737,6 +1761,18 @@ html.dark #nd-docs-layout[data-fd-framework] pre.shiki {
     background 0.15s;
 }
 
+#nd-docs-layout[data-fd-framework] .fd-codeblock-actions .fd-copy-btn,
+#nd-docs-layout[data-fd-framework] .fd-codeblock-actions-floating .fd-copy-btn,
+#nd-docs-layout[data-fd-framework] .fd-codeblock-title .fd-copy-btn {
+  position: static;
+  width: 28px;
+  height: 28px;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock-title .fd-copy-btn {
+  opacity: 1;
+}
+
 #nd-docs-layout[data-fd-framework] .fd-codeblock:hover .fd-copy-btn {
   opacity: 1;
 }
@@ -1789,7 +1825,8 @@ html.dark #nd-docs-layout[data-fd-framework] pre.shiki {
   color: var(--color-fd-foreground);
 }
 
-#nd-docs-layout[data-fd-framework] .fd-tab-trigger.fd-tab-active {
+#nd-docs-layout[data-fd-framework] .fd-tab-trigger.fd-tab-active,
+#nd-docs-layout[data-fd-framework] .fd-tab-trigger[data-state="active"] {
   color: var(--color-fd-foreground);
   font-weight: 600;
   border-bottom-color: var(--color-fd-primary);
@@ -1799,7 +1836,14 @@ html.dark #nd-docs-layout[data-fd-framework] pre.shiki {
   display: none;
 }
 
-#nd-docs-layout[data-fd-framework] .fd-tab-panel-active {
+#nd-docs-layout[data-fd-framework] .fd-tab-panel[data-state="inactive"],
+#nd-docs-layout[data-fd-framework] .fd-code-group-panel[data-state="inactive"] {
+  display: none;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-tab-panel-active,
+#nd-docs-layout[data-fd-framework] .fd-tab-panel[data-state="active"],
+#nd-docs-layout[data-fd-framework] .fd-code-group-panel[data-state="active"] {
   display: block;
 }
 

package/styles/hardline.css

@@ -603,6 +603,7 @@ aside button[class*="bg-fd-secondary"] {
 #nd-docs-layout article#nd-page figure.shiki figcaption,
 .fd-docs-content .fd-codeblock-title,
 #nd-docs-layout[data-fd-framework] .fd-codeblock-title {
+  box-sizing: border-box;
   min-height: 40px;
   padding: 8px 14px !important;
   border: 0 !important;
@@ -615,11 +616,47 @@ aside button[class*="bg-fd-secondary"] {
   line-height: 1.45;
 }
 
+#nd-docs-layout[data-fd-framework] .fd-codeblock-title {
+  height: 40px;
+}
+
 .fd-docs-content figure.shiki:has(figcaption) > div:first-child::before,
 #nd-docs-layout article#nd-page figure.shiki:has(figcaption) > div:first-child::before {
   display: none;
 }
 
+#nd-docs-layout[data-fd-framework] .fd-codeblock-title .fd-codeblock-title-text {
+  min-height: 0;
+  padding: 0 14px;
+  border: 0 !important;
+  background: transparent !important;
+  line-height: inherit;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock-title .fd-codeblock-actions {
+  margin-inline-end: -8px;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock-title .fd-copy-btn {
+  width: 24px !important;
+  height: 24px !important;
+  border: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  color: var(--color-fd-muted-foreground) !important;
+  opacity: 0 !important;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock:hover .fd-codeblock-title .fd-copy-btn,
+#nd-docs-layout[data-fd-framework] .fd-codeblock-title .fd-copy-btn:focus-visible {
+  opacity: 1 !important;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock-title .fd-copy-btn:hover {
+  background: transparent !important;
+  color: var(--color-fd-foreground) !important;
+}
+
 .fd-docs-content figure.shiki > div[role="region"],
 #nd-docs-layout article#nd-page figure.shiki > div[role="region"],
 .fd-docs-content .fd-codeblock-content,

package/styles/threadline.css

@@ -148,6 +148,38 @@ body:has(#nd-docs-layout) {
       0px var(--fd-sidebar-width, 260px) minmax(0, var(--fd-threadline-main-width))
       var(--fd-toc-width, 224px) 0px !important;
   }
+
+  #nd-docs-layout[data-fd-framework] {
+    width: var(--fd-threadline-frame-width) !important;
+    max-width: var(--fd-threadline-frame-width) !important;
+    margin-inline: auto !important;
+    grid-template-columns:
+      var(--fd-sidebar-width, 260px)
+      minmax(0, calc(var(--fd-threadline-main-width) + var(--fd-toc-width, 224px))) !important;
+  }
+
+  #nd-docs-layout[data-fd-framework] .fd-main {
+    width: calc(var(--fd-threadline-main-width) + var(--fd-toc-width, 224px)) !important;
+  }
+
+  #nd-docs-layout[data-fd-framework] .fd-sidebar {
+    top: var(--docs-header-height, 48px) !important;
+    height: calc(100dvh - var(--docs-header-height, 48px)) !important;
+  }
+
+  #nd-docs-layout[data-fd-framework] .fd-page {
+    justify-content: flex-start !important;
+  }
+
+  #nd-docs-layout[data-fd-framework] .fd-page:has(.fd-toc) {
+    grid-template-columns:
+      minmax(0, var(--fd-threadline-main-width))
+      var(--fd-toc-width, 224px) !important;
+  }
+
+  #nd-docs-layout[data-fd-framework] .fd-page:not(:has(.fd-toc)) {
+    grid-template-columns: minmax(0, var(--fd-threadline-main-width)) !important;
+  }
 }
 
 #nd-docs-layout > header,
@@ -454,6 +486,53 @@ aside#nd-sidebar-mobile a[data-active="true"]:hover,
   background: color-mix(in srgb, var(--muted-foreground) 28%, transparent) !important;
 }
 
+#nd-docs-layout[data-fd-framework] .fd-page-body .fd-callout {
+  align-items: flex-start !important;
+  gap: 0.5rem !important;
+  padding: 0.75rem 0.75rem 0.75rem 0.25rem !important;
+  overflow: visible !important;
+  font-size: 0.75rem !important;
+  line-height: 1.45 !important;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-page-body .fd-callout-indicator {
+  position: static !important;
+  width: 0.125rem !important;
+  min-width: 0.125rem !important;
+  height: auto !important;
+  min-height: 1.5rem !important;
+  align-self: stretch !important;
+  flex: 0 0 0.125rem !important;
+  border-radius: 0.25rem !important;
+  background: color-mix(in srgb, var(--muted-foreground) 28%, transparent) !important;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-page-body .fd-callout-icon {
+  display: none !important;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-page-body .fd-callout-content {
+  min-width: 0;
+  flex: 1;
+  color: var(--foreground) !important;
+  font-size: 0.875rem !important;
+  line-height: 1.7 !important;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-page-body .fd-callout-title,
+#nd-docs-layout[data-fd-framework] .fd-page-body .fd-callout-content > p {
+  display: inline !important;
+  margin: 0 !important;
+  color: inherit !important;
+  font-size: inherit !important;
+  line-height: inherit !important;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-page-body .fd-callout-title {
+  margin-inline-end: 0.375rem !important;
+  font-weight: 600 !important;
+}
+
 .fd-docs-content :not(pre) > code,
 .prose :not(pre) > code {
   border: 0 !important;
@@ -491,6 +570,157 @@ figure.shiki > div:first-child:has(figcaption),
   font-weight: 500 !important;
 }
 
+#nd-docs-layout[data-fd-framework] .fd-codeblock.fd-codeblock--titled {
+  border: 0 !important;
+  border-radius: 0.75rem !important;
+  background: var(--fd-assistant-code-bg) !important;
+  background-color: var(--fd-assistant-code-bg) !important;
+  overflow: hidden;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock.fd-codeblock--titled .fd-codeblock-title {
+  position: relative;
+  height: 2.375rem;
+  min-height: 2.375rem !important;
+  padding: 0 1rem !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  color: var(--muted-foreground) !important;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock.fd-codeblock--titled .fd-codeblock-title::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(
+    -45deg,
+    currentColor,
+    currentColor 1px,
+    transparent 1px,
+    transparent 6px
+  );
+  opacity: 0.03;
+  pointer-events: none;
+}
+
+:is(html.dark, body.dark, .dark)
+  #nd-docs-layout[data-fd-framework]
+  .fd-codeblock.fd-codeblock--titled
+  .fd-codeblock-title::before {
+  opacity: 0.05;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock.fd-codeblock--titled .fd-codeblock-content {
+  padding: 0.875rem 0 !important;
+  background: transparent !important;
+  font-size: 0.8125rem !important;
+  line-height: 1.65 !important;
+  overflow: auto;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock.fd-codeblock--titled pre {
+  margin: 0 !important;
+  padding: 0.15rem 0.5rem !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  background-color: transparent !important;
+  font-size: 0.8125rem !important;
+  line-height: 1.65 !important;
+  overflow: visible;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock.fd-codeblock--titled.shiki {
+  background: var(--fd-assistant-code-bg) !important;
+  background-color: var(--fd-assistant-code-bg) !important;
+}
+
+:is(html.dark, body.dark, .dark)
+  #nd-docs-layout[data-fd-framework]
+  .fd-codeblock.fd-codeblock--titled.shiki {
+  background: var(--fd-assistant-code-bg) !important;
+  background-color: var(--fd-assistant-code-bg) !important;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock.fd-codeblock--titled pre.shiki,
+:is(html.dark, body.dark, .dark)
+  #nd-docs-layout[data-fd-framework]
+  .fd-codeblock.fd-codeblock--titled
+  pre.shiki {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock.fd-codeblock--titled pre code {
+  font-size: inherit !important;
+  line-height: inherit !important;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock:not(.fd-codeblock--titled) {
+  background: var(--fd-assistant-code-bg) !important;
+  background-color: var(--fd-assistant-code-bg) !important;
+}
+
+:is(html.dark, body.dark, .dark)
+  #nd-docs-layout[data-fd-framework]
+  .fd-codeblock:not(.fd-codeblock--titled) {
+  background: var(--fd-assistant-code-bg) !important;
+  background-color: var(--fd-assistant-code-bg) !important;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock:not(.fd-codeblock--titled) .fd-codeblock-content {
+  padding: 0.875rem 0 !important;
+  background: transparent !important;
+  font-size: 0.8125rem !important;
+  line-height: 1.65 !important;
+  overflow: auto;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock:not(.fd-codeblock--titled) pre {
+  margin: 0 !important;
+  padding: 0.15rem 0.5rem !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  background-color: transparent !important;
+  font-size: 0.8125rem !important;
+  line-height: 1.65 !important;
+  overflow: visible;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock:not(.fd-codeblock--titled) pre.shiki,
+:is(html.dark, body.dark, .dark)
+  #nd-docs-layout[data-fd-framework]
+  .fd-codeblock:not(.fd-codeblock--titled)
+  pre.shiki {
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock:not(.fd-codeblock--titled) pre code {
+  font-size: inherit !important;
+  line-height: inherit !important;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock.fd-codeblock--titled .fd-codeblock-actions {
+  margin-inline-end: -0.5rem;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock.fd-codeblock--titled .fd-codeblock-title .fd-copy-btn {
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 0 !important;
+  background: transparent !important;
+  color: var(--muted-foreground) !important;
+  opacity: 0;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-codeblock.fd-codeblock--titled:hover .fd-codeblock-title .fd-copy-btn,
+#nd-docs-layout[data-fd-framework] .fd-codeblock.fd-codeblock--titled .fd-codeblock-title .fd-copy-btn:focus-visible {
+  opacity: 1;
+}
+
 figure.shiki > div[role="region"] {
   padding-top: 0.875rem !important;
   padding-bottom: 0.875rem !important;
@@ -572,6 +802,16 @@ figure.shiki button[aria-label*="Copy"]:hover {
   background: transparent !important;
 }
 
+#nd-docs-layout[data-fd-framework] .fd-page-body th {
+  font-size: inherit !important;
+  line-height: inherit !important;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-page-body td {
+  font-size: 0.875rem !important;
+  line-height: 1.7 !important;
+}
+
 .fd-actions-toc-portal {
   display: none;
 }
@@ -849,6 +1089,52 @@ figure.shiki button[aria-label*="Copy"]:hover {
   padding-top: 0.25rem !important;
 }
 
+@media (min-width: 1280px) {
+  #nd-docs-layout[data-fd-framework] .fd-toc {
+    position: sticky !important;
+    top: var(--docs-header-height, 48px) !important;
+    width: var(--fd-toc-width, 224px) !important;
+    height: calc(100dvh - var(--docs-header-height, 48px)) !important;
+    padding: 3rem 1rem 0.5rem 0 !important;
+    overflow-y: auto;
+  }
+
+  #nd-docs-layout[data-fd-framework] .fd-toc-title {
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: 0.375rem !important;
+    margin: 0 0 0.75rem !important;
+    color: var(--muted-foreground) !important;
+    font-size: 0.75rem !important;
+    font-weight: 500 !important;
+    line-height: 1.45 !important;
+  }
+
+  #nd-docs-layout[data-fd-framework] .fd-toc-title svg {
+    width: 0.875rem !important;
+    height: 0.875rem !important;
+    opacity: 1 !important;
+  }
+
+  #nd-docs-layout[data-fd-framework] .fd-toc-list {
+    border-left: 0 !important;
+  }
+
+  #nd-docs-layout[data-fd-framework] .fd-toc-link {
+    margin: 0 !important;
+    padding: 0.375rem 0 0.375rem 0.75rem !important;
+    border-left: 0 !important;
+    color: var(--muted-foreground) !important;
+    font-size: 0.875rem !important;
+    line-height: 1.7 !important;
+  }
+
+  #nd-docs-layout[data-fd-framework] .fd-toc-link:hover,
+  #nd-docs-layout[data-fd-framework] .fd-toc-link-active {
+    color: var(--foreground) !important;
+  }
+}
+
 .fd-page-nav {
   display: grid !important;
   grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
@@ -1113,6 +1399,12 @@ figure.shiki button[aria-label*="Copy"]:hover {
   display: none !important;
 }
 
+#nd-docs-layout[data-fd-framework] .fd-page-footer {
+  display: block !important;
+  margin-top: auto !important;
+  padding-top: 1.5rem !important;
+}
+
 @media (min-width: 1280px) {
   .fd-actions-toc-host {
     display: block;
@@ -1231,6 +1523,61 @@ figure.shiki button[aria-label*="Copy"]:hover {
   box-shadow: none !important;
 }
 
+#nd-docs-layout[data-fd-framework] .fd-page-body .fd-tabs {
+  margin: 1rem 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  border-radius: 0.75rem !important;
+  background: var(--fd-assistant-code-bg) !important;
+  box-shadow: none !important;
+  overflow: hidden;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-page-body .fd-tabs-list {
+  min-height: 2.3125rem !important;
+  align-items: center !important;
+  gap: 0 !important;
+  padding: 0.25rem !important;
+  border: 0 !important;
+  border-radius: 0.625rem !important;
+  background: var(--fd-assistant-code-bg) !important;
+  overflow-x: auto;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-page-body .fd-tab-trigger {
+  min-height: 1.8125rem !important;
+  padding: 0.375rem 0.5rem !important;
+  border: 0 !important;
+  border-radius: 0.5rem !important;
+  color: var(--muted-foreground) !important;
+  font-size: 0.75rem !important;
+  font-weight: 500 !important;
+  line-height: 1.45 !important;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-page-body .fd-tab-trigger.fd-tab-active,
+#nd-docs-layout[data-fd-framework] .fd-page-body .fd-tab-trigger[data-state="active"] {
+  background: var(--background) !important;
+  color: var(--foreground) !important;
+  box-shadow: none !important;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-page-body .fd-tab-panel,
+#nd-docs-layout[data-fd-framework] .fd-page-body .fd-code-group-panel {
+  margin: 0 !important;
+  padding: 0 !important;
+  background: transparent !important;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-page-body .fd-tabs .fd-codeblock {
+  margin: 0 !important;
+  border-radius: 0 0 0.75rem 0.75rem !important;
+}
+
+#nd-docs-layout[data-fd-framework] .fd-page-body .fd-tabs .fd-codeblock pre {
+  border-radius: 0 !important;
+}
+
 .fd-feedback-submit,
 .fd-ai-send-btn,
 .fd-ai-fm-send-btn,