UI: use row-* for layout arrangement

apps/docs/app/global.css

@@ -1,5 +1,5 @@
 @import 'tailwindcss';
-@import 'fumadocs-ui/css/neutral.css';
+@import 'fumadocs-ui/css/solar.css';
 @import 'fumadocs-ui/css/preset.css';
 @import 'fumadocs-twoslash/twoslash.css';
 @import 'fumadocs-openapi/css/preset.css';

apps/docs/app/layout.tsx

@@ -8,7 +8,6 @@ import { Geist, Geist_Mono } from 'next/font/google';
 import { TreeContextProvider } from 'fumadocs-ui/contexts/tree';
 import { source } from '@/lib/source';
 import { NextProvider } from 'fumadocs-core/framework/next';
-import { Banner } from 'fumadocs-ui/components/banner';
 
 export const metadata = createMetadata({
   title: {
@@ -46,10 +45,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
       <Body>
         <NextProvider>
           <TreeContextProvider tree={source.pageTree}>
-            <Provider>
-              <Banner>Hello World</Banner>
-              {children}
-            </Provider>
+            <Provider>{children}</Provider>
           </TreeContextProvider>
         </NextProvider>
       </Body>

packages/openapi/src/ui/operation/example-panel/index.tsx

@@ -141,7 +141,7 @@ export async function APIExample({
 
   renderAPIExampleLayout ??= (slots) => {
     return (
-      <div className="prose-no-margin md:sticky md:py-4 md:top-(--fd-docs-toc-top) xl:w-[400px]">
+      <div className="prose-no-margin md:sticky md:top-[calc(var(--fd-docs-row-1,2rem)+1rem)] xl:w-[400px]">
         {slots.selector}
         {slots.usageTabs}
         {slots.responseTabs}

packages/ui/css/layouts/docs.css

@@ -5,14 +5,20 @@
     --fd-sidebar-width: 0px;
     --fd-toc-width: 0px;
     --fd-layout-width: 1600px;
+    --fd-page-width: 900px;
+
+    --fd-docs-row-1: var(--fd-banner-height, 0px);
+    --fd-docs-row-2: calc(14 * var(--spacing) + var(--fd-docs-row-1));
+    --fd-docs-row-3: calc(10 * var(--spacing) + var(--fd-docs-row-2));
+    --fd-docs-height: 100dvh;
 
-    --fd-docs-toc-top: 0px;
-    --fd-docs-toc-popover-top: calc(14 * var(--spacing));
-    --fd-docs-sidebar-top: 0px;
-    --fd-docs-nav-top: 0px;
     --fd-sidebar-mobile-offset: 100%;
   }
 
+  #nd-docs-layout:has(#nd-page[data-full='true']) {
+    --fd-page-width: 1200px;
+  }
+
   [dir='rtl'] #nd-docs-layout {
     --fd-sidebar-mobile-offset: -100%;
   }
@@ -20,13 +26,14 @@
   @variant md {
     #nd-docs-layout {
       --fd-sidebar-width: 268px;
-      --fd-docs-toc-popover-top: 0px;
+      --fd-docs-row-2: var(--fd-docs-row-1);
     }
   }
 
   @variant xl {
     #nd-docs-layout {
       --fd-toc-width: 268px;
+      --fd-docs-row-3: var(--fd-docs-row-2);
     }
   }
 }

packages/ui/css/solar.css

@@ -19,7 +19,7 @@
 
 @variant md {
   #nd-docs-layout {
-    --fd-docs-toc-popover-top: calc(2.5 * var(--spacing));
+    --fd-docs-row-3: calc(var(--fd-docs-row-2) + 2.5 * var(--spacing));
 
     #nd-page {
       @apply bg-fd-article rounded-xl border shadow-xl m-4;
@@ -31,7 +31,8 @@
     }
 
     [data-toc-popover] {
-      @apply mx-4 mt-(--fd-docs-toc-popover-top);
+      top: calc(var(--fd-docs-row-1) + 2.5 * var(--spacing));
+      @apply mx-4 mt-2.5;
 
       header {
         transform-origin: top center;

packages/ui/src/layouts/docs/client.tsx

@@ -79,7 +79,7 @@ export function LayoutBody({
         ". sidebar header toc ."
         ". sidebar toc-popover toc ."
         ". sidebar main toc ." 1fr
-        ". . . . ." / auto minmax(var(--fd-sidebar-col), 1fr) auto minmax(min-content, 1fr) auto`,
+        ". . . . ." / auto minmax(var(--fd-sidebar-col), 1fr) minmax(0, var(--fd-page-width)) minmax(min-content, 1fr) auto`,
           '--fd-sidebar-col': collapsed ? '0px' : 'var(--fd-sidebar-width)',
           ...style,
         } as object

packages/ui/src/layouts/docs/index.tsx

@@ -293,7 +293,7 @@ export function DocsLayout({
             (nav.component ?? (
               <LayoutHeader
                 id="nd-subnav"
-                className="[grid-area:header] sticky top-(--fd-docs-nav-top) z-30 flex items-center ps-4 pe-2.5 border-b transition-colors backdrop-blur-sm h-14 md:hidden data-[transparent=false]:bg-fd-background/80"
+                className="[grid-area:header] sticky top-(--fd-docs-row-1) z-30 flex items-center ps-4 pe-2.5 border-b transition-colors backdrop-blur-sm h-14 md:hidden data-[transparent=false]:bg-fd-background/80"
               >
                 <Link
                   href={nav.url ?? '/'}

packages/ui/src/layouts/docs/page/client.tsx

@@ -76,7 +76,7 @@ export function PageTOCPopover({
         onOpenChange={setOpen}
         data-toc-popover=""
         className={cn(
-          'sticky top-(--fd-docs-toc-popover-top) z-10 [grid-area:toc-popover] h-10 xl:hidden',
+          'sticky top-(--fd-docs-row-2) z-10 [grid-area:toc-popover] h-10 xl:hidden',
           className,
         )}
         {...rest}

packages/ui/src/layouts/docs/page/index.tsx

@@ -138,10 +138,8 @@ export function DocsPage({
         ))}
       <article
         id="nd-page"
-        className={cn(
-          'flex flex-col min-w-0 w-[900px] [grid-area:main] px-4 py-6 gap-4 md:px-6 md:pt-8 xl:px-8 xl:pt-14',
-          full && 'w-[1200px]',
-        )}
+        data-full={full}
+        className="flex flex-col [grid-area:main] px-4 py-6 gap-4 md:px-6 md:pt-8 xl:px-8 xl:pt-14"
       >
         {breadcrumbEnabled &&
           (breadcrumb ?? <PageBreadcrumb {...breadcrumbProps} />)}
@@ -153,7 +151,7 @@ export function DocsPage({
         (tocReplace ?? (
           <div
             id="nd-toc"
-            className="sticky top-(--fd-docs-toc-top) h-[calc(100dvh-var(--fd-docs-toc-top))] flex flex-col [grid-area:toc] w-(--fd-toc-width) pt-12 pe-4 pb-2 max-xl:hidden"
+            className="sticky top-(--fd-docs-row-1) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] flex flex-col [grid-area:toc] w-(--fd-toc-width) pt-12 pe-4 pb-2 max-xl:hidden"
           >
             {tocOptions.header}
             <h3

packages/ui/src/layouts/docs/sidebar.tsx

@@ -133,7 +133,7 @@ export function SidebarContent(props: ComponentProps<'aside'>) {
         {...props}
         data-collapsed={collapsed}
         className={cn(
-          'sticky top-(--fd-docs-sidebar-top) [grid-area:sidebar] h-[calc(100dvh-var(--fd-docs-sidebar-top))] flex flex-col items-end z-20 bg-fd-card text-sm border-e *:w-(--fd-sidebar-width) max-md:hidden',
+          'sticky top-(--fd-docs-row-1) [grid-area:sidebar] h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] flex flex-col items-end z-20 bg-fd-card text-sm border-e *:w-(--fd-sidebar-width) max-md:hidden',
           collapsed && [
             'fixed start-0 inset-y-2 h-auto rounded-xl border transition-[opacity,translate] duration-200',
             hover