From dcabc589962ddee11d5aeed0c5fe0cf6e7f5897b Mon Sep 17 00:00:00 2001
From: Ben Sekulowicz-Barclay <ben@seku.co>
Date: Mon, 23 Mar 2026 15:47:50 +0100
Subject: [PATCH 01/10] Port redesign from solorepo

---
 .../app/(design-system)/[[...slug]]/page.tsx  |  41 +-
 .../src/app/(design-system)/layout.tsx        |  30 +-
 apps/eclipse/src/app/api/search/route.ts      |   6 +
 apps/eclipse/src/app/global.css               | 114 ++++-
 apps/eclipse/src/app/layout.tsx               |  45 +-
 .../src/components/layout/language-toggle.tsx |  62 ---
 .../src/components/layout/link-item.tsx       | 111 -----
 .../src/components/layout/notebook/client.tsx | 264 -----------
 .../src/components/layout/notebook/index.tsx  | 376 ----------------
 .../layout/notebook/page/client.tsx           | 344 ---------------
 .../components/layout/notebook/page/index.tsx | 228 ----------
 .../components/layout/notebook/sidebar.tsx    | 247 -----------
 .../src/components/layout/search-toggle.tsx   |  77 ----
 apps/eclipse/src/components/layout/shared.tsx | 102 -----
 .../src/components/layout/sidebar/base.tsx    | 416 ------------------
 .../components/layout/sidebar/link-item.tsx   |  60 ---
 .../components/layout/sidebar/page-tree.tsx   |  95 ----
 .../layout/sidebar/tabs/dropdown.tsx          | 204 ---------
 .../components/layout/sidebar/tabs/index.tsx  |  65 ---
 .../src/components/layout/theme-toggle.tsx    |  76 ----
 apps/eclipse/src/components/nav.tsx           |  39 ++
 apps/eclipse/src/components/page.tsx          |  38 ++
 apps/eclipse/src/components/provider.tsx      |  19 -
 apps/eclipse/src/components/search.tsx        | 218 +++++----
 .../src/components/sidebar-context.tsx        |  59 +++
 apps/eclipse/src/components/sidebar.tsx       | 133 ++++++
 apps/eclipse/src/components/toc.tsx           |  69 +++
 apps/eclipse/src/components/toc/clerk.tsx     | 166 -------
 apps/eclipse/src/components/toc/default.tsx   |  54 ---
 apps/eclipse/src/components/toc/index.tsx     | 117 -----
 apps/eclipse/src/components/ui/button.tsx     |  28 --
 .../eclipse/src/components/ui/collapsible.tsx |  32 --
 apps/eclipse/src/components/ui/popover.tsx    |  34 --
 .../eclipse/src/components/ui/scroll-area.tsx |  65 ---
 apps/eclipse/src/lib/layout.shared.tsx        |  37 --
 apps/eclipse/src/lib/merge-refs.ts            |  13 -
 apps/eclipse/src/lib/urls.ts                  |  14 -
 37 files changed, 607 insertions(+), 3491 deletions(-)
 create mode 100644 apps/eclipse/src/app/api/search/route.ts
 delete mode 100644 apps/eclipse/src/components/layout/language-toggle.tsx
 delete mode 100644 apps/eclipse/src/components/layout/link-item.tsx
 delete mode 100644 apps/eclipse/src/components/layout/notebook/client.tsx
 delete mode 100644 apps/eclipse/src/components/layout/notebook/index.tsx
 delete mode 100644 apps/eclipse/src/components/layout/notebook/page/client.tsx
 delete mode 100644 apps/eclipse/src/components/layout/notebook/page/index.tsx
 delete mode 100644 apps/eclipse/src/components/layout/notebook/sidebar.tsx
 delete mode 100644 apps/eclipse/src/components/layout/search-toggle.tsx
 delete mode 100644 apps/eclipse/src/components/layout/shared.tsx
 delete mode 100644 apps/eclipse/src/components/layout/sidebar/base.tsx
 delete mode 100644 apps/eclipse/src/components/layout/sidebar/link-item.tsx
 delete mode 100644 apps/eclipse/src/components/layout/sidebar/page-tree.tsx
 delete mode 100644 apps/eclipse/src/components/layout/sidebar/tabs/dropdown.tsx
 delete mode 100644 apps/eclipse/src/components/layout/sidebar/tabs/index.tsx
 delete mode 100644 apps/eclipse/src/components/layout/theme-toggle.tsx
 create mode 100644 apps/eclipse/src/components/nav.tsx
 create mode 100644 apps/eclipse/src/components/page.tsx
 delete mode 100644 apps/eclipse/src/components/provider.tsx
 create mode 100644 apps/eclipse/src/components/sidebar-context.tsx
 create mode 100644 apps/eclipse/src/components/sidebar.tsx
 create mode 100644 apps/eclipse/src/components/toc.tsx
 delete mode 100644 apps/eclipse/src/components/toc/clerk.tsx
 delete mode 100644 apps/eclipse/src/components/toc/default.tsx
 delete mode 100644 apps/eclipse/src/components/toc/index.tsx
 delete mode 100644 apps/eclipse/src/components/ui/button.tsx
 delete mode 100644 apps/eclipse/src/components/ui/collapsible.tsx
 delete mode 100644 apps/eclipse/src/components/ui/popover.tsx
 delete mode 100644 apps/eclipse/src/components/ui/scroll-area.tsx
 delete mode 100644 apps/eclipse/src/lib/layout.shared.tsx
 delete mode 100644 apps/eclipse/src/lib/merge-refs.ts
 delete mode 100644 apps/eclipse/src/lib/urls.ts

diff --git a/apps/eclipse/src/app/(design-system)/[[...slug]]/page.tsx b/apps/eclipse/src/app/(design-system)/[[...slug]]/page.tsx
index 623eba3b4b..15ba7bbc46 100644
--- a/apps/eclipse/src/app/(design-system)/[[...slug]]/page.tsx
+++ b/apps/eclipse/src/app/(design-system)/[[...slug]]/page.tsx
@@ -1,21 +1,14 @@
 import { source } from '@/lib/source';
+import { Page } from '@/components/page';
 import { notFound } from 'next/navigation';
 import { getMDXComponents } from '@/mdx-components';
 import type { Metadata } from 'next';
-import { createRelativeLink } from 'fumadocs-ui/mdx';
-import {
-  DocsBody,
-  DocsDescription,
-  DocsPage,
-  DocsTitle,
-  PageLastUpdate,
-} from '@/components/layout/notebook/page';
 
 interface PageParams {
   slug?: string[];
 }
 
-export default async function Page({
+export default async function DocsPage({
   params,
 }: {
   params: Promise<PageParams>;
@@ -27,32 +20,13 @@ export default async function Page({
   const MDX = page.data.body;
 
   return (
-    <DocsPage
-      tableOfContent={{
-        style: 'normal',
-      }}
+    <Page
+      title={page.data.title}
+      description={page.data.description}
       toc={page.data.toc}
-      full={page.data.full}
     >
-      <div className="flex flex-col md:flex-row items-start gap-4 pt-2 pb-6 md:justify-between">
-        <DocsTitle>{page.data.title}</DocsTitle>
-      </div>
-      <DocsDescription>{page.data.description}</DocsDescription>
-      <DocsBody>
-        <MDX
-          components={getMDXComponents({
-            a: createRelativeLink(source as any, page),
-          })}
-        />
-      </DocsBody>
-      <div className="flex flex-row flex-wrap items-center justify-between gap-4 border-t pt-6 text-sm">
-        {(page.data as { lastModified?: Date }).lastModified && (
-          <PageLastUpdate
-            date={(page.data as { lastModified: Date }).lastModified}
-          />
-        )}
-      </div>
-    </DocsPage>
+      <MDX components={getMDXComponents()} />
+    </Page>
   );
 }
 
@@ -72,6 +46,5 @@ export async function generateMetadata({
   return {
     title: page.data.title,
     description: page.data.description,
-    openGraph: {},
   };
 }
diff --git a/apps/eclipse/src/app/(design-system)/layout.tsx b/apps/eclipse/src/app/(design-system)/layout.tsx
index 590b9d3190..718478ff91 100644
--- a/apps/eclipse/src/app/(design-system)/layout.tsx
+++ b/apps/eclipse/src/app/(design-system)/layout.tsx
@@ -1,21 +1,19 @@
 import { source } from '@/lib/source';
-import { baseOptions } from '@/lib/layout.shared';
-import { DocsLayout } from '@/components/layout/notebook';
-export default async function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const { nav, ...base } = baseOptions();
+import { Nav } from '@/components/nav';
+import { Sidebar } from '@/components/sidebar';
+import { SidebarProvider } from '@/components/sidebar-context';
+import type { ReactNode } from 'react';
 
+export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <DocsLayout
-      {...base}
-      nav={{ ...nav }}
-      sidebar={{ collapsible: false }}
-      tree={source.pageTree}
-    >
-      {children}
-    </DocsLayout>
+    <SidebarProvider>
+      <Nav />
+      <div data-component="docs-layout">
+        <Sidebar tree={source.pageTree} />
+        <main>
+          {children}
+        </main>
+      </div>
+    </SidebarProvider>
   );
 }
diff --git a/apps/eclipse/src/app/api/search/route.ts b/apps/eclipse/src/app/api/search/route.ts
new file mode 100644
index 0000000000..64ecf4c2c0
--- /dev/null
+++ b/apps/eclipse/src/app/api/search/route.ts
@@ -0,0 +1,6 @@
+import { source } from '@/lib/source';
+import { createFromSource } from 'fumadocs-core/search/server';
+
+const search = createFromSource(source);
+
+export const { staticGET: GET } = search;
diff --git a/apps/eclipse/src/app/global.css b/apps/eclipse/src/app/global.css
index 3a0a20fbc5..82069cf4d2 100644
--- a/apps/eclipse/src/app/global.css
+++ b/apps/eclipse/src/app/global.css
@@ -1,30 +1,100 @@
 @import "tailwindcss";
 @import "@prisma/eclipse/styles/globals.css";
-@import "fumadocs-ui/css/shadcn.css";
-@import "fumadocs-ui/css/preset.css";
-@import "@prisma-docs/ui/styles";
 
-#nd-sidebar {
-    @apply border-e;
-    background-color: var(--color-background);
-}
+@layer utilities {
+  .font-sans-display-settings {
+    font-feature-settings: var(--font-sans-display-settings);
+  }
 
-header &[data-search-full] {
-    @apply rounded-xl;
-}
+  .font-sans-settings {
+    font-feature-settings: var(--font-sans-settings);
+  }
 
-/* [data-header-tabs], */
-[data-header-body] {
-    @apply border-none;
-}
+  .font-mono-settings {
+    font-feature-settings: var(--font-mono--settings);
+  }
 
-#nd-page {
-    @apply @container;
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
 }
-h1,
-h2,
-h3,
-h4,
-h5 {
-    font-family: var(--font-sans-display);
+
+.prose {
+
+  b,
+  strong {
+    @apply font-semibold;
+  }
+
+  code {
+    @apply text-[0.875em];
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  dl,
+  ol,
+  ul,
+  li {
+    @apply my-3 first:mt-0 last:mb-0 text-base text-foreground-neutral;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply mt-6 md:mt-12 font-bold text-2xl text-foreground-neutral;
+
+    + h1,
+    + h2,
+    + h3,
+    + h4,
+    + h5,
+    + h6 {
+      @apply mt-6
+    }
+  }
+
+  h3 {
+    @apply text-xl;
+  }
+
+  h4 {
+    @apply text-base;
+  }
+
+  h5 {
+    @apply text-sm;
+  }
+
+  h6 {
+    @apply text-2xs;
+  }
+
+  p,
+  li {
+    code {
+      @apply -my-0.5 px-1.5 py-0.5 bg-background-neutral-strong rounded-square-low;
+    }
+  }
+
+  li {
+    @apply mx-6 list-disc list-outside;
+  }
+
+  pre {
+    @apply my-6 first:mt-0 last:mb-0 p-4 bg-background-neutral-weak text-foreground-neutral border border-stroke-neutral rounded-square;
+  }
 }
diff --git a/apps/eclipse/src/app/layout.tsx b/apps/eclipse/src/app/layout.tsx
index 9c781c19be..cabe11b9cd 100644
--- a/apps/eclipse/src/app/layout.tsx
+++ b/apps/eclipse/src/app/layout.tsx
@@ -1,27 +1,11 @@
-import { Provider } from "@/components/provider";
-import Script from "next/script";
 import "./global.css";
-import { Inter, Barlow } from "next/font/google";
+import Script from "next/script";
 import { FontAwesomeScript as EclipseFA } from "@prisma/eclipse";
+import type { ReactNode } from "react";
 
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-inter",
-});
-
-const barlow = Barlow({
-  subsets: ["latin"],
-  weight: ["400", "500", "600", "700"],
-  variable: "--font-barlow",
-});
-
-export default function Layout({ children }: LayoutProps<"/">) {
+export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <html
-      lang="en"
-      className={`${inter.variable} ${barlow.variable}`}
-      suppressHydrationWarning
-    >
+    <html lang="en">
       <head>
         <Script
           src={EclipseFA}
@@ -29,26 +13,9 @@ export default function Layout({ children }: LayoutProps<"/">) {
           async
           data-auto-add-css="false"
         />
-        <Script
-          src="https://widget.kapa.ai/kapa-widget.bundle.js"
-          data-website-id="1b51bb03-43cc-4ef4-95f1-93288a91b560"
-          data-project-name="Prisma"
-          data-project-color="#71E8DF"
-          data-user-analytics-fingerprint-enabled="true"
-          data-project-logo="https://www.prisma.io/docs/ai_logo.png"
-          data-button-text="Ask AI"
-          data-modal-disclaimer="This AI assistant has access to all Prisma documentation and can help you with Prisma ORM, Prisma Postgres, Accelerate, and more."
-          data-modal-title="Prisma AI Assistant"
-          data-modal-ask-ai-input-placeholder="Ask me anything about Prisma..."
-          data-modal-example-questions="How can I setup relations in my Prisma Schema?,What is the difference between the 'migrate dev' and 'db push' commands?,Which cache strategy should I use for my query with Prisma Accelerate?"
-          data-modal-open-on-command-k="false"
-          data-button-hide="true"
-          data-color-mode="system"
-          async
-        />
       </head>
-      <body className="flex flex-col min-h-screen overflow-x-hidden">
-        <Provider>{children}</Provider>
+      <body className="bg-background-neutral font-sans font-sans-settings text-foreground-neutral antialiased">
+        {children}
       </body>
     </html>
   );
diff --git a/apps/eclipse/src/components/layout/language-toggle.tsx b/apps/eclipse/src/components/layout/language-toggle.tsx
deleted file mode 100644
index f054059493..0000000000
--- a/apps/eclipse/src/components/layout/language-toggle.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-"use client";
-import type { ComponentProps } from "react";
-import { useI18n } from "@fumadocs/base-ui/contexts/i18n";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
-import { cn } from "@prisma-docs/ui/lib/cn";
-import { buttonVariants } from "../ui/button";
-
-export type LanguageSelectProps = ComponentProps<"button">;
-
-export function LanguageToggle(props: LanguageSelectProps): React.ReactElement {
-  const context = useI18n();
-  if (!context.locales) throw new Error("Missing `<I18nProvider />`");
-
-  return (
-    <Popover>
-      <PopoverTrigger
-        aria-label={context.text.chooseLanguage}
-        {...props}
-        className={cn(
-          buttonVariants({
-            variant: "ghost",
-            className: "gap-1.5 p-1.5",
-          }),
-          props.className,
-        )}
-      >
-        {props.children}
-      </PopoverTrigger>
-      <PopoverContent className="flex flex-col overflow-x-hidden p-0">
-        <p className="mb-1 p-2 text-xs font-medium text-fd-muted-foreground">
-          {context.text.chooseLanguage}
-        </p>
-        {context.locales.map((item) => (
-          <button
-            key={item.locale}
-            type="button"
-            className={cn(
-              "p-2 text-start text-sm",
-              item.locale === context.locale
-                ? "bg-fd-primary/10 font-medium text-fd-primary"
-                : "hover:bg-fd-accent hover:text-fd-accent-foreground",
-            )}
-            onClick={() => {
-              context.onChange?.(item.locale);
-            }}
-          >
-            {item.name}
-          </button>
-        ))}
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-export function LanguageToggleText(props: ComponentProps<"span">) {
-  const context = useI18n();
-  const text = context.locales?.find(
-    (item) => item.locale === context.locale,
-  )?.name;
-
-  return <span {...props}>{text}</span>;
-}
diff --git a/apps/eclipse/src/components/layout/link-item.tsx b/apps/eclipse/src/components/layout/link-item.tsx
deleted file mode 100644
index 86bcbd6c5d..0000000000
--- a/apps/eclipse/src/components/layout/link-item.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-'use client';
-import type { ComponentProps, ReactNode } from 'react';
-import { usePathname } from 'fumadocs-core/framework';
-import { isActive } from '../../lib/urls';
-import Link from 'fumadocs-core/link';
-
-interface Filterable {
-  /**
-   * Restrict where the item is displayed
-   *
-   * @defaultValue 'all'
-   */
-  on?: 'menu' | 'nav' | 'all';
-}
-
-interface WithHref {
-  url: string;
-  /**
-   * When the item is marked as active
-   *
-   * @defaultValue 'url'
-   */
-  active?: 'url' | 'nested-url' | 'none';
-  external?: boolean;
-}
-
-export interface MainItemType extends WithHref, Filterable {
-  type?: 'main';
-  icon?: ReactNode;
-  text: ReactNode;
-  description?: ReactNode;
-}
-
-export interface IconItemType extends WithHref, Filterable {
-  type: 'icon';
-  /**
-   * `aria-label` of icon button
-   */
-  label?: string;
-  icon: ReactNode;
-  text: ReactNode;
-  /**
-   * @defaultValue true
-   */
-  secondary?: boolean;
-}
-
-export interface ButtonItemType extends WithHref, Filterable {
-  type: 'button';
-  icon?: ReactNode;
-  text: ReactNode;
-  /**
-   * @defaultValue false
-   */
-  secondary?: boolean;
-}
-
-export interface MenuItemType extends Partial<WithHref>, Filterable {
-  type: 'menu';
-  icon?: ReactNode;
-  text: ReactNode;
-
-  items: (
-    | (MainItemType & {
-        /**
-         * Options when displayed on navigation menu
-         */
-        menu?: ComponentProps<'a'> & {
-          banner?: ReactNode;
-        };
-      })
-    | CustomItemType
-  )[];
-
-  /**
-   * @defaultValue false
-   */
-  secondary?: boolean;
-}
-
-export interface CustomItemType extends Filterable {
-  type: 'custom';
-  /**
-   * @defaultValue false
-   */
-  secondary?: boolean;
-  children: ReactNode;
-}
-
-export type LinkItemType =
-  | MainItemType
-  | IconItemType
-  | ButtonItemType
-  | MenuItemType
-  | CustomItemType;
-
-export function LinkItem({
-  ref,
-  item,
-  ...props
-}: Omit<ComponentProps<'a'>, 'href'> & { item: WithHref }) {
-  const pathname = usePathname();
-  const activeType = item.active ?? 'url';
-  const active = activeType !== 'none' && isActive(item.url, pathname, activeType === 'nested-url');
-
-  return (
-    <Link ref={ref} href={item.url} external={item.external} {...props} data-active={active}>
-      {props.children}
-    </Link>
-  );
-}
diff --git a/apps/eclipse/src/components/layout/notebook/client.tsx b/apps/eclipse/src/components/layout/notebook/client.tsx
deleted file mode 100644
index 2314f74f2b..0000000000
--- a/apps/eclipse/src/components/layout/notebook/client.tsx
+++ /dev/null
@@ -1,264 +0,0 @@
-'use client';
-import { cn } from '@prisma-docs/ui/lib/cn';
-import {
-  type ComponentProps,
-  createContext,
-  Fragment,
-  type HTMLAttributes,
-  type PointerEvent,
-  type ReactNode,
-  use,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { useSidebar } from '../sidebar/base';
-import { ChevronDown } from 'lucide-react';
-import Link from 'fumadocs-core/link';
-import { usePathname } from 'fumadocs-core/framework';
-import { useIsScrollTop } from '@fumadocs/base-ui/utils/use-is-scroll-top';
-import { LinkItem, type LinkItemType, type MenuItemType } from '../link-item';
-import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
-
-export const LayoutContext = createContext<{
-  isNavTransparent: boolean;
-} | null>(null);
-
-export interface LayoutInfo {}
-
-export function LayoutContextProvider({
-  navTransparentMode = 'none',
-  children,
-}: {
-  navTransparentMode?: 'always' | 'top' | 'none';
-  children: ReactNode;
-}) {
-  const isTop =
-    useIsScrollTop({ enabled: navTransparentMode === 'top' }) ?? true;
-  const isNavTransparent =
-    navTransparentMode === 'top' ? isTop : navTransparentMode === 'always';
-
-  return (
-    <LayoutContext
-      value={useMemo(
-        () => ({
-          isNavTransparent,
-        }),
-        [isNavTransparent],
-      )}
-    >
-      {children}
-    </LayoutContext>
-  );
-}
-
-export function LayoutHeader(props: ComponentProps<'header'>) {
-  const { open } = useSidebar();
-  const { isNavTransparent } = use(LayoutContext)!;
-
-  return (
-    <header data-transparent={isNavTransparent && !open} {...props}>
-      {props.children}
-    </header>
-  );
-}
-
-export function LayoutBody({
-  className,
-  style,
-  children,
-  ...props
-}: ComponentProps<'div'>) {
-  const { collapsed } = useSidebar();
-  const pageCol =
-    'calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-col) - var(--fd-toc-width))';
-
-  return (
-    <div
-      id="nd-notebook-layout"
-      className={cn(
-        'grid overflow-x-clip min-h-(--fd-docs-height) transition-[grid-template-columns] auto-cols-auto auto-rows-auto [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]',
-        className,
-      )}
-      style={
-        {
-          gridTemplate: `". header header header ."
-        "sidebar sidebar toc-popover toc-popover ."
-        "sidebar sidebar main toc ." 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, ${pageCol}) var(--fd-toc-width) minmax(min-content, 1fr)`,
-          '--fd-docs-row-1': 'var(--fd-banner-height, 0px)',
-          '--fd-docs-row-2':
-            'calc(var(--fd-docs-row-1) + var(--fd-header-height))',
-          '--fd-docs-row-3':
-            'calc(var(--fd-docs-row-2) + var(--fd-toc-popover-height))',
-          '--fd-sidebar-col': collapsed ? '0px' : 'var(--fd-sidebar-width)',
-          ...style,
-        } as object
-      }
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
-
-export function LayoutHeaderTabs({
-  links,
-  className,
-  ...props
-}: ComponentProps<'div'> & {
-  links: LinkItemType[];
-}) {
-  const items = useMemo(
-    () => links.filter((l) => l.type !== 'icon' && l.type !== 'custom'),
-    [links],
-  );
-
-  return (
-    <div className={cn('flex flex-row items-end gap-6', className)} {...props}>
-      {items.map((item, i) => {
-        if ((item as any)?.type === 'custom') {
-          return <span key={i}>{(item as any).children}</span>;
-        }
-
-        if ((item as any)?.type === 'menu') {
-          return (
-            <NavbarLinkItemMenu
-              key={i}
-              item={item as MenuItemType}
-              className={cn(
-                'inline-flex border-b-2 border-transparent transition-colors items-center pb-1.5 font-medium gap-2 text-fd-muted-foreground text-sm text-nowrap hover:text-fd-accent-foreground',
-              )}
-            />
-          );
-        }
-
-        if ('url' in (item as any)) {
-          return (
-            <LinkItem
-              key={i}
-              item={item as any}
-              className={cn(
-                'inline-flex border-b-2 border-transparent transition-colors items-center pb-1.5 font-medium gap-2 text-fd-muted-foreground text-sm text-nowrap hover:text-fd-accent-foreground',
-                'data-[active=true]:border-fd-primary data-[active=true]:text-fd-primary',
-              )}
-            >
-              {'text' in item ? (item as any).text : null}
-            </LinkItem>
-          );
-        }
-
-        return null;
-      })}
-    </div>
-  );
-}
-
-export function NavbarLinkItem({
-  item,
-  className,
-  ...props
-}: { item: LinkItemType } & HTMLAttributes<HTMLElement>) {
-  if (item.type === 'custom') return item.children;
-
-  if (item.type === 'menu') {
-    return <NavbarLinkItemMenu item={item} className={className} {...props} />;
-  }
-
-  return (
-    <LinkItem
-      item={item}
-      className={cn(
-        'text-sm text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary',
-        className,
-      )}
-      {...props}
-    >
-      {item.text}
-    </LinkItem>
-  );
-}
-
-function NavbarLinkItemMenu({
-  item,
-  hoverDelay = 50,
-  className,
-  ...props
-}: { item: MenuItemType; hoverDelay?: number } & HTMLAttributes<HTMLElement>) {
-  const [open, setOpen] = useState(false);
-  const timeoutRef = useRef<number>(null);
-  const freezeUntil = useRef<number>(null);
-
-  const delaySetOpen = (value: boolean) => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-
-    timeoutRef.current = window.setTimeout(() => {
-      setOpen(value);
-      freezeUntil.current = Date.now() + 300;
-    }, hoverDelay);
-  };
-  const onPointerEnter = (e: PointerEvent) => {
-    if (e.pointerType === 'touch') return;
-    delaySetOpen(true);
-  };
-  const onPointerLeave = (e: PointerEvent) => {
-    if (e.pointerType === 'touch') return;
-    delaySetOpen(false);
-  };
-  function isTouchDevice() {
-    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-  }
-
-  return (
-    <Popover
-      open={open}
-      onOpenChange={(value) => {
-        if (freezeUntil.current === null || Date.now() >= freezeUntil.current)
-          setOpen(value);
-      }}
-    >
-      <PopoverTrigger
-        className={cn(
-          'inline-flex items-center gap-1.5 p-1 text-sm text-fd-muted-foreground transition-colors has-data-[active=true]:text-fd-primary data-[state=open]:text-fd-accent-foreground focus-visible:outline-none',
-          className,
-        )}
-        onPointerEnter={onPointerEnter}
-        onPointerLeave={onPointerLeave}
-        {...props}
-      >
-        {item.url ? (
-          <LinkItem item={item as { url: string }}>{item.text}</LinkItem>
-        ) : (
-          item.text
-        )}
-        <ChevronDown className="size-3" />
-      </PopoverTrigger>
-      <PopoverContent
-        className="flex flex-col p-1 text-fd-muted-foreground text-start"
-        onPointerEnter={onPointerEnter}
-        onPointerLeave={onPointerLeave}
-      >
-        {item.items.map((child, i) => {
-          if (child.type === 'custom')
-            return <Fragment key={i}>{child.children}</Fragment>;
-
-          return (
-            <LinkItem
-              key={i}
-              item={child}
-              className="inline-flex items-center gap-2 rounded-md p-2 transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground data-[active=true]:text-fd-primary [&_svg]:size-4"
-              onClick={() => {
-                if (isTouchDevice()) setOpen(false);
-              }}
-            >
-              {child.icon}
-              {child.text}
-            </LinkItem>
-          );
-        })}
-      </PopoverContent>
-    </Popover>
-  );
-}
diff --git a/apps/eclipse/src/components/layout/notebook/index.tsx b/apps/eclipse/src/components/layout/notebook/index.tsx
deleted file mode 100644
index 466bfa6109..0000000000
--- a/apps/eclipse/src/components/layout/notebook/index.tsx
+++ /dev/null
@@ -1,376 +0,0 @@
-import {
-  type ComponentProps,
-  type FC,
-  type HTMLAttributes,
-  type ReactNode,
-  useMemo,
-} from "react";
-import {
-  type BaseLayoutProps,
-  renderTitleNav,
-  resolveLinkItems,
-} from "../shared";
-import {
-  Sidebar,
-  SidebarCollapseTrigger,
-  SidebarContent,
-  SidebarDrawer,
-  SidebarLinkItem,
-  SidebarPageTree,
-  SidebarTrigger,
-  SidebarViewport,
-} from "./sidebar";
-import { TreeContextProvider } from "@fumadocs/base-ui/contexts/tree";
-import { cn } from "@prisma-docs/ui/lib/cn";
-import { buttonVariants } from "../../ui/button";
-import { Languages, Sidebar as SidebarIcon, X } from "lucide-react";
-import { LanguageToggle } from "../language-toggle";
-import { ThemeToggle } from "../theme-toggle";
-import type * as PageTree from "fumadocs-core/page-tree";
-import {
-  LayoutBody,
-  LayoutContextProvider,
-  LayoutHeader,
-  LayoutHeaderTabs,
-  NavbarLinkItem,
-} from "./client";
-import { LargeSearchToggle, SearchToggle } from "../search-toggle";
-import { LinkItem, type LinkItemType } from "../link-item";
-import type { SidebarPageTreeComponents } from "../sidebar/page-tree";
-import { getSidebarTabs } from "../sidebar/tabs";
-import {
-  SidebarTabsDropdown,
-  type SidebarTabWithProps,
-} from "../sidebar/tabs/dropdown";
-
-export interface DocsLayoutProps extends BaseLayoutProps {
-  tree: PageTree.Root;
-  nav?: BaseLayoutProps["nav"];
-
-  sidebar?: SidebarOptions;
-
-  containerProps?: HTMLAttributes<HTMLDivElement>;
-}
-
-interface SidebarOptions
-  extends
-    ComponentProps<"aside">,
-    Pick<ComponentProps<typeof Sidebar>, "defaultOpenLevel" | "prefetch"> {
-  components?: Partial<SidebarPageTreeComponents>;
-
-  /**
-   * Root Toggle options
-   */
-  tabs?: SidebarTabWithProps[] | false;
-
-  banner?: ReactNode | FC<ComponentProps<"div">>;
-  footer?: ReactNode | FC<ComponentProps<"div">>;
-
-  /**
-   * Support collapsing the sidebar on desktop mode
-   *
-   * @defaultValue true
-   */
-  collapsible?: boolean;
-}
-
-export function DocsLayout(props: DocsLayoutProps) {
-  const {
-    nav = {},
-    sidebar: {
-      tabs: tabOptions,
-      defaultOpenLevel,
-      prefetch,
-      ...sidebarProps
-    } = {},
-    i18n = false,
-    themeSwitch = {},
-    tree,
-  } = props;
-
-  const links = resolveLinkItems(props);
-  const tabs = useMemo(() => {
-    return getSidebarTabs(tree);
-  }, [tabOptions, tree]);
-
-  function sidebar() {
-    const {
-      banner,
-      footer,
-      components,
-      collapsible = true,
-      ...rest
-    } = sidebarProps;
-
-    const iconLinks = links.filter((item) => item.type === "icon");
-    const Header =
-      typeof banner === "function"
-        ? banner
-        : ({ className, ...props }: ComponentProps<"div">) => (
-            <div
-              className={cn(
-                "flex flex-col gap-3 p-4 pb-2 empty:hidden",
-                className,
-              )}
-              {...props}
-            >
-              {props.children}
-              {banner}
-            </div>
-          );
-    const Footer =
-      typeof footer === "function"
-        ? footer
-        : ({ className, ...props }: ComponentProps<"div">) => (
-            <div
-              className={cn(
-                "hidden flex-row text-fd-muted-foreground items-center border-t p-4 pt-2",
-                iconLinks.length > 0 && "max-lg:flex",
-                className,
-              )}
-              {...props}
-            >
-              {props.children}
-              {footer}
-            </div>
-          );
-    const viewport = (
-      <SidebarViewport>
-        <SidebarPageTree {...components} />
-      </SidebarViewport>
-    );
-
-    return (
-      <>
-        <SidebarContent {...rest}>
-          <Header>
-            {links.length > 0 && (
-              <SidebarTabsDropdown
-                links={links.filter((item) => item.type !== "icon")}
-                className={cn("lg:hidden")}
-              />
-            )}
-          </Header>
-          {viewport}
-          <Footer>
-            {iconLinks.map((item, i) => (
-              <LinkItem
-                key={i}
-                item={item}
-                className={cn(
-                  buttonVariants({
-                    size: "icon-sm",
-                    variant: "ghost",
-                    className: "lg:hidden",
-                  }),
-                )}
-                aria-label={item.label}
-              >
-                {item.icon}
-              </LinkItem>
-            ))}
-          </Footer>
-        </SidebarContent>
-        <SidebarDrawer {...rest}>
-          <Header>
-            <SidebarTrigger
-              className={cn(
-                buttonVariants({
-                  size: "icon-sm",
-                  variant: "ghost",
-                  className: "ms-auto text-fd-muted-foreground",
-                }),
-              )}
-            >
-              <X />
-            </SidebarTrigger>
-            {links.length > 0 && (
-              <SidebarTabsDropdown
-                links={links.filter((item) => item.type !== "icon")}
-              />
-            )}
-          </Header>
-          {viewport}
-          <Footer
-            className={cn(
-              "hidden flex-row items-center justify-end",
-              (i18n || themeSwitch.enabled !== false) && "flex",
-              iconLinks.length > 0 && "max-lg:flex",
-            )}
-          >
-            {iconLinks.map((item, i) => (
-              <LinkItem
-                key={i}
-                item={item}
-                className={cn(
-                  buttonVariants({
-                    size: "icon-sm",
-                    variant: "ghost",
-                  }),
-                  "text-fd-muted-foreground lg:hidden",
-                  i === iconLinks.length - 1 && "me-auto",
-                )}
-                aria-label={item.label}
-              >
-                {item.icon}
-              </LinkItem>
-            ))}
-            {i18n && (
-              <LanguageToggle>
-                <Languages className="size-4.5 text-fd-muted-foreground" />
-              </LanguageToggle>
-            )}
-            {themeSwitch.enabled !== false &&
-              (themeSwitch.component ?? (
-                <ThemeToggle mode={themeSwitch.mode ?? "light-dark-system"} />
-              ))}
-          </Footer>
-        </SidebarDrawer>
-      </>
-    );
-  }
-
-  return (
-    <TreeContextProvider tree={tree}>
-      <LayoutContextProvider navTransparentMode={nav.transparentMode}>
-        <Sidebar defaultOpenLevel={defaultOpenLevel} prefetch={prefetch}>
-          <LayoutBody {...props.containerProps}>
-            {sidebar()}
-            <DocsNavbar {...props} links={links} tabs={tabs} />
-            {props.children}
-          </LayoutBody>
-        </Sidebar>
-      </LayoutContextProvider>
-    </TreeContextProvider>
-  );
-}
-
-function DocsNavbar({
-  links,
-  tabs,
-  sidebar: { collapsible: sidebarCollapsible = true } = {},
-  searchToggle = {},
-  themeSwitch = {},
-  nav = {},
-  i18n,
-}: DocsLayoutProps & {
-  links: LinkItemType[];
-  tabs: SidebarTabWithProps[];
-}) {
-  const showLayoutTabs = links.some((item) => item.type !== "icon");
-
-  return (
-    <LayoutHeader
-      id="nd-subnav"
-      className={cn(
-        "sticky border-b [grid-area:header] flex flex-col top-(--fd-docs-row-1) z-10 backdrop-blur-sm transition-colors data-[transparent=false]:bg-fd-background/80 layout:[--fd-header-height:--spacing(14)]",
-        showLayoutTabs && "lg:layout:[--fd-header-height:--spacing(24)]",
-      )}
-    >
-      <div
-        data-header-body=""
-        className="flex border-b px-4 gap-2 h-14 md:px-6"
-      >
-        <div className={cn("items-center", "flex flex-1")}>
-          {renderTitleNav(nav, {
-            className: cn("inline-flex items-center gap-2.5 font-semibold"),
-          })}
-          {nav.children}
-        </div>
-        {searchToggle.enabled !== false &&
-          (searchToggle.components?.lg ? (
-            <div
-              className={cn(
-                "w-full my-auto max-md:hidden",
-                "rounded-xl max-w-sm",
-              )}
-            >
-              {searchToggle.components.lg}
-            </div>
-          ) : (
-            <LargeSearchToggle
-              hideIfDisabled
-              className={cn(
-                "w-full my-auto max-md:hidden",
-                "rounded-xl max-w-sm ps-2.5",
-              )}
-            />
-          ))}
-        <div className="flex flex-1 items-center justify-end md:gap-2">
-          <div className="flex items-center gap-6 empty:hidden max-lg:hidden">
-            {links
-              .filter((item) => item.type === "custom")
-              .map((item, i) => (
-                <NavbarLinkItem key={i} item={item} />
-              ))}
-          </div>
-          {links
-            .filter((item) => item.type === "icon")
-            .map((item, i) => (
-              <LinkItem
-                key={i}
-                item={item}
-                className={cn(
-                  buttonVariants({ size: "icon-sm", variant: "ghost" }),
-                  "text-fd-muted-foreground max-lg:hidden",
-                )}
-                aria-label={item.label}
-              >
-                {item.icon}
-              </LinkItem>
-            ))}
-
-          <div className="flex items-center md:hidden">
-            {searchToggle.enabled !== false &&
-              (searchToggle.components?.sm ?? (
-                <SearchToggle hideIfDisabled className="p-2" />
-              ))}
-            <SidebarTrigger
-              className={cn(
-                buttonVariants({
-                  variant: "ghost",
-                  size: "icon-sm",
-                  className: "p-2 -me-1.5",
-                }),
-              )}
-            >
-              <SidebarIcon />
-            </SidebarTrigger>
-          </div>
-
-          <div className="flex items-center gap-2 max-md:hidden">
-            {i18n && (
-              <LanguageToggle>
-                <Languages className="size-4.5 text-fd-muted-foreground" />
-              </LanguageToggle>
-            )}
-            {themeSwitch.enabled !== false &&
-              (themeSwitch.component ?? (
-                <ThemeToggle mode={themeSwitch.mode ?? "light-dark-system"} />
-              ))}
-            {sidebarCollapsible && (
-              <SidebarCollapseTrigger
-                className={cn(
-                  buttonVariants({
-                    variant: "secondary",
-                    size: "icon-sm",
-                  }),
-                  "text-fd-muted-foreground rounded-full -me-1.5",
-                )}
-              >
-                <SidebarIcon />
-              </SidebarCollapseTrigger>
-            )}
-          </div>
-        </div>
-      </div>
-      {showLayoutTabs && (
-        <LayoutHeaderTabs
-          data-header-tabs=""
-          className="overflow-x-auto border-b px-6 h-10 max-lg:hidden"
-          links={links}
-        />
-      )}
-    </LayoutHeader>
-  );
-}
diff --git a/apps/eclipse/src/components/layout/notebook/page/client.tsx b/apps/eclipse/src/components/layout/notebook/page/client.tsx
deleted file mode 100644
index b516a4b5a7..0000000000
--- a/apps/eclipse/src/components/layout/notebook/page/client.tsx
+++ /dev/null
@@ -1,344 +0,0 @@
-'use client';
-
-import {
-  type ComponentProps,
-  createContext,
-  Fragment,
-  use,
-  useEffect,
-  useEffectEvent,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
-import Link from 'fumadocs-core/link';
-import { cn } from '@prisma-docs/ui/lib/cn';
-import { useI18n } from '@fumadocs/base-ui/contexts/i18n';
-import { useTreeContext, useTreePath } from '@fumadocs/base-ui/contexts/tree';
-import type * as PageTree from 'fumadocs-core/page-tree';
-import { usePathname } from 'fumadocs-core/framework';
-import { type BreadcrumbOptions, getBreadcrumbItemsFromPath } from 'fumadocs-core/breadcrumb';
-import { isActive } from '../../../../lib/urls';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../../../ui/collapsible';
-import { useTOCItems } from '../../../toc';
-import { useActiveAnchor } from 'fumadocs-core/toc';
-import { LayoutContext } from '../client';
-import { useFooterItems } from '@fumadocs/base-ui/utils/use-footer-items';
-
-const TocPopoverContext = createContext<{
-  open: boolean;
-  setOpen: (open: boolean) => void;
-} | null>(null);
-
-export function PageTOCPopover({ className, children, ...rest }: ComponentProps<'div'>) {
-  const ref = useRef<HTMLElement>(null);
-  const [open, setOpen] = useState(false);
-  const { isNavTransparent } = use(LayoutContext)!;
-
-  const onClick = useEffectEvent((e: Event) => {
-    if (!open) return;
-
-    if (ref.current && !ref.current.contains(e.target as HTMLElement)) setOpen(false);
-  });
-
-  useEffect(() => {
-    window.addEventListener('click', onClick);
-
-    return () => {
-      window.removeEventListener('click', onClick);
-    };
-  }, []);
-
-  return (
-    <TocPopoverContext
-      value={useMemo(
-        () => ({
-          open,
-          setOpen,
-        }),
-        [setOpen, open],
-      )}
-    >
-      <Collapsible
-        open={open}
-        onOpenChange={setOpen}
-        data-toc-popover=""
-        className={cn(
-          'sticky top-(--fd-docs-row-2) z-10 [grid-area:toc-popover] h-(--fd-toc-popover-height) xl:hidden max-xl:layout:[--fd-toc-popover-height:--spacing(10)]',
-          className,
-        )}
-        {...rest}
-      >
-        <header
-          ref={ref}
-          className={cn(
-            'border-b backdrop-blur-sm transition-colors',
-            (!isNavTransparent || open) && 'bg-fd-background/80',
-            open && 'shadow-lg',
-          )}
-        >
-          {children}
-        </header>
-      </Collapsible>
-    </TocPopoverContext>
-  );
-}
-
-export function PageTOCPopoverTrigger({ className, ...props }: ComponentProps<'button'>) {
-  const { text } = useI18n();
-  const { open } = use(TocPopoverContext)!;
-  const items = useTOCItems();
-  const active = useActiveAnchor();
-  const selected = useMemo(
-    () => items.findIndex((item) => active === item.url.slice(1)),
-    [items, active],
-  );
-  const path = useTreePath().at(-1);
-  const showItem = selected !== -1 && !open;
-
-  return (
-    <CollapsibleTrigger
-      className={cn(
-        'flex w-full h-10 items-center text-sm text-fd-muted-foreground gap-2.5 px-4 py-2.5 text-start focus-visible:outline-none [&_svg]:size-4 md:px-6',
-        className,
-      )}
-      data-toc-popover-trigger=""
-      {...props}
-    >
-      <ProgressCircle
-        value={(selected + 1) / Math.max(1, items.length)}
-        max={1}
-        className={cn('shrink-0', open && 'text-fd-primary')}
-      />
-      <span className="grid flex-1 *:my-auto *:row-start-1 *:col-start-1">
-        <span
-          className={cn(
-            'truncate transition-all',
-            open && 'text-fd-foreground',
-            showItem && 'opacity-0 -translate-y-full pointer-events-none',
-          )}
-        >
-          {path?.name ?? text.toc}
-        </span>
-        <span
-          className={cn(
-            'truncate transition-all',
-            !showItem && 'opacity-0 translate-y-full pointer-events-none',
-          )}
-        >
-          {items[selected]?.title}
-        </span>
-      </span>
-      <ChevronDown className={cn('shrink-0 transition-transform mx-0.5', open && 'rotate-180')} />
-    </CollapsibleTrigger>
-  );
-}
-
-interface ProgressCircleProps extends Omit<React.ComponentProps<'svg'>, 'strokeWidth'> {
-  value: number;
-  strokeWidth?: number;
-  size?: number;
-  min?: number;
-  max?: number;
-}
-
-function clamp(input: number, min: number, max: number): number {
-  if (input < min) return min;
-  if (input > max) return max;
-  return input;
-}
-
-function ProgressCircle({
-  value,
-  strokeWidth = 2,
-  size = 24,
-  min = 0,
-  max = 100,
-  ...restSvgProps
-}: ProgressCircleProps) {
-  const normalizedValue = clamp(value, min, max);
-  const radius = (size - strokeWidth) / 2;
-  const circumference = 2 * Math.PI * radius;
-  const progress = (normalizedValue / max) * circumference;
-  const circleProps = {
-    cx: size / 2,
-    cy: size / 2,
-    r: radius,
-    fill: 'none',
-    strokeWidth,
-  };
-
-  return (
-    <svg
-      role="progressbar"
-      viewBox={`0 0 ${size} ${size}`}
-      aria-valuenow={normalizedValue}
-      aria-valuemin={min}
-      aria-valuemax={max}
-      {...restSvgProps}
-    >
-      <circle {...circleProps} className="stroke-current/25" />
-      <circle
-        {...circleProps}
-        stroke="currentColor"
-        strokeDasharray={circumference}
-        strokeDashoffset={circumference - progress}
-        strokeLinecap="round"
-        transform={`rotate(-90 ${size / 2} ${size / 2})`}
-        className="transition-all"
-      />
-    </svg>
-  );
-}
-
-export function PageTOCPopoverContent(props: ComponentProps<'div'>) {
-  return (
-    <CollapsibleContent
-      data-toc-popover-content=""
-      {...props}
-      className={cn('flex flex-col px-4 max-h-[50vh] md:px-6', props.className)}
-    >
-      {props.children}
-    </CollapsibleContent>
-  );
-}
-
-export function PageLastUpdate({
-  date: value,
-  ...props
-}: Omit<ComponentProps<'p'>, 'children'> & { date: Date }) {
-  const { text } = useI18n();
-  const [date, setDate] = useState('');
-
-  useEffect(() => {
-    // to the timezone of client
-    setDate(value.toLocaleDateString());
-  }, [value]);
-
-  return (
-    <p {...props} className={cn('text-sm text-fd-muted-foreground', props.className)}>
-      {text.lastUpdate} {date}
-    </p>
-  );
-}
-
-type Item = Pick<PageTree.Item, 'name' | 'description' | 'url'>;
-export interface FooterProps extends ComponentProps<'div'> {
-  /**
-   * Items including information for the next and previous page
-   */
-  items?: {
-    previous?: Item;
-    next?: Item;
-  };
-}
-
-export function PageFooter({ items, children, className, ...props }: FooterProps) {
-  const footerList = useFooterItems();
-  const pathname = usePathname();
-  const { previous, next } = useMemo(() => {
-    if (items) return items;
-
-    const idx = footerList.findIndex((item) => isActive(item.url, pathname, false));
-
-    if (idx === -1) return {};
-    return {
-      previous: footerList[idx - 1],
-      next: footerList[idx + 1],
-    };
-  }, [footerList, items, pathname]);
-
-  return (
-    <>
-      <div
-        className={cn(
-          '@container grid gap-4',
-          previous && next ? 'grid-cols-2' : 'grid-cols-1',
-          className,
-        )}
-        {...props}
-      >
-        {previous && <FooterItem item={previous} index={0} />}
-        {next && <FooterItem item={next} index={1} />}
-      </div>
-      {children}
-    </>
-  );
-}
-
-function FooterItem({ item, index }: { item: Item; index: 0 | 1 }) {
-  const { text } = useI18n();
-  const Icon = index === 0 ? ChevronLeft : ChevronRight;
-
-  return (
-    <Link
-      href={item.url}
-      className={cn(
-        'flex flex-col gap-2 rounded-lg border p-4 text-sm transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground @max-lg:col-span-full',
-        index === 1 && 'text-end',
-      )}
-    >
-      <div
-        className={cn(
-          'inline-flex items-center gap-1.5 font-medium',
-          index === 1 && 'flex-row-reverse',
-        )}
-      >
-        <Icon className="-mx-1 size-4 shrink-0 rtl:rotate-180" />
-        <p>{item.name}</p>
-      </div>
-      <p className="text-fd-muted-foreground truncate">
-        {item.description ?? (index === 0 ? text.previousPage : text.nextPage)}
-      </p>
-    </Link>
-  );
-}
-
-export type BreadcrumbProps = BreadcrumbOptions & ComponentProps<'div'>;
-
-export function PageBreadcrumb({
-  includeRoot,
-  includeSeparator,
-  includePage,
-  ...props
-}: BreadcrumbProps) {
-  const path = useTreePath();
-  const { root } = useTreeContext();
-  const items = useMemo(() => {
-    return getBreadcrumbItemsFromPath(root, path, {
-      includePage,
-      includeSeparator,
-      includeRoot,
-    });
-  }, [includePage, includeRoot, includeSeparator, path, root]);
-
-  if (items.length === 0) return null;
-
-  return (
-    <div
-      {...props}
-      className={cn('flex items-center gap-1.5 text-sm text-fd-muted-foreground', props.className)}
-    >
-      {items.map((item, i) => {
-        const className = cn('truncate', i === items.length - 1 && 'text-fd-primary font-medium');
-
-        return (
-          <Fragment key={i}>
-            {i !== 0 && <ChevronRight className="size-3.5 shrink-0" />}
-            {item.url ? (
-              <Link
-                href={item.url}
-                className={cn(className, 'transition-opacity hover:opacity-80')}
-              >
-                {item.name}
-              </Link>
-            ) : (
-              <span className={className}>{item.name}</span>
-            )}
-          </Fragment>
-        );
-      })}
-    </div>
-  );
-}
diff --git a/apps/eclipse/src/components/layout/notebook/page/index.tsx b/apps/eclipse/src/components/layout/notebook/page/index.tsx
deleted file mode 100644
index 3cc2a7a1cc..0000000000
--- a/apps/eclipse/src/components/layout/notebook/page/index.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-import { cn } from '@prisma-docs/ui/lib/cn';
-import { buttonVariants } from '../../../ui/button';
-import { Edit, Text } from 'lucide-react';
-import { I18nLabel } from '@fumadocs/base-ui/contexts/i18n';
-import {
-  type BreadcrumbProps,
-  type FooterProps,
-  PageBreadcrumb,
-  PageFooter,
-  PageTOCPopover,
-  PageTOCPopoverContent,
-  PageTOCPopoverTrigger,
-} from './client';
-import type { AnchorProviderProps, TOCItemType } from 'fumadocs-core/toc';
-import * as TocDefault from '../../../toc/default';
-import * as TocClerk from '../../../toc/clerk';
-import { TOCProvider, TOCScrollArea } from '../../../toc';
-
-interface BreadcrumbOptions extends BreadcrumbProps {
-  enabled: boolean;
-  component: ReactNode;
-}
-
-interface FooterOptions extends FooterProps {
-  enabled: boolean;
-  component: ReactNode;
-}
-
-export interface DocsPageProps {
-  toc?: TOCItemType[];
-  tableOfContent?: Partial<TableOfContentOptions>;
-  tableOfContentPopover?: Partial<TableOfContentPopoverOptions>;
-
-  /**
-   * Extend the page to fill all available space
-   *
-   * @defaultValue false
-   */
-  full?: boolean;
-
-  /**
-   * Replace or disable breadcrumb
-   */
-  breadcrumb?: Partial<BreadcrumbOptions>;
-
-  /**
-   * Footer navigation, located under the page body.
-   *
-   * You can specify `footer.children` to add extra components under the footer.
-   */
-  footer?: Partial<FooterOptions>;
-
-  children?: ReactNode;
-
-  /**
-   * Apply class names to the `#nd-page` container.
-   */
-  className?: string;
-}
-
-type TableOfContentOptions = Pick<AnchorProviderProps, 'single'> & {
-  /**
-   * Custom content in TOC container, before the main TOC
-   */
-  header?: ReactNode;
-
-  /**
-   * Custom content in TOC container, after the main TOC
-   */
-  footer?: ReactNode;
-
-  enabled: boolean;
-  component: ReactNode;
-
-  /**
-   * @defaultValue 'normal'
-   */
-  style?: 'normal' | 'clerk';
-};
-
-type TableOfContentPopoverOptions = Omit<TableOfContentOptions, 'single'>;
-
-export function DocsPage({
-  breadcrumb: { enabled: breadcrumbEnabled = true, component: breadcrumb, ...breadcrumbProps } = {},
-  footer: { enabled: footerEnabled, component: footerReplace, ...footerProps } = {},
-  full = false,
-  tableOfContentPopover: {
-    enabled: tocPopoverEnabled,
-    component: tocPopover,
-    ...tocPopoverOptions
-  } = {},
-  tableOfContent: { enabled: tocEnabled, component: tocReplace, ...tocOptions } = {},
-  toc = [],
-  children,
-  className,
-}: DocsPageProps) {
-  // disable TOC on full mode, you can still enable it with `enabled` option.
-  tocEnabled ??=
-    !full && (toc.length > 0 || tocOptions.footer !== undefined || tocOptions.header !== undefined);
-
-  tocPopoverEnabled ??=
-    toc.length > 0 ||
-    tocPopoverOptions.header !== undefined ||
-    tocPopoverOptions.footer !== undefined;
-
-  let wrapper = (children: ReactNode) => children;
-
-  if (tocEnabled || tocPopoverEnabled) {
-    wrapper = (children) => (
-      <TOCProvider single={tocOptions.single} toc={toc}>
-        {children}
-      </TOCProvider>
-    );
-  }
-
-  return wrapper(
-    <>
-      {tocPopoverEnabled &&
-        (tocPopover ?? (
-          <PageTOCPopover>
-            <PageTOCPopoverTrigger />
-            <PageTOCPopoverContent>
-              {tocPopoverOptions.header}
-              <TOCScrollArea>
-                {tocPopoverOptions.style === 'clerk' ? (
-                  <TocClerk.TOCItems />
-                ) : (
-                  <TocDefault.TOCItems />
-                )}
-              </TOCScrollArea>
-              {tocPopoverOptions.footer}
-            </PageTOCPopoverContent>
-          </PageTOCPopover>
-        ))}
-      <article
-        id="nd-page"
-        data-full={full}
-        className={cn(
-          'flex flex-col [grid-area:main] px-4 py-6 gap-4 md:px-6 md:pt-8 xl:px-8 xl:pt-14 *:max-w-225',
-          full && '*:max-w-321.25',
-          className,
-        )}
-      >
-        {breadcrumbEnabled && (breadcrumb ?? <PageBreadcrumb {...breadcrumbProps} />)}
-        {children}
-        {footerEnabled !== false && (footerReplace ?? <PageFooter {...footerProps} />)}
-      </article>
-      {tocEnabled &&
-        (tocReplace ?? (
-          <div
-            id="nd-toc"
-            className="sticky top-(--fd-docs-row-3) [grid-area:toc] h-[calc(var(--fd-docs-height)-var(--fd-docs-row-3))] flex flex-col w-(--fd-toc-width) pt-12 pe-4 pb-2 xl:layout:[--fd-toc-width:268px] max-xl:hidden"
-          >
-            {tocOptions.header}
-            <h3
-              id="toc-title"
-              className="inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground"
-            >
-              <Text className="size-4" />
-              <I18nLabel label="toc" />
-            </h3>
-            <TOCScrollArea>
-              {tocOptions.style === 'clerk' ? <TocClerk.TOCItems /> : <TocDefault.TOCItems />}
-            </TOCScrollArea>
-            {tocOptions.footer}
-          </div>
-        ))}
-    </>,
-  );
-}
-
-export function EditOnGitHub(props: ComponentProps<'a'>) {
-  return (
-    <a
-      target="_blank"
-      rel="noreferrer noopener"
-      {...props}
-      className={cn(
-        buttonVariants({
-          color: 'secondary',
-          size: 'sm',
-          className: 'gap-1.5 not-prose',
-        }),
-        props.className,
-      )}
-    >
-      {props.children ?? (
-        <>
-          <Edit className="size-3.5" />
-          <I18nLabel label="editOnGithub" />
-        </>
-      )}
-    </a>
-  );
-}
-
-/**
- * Add typography styles
- */
-export function DocsBody({ children, className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div {...props} className={cn('prose flex-1', className)}>
-      {children}
-    </div>
-  );
-}
-
-export function DocsDescription({ children, className, ...props }: ComponentProps<'p'>) {
-  // Don't render if no description provided
-  if (children === undefined) return null;
-
-  return (
-    <p {...props} className={cn('mb-8 text-lg text-fd-muted-foreground', className)}>
-      {children}
-    </p>
-  );
-}
-
-export function DocsTitle({ children, className, ...props }: ComponentProps<'h1'>) {
-  return (
-    <h1 {...props} className={cn('text-[1.75em] font-semibold', className)}>
-      {children}
-    </h1>
-  );
-}
-
-export { PageLastUpdate, PageBreadcrumb } from './client';
diff --git a/apps/eclipse/src/components/layout/notebook/sidebar.tsx b/apps/eclipse/src/components/layout/notebook/sidebar.tsx
deleted file mode 100644
index 40b27fe240..0000000000
--- a/apps/eclipse/src/components/layout/notebook/sidebar.tsx
+++ /dev/null
@@ -1,247 +0,0 @@
-'use client';
-import * as Base from '../sidebar/base';
-import { cn } from '@prisma-docs/ui/lib/cn';
-import { type ComponentProps, useRef } from 'react';
-import { cva } from 'class-variance-authority';
-import { createPageTreeRenderer } from '../sidebar/page-tree';
-import { createLinkItemRenderer } from '../sidebar/link-item';
-import { mergeRefs } from '../../../lib/merge-refs';
-
-const itemVariants = cva(
-  'relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0',
-  {
-    variants: {
-      variant: {
-        link: 'transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors',
-        button:
-          'transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none',
-      },
-      highlight: {
-        true: "data-[active=true]:before:content-[''] data-[active=true]:before:bg-fd-primary data-[active=true]:before:absolute data-[active=true]:before:w-px data-[active=true]:before:inset-y-2.5 data-[active=true]:before:start-2.5",
-      },
-    },
-  },
-);
-
-function getItemOffset(depth: number) {
-  return `calc(${2 + 3 * depth} * var(--spacing))`;
-}
-
-export const {
-  SidebarProvider: Sidebar,
-  SidebarFolder,
-  SidebarCollapseTrigger,
-  SidebarViewport,
-  SidebarTrigger,
-} = Base;
-
-export function SidebarContent({
-  ref: refProp,
-  className,
-  children,
-  ...props
-}: ComponentProps<'aside'>) {
-  const ref = useRef<HTMLElement>(null);
-
-  return (
-    <Base.SidebarContent>
-      {({ collapsed, hovered, ref: asideRef, ...rest }) => (
-        <div
-          data-sidebar-placeholder=""
-          className={cn(
-            'sticky z-20 [grid-area:sidebar] pointer-events-none *:pointer-events-auto md:layout:[--fd-sidebar-width:268px] max-md:hidden',
-            'top-(--fd-docs-row-2) h-[calc(var(--fd-docs-height)-var(--fd-docs-row-2))]',
-          )}
-        >
-          {collapsed && (
-            <div className="absolute start-0 inset-y-0 w-4" {...rest} />
-          )}
-          <aside
-            id="nd-sidebar"
-            ref={mergeRefs(ref, refProp, asideRef)}
-            data-collapsed={collapsed}
-            data-hovered={collapsed && hovered}
-            className={cn(
-              'absolute flex flex-col w-full start-0 inset-y-0 items-end text-sm duration-250 *:w-(--fd-sidebar-width)',
-              collapsed && [
-                'inset-y-2 rounded-xl bg-fd-card transition-transform border w-(--fd-sidebar-width)',
-                hovered
-                  ? 'shadow-lg translate-x-2 rtl:-translate-x-2'
-                  : '-translate-x-(--fd-sidebar-width) rtl:translate-x-full',
-              ],
-              ref.current &&
-                (ref.current.getAttribute('data-collapsed') === 'true') !==
-                  collapsed &&
-                'transition-[width,inset-block,translate,background-color]',
-              className,
-            )}
-            {...props}
-            {...rest}
-          >
-            {children}
-          </aside>
-        </div>
-      )}
-    </Base.SidebarContent>
-  );
-}
-
-export function SidebarDrawer({
-  children,
-  className,
-  ...props
-}: ComponentProps<typeof Base.SidebarDrawerContent>) {
-  return (
-    <>
-      <Base.SidebarDrawerOverlay className="fixed z-40 inset-0 backdrop-blur-xs data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out" />
-      <Base.SidebarDrawerContent
-        className={cn(
-          'fixed text-[0.9375rem] flex flex-col shadow-lg border-s end-0 inset-y-0 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-sidebar-in data-[state=closed]:animate-fd-sidebar-out',
-          className,
-        )}
-        {...props}
-      >
-        {children}
-      </Base.SidebarDrawerContent>
-    </>
-  );
-}
-
-export function SidebarSeparator({
-  className,
-  style,
-  children,
-  ...props
-}: ComponentProps<'p'>) {
-  const depth = Base.useFolderDepth();
-
-  return (
-    <Base.SidebarSeparator
-      className={cn('[&_svg]:size-4 [&_svg]:shrink-0', className)}
-      style={{
-        paddingInlineStart: getItemOffset(depth),
-        ...style,
-      }}
-      {...props}
-    >
-      {children}
-    </Base.SidebarSeparator>
-  );
-}
-
-export function SidebarItem({
-  className,
-  style,
-  children,
-  ...props
-}: ComponentProps<typeof Base.SidebarItem>) {
-  const depth = Base.useFolderDepth();
-
-  return (
-    <Base.SidebarItem
-      className={cn(
-        itemVariants({ variant: 'link', highlight: depth >= 1 }),
-        className,
-      )}
-      style={{
-        paddingInlineStart: getItemOffset(depth),
-        ...style,
-      }}
-      {...props}
-    >
-      {children}
-    </Base.SidebarItem>
-  );
-}
-
-export function SidebarFolderTrigger({
-  className,
-  style,
-  ...props
-}: ComponentProps<typeof Base.SidebarFolderTrigger>) {
-  const { depth, collapsible } = Base.useFolder()!;
-
-  return (
-    <Base.SidebarFolderTrigger
-      className={(s) =>
-        cn(
-          itemVariants({ variant: collapsible ? 'button' : null }),
-          'w-full',
-          typeof className === 'function' ? className(s) : className,
-        )
-      }
-      style={{
-        paddingInlineStart: getItemOffset(depth - 1),
-        ...style,
-      }}
-      {...props}
-    >
-      {props.children}
-    </Base.SidebarFolderTrigger>
-  );
-}
-
-export function SidebarFolderLink({
-  className,
-  style,
-  ...props
-}: ComponentProps<typeof Base.SidebarFolderLink>) {
-  const depth = Base.useFolderDepth();
-
-  return (
-    <Base.SidebarFolderLink
-      className={cn(
-        itemVariants({ variant: 'link', highlight: depth > 1 }),
-        'w-full',
-        className,
-      )}
-      style={{
-        paddingInlineStart: getItemOffset(depth - 1),
-        ...style,
-      }}
-      {...props}
-    >
-      {props.children}
-    </Base.SidebarFolderLink>
-  );
-}
-
-export function SidebarFolderContent({
-  className,
-  children,
-  ...props
-}: ComponentProps<typeof Base.SidebarFolderContent>) {
-  const depth = Base.useFolderDepth();
-
-  return (
-    <Base.SidebarFolderContent
-      className={(s) =>
-        cn(
-          'relative',
-          depth === 1 &&
-            "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5",
-          typeof className === 'function' ? className(s) : className,
-        )
-      }
-      {...props}
-    >
-      {children}
-    </Base.SidebarFolderContent>
-  );
-}
-export const SidebarPageTree = createPageTreeRenderer({
-  SidebarFolder,
-  SidebarFolderContent,
-  SidebarFolderLink,
-  SidebarFolderTrigger,
-  SidebarItem,
-  SidebarSeparator,
-});
-
-export const SidebarLinkItem = createLinkItemRenderer({
-  SidebarFolder,
-  SidebarFolderContent,
-  SidebarFolderLink,
-  SidebarFolderTrigger,
-  SidebarItem,
-});
diff --git a/apps/eclipse/src/components/layout/search-toggle.tsx b/apps/eclipse/src/components/layout/search-toggle.tsx
deleted file mode 100644
index 1f10477f96..0000000000
--- a/apps/eclipse/src/components/layout/search-toggle.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-'use client';
-import type { ComponentProps } from 'react';
-import { Search } from 'lucide-react';
-import { useSearchContext } from '@fumadocs/base-ui/contexts/search';
-import { useI18n } from '@fumadocs/base-ui/contexts/i18n';
-import { cn } from '@prisma-docs/ui/lib/cn';
-import { type ButtonProps, buttonVariants } from '../ui/button';
-
-interface SearchToggleProps extends Omit<ComponentProps<'button'>, 'color'>, ButtonProps {
-  hideIfDisabled?: boolean;
-}
-
-export function SearchToggle({
-  hideIfDisabled,
-  size = 'icon-sm',
-  color = 'ghost',
-  ...props
-}: SearchToggleProps) {
-  const { setOpenSearch, enabled } = useSearchContext();
-  if (hideIfDisabled && !enabled) return null;
-
-  return (
-    <button
-      type="button"
-      className={cn(
-        buttonVariants({
-          size,
-          color,
-        }),
-        props.className,
-      )}
-      data-search=""
-      aria-label="Open Search"
-      onClick={() => {
-        setOpenSearch(true);
-      }}
-    >
-      <Search />
-    </button>
-  );
-}
-
-export function LargeSearchToggle({
-  hideIfDisabled,
-  ...props
-}: ComponentProps<'button'> & {
-  hideIfDisabled?: boolean;
-}) {
-  const { enabled, hotKey, setOpenSearch } = useSearchContext();
-  const { text } = useI18n();
-  if (hideIfDisabled && !enabled) return null;
-
-  return (
-    <button
-      type="button"
-      data-search-full=""
-      {...props}
-      className={cn(
-        'inline-flex items-center gap-2 rounded-lg border bg-fd-secondary/50 p-1.5 ps-2 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground',
-        props.className,
-      )}
-      onClick={() => {
-        setOpenSearch(true);
-      }}
-    >
-      <Search className="size-4" />
-      {text.search}
-      <div className="ms-auto inline-flex gap-0.5">
-        {hotKey.map((k, i) => (
-          <kbd key={i} className="rounded-md border bg-fd-background px-1.5">
-            {k.display}
-          </kbd>
-        ))}
-      </div>
-    </button>
-  );
-}
diff --git a/apps/eclipse/src/components/layout/shared.tsx b/apps/eclipse/src/components/layout/shared.tsx
deleted file mode 100644
index 7f3ef77344..0000000000
--- a/apps/eclipse/src/components/layout/shared.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-import type { I18nConfig } from 'fumadocs-core/i18n';
-import type { LinkItemType } from './link-item';
-import Link from 'fumadocs-core/link';
-
-export interface NavOptions {
-  enabled: boolean;
-  component: ReactNode;
-
-  title?: ReactNode | ((props: ComponentProps<'a'>) => ReactNode);
-
-  /**
-   * Redirect url of title
-   * @defaultValue '/'
-   */
-  url?: string;
-
-  /**
-   * Use transparent background
-   *
-   * @defaultValue none
-   */
-  transparentMode?: 'always' | 'top' | 'none';
-
-  children?: ReactNode;
-}
-
-export interface BaseLayoutProps {
-  themeSwitch?: {
-    enabled?: boolean;
-    component?: ReactNode;
-    mode?: 'light-dark' | 'light-dark-system';
-  };
-
-  searchToggle?: Partial<{
-    enabled: boolean;
-    components: Partial<{
-      sm: ReactNode;
-      lg: ReactNode;
-    }>;
-  }>;
-
-  /**
-   * I18n options
-   *
-   * @defaultValue false
-   */
-  i18n?: boolean | I18nConfig;
-
-  /**
-   * GitHub url
-   */
-  githubUrl?: string;
-
-  links?: LinkItemType[];
-  /**
-   * Replace or disable navbar
-   */
-  nav?: Partial<NavOptions>;
-
-  children?: ReactNode;
-}
-
-/**
- * Get link items with shortcuts
- */
-export function resolveLinkItems({
-  links = [],
-  githubUrl,
-}: Pick<BaseLayoutProps, 'links' | 'githubUrl'>): LinkItemType[] {
-  const result = [...links];
-
-  if (githubUrl)
-    result.push({
-      type: 'icon',
-      url: githubUrl,
-      text: 'Github',
-      label: 'GitHub',
-      icon: (
-        <svg role="img" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
-        </svg>
-      ),
-      external: true,
-    });
-
-  return result;
-}
-
-export function renderTitleNav(
-  { title, url = '/' }: Partial<NavOptions>,
-  props: ComponentProps<'a'>,
-) {
-  if (typeof title === 'function') return title({ href: url, ...props });
-  return (
-    <Link href={url} {...props}>
-      {title}
-    </Link>
-  );
-}
-
-export type * from './link-item';
diff --git a/apps/eclipse/src/components/layout/sidebar/base.tsx b/apps/eclipse/src/components/layout/sidebar/base.tsx
deleted file mode 100644
index 816eb02bdf..0000000000
--- a/apps/eclipse/src/components/layout/sidebar/base.tsx
+++ /dev/null
@@ -1,416 +0,0 @@
-'use client';
-import { ChevronDown, ExternalLink } from 'lucide-react';
-import {
-  type ComponentProps,
-  createContext,
-  type PointerEvent,
-  type ReactNode,
-  type RefObject,
-  use,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import Link, { type LinkProps } from 'fumadocs-core/link';
-import { useOnChange } from 'fumadocs-core/utils/use-on-change';
-import { cn } from '@prisma-docs/ui/lib/cn';
-import { ScrollArea, type ScrollAreaProps, ScrollViewport } from '../../ui/scroll-area';
-import { isActive } from '../../../lib/urls';
-import {
-  Collapsible,
-  CollapsibleContent,
-  type CollapsibleContentProps,
-  CollapsibleTrigger,
-  type CollapsibleTriggerProps,
-} from '../../ui/collapsible';
-import { useMediaQuery } from 'fumadocs-core/utils/use-media-query';
-import scrollIntoView from 'scroll-into-view-if-needed';
-import { usePathname } from 'fumadocs-core/framework';
-import ReactDOM from 'react-dom';
-
-interface SidebarContext {
-  open: boolean;
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  collapsed: boolean;
-  setCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
-
-  /**
-   * When set to false, don't close the sidebar when navigate to another page
-   */
-  closeOnRedirect: RefObject<boolean>;
-  defaultOpenLevel: number;
-  prefetch?: boolean;
-  mode: Mode;
-}
-
-export interface SidebarProviderProps {
-  /**
-   * Open folders by default if their level is lower or equal to a specific level
-   * (Starting from 1)
-   *
-   * @defaultValue 0
-   */
-  defaultOpenLevel?: number;
-
-  /**
-   * Prefetch links, default behaviour depends on your React.js framework.
-   */
-  prefetch?: boolean;
-
-  children?: ReactNode;
-}
-
-type Mode = 'drawer' | 'full';
-
-const SidebarContext = createContext<SidebarContext | null>(null);
-
-const FolderContext = createContext<{
-  open: boolean;
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  depth: number;
-  collapsible: boolean;
-} | null>(null);
-
-export function SidebarProvider({
-  defaultOpenLevel = 0,
-  prefetch,
-  children,
-}: SidebarProviderProps) {
-  const closeOnRedirect = useRef(true);
-  const [open, setOpen] = useState(false);
-  const [collapsed, setCollapsed] = useState(false);
-  const pathname = usePathname();
-  const mode: Mode = useMediaQuery('(width < 768px)') ? 'drawer' : 'full';
-
-  useOnChange(pathname, () => {
-    if (closeOnRedirect.current) {
-      setOpen(false);
-    }
-    closeOnRedirect.current = true;
-  });
-
-  return (
-    <SidebarContext
-      value={useMemo(
-        () => ({
-          open,
-          setOpen,
-          collapsed,
-          setCollapsed,
-          closeOnRedirect,
-          defaultOpenLevel,
-          prefetch,
-          mode,
-        }),
-        [open, collapsed, defaultOpenLevel, prefetch, mode],
-      )}
-    >
-      {children}
-    </SidebarContext>
-  );
-}
-
-export function useSidebar(): SidebarContext {
-  const ctx = use(SidebarContext);
-  if (!ctx)
-    throw new Error(
-      'Missing SidebarContext, make sure you have wrapped the component in <DocsLayout /> and the context is available.',
-    );
-
-  return ctx;
-}
-
-export function useFolder() {
-  return use(FolderContext);
-}
-
-export function useFolderDepth() {
-  return use(FolderContext)?.depth ?? 0;
-}
-
-export function SidebarContent({
-  children,
-}: {
-  children: (state: {
-    ref: RefObject<HTMLElement | null>;
-    collapsed: boolean;
-    hovered: boolean;
-    onPointerEnter: (event: PointerEvent) => void;
-    onPointerLeave: (event: PointerEvent) => void;
-  }) => ReactNode;
-}) {
-  const { collapsed, mode } = useSidebar();
-  const [hover, setHover] = useState(false);
-  const ref = useRef<HTMLElement>(null);
-  const timerRef = useRef(0);
-
-  useOnChange(collapsed, () => {
-    if (collapsed) setHover(false);
-  });
-
-  if (mode !== 'full') return;
-
-  function shouldIgnoreHover(e: PointerEvent): boolean {
-    const element = ref.current;
-    if (!element) return true;
-
-    return !collapsed || e.pointerType === 'touch' || element.getAnimations().length > 0;
-  }
-
-  return children({
-    ref,
-    collapsed,
-    hovered: hover,
-    onPointerEnter(e) {
-      if (shouldIgnoreHover(e)) return;
-      window.clearTimeout(timerRef.current);
-      setHover(true);
-    },
-    onPointerLeave(e) {
-      if (shouldIgnoreHover(e)) return;
-      window.clearTimeout(timerRef.current);
-
-      timerRef.current = window.setTimeout(
-        () => setHover(false),
-        // if mouse is leaving the viewport, add a close delay
-        Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100 ? 0 : 500,
-      );
-    },
-  });
-}
-
-export function SidebarDrawerOverlay(props: ComponentProps<'div'>) {
-  const { open, setOpen, mode } = useSidebar();
-  const [hidden, setHidden] = useState(!open);
-
-  if (open && hidden) setHidden(false);
-  if (mode !== 'drawer' || hidden) return;
-  return (
-    <div
-      data-state={open ? 'open' : 'closed'}
-      onClick={() => setOpen(false)}
-      onAnimationEnd={() => {
-        if (!open) ReactDOM.flushSync(() => setHidden(true));
-      }}
-      {...props}
-    />
-  );
-}
-
-export function SidebarDrawerContent({ className, children, ...props }: ComponentProps<'aside'>) {
-  const { open, mode } = useSidebar();
-  const [hidden, setHidden] = useState(!open);
-
-  if (open && hidden) setHidden(false);
-  if (mode !== 'drawer') return;
-  return (
-    <aside
-      id="nd-sidebar-mobile"
-      data-state={open ? 'open' : 'closed'}
-      className={cn(hidden && 'invisible', className)}
-      onAnimationEnd={() => {
-        if (!open) ReactDOM.flushSync(() => setHidden(true));
-      }}
-      {...props}
-    >
-      {children}
-    </aside>
-  );
-}
-
-export function SidebarViewport({ className, ...props }: ScrollAreaProps) {
-  return (
-    <ScrollArea
-      className={(s) =>
-        cn('min-h-0 flex-1', typeof className === 'function' ? className(s) : className)
-      }
-      {...props}
-    >
-      <ScrollViewport
-        className="p-4 overscroll-contain"
-        style={
-          {
-            maskImage:
-              'linear-gradient(to bottom, transparent, white 12px, white calc(100% - 12px), transparent)',
-          } as object
-        }
-      >
-        {props.children}
-      </ScrollViewport>
-    </ScrollArea>
-  );
-}
-
-export function SidebarSeparator(props: ComponentProps<'p'>) {
-  const depth = useFolderDepth();
-  return (
-    <p
-      {...props}
-      className={cn(
-        'inline-flex items-center gap-2 mb-1.5 px-2 mt-6 empty:mb-0',
-        depth === 0 && 'first:mt-0',
-        props.className,
-      )}
-    >
-      {props.children}
-    </p>
-  );
-}
-
-export function SidebarItem({
-  icon,
-  children,
-  ...props
-}: LinkProps & {
-  icon?: ReactNode;
-}) {
-  const pathname = usePathname();
-  const ref = useRef<HTMLAnchorElement>(null);
-  const { prefetch } = useSidebar();
-  const active = props.href !== undefined && isActive(props.href, pathname, false);
-
-  useAutoScroll(active, ref);
-
-  return (
-    <Link ref={ref} data-active={active} prefetch={prefetch} {...props}>
-      {icon ?? (props.external ? <ExternalLink /> : null)}
-      {children}
-    </Link>
-  );
-}
-
-export function SidebarFolder({
-  defaultOpen: defaultOpenProp,
-  collapsible = true,
-  active = false,
-  children,
-  ...props
-}: ComponentProps<'div'> & {
-  active?: boolean;
-  defaultOpen?: boolean;
-  collapsible?: boolean;
-}) {
-  const { defaultOpenLevel } = useSidebar();
-  const depth = useFolderDepth() + 1;
-  const defaultOpen =
-    collapsible === false || active || (defaultOpenProp ?? defaultOpenLevel >= depth);
-  const [open, setOpen] = useState(defaultOpen);
-
-  useOnChange(defaultOpen, (v) => {
-    if (v) setOpen(v);
-  });
-
-  return (
-    <Collapsible open={open} onOpenChange={setOpen} disabled={!collapsible} {...props}>
-      <FolderContext
-        value={useMemo(() => ({ open, setOpen, depth, collapsible }), [collapsible, depth, open])}
-      >
-        {children}
-      </FolderContext>
-    </Collapsible>
-  );
-}
-
-export function SidebarFolderTrigger({ children, ...props }: CollapsibleTriggerProps) {
-  const { open, collapsible } = use(FolderContext)!;
-
-  if (collapsible) {
-    return (
-      <CollapsibleTrigger {...props}>
-        {children}
-        <ChevronDown
-          data-icon
-          className={cn('ms-auto transition-transform', !open && '-rotate-90')}
-        />
-      </CollapsibleTrigger>
-    );
-  }
-
-  return <div {...(props as ComponentProps<'div'>)}>{children}</div>;
-}
-
-export function SidebarFolderLink({ children, ...props }: LinkProps) {
-  const ref = useRef<HTMLAnchorElement>(null);
-  const { open, setOpen, collapsible } = use(FolderContext)!;
-  const { prefetch } = useSidebar();
-  const pathname = usePathname();
-  const active = props.href !== undefined && isActive(props.href, pathname, false);
-
-  useAutoScroll(active, ref);
-
-  return (
-    <Link
-      ref={ref}
-      data-active={active}
-      onClick={(e) => {
-        if (!collapsible) return;
-
-        if (e.target instanceof Element && e.target.matches('[data-icon], [data-icon] *')) {
-          setOpen(!open);
-          e.preventDefault();
-        } else {
-          setOpen(active ? !open : true);
-        }
-      }}
-      prefetch={prefetch}
-      {...props}
-    >
-      {children}
-      {collapsible && (
-        <ChevronDown
-          data-icon
-          className={cn('ms-auto transition-transform', !open && '-rotate-90')}
-        />
-      )}
-    </Link>
-  );
-}
-
-export function SidebarFolderContent(props: CollapsibleContentProps) {
-  return <CollapsibleContent {...props}>{props.children}</CollapsibleContent>;
-}
-
-export function SidebarTrigger({ children, ...props }: ComponentProps<'button'>) {
-  const { setOpen } = useSidebar();
-
-  return (
-    <button aria-label="Open Sidebar" onClick={() => setOpen((prev) => !prev)} {...props}>
-      {children}
-    </button>
-  );
-}
-
-export function SidebarCollapseTrigger(props: ComponentProps<'button'>) {
-  const { collapsed, setCollapsed } = useSidebar();
-
-  return (
-    <button
-      type="button"
-      aria-label="Collapse Sidebar"
-      data-collapsed={collapsed}
-      onClick={() => {
-        setCollapsed((prev) => !prev);
-      }}
-      {...props}
-    >
-      {props.children}
-    </button>
-  );
-}
-
-/**
- * scroll to the element if `active` is true
- */
-export function useAutoScroll(active: boolean, ref: RefObject<HTMLElement | null>) {
-  const { mode } = useSidebar();
-
-  useEffect(() => {
-    if (active && ref.current) {
-      scrollIntoView(ref.current, {
-        boundary: document.getElementById(mode === 'drawer' ? 'nd-sidebar-mobile' : 'nd-sidebar'),
-        scrollMode: 'if-needed',
-      });
-    }
-  }, [active, mode, ref]);
-}
diff --git a/apps/eclipse/src/components/layout/sidebar/link-item.tsx b/apps/eclipse/src/components/layout/sidebar/link-item.tsx
deleted file mode 100644
index 564131a41e..0000000000
--- a/apps/eclipse/src/components/layout/sidebar/link-item.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import type * as Base from './base';
-import type { LinkItemType } from '../link-item';
-
-type InternalComponents = Pick<
-  typeof Base,
-  | 'SidebarFolder'
-  | 'SidebarFolderLink'
-  | 'SidebarFolderContent'
-  | 'SidebarFolderTrigger'
-  | 'SidebarItem'
->;
-
-export function createLinkItemRenderer({
-  SidebarFolder,
-  SidebarFolderContent,
-  SidebarFolderLink,
-  SidebarFolderTrigger,
-  SidebarItem,
-}: InternalComponents) {
-  /**
-   * Render sidebar items from page tree
-   */
-  return function SidebarLinkItem({
-    item,
-    ...props
-  }: HTMLAttributes<HTMLElement> & {
-    item: Exclude<LinkItemType, { type: 'icon' }>;
-  }) {
-    if (item.type === 'custom') return <div {...props}>{item.children}</div>;
-
-    if (item.type === 'menu')
-      return (
-        <SidebarFolder {...props}>
-          {item.url ? (
-            <SidebarFolderLink href={item.url} external={item.external}>
-              {item.icon}
-              {item.text}
-            </SidebarFolderLink>
-          ) : (
-            <SidebarFolderTrigger>
-              {item.icon}
-              {item.text}
-            </SidebarFolderTrigger>
-          )}
-          <SidebarFolderContent>
-            {item.items.map((child, i) => (
-              <SidebarLinkItem key={i} item={child} />
-            ))}
-          </SidebarFolderContent>
-        </SidebarFolder>
-      );
-
-    return (
-      <SidebarItem href={item.url} icon={item.icon} external={item.external} {...props}>
-        {item.text}
-      </SidebarItem>
-    );
-  };
-}
diff --git a/apps/eclipse/src/components/layout/sidebar/page-tree.tsx b/apps/eclipse/src/components/layout/sidebar/page-tree.tsx
deleted file mode 100644
index 52707689b5..0000000000
--- a/apps/eclipse/src/components/layout/sidebar/page-tree.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { useTreeContext, useTreePath } from '@fumadocs/base-ui/contexts/tree';
-import { type FC, type ReactNode, useMemo, Fragment } from 'react';
-import type * as PageTree from 'fumadocs-core/page-tree';
-import type * as Base from './base';
-
-export interface SidebarPageTreeComponents {
-  Item: FC<{ item: PageTree.Item }>;
-  Folder: FC<{ item: PageTree.Folder; children: ReactNode }>;
-  Separator: FC<{ item: PageTree.Separator }>;
-}
-
-type InternalComponents = Pick<
-  typeof Base,
-  | 'SidebarSeparator'
-  | 'SidebarFolder'
-  | 'SidebarFolderLink'
-  | 'SidebarFolderContent'
-  | 'SidebarFolderTrigger'
-  | 'SidebarItem'
->;
-
-export function createPageTreeRenderer({
-  SidebarFolder,
-  SidebarFolderContent,
-  SidebarFolderLink,
-  SidebarFolderTrigger,
-  SidebarSeparator,
-  SidebarItem,
-}: InternalComponents) {
-  function PageTreeFolder({ item, children }: { item: PageTree.Folder; children: ReactNode }) {
-    const path = useTreePath();
-
-    return (
-      <SidebarFolder
-        collapsible={item.collapsible}
-        active={path.includes(item)}
-        defaultOpen={item.defaultOpen}
-      >
-        {item.index ? (
-          <SidebarFolderLink href={item.index.url} external={item.index.external}>
-            {item.icon}
-            {item.name}
-          </SidebarFolderLink>
-        ) : (
-          <SidebarFolderTrigger>
-            {item.icon}
-            {item.name}
-          </SidebarFolderTrigger>
-        )}
-        <SidebarFolderContent>{children}</SidebarFolderContent>
-      </SidebarFolder>
-    );
-  }
-
-  /**
-   * Render sidebar items from page tree
-   */
-  return function SidebarPageTree(components: Partial<SidebarPageTreeComponents>) {
-    const { root } = useTreeContext();
-    const { Separator, Item, Folder = PageTreeFolder } = components;
-
-    return useMemo(() => {
-      function renderSidebarList(items: PageTree.Node[]) {
-        return items.map((item, i) => {
-          if (item.type === 'separator') {
-            if (Separator) return <Separator key={i} item={item} />;
-            return (
-              <SidebarSeparator key={i}>
-                {item.icon}
-                {item.name}
-              </SidebarSeparator>
-            );
-          }
-
-          if (item.type === 'folder') {
-            return (
-              <Folder key={i} item={item}>
-                {renderSidebarList(item.children)}
-              </Folder>
-            );
-          }
-
-          if (Item) return <Item key={item.url} item={item} />;
-          return (
-            <SidebarItem key={item.url} href={item.url} external={item.external} icon={item.icon}>
-              {item.name}
-            </SidebarItem>
-          );
-        });
-      }
-
-      return <Fragment key={root.$id}>{renderSidebarList(root.children)}</Fragment>;
-    }, [Folder, Item, Separator, root]);
-  };
-}
diff --git a/apps/eclipse/src/components/layout/sidebar/tabs/dropdown.tsx b/apps/eclipse/src/components/layout/sidebar/tabs/dropdown.tsx
deleted file mode 100644
index 289809ab90..0000000000
--- a/apps/eclipse/src/components/layout/sidebar/tabs/dropdown.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-'use client';
-import { Check, ChevronsUpDown } from 'lucide-react';
-import { type ComponentProps, type ReactNode, useMemo, useState } from 'react';
-import { usePathname } from 'fumadocs-core/framework';
-import { cn } from '@prisma-docs/ui/lib/cn';
-import { normalize, isActive } from '../../../../lib/urls';
-import { useSidebar } from '../base';
-import { Popover, PopoverContent, PopoverTrigger } from '../../../ui/popover';
-import type { SidebarTab } from './index';
-import type { LinkItemType } from '../../link-item';
-import { LinkItem } from '../../link-item';
-
-export interface SidebarTabWithProps extends SidebarTab {
-  props?: ComponentProps<'a'>;
-}
-
-export function SidebarTabsDropdown({
-  links,
-  placeholder,
-  ...props
-}: {
-  placeholder?: ReactNode;
-  links: LinkItemType[];
-} & ComponentProps<'button'>) {
-  const [open, setOpen] = useState(false);
-  const { closeOnRedirect } = useSidebar();
-  const pathname = usePathname();
-
-  function hasUrl(item: LinkItemType): item is LinkItemType & { url: string } {
-    return (
-      'url' in item &&
-      typeof (item as any).url === 'string' &&
-      !!(item as any).url
-    );
-  }
-  function isMenu(
-    item: LinkItemType,
-  ): item is Extract<LinkItemType, { type: 'menu' }> {
-    return (item as any)?.type === 'menu';
-  }
-
-  const options = useMemo(() => {
-    return links.filter(
-      (item) => item.type !== 'icon' && (hasUrl(item) || isMenu(item)),
-    );
-  }, [links]);
-
-  const isLinkActive = (item: LinkItemType & { url: string }) => {
-    // Only items with a URL are considered
-    const activeMode = (item as any).active ?? 'url';
-    return isActive(item.url, pathname, activeMode === 'nested-url');
-  };
-  const isMenuAnyChildActive = (
-    item: Extract<LinkItemType, { type: 'menu' }>,
-  ) => {
-    for (const child of item.items) {
-      if ('url' in child && child.url && isLinkActive(child as any))
-        return true;
-    }
-    return false;
-  };
-
-  const selected = useMemo(() => {
-    return options.findLast((item) =>
-      hasUrl(item)
-        ? isLinkActive(item)
-        : isMenu(item) && isMenuAnyChildActive(item),
-    );
-  }, [options, pathname]);
-
-  const onClick = () => setOpen(false);
-
-  const item = selected ? (
-    <>
-      {'icon' in selected && (selected as any).icon && (
-        <div className="size-9 shrink-0 empty:hidden md:size-5">
-          {selected.icon}
-        </div>
-      )}
-      <div>
-        <p className="text-sm font-medium">
-          {'text' in selected ? (selected as any).text : null}
-        </p>
-        <p className="text-sm text-fd-muted-foreground empty:hidden md:hidden">
-          {'description' in selected ? (selected as any).description : null}
-        </p>
-      </div>
-    </>
-  ) : (
-    placeholder
-  );
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      {item && (
-        <PopoverTrigger
-          {...props}
-          className={cn(
-            'flex items-center gap-2 rounded-lg p-2 border bg-fd-secondary/50 text-start text-fd-secondary-foreground transition-colors hover:bg-fd-accent data-open:bg-fd-accent data-open:text-fd-accent-foreground',
-            props.className,
-          )}
-        >
-          {item}
-          <ChevronsUpDown className="shrink-0 ms-auto size-4 text-fd-muted-foreground" />
-        </PopoverTrigger>
-      )}
-      <PopoverContent className="flex flex-col gap-1 w-(--anchor-width) p-1 fd-scroll-container">
-        {options.map((opt, idx) => {
-          if (hasUrl(opt)) {
-            const active =
-              selected &&
-              hasUrl(selected as any) &&
-              opt.url === (selected as any).url;
-            return (
-              <LinkItem
-                key={`${opt.url}-${idx}`}
-                item={opt as any}
-                onClick={onClick}
-                className={cn(
-                  'flex items-center gap-2 rounded-lg p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground',
-                )}
-              >
-                {'icon' in opt && (opt as any).icon && (
-                  <div className="shrink-0 size-9 md:mb-auto md:size-5 empty:hidden">
-                    {(opt as any).icon}
-                  </div>
-                )}
-                <div>
-                  <p className="text-sm font-medium leading-none">
-                    {'text' in opt ? (opt as any).text : null}
-                  </p>
-                  <p className="text-[0.8125rem] text-fd-muted-foreground mt-1 empty:hidden">
-                    {'description' in opt ? (opt as any).description : null}
-                  </p>
-                </div>
-
-                <Check
-                  className={cn(
-                    'shrink-0 ms-auto size-3.5 text-fd-primary',
-                    !active && 'invisible',
-                  )}
-                />
-              </LinkItem>
-            );
-          }
-
-          if (isMenu(opt)) {
-            return (
-              <div key={`menu-${idx}`} className="flex flex-col gap-1.5">
-                <div className="px-1 pt-1 text-[0.8125rem] font-medium text-fd-muted-foreground">
-                  {opt.text}
-                </div>
-                {opt.items.map((child, cIdx) => {
-                  if (!('url' in child) || !child.url) return null;
-                  const childActive = isLinkActive(child as any);
-                  return (
-                    <LinkItem
-                      key={`${child.url}-${cIdx}`}
-                      item={child as any}
-                      onClick={onClick}
-                      className={cn(
-                        'flex items-center gap-2 rounded-lg p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground',
-                      )}
-                    >
-                      {'icon' in child && (child as any).icon && (
-                        <div className="shrink-0 size-9 md:mb-auto md:size-5 empty:hidden">
-                          {(child as any).icon}
-                        </div>
-                      )}
-                      <div>
-                        <p className="text-sm font-medium leading-none">
-                          {'text' in child ? (child as any).text : null}
-                        </p>
-                        <p className="text-[0.8125rem] text-fd-muted-foreground mt-1 empty:hidden">
-                          {'description' in child
-                            ? (child as any).description
-                            : null}
-                        </p>
-                      </div>
-                      <Check
-                        className={cn(
-                          'shrink-0 ms-auto size-3.5 text-fd-primary',
-                          !childActive && 'invisible',
-                        )}
-                      />
-                    </LinkItem>
-                  );
-                })}
-              </div>
-            );
-          }
-
-          return null;
-        })}
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-export function isTabActive(tab: SidebarTab, pathname: string) {
-  if (tab.urls) return tab.urls.has(normalize(pathname));
-
-  return isActive(tab.url, pathname, true);
-}
diff --git a/apps/eclipse/src/components/layout/sidebar/tabs/index.tsx b/apps/eclipse/src/components/layout/sidebar/tabs/index.tsx
deleted file mode 100644
index 0f7a52976f..0000000000
--- a/apps/eclipse/src/components/layout/sidebar/tabs/index.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import type * as PageTree from 'fumadocs-core/page-tree';
-import type { ReactNode } from 'react';
-
-export interface SidebarTab {
-  /**
-   * Redirect URL of the folder, usually the index page
-   */
-  url: string;
-
-  icon?: ReactNode;
-  title: ReactNode;
-  description?: ReactNode;
-
-  /**
-   * Detect from a list of urls
-   */
-  urls?: Set<string>;
-  unlisted?: boolean;
-}
-
-
-
-export function getSidebarTabs( tree: PageTree.Root): SidebarTab[] {
-  const results: SidebarTab[] = [];
-
-  function scanOptions(node: PageTree.Root | PageTree.Folder, unlisted?: boolean) {
-    if ('root' in node && node.root) {
-      const urls = getFolderUrls(node);
-
-      if (urls.size > 0) {
-        const option: SidebarTab = {
-          url: urls.values().next().value ?? '',
-          title: node.name,
-          icon: node.icon,
-          unlisted,
-          description: node.description,
-          urls,
-        };
-
-        const mapped = option;
-        if (mapped) results.push(mapped);
-      }
-    }
-
-    for (const child of node.children) {
-      if (child.type === 'folder') scanOptions(child, unlisted);
-    }
-  }
-
-  scanOptions(tree);
-  if (tree.fallback) scanOptions(tree.fallback, true);
-
-  return results;
-}
-
-function getFolderUrls(folder: PageTree.Folder, output: Set<string> = new Set()): Set<string> {
-  if (folder.index) output.add(folder.index.url);
-
-  for (const child of folder.children) {
-    if (child.type === 'page' && !child.external) output.add(child.url);
-    if (child.type === 'folder') getFolderUrls(child, output);
-  }
-
-  return output;
-}
diff --git a/apps/eclipse/src/components/layout/theme-toggle.tsx b/apps/eclipse/src/components/layout/theme-toggle.tsx
deleted file mode 100644
index 0c145ff572..0000000000
--- a/apps/eclipse/src/components/layout/theme-toggle.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-'use client';
-import { cva } from 'class-variance-authority';
-import { Airplay, Moon, Sun } from 'lucide-react';
-import { useTheme } from 'next-themes';
-import { ComponentProps, useEffect, useState } from 'react';
-import { cn } from '@prisma-docs/ui/lib/cn';
-
-const itemVariants = cva('size-6.5 rounded-full p-1.5 text-fd-muted-foreground', {
-  variants: {
-    active: {
-      true: 'bg-fd-accent text-fd-accent-foreground',
-      false: 'text-fd-muted-foreground',
-    },
-  },
-});
-
-const full = [['light', Sun] as const, ['dark', Moon] as const, ['system', Airplay] as const];
-
-export function ThemeToggle({
-  className,
-  mode = 'light-dark',
-  ...props
-}: ComponentProps<'div'> & {
-  mode?: 'light-dark' | 'light-dark-system';
-}) {
-  const { setTheme, theme, resolvedTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  const container = cn('inline-flex items-center rounded-full border p-1', className);
-
-  if (mode === 'light-dark') {
-    const value = mounted ? resolvedTheme : null;
-
-    return (
-      <button
-        className={container}
-        aria-label={`Toggle Theme`}
-        onClick={() => setTheme(value === 'light' ? 'dark' : 'light')}
-        data-theme-toggle=""
-      >
-        {full.map(([key, Icon]) => {
-          if (key === 'system') return;
-
-          return (
-            <Icon
-              key={key}
-              fill="currentColor"
-              className={cn(itemVariants({ active: value === key }))}
-            />
-          );
-        })}
-      </button>
-    );
-  }
-
-  const value = mounted ? theme : null;
-
-  return (
-    <div className={container} data-theme-toggle="" {...props}>
-      {full.map(([key, Icon]) => (
-        <button
-          key={key}
-          aria-label={key}
-          className={cn(itemVariants({ active: value === key }))}
-          onClick={() => setTheme(key)}
-        >
-          <Icon className="size-full" fill="currentColor" />
-        </button>
-      ))}
-    </div>
-  );
-}
diff --git a/apps/eclipse/src/components/nav.tsx b/apps/eclipse/src/components/nav.tsx
new file mode 100644
index 0000000000..aac4929532
--- /dev/null
+++ b/apps/eclipse/src/components/nav.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import Link from 'next/link';
+import { useSidebar } from './sidebar-context';
+
+export function Nav() {
+  const { toggle } = useSidebar();
+
+  return (
+    <header data-component="nav" className="fixed top-0 left-0 bottom-auto right-0 z-40 px-5 h-[3.25rem] flex flex-row items-center justify-between gap-6 bg-background-neutral/50 border-b border-stroke-neutral backdrop-blur-surface">
+      <div className="flex flex-row items-center gap-3">
+        <Link href="/" className="flex flex-row items-center justify-start gap-3">
+          <div className="size-7 flex flex-row items-center justify-center gap-0 bg-background-neutral-reverse text-foreground-neutral-reverse rounded-square">
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className="size-4 fill-current">
+              <g clipPath="url(#clip0_3559_19)">
+                <path opacity="0.4" d="M10.1953 3.17813C13.0875 5.04844 15 8.30156 15 12C15 15.6984 13.0875 18.9469 10.1953 20.8172C10.7766 20.9344 11.3813 21 12 21C16.9688 21 21 16.9688 21 12C21 7.03125 16.9688 3 12 3C11.3813 3 10.7812 3.06094 10.1953 3.17813Z" className="fill-current" />
+                <path d="M12 24C8.8174 24 5.76516 22.7357 3.51472 20.4853C1.26428 18.2348 0 15.1826 0 12C0 8.8174 1.26428 5.76516 3.51472 3.51472C5.76516 1.26428 8.8174 0 12 0C15.1826 0 18.2348 1.26428 20.4853 3.51472C22.7357 5.76516 24 8.8174 24 12C24 15.1826 22.7357 18.2348 20.4853 20.4853C18.2348 22.7357 15.1826 24 12 24ZM12 3C11.3813 3 10.7812 3.06094 10.1953 3.17813C13.0875 5.04844 15 8.30156 15 12C15 15.6984 13.0875 18.9469 10.1953 20.8172C10.7766 20.9344 11.3813 21 12 21C16.9688 21 21 16.9688 21 12C21 7.03125 16.9688 3 12 3Z" className="fill-current" />
+              </g>
+              <defs>
+              </defs>
+            </svg>
+          </div>
+
+          <p className="font-medium text-sm text-foreground-neutral">Eclipse <span className="font-normal text-sm text-foreground-neutral-weak">by</span> Prisma</p>
+        </Link>
+      </div>
+
+      <button
+        onClick={toggle}
+        className="md:hidden flex flex-row items-center justify-center size-7 text-foreground-neutral-weak hover:text-foreground-neutral transition-colors cursor-pointer"
+        aria-label="Toggle sidebar"
+      >
+        <svg className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+      </button>
+    </header>
+  );
+}
diff --git a/apps/eclipse/src/components/page.tsx b/apps/eclipse/src/components/page.tsx
new file mode 100644
index 0000000000..2cc5793c04
--- /dev/null
+++ b/apps/eclipse/src/components/page.tsx
@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+import { TableOfContents } from './toc';
+
+export function Page({
+  title,
+  description,
+  toc,
+  children,
+}: {
+  title: string;
+  description?: string;
+  toc: { title: ReactNode; url: string; depth: number }[];
+  children: ReactNode;
+}) {
+  return (
+    <article>
+      <header className="px-6 md:pl-[18.5rem] md:pr-12 pt-[4.75rem] md:pt-[6.25rem] pb-6 md:pb-12 flex flex-col items-stretch justify-start gap-2 border-b border-stroke-neutral">
+        <h1 className="font-bold text-3xl text-foreground-neutral">{title}</h1>
+
+        { description && (
+          <p className="font-normal text-base text-foreground-neutral-weak">
+            { description }
+          </p>
+        ) }
+      </header>
+      <section className="px-6 md:pl-[18.5rem] md:pr-12 py-6 md:py-12 flex flex-row items-stretch justify-start gap-12">
+        <div className="grow-1">
+          <div className="prose">
+            { children }
+          </div>
+        </div>
+        <div className="grow-0 shrink-0 w-[15rem] hidden xl:block">
+          <TableOfContents items={toc} />
+        </div>
+      </section>
+    </article>
+  );
+}
diff --git a/apps/eclipse/src/components/provider.tsx b/apps/eclipse/src/components/provider.tsx
deleted file mode 100644
index 8684a2a702..0000000000
--- a/apps/eclipse/src/components/provider.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-"use client";
-import { RootProvider } from "fumadocs-ui/provider/next";
-import { NextProvider } from "fumadocs-core/framework/next";
-import CustomSearchDialog from "@/components/search";
-import type { ReactNode } from "react";
-
-export function Provider({ children }: { children: ReactNode }) {
-  return (
-    <NextProvider>
-      <RootProvider
-        search={{
-          SearchDialog: CustomSearchDialog,
-        }}
-      >
-        {children}
-      </RootProvider>
-    </NextProvider>
-  );
-}
diff --git a/apps/eclipse/src/components/search.tsx b/apps/eclipse/src/components/search.tsx
index 85442cd447..6276f74db9 100644
--- a/apps/eclipse/src/components/search.tsx
+++ b/apps/eclipse/src/components/search.tsx
@@ -1,81 +1,151 @@
-"use client";
-import { Button } from "@base-ui/react";
-import { useDocsSearch } from "fumadocs-core/search/client";
-import {
-  SearchDialog,
-  SearchDialogClose,
-  SearchDialogContent,
-  SearchDialogHeader,
-  SearchDialogIcon,
-  SearchDialogInput,
-  SearchDialogList,
-  SearchDialogOverlay,
-  SearchDialogFooter,
-  type SharedProps,
-} from "fumadocs-ui/components/dialog/search";
-import { useEffect } from "react";
-
-// Extend Window interface to include Kapa
-declare global {
-  interface Window {
-    Kapa?: {
-      open: (options?: { query?: string; submit?: boolean }) => void;
-    };
-  }
-}
+'use client';
+
+import { useDocsSearch } from 'fumadocs-core/search/client';
+import { useRouter } from 'next/navigation';
+import { createPortal } from 'react-dom';
+import { useEffect, useRef, useCallback, useState } from 'react';
+
+export function SearchToggle() {
+  const [open, setOpen] = useState(false);
 
-export default function CustomSearchDialog(props: SharedProps) {
-  const { search, setSearch, query } = useDocsSearch({
-    type: "static",
-  });
-
-  useEffect(() => {}, [search, query]);
-  const handleAskAI = () => {
-    // Close the search dialog first
-    props.onOpenChange?.(false);
-    // Open Kapa with the current search query
-    if (window.Kapa) {
-      window.Kapa.open({ query: search, submit: search.length > 0 });
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+      }
     }
-  };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, []);
 
   return (
-    <SearchDialog
-      search={search}
-      onSearchChange={setSearch}
-      isLoading={query.isLoading}
-      {...props}
-    >
-      <SearchDialogOverlay suppressHydrationWarning />
-      <SearchDialogContent>
-        <SearchDialogHeader>
-          <SearchDialogIcon />
-          <SearchDialogInput />
-          <SearchDialogClose />
-        </SearchDialogHeader>
-        <SearchDialogList items={query.data !== "empty" ? query.data : null} />
-        <SearchDialogFooter className="border-t border-fd-border p-2">
-          <Button
-            onClick={handleAskAI}
-            className="flex w-full items-center justify-center gap-2 rounded-lg bg-fd-primary px-4 py-2.5 text-sm font-medium text-fd-primary-foreground transition-all hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-fd-ring focus:ring-offset-2"
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        className="flex flex-row items-center justify-between gap-2 h-8 px-3 bg-background-default border border-stroke-neutral text-sm text-foreground-neutral-weak hover:text-foreground-neutral rounded-square shadow-box-low transition-colors cursor-pointer"
+      >
+        <span className="text-sm text-foreground-neutral-weak">Search...</span>
+        <kbd className="-mr-1.5 px-1.5 py-0.5 bg-background-neutral font-mono text-xs text-foreground-neutral-weaker rounded-square-low">CMD+K</kbd>
+      </button>
+
+      {open && createPortal(
+        <SearchDialog onClose={() => setOpen(false)} />,
+        document.body,
+      )}
+    </>
+  );
+}
+
+function SearchDialog({ onClose }: { onClose: () => void }) {
+  const router = useRouter();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { search, setSearch, query } = useDocsSearch({ type: 'static' });
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    document.body.style.overflow = 'hidden';
+    return () => { document.body.style.overflow = ''; };
+  }, []);
+
+  const onSelect = useCallback(
+    (url: string) => {
+      router.push(url);
+      onClose();
+    },
+    [router, onClose],
+  );
+
+  const results = query.data && query.data !== 'empty' ? query.data : [];
+
+  return (
+    <div className="fixed inset-0 z-[60] flex items-start justify-center pt-[15vh]" onClick={onClose}>
+      <div className="fixed inset-0 bg-background-default/50 backdrop-blur-surface" aria-hidden="true" />
+
+      <div
+        data-component="search-dialog"
+        className="relative z-10 w-full max-w-lg bg-background-default border border-stroke-neutral rounded-square shadow-box overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape') onClose();
+        }}
+      >
+        {/* Search input */}
+        <div className="px-4 h-12 flex flex-row items-center gap-2 border-b last:border-b-none border-stroke-neutral">
+          <input
+            ref={inputRef}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search documentation..."
+            className="flex-1 h-10 bg-transparent text-base text-foreground-neutral placeholder:text-foreground-neutral-weaker outline-none"
+          />
+          <kbd
+            className="px-2 h-6 flex flex-row items-center bg-background-neutral font-mono text-xs text-foreground-neutral-weaker rounded-square-low"
+            onClick={onClose}
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" />
-            </svg>
-            Ask AI
-          </Button>
-        </SearchDialogFooter>
-      </SearchDialogContent>
-    </SearchDialog>
+            ESC
+          </kbd>
+        </div>
+
+        {/* Results */}
+        <div className="max-h-[50vh] overflow-y-auto">
+          {query.isLoading && (
+            <p className="p-4 text-sm text-foreground-neutral-weak text-center">Searching...</p>
+          )}
+
+          {!query.isLoading && search.length > 0 && results.length === 0 && (
+            <p className="p-4 text-sm text-foreground-neutral-weak text-center">No results found.</p>
+          )}
+
+          {!query.isLoading && results.length > 0 && (
+            <ul className="p-4 flex flex-col items-stretch justify-start gap-2">
+              {results.map((result) => (
+                <li key={result.id}>
+                  <button
+                    onClick={() => onSelect(result.url)}
+                    className="w-full px-2 py-1 flex flex-col items-start gap-1 text-left bg-background-default hover:bg-background-neutral rounded-square-low transition-colors duration-50 cursor-pointer"
+                  >
+                    <span className="flex items-center gap-3">
+                      <ResultIcon type={result.type} />
+                      <span className="text-sm font-medium text-foreground-neutral line-clamp-1">{result.content}</span>
+                    </span>
+                    <span className="ml-7 text-xs text-foreground-neutral-weak truncate max-w-full">
+                      { result.url.replace(/^\//, '').replace(/\//g, ' / ') || 'Home' }
+                    </span>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ResultIcon({ type }: { type: 'page' | 'heading' | 'text' }) {
+  if (type === 'page') {
+    return (
+      <svg className="size-4 text-foreground-neutral-weak shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+      </svg>
+    );
+  }
+
+  if (type === 'heading') {
+    return (
+      <svg className="size-4 text-foreground-neutral-weak shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5l-3.9 19.5m-2.1-19.5l-3.9 19.5" />
+      </svg>
+    );
+  }
+
+  return (
+    <svg className="size-4 text-foreground-neutral-weak shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" />
+    </svg>
   );
 }
diff --git a/apps/eclipse/src/components/sidebar-context.tsx b/apps/eclipse/src/components/sidebar-context.tsx
new file mode 100644
index 0000000000..ba4fb11887
--- /dev/null
+++ b/apps/eclipse/src/components/sidebar-context.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import { createContext, useContext, useState, useCallback, useEffect, type ReactNode } from 'react';
+import { usePathname } from 'next/navigation';
+
+interface SidebarContextValue {
+  open: boolean;
+  toggle: () => void;
+  close: () => void;
+}
+
+const SidebarContext = createContext<SidebarContextValue>({
+  open: false,
+  toggle: () => {},
+  close: () => {},
+});
+
+export function SidebarProvider({ children }: { children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+
+  const toggle = useCallback(() => setOpen((prev) => !prev), []);
+  const close = useCallback(() => setOpen(false), []);
+
+  // Close sidebar on navigation
+  useEffect(() => {
+    setOpen(false);
+  }, [pathname]);
+
+  // Lock body scroll when open on mobile
+  useEffect(() => {
+    const mq = window.matchMedia('(max-width: 767px)');
+    if (open && mq.matches) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => { document.body.style.overflow = ''; };
+  }, [open]);
+
+  // Close on escape key
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') setOpen(false);
+    }
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, []);
+
+  return (
+    <SidebarContext.Provider value={{ open, toggle, close }}>
+      {children}
+    </SidebarContext.Provider>
+  );
+}
+
+export function useSidebar() {
+  return useContext(SidebarContext);
+}
diff --git a/apps/eclipse/src/components/sidebar.tsx b/apps/eclipse/src/components/sidebar.tsx
new file mode 100644
index 0000000000..72049e6522
--- /dev/null
+++ b/apps/eclipse/src/components/sidebar.tsx
@@ -0,0 +1,133 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useState } from 'react';
+import type { Root, Node, Separator, Item, Folder } from 'fumadocs-core/page-tree';
+import { SearchToggle } from './search';
+import { useSidebar } from './sidebar-context';
+
+export function Sidebar({ tree }: { tree: Root }) {
+  const { open, close } = useSidebar();
+  const pathname = usePathname();
+
+  return (
+    <>
+      {/* Backdrop overlay — mobile only */}
+      <div
+        className={`fixed inset-0 z-40 bg-background-default/50 backdrop-blur-surface transition-opacity md:hidden ${
+          open ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        }`}
+        onClick={close}
+        aria-hidden="true"
+      />
+
+      {/* Sidebar */}
+      <aside
+        data-component="sidebar"
+        className={`fixed top-2 md:top-[3.75rem] left-2 bottom-2 right-auto z-50 w-[15rem] flex flex-col items-stretch justify-start bg-background-default border border-stroke-neutral rounded-square-high shadow-box overflow-hidden transition-transform duration-150 ${
+          open ? 'translate-x-0' : '-translate-x-[calc(100%+0.5rem)] md:translate-x-0'
+        }`}
+      >
+        <div className="grow-0 p-3 flex flex-col items-stretch justify-start gap-3 bg-background-default/50 border-b last:border-b-none border-stroke-neutral backdrop-blur-surface-low">
+          <SearchToggle />
+        </div>
+        <div className="grow-1 p-3 flex flex-col items-stretch justify-start gap-3 bg-background-default border-b last:border-b-none border-stroke-neutral overflow-y-scroll no-scrollbar">
+          <SidebarNodes nodes={tree.children} pathname={pathname} />
+        </div>
+      </aside>
+    </>
+  );
+}
+
+function SidebarNodes({ nodes, pathname }: { nodes: Node[]; pathname: string }) {
+  return (
+    <ul data-component="sidebar-nodes" className="flex flex-col items-stretch justify-start gap-0.5">
+      {nodes.map((node, i) => (
+        <SidebarNode key={i} node={node} pathname={pathname} />
+      ))}
+    </ul>
+  );
+}
+
+function SidebarNode({ node, pathname }: { node: Node; pathname: string }) {
+  if (node.type === 'separator') {
+    return <SidebarSeparator node={node} />;
+  }
+
+  if (node.type === 'folder') {
+    return <SidebarFolder node={node} pathname={pathname} />;
+  }
+
+  return <SidebarItem node={node} pathname={pathname} />;
+}
+
+function SidebarSeparator({ node }: { node: Separator }) {
+  if (!node.name) return <hr className="mx-2 my-3 border-stroke-neutral" />;
+
+  return (
+    <li data-component="sidebar-separator" className="mt-6 first:mt-0 mb-2 px-2 font-semibold uppercase tracking-wider text-2xs text-foreground-neutral-weak">
+      {node.name}
+    </li>
+  );
+}
+
+function SidebarItem({ node, pathname }: { node: Item; pathname: string }) {
+  const active = pathname === node.url;
+
+  return (
+    <li data-component="sidebar-item">
+      <Link
+        href={node.url}
+        className={`px-2 h-7 flex flex-row items-center justify-start gap-2 font-medium text-sm rounded-square transition-all duration-50 ${
+          active
+            ? 'bg-background-neutral hover:bg-background-neutral-strong text-foreground-neutral'
+            : 'bg-background-default hover:bg-background-neutral text-foreground-neutral'
+        }`}
+      >
+        {node.name}
+      </Link>
+    </li>
+  );
+}
+
+function SidebarFolder({ node, pathname }: { node: Folder; pathname: string }) {
+  const isActive = hasActiveChild(node, pathname);
+  const [open, setOpen] = useState(node.defaultOpen ?? isActive);
+
+  return (
+    <li data-component="sidebar-folder">
+      <button
+        onClick={() => setOpen(!open)}
+        className={`w-full px-2 h-7 flex flex-row items-center justify-between gap-2 font-medium text-sm rounded-square transition-all duration-50 ${
+          open
+            ? 'bg-background-neutral hover:bg-background-neutral-strong text-foreground-neutral'
+            : 'bg-background-default hover:bg-background-neutral text-foreground-neutral'
+        }`}
+      >
+        { node.name }
+        <svg className={`h-3 w-3 transition-transform ${open ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5} >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+        </svg>
+      </button>
+
+      {open && (
+        <ul className="my-1 pl-3 flex flex-col items-stretch justify-center gap-1">
+          {node.index && <SidebarItem node={node.index} pathname={pathname} />}
+          {node.children.map((child, i) => (
+            <SidebarNode key={i} node={child} pathname={pathname} />
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+}
+
+function hasActiveChild(node: Folder, pathname: string): boolean {
+  if (node.index?.url === pathname) return true;
+  return node.children.some((child) => {
+    if (child.type === 'page') return child.url === pathname;
+    if (child.type === 'folder') return hasActiveChild(child, pathname);
+    return false;
+  });
+}
diff --git a/apps/eclipse/src/components/toc.tsx b/apps/eclipse/src/components/toc.tsx
new file mode 100644
index 0000000000..89875f1439
--- /dev/null
+++ b/apps/eclipse/src/components/toc.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import { useEffect, useState, type ReactNode } from 'react';
+
+interface TOCItem {
+  title: ReactNode;
+  url: string;
+  depth: number;
+}
+
+function useActiveHeading(items: TOCItem[]) {
+  const [activeId, setActiveId] = useState<string>('');
+
+  useEffect(() => {
+    const ids = items.map((item) => item.url.replace('#', ''));
+    const elements = ids
+      .map((id) => document.getElementById(id))
+      .filter(Boolean) as HTMLElement[];
+
+    if (elements.length === 0) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id);
+          }
+        }
+      },
+      { rootMargin: '0px 0px -80% 0px', threshold: 0 },
+    );
+
+    for (const el of elements) observer.observe(el);
+    return () => observer.disconnect();
+  }, [items]);
+
+  return activeId;
+}
+
+export function TableOfContents({ items }: { items: TOCItem[] }) {
+  const activeId = useActiveHeading(items);
+
+  if (items.length === 0) return null;
+
+  return (
+    <nav className="my-0.5 sticky top-[6.25rem] flex flex-col items-stretch justify-start gap-6">
+      <ul className="flex flex-col items-stretch justify-start gap-1 border-l border-stroke-neutral">
+        {items.map((item) => {
+          const isActive = activeId === item.url.replace('#', '');
+          return (
+            <li key={item.url}>
+              <a
+                href={item.url}
+                className={`-ml-[1px] px-2 flex flex-row items-center justify-start text-sm truncate border-l transition-colors duration-50 ${
+                  isActive
+                    ? 'text-foreground-neutral border-stroke-ppg'
+                    : 'text-foreground-neutral-weak hover:text-foreground-neutral border-stroke-neutral'
+                }`}
+                style={{ paddingLeft: `${(item.depth - 1) * 1}rem` }}
+              >
+                {item.title}
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}
diff --git a/apps/eclipse/src/components/toc/clerk.tsx b/apps/eclipse/src/components/toc/clerk.tsx
deleted file mode 100644
index 2671b3722b..0000000000
--- a/apps/eclipse/src/components/toc/clerk.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-'use client';
-import * as Primitive from 'fumadocs-core/toc';
-import { type ComponentProps, useEffect, useRef, useState } from 'react';
-import { cn } from '@prisma-docs/ui/lib/cn';
-import { TocThumb, useTOCItems } from './index';
-import { mergeRefs } from '../../lib/merge-refs';
-import { useI18n } from '@fumadocs/base-ui/contexts/i18n';
-
-export function TOCItems({ ref, className, ...props }: ComponentProps<'div'>) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const items = useTOCItems();
-  const { text } = useI18n();
-
-  const [svg, setSvg] = useState<{
-    path: string;
-    width: number;
-    height: number;
-  }>();
-
-  useEffect(() => {
-    if (!containerRef.current) return;
-    const container = containerRef.current;
-
-    function onResize(): void {
-      if (container.clientHeight === 0) return;
-      let w = 0,
-        h = 0;
-      const d: string[] = [];
-      for (let i = 0; i < items.length; i++) {
-        const element: HTMLElement | null = container.querySelector(
-          `a[href="#${items[i].url.slice(1)}"]`,
-        );
-        if (!element) continue;
-
-        const styles = getComputedStyle(element);
-        const offset = getLineOffset(items[i].depth) + 1,
-          top = element.offsetTop + parseFloat(styles.paddingTop),
-          bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
-
-        w = Math.max(offset, w);
-        h = Math.max(h, bottom);
-
-        d.push(`${i === 0 ? 'M' : 'L'}${offset} ${top}`);
-        d.push(`L${offset} ${bottom}`);
-      }
-
-      setSvg({
-        path: d.join(' '),
-        width: w + 1,
-        height: h,
-      });
-    }
-
-    const observer = new ResizeObserver(onResize);
-    onResize();
-
-    observer.observe(container);
-    return () => {
-      observer.disconnect();
-    };
-  }, [items]);
-
-  if (items.length === 0)
-    return (
-      <div className="rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground">
-        {text.tocNoHeadings}
-      </div>
-    );
-
-  return (
-    <>
-      {svg && (
-        <div
-          className="absolute start-0 top-0 rtl:-scale-x-100"
-          style={{
-            width: svg.width,
-            height: svg.height,
-            maskImage: `url("data:image/svg+xml,${
-              // Inline SVG
-              encodeURIComponent(
-                `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="1" fill="none" /></svg>`,
-              )
-            }")`,
-          }}
-        >
-          <TocThumb
-            containerRef={containerRef}
-            className="absolute w-full top-(--fd-top) h-(--fd-height) bg-fd-primary transition-[top,height]"
-          />
-        </div>
-      )}
-      <div ref={mergeRefs(containerRef, ref)} className={cn('flex flex-col', className)} {...props}>
-        {items.map((item, i) => (
-          <TOCItem
-            key={item.url}
-            item={item}
-            upper={items[i - 1]?.depth}
-            lower={items[i + 1]?.depth}
-          />
-        ))}
-      </div>
-    </>
-  );
-}
-
-function getItemOffset(depth: number): number {
-  if (depth <= 2) return 14;
-  if (depth === 3) return 26;
-  return 36;
-}
-
-function getLineOffset(depth: number): number {
-  return depth >= 3 ? 10 : 0;
-}
-
-function TOCItem({
-  item,
-  upper = item.depth,
-  lower = item.depth,
-}: {
-  item: Primitive.TOCItemType;
-  upper?: number;
-  lower?: number;
-}) {
-  const offset = getLineOffset(item.depth),
-    upperOffset = getLineOffset(upper),
-    lowerOffset = getLineOffset(lower);
-
-  return (
-    <Primitive.TOCItem
-      href={item.url}
-      style={{
-        paddingInlineStart: getItemOffset(item.depth),
-      }}
-      className="prose relative py-1.5 text-sm text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary"
-    >
-      {offset !== upperOffset && (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 16 16"
-          className="absolute -top-1.5 start-0 size-4 rtl:-scale-x-100"
-        >
-          <line
-            x1={upperOffset}
-            y1="0"
-            x2={offset}
-            y2="12"
-            className="stroke-fd-foreground/10"
-            strokeWidth="1"
-          />
-        </svg>
-      )}
-      <div
-        className={cn(
-          'absolute inset-y-0 w-px bg-fd-foreground/10',
-          offset !== upperOffset && 'top-1.5',
-          offset !== lowerOffset && 'bottom-1.5',
-        )}
-        style={{
-          insetInlineStart: offset,
-        }}
-      />
-      {item.title}
-    </Primitive.TOCItem>
-  );
-}
diff --git a/apps/eclipse/src/components/toc/default.tsx b/apps/eclipse/src/components/toc/default.tsx
deleted file mode 100644
index 09f27d6e5a..0000000000
--- a/apps/eclipse/src/components/toc/default.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-'use client';
-import { useI18n } from '@fumadocs/base-ui/contexts/i18n';
-import { cn } from '@prisma-docs/ui/lib/cn';
-import { type ComponentProps, useRef } from 'react';
-import { mergeRefs } from '../../lib/merge-refs';
-import { TocThumb, useTOCItems } from './index';
-import * as Primitive from 'fumadocs-core/toc';
-
-export function TOCItems({ ref, className, ...props }: ComponentProps<'div'>) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const items = useTOCItems();
-  const { text } = useI18n();
-
-  if (items.length === 0)
-    return (
-      <div className="rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground">
-        {text.tocNoHeadings}
-      </div>
-    );
-
-  return (
-    <>
-      <TocThumb
-        containerRef={containerRef}
-        className="absolute top-(--fd-top) h-(--fd-height) w-0.5 rounded-e-sm bg-fd-primary transition-[top,height] ease-linear"
-      />
-      <div
-        ref={mergeRefs(ref, containerRef)}
-        className={cn('flex flex-col border-s border-fd-foreground/10', className)}
-        {...props}
-      >
-        {items.map((item) => (
-          <TOCItem key={item.url} item={item} />
-        ))}
-      </div>
-    </>
-  );
-}
-
-function TOCItem({ item }: { item: Primitive.TOCItemType }) {
-  return (
-    <Primitive.TOCItem
-      href={item.url}
-      className={cn(
-        'prose py-1.5 text-sm text-fd-muted-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary',
-        item.depth <= 2 && 'ps-3',
-        item.depth === 3 && 'ps-6',
-        item.depth >= 4 && 'ps-8',
-      )}
-    >
-      {item.title}
-    </Primitive.TOCItem>
-  );
-}
diff --git a/apps/eclipse/src/components/toc/index.tsx b/apps/eclipse/src/components/toc/index.tsx
deleted file mode 100644
index d0f6f1af74..0000000000
--- a/apps/eclipse/src/components/toc/index.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-'use client';
-import * as Primitive from 'fumadocs-core/toc';
-import {
-  type ComponentProps,
-  createContext,
-  type RefObject,
-  use,
-  useEffect,
-  useEffectEvent,
-  useRef,
-} from 'react';
-import { cn } from '@prisma-docs/ui/lib/cn';
-import { mergeRefs } from '../../lib/merge-refs';
-import { useOnChange } from 'fumadocs-core/utils/use-on-change';
-
-const TOCContext = createContext<Primitive.TOCItemType[]>([]);
-
-export function useTOCItems(): Primitive.TOCItemType[] {
-  return use(TOCContext);
-}
-
-export function TOCProvider({
-  toc,
-  children,
-  ...props
-}: ComponentProps<typeof Primitive.AnchorProvider>) {
-  return (
-    <TOCContext value={toc}>
-      <Primitive.AnchorProvider toc={toc} {...props}>
-        {children}
-      </Primitive.AnchorProvider>
-    </TOCContext>
-  );
-}
-
-export function TOCScrollArea({ ref, className, ...props }: ComponentProps<'div'>) {
-  const viewRef = useRef<HTMLDivElement>(null);
-
-  return (
-    <div
-      ref={mergeRefs(viewRef, ref)}
-      className={cn(
-        'relative min-h-0 text-sm ms-px overflow-auto [scrollbar-width:none] mask-[linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3',
-        className,
-      )}
-      {...props}
-    >
-      <Primitive.ScrollProvider containerRef={viewRef}>{props.children}</Primitive.ScrollProvider>
-    </div>
-  );
-}
-
-type TocThumbType = [top: number, height: number];
-
-interface RefProps {
-  containerRef: RefObject<HTMLElement | null>;
-}
-
-export function TocThumb({ containerRef, ...props }: ComponentProps<'div'> & RefProps) {
-  const thumbRef = useRef<HTMLDivElement>(null);
-  const active = Primitive.useActiveAnchors();
-  function update(info: TocThumbType): void {
-    const element = thumbRef.current;
-    if (!element) return;
-    element.style.setProperty('--fd-top', `${info[0]}px`);
-    element.style.setProperty('--fd-height', `${info[1]}px`);
-  }
-
-  const onPrint = useEffectEvent(() => {
-    if (containerRef.current) {
-      update(calc(containerRef.current, active));
-    }
-  });
-
-  useEffect(() => {
-    if (!containerRef.current) return;
-    const container = containerRef.current;
-
-    const observer = new ResizeObserver(onPrint);
-    observer.observe(container);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [containerRef]);
-
-  useOnChange(active, () => {
-    if (containerRef.current) {
-      update(calc(containerRef.current, active));
-    }
-  });
-
-  return <div ref={thumbRef} data-hidden={active.length === 0} {...props} />;
-}
-
-function calc(container: HTMLElement, active: string[]): TocThumbType {
-  if (active.length === 0 || container.clientHeight === 0) {
-    return [0, 0];
-  }
-
-  let upper = Number.MAX_VALUE,
-    lower = 0;
-
-  for (const item of active) {
-    const element = container.querySelector<HTMLElement>(`a[href="#${item}"]`);
-    if (!element) continue;
-
-    const styles = getComputedStyle(element);
-    upper = Math.min(upper, element.offsetTop + parseFloat(styles.paddingTop));
-    lower = Math.max(
-      lower,
-      element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom),
-    );
-  }
-
-  return [upper, lower - upper];
-}
diff --git a/apps/eclipse/src/components/ui/button.tsx b/apps/eclipse/src/components/ui/button.tsx
deleted file mode 100644
index b427d4e080..0000000000
--- a/apps/eclipse/src/components/ui/button.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-
-const variants = {
-  primary: 'bg-fd-primary text-fd-primary-foreground hover:bg-fd-primary/80',
-  outline: 'border hover:bg-fd-accent hover:text-fd-accent-foreground',
-  ghost: 'hover:bg-fd-accent hover:text-fd-accent-foreground',
-  secondary:
-    'border bg-fd-secondary text-fd-secondary-foreground hover:bg-fd-accent hover:text-fd-accent-foreground',
-} as const;
-
-export const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md p-2 text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring',
-  {
-    variants: {
-      variant: variants,
-      // fumadocs use `color` instead of `variant`
-      color: variants,
-      size: {
-        sm: 'gap-1 px-2 py-1.5 text-xs',
-        icon: 'p-1.5 [&_svg]:size-5',
-        'icon-sm': 'p-1.5 [&_svg]:size-4.5',
-        'icon-xs': 'p-1 [&_svg]:size-4',
-      },
-    },
-  },
-);
-
-export type ButtonProps = VariantProps<typeof buttonVariants>;
diff --git a/apps/eclipse/src/components/ui/collapsible.tsx b/apps/eclipse/src/components/ui/collapsible.tsx
deleted file mode 100644
index 3d6e8f4704..0000000000
--- a/apps/eclipse/src/components/ui/collapsible.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client';
-import { Collapsible as Primitive } from '@base-ui/react/collapsible';
-import type { ComponentProps } from 'react';
-import { cn } from '@prisma-docs/ui/lib/cn';
-
-export const Collapsible = Primitive.Root;
-
-export const CollapsibleTrigger = Primitive.Trigger;
-
-export function CollapsibleContent({
-  children,
-  className,
-  ...props
-}: ComponentProps<typeof Primitive.Panel>) {
-  return (
-    <Primitive.Panel
-      {...props}
-      className={(s) =>
-        cn(
-          "overflow-hidden [&[hidden]:not([hidden='until-found'])]:hidden h-(--collapsible-panel-height) transition-[height] data-starting-style:h-0 data-ending-style:h-0",
-          typeof className === 'function' ? className(s) : className,
-        )
-      }
-    >
-      {children}
-    </Primitive.Panel>
-  );
-}
-
-export type CollapsibleProps = Primitive.Root.Props;
-export type CollapsibleContentProps = Primitive.Panel.Props;
-export type CollapsibleTriggerProps = Primitive.Trigger.Props;
diff --git a/apps/eclipse/src/components/ui/popover.tsx b/apps/eclipse/src/components/ui/popover.tsx
deleted file mode 100644
index 1d4c12d29a..0000000000
--- a/apps/eclipse/src/components/ui/popover.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-'use client';
-import { Popover as Primitive } from '@base-ui/react/popover';
-import * as React from 'react';
-import { cn } from '@prisma-docs/ui/lib/cn';
-
-const Popover = Primitive.Root;
-
-const PopoverTrigger = Primitive.Trigger;
-
-const PopoverContent = React.forwardRef<
-  React.ComponentRef<typeof Primitive.Popup>,
-  React.ComponentPropsWithoutRef<typeof Primitive.Popup> &
-    Pick<Primitive.Positioner.Props, 'sideOffset' | 'align'>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  <Primitive.Portal>
-    <Primitive.Positioner align={align} side="bottom" sideOffset={sideOffset} className="z-50">
-      <Primitive.Popup
-        ref={ref}
-        className={(s) =>
-          cn(
-            'z-50 origin-(--transform-origin) overflow-y-auto max-h-(--available-height) min-w-60 max-w-[98vw] rounded-xl border bg-fd-popover/60 backdrop-blur-lg p-2 text-sm text-fd-popover-foreground shadow-lg focus-visible:outline-none data-closed:animate-fd-popover-out data-open:animate-fd-popover-in',
-            typeof className === 'function' ? className(s) : className,
-          )
-        }
-        {...props}
-      />
-    </Primitive.Positioner>
-  </Primitive.Portal>
-));
-PopoverContent.displayName = Primitive.Popup.displayName;
-
-const PopoverClose = Primitive.Close;
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverClose };
diff --git a/apps/eclipse/src/components/ui/scroll-area.tsx b/apps/eclipse/src/components/ui/scroll-area.tsx
deleted file mode 100644
index a984aca132..0000000000
--- a/apps/eclipse/src/components/ui/scroll-area.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { ScrollArea as Primitive } from '@base-ui/react/scroll-area';
-import * as React from 'react';
-import { cn } from '@prisma-docs/ui/lib/cn';
-
-const ScrollArea = React.forwardRef<
-  React.ComponentRef<typeof Primitive.Root>,
-  React.ComponentPropsWithoutRef<typeof Primitive.Root>
->(({ className, children, ...props }, ref) => (
-  <Primitive.Root
-    ref={ref}
-    className={(s) =>
-      cn('overflow-hidden', typeof className === 'function' ? className(s) : className)
-    }
-    {...props}
-  >
-    {children}
-    <Primitive.Corner />
-    <ScrollBar orientation="vertical" />
-  </Primitive.Root>
-));
-
-ScrollArea.displayName = Primitive.Root.displayName;
-
-const ScrollViewport = React.forwardRef<
-  React.ComponentRef<typeof Primitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof Primitive.Viewport>
->(({ className, children, ...props }, ref) => (
-  <Primitive.Viewport
-    ref={ref}
-    className={(s) =>
-      cn('size-full rounded-[inherit]', typeof className === 'function' ? className(s) : className)
-    }
-    {...props}
-  >
-    {children}
-  </Primitive.Viewport>
-));
-
-ScrollViewport.displayName = Primitive.Viewport.displayName;
-
-const ScrollBar = React.forwardRef<
-  React.ComponentRef<typeof Primitive.Scrollbar>,
-  React.ComponentPropsWithoutRef<typeof Primitive.Scrollbar>
->(({ className, orientation = 'vertical', ...props }, ref) => (
-  <Primitive.Scrollbar
-    ref={ref}
-    orientation={orientation}
-    className={(s) =>
-      cn(
-        'flex select-none transition-opacity',
-        !s.hovering && 'opacity-0',
-        orientation === 'vertical' && 'h-full w-1.5',
-        orientation === 'horizontal' && 'h-1.5 flex-col',
-        typeof className === 'function' ? className(s) : className,
-      )
-    }
-    {...props}
-  >
-    <Primitive.Thumb className="relative flex-1 rounded-full bg-fd-border" />
-  </Primitive.Scrollbar>
-));
-ScrollBar.displayName = Primitive.Scrollbar.displayName;
-
-export { ScrollArea, ScrollBar, ScrollViewport };
-export type ScrollAreaProps = Primitive.Root.Props;
diff --git a/apps/eclipse/src/lib/layout.shared.tsx b/apps/eclipse/src/lib/layout.shared.tsx
deleted file mode 100644
index f16eb3e11a..0000000000
--- a/apps/eclipse/src/lib/layout.shared.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { BaseLayoutProps, LinkItemType } from 'fumadocs-ui/layouts/shared';
-import Image from 'next/image';
-import logoDark from '../../public/img/logo-dark.svg';
-import logoWhite from '../../public/img/logo-white.svg';
-
-export const logo = (
-  <>
-    <Image
-      alt="Prisma"
-      src={logoDark}
-      aria-label="Prisma"
-      className="dark:hidden"
-    />
-    <Image
-      alt="Prisma"
-      src={logoWhite}
-      aria-label="Prisma"
-      className="hidden dark:block"
-    />
-  </>
-);
-
-export const docsLinks: LinkItemType[] = [];
-
-export function baseOptions(): BaseLayoutProps {
-  return {
-    nav: {
-      title: (
-        <>
-          {logo} <span className="font-mono text-lg">/eclipse</span>
-        </>
-      ),
-      transparentMode: 'none',
-    },
-    githubUrl: 'https://github.com/prisma/docs',
-  };
-}
diff --git a/apps/eclipse/src/lib/merge-refs.ts b/apps/eclipse/src/lib/merge-refs.ts
deleted file mode 100644
index cf019f13b0..0000000000
--- a/apps/eclipse/src/lib/merge-refs.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type * as React from 'react';
-
-export function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T> {
-  return (value) => {
-    refs.forEach((ref) => {
-      if (typeof ref === 'function') {
-        ref(value);
-      } else if (ref) {
-        ref.current = value;
-      }
-    });
-  };
-}
diff --git a/apps/eclipse/src/lib/urls.ts b/apps/eclipse/src/lib/urls.ts
deleted file mode 100644
index 2cc3b4efd0..0000000000
--- a/apps/eclipse/src/lib/urls.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export function normalize(urlOrPath: string) {
-  if (urlOrPath.length > 1 && urlOrPath.endsWith('/')) return urlOrPath.slice(0, -1);
-  return urlOrPath;
-}
-
-/**
- * @returns if `href` is matching the given pathname
- */
-export function isActive(href: string, pathname: string, nested = true): boolean {
-  href = normalize(href);
-  pathname = normalize(pathname);
-
-  return href === pathname || (nested && pathname.startsWith(`${href}/`));
-}

From 8d7f8456585bdebda7fff4749072e95a82d6a08e Mon Sep 17 00:00:00 2001
From: Ben Sekulowicz-Barclay <ben@seku.co>
Date: Mon, 23 Mar 2026 17:41:17 +0100
Subject: [PATCH 02/10] Align implementation with /apps/docs

---
 apps/eclipse/next.config.mjs                  |   1 -
 apps/eclipse/package.json                     |   1 -
 .../app/(design-system)/[[...slug]]/page.tsx  |  26 +-
 .../src/app/(design-system)/layout.tsx        |  16 +-
 apps/eclipse/src/app/api/search/route.ts      |   2 +-
 apps/eclipse/src/app/layout.tsx               |   3 +-
 .../eclipse/src/components/layout/context.tsx |  88 +++++
 .../src/components/layout/docs-footer.tsx     |  79 ++++
 .../src/components/layout/docs-layout.tsx     |  62 +++
 .../src/components/layout/docs-page.tsx       |  91 +++++
 apps/eclipse/src/components/nav.tsx           |   8 +-
 apps/eclipse/src/components/page.tsx          |  38 --
 apps/eclipse/src/components/provider.tsx      |  18 +
 apps/eclipse/src/components/search.tsx        | 197 +++-------
 .../src/components/sidebar-context.tsx        |  59 ---
 apps/eclipse/src/components/sidebar.tsx       | 133 -------
 apps/eclipse/src/components/sidebar/base.tsx  | 358 ++++++++++++++++++
 .../src/components/sidebar/page-tree.tsx      |  92 +++++
 apps/eclipse/src/components/toc.tsx           | 110 +++---
 19 files changed, 934 insertions(+), 448 deletions(-)
 create mode 100644 apps/eclipse/src/components/layout/context.tsx
 create mode 100644 apps/eclipse/src/components/layout/docs-footer.tsx
 create mode 100644 apps/eclipse/src/components/layout/docs-layout.tsx
 create mode 100644 apps/eclipse/src/components/layout/docs-page.tsx
 delete mode 100644 apps/eclipse/src/components/page.tsx
 create mode 100644 apps/eclipse/src/components/provider.tsx
 delete mode 100644 apps/eclipse/src/components/sidebar-context.tsx
 delete mode 100644 apps/eclipse/src/components/sidebar.tsx
 create mode 100644 apps/eclipse/src/components/sidebar/base.tsx
 create mode 100644 apps/eclipse/src/components/sidebar/page-tree.tsx

diff --git a/apps/eclipse/next.config.mjs b/apps/eclipse/next.config.mjs
index 5378c3da0f..d94e16e776 100644
--- a/apps/eclipse/next.config.mjs
+++ b/apps/eclipse/next.config.mjs
@@ -202,7 +202,6 @@ const securityHeaders = [
 const config = {
   reactStrictMode: true,
   transpilePackages: ["@prisma/eclipse"],
-  output: "export",
   images: { unoptimized: true },
   async headers() {
     return [
diff --git a/apps/eclipse/package.json b/apps/eclipse/package.json
index d9813807de..5974db08d8 100644
--- a/apps/eclipse/package.json
+++ b/apps/eclipse/package.json
@@ -4,7 +4,6 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "prebuild": "rimraf out",
     "build": "next build",
     "dev": "next dev --port 3003",
     "start": "next start --port 3003",
diff --git a/apps/eclipse/src/app/(design-system)/[[...slug]]/page.tsx b/apps/eclipse/src/app/(design-system)/[[...slug]]/page.tsx
index 15ba7bbc46..7a040ca147 100644
--- a/apps/eclipse/src/app/(design-system)/[[...slug]]/page.tsx
+++ b/apps/eclipse/src/app/(design-system)/[[...slug]]/page.tsx
@@ -1,5 +1,11 @@
 import { source } from '@/lib/source';
-import { Page } from '@/components/page';
+import {
+  DocsPage,
+  DocsHeader,
+  DocsTitle,
+  DocsDescription,
+  DocsBody,
+} from '@/components/layout/docs-page';
 import { notFound } from 'next/navigation';
 import { getMDXComponents } from '@/mdx-components';
 import type { Metadata } from 'next';
@@ -8,7 +14,7 @@ interface PageParams {
   slug?: string[];
 }
 
-export default async function DocsPage({
+export default async function Page({
   params,
 }: {
   params: Promise<PageParams>;
@@ -20,13 +26,15 @@ export default async function DocsPage({
   const MDX = page.data.body;
 
   return (
-    <Page
-      title={page.data.title}
-      description={page.data.description}
-      toc={page.data.toc}
-    >
-      <MDX components={getMDXComponents()} />
-    </Page>
+    <DocsPage toc={page.data.toc}>
+      <DocsHeader>
+        <DocsTitle>{page.data.title}</DocsTitle>
+        <DocsDescription>{page.data.description}</DocsDescription>
+      </DocsHeader>
+      <DocsBody>
+        <MDX components={getMDXComponents()} />
+      </DocsBody>
+    </DocsPage>
   );
 }
 
diff --git a/apps/eclipse/src/app/(design-system)/layout.tsx b/apps/eclipse/src/app/(design-system)/layout.tsx
index 718478ff91..e3f10777be 100644
--- a/apps/eclipse/src/app/(design-system)/layout.tsx
+++ b/apps/eclipse/src/app/(design-system)/layout.tsx
@@ -1,19 +1,11 @@
 import { source } from '@/lib/source';
-import { Nav } from '@/components/nav';
-import { Sidebar } from '@/components/sidebar';
-import { SidebarProvider } from '@/components/sidebar-context';
+import { DocsLayout } from '@/components/layout/docs-layout';
 import type { ReactNode } from 'react';
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <SidebarProvider>
-      <Nav />
-      <div data-component="docs-layout">
-        <Sidebar tree={source.pageTree} />
-        <main>
-          {children}
-        </main>
-      </div>
-    </SidebarProvider>
+    <DocsLayout tree={source.pageTree}>
+      {children}
+    </DocsLayout>
   );
 }
diff --git a/apps/eclipse/src/app/api/search/route.ts b/apps/eclipse/src/app/api/search/route.ts
index 64ecf4c2c0..a81c28ba7a 100644
--- a/apps/eclipse/src/app/api/search/route.ts
+++ b/apps/eclipse/src/app/api/search/route.ts
@@ -3,4 +3,4 @@ import { createFromSource } from 'fumadocs-core/search/server';
 
 const search = createFromSource(source);
 
-export const { staticGET: GET } = search;
+export const { GET } = search;
diff --git a/apps/eclipse/src/app/layout.tsx b/apps/eclipse/src/app/layout.tsx
index cabe11b9cd..33ee08b655 100644
--- a/apps/eclipse/src/app/layout.tsx
+++ b/apps/eclipse/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import "./global.css";
 import Script from "next/script";
 import { FontAwesomeScript as EclipseFA } from "@prisma/eclipse";
+import { Provider } from "@/components/provider";
 import type { ReactNode } from "react";
 
 export default function Layout({ children }: { children: ReactNode }) {
@@ -15,7 +16,7 @@ export default function Layout({ children }: { children: ReactNode }) {
         />
       </head>
       <body className="bg-background-neutral font-sans font-sans-settings text-foreground-neutral antialiased">
-        {children}
+        <Provider>{children}</Provider>
       </body>
     </html>
   );
diff --git a/apps/eclipse/src/components/layout/context.tsx b/apps/eclipse/src/components/layout/context.tsx
new file mode 100644
index 0000000000..e1df5a14ce
--- /dev/null
+++ b/apps/eclipse/src/components/layout/context.tsx
@@ -0,0 +1,88 @@
+'use client';
+
+import {
+  createContext,
+  type ReactNode,
+  use,
+  useMemo,
+  useState,
+} from 'react';
+
+// -- Layout context (nav transparency) --
+
+export const LayoutContext = createContext<{
+  isNavTransparent: boolean;
+} | null>(null);
+
+export function LayoutContextProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <LayoutContext
+      value={useMemo(
+        () => ({ isNavTransparent: false }),
+        [],
+      )}
+    >
+      {children}
+    </LayoutContext>
+  );
+}
+
+// -- Sidebar enabled (per-page control) --
+
+export const SidebarEnabledContext = createContext<boolean>(true);
+
+const SidebarEnabledSetterContext = createContext<
+  (enabled: boolean) => void
+>(() => {});
+
+/**
+ * Renders children only when the sidebar is enabled (layout + page).
+ */
+export function SidebarEnabledGate({ children }: { children: ReactNode }) {
+  const enabled = use(SidebarEnabledContext);
+  if (!enabled) return null;
+  return <>{children}</>;
+}
+
+/**
+ * Provider that merges layout sidebar.enabled with the page's choice.
+ * Layout wraps content in this; DocsPage syncs via the setter
+ * so a page can hide the sidebar.
+ */
+export function SidebarEnabledFromPageProvider({
+  layoutEnabled,
+  children,
+}: {
+  layoutEnabled: boolean;
+  children: ReactNode;
+}) {
+  const [pageEnabled, setPageEnabled] = useState(true);
+  const effective = layoutEnabled && pageEnabled;
+  const setter = useMemo(
+    () => (enabled: boolean) => setPageEnabled(enabled),
+    [],
+  );
+
+  return (
+    <SidebarEnabledSetterContext.Provider value={setter}>
+      <SidebarEnabledContext.Provider value={effective}>
+        {children}
+      </SidebarEnabledContext.Provider>
+    </SidebarEnabledSetterContext.Provider>
+  );
+}
+
+/**
+ * Syncs page-level sidebar.enabled to the layout context.
+ * Used inside DocsPage when a page wants to hide the sidebar.
+ */
+export function SidebarEnabledSync({ enabled }: { enabled: boolean }) {
+  const setEnabled = use(SidebarEnabledSetterContext);
+  // Sync on render — setter is stable so this is safe
+  if (!enabled) setEnabled(false);
+  return null;
+}
diff --git a/apps/eclipse/src/components/layout/docs-footer.tsx b/apps/eclipse/src/components/layout/docs-footer.tsx
new file mode 100644
index 0000000000..8a2e116724
--- /dev/null
+++ b/apps/eclipse/src/components/layout/docs-footer.tsx
@@ -0,0 +1,79 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useMemo } from 'react';
+import { useFooterItems } from '@fumadocs/base-ui/utils/use-footer-items';
+
+export function DocsFooter({ className }: { className?: string }) {
+  const footerList = useFooterItems();
+  const pathname = usePathname();
+
+  const { previous, next } = useMemo(() => {
+    const idx = footerList.findIndex((item) => item.url === pathname);
+    if (idx === -1) return {};
+    return {
+      previous: footerList[idx - 1],
+      next: footerList[idx + 1],
+    };
+  }, [footerList, pathname]);
+
+  if (!previous && !next) return null;
+
+  return (
+    <nav
+      className={`mt-12 grid gap-3 ${previous && next ? 'grid-cols-2' : 'grid-cols-1'} ${className ?? ''}`}
+    >
+      {previous && (
+        <Link
+          href={previous.url}
+          className="flex flex-col gap-1 p-4 rounded-square border border-stroke-neutral hover:bg-background-neutral transition-colors"
+        >
+          <span className="text-xs text-foreground-neutral-weak">
+            Previous
+          </span>
+          <span className="flex items-center gap-1.5 text-sm font-medium text-foreground-neutral">
+            <svg
+              className="size-3.5 shrink-0"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M15 19l-7-7 7-7"
+              />
+            </svg>
+            {previous.name}
+          </span>
+        </Link>
+      )}
+      {next && (
+        <Link
+          href={next.url}
+          className={`flex flex-col gap-1 p-4 rounded-square border border-stroke-neutral hover:bg-background-neutral transition-colors text-end ${!previous ? 'col-start-1' : ''}`}
+        >
+          <span className="text-xs text-foreground-neutral-weak">Next</span>
+          <span className="flex items-center justify-end gap-1.5 text-sm font-medium text-foreground-neutral">
+            {next.name}
+            <svg
+              className="size-3.5 shrink-0"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </span>
+        </Link>
+      )}
+    </nav>
+  );
+}
diff --git a/apps/eclipse/src/components/layout/docs-layout.tsx b/apps/eclipse/src/components/layout/docs-layout.tsx
new file mode 100644
index 0000000000..2307e0d15e
--- /dev/null
+++ b/apps/eclipse/src/components/layout/docs-layout.tsx
@@ -0,0 +1,62 @@
+import type { ReactNode } from 'react';
+import type * as PageTree from 'fumadocs-core/page-tree';
+import { TreeContextProvider } from '@fumadocs/base-ui/contexts/tree';
+import { SidebarProvider, SidebarContent } from '../sidebar/base';
+import { SidebarPageTree } from '../sidebar/page-tree';
+import { Nav } from '../nav';
+import { SearchToggle } from '../search';
+import {
+  LayoutContextProvider,
+  SidebarEnabledFromPageProvider,
+} from './context';
+
+export interface DocsLayoutProps {
+  tree: PageTree.Root;
+
+  sidebar?: {
+    banner?: ReactNode;
+    footer?: ReactNode;
+    enabled?: boolean;
+    defaultOpenLevel?: number;
+    prefetch?: boolean;
+  };
+
+  children: ReactNode;
+}
+
+export function DocsLayout({
+  tree,
+  sidebar: {
+    enabled: sidebarEnabled = true,
+    defaultOpenLevel,
+    prefetch,
+    ...sidebarProps
+  } = {},
+  children,
+}: DocsLayoutProps) {
+  return (
+    <TreeContextProvider tree={tree}>
+      <LayoutContextProvider>
+        <SidebarProvider
+          defaultOpenLevel={defaultOpenLevel}
+          prefetch={prefetch}
+        >
+          <SidebarEnabledFromPageProvider layoutEnabled={sidebarEnabled}>
+            <Nav />
+            <div>
+              {sidebarEnabled && (
+                <SidebarContent
+                  banner={<SearchToggle />}
+                  footer={sidebarProps.footer}
+                >
+                  <SidebarPageTree />
+                </SidebarContent>
+              )}
+              <main>{children}</main>
+            </div>
+          </SidebarEnabledFromPageProvider>
+        </SidebarProvider>
+      </LayoutContextProvider>
+    </TreeContextProvider>
+  );
+}
diff --git a/apps/eclipse/src/components/layout/docs-page.tsx b/apps/eclipse/src/components/layout/docs-page.tsx
new file mode 100644
index 0000000000..70a49262b7
--- /dev/null
+++ b/apps/eclipse/src/components/layout/docs-page.tsx
@@ -0,0 +1,91 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { TOCItemType } from 'fumadocs-core/toc';
+import { TOCProvider, TableOfContents } from '../toc';
+import { DocsFooter } from './docs-footer';
+import { SidebarEnabledSync } from './context';
+
+export interface DocsPageProps {
+  toc?: TOCItemType[];
+
+  /**
+   * Extend the page to fill all available space
+   *
+   * @defaultValue false
+   */
+  full?: boolean;
+
+  /**
+   * Control the docs layout sidebar from this page.
+   * When `sidebar={{ enabled: false }}`, the sidebar is hidden for this page only.
+   */
+  sidebar?: { enabled?: boolean };
+
+  children: ReactNode;
+}
+
+export function DocsPage({
+  toc = [],
+  full = false,
+  sidebar: sidebarOpt,
+  children,
+}: DocsPageProps) {
+  const tocEnabled = !full && toc.length > 0;
+
+  const content = (
+    <article>
+      {sidebarOpt !== undefined && (
+        <SidebarEnabledSync enabled={sidebarOpt.enabled !== false} />
+      )}
+      {children}
+      <DocsFooter className="px-6 md:pl-[18.5rem] md:pr-12 pb-6 md:pb-12" />
+    </article>
+  );
+
+  if (tocEnabled) {
+    return <TOCProvider toc={toc}>{content}</TOCProvider>;
+  }
+
+  return content;
+}
+
+export function DocsHeader({ children, className, ...props }: ComponentProps<'header'>) {
+  return (
+    <header
+      className={`px-6 md:pl-[18.5rem] md:pr-12 pt-[4.75rem] md:pt-[6.25rem] pb-6 md:pb-12 flex flex-col items-stretch justify-start gap-2 border-b border-stroke-neutral ${className ?? ''}`}
+      {...props}
+    >
+      {children}
+    </header>
+  );
+}
+
+export function DocsTitle({ children, className, ...props }: ComponentProps<'h1'>) {
+  return (
+    <h1 className={`font-bold text-3xl text-foreground-neutral ${className ?? ''}`} {...props}>
+      {children}
+    </h1>
+  );
+}
+
+export function DocsDescription({ children, className, ...props }: ComponentProps<'p'>) {
+  if (!children) return null;
+
+  return (
+    <p className={`font-normal text-base text-foreground-neutral-weak ${className ?? ''}`} {...props}>
+      {children}
+    </p>
+  );
+}
+
+export function DocsBody({ children, className, ...props }: ComponentProps<'div'>) {
+  return (
+    <section className="px-6 md:pl-[18.5rem] md:pr-12 py-6 md:py-12 flex flex-row items-stretch justify-start gap-12">
+      <div className={`prose grow-1 min-w-0 ${className ?? ''}`} {...props}>
+        {children}
+      </div>
+      <div className="grow-0 shrink-0 w-[15rem] hidden xl:block">
+        <TableOfContents />
+      </div>
+    </section>
+  );
+}
diff --git a/apps/eclipse/src/components/nav.tsx b/apps/eclipse/src/components/nav.tsx
index aac4929532..3af7f15e5d 100644
--- a/apps/eclipse/src/components/nav.tsx
+++ b/apps/eclipse/src/components/nav.tsx
@@ -1,13 +1,13 @@
 'use client';
 
 import Link from 'next/link';
-import { useSidebar } from './sidebar-context';
+import { useSidebar } from './sidebar/base';
 
 export function Nav() {
-  const { toggle } = useSidebar();
+  const { setOpen } = useSidebar();
 
   return (
-    <header data-component="nav" className="fixed top-0 left-0 bottom-auto right-0 z-40 px-5 h-[3.25rem] flex flex-row items-center justify-between gap-6 bg-background-neutral/50 border-b border-stroke-neutral backdrop-blur-surface">
+    <header className="fixed top-0 left-0 bottom-auto right-0 z-40 px-5 h-[3.25rem] flex flex-row items-center justify-between gap-6 bg-background-neutral/50 border-b border-stroke-neutral backdrop-blur-surface">
       <div className="flex flex-row items-center gap-3">
         <Link href="/" className="flex flex-row items-center justify-start gap-3">
           <div className="size-7 flex flex-row items-center justify-center gap-0 bg-background-neutral-reverse text-foreground-neutral-reverse rounded-square">
@@ -26,7 +26,7 @@ export function Nav() {
       </div>
 
       <button
-        onClick={toggle}
+        onClick={() => setOpen((prev) => !prev)}
         className="md:hidden flex flex-row items-center justify-center size-7 text-foreground-neutral-weak hover:text-foreground-neutral transition-colors cursor-pointer"
         aria-label="Toggle sidebar"
       >
diff --git a/apps/eclipse/src/components/page.tsx b/apps/eclipse/src/components/page.tsx
deleted file mode 100644
index 2cc5793c04..0000000000
--- a/apps/eclipse/src/components/page.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { ReactNode } from 'react';
-import { TableOfContents } from './toc';
-
-export function Page({
-  title,
-  description,
-  toc,
-  children,
-}: {
-  title: string;
-  description?: string;
-  toc: { title: ReactNode; url: string; depth: number }[];
-  children: ReactNode;
-}) {
-  return (
-    <article>
-      <header className="px-6 md:pl-[18.5rem] md:pr-12 pt-[4.75rem] md:pt-[6.25rem] pb-6 md:pb-12 flex flex-col items-stretch justify-start gap-2 border-b border-stroke-neutral">
-        <h1 className="font-bold text-3xl text-foreground-neutral">{title}</h1>
-
-        { description && (
-          <p className="font-normal text-base text-foreground-neutral-weak">
-            { description }
-          </p>
-        ) }
-      </header>
-      <section className="px-6 md:pl-[18.5rem] md:pr-12 py-6 md:py-12 flex flex-row items-stretch justify-start gap-12">
-        <div className="grow-1">
-          <div className="prose">
-            { children }
-          </div>
-        </div>
-        <div className="grow-0 shrink-0 w-[15rem] hidden xl:block">
-          <TableOfContents items={toc} />
-        </div>
-      </section>
-    </article>
-  );
-}
diff --git a/apps/eclipse/src/components/provider.tsx b/apps/eclipse/src/components/provider.tsx
new file mode 100644
index 0000000000..906f23bf7a
--- /dev/null
+++ b/apps/eclipse/src/components/provider.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import { RootProvider } from 'fumadocs-ui/provider/next';
+import EclipseSearchDialog from '@/components/search';
+import type { ReactNode } from 'react';
+
+export function Provider({ children }: { children: ReactNode }) {
+  return (
+    <RootProvider
+      search={{
+        SearchDialog: EclipseSearchDialog,
+      }}
+      theme={{ enabled: false }}
+    >
+      {children}
+    </RootProvider>
+  );
+}
diff --git a/apps/eclipse/src/components/search.tsx b/apps/eclipse/src/components/search.tsx
index 6276f74db9..dfcbf8a485 100644
--- a/apps/eclipse/src/components/search.tsx
+++ b/apps/eclipse/src/components/search.tsx
@@ -1,151 +1,70 @@
 'use client';
 
 import { useDocsSearch } from 'fumadocs-core/search/client';
-import { useRouter } from 'next/navigation';
-import { createPortal } from 'react-dom';
-import { useEffect, useRef, useCallback, useState } from 'react';
-
-export function SearchToggle() {
-  const [open, setOpen] = useState(false);
-
-  useEffect(() => {
-    function onKeyDown(e: KeyboardEvent) {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-        e.preventDefault();
-        setOpen((prev) => !prev);
-      }
-    }
-    document.addEventListener('keydown', onKeyDown);
-    return () => document.removeEventListener('keydown', onKeyDown);
-  }, []);
-
-  return (
-    <>
-      <button
-        onClick={() => setOpen(true)}
-        className="flex flex-row items-center justify-between gap-2 h-8 px-3 bg-background-default border border-stroke-neutral text-sm text-foreground-neutral-weak hover:text-foreground-neutral rounded-square shadow-box-low transition-colors cursor-pointer"
-      >
-        <span className="text-sm text-foreground-neutral-weak">Search...</span>
-        <kbd className="-mr-1.5 px-1.5 py-0.5 bg-background-neutral font-mono text-xs text-foreground-neutral-weaker rounded-square-low">CMD+K</kbd>
-      </button>
-
-      {open && createPortal(
-        <SearchDialog onClose={() => setOpen(false)} />,
-        document.body,
-      )}
-    </>
-  );
-}
-
-function SearchDialog({ onClose }: { onClose: () => void }) {
-  const router = useRouter();
-  const inputRef = useRef<HTMLInputElement>(null);
-  const { search, setSearch, query } = useDocsSearch({ type: 'static' });
-
-  useEffect(() => {
-    inputRef.current?.focus();
-  }, []);
-
-  useEffect(() => {
-    document.body.style.overflow = 'hidden';
-    return () => { document.body.style.overflow = ''; };
-  }, []);
-
-  const onSelect = useCallback(
-    (url: string) => {
-      router.push(url);
-      onClose();
-    },
-    [router, onClose],
-  );
-
-  const results = query.data && query.data !== 'empty' ? query.data : [];
+import {
+  SearchDialog,
+  SearchDialogClose,
+  SearchDialogContent,
+  SearchDialogHeader,
+  SearchDialogInput,
+  SearchDialogList,
+  SearchDialogOverlay,
+  type SharedProps,
+} from 'fumadocs-ui/components/dialog/search';
+import { useSearchContext } from '@fumadocs/base-ui/contexts/search';
+
+export default function EclipseSearchDialog(props: SharedProps) {
+  const { search, setSearch, query } = useDocsSearch({
+    type: 'static',
+  });
 
   return (
-    <div className="fixed inset-0 z-[60] flex items-start justify-center pt-[15vh]" onClick={onClose}>
-      <div className="fixed inset-0 bg-background-default/50 backdrop-blur-surface" aria-hidden="true" />
-
-      <div
-        data-component="search-dialog"
-        className="relative z-10 w-full max-w-lg bg-background-default border border-stroke-neutral rounded-square shadow-box overflow-hidden"
-        onClick={(e) => e.stopPropagation()}
-        onKeyDown={(e) => {
-          if (e.key === 'Escape') onClose();
-        }}
-      >
-        {/* Search input */}
-        <div className="px-4 h-12 flex flex-row items-center gap-2 border-b last:border-b-none border-stroke-neutral">
-          <input
-            ref={inputRef}
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            placeholder="Search documentation..."
-            className="flex-1 h-10 bg-transparent text-base text-foreground-neutral placeholder:text-foreground-neutral-weaker outline-none"
-          />
-          <kbd
-            className="px-2 h-6 flex flex-row items-center bg-background-neutral font-mono text-xs text-foreground-neutral-weaker rounded-square-low"
-            onClick={onClose}
-          >
-            ESC
-          </kbd>
-        </div>
-
-        {/* Results */}
-        <div className="max-h-[50vh] overflow-y-auto">
-          {query.isLoading && (
-            <p className="p-4 text-sm text-foreground-neutral-weak text-center">Searching...</p>
-          )}
-
-          {!query.isLoading && search.length > 0 && results.length === 0 && (
-            <p className="p-4 text-sm text-foreground-neutral-weak text-center">No results found.</p>
-          )}
-
-          {!query.isLoading && results.length > 0 && (
-            <ul className="p-4 flex flex-col items-stretch justify-start gap-2">
-              {results.map((result) => (
-                <li key={result.id}>
-                  <button
-                    onClick={() => onSelect(result.url)}
-                    className="w-full px-2 py-1 flex flex-col items-start gap-1 text-left bg-background-default hover:bg-background-neutral rounded-square-low transition-colors duration-50 cursor-pointer"
-                  >
-                    <span className="flex items-center gap-3">
-                      <ResultIcon type={result.type} />
-                      <span className="text-sm font-medium text-foreground-neutral line-clamp-1">{result.content}</span>
-                    </span>
-                    <span className="ml-7 text-xs text-foreground-neutral-weak truncate max-w-full">
-                      { result.url.replace(/^\//, '').replace(/\//g, ' / ') || 'Home' }
-                    </span>
-                  </button>
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-      </div>
-    </div>
+    <SearchDialog
+      search={search}
+      onSearchChange={setSearch}
+      isLoading={query.isLoading}
+      {...props}
+    >
+      <SearchDialogOverlay />
+      <SearchDialogContent>
+        <SearchDialogHeader>
+          <SearchDialogInput />
+          <SearchDialogClose aria-label="Close search">
+            <svg
+              className="size-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </SearchDialogClose>
+        </SearchDialogHeader>
+        <SearchDialogList
+          items={query.data !== 'empty' ? query.data : null}
+        />
+      </SearchDialogContent>
+    </SearchDialog>
   );
 }
 
-function ResultIcon({ type }: { type: 'page' | 'heading' | 'text' }) {
-  if (type === 'page') {
-    return (
-      <svg className="size-4 text-foreground-neutral-weak shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-        <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
-      </svg>
-    );
-  }
-
-  if (type === 'heading') {
-    return (
-      <svg className="size-4 text-foreground-neutral-weak shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-        <path strokeLinecap="round" strokeLinejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5l-3.9 19.5m-2.1-19.5l-3.9 19.5" />
-      </svg>
-    );
-  }
+export function SearchToggle() {
+  const { setOpenSearch } = useSearchContext();
 
   return (
-    <svg className="size-4 text-foreground-neutral-weak shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-      <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" />
-    </svg>
+    <button
+      onClick={() => setOpenSearch(true)}
+      className="flex flex-row items-center justify-between gap-2 h-8 px-3 bg-background-default border border-stroke-neutral text-sm text-foreground-neutral-weak hover:text-foreground-neutral rounded-square shadow-box-low transition-colors cursor-pointer"
+    >
+      <span className="text-sm text-foreground-neutral-weak">Search...</span>
+      <kbd className="-mr-1.5 px-1.5 py-0.5 bg-background-neutral font-mono text-xs text-foreground-neutral-weaker rounded-square-low">
+        CMD+K
+      </kbd>
+    </button>
   );
 }
diff --git a/apps/eclipse/src/components/sidebar-context.tsx b/apps/eclipse/src/components/sidebar-context.tsx
deleted file mode 100644
index ba4fb11887..0000000000
--- a/apps/eclipse/src/components/sidebar-context.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-'use client';
-
-import { createContext, useContext, useState, useCallback, useEffect, type ReactNode } from 'react';
-import { usePathname } from 'next/navigation';
-
-interface SidebarContextValue {
-  open: boolean;
-  toggle: () => void;
-  close: () => void;
-}
-
-const SidebarContext = createContext<SidebarContextValue>({
-  open: false,
-  toggle: () => {},
-  close: () => {},
-});
-
-export function SidebarProvider({ children }: { children: ReactNode }) {
-  const [open, setOpen] = useState(false);
-  const pathname = usePathname();
-
-  const toggle = useCallback(() => setOpen((prev) => !prev), []);
-  const close = useCallback(() => setOpen(false), []);
-
-  // Close sidebar on navigation
-  useEffect(() => {
-    setOpen(false);
-  }, [pathname]);
-
-  // Lock body scroll when open on mobile
-  useEffect(() => {
-    const mq = window.matchMedia('(max-width: 767px)');
-    if (open && mq.matches) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = '';
-    }
-    return () => { document.body.style.overflow = ''; };
-  }, [open]);
-
-  // Close on escape key
-  useEffect(() => {
-    function onKeyDown(e: KeyboardEvent) {
-      if (e.key === 'Escape') setOpen(false);
-    }
-    document.addEventListener('keydown', onKeyDown);
-    return () => document.removeEventListener('keydown', onKeyDown);
-  }, []);
-
-  return (
-    <SidebarContext.Provider value={{ open, toggle, close }}>
-      {children}
-    </SidebarContext.Provider>
-  );
-}
-
-export function useSidebar() {
-  return useContext(SidebarContext);
-}
diff --git a/apps/eclipse/src/components/sidebar.tsx b/apps/eclipse/src/components/sidebar.tsx
deleted file mode 100644
index 72049e6522..0000000000
--- a/apps/eclipse/src/components/sidebar.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { useState } from 'react';
-import type { Root, Node, Separator, Item, Folder } from 'fumadocs-core/page-tree';
-import { SearchToggle } from './search';
-import { useSidebar } from './sidebar-context';
-
-export function Sidebar({ tree }: { tree: Root }) {
-  const { open, close } = useSidebar();
-  const pathname = usePathname();
-
-  return (
-    <>
-      {/* Backdrop overlay — mobile only */}
-      <div
-        className={`fixed inset-0 z-40 bg-background-default/50 backdrop-blur-surface transition-opacity md:hidden ${
-          open ? 'opacity-100' : 'opacity-0 pointer-events-none'
-        }`}
-        onClick={close}
-        aria-hidden="true"
-      />
-
-      {/* Sidebar */}
-      <aside
-        data-component="sidebar"
-        className={`fixed top-2 md:top-[3.75rem] left-2 bottom-2 right-auto z-50 w-[15rem] flex flex-col items-stretch justify-start bg-background-default border border-stroke-neutral rounded-square-high shadow-box overflow-hidden transition-transform duration-150 ${
-          open ? 'translate-x-0' : '-translate-x-[calc(100%+0.5rem)] md:translate-x-0'
-        }`}
-      >
-        <div className="grow-0 p-3 flex flex-col items-stretch justify-start gap-3 bg-background-default/50 border-b last:border-b-none border-stroke-neutral backdrop-blur-surface-low">
-          <SearchToggle />
-        </div>
-        <div className="grow-1 p-3 flex flex-col items-stretch justify-start gap-3 bg-background-default border-b last:border-b-none border-stroke-neutral overflow-y-scroll no-scrollbar">
-          <SidebarNodes nodes={tree.children} pathname={pathname} />
-        </div>
-      </aside>
-    </>
-  );
-}
-
-function SidebarNodes({ nodes, pathname }: { nodes: Node[]; pathname: string }) {
-  return (
-    <ul data-component="sidebar-nodes" className="flex flex-col items-stretch justify-start gap-0.5">
-      {nodes.map((node, i) => (
-        <SidebarNode key={i} node={node} pathname={pathname} />
-      ))}
-    </ul>
-  );
-}
-
-function SidebarNode({ node, pathname }: { node: Node; pathname: string }) {
-  if (node.type === 'separator') {
-    return <SidebarSeparator node={node} />;
-  }
-
-  if (node.type === 'folder') {
-    return <SidebarFolder node={node} pathname={pathname} />;
-  }
-
-  return <SidebarItem node={node} pathname={pathname} />;
-}
-
-function SidebarSeparator({ node }: { node: Separator }) {
-  if (!node.name) return <hr className="mx-2 my-3 border-stroke-neutral" />;
-
-  return (
-    <li data-component="sidebar-separator" className="mt-6 first:mt-0 mb-2 px-2 font-semibold uppercase tracking-wider text-2xs text-foreground-neutral-weak">
-      {node.name}
-    </li>
-  );
-}
-
-function SidebarItem({ node, pathname }: { node: Item; pathname: string }) {
-  const active = pathname === node.url;
-
-  return (
-    <li data-component="sidebar-item">
-      <Link
-        href={node.url}
-        className={`px-2 h-7 flex flex-row items-center justify-start gap-2 font-medium text-sm rounded-square transition-all duration-50 ${
-          active
-            ? 'bg-background-neutral hover:bg-background-neutral-strong text-foreground-neutral'
-            : 'bg-background-default hover:bg-background-neutral text-foreground-neutral'
-        }`}
-      >
-        {node.name}
-      </Link>
-    </li>
-  );
-}
-
-function SidebarFolder({ node, pathname }: { node: Folder; pathname: string }) {
-  const isActive = hasActiveChild(node, pathname);
-  const [open, setOpen] = useState(node.defaultOpen ?? isActive);
-
-  return (
-    <li data-component="sidebar-folder">
-      <button
-        onClick={() => setOpen(!open)}
-        className={`w-full px-2 h-7 flex flex-row items-center justify-between gap-2 font-medium text-sm rounded-square transition-all duration-50 ${
-          open
-            ? 'bg-background-neutral hover:bg-background-neutral-strong text-foreground-neutral'
-            : 'bg-background-default hover:bg-background-neutral text-foreground-neutral'
-        }`}
-      >
-        { node.name }
-        <svg className={`h-3 w-3 transition-transform ${open ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5} >
-          <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
-        </svg>
-      </button>
-
-      {open && (
-        <ul className="my-1 pl-3 flex flex-col items-stretch justify-center gap-1">
-          {node.index && <SidebarItem node={node.index} pathname={pathname} />}
-          {node.children.map((child, i) => (
-            <SidebarNode key={i} node={child} pathname={pathname} />
-          ))}
-        </ul>
-      )}
-    </li>
-  );
-}
-
-function hasActiveChild(node: Folder, pathname: string): boolean {
-  if (node.index?.url === pathname) return true;
-  return node.children.some((child) => {
-    if (child.type === 'page') return child.url === pathname;
-    if (child.type === 'folder') return hasActiveChild(child, pathname);
-    return false;
-  });
-}
diff --git a/apps/eclipse/src/components/sidebar/base.tsx b/apps/eclipse/src/components/sidebar/base.tsx
new file mode 100644
index 0000000000..ac73bbf67e
--- /dev/null
+++ b/apps/eclipse/src/components/sidebar/base.tsx
@@ -0,0 +1,358 @@
+'use client';
+
+import {
+  type ComponentProps,
+  createContext,
+  type ReactNode,
+  type RefObject,
+  use,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import Link from 'next/link';
+import { useOnChange } from 'fumadocs-core/utils/use-on-change';
+import { usePathname } from 'fumadocs-core/framework';
+import { useMediaQuery } from 'fumadocs-core/utils/use-media-query';
+import scrollIntoView from 'scroll-into-view-if-needed';
+
+type Mode = 'drawer' | 'full';
+
+interface SidebarContextValue {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  collapsed: boolean;
+  setCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
+  closeOnRedirect: RefObject<boolean>;
+  defaultOpenLevel: number;
+  prefetch?: boolean;
+  mode: Mode;
+}
+
+const SidebarContext = createContext<SidebarContextValue | null>(null);
+
+const FolderContext = createContext<{
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  depth: number;
+} | null>(null);
+
+export function useSidebar(): SidebarContextValue {
+  const ctx = use(SidebarContext);
+  if (!ctx) throw new Error('Missing SidebarContext, wrap in <DocsLayout />.');
+  return ctx;
+}
+
+export function useFolder() {
+  return use(FolderContext);
+}
+
+export function useFolderDepth() {
+  return use(FolderContext)?.depth ?? 0;
+}
+
+export interface SidebarProviderProps {
+  defaultOpenLevel?: number;
+  prefetch?: boolean;
+  children?: ReactNode;
+}
+
+export function SidebarProvider({
+  defaultOpenLevel = 0,
+  prefetch,
+  children,
+}: SidebarProviderProps) {
+  const closeOnRedirect = useRef(true);
+  const [open, setOpen] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
+  const pathname = usePathname();
+  const mode: Mode = useMediaQuery('(width < 768px)') ? 'drawer' : 'full';
+
+  useOnChange(pathname, () => {
+    if (closeOnRedirect.current) {
+      setOpen(false);
+    }
+    closeOnRedirect.current = true;
+  });
+
+  return (
+    <SidebarContext
+      value={useMemo(
+        () => ({
+          open,
+          setOpen,
+          collapsed,
+          setCollapsed,
+          closeOnRedirect,
+          defaultOpenLevel,
+          prefetch,
+          mode,
+        }),
+        [open, collapsed, defaultOpenLevel, prefetch, mode],
+      )}
+    >
+      {children}
+    </SidebarContext>
+  );
+}
+
+/**
+ * Sidebar shell — renders backdrop (mobile) + aside panel.
+ * Keeps Eclipse's visual design: floating card with rounded corners.
+ */
+export function SidebarContent({
+  banner,
+  footer,
+  children,
+}: {
+  banner?: ReactNode;
+  footer?: ReactNode;
+  children: ReactNode;
+}) {
+  const { open, setOpen, mode } = useSidebar();
+
+  return (
+    <>
+      {/* Backdrop overlay — mobile only */}
+      {mode === 'drawer' && (
+        <div
+          className={`fixed inset-0 z-40 bg-background-default/50 backdrop-blur-surface transition-opacity md:hidden ${
+            open ? 'opacity-100' : 'opacity-0 pointer-events-none'
+          }`}
+          onClick={() => setOpen(false)}
+          aria-hidden="true"
+        />
+      )}
+
+      {/* Sidebar */}
+      <aside
+        id="nd-sidebar"
+
+        className={`fixed top-2 md:top-[3.75rem] left-2 bottom-2 right-auto z-50 w-[15rem] flex flex-col items-stretch justify-start bg-background-default border border-stroke-neutral rounded-square-high shadow-box overflow-hidden transition-transform duration-150 ${
+          open
+            ? 'translate-x-0'
+            : '-translate-x-[calc(100%+0.5rem)] md:translate-x-0'
+        }`}
+      >
+        {banner && (
+          <div className="grow-0 p-3 flex flex-col items-stretch justify-start gap-3 bg-background-default/50 border-b last:border-b-none border-stroke-neutral backdrop-blur-surface-low">
+            {banner}
+          </div>
+        )}
+        <div className="grow-1 p-3 flex flex-col items-stretch justify-start gap-3 bg-background-default border-b last:border-b-none border-stroke-neutral overflow-y-scroll no-scrollbar">
+          {children}
+        </div>
+        {footer && (
+          <div className="grow-0 p-3 flex flex-col items-stretch justify-start gap-3 bg-background-default/50 border-t border-stroke-neutral">
+            {footer}
+          </div>
+        )}
+      </aside>
+    </>
+  );
+}
+
+/**
+ * Sidebar folder — manages open/close state with depth tracking.
+ * Matches docs' SidebarFolder pattern with FolderContext.
+ */
+export function SidebarFolder({
+  defaultOpen: defaultOpenProp,
+  active = false,
+  children,
+}: {
+  active?: boolean;
+  defaultOpen?: boolean;
+  children: ReactNode;
+}) {
+  const { defaultOpenLevel } = useSidebar();
+  const depth = useFolderDepth() + 1;
+  const defaultOpen = active || (defaultOpenProp ?? defaultOpenLevel >= depth);
+  const [open, setOpen] = useState(defaultOpen);
+
+  useOnChange(defaultOpen, (v) => {
+    if (v) setOpen(v);
+  });
+
+  return (
+    <FolderContext value={useMemo(() => ({ open, setOpen, depth }), [depth, open])}>
+      <li>{children}</li>
+    </FolderContext>
+  );
+}
+
+/**
+ * Sidebar folder trigger button — toggles the folder open/closed.
+ */
+export function SidebarFolderTrigger({ children }: { children: ReactNode }) {
+  const { open, setOpen } = useFolder()!;
+
+  return (
+    <button
+      onClick={() => setOpen(!open)}
+      className={`w-full px-2 h-7 flex flex-row items-center justify-between gap-2 font-medium text-sm rounded-square transition-all duration-50 ${
+        open
+          ? 'bg-background-neutral hover:bg-background-neutral-strong text-foreground-neutral'
+          : 'bg-background-default hover:bg-background-neutral text-foreground-neutral'
+      }`}
+    >
+      {children}
+      <svg
+        className={`h-3 w-3 transition-transform ${open ? 'rotate-90' : ''}`}
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth={2.5}
+      >
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+      </svg>
+    </button>
+  );
+}
+
+/**
+ * Sidebar folder content — only renders children when folder is open.
+ */
+export function SidebarFolderContent({ children }: { children: ReactNode }) {
+  const { open } = useFolder()!;
+  if (!open) return null;
+
+  return (
+    <ul className="my-1 pl-3 flex flex-col items-stretch justify-center gap-1">
+      {children}
+    </ul>
+  );
+}
+
+/**
+ * Sidebar folder link — a clickable link that also toggles the folder.
+ * Used when a folder has an index page.
+ */
+export function SidebarFolderLink({
+  href,
+  children,
+}: {
+  href: string;
+  children: ReactNode;
+}) {
+  const { open, setOpen } = useFolder()!;
+  const { prefetch } = useSidebar();
+  const pathname = usePathname();
+  const active = pathname === href;
+  const ref = useRef<HTMLAnchorElement>(null);
+
+  useAutoScroll(active, ref);
+
+  return (
+    <Link
+      ref={ref}
+      href={href}
+      data-active={active}
+      onClick={(e) => {
+        if (
+          e.target instanceof Element &&
+          e.target.matches('[data-icon], [data-icon] *')
+        ) {
+          setOpen(!open);
+          e.preventDefault();
+        } else {
+          setOpen(active ? !open : true);
+        }
+      }}
+      className={`w-full px-2 h-7 flex flex-row items-center justify-between gap-2 font-medium text-sm rounded-square transition-all duration-50 ${
+        active
+          ? 'bg-background-neutral hover:bg-background-neutral-strong text-foreground-neutral'
+          : 'bg-background-default hover:bg-background-neutral text-foreground-neutral'
+      }`}
+    >
+      {children}
+      <svg
+        data-icon
+        className={`h-3 w-3 transition-transform ${open ? 'rotate-90' : ''}`}
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth={2.5}
+      >
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+      </svg>
+    </Link>
+  );
+}
+
+/**
+ * Sidebar item — a leaf node link.
+ */
+export function SidebarItem({
+  href,
+  icon,
+  children,
+}: {
+  href: string;
+  icon?: ReactNode;
+  external?: boolean;
+  children: ReactNode;
+}) {
+  const pathname = usePathname();
+  const { prefetch } = useSidebar();
+  const active = pathname === href;
+  const ref = useRef<HTMLAnchorElement>(null);
+
+  useAutoScroll(active, ref);
+
+  return (
+    <li>
+      <Link
+        ref={ref}
+        href={href}
+        data-active={active}
+        className={`px-2 h-7 flex flex-row items-center justify-start gap-2 font-medium text-sm rounded-square transition-all duration-50 ${
+          active
+            ? 'bg-background-neutral hover:bg-background-neutral-strong text-foreground-neutral'
+            : 'bg-background-default hover:bg-background-neutral text-foreground-neutral'
+        }`}
+      >
+        {icon}
+        {children}
+      </Link>
+    </li>
+  );
+}
+
+/**
+ * Sidebar separator — a heading or horizontal rule.
+ */
+export function SidebarSeparator({ children }: { children?: ReactNode }) {
+  const depth = useFolderDepth();
+
+  if (!children) return <hr className="mx-2 my-3 border-stroke-neutral" />;
+
+  return (
+    <li
+
+      className={`mt-6 mb-2 px-2 font-semibold uppercase tracking-wider text-2xs text-foreground-neutral-weak ${depth === 0 ? 'first:mt-0' : ''}`}
+    >
+      {children}
+    </li>
+  );
+}
+
+/**
+ * Auto-scroll the active sidebar item into view.
+ */
+export function useAutoScroll(
+  active: boolean,
+  ref: RefObject<HTMLElement | null>,
+) {
+  const { mode } = useSidebar();
+
+  useEffect(() => {
+    if (active && ref.current) {
+      scrollIntoView(ref.current, {
+        boundary: document.getElementById('nd-sidebar'),
+        scrollMode: 'if-needed',
+      });
+    }
+  }, [active, mode, ref]);
+}
diff --git a/apps/eclipse/src/components/sidebar/page-tree.tsx b/apps/eclipse/src/components/sidebar/page-tree.tsx
new file mode 100644
index 0000000000..d13a848cb5
--- /dev/null
+++ b/apps/eclipse/src/components/sidebar/page-tree.tsx
@@ -0,0 +1,92 @@
+'use client';
+
+import { useTreeContext, useTreePath } from '@fumadocs/base-ui/contexts/tree';
+import { type ReactNode, useMemo, Fragment } from 'react';
+import type * as PageTree from 'fumadocs-core/page-tree';
+import {
+  SidebarFolder,
+  SidebarFolderContent,
+  SidebarFolderLink,
+  SidebarFolderTrigger,
+  SidebarItem,
+  SidebarSeparator,
+} from './base';
+
+function PageTreeFolder({
+  item,
+  children,
+}: {
+  item: PageTree.Folder;
+  children: ReactNode;
+}) {
+  const path = useTreePath();
+
+  return (
+    <SidebarFolder active={path.includes(item)} defaultOpen={item.defaultOpen}>
+      {item.index ? (
+        <SidebarFolderLink href={item.index.url}>
+          {item.icon}
+          {item.name}
+        </SidebarFolderLink>
+      ) : (
+        <SidebarFolderTrigger>
+          {item.icon}
+          {item.name}
+        </SidebarFolderTrigger>
+      )}
+      <SidebarFolderContent>{children}</SidebarFolderContent>
+    </SidebarFolder>
+  );
+}
+
+export function SidebarPageTree() {
+  const { root } = useTreeContext();
+
+  return useMemo(() => {
+    function renderNodes(items: PageTree.Node[]) {
+      return items.map((item, i) => {
+        if (item.type === 'separator') {
+          return (
+            <SidebarSeparator key={i}>
+              {item.name ? (
+                <>
+                  {item.icon}
+                  {item.name}
+                </>
+              ) : null}
+            </SidebarSeparator>
+          );
+        }
+
+        if (item.type === 'folder') {
+          return (
+            <PageTreeFolder key={i} item={item}>
+              {renderNodes(item.children)}
+            </PageTreeFolder>
+          );
+        }
+
+        return (
+          <SidebarItem
+            key={item.url}
+            href={item.url}
+            icon={item.icon}
+            external={item.external}
+          >
+            {item.name}
+          </SidebarItem>
+        );
+      });
+    }
+
+    return (
+      <ul
+        key={root.$id}
+
+        className="flex flex-col items-stretch justify-start gap-0.5"
+      >
+        {renderNodes(root.children)}
+      </ul>
+    );
+  }, [root]);
+}
diff --git a/apps/eclipse/src/components/toc.tsx b/apps/eclipse/src/components/toc.tsx
index 89875f1439..498f50f5d8 100644
--- a/apps/eclipse/src/components/toc.tsx
+++ b/apps/eclipse/src/components/toc.tsx
@@ -1,69 +1,79 @@
 'use client';
 
-import { useEffect, useState, type ReactNode } from 'react';
+import {
+  type ComponentProps,
+  createContext,
+  use,
+  type ReactNode,
+} from 'react';
+import * as Primitive from 'fumadocs-core/toc';
 
-interface TOCItem {
-  title: ReactNode;
-  url: string;
-  depth: number;
-}
+// -- Context for sharing TOC items --
+
+const TOCContext = createContext<Primitive.TOCItemType[]>([]);
 
-function useActiveHeading(items: TOCItem[]) {
-  const [activeId, setActiveId] = useState<string>('');
+export function useTOCItems(): Primitive.TOCItemType[] {
+  return use(TOCContext);
+}
 
-  useEffect(() => {
-    const ids = items.map((item) => item.url.replace('#', ''));
-    const elements = ids
-      .map((id) => document.getElementById(id))
-      .filter(Boolean) as HTMLElement[];
+/**
+ * Wraps children with fumadocs-core AnchorProvider for heading tracking.
+ * Matches docs' TOCProvider pattern.
+ */
+export function TOCProvider({
+  toc,
+  children,
+  ...props
+}: ComponentProps<typeof Primitive.AnchorProvider>) {
+  return (
+    <TOCContext value={toc}>
+      <Primitive.AnchorProvider toc={toc} {...props}>
+        {children}
+      </Primitive.AnchorProvider>
+    </TOCContext>
+  );
+}
 
-    if (elements.length === 0) return;
+// -- TOC items rendered with Eclipse design --
 
-    const observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (entry.isIntersecting) {
-            setActiveId(entry.target.id);
-          }
-        }
-      },
-      { rootMargin: '0px 0px -80% 0px', threshold: 0 },
-    );
+export function TOCItems() {
+  const items = useTOCItems();
 
-    for (const el of elements) observer.observe(el);
-    return () => observer.disconnect();
-  }, [items]);
+  if (items.length === 0) return null;
 
-  return activeId;
+  return (
+    <ul className="flex flex-col items-stretch justify-start border-l border-stroke-neutral">
+      {items.map((item) => (
+        <TOCItem key={item.url} item={item} />
+      ))}
+    </ul>
+  );
 }
 
-export function TableOfContents({ items }: { items: TOCItem[] }) {
-  const activeId = useActiveHeading(items);
+function TOCItem({ item }: { item: Primitive.TOCItemType }) {
+  return (
+    <li>
+      <Primitive.TOCItem
+        href={item.url}
+        className="-ml-[1px] px-2 py-1 flex flex-row items-center justify-start text-sm truncate border-l transition-colors duration-50 text-foreground-neutral-weak hover:text-foreground-neutral border-stroke-neutral data-[active=true]:text-foreground-neutral data-[active=true]:border-stroke-ppg"
+        style={{ paddingLeft: `${(item.depth - 1) * 1}rem` }}
+      >
+        {item.title}
+      </Primitive.TOCItem>
+    </li>
+  );
+}
 
+/**
+ * TableOfContents — reads items from TOCProvider context.
+ */
+export function TableOfContents() {
+  const items = useTOCItems();
   if (items.length === 0) return null;
 
   return (
     <nav className="my-0.5 sticky top-[6.25rem] flex flex-col items-stretch justify-start gap-6">
-      <ul className="flex flex-col items-stretch justify-start gap-1 border-l border-stroke-neutral">
-        {items.map((item) => {
-          const isActive = activeId === item.url.replace('#', '');
-          return (
-            <li key={item.url}>
-              <a
-                href={item.url}
-                className={`-ml-[1px] px-2 flex flex-row items-center justify-start text-sm truncate border-l transition-colors duration-50 ${
-                  isActive
-                    ? 'text-foreground-neutral border-stroke-ppg'
-                    : 'text-foreground-neutral-weak hover:text-foreground-neutral border-stroke-neutral'
-                }`}
-                style={{ paddingLeft: `${(item.depth - 1) * 1}rem` }}
-              >
-                {item.title}
-              </a>
-            </li>
-          );
-        })}
-      </ul>
+      <TOCItems />
     </nav>
   );
 }

From 31dc0c9b49b4bf92b6acc61d1e76c614d0c3e0cc Mon Sep 17 00:00:00 2001
From: Ben Sekulowicz-Barclay <ben@seku.co>
Date: Mon, 23 Mar 2026 18:13:13 +0100
Subject: [PATCH 03/10] Further alignment

---
 .../app/(design-system)/[[...slug]]/page.tsx  |   2 +-
 .../src/app/(design-system)/layout.tsx        |   2 +-
 apps/eclipse/src/app/global.css               |  25 ++
 apps/eclipse/src/app/layout.tsx               |  11 +-
 .../eclipse/src/components/layout/context.tsx |  88 -------
 .../{nav.tsx => layout/notebook/client.tsx}   |  89 ++++++-
 .../{docs-layout.tsx => notebook/index.tsx}   |  38 ++-
 .../page/client.tsx}                          |   2 +
 .../page/index.tsx}                           |   5 +-
 .../components/layout/notebook/sidebar.tsx    |  95 ++++++++
 .../components/{ => layout}/sidebar/base.tsx  | 225 ++++++++++++------
 .../{ => layout}/sidebar/page-tree.tsx        |   0
 apps/eclipse/src/components/search.tsx        | 165 +++++++++----
 .../src/components/{toc.tsx => toc/index.tsx} |   0
 14 files changed, 518 insertions(+), 229 deletions(-)
 delete mode 100644 apps/eclipse/src/components/layout/context.tsx
 rename apps/eclipse/src/components/{nav.tsx => layout/notebook/client.tsx} (54%)
 rename apps/eclipse/src/components/layout/{docs-layout.tsx => notebook/index.tsx} (64%)
 rename apps/eclipse/src/components/layout/{docs-footer.tsx => notebook/page/client.tsx} (98%)
 rename apps/eclipse/src/components/layout/{docs-page.tsx => notebook/page/index.tsx} (94%)
 create mode 100644 apps/eclipse/src/components/layout/notebook/sidebar.tsx
 rename apps/eclipse/src/components/{ => layout}/sidebar/base.tsx (65%)
 rename apps/eclipse/src/components/{ => layout}/sidebar/page-tree.tsx (100%)
 rename apps/eclipse/src/components/{toc.tsx => toc/index.tsx} (100%)

diff --git a/apps/eclipse/src/app/(design-system)/[[...slug]]/page.tsx b/apps/eclipse/src/app/(design-system)/[[...slug]]/page.tsx
index 7a040ca147..3445e4de0b 100644
--- a/apps/eclipse/src/app/(design-system)/[[...slug]]/page.tsx
+++ b/apps/eclipse/src/app/(design-system)/[[...slug]]/page.tsx
@@ -5,7 +5,7 @@ import {
   DocsTitle,
   DocsDescription,
   DocsBody,
-} from '@/components/layout/docs-page';
+} from '@/components/layout/notebook/page';
 import { notFound } from 'next/navigation';
 import { getMDXComponents } from '@/mdx-components';
 import type { Metadata } from 'next';
diff --git a/apps/eclipse/src/app/(design-system)/layout.tsx b/apps/eclipse/src/app/(design-system)/layout.tsx
index e3f10777be..85a085eb9a 100644
--- a/apps/eclipse/src/app/(design-system)/layout.tsx
+++ b/apps/eclipse/src/app/(design-system)/layout.tsx
@@ -1,5 +1,5 @@
 import { source } from '@/lib/source';
-import { DocsLayout } from '@/components/layout/docs-layout';
+import { DocsLayout } from '@/components/layout/notebook';
 import type { ReactNode } from 'react';
 
 export default function Layout({ children }: { children: ReactNode }) {
diff --git a/apps/eclipse/src/app/global.css b/apps/eclipse/src/app/global.css
index 82069cf4d2..6f0a102bf9 100644
--- a/apps/eclipse/src/app/global.css
+++ b/apps/eclipse/src/app/global.css
@@ -1,6 +1,31 @@
 @import "tailwindcss";
 @import "@prisma/eclipse/styles/globals.css";
 
+@theme {
+  --animate-ec-fade-in: ec-fade-in 150ms ease;
+  --animate-ec-fade-out: ec-fade-out 150ms ease forwards;
+  --animate-ec-sidebar-in: ec-sidebar-in 150ms ease;
+  --animate-ec-sidebar-out: ec-sidebar-out 150ms ease forwards;
+
+  @keyframes ec-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes ec-fade-out {
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+
+  @keyframes ec-sidebar-in {
+    from { transform: translateX(calc(-100% - 0.5rem)); }
+  }
+
+  @keyframes ec-sidebar-out {
+    to { transform: translateX(calc(-100% - 0.5rem)); }
+  }
+}
+
 @layer utilities {
   .font-sans-display-settings {
     font-feature-settings: var(--font-sans-display-settings);
diff --git a/apps/eclipse/src/app/layout.tsx b/apps/eclipse/src/app/layout.tsx
index 33ee08b655..47ef45d17c 100644
--- a/apps/eclipse/src/app/layout.tsx
+++ b/apps/eclipse/src/app/layout.tsx
@@ -3,10 +3,19 @@ import Script from "next/script";
 import { FontAwesomeScript as EclipseFA } from "@prisma/eclipse";
 import { Provider } from "@/components/provider";
 import type { ReactNode } from "react";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: {
+    default: "Eclipse Design System",
+    template: "%s | Eclipse Design System",
+  },
+  description: "Eclipse — Prisma's design system",
+};
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
         <Script
           src={EclipseFA}
diff --git a/apps/eclipse/src/components/layout/context.tsx b/apps/eclipse/src/components/layout/context.tsx
deleted file mode 100644
index e1df5a14ce..0000000000
--- a/apps/eclipse/src/components/layout/context.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-'use client';
-
-import {
-  createContext,
-  type ReactNode,
-  use,
-  useMemo,
-  useState,
-} from 'react';
-
-// -- Layout context (nav transparency) --
-
-export const LayoutContext = createContext<{
-  isNavTransparent: boolean;
-} | null>(null);
-
-export function LayoutContextProvider({
-  children,
-}: {
-  children: ReactNode;
-}) {
-  return (
-    <LayoutContext
-      value={useMemo(
-        () => ({ isNavTransparent: false }),
-        [],
-      )}
-    >
-      {children}
-    </LayoutContext>
-  );
-}
-
-// -- Sidebar enabled (per-page control) --
-
-export const SidebarEnabledContext = createContext<boolean>(true);
-
-const SidebarEnabledSetterContext = createContext<
-  (enabled: boolean) => void
->(() => {});
-
-/**
- * Renders children only when the sidebar is enabled (layout + page).
- */
-export function SidebarEnabledGate({ children }: { children: ReactNode }) {
-  const enabled = use(SidebarEnabledContext);
-  if (!enabled) return null;
-  return <>{children}</>;
-}
-
-/**
- * Provider that merges layout sidebar.enabled with the page's choice.
- * Layout wraps content in this; DocsPage syncs via the setter
- * so a page can hide the sidebar.
- */
-export function SidebarEnabledFromPageProvider({
-  layoutEnabled,
-  children,
-}: {
-  layoutEnabled: boolean;
-  children: ReactNode;
-}) {
-  const [pageEnabled, setPageEnabled] = useState(true);
-  const effective = layoutEnabled && pageEnabled;
-  const setter = useMemo(
-    () => (enabled: boolean) => setPageEnabled(enabled),
-    [],
-  );
-
-  return (
-    <SidebarEnabledSetterContext.Provider value={setter}>
-      <SidebarEnabledContext.Provider value={effective}>
-        {children}
-      </SidebarEnabledContext.Provider>
-    </SidebarEnabledSetterContext.Provider>
-  );
-}
-
-/**
- * Syncs page-level sidebar.enabled to the layout context.
- * Used inside DocsPage when a page wants to hide the sidebar.
- */
-export function SidebarEnabledSync({ enabled }: { enabled: boolean }) {
-  const setEnabled = use(SidebarEnabledSetterContext);
-  // Sync on render — setter is stable so this is safe
-  if (!enabled) setEnabled(false);
-  return null;
-}
diff --git a/apps/eclipse/src/components/nav.tsx b/apps/eclipse/src/components/layout/notebook/client.tsx
similarity index 54%
rename from apps/eclipse/src/components/nav.tsx
rename to apps/eclipse/src/components/layout/notebook/client.tsx
index 3af7f15e5d..02f130ae5e 100644
--- a/apps/eclipse/src/components/nav.tsx
+++ b/apps/eclipse/src/components/layout/notebook/client.tsx
@@ -1,7 +1,94 @@
 'use client';
 
 import Link from 'next/link';
-import { useSidebar } from './sidebar/base';
+import {
+  createContext,
+  type ReactNode,
+  use,
+  useMemo,
+  useState,
+} from 'react';
+import { useSidebar } from '../sidebar/base';
+
+// -- Layout context (nav transparency) --
+
+export const LayoutContext = createContext<{
+  isNavTransparent: boolean;
+} | null>(null);
+
+export function LayoutContextProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <LayoutContext
+      value={useMemo(
+        () => ({ isNavTransparent: false }),
+        [],
+      )}
+    >
+      {children}
+    </LayoutContext>
+  );
+}
+
+// -- Sidebar enabled (per-page control) --
+
+export const SidebarEnabledContext = createContext<boolean>(true);
+
+const SidebarEnabledSetterContext = createContext<
+  (enabled: boolean) => void
+>(() => {});
+
+/**
+ * Renders children only when the sidebar is enabled (layout + page).
+ */
+export function SidebarEnabledGate({ children }: { children: ReactNode }) {
+  const enabled = use(SidebarEnabledContext);
+  if (!enabled) return null;
+  return <>{children}</>;
+}
+
+/**
+ * Provider that merges layout sidebar.enabled with the page's choice.
+ * Layout wraps content in this; DocsPage syncs via the setter
+ * so a page can hide the sidebar.
+ */
+export function SidebarEnabledFromPageProvider({
+  layoutEnabled,
+  children,
+}: {
+  layoutEnabled: boolean;
+  children: ReactNode;
+}) {
+  const [pageEnabled, setPageEnabled] = useState(true);
+  const effective = layoutEnabled && pageEnabled;
+  const setter = useMemo(
+    () => (enabled: boolean) => setPageEnabled(enabled),
+    [],
+  );
+
+  return (
+    <SidebarEnabledSetterContext.Provider value={setter}>
+      <SidebarEnabledContext.Provider value={effective}>
+        {children}
+      </SidebarEnabledContext.Provider>
+    </SidebarEnabledSetterContext.Provider>
+  );
+}
+
+/**
+ * Syncs page-level sidebar.enabled to the layout context.
+ * Used inside DocsPage when a page wants to hide the sidebar.
+ */
+export function SidebarEnabledSync({ enabled }: { enabled: boolean }) {
+  const setEnabled = use(SidebarEnabledSetterContext);
+  if (!enabled) setEnabled(false);
+  return null;
+}
+
+// -- Nav --
 
 export function Nav() {
   const { setOpen } = useSidebar();
diff --git a/apps/eclipse/src/components/layout/docs-layout.tsx b/apps/eclipse/src/components/layout/notebook/index.tsx
similarity index 64%
rename from apps/eclipse/src/components/layout/docs-layout.tsx
rename to apps/eclipse/src/components/layout/notebook/index.tsx
index 2307e0d15e..6c6313ed4a 100644
--- a/apps/eclipse/src/components/layout/docs-layout.tsx
+++ b/apps/eclipse/src/components/layout/notebook/index.tsx
@@ -1,14 +1,18 @@
 import type { ReactNode } from 'react';
 import type * as PageTree from 'fumadocs-core/page-tree';
 import { TreeContextProvider } from '@fumadocs/base-ui/contexts/tree';
-import { SidebarProvider, SidebarContent } from '../sidebar/base';
-import { SidebarPageTree } from '../sidebar/page-tree';
-import { Nav } from '../nav';
-import { SearchToggle } from '../search';
+import { SidebarProvider } from '../sidebar/base';
+import {
+  SidebarContent,
+  SidebarDrawer,
+  SidebarPageTree,
+} from './sidebar';
+import { SearchToggle } from '../../search';
 import {
   LayoutContextProvider,
   SidebarEnabledFromPageProvider,
-} from './context';
+  Nav,
+} from './client';
 
 export interface DocsLayoutProps {
   tree: PageTree.Root;
@@ -34,6 +38,21 @@ export function DocsLayout({
   } = {},
   children,
 }: DocsLayoutProps) {
+  const searchBanner = <SearchToggle />;
+
+  function sidebar() {
+    return (
+      <>
+        <SidebarContent banner={searchBanner} footer={sidebarProps.footer}>
+          <SidebarPageTree />
+        </SidebarContent>
+        <SidebarDrawer banner={searchBanner} footer={sidebarProps.footer}>
+          <SidebarPageTree />
+        </SidebarDrawer>
+      </>
+    );
+  }
+
   return (
     <TreeContextProvider tree={tree}>
       <LayoutContextProvider>
@@ -44,14 +63,7 @@ export function DocsLayout({
           <SidebarEnabledFromPageProvider layoutEnabled={sidebarEnabled}>
             <Nav />
             <div>
-              {sidebarEnabled && (
-                <SidebarContent
-                  banner={<SearchToggle />}
-                  footer={sidebarProps.footer}
-                >
-                  <SidebarPageTree />
-                </SidebarContent>
-              )}
+              {sidebarEnabled && sidebar()}
               <main>{children}</main>
             </div>
           </SidebarEnabledFromPageProvider>
diff --git a/apps/eclipse/src/components/layout/docs-footer.tsx b/apps/eclipse/src/components/layout/notebook/page/client.tsx
similarity index 98%
rename from apps/eclipse/src/components/layout/docs-footer.tsx
rename to apps/eclipse/src/components/layout/notebook/page/client.tsx
index 8a2e116724..5afd9f95cb 100644
--- a/apps/eclipse/src/components/layout/docs-footer.tsx
+++ b/apps/eclipse/src/components/layout/notebook/page/client.tsx
@@ -5,6 +5,8 @@ import { usePathname } from 'next/navigation';
 import { useMemo } from 'react';
 import { useFooterItems } from '@fumadocs/base-ui/utils/use-footer-items';
 
+export { SidebarEnabledSync } from '../client';
+
 export function DocsFooter({ className }: { className?: string }) {
   const footerList = useFooterItems();
   const pathname = usePathname();
diff --git a/apps/eclipse/src/components/layout/docs-page.tsx b/apps/eclipse/src/components/layout/notebook/page/index.tsx
similarity index 94%
rename from apps/eclipse/src/components/layout/docs-page.tsx
rename to apps/eclipse/src/components/layout/notebook/page/index.tsx
index 70a49262b7..4c79ab7a66 100644
--- a/apps/eclipse/src/components/layout/docs-page.tsx
+++ b/apps/eclipse/src/components/layout/notebook/page/index.tsx
@@ -1,8 +1,7 @@
 import type { ComponentProps, ReactNode } from 'react';
 import type { TOCItemType } from 'fumadocs-core/toc';
-import { TOCProvider, TableOfContents } from '../toc';
-import { DocsFooter } from './docs-footer';
-import { SidebarEnabledSync } from './context';
+import { TOCProvider, TableOfContents } from '../../../toc';
+import { DocsFooter, SidebarEnabledSync } from './client';
 
 export interface DocsPageProps {
   toc?: TOCItemType[];
diff --git a/apps/eclipse/src/components/layout/notebook/sidebar.tsx b/apps/eclipse/src/components/layout/notebook/sidebar.tsx
new file mode 100644
index 0000000000..e651c5c558
--- /dev/null
+++ b/apps/eclipse/src/components/layout/notebook/sidebar.tsx
@@ -0,0 +1,95 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import * as Base from '../sidebar/base';
+
+export {
+  SidebarProvider,
+  SidebarFolder,
+  SidebarFolderTrigger,
+  SidebarFolderContent,
+  SidebarFolderLink,
+  SidebarItem,
+  SidebarSeparator,
+  SidebarTrigger,
+} from '../sidebar/base';
+
+export { SidebarPageTree } from '../sidebar/page-tree';
+
+export function SidebarContent({
+  banner,
+  footer,
+  children,
+}: {
+  banner?: ReactNode;
+  footer?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <Base.SidebarContent>
+      {({ ref, collapsed, hovered, ...rest }) => (
+        <aside
+          id="nd-sidebar"
+          ref={ref}
+          data-collapsed={collapsed}
+          data-hovered={collapsed && hovered}
+          className="fixed top-2 md:top-[3.75rem] left-2 bottom-2 right-auto z-50 w-[15rem] flex flex-col items-stretch justify-start bg-background-default border border-stroke-neutral rounded-square-high shadow-box overflow-hidden max-md:hidden"
+          {...rest}
+        >
+          <SidebarInner banner={banner} footer={footer}>
+            {children}
+          </SidebarInner>
+        </aside>
+      )}
+    </Base.SidebarContent>
+  );
+}
+
+export function SidebarDrawer({
+  banner,
+  footer,
+  children,
+}: {
+  banner?: ReactNode;
+  footer?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <>
+      <Base.SidebarDrawerOverlay className="fixed inset-0 z-40 bg-background-default/50 backdrop-blur-surface data-[state=open]:animate-ec-fade-in data-[state=closed]:animate-ec-fade-out" />
+      <Base.SidebarDrawerContent className="fixed top-2 left-2 bottom-2 right-auto z-50 w-[15rem] flex flex-col items-stretch justify-start bg-background-default border border-stroke-neutral rounded-square-high shadow-box overflow-hidden data-[state=open]:animate-ec-sidebar-in data-[state=closed]:animate-ec-sidebar-out">
+        <SidebarInner banner={banner} footer={footer}>
+          {children}
+        </SidebarInner>
+      </Base.SidebarDrawerContent>
+    </>
+  );
+}
+
+function SidebarInner({
+  banner,
+  footer,
+  children,
+}: {
+  banner?: ReactNode;
+  footer?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <>
+      {banner && (
+        <div className="grow-0 p-3 flex flex-col items-stretch justify-start gap-3 bg-background-default/50 border-b last:border-b-none border-stroke-neutral backdrop-blur-surface-low">
+          {banner}
+        </div>
+      )}
+      <div className="grow-1 p-3 flex flex-col items-stretch justify-start gap-3 bg-background-default border-b last:border-b-none border-stroke-neutral overflow-y-scroll no-scrollbar">
+        {children}
+      </div>
+      {footer && (
+        <div className="grow-0 p-3 flex flex-col items-stretch justify-start gap-3 bg-background-default/50 border-t border-stroke-neutral">
+          {footer}
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/apps/eclipse/src/components/sidebar/base.tsx b/apps/eclipse/src/components/layout/sidebar/base.tsx
similarity index 65%
rename from apps/eclipse/src/components/sidebar/base.tsx
rename to apps/eclipse/src/components/layout/sidebar/base.tsx
index ac73bbf67e..b62ca52d39 100644
--- a/apps/eclipse/src/components/sidebar/base.tsx
+++ b/apps/eclipse/src/components/layout/sidebar/base.tsx
@@ -3,6 +3,7 @@
 import {
   type ComponentProps,
   createContext,
+  type PointerEvent,
   type ReactNode,
   type RefObject,
   use,
@@ -16,6 +17,7 @@ import { useOnChange } from 'fumadocs-core/utils/use-on-change';
 import { usePathname } from 'fumadocs-core/framework';
 import { useMediaQuery } from 'fumadocs-core/utils/use-media-query';
 import scrollIntoView from 'scroll-into-view-if-needed';
+import ReactDOM from 'react-dom';
 
 type Mode = 'drawer' | 'full';
 
@@ -97,66 +99,132 @@ export function SidebarProvider({
   );
 }
 
-/**
- * Sidebar shell — renders backdrop (mobile) + aside panel.
- * Keeps Eclipse's visual design: floating card with rounded corners.
- */
+// -- Sidebar content (render-function pattern) --
+
 export function SidebarContent({
-  banner,
-  footer,
   children,
 }: {
-  banner?: ReactNode;
-  footer?: ReactNode;
-  children: ReactNode;
+  children: (state: {
+    ref: RefObject<HTMLElement | null>;
+    collapsed: boolean;
+    hovered: boolean;
+    onPointerEnter: (event: PointerEvent) => void;
+    onPointerLeave: (event: PointerEvent) => void;
+  }) => ReactNode;
 }) {
+  const { collapsed, mode } = useSidebar();
+  const [hover, setHover] = useState(false);
+  const ref = useRef<HTMLElement>(null);
+  const timerRef = useRef(0);
+
+  useOnChange(collapsed, () => {
+    if (collapsed) setHover(false);
+  });
+
+  if (mode !== 'full') return;
+
+  function shouldIgnoreHover(e: PointerEvent): boolean {
+    const element = ref.current;
+    if (!element) return true;
+
+    return (
+      !collapsed ||
+      e.pointerType === 'touch' ||
+      element.getAnimations().length > 0
+    );
+  }
+
+  return children({
+    ref,
+    collapsed,
+    hovered: hover,
+    onPointerEnter(e) {
+      if (shouldIgnoreHover(e)) return;
+      window.clearTimeout(timerRef.current);
+      setHover(true);
+    },
+    onPointerLeave(e) {
+      if (shouldIgnoreHover(e)) return;
+      window.clearTimeout(timerRef.current);
+
+      timerRef.current = window.setTimeout(
+        () => setHover(false),
+        Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100
+          ? 0
+          : 500,
+      );
+    },
+  });
+}
+
+// -- Sidebar drawer (mobile) --
+
+export function SidebarDrawerOverlay(props: ComponentProps<'div'>) {
   const { open, setOpen, mode } = useSidebar();
+  const [hidden, setHidden] = useState(!open);
+
+  if (open && hidden) setHidden(false);
+  if (mode !== 'drawer' || hidden) return;
 
   return (
-    <>
-      {/* Backdrop overlay — mobile only */}
-      {mode === 'drawer' && (
-        <div
-          className={`fixed inset-0 z-40 bg-background-default/50 backdrop-blur-surface transition-opacity md:hidden ${
-            open ? 'opacity-100' : 'opacity-0 pointer-events-none'
-          }`}
-          onClick={() => setOpen(false)}
-          aria-hidden="true"
-        />
-      )}
+    <div
+      data-state={open ? 'open' : 'closed'}
+      onClick={() => setOpen(false)}
+      onAnimationEnd={() => {
+        if (!open) ReactDOM.flushSync(() => setHidden(true));
+      }}
+      {...props}
+    />
+  );
+}
+
+export function SidebarDrawerContent({
+  className,
+  children,
+  ...props
+}: ComponentProps<'aside'>) {
+  const { open, mode } = useSidebar();
+  const [hidden, setHidden] = useState(!open);
 
-      {/* Sidebar */}
-      <aside
-        id="nd-sidebar"
+  if (open && hidden) setHidden(false);
+  if (mode !== 'drawer') return;
 
-        className={`fixed top-2 md:top-[3.75rem] left-2 bottom-2 right-auto z-50 w-[15rem] flex flex-col items-stretch justify-start bg-background-default border border-stroke-neutral rounded-square-high shadow-box overflow-hidden transition-transform duration-150 ${
-          open
-            ? 'translate-x-0'
-            : '-translate-x-[calc(100%+0.5rem)] md:translate-x-0'
-        }`}
-      >
-        {banner && (
-          <div className="grow-0 p-3 flex flex-col items-stretch justify-start gap-3 bg-background-default/50 border-b last:border-b-none border-stroke-neutral backdrop-blur-surface-low">
-            {banner}
-          </div>
-        )}
-        <div className="grow-1 p-3 flex flex-col items-stretch justify-start gap-3 bg-background-default border-b last:border-b-none border-stroke-neutral overflow-y-scroll no-scrollbar">
-          {children}
-        </div>
-        {footer && (
-          <div className="grow-0 p-3 flex flex-col items-stretch justify-start gap-3 bg-background-default/50 border-t border-stroke-neutral">
-            {footer}
-          </div>
-        )}
-      </aside>
-    </>
+  return (
+    <aside
+      id="nd-sidebar-mobile"
+      data-state={open ? 'open' : 'closed'}
+      className={`${hidden ? 'invisible' : ''} ${className ?? ''}`}
+      onAnimationEnd={() => {
+        if (!open) ReactDOM.flushSync(() => setHidden(true));
+      }}
+      {...props}
+    >
+      {children}
+    </aside>
+  );
+}
+
+// -- Sidebar trigger --
+
+export function SidebarTrigger({
+  children,
+  ...props
+}: ComponentProps<'button'>) {
+  const { setOpen } = useSidebar();
+
+  return (
+    <button
+      aria-label="Open Sidebar"
+      onClick={() => setOpen((prev) => !prev)}
+      {...props}
+    >
+      {children}
+    </button>
   );
 }
 
-/**
- * Sidebar folder — manages open/close state with depth tracking.
- * Matches docs' SidebarFolder pattern with FolderContext.
- */
+// -- Folder primitives --
+
 export function SidebarFolder({
   defaultOpen: defaultOpenProp,
   active = false,
@@ -168,7 +236,8 @@ export function SidebarFolder({
 }) {
   const { defaultOpenLevel } = useSidebar();
   const depth = useFolderDepth() + 1;
-  const defaultOpen = active || (defaultOpenProp ?? defaultOpenLevel >= depth);
+  const defaultOpen =
+    active || (defaultOpenProp ?? defaultOpenLevel >= depth);
   const [open, setOpen] = useState(defaultOpen);
 
   useOnChange(defaultOpen, (v) => {
@@ -176,16 +245,19 @@ export function SidebarFolder({
   });
 
   return (
-    <FolderContext value={useMemo(() => ({ open, setOpen, depth }), [depth, open])}>
-      <li>{children}</li>
+    <FolderContext
+      value={useMemo(() => ({ open, setOpen, depth }), [depth, open])}
+    >
+      {children}
     </FolderContext>
   );
 }
 
-/**
- * Sidebar folder trigger button — toggles the folder open/closed.
- */
-export function SidebarFolderTrigger({ children }: { children: ReactNode }) {
+export function SidebarFolderTrigger({
+  children,
+}: {
+  children: ReactNode;
+}) {
   const { open, setOpen } = useFolder()!;
 
   return (
@@ -205,16 +277,21 @@ export function SidebarFolderTrigger({ children }: { children: ReactNode }) {
         stroke="currentColor"
         strokeWidth={2.5}
       >
-        <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M9 5l7 7-7 7"
+        />
       </svg>
     </button>
   );
 }
 
-/**
- * Sidebar folder content — only renders children when folder is open.
- */
-export function SidebarFolderContent({ children }: { children: ReactNode }) {
+export function SidebarFolderContent({
+  children,
+}: {
+  children: ReactNode;
+}) {
   const { open } = useFolder()!;
   if (!open) return null;
 
@@ -225,10 +302,6 @@ export function SidebarFolderContent({ children }: { children: ReactNode }) {
   );
 }
 
-/**
- * Sidebar folder link — a clickable link that also toggles the folder.
- * Used when a folder has an index page.
- */
 export function SidebarFolderLink({
   href,
   children,
@@ -275,15 +348,18 @@ export function SidebarFolderLink({
         stroke="currentColor"
         strokeWidth={2.5}
       >
-        <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M9 5l7 7-7 7"
+        />
       </svg>
     </Link>
   );
 }
 
-/**
- * Sidebar item — a leaf node link.
- */
+// -- Item and separator --
+
 export function SidebarItem({
   href,
   icon,
@@ -320,9 +396,6 @@ export function SidebarItem({
   );
 }
 
-/**
- * Sidebar separator — a heading or horizontal rule.
- */
 export function SidebarSeparator({ children }: { children?: ReactNode }) {
   const depth = useFolderDepth();
 
@@ -330,7 +403,6 @@ export function SidebarSeparator({ children }: { children?: ReactNode }) {
 
   return (
     <li
-
       className={`mt-6 mb-2 px-2 font-semibold uppercase tracking-wider text-2xs text-foreground-neutral-weak ${depth === 0 ? 'first:mt-0' : ''}`}
     >
       {children}
@@ -338,9 +410,8 @@ export function SidebarSeparator({ children }: { children?: ReactNode }) {
   );
 }
 
-/**
- * Auto-scroll the active sidebar item into view.
- */
+// -- Auto-scroll utility --
+
 export function useAutoScroll(
   active: boolean,
   ref: RefObject<HTMLElement | null>,
@@ -350,7 +421,9 @@ export function useAutoScroll(
   useEffect(() => {
     if (active && ref.current) {
       scrollIntoView(ref.current, {
-        boundary: document.getElementById('nd-sidebar'),
+        boundary: document.getElementById(
+          mode === 'drawer' ? 'nd-sidebar-mobile' : 'nd-sidebar',
+        ),
         scrollMode: 'if-needed',
       });
     }
diff --git a/apps/eclipse/src/components/sidebar/page-tree.tsx b/apps/eclipse/src/components/layout/sidebar/page-tree.tsx
similarity index 100%
rename from apps/eclipse/src/components/sidebar/page-tree.tsx
rename to apps/eclipse/src/components/layout/sidebar/page-tree.tsx
diff --git a/apps/eclipse/src/components/search.tsx b/apps/eclipse/src/components/search.tsx
index dfcbf8a485..02103b5b60 100644
--- a/apps/eclipse/src/components/search.tsx
+++ b/apps/eclipse/src/components/search.tsx
@@ -1,55 +1,130 @@
 'use client';
 
 import { useDocsSearch } from 'fumadocs-core/search/client';
-import {
-  SearchDialog,
-  SearchDialogClose,
-  SearchDialogContent,
-  SearchDialogHeader,
-  SearchDialogInput,
-  SearchDialogList,
-  SearchDialogOverlay,
-  type SharedProps,
-} from 'fumadocs-ui/components/dialog/search';
+import { useRouter } from 'next/navigation';
+import { createPortal } from 'react-dom';
+import { useEffect, useRef, useCallback } from 'react';
 import { useSearchContext } from '@fumadocs/base-ui/contexts/search';
+import type { SharedProps } from 'fumadocs-ui/components/dialog/search';
 
-export default function EclipseSearchDialog(props: SharedProps) {
-  const { search, setSearch, query } = useDocsSearch({
-    type: 'static',
-  });
+export default function EclipseSearchDialog({ open, onOpenChange }: SharedProps) {
+  if (!open) return null;
+
+  return createPortal(
+    <SearchDialogInner onClose={() => onOpenChange(false)} />,
+    document.body,
+  );
+}
+
+function SearchDialogInner({ onClose }: { onClose: () => void }) {
+  const router = useRouter();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { search, setSearch, query } = useDocsSearch({ type: 'static' });
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    document.body.style.overflow = 'hidden';
+    return () => { document.body.style.overflow = ''; };
+  }, []);
+
+  const onSelect = useCallback(
+    (url: string) => {
+      router.push(url);
+      onClose();
+    },
+    [router, onClose],
+  );
+
+  const results = query.data && query.data !== 'empty' ? query.data : [];
 
   return (
-    <SearchDialog
-      search={search}
-      onSearchChange={setSearch}
-      isLoading={query.isLoading}
-      {...props}
-    >
-      <SearchDialogOverlay />
-      <SearchDialogContent>
-        <SearchDialogHeader>
-          <SearchDialogInput />
-          <SearchDialogClose aria-label="Close search">
-            <svg
-              className="size-4"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2}
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </SearchDialogClose>
-        </SearchDialogHeader>
-        <SearchDialogList
-          items={query.data !== 'empty' ? query.data : null}
-        />
-      </SearchDialogContent>
-    </SearchDialog>
+    <div className="fixed inset-0 z-[60] flex items-start justify-center pt-[15vh]" onClick={onClose}>
+      <div className="fixed inset-0 bg-background-default/50 backdrop-blur-surface" aria-hidden="true" />
+
+      <div
+        className="relative z-10 w-full max-w-lg bg-background-default border border-stroke-neutral rounded-square shadow-box overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape') onClose();
+        }}
+      >
+        {/* Search input */}
+        <div className="px-4 h-12 flex flex-row items-center gap-2 border-b last:border-b-none border-stroke-neutral">
+          <input
+            ref={inputRef}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search documentation..."
+            className="flex-1 h-10 bg-transparent text-base text-foreground-neutral placeholder:text-foreground-neutral-weaker outline-none"
+          />
+          <kbd
+            className="px-2 h-6 flex flex-row items-center bg-background-neutral font-mono text-xs text-foreground-neutral-weaker rounded-square-low cursor-pointer"
+            onClick={onClose}
+          >
+            ESC
+          </kbd>
+        </div>
+
+        {/* Results */}
+        <div className="max-h-[50vh] overflow-y-auto">
+          {query.isLoading && (
+            <p className="p-4 text-sm text-foreground-neutral-weak text-center">Searching...</p>
+          )}
+
+          {!query.isLoading && search.length > 0 && results.length === 0 && (
+            <p className="p-4 text-sm text-foreground-neutral-weak text-center">No results found.</p>
+          )}
+
+          {!query.isLoading && results.length > 0 && (
+            <ul className="p-4 flex flex-col items-stretch justify-start gap-2">
+              {results.map((result) => (
+                <li key={result.id}>
+                  <button
+                    onClick={() => onSelect(result.url)}
+                    className="w-full px-2 py-1 flex flex-col items-start gap-1 text-left bg-background-default hover:bg-background-neutral rounded-square-low transition-colors duration-50 cursor-pointer"
+                  >
+                    <span className="flex items-center gap-3">
+                      <ResultIcon type={result.type} />
+                      <span className="text-sm font-medium text-foreground-neutral line-clamp-1">{result.content}</span>
+                    </span>
+                    <span className="ml-7 text-xs text-foreground-neutral-weak truncate max-w-full">
+                      {result.url.replace(/^\//, '').replace(/\//g, ' / ') || 'Home'}
+                    </span>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ResultIcon({ type }: { type: 'page' | 'heading' | 'text' }) {
+  if (type === 'page') {
+    return (
+      <svg className="size-4 text-foreground-neutral-weak shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+      </svg>
+    );
+  }
+
+  if (type === 'heading') {
+    return (
+      <svg className="size-4 text-foreground-neutral-weak shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5l-3.9 19.5m-2.1-19.5l-3.9 19.5" />
+      </svg>
+    );
+  }
+
+  return (
+    <svg className="size-4 text-foreground-neutral-weak shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" />
+    </svg>
   );
 }
 
diff --git a/apps/eclipse/src/components/toc.tsx b/apps/eclipse/src/components/toc/index.tsx
similarity index 100%
rename from apps/eclipse/src/components/toc.tsx
rename to apps/eclipse/src/components/toc/index.tsx

From 413ddd3aa29855944c13f1f2e611cb383e0e8cf0 Mon Sep 17 00:00:00 2001
From: Ben Sekulowicz-Barclay <ben@seku.co>
Date: Mon, 23 Mar 2026 18:15:49 +0100
Subject: [PATCH 04/10] Fix search

---
 apps/eclipse/src/components/search.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/eclipse/src/components/search.tsx b/apps/eclipse/src/components/search.tsx
index 02103b5b60..a20386cb7f 100644
--- a/apps/eclipse/src/components/search.tsx
+++ b/apps/eclipse/src/components/search.tsx
@@ -19,7 +19,7 @@ export default function EclipseSearchDialog({ open, onOpenChange }: SharedProps)
 function SearchDialogInner({ onClose }: { onClose: () => void }) {
   const router = useRouter();
   const inputRef = useRef<HTMLInputElement>(null);
-  const { search, setSearch, query } = useDocsSearch({ type: 'static' });
+  const { search, setSearch, query } = useDocsSearch({ type: 'fetch' });
 
   useEffect(() => {
     inputRef.current?.focus();
@@ -88,7 +88,7 @@ function SearchDialogInner({ onClose }: { onClose: () => void }) {
                   >
                     <span className="flex items-center gap-3">
                       <ResultIcon type={result.type} />
-                      <span className="text-sm font-medium text-foreground-neutral line-clamp-1">{result.content}</span>
+                      <span className="text-sm font-medium text-foreground-neutral line-clamp-1">{stripHtml(result.content)}</span>
                     </span>
                     <span className="ml-7 text-xs text-foreground-neutral-weak truncate max-w-full">
                       {result.url.replace(/^\//, '').replace(/\//g, ' / ') || 'Home'}
@@ -104,6 +104,10 @@ function SearchDialogInner({ onClose }: { onClose: () => void }) {
   );
 }
 
+function stripHtml(str: string): string {
+  return str.replace(/<[^>]*>/g, '');
+}
+
 function ResultIcon({ type }: { type: 'page' | 'heading' | 'text' }) {
   if (type === 'page') {
     return (

From d2a70feafa9a528bd10bc49c1278a16f8341eb55 Mon Sep 17 00:00:00 2001
From: Ben Sekulowicz-Barclay <ben@seku.co>
Date: Mon, 23 Mar 2026 18:22:03 +0100
Subject: [PATCH 05/10] Update TOC behaviour to match

---
 apps/eclipse/src/components/toc/index.tsx | 117 ++++++++++++++++++----
 apps/eclipse/src/lib/merge-refs.ts        |  13 +++
 2 files changed, 113 insertions(+), 17 deletions(-)
 create mode 100644 apps/eclipse/src/lib/merge-refs.ts

diff --git a/apps/eclipse/src/components/toc/index.tsx b/apps/eclipse/src/components/toc/index.tsx
index 498f50f5d8..7488c48161 100644
--- a/apps/eclipse/src/components/toc/index.tsx
+++ b/apps/eclipse/src/components/toc/index.tsx
@@ -3,10 +3,15 @@
 import {
   type ComponentProps,
   createContext,
+  type RefObject,
   use,
-  type ReactNode,
+  useEffect,
+  useEffectEvent,
+  useRef,
 } from 'react';
 import * as Primitive from 'fumadocs-core/toc';
+import { useOnChange } from 'fumadocs-core/utils/use-on-change';
+import { mergeRefs } from '../../lib/merge-refs';
 
 // -- Context for sharing TOC items --
 
@@ -34,33 +39,111 @@ export function TOCProvider({
   );
 }
 
+// -- TocThumb (animated active indicator) --
+
+type TocThumbType = [top: number, height: number];
+
+interface TocThumbProps extends ComponentProps<'div'> {
+  containerRef: RefObject<HTMLElement | null>;
+}
+
+export function TocThumb({ containerRef, ...props }: TocThumbProps) {
+  const thumbRef = useRef<HTMLDivElement>(null);
+  const active = Primitive.useActiveAnchors();
+
+  function update(info: TocThumbType): void {
+    const element = thumbRef.current;
+    if (!element) return;
+    element.style.setProperty('--ec-top', `${info[0]}px`);
+    element.style.setProperty('--ec-height', `${info[1]}px`);
+  }
+
+  const onPrint = useEffectEvent(() => {
+    if (containerRef.current) {
+      update(calc(containerRef.current, active));
+    }
+  });
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const container = containerRef.current;
+
+    const observer = new ResizeObserver(onPrint);
+    observer.observe(container);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [containerRef]);
+
+  useOnChange(active, () => {
+    if (containerRef.current) {
+      update(calc(containerRef.current, active));
+    }
+  });
+
+  return <div ref={thumbRef} data-hidden={active.length === 0} {...props} />;
+}
+
+function calc(container: HTMLElement, active: string[]): TocThumbType {
+  if (active.length === 0 || container.clientHeight === 0) {
+    return [0, 0];
+  }
+
+  let upper = Number.MAX_VALUE,
+    lower = 0;
+
+  for (const item of active) {
+    const element = container.querySelector<HTMLElement>(`a[href="#${item}"]`);
+    if (!element) continue;
+
+    const styles = getComputedStyle(element);
+    upper = Math.min(upper, element.offsetTop + parseFloat(styles.paddingTop));
+    lower = Math.max(
+      lower,
+      element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom),
+    );
+  }
+
+  return [upper, lower - upper];
+}
+
 // -- TOC items rendered with Eclipse design --
 
-export function TOCItems() {
+export function TOCItems({ ref, ...props }: ComponentProps<'div'>) {
+  const containerRef = useRef<HTMLDivElement>(null);
   const items = useTOCItems();
 
   if (items.length === 0) return null;
 
   return (
-    <ul className="flex flex-col items-stretch justify-start border-l border-stroke-neutral">
-      {items.map((item) => (
-        <TOCItem key={item.url} item={item} />
-      ))}
-    </ul>
+    <>
+      <TocThumb
+        containerRef={containerRef}
+        className="absolute top-[var(--ec-top)] h-[var(--ec-height)] w-[1px] bg-stroke-ppg transition-[top,height] ease-linear data-[hidden=true]:opacity-0"
+      />
+      <div
+        ref={mergeRefs(ref, containerRef)}
+        className="flex flex-col border-l border-stroke-neutral"
+        {...props}
+      >
+        {items.map((item) => (
+          <TOCItem key={item.url} item={item} />
+        ))}
+      </div>
+    </>
   );
 }
 
 function TOCItem({ item }: { item: Primitive.TOCItemType }) {
   return (
-    <li>
-      <Primitive.TOCItem
-        href={item.url}
-        className="-ml-[1px] px-2 py-1 flex flex-row items-center justify-start text-sm truncate border-l transition-colors duration-50 text-foreground-neutral-weak hover:text-foreground-neutral border-stroke-neutral data-[active=true]:text-foreground-neutral data-[active=true]:border-stroke-ppg"
-        style={{ paddingLeft: `${(item.depth - 1) * 1}rem` }}
-      >
-        {item.title}
-      </Primitive.TOCItem>
-    </li>
+    <Primitive.TOCItem
+      href={item.url}
+      className="px-2 py-1 flex flex-row items-center justify-start text-sm truncate border-l border-transparent transition-colors duration-50 text-foreground-neutral-weak hover:text-foreground-neutral data-[active=true]:text-foreground-neutral"
+      style={{ paddingLeft: `${(item.depth - 1) * 1}rem` }}
+    >
+      {item.title}
+    </Primitive.TOCItem>
   );
 }
 
@@ -72,7 +155,7 @@ export function TableOfContents() {
   if (items.length === 0) return null;
 
   return (
-    <nav className="my-0.5 sticky top-[6.25rem] flex flex-col items-stretch justify-start gap-6">
+    <nav className="relative my-0.5 sticky top-[6.25rem] flex flex-col items-stretch justify-start gap-6">
       <TOCItems />
     </nav>
   );
diff --git a/apps/eclipse/src/lib/merge-refs.ts b/apps/eclipse/src/lib/merge-refs.ts
new file mode 100644
index 0000000000..cf019f13b0
--- /dev/null
+++ b/apps/eclipse/src/lib/merge-refs.ts
@@ -0,0 +1,13 @@
+import type * as React from 'react';
+
+export function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T> {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref) {
+        ref.current = value;
+      }
+    });
+  };
+}

From 72a434228acc9009d8dae0c52173e3dbb16e9611 Mon Sep 17 00:00:00 2001
From: Ben Sekulowicz-Barclay <ben@seku.co>
Date: Tue, 24 Mar 2026 10:52:56 +0100
Subject: [PATCH 06/10] Simplify codebase around Eclipse

---
 apps/eclipse/cli.json                         |  13 -
 apps/eclipse/components.json                  |  21 -
 apps/eclipse/package.json                     |  10 +-
 .../app/(design-system)/[[...slug]]/page.tsx  |   2 +-
 .../src/app/(design-system)/layout.tsx        |   2 +-
 apps/eclipse/src/app/global.css               |  44 ++-
 apps/eclipse/src/components/layout.tsx        |  60 +++
 .../src/components/layout/notebook/index.tsx  |  74 ----
 .../layout/notebook/page/client.tsx           |  81 ----
 .../components/layout/notebook/page/index.tsx |  90 -----
 .../components/layout/notebook/sidebar.tsx    |  95 -----
 .../components/layout/sidebar/page-tree.tsx   |  92 -----
 .../{layout/notebook/client.tsx => nav.tsx}   |  89 +----
 apps/eclipse/src/components/page-actions.tsx  | 235 ------------
 apps/eclipse/src/components/page.tsx          | 174 +++++++++
 .../{layout/sidebar/base.tsx => sidebar.tsx}  | 358 ++++++++++--------
 .../src/components/{toc/index.tsx => toc.tsx} |  28 +-
 pnpm-lock.yaml                                |  24 --
 18 files changed, 485 insertions(+), 1007 deletions(-)
 delete mode 100644 apps/eclipse/cli.json
 delete mode 100644 apps/eclipse/components.json
 create mode 100644 apps/eclipse/src/components/layout.tsx
 delete mode 100644 apps/eclipse/src/components/layout/notebook/index.tsx
 delete mode 100644 apps/eclipse/src/components/layout/notebook/page/client.tsx
 delete mode 100644 apps/eclipse/src/components/layout/notebook/page/index.tsx
 delete mode 100644 apps/eclipse/src/components/layout/notebook/sidebar.tsx
 delete mode 100644 apps/eclipse/src/components/layout/sidebar/page-tree.tsx
 rename apps/eclipse/src/components/{layout/notebook/client.tsx => nav.tsx} (54%)
 delete mode 100644 apps/eclipse/src/components/page-actions.tsx
 create mode 100644 apps/eclipse/src/components/page.tsx
 rename apps/eclipse/src/components/{layout/sidebar/base.tsx => sidebar.tsx} (53%)
 rename apps/eclipse/src/components/{toc/index.tsx => toc.tsx} (85%)

diff --git a/apps/eclipse/cli.json b/apps/eclipse/cli.json
deleted file mode 100644
index 89d51513df..0000000000
--- a/apps/eclipse/cli.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "$schema": "node_modules/@fumadocs/cli/dist/schema/src.json",
-  "aliases": {
-    "uiDir": "./components/ui",
-    "componentsDir": "./components",
-    "blockDir": "./components",
-    "cssDir": "./styles",
-    "libDir": "./lib"
-  },
-  "baseDir": "src",
-  "uiLibrary": "radix-ui",
-  "commands": {}
-}
\ No newline at end of file
diff --git a/apps/eclipse/components.json b/apps/eclipse/components.json
deleted file mode 100644
index 27a7524b70..0000000000
--- a/apps/eclipse/components.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": true,
-  "tsx": true,
-  "tailwind": {
-    "config": "tailwind.config.ts",
-    "css": "src/styles/globals.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "iconLibrary": "lucide",
-  "aliases": {
-    "components": "@/components",
-    "ui": "@/components/ui",
-    "utils": "@/lib/cn",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  }
-}
diff --git a/apps/eclipse/package.json b/apps/eclipse/package.json
index 5974db08d8..08be33846c 100644
--- a/apps/eclipse/package.json
+++ b/apps/eclipse/package.json
@@ -12,25 +12,19 @@
     "postinstall": "fumadocs-mdx"
   },
   "dependencies": {
-    "@base-ui/react": "catalog:",
     "@fumadocs/base-ui": "catalog:",
-    "@fumadocs/cli": "catalog:",
     "@prisma/eclipse": "workspace:^",
-    "@prisma-docs/ui": "workspace:*",
-    "class-variance-authority": "catalog:",
     "fumadocs-core": "catalog:",
     "fumadocs-mdx": "catalog:",
     "fumadocs-ui": "catalog:",
     "lucide-react": "catalog:",
     "next": "catalog:",
-    "next-themes": "catalog:",
     "npm-to-yarn": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
     "recharts": "catalog:",
     "remark-directive": "catalog:",
-    "scroll-into-view-if-needed": "catalog:",
-    "zod": "catalog:"
+    "scroll-into-view-if-needed": "catalog:"
   },
   "devDependencies": {
     "@argos-ci/playwright": "catalog:",
@@ -41,9 +35,7 @@
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "postcss": "catalog:",
-    "rimraf": "catalog:",
     "tailwindcss": "catalog:",
-    "tw-animate-css": "catalog:",
     "typescript": "catalog:"
   }
 }
diff --git a/apps/eclipse/src/app/(design-system)/[[...slug]]/page.tsx b/apps/eclipse/src/app/(design-system)/[[...slug]]/page.tsx
index 3445e4de0b..459b48ffec 100644
--- a/apps/eclipse/src/app/(design-system)/[[...slug]]/page.tsx
+++ b/apps/eclipse/src/app/(design-system)/[[...slug]]/page.tsx
@@ -5,7 +5,7 @@ import {
   DocsTitle,
   DocsDescription,
   DocsBody,
-} from '@/components/layout/notebook/page';
+} from '@/components/page';
 import { notFound } from 'next/navigation';
 import { getMDXComponents } from '@/mdx-components';
 import type { Metadata } from 'next';
diff --git a/apps/eclipse/src/app/(design-system)/layout.tsx b/apps/eclipse/src/app/(design-system)/layout.tsx
index 85a085eb9a..aee452bce6 100644
--- a/apps/eclipse/src/app/(design-system)/layout.tsx
+++ b/apps/eclipse/src/app/(design-system)/layout.tsx
@@ -1,5 +1,5 @@
 import { source } from '@/lib/source';
-import { DocsLayout } from '@/components/layout/notebook';
+import { DocsLayout } from '@/components/layout';
 import type { ReactNode } from 'react';
 
 export default function Layout({ children }: { children: ReactNode }) {
diff --git a/apps/eclipse/src/app/global.css b/apps/eclipse/src/app/global.css
index 6f0a102bf9..49f1d3d094 100644
--- a/apps/eclipse/src/app/global.css
+++ b/apps/eclipse/src/app/global.css
@@ -2,27 +2,41 @@
 @import "@prisma/eclipse/styles/globals.css";
 
 @theme {
-  --animate-ec-fade-in: ec-fade-in 150ms ease;
-  --animate-ec-fade-out: ec-fade-out 150ms ease forwards;
-  --animate-ec-sidebar-in: ec-sidebar-in 150ms ease;
-  --animate-ec-sidebar-out: ec-sidebar-out 150ms ease forwards;
+  --animate-fade-in: fade-in 300ms ease;
+  --animate-fade-out: fade-out 300ms ease forwards;
+  --animate-slide-in: slide-in 300ms ease;
+  --animate-slide-out: slide-out 300ms ease forwards;
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
 
-  @keyframes ec-fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
+    to {
+      opacity: 1;
+    }
   }
 
-  @keyframes ec-fade-out {
-    from { opacity: 1; }
-    to { opacity: 0; }
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
   }
 
-  @keyframes ec-sidebar-in {
-    from { transform: translateX(calc(-100% - 0.5rem)); }
+  @keyframes slide-in {
+    from {
+      transform: translateX(calc(-100% - 0.5rem));
+    }
   }
 
-  @keyframes ec-sidebar-out {
-    to { transform: translateX(calc(-100% - 0.5rem)); }
+  @keyframes slide-out {
+    to {
+      transform: translateX(calc(-100% - 0.5rem));
+    }
   }
 }
 
@@ -122,4 +136,4 @@
   pre {
     @apply my-6 first:mt-0 last:mb-0 p-4 bg-background-neutral-weak text-foreground-neutral border border-stroke-neutral rounded-square;
   }
-}
+}
\ No newline at end of file
diff --git a/apps/eclipse/src/components/layout.tsx b/apps/eclipse/src/components/layout.tsx
new file mode 100644
index 0000000000..6e04cdd675
--- /dev/null
+++ b/apps/eclipse/src/components/layout.tsx
@@ -0,0 +1,60 @@
+import type { ReactNode } from 'react';
+import type * as PageTree from 'fumadocs-core/page-tree';
+import { TreeContextProvider } from '@fumadocs/base-ui/contexts/tree';
+import { SidebarProvider, SidebarContent, SidebarDrawer, SidebarPageTree } from './sidebar';
+import { Nav } from './nav';
+import { SearchToggle } from './search';
+import { SidebarEnabledFromPageProvider } from './page';
+
+export interface DocsLayoutProps {
+  tree: PageTree.Root;
+
+  sidebar?: {
+    banner?: ReactNode;
+    footer?: ReactNode;
+    enabled?: boolean;
+    defaultOpenLevel?: number;
+    prefetch?: boolean;
+  };
+
+  children: ReactNode;
+}
+
+export function DocsLayout({
+  tree,
+  sidebar: {
+    enabled: sidebarEnabled = true,
+    defaultOpenLevel,
+    prefetch,
+    ...sidebarProps
+  } = {},
+  children,
+}: DocsLayoutProps) {
+  const searchBanner = <SearchToggle />;
+
+  return (
+    <TreeContextProvider tree={tree}>
+      <SidebarProvider
+        defaultOpenLevel={defaultOpenLevel}
+        prefetch={prefetch}
+      >
+        <SidebarEnabledFromPageProvider layoutEnabled={sidebarEnabled}>
+          <Nav />
+          <div>
+            {sidebarEnabled && (
+              <>
+                <SidebarContent banner={searchBanner} footer={sidebarProps.footer}>
+                  <SidebarPageTree />
+                </SidebarContent>
+                <SidebarDrawer banner={searchBanner} footer={sidebarProps.footer}>
+                  <SidebarPageTree />
+                </SidebarDrawer>
+              </>
+            )}
+            <main>{children}</main>
+          </div>
+        </SidebarEnabledFromPageProvider>
+      </SidebarProvider>
+    </TreeContextProvider>
+  );
+}
diff --git a/apps/eclipse/src/components/layout/notebook/index.tsx b/apps/eclipse/src/components/layout/notebook/index.tsx
deleted file mode 100644
index 6c6313ed4a..0000000000
--- a/apps/eclipse/src/components/layout/notebook/index.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import type { ReactNode } from 'react';
-import type * as PageTree from 'fumadocs-core/page-tree';
-import { TreeContextProvider } from '@fumadocs/base-ui/contexts/tree';
-import { SidebarProvider } from '../sidebar/base';
-import {
-  SidebarContent,
-  SidebarDrawer,
-  SidebarPageTree,
-} from './sidebar';
-import { SearchToggle } from '../../search';
-import {
-  LayoutContextProvider,
-  SidebarEnabledFromPageProvider,
-  Nav,
-} from './client';
-
-export interface DocsLayoutProps {
-  tree: PageTree.Root;
-
-  sidebar?: {
-    banner?: ReactNode;
-    footer?: ReactNode;
-    enabled?: boolean;
-    defaultOpenLevel?: number;
-    prefetch?: boolean;
-  };
-
-  children: ReactNode;
-}
-
-export function DocsLayout({
-  tree,
-  sidebar: {
-    enabled: sidebarEnabled = true,
-    defaultOpenLevel,
-    prefetch,
-    ...sidebarProps
-  } = {},
-  children,
-}: DocsLayoutProps) {
-  const searchBanner = <SearchToggle />;
-
-  function sidebar() {
-    return (
-      <>
-        <SidebarContent banner={searchBanner} footer={sidebarProps.footer}>
-          <SidebarPageTree />
-        </SidebarContent>
-        <SidebarDrawer banner={searchBanner} footer={sidebarProps.footer}>
-          <SidebarPageTree />
-        </SidebarDrawer>
-      </>
-    );
-  }
-
-  return (
-    <TreeContextProvider tree={tree}>
-      <LayoutContextProvider>
-        <SidebarProvider
-          defaultOpenLevel={defaultOpenLevel}
-          prefetch={prefetch}
-        >
-          <SidebarEnabledFromPageProvider layoutEnabled={sidebarEnabled}>
-            <Nav />
-            <div>
-              {sidebarEnabled && sidebar()}
-              <main>{children}</main>
-            </div>
-          </SidebarEnabledFromPageProvider>
-        </SidebarProvider>
-      </LayoutContextProvider>
-    </TreeContextProvider>
-  );
-}
diff --git a/apps/eclipse/src/components/layout/notebook/page/client.tsx b/apps/eclipse/src/components/layout/notebook/page/client.tsx
deleted file mode 100644
index 5afd9f95cb..0000000000
--- a/apps/eclipse/src/components/layout/notebook/page/client.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { useMemo } from 'react';
-import { useFooterItems } from '@fumadocs/base-ui/utils/use-footer-items';
-
-export { SidebarEnabledSync } from '../client';
-
-export function DocsFooter({ className }: { className?: string }) {
-  const footerList = useFooterItems();
-  const pathname = usePathname();
-
-  const { previous, next } = useMemo(() => {
-    const idx = footerList.findIndex((item) => item.url === pathname);
-    if (idx === -1) return {};
-    return {
-      previous: footerList[idx - 1],
-      next: footerList[idx + 1],
-    };
-  }, [footerList, pathname]);
-
-  if (!previous && !next) return null;
-
-  return (
-    <nav
-      className={`mt-12 grid gap-3 ${previous && next ? 'grid-cols-2' : 'grid-cols-1'} ${className ?? ''}`}
-    >
-      {previous && (
-        <Link
-          href={previous.url}
-          className="flex flex-col gap-1 p-4 rounded-square border border-stroke-neutral hover:bg-background-neutral transition-colors"
-        >
-          <span className="text-xs text-foreground-neutral-weak">
-            Previous
-          </span>
-          <span className="flex items-center gap-1.5 text-sm font-medium text-foreground-neutral">
-            <svg
-              className="size-3.5 shrink-0"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2}
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M15 19l-7-7 7-7"
-              />
-            </svg>
-            {previous.name}
-          </span>
-        </Link>
-      )}
-      {next && (
-        <Link
-          href={next.url}
-          className={`flex flex-col gap-1 p-4 rounded-square border border-stroke-neutral hover:bg-background-neutral transition-colors text-end ${!previous ? 'col-start-1' : ''}`}
-        >
-          <span className="text-xs text-foreground-neutral-weak">Next</span>
-          <span className="flex items-center justify-end gap-1.5 text-sm font-medium text-foreground-neutral">
-            {next.name}
-            <svg
-              className="size-3.5 shrink-0"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2}
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M9 5l7 7-7 7"
-              />
-            </svg>
-          </span>
-        </Link>
-      )}
-    </nav>
-  );
-}
diff --git a/apps/eclipse/src/components/layout/notebook/page/index.tsx b/apps/eclipse/src/components/layout/notebook/page/index.tsx
deleted file mode 100644
index 4c79ab7a66..0000000000
--- a/apps/eclipse/src/components/layout/notebook/page/index.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-import type { TOCItemType } from 'fumadocs-core/toc';
-import { TOCProvider, TableOfContents } from '../../../toc';
-import { DocsFooter, SidebarEnabledSync } from './client';
-
-export interface DocsPageProps {
-  toc?: TOCItemType[];
-
-  /**
-   * Extend the page to fill all available space
-   *
-   * @defaultValue false
-   */
-  full?: boolean;
-
-  /**
-   * Control the docs layout sidebar from this page.
-   * When `sidebar={{ enabled: false }}`, the sidebar is hidden for this page only.
-   */
-  sidebar?: { enabled?: boolean };
-
-  children: ReactNode;
-}
-
-export function DocsPage({
-  toc = [],
-  full = false,
-  sidebar: sidebarOpt,
-  children,
-}: DocsPageProps) {
-  const tocEnabled = !full && toc.length > 0;
-
-  const content = (
-    <article>
-      {sidebarOpt !== undefined && (
-        <SidebarEnabledSync enabled={sidebarOpt.enabled !== false} />
-      )}
-      {children}
-      <DocsFooter className="px-6 md:pl-[18.5rem] md:pr-12 pb-6 md:pb-12" />
-    </article>
-  );
-
-  if (tocEnabled) {
-    return <TOCProvider toc={toc}>{content}</TOCProvider>;
-  }
-
-  return content;
-}
-
-export function DocsHeader({ children, className, ...props }: ComponentProps<'header'>) {
-  return (
-    <header
-      className={`px-6 md:pl-[18.5rem] md:pr-12 pt-[4.75rem] md:pt-[6.25rem] pb-6 md:pb-12 flex flex-col items-stretch justify-start gap-2 border-b border-stroke-neutral ${className ?? ''}`}
-      {...props}
-    >
-      {children}
-    </header>
-  );
-}
-
-export function DocsTitle({ children, className, ...props }: ComponentProps<'h1'>) {
-  return (
-    <h1 className={`font-bold text-3xl text-foreground-neutral ${className ?? ''}`} {...props}>
-      {children}
-    </h1>
-  );
-}
-
-export function DocsDescription({ children, className, ...props }: ComponentProps<'p'>) {
-  if (!children) return null;
-
-  return (
-    <p className={`font-normal text-base text-foreground-neutral-weak ${className ?? ''}`} {...props}>
-      {children}
-    </p>
-  );
-}
-
-export function DocsBody({ children, className, ...props }: ComponentProps<'div'>) {
-  return (
-    <section className="px-6 md:pl-[18.5rem] md:pr-12 py-6 md:py-12 flex flex-row items-stretch justify-start gap-12">
-      <div className={`prose grow-1 min-w-0 ${className ?? ''}`} {...props}>
-        {children}
-      </div>
-      <div className="grow-0 shrink-0 w-[15rem] hidden xl:block">
-        <TableOfContents />
-      </div>
-    </section>
-  );
-}
diff --git a/apps/eclipse/src/components/layout/notebook/sidebar.tsx b/apps/eclipse/src/components/layout/notebook/sidebar.tsx
deleted file mode 100644
index e651c5c558..0000000000
--- a/apps/eclipse/src/components/layout/notebook/sidebar.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-'use client';
-
-import type { ReactNode } from 'react';
-import * as Base from '../sidebar/base';
-
-export {
-  SidebarProvider,
-  SidebarFolder,
-  SidebarFolderTrigger,
-  SidebarFolderContent,
-  SidebarFolderLink,
-  SidebarItem,
-  SidebarSeparator,
-  SidebarTrigger,
-} from '../sidebar/base';
-
-export { SidebarPageTree } from '../sidebar/page-tree';
-
-export function SidebarContent({
-  banner,
-  footer,
-  children,
-}: {
-  banner?: ReactNode;
-  footer?: ReactNode;
-  children: ReactNode;
-}) {
-  return (
-    <Base.SidebarContent>
-      {({ ref, collapsed, hovered, ...rest }) => (
-        <aside
-          id="nd-sidebar"
-          ref={ref}
-          data-collapsed={collapsed}
-          data-hovered={collapsed && hovered}
-          className="fixed top-2 md:top-[3.75rem] left-2 bottom-2 right-auto z-50 w-[15rem] flex flex-col items-stretch justify-start bg-background-default border border-stroke-neutral rounded-square-high shadow-box overflow-hidden max-md:hidden"
-          {...rest}
-        >
-          <SidebarInner banner={banner} footer={footer}>
-            {children}
-          </SidebarInner>
-        </aside>
-      )}
-    </Base.SidebarContent>
-  );
-}
-
-export function SidebarDrawer({
-  banner,
-  footer,
-  children,
-}: {
-  banner?: ReactNode;
-  footer?: ReactNode;
-  children: ReactNode;
-}) {
-  return (
-    <>
-      <Base.SidebarDrawerOverlay className="fixed inset-0 z-40 bg-background-default/50 backdrop-blur-surface data-[state=open]:animate-ec-fade-in data-[state=closed]:animate-ec-fade-out" />
-      <Base.SidebarDrawerContent className="fixed top-2 left-2 bottom-2 right-auto z-50 w-[15rem] flex flex-col items-stretch justify-start bg-background-default border border-stroke-neutral rounded-square-high shadow-box overflow-hidden data-[state=open]:animate-ec-sidebar-in data-[state=closed]:animate-ec-sidebar-out">
-        <SidebarInner banner={banner} footer={footer}>
-          {children}
-        </SidebarInner>
-      </Base.SidebarDrawerContent>
-    </>
-  );
-}
-
-function SidebarInner({
-  banner,
-  footer,
-  children,
-}: {
-  banner?: ReactNode;
-  footer?: ReactNode;
-  children: ReactNode;
-}) {
-  return (
-    <>
-      {banner && (
-        <div className="grow-0 p-3 flex flex-col items-stretch justify-start gap-3 bg-background-default/50 border-b last:border-b-none border-stroke-neutral backdrop-blur-surface-low">
-          {banner}
-        </div>
-      )}
-      <div className="grow-1 p-3 flex flex-col items-stretch justify-start gap-3 bg-background-default border-b last:border-b-none border-stroke-neutral overflow-y-scroll no-scrollbar">
-        {children}
-      </div>
-      {footer && (
-        <div className="grow-0 p-3 flex flex-col items-stretch justify-start gap-3 bg-background-default/50 border-t border-stroke-neutral">
-          {footer}
-        </div>
-      )}
-    </>
-  );
-}
diff --git a/apps/eclipse/src/components/layout/sidebar/page-tree.tsx b/apps/eclipse/src/components/layout/sidebar/page-tree.tsx
deleted file mode 100644
index d13a848cb5..0000000000
--- a/apps/eclipse/src/components/layout/sidebar/page-tree.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client';
-
-import { useTreeContext, useTreePath } from '@fumadocs/base-ui/contexts/tree';
-import { type ReactNode, useMemo, Fragment } from 'react';
-import type * as PageTree from 'fumadocs-core/page-tree';
-import {
-  SidebarFolder,
-  SidebarFolderContent,
-  SidebarFolderLink,
-  SidebarFolderTrigger,
-  SidebarItem,
-  SidebarSeparator,
-} from './base';
-
-function PageTreeFolder({
-  item,
-  children,
-}: {
-  item: PageTree.Folder;
-  children: ReactNode;
-}) {
-  const path = useTreePath();
-
-  return (
-    <SidebarFolder active={path.includes(item)} defaultOpen={item.defaultOpen}>
-      {item.index ? (
-        <SidebarFolderLink href={item.index.url}>
-          {item.icon}
-          {item.name}
-        </SidebarFolderLink>
-      ) : (
-        <SidebarFolderTrigger>
-          {item.icon}
-          {item.name}
-        </SidebarFolderTrigger>
-      )}
-      <SidebarFolderContent>{children}</SidebarFolderContent>
-    </SidebarFolder>
-  );
-}
-
-export function SidebarPageTree() {
-  const { root } = useTreeContext();
-
-  return useMemo(() => {
-    function renderNodes(items: PageTree.Node[]) {
-      return items.map((item, i) => {
-        if (item.type === 'separator') {
-          return (
-            <SidebarSeparator key={i}>
-              {item.name ? (
-                <>
-                  {item.icon}
-                  {item.name}
-                </>
-              ) : null}
-            </SidebarSeparator>
-          );
-        }
-
-        if (item.type === 'folder') {
-          return (
-            <PageTreeFolder key={i} item={item}>
-              {renderNodes(item.children)}
-            </PageTreeFolder>
-          );
-        }
-
-        return (
-          <SidebarItem
-            key={item.url}
-            href={item.url}
-            icon={item.icon}
-            external={item.external}
-          >
-            {item.name}
-          </SidebarItem>
-        );
-      });
-    }
-
-    return (
-      <ul
-        key={root.$id}
-
-        className="flex flex-col items-stretch justify-start gap-0.5"
-      >
-        {renderNodes(root.children)}
-      </ul>
-    );
-  }, [root]);
-}
diff --git a/apps/eclipse/src/components/layout/notebook/client.tsx b/apps/eclipse/src/components/nav.tsx
similarity index 54%
rename from apps/eclipse/src/components/layout/notebook/client.tsx
rename to apps/eclipse/src/components/nav.tsx
index 02f130ae5e..67ecb75a92 100644
--- a/apps/eclipse/src/components/layout/notebook/client.tsx
+++ b/apps/eclipse/src/components/nav.tsx
@@ -1,94 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import {
-  createContext,
-  type ReactNode,
-  use,
-  useMemo,
-  useState,
-} from 'react';
-import { useSidebar } from '../sidebar/base';
-
-// -- Layout context (nav transparency) --
-
-export const LayoutContext = createContext<{
-  isNavTransparent: boolean;
-} | null>(null);
-
-export function LayoutContextProvider({
-  children,
-}: {
-  children: ReactNode;
-}) {
-  return (
-    <LayoutContext
-      value={useMemo(
-        () => ({ isNavTransparent: false }),
-        [],
-      )}
-    >
-      {children}
-    </LayoutContext>
-  );
-}
-
-// -- Sidebar enabled (per-page control) --
-
-export const SidebarEnabledContext = createContext<boolean>(true);
-
-const SidebarEnabledSetterContext = createContext<
-  (enabled: boolean) => void
->(() => {});
-
-/**
- * Renders children only when the sidebar is enabled (layout + page).
- */
-export function SidebarEnabledGate({ children }: { children: ReactNode }) {
-  const enabled = use(SidebarEnabledContext);
-  if (!enabled) return null;
-  return <>{children}</>;
-}
-
-/**
- * Provider that merges layout sidebar.enabled with the page's choice.
- * Layout wraps content in this; DocsPage syncs via the setter
- * so a page can hide the sidebar.
- */
-export function SidebarEnabledFromPageProvider({
-  layoutEnabled,
-  children,
-}: {
-  layoutEnabled: boolean;
-  children: ReactNode;
-}) {
-  const [pageEnabled, setPageEnabled] = useState(true);
-  const effective = layoutEnabled && pageEnabled;
-  const setter = useMemo(
-    () => (enabled: boolean) => setPageEnabled(enabled),
-    [],
-  );
-
-  return (
-    <SidebarEnabledSetterContext.Provider value={setter}>
-      <SidebarEnabledContext.Provider value={effective}>
-        {children}
-      </SidebarEnabledContext.Provider>
-    </SidebarEnabledSetterContext.Provider>
-  );
-}
-
-/**
- * Syncs page-level sidebar.enabled to the layout context.
- * Used inside DocsPage when a page wants to hide the sidebar.
- */
-export function SidebarEnabledSync({ enabled }: { enabled: boolean }) {
-  const setEnabled = use(SidebarEnabledSetterContext);
-  if (!enabled) setEnabled(false);
-  return null;
-}
-
-// -- Nav --
+import { useSidebar } from './sidebar';
 
 export function Nav() {
   const { setOpen } = useSidebar();
diff --git a/apps/eclipse/src/components/page-actions.tsx b/apps/eclipse/src/components/page-actions.tsx
deleted file mode 100644
index 66443807aa..0000000000
--- a/apps/eclipse/src/components/page-actions.tsx
+++ /dev/null
@@ -1,235 +0,0 @@
-"use client";
-import { useMemo, useState } from "react";
-import { Check, ChevronDown, Copy, ExternalLinkIcon, MessageCircleIcon } from "lucide-react";
-import { useCopyButton } from "fumadocs-ui/utils/use-copy-button";
-import { buttonVariants } from "@prisma-docs/ui/components/button";
-import { cn } from "@prisma-docs/ui/lib/cn";
-import { Popover, PopoverContent, PopoverTrigger } from "fumadocs-ui/components/ui/popover";
-import { cva } from "class-variance-authority";
-
-const cache = new Map<string, string>();
-
-export function LLMCopyButton({
-  /**
-   * A URL to fetch the raw Markdown/MDX content of page
-   */
-  markdownUrl,
-}: {
-  markdownUrl: string;
-}) {
-  const [isLoading, setLoading] = useState(false);
-  const [checked, onClick] = useCopyButton(async () => {
-    const cached = cache.get(markdownUrl);
-    if (cached) return navigator.clipboard.writeText(cached);
-
-    setLoading(true);
-
-    try {
-      await navigator.clipboard.write([
-        new ClipboardItem({
-          "text/plain": fetch(markdownUrl).then(async (res) => {
-            const content = await res.text();
-            cache.set(markdownUrl, content);
-
-            return content;
-          }),
-        }),
-      ]);
-    } finally {
-      setLoading(false);
-    }
-  });
-
-  return (
-    <button
-      disabled={isLoading}
-      className={cn(
-        buttonVariants({
-          color: "secondary",
-          size: "sm",
-          className: "gap-2 [&_svg]:size-3.5 [&_svg]:text-fd-muted-foreground",
-        }),
-      )}
-      onClick={onClick}
-    >
-      {checked ? <Check /> : <Copy />}
-      Copy Markdown
-    </button>
-  );
-}
-
-const optionVariants = cva(
-  "text-sm p-2 rounded-lg inline-flex items-center gap-2 hover:text-fd-accent-foreground hover:bg-fd-accent [&_svg]:size-4",
-);
-
-export function ViewOptions({
-  markdownUrl,
-  githubUrl,
-}: {
-  /**
-   * A URL to the raw Markdown/MDX content of page
-   */
-  markdownUrl: string;
-
-  /**
-   * Source file URL on GitHub
-   */
-  githubUrl: string;
-}) {
-  const items = useMemo(() => {
-    const fullMarkdownUrl =
-      typeof window !== "undefined" ? new URL(markdownUrl, window.location.origin) : "loading";
-    const q = `Read ${fullMarkdownUrl}, I want to ask questions about it.`;
-
-    return [
-      {
-        title: "Open in GitHub",
-        href: githubUrl,
-        icon: (
-          <svg fill="currentColor" role="img" viewBox="0 0 24 24">
-            <title>GitHub</title>
-            <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
-          </svg>
-        ),
-      },
-      {
-        title: "Open in Scira AI",
-        href: `https://scira.ai/?${new URLSearchParams({
-          q,
-        })}`,
-        icon: (
-          <svg
-            width="910"
-            height="934"
-            viewBox="0 0 910 934"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>Scira AI</title>
-            <path
-              d="M647.664 197.775C569.13 189.049 525.5 145.419 516.774 66.8849C508.048 145.419 464.418 189.049 385.884 197.775C464.418 206.501 508.048 250.131 516.774 328.665C525.5 250.131 569.13 206.501 647.664 197.775Z"
-              fill="currentColor"
-              stroke="currentColor"
-              strokeWidth="8"
-              strokeLinejoin="round"
-            />
-            <path
-              d="M516.774 304.217C510.299 275.491 498.208 252.087 480.335 234.214C462.462 216.341 439.058 204.251 410.333 197.775C439.059 191.3 462.462 179.209 480.335 161.336C498.208 143.463 510.299 120.06 516.774 91.334C523.25 120.059 535.34 143.463 553.213 161.336C571.086 179.209 594.49 191.3 623.216 197.775C594.49 204.251 571.086 216.341 553.213 234.214C535.34 252.087 523.25 275.491 516.774 304.217Z"
-              fill="currentColor"
-              stroke="currentColor"
-              strokeWidth="8"
-              strokeLinejoin="round"
-            />
-            <path
-              d="M857.5 508.116C763.259 497.644 710.903 445.288 700.432 351.047C689.961 445.288 637.605 497.644 543.364 508.116C637.605 518.587 689.961 570.943 700.432 665.184C710.903 570.943 763.259 518.587 857.5 508.116Z"
-              stroke="currentColor"
-              strokeWidth="20"
-              strokeLinejoin="round"
-            />
-            <path
-              d="M700.432 615.957C691.848 589.05 678.575 566.357 660.383 548.165C642.191 529.973 619.499 516.7 592.593 508.116C619.499 499.533 642.191 486.258 660.383 468.066C678.575 449.874 691.848 427.181 700.432 400.274C709.015 427.181 722.289 449.874 740.481 468.066C758.673 486.258 781.365 499.533 808.271 508.116C781.365 516.7 758.673 529.973 740.481 548.165C722.289 566.357 709.015 589.05 700.432 615.957Z"
-              stroke="currentColor"
-              strokeWidth="20"
-              strokeLinejoin="round"
-            />
-            <path
-              d="M889.949 121.237C831.049 114.692 798.326 81.9698 791.782 23.0692C785.237 81.9698 752.515 114.692 693.614 121.237C752.515 127.781 785.237 160.504 791.782 219.404C798.326 160.504 831.049 127.781 889.949 121.237Z"
-              fill="currentColor"
-              stroke="currentColor"
-              strokeWidth="8"
-              strokeLinejoin="round"
-            />
-            <path
-              d="M791.782 196.795C786.697 176.937 777.869 160.567 765.16 147.858C752.452 135.15 736.082 126.322 716.226 121.237C736.082 116.152 752.452 107.324 765.16 94.6152C777.869 81.9065 786.697 65.5368 791.782 45.6797C796.867 65.5367 805.695 81.9066 818.403 94.6152C831.112 107.324 847.481 116.152 867.338 121.237C847.481 126.322 831.112 135.15 818.403 147.858C805.694 160.567 796.867 176.937 791.782 196.795Z"
-              fill="currentColor"
-              stroke="currentColor"
-              strokeWidth="8"
-              strokeLinejoin="round"
-            />
-            <path
-              d="M760.632 764.337C720.719 814.616 669.835 855.1 611.872 882.692C553.91 910.285 490.404 924.255 426.213 923.533C362.022 922.812 298.846 907.419 241.518 878.531C184.19 849.643 134.228 808.026 95.4548 756.863C56.6815 705.7 30.1238 646.346 17.8129 583.343C5.50207 520.339 7.76433 455.354 24.4266 393.359C41.089 331.364 71.7099 274.001 113.947 225.658C156.184 177.315 208.919 139.273 268.117 114.442"
-              stroke="currentColor"
-              strokeWidth="30"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        ),
-      },
-      {
-        title: "Open in ChatGPT",
-        href: `https://chatgpt.com/?${new URLSearchParams({
-          hints: "search",
-          q,
-        })}`,
-        icon: (
-          <svg
-            role="img"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>OpenAI</title>
-            <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
-          </svg>
-        ),
-      },
-      {
-        title: "Open in Claude",
-        href: `https://claude.ai/new?${new URLSearchParams({
-          q,
-        })}`,
-        icon: (
-          <svg
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>Anthropic</title>
-            <path d="M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z" />
-          </svg>
-        ),
-      },
-      {
-        title: "Open in T3 Chat",
-        href: `https://t3.chat/new?${new URLSearchParams({
-          q,
-        })}`,
-        icon: <MessageCircleIcon />,
-      },
-    ];
-  }, [githubUrl, markdownUrl]);
-
-  return (
-    <Popover>
-      <PopoverTrigger
-        className={cn(
-          buttonVariants({
-            color: "secondary",
-            size: "sm",
-            className: "gap-2",
-          }),
-        )}
-      >
-        Open
-        <ChevronDown className="size-3.5 text-fd-muted-foreground" />
-      </PopoverTrigger>
-      <PopoverContent className="flex flex-col">
-        {items.map((item) => (
-          <a
-            key={item.href}
-            href={item.href}
-            rel="noreferrer noopener"
-            target="_blank"
-            className={cn(optionVariants())}
-          >
-            {item.icon}
-            {item.title}
-            <ExternalLinkIcon className="text-fd-muted-foreground size-3.5 ms-auto" />
-          </a>
-        ))}
-      </PopoverContent>
-    </Popover>
-  );
-}
diff --git a/apps/eclipse/src/components/page.tsx b/apps/eclipse/src/components/page.tsx
new file mode 100644
index 0000000000..eba5e4cf1b
--- /dev/null
+++ b/apps/eclipse/src/components/page.tsx
@@ -0,0 +1,174 @@
+'use client';
+
+import type { ComponentProps, ReactNode } from 'react';
+import type { TOCItemType } from 'fumadocs-core/toc';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { createContext, use, useMemo, useState } from 'react';
+import { useFooterItems } from '@fumadocs/base-ui/utils/use-footer-items';
+import { TOCProvider, TableOfContents } from './toc';
+
+// -- Sidebar enabled sync (per-page sidebar control) --
+
+const SidebarEnabledSetterContext = createContext<(enabled: boolean) => void>(() => {});
+export const SidebarEnabledContext = createContext<boolean>(true);
+
+export function SidebarEnabledFromPageProvider({
+  layoutEnabled,
+  children,
+}: {
+  layoutEnabled: boolean;
+  children: ReactNode;
+}) {
+  const [pageEnabled, setPageEnabled] = useState(true);
+  const effective = layoutEnabled && pageEnabled;
+  const setter = useMemo(
+    () => (enabled: boolean) => setPageEnabled(enabled),
+    [],
+  );
+
+  return (
+    <SidebarEnabledSetterContext.Provider value={setter}>
+      <SidebarEnabledContext.Provider value={effective}>
+        {children}
+      </SidebarEnabledContext.Provider>
+    </SidebarEnabledSetterContext.Provider>
+  );
+}
+
+function SidebarEnabledSync({ enabled }: { enabled: boolean }) {
+  const setEnabled = use(SidebarEnabledSetterContext);
+  if (!enabled) setEnabled(false);
+  return null;
+}
+
+// -- DocsPage --
+
+export interface DocsPageProps {
+  toc?: TOCItemType[];
+  full?: boolean;
+  sidebar?: { enabled?: boolean };
+  children: ReactNode;
+}
+
+export function DocsPage({
+  toc = [],
+  full = false,
+  sidebar: sidebarOpt,
+  children,
+}: DocsPageProps) {
+  const tocEnabled = !full && toc.length > 0;
+
+  const content = (
+    <article>
+      {sidebarOpt !== undefined && (
+        <SidebarEnabledSync enabled={sidebarOpt.enabled !== false} />
+      )}
+      {children}
+      <DocsFooter className="px-6 md:pl-[18.5rem] md:pr-12 pb-6 md:pb-12" />
+    </article>
+  );
+
+  if (tocEnabled) {
+    return <TOCProvider toc={toc}>{content}</TOCProvider>;
+  }
+
+  return content;
+}
+
+// -- Composable page components --
+
+export function DocsHeader({ children, className, ...props }: ComponentProps<'header'>) {
+  return (
+    <header
+      className={`px-6 md:pl-[18.5rem] md:pr-12 pt-[4.75rem] md:pt-[6.25rem] pb-6 md:pb-12 flex flex-col items-stretch justify-start gap-2 border-b border-stroke-neutral ${className ?? ''}`}
+      {...props}
+    >
+      {children}
+    </header>
+  );
+}
+
+export function DocsTitle({ children, className, ...props }: ComponentProps<'h1'>) {
+  return (
+    <h1 className={`font-bold text-3xl text-foreground-neutral ${className ?? ''}`} {...props}>
+      {children}
+    </h1>
+  );
+}
+
+export function DocsDescription({ children, className, ...props }: ComponentProps<'p'>) {
+  if (!children) return null;
+
+  return (
+    <p className={`font-normal text-base text-foreground-neutral-weak ${className ?? ''}`} {...props}>
+      {children}
+    </p>
+  );
+}
+
+export function DocsBody({ children, className, ...props }: ComponentProps<'div'>) {
+  return (
+    <section className="px-6 md:pl-[18.5rem] md:pr-12 py-6 md:py-12 flex flex-row items-stretch justify-start gap-12">
+      <div className={`prose grow-1 min-w-0 ${className ?? ''}`} {...props}>
+        {children}
+      </div>
+      <div className="grow-0 shrink-0 w-[15rem] hidden xl:block">
+        <TableOfContents />
+      </div>
+    </section>
+  );
+}
+
+// -- Footer --
+
+function DocsFooter({ className }: { className?: string }) {
+  const footerList = useFooterItems();
+  const pathname = usePathname();
+
+  const { previous, next } = useMemo(() => {
+    const idx = footerList.findIndex((item) => item.url === pathname);
+    if (idx === -1) return {};
+    return {
+      previous: footerList[idx - 1],
+      next: footerList[idx + 1],
+    };
+  }, [footerList, pathname]);
+
+  if (!previous && !next) return null;
+
+  return (
+    <nav
+      className={`mt-12 grid gap-3 ${previous && next ? 'grid-cols-2' : 'grid-cols-1'} ${className ?? ''}`}
+    >
+      {previous && (
+        <Link
+          href={previous.url}
+          className="flex flex-col gap-1 p-4 rounded-square border border-stroke-neutral hover:bg-background-neutral transition-colors"
+        >
+          <span className="text-xs text-foreground-neutral-weak">Previous</span>
+          <span className="flex items-center gap-1.5 text-sm font-medium text-foreground-neutral">
+            <svg className="size-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+            </svg>
+            {previous.name}
+          </span>
+        </Link>
+      )}
+      {next && (
+        <Link
+          href={next.url}
+          className={`flex flex-col gap-1 p-4 rounded-square border border-stroke-neutral hover:bg-background-neutral transition-colors text-end ${!previous ? 'col-start-1' : ''}`}
+        >
+          <span className="text-xs text-foreground-neutral-weak">Next</span>
+          <span className="flex items-center justify-end gap-1.5 text-sm font-medium text-foreground-neutral">
+            {next.name}
+            <svg className="size-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+            </svg>
+          </span>
+        </Link>
+      )}
+    </nav>
+  );
+}
diff --git a/apps/eclipse/src/components/layout/sidebar/base.tsx b/apps/eclipse/src/components/sidebar.tsx
similarity index 53%
rename from apps/eclipse/src/components/layout/sidebar/base.tsx
rename to apps/eclipse/src/components/sidebar.tsx
index b62ca52d39..e0f43cc920 100644
--- a/apps/eclipse/src/components/layout/sidebar/base.tsx
+++ b/apps/eclipse/src/components/sidebar.tsx
@@ -16,8 +16,12 @@ import Link from 'next/link';
 import { useOnChange } from 'fumadocs-core/utils/use-on-change';
 import { usePathname } from 'fumadocs-core/framework';
 import { useMediaQuery } from 'fumadocs-core/utils/use-media-query';
+import { useTreeContext, useTreePath } from '@fumadocs/base-ui/contexts/tree';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import ReactDOM from 'react-dom';
+import type * as PageTree from 'fumadocs-core/page-tree';
+
+// -- Types --
 
 type Mode = 'drawer' | 'full';
 
@@ -32,6 +36,8 @@ interface SidebarContextValue {
   mode: Mode;
 }
 
+// -- Contexts --
+
 const SidebarContext = createContext<SidebarContextValue | null>(null);
 
 const FolderContext = createContext<{
@@ -40,31 +46,51 @@ const FolderContext = createContext<{
   depth: number;
 } | null>(null);
 
+// -- Hooks --
+
 export function useSidebar(): SidebarContextValue {
   const ctx = use(SidebarContext);
   if (!ctx) throw new Error('Missing SidebarContext, wrap in <DocsLayout />.');
   return ctx;
 }
 
-export function useFolder() {
+function useFolder() {
   return use(FolderContext);
 }
 
-export function useFolderDepth() {
+function useFolderDepth() {
   return use(FolderContext)?.depth ?? 0;
 }
 
-export interface SidebarProviderProps {
-  defaultOpenLevel?: number;
-  prefetch?: boolean;
-  children?: ReactNode;
+function useAutoScroll(
+  active: boolean,
+  ref: RefObject<HTMLElement | null>,
+) {
+  const { mode } = useSidebar();
+
+  useEffect(() => {
+    if (active && ref.current) {
+      scrollIntoView(ref.current, {
+        boundary: document.getElementById(
+          mode === 'drawer' ? 'nd-sidebar-mobile' : 'nd-sidebar',
+        ),
+        scrollMode: 'if-needed',
+      });
+    }
+  }, [active, mode, ref]);
 }
 
+// -- Provider --
+
 export function SidebarProvider({
   defaultOpenLevel = 0,
   prefetch,
   children,
-}: SidebarProviderProps) {
+}: {
+  defaultOpenLevel?: number;
+  prefetch?: boolean;
+  children?: ReactNode;
+}) {
   const closeOnRedirect = useRef(true);
   const [open, setOpen] = useState(false);
   const [collapsed, setCollapsed] = useState(false);
@@ -99,18 +125,16 @@ export function SidebarProvider({
   );
 }
 
-// -- Sidebar content (render-function pattern) --
+// -- Desktop sidebar --
 
 export function SidebarContent({
+  banner,
+  footer,
   children,
 }: {
-  children: (state: {
-    ref: RefObject<HTMLElement | null>;
-    collapsed: boolean;
-    hovered: boolean;
-    onPointerEnter: (event: PointerEvent) => void;
-    onPointerLeave: (event: PointerEvent) => void;
-  }) => ReactNode;
+  banner?: ReactNode;
+  footer?: ReactNode;
+  children: ReactNode;
 }) {
   const { collapsed, mode } = useSidebar();
   const [hover, setHover] = useState(false);
@@ -121,12 +145,11 @@ export function SidebarContent({
     if (collapsed) setHover(false);
   });
 
-  if (mode !== 'full') return;
+  if (mode !== 'full') return null;
 
   function shouldIgnoreHover(e: PointerEvent): boolean {
     const element = ref.current;
     if (!element) return true;
-
     return (
       !collapsed ||
       e.pointerType === 'touch' ||
@@ -134,98 +157,115 @@ export function SidebarContent({
     );
   }
 
-  return children({
-    ref,
-    collapsed,
-    hovered: hover,
-    onPointerEnter(e) {
-      if (shouldIgnoreHover(e)) return;
-      window.clearTimeout(timerRef.current);
-      setHover(true);
-    },
-    onPointerLeave(e) {
-      if (shouldIgnoreHover(e)) return;
-      window.clearTimeout(timerRef.current);
-
-      timerRef.current = window.setTimeout(
-        () => setHover(false),
-        Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100
-          ? 0
-          : 500,
-      );
-    },
-  });
-}
-
-// -- Sidebar drawer (mobile) --
-
-export function SidebarDrawerOverlay(props: ComponentProps<'div'>) {
-  const { open, setOpen, mode } = useSidebar();
-  const [hidden, setHidden] = useState(!open);
-
-  if (open && hidden) setHidden(false);
-  if (mode !== 'drawer' || hidden) return;
-
   return (
-    <div
-      data-state={open ? 'open' : 'closed'}
-      onClick={() => setOpen(false)}
-      onAnimationEnd={() => {
-        if (!open) ReactDOM.flushSync(() => setHidden(true));
+    <aside
+      id="nd-sidebar"
+      ref={ref}
+      data-collapsed={collapsed}
+      data-hovered={collapsed && hover}
+      className="fixed top-2 md:top-[3.75rem] left-2 bottom-2 right-auto z-50 w-[15rem] flex flex-col items-stretch justify-start bg-background-default border border-stroke-neutral rounded-square-high shadow-box overflow-hidden max-md:hidden"
+      onPointerEnter={(e) => {
+        if (shouldIgnoreHover(e)) return;
+        window.clearTimeout(timerRef.current);
+        setHover(true);
       }}
-      {...props}
-    />
+      onPointerLeave={(e) => {
+        if (shouldIgnoreHover(e)) return;
+        window.clearTimeout(timerRef.current);
+        timerRef.current = window.setTimeout(
+          () => setHover(false),
+          Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100
+            ? 0
+            : 500,
+        );
+      }}
+    >
+      <SidebarInner banner={banner} footer={footer}>
+        {children}
+      </SidebarInner>
+    </aside>
   );
 }
 
-export function SidebarDrawerContent({
-  className,
+// -- Mobile drawer --
+
+export function SidebarDrawer({
+  banner,
+  footer,
   children,
-  ...props
-}: ComponentProps<'aside'>) {
-  const { open, mode } = useSidebar();
-  const [hidden, setHidden] = useState(!open);
+}: {
+  banner?: ReactNode;
+  footer?: ReactNode;
+  children: ReactNode;
+}) {
+  const { open, setOpen, mode } = useSidebar();
+  const [overlayHidden, setOverlayHidden] = useState(!open);
+  const [drawerHidden, setDrawerHidden] = useState(!open);
 
-  if (open && hidden) setHidden(false);
-  if (mode !== 'drawer') return;
+  if (open && overlayHidden) setOverlayHidden(false);
+  if (open && drawerHidden) setDrawerHidden(false);
+
+  if (mode !== 'drawer') return null;
 
   return (
-    <aside
-      id="nd-sidebar-mobile"
-      data-state={open ? 'open' : 'closed'}
-      className={`${hidden ? 'invisible' : ''} ${className ?? ''}`}
-      onAnimationEnd={() => {
-        if (!open) ReactDOM.flushSync(() => setHidden(true));
-      }}
-      {...props}
-    >
-      {children}
-    </aside>
+    <>
+      {!overlayHidden && (
+        <div
+          data-state={open ? 'open' : 'closed'}
+          className="fixed inset-0 z-40 bg-background-default/50 backdrop-blur-surface data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out"
+          onClick={() => setOpen(false)}
+          onAnimationEnd={() => {
+            if (!open) ReactDOM.flushSync(() => setOverlayHidden(true));
+          }}
+        />
+      )}
+      <aside
+        id="nd-sidebar-mobile"
+        data-state={open ? 'open' : 'closed'}
+        className={`fixed top-2 left-2 bottom-2 right-auto z-50 w-[15rem] flex flex-col items-stretch justify-start bg-background-default border border-stroke-neutral rounded-square-high shadow-box overflow-hidden data-[state=open]:animate-slide-in data-[state=closed]:animate-slide-out ${drawerHidden ? 'invisible' : ''}`}
+        onAnimationEnd={() => {
+          if (!open) ReactDOM.flushSync(() => setDrawerHidden(true));
+        }}
+      >
+        <SidebarInner banner={banner} footer={footer}>
+          {children}
+        </SidebarInner>
+      </aside>
+    </>
   );
 }
 
-// -- Sidebar trigger --
-
-export function SidebarTrigger({
+function SidebarInner({
+  banner,
+  footer,
   children,
-  ...props
-}: ComponentProps<'button'>) {
-  const { setOpen } = useSidebar();
-
+}: {
+  banner?: ReactNode;
+  footer?: ReactNode;
+  children: ReactNode;
+}) {
   return (
-    <button
-      aria-label="Open Sidebar"
-      onClick={() => setOpen((prev) => !prev)}
-      {...props}
-    >
-      {children}
-    </button>
+    <>
+      {banner && (
+        <div className="grow-0 p-3 flex flex-col items-stretch justify-start gap-3 bg-background-default/50 border-b last:border-b-none border-stroke-neutral backdrop-blur-surface-low">
+          {banner}
+        </div>
+      )}
+      <div className="grow-1 p-3 flex flex-col items-stretch justify-start gap-3 bg-background-default border-b last:border-b-none border-stroke-neutral overflow-y-scroll no-scrollbar">
+        {children}
+      </div>
+      {footer && (
+        <div className="grow-0 p-3 flex flex-col items-stretch justify-start gap-3 bg-background-default/50 border-t border-stroke-neutral">
+          {footer}
+        </div>
+      )}
+    </>
   );
 }
 
 // -- Folder primitives --
 
-export function SidebarFolder({
+function SidebarFolder({
   defaultOpen: defaultOpenProp,
   active = false,
   children,
@@ -236,8 +276,7 @@ export function SidebarFolder({
 }) {
   const { defaultOpenLevel } = useSidebar();
   const depth = useFolderDepth() + 1;
-  const defaultOpen =
-    active || (defaultOpenProp ?? defaultOpenLevel >= depth);
+  const defaultOpen = active || (defaultOpenProp ?? defaultOpenLevel >= depth);
   const [open, setOpen] = useState(defaultOpen);
 
   useOnChange(defaultOpen, (v) => {
@@ -245,19 +284,13 @@ export function SidebarFolder({
   });
 
   return (
-    <FolderContext
-      value={useMemo(() => ({ open, setOpen, depth }), [depth, open])}
-    >
+    <FolderContext value={useMemo(() => ({ open, setOpen, depth }), [depth, open])}>
       {children}
     </FolderContext>
   );
 }
 
-export function SidebarFolderTrigger({
-  children,
-}: {
-  children: ReactNode;
-}) {
+function SidebarFolderTrigger({ children }: { children: ReactNode }) {
   const { open, setOpen } = useFolder()!;
 
   return (
@@ -277,21 +310,13 @@ export function SidebarFolderTrigger({
         stroke="currentColor"
         strokeWidth={2.5}
       >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M9 5l7 7-7 7"
-        />
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
       </svg>
     </button>
   );
 }
 
-export function SidebarFolderContent({
-  children,
-}: {
-  children: ReactNode;
-}) {
+function SidebarFolderContent({ children }: { children: ReactNode }) {
   const { open } = useFolder()!;
   if (!open) return null;
 
@@ -302,15 +327,8 @@ export function SidebarFolderContent({
   );
 }
 
-export function SidebarFolderLink({
-  href,
-  children,
-}: {
-  href: string;
-  children: ReactNode;
-}) {
+function SidebarFolderLink({ href, children }: { href: string; children: ReactNode }) {
   const { open, setOpen } = useFolder()!;
-  const { prefetch } = useSidebar();
   const pathname = usePathname();
   const active = pathname === href;
   const ref = useRef<HTMLAnchorElement>(null);
@@ -348,30 +366,14 @@ export function SidebarFolderLink({
         stroke="currentColor"
         strokeWidth={2.5}
       >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M9 5l7 7-7 7"
-        />
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
       </svg>
     </Link>
   );
 }
 
-// -- Item and separator --
-
-export function SidebarItem({
-  href,
-  icon,
-  children,
-}: {
-  href: string;
-  icon?: ReactNode;
-  external?: boolean;
-  children: ReactNode;
-}) {
+function SidebarItem({ href, icon, children }: { href: string; icon?: ReactNode; external?: boolean; children: ReactNode }) {
   const pathname = usePathname();
-  const { prefetch } = useSidebar();
   const active = pathname === href;
   const ref = useRef<HTMLAnchorElement>(null);
 
@@ -396,7 +398,7 @@ export function SidebarItem({
   );
 }
 
-export function SidebarSeparator({ children }: { children?: ReactNode }) {
+function SidebarSeparator({ children }: { children?: ReactNode }) {
   const depth = useFolderDepth();
 
   if (!children) return <hr className="mx-2 my-3 border-stroke-neutral" />;
@@ -410,22 +412,76 @@ export function SidebarSeparator({ children }: { children?: ReactNode }) {
   );
 }
 
-// -- Auto-scroll utility --
+// -- Page tree --
 
-export function useAutoScroll(
-  active: boolean,
-  ref: RefObject<HTMLElement | null>,
-) {
-  const { mode } = useSidebar();
+function PageTreeFolder({ item, children }: { item: PageTree.Folder; children: ReactNode }) {
+  const path = useTreePath();
 
-  useEffect(() => {
-    if (active && ref.current) {
-      scrollIntoView(ref.current, {
-        boundary: document.getElementById(
-          mode === 'drawer' ? 'nd-sidebar-mobile' : 'nd-sidebar',
-        ),
-        scrollMode: 'if-needed',
+  return (
+    <SidebarFolder active={path.includes(item)} defaultOpen={item.defaultOpen}>
+      {item.index ? (
+        <SidebarFolderLink href={item.index.url}>
+          {item.icon}
+          {item.name}
+        </SidebarFolderLink>
+      ) : (
+        <SidebarFolderTrigger>
+          {item.icon}
+          {item.name}
+        </SidebarFolderTrigger>
+      )}
+      <SidebarFolderContent>{children}</SidebarFolderContent>
+    </SidebarFolder>
+  );
+}
+
+export function SidebarPageTree() {
+  const { root } = useTreeContext();
+
+  return useMemo(() => {
+    function renderNodes(items: PageTree.Node[]) {
+      return items.map((item, i) => {
+        if (item.type === 'separator') {
+          return (
+            <SidebarSeparator key={i}>
+              {item.name ? (
+                <>
+                  {item.icon}
+                  {item.name}
+                </>
+              ) : null}
+            </SidebarSeparator>
+          );
+        }
+
+        if (item.type === 'folder') {
+          return (
+            <PageTreeFolder key={i} item={item}>
+              {renderNodes(item.children)}
+            </PageTreeFolder>
+          );
+        }
+
+        return (
+          <SidebarItem
+            key={item.url}
+            href={item.url}
+            icon={item.icon}
+            external={item.external}
+          >
+            {item.name}
+          </SidebarItem>
+        );
       });
     }
-  }, [active, mode, ref]);
+
+    return (
+      <ul
+        key={root.$id}
+        className="flex flex-col items-stretch justify-start gap-0.5"
+      >
+        {renderNodes(root.children)}
+      </ul>
+    );
+  }, [root]);
 }
diff --git a/apps/eclipse/src/components/toc/index.tsx b/apps/eclipse/src/components/toc.tsx
similarity index 85%
rename from apps/eclipse/src/components/toc/index.tsx
rename to apps/eclipse/src/components/toc.tsx
index 7488c48161..83954fd7af 100644
--- a/apps/eclipse/src/components/toc/index.tsx
+++ b/apps/eclipse/src/components/toc.tsx
@@ -11,9 +11,9 @@ import {
 } from 'react';
 import * as Primitive from 'fumadocs-core/toc';
 import { useOnChange } from 'fumadocs-core/utils/use-on-change';
-import { mergeRefs } from '../../lib/merge-refs';
+import { mergeRefs } from '../lib/merge-refs';
 
-// -- Context for sharing TOC items --
+// -- Context --
 
 const TOCContext = createContext<Primitive.TOCItemType[]>([]);
 
@@ -21,10 +21,6 @@ export function useTOCItems(): Primitive.TOCItemType[] {
   return use(TOCContext);
 }
 
-/**
- * Wraps children with fumadocs-core AnchorProvider for heading tracking.
- * Matches docs' TOCProvider pattern.
- */
 export function TOCProvider({
   toc,
   children,
@@ -39,15 +35,14 @@ export function TOCProvider({
   );
 }
 
-// -- TocThumb (animated active indicator) --
+// -- TocThumb --
 
 type TocThumbType = [top: number, height: number];
 
-interface TocThumbProps extends ComponentProps<'div'> {
-  containerRef: RefObject<HTMLElement | null>;
-}
-
-export function TocThumb({ containerRef, ...props }: TocThumbProps) {
+function TocThumb({
+  containerRef,
+  ...props
+}: ComponentProps<'div'> & { containerRef: RefObject<HTMLElement | null> }) {
   const thumbRef = useRef<HTMLDivElement>(null);
   const active = Primitive.useActiveAnchors();
 
@@ -108,9 +103,9 @@ function calc(container: HTMLElement, active: string[]): TocThumbType {
   return [upper, lower - upper];
 }
 
-// -- TOC items rendered with Eclipse design --
+// -- TOC items --
 
-export function TOCItems({ ref, ...props }: ComponentProps<'div'>) {
+function TOCItems({ ref, ...props }: ComponentProps<'div'>) {
   const containerRef = useRef<HTMLDivElement>(null);
   const items = useTOCItems();
 
@@ -147,9 +142,8 @@ function TOCItem({ item }: { item: Primitive.TOCItemType }) {
   );
 }
 
-/**
- * TableOfContents — reads items from TOCProvider context.
- */
+// -- TableOfContents --
+
 export function TableOfContents() {
   const items = useTOCItems();
   if (items.length === 0) return null;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f11ecc6306..8ae0c533ba 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -482,24 +482,12 @@ importers:
 
   apps/eclipse:
     dependencies:
-      '@base-ui/react':
-        specifier: 'catalog:'
-        version: 1.2.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@fumadocs/base-ui':
         specifier: 'catalog:'
         version: 16.6.3(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.2.1)
-      '@fumadocs/cli':
-        specifier: 'catalog:'
-        version: 1.2.5
-      '@prisma-docs/ui':
-        specifier: workspace:*
-        version: link:../../packages/ui
       '@prisma/eclipse':
         specifier: workspace:^
         version: link:../../packages/eclipse
-      class-variance-authority:
-        specifier: 'catalog:'
-        version: 0.7.1
       fumadocs-core:
         specifier: 'catalog:'
         version: 16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6)
@@ -515,9 +503,6 @@ importers:
       next:
         specifier: 'catalog:'
         version: 16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      next-themes:
-        specifier: 'catalog:'
-        version: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       npm-to-yarn:
         specifier: 'catalog:'
         version: 3.0.1
@@ -536,9 +521,6 @@ importers:
       scroll-into-view-if-needed:
         specifier: 'catalog:'
         version: 3.1.0
-      zod:
-        specifier: 'catalog:'
-        version: 4.3.6
     devDependencies:
       '@argos-ci/playwright':
         specifier: 'catalog:'
@@ -564,15 +546,9 @@ importers:
       postcss:
         specifier: 'catalog:'
         version: 8.5.8
-      rimraf:
-        specifier: 'catalog:'
-        version: 6.1.3
       tailwindcss:
         specifier: 'catalog:'
         version: 4.2.1
-      tw-animate-css:
-        specifier: 'catalog:'
-        version: 1.4.0
       typescript:
         specifier: 'catalog:'
         version: 5.9.3

From 4984eec91ea48f7d13c4738a98bc190d88b190e1 Mon Sep 17 00:00:00 2001
From: Ben Sekulowicz-Barclay <ben@seku.co>
Date: Tue, 24 Mar 2026 11:41:12 +0100
Subject: [PATCH 07/10] Implement footer

---
 apps/eclipse/content/design-system/index.mdx | 246 ++-----------------
 apps/eclipse/src/components/page.tsx         |  72 +++---
 2 files changed, 53 insertions(+), 265 deletions(-)

diff --git a/apps/eclipse/content/design-system/index.mdx b/apps/eclipse/content/design-system/index.mdx
index 9ac25776ff..401dbefddf 100644
--- a/apps/eclipse/content/design-system/index.mdx
+++ b/apps/eclipse/content/design-system/index.mdx
@@ -1,19 +1,25 @@
 ---
-title: Introduction
+title: Getting Started
 description: Eclipse is Prisma's design system, providing a consistent visual language across all our documentation and products.
 ---
 
-import { EclipseShowcase } from '@/components/eclipse-showcase';
-
-Built with Tailwind CSS and design tokens imported directly from Figma, it ensures design consistency and makes it easy to build beautiful, accessible interfaces.
+Eclipse is a production-ready component library built on top of shadcn/ui and Tailwind CSS. It extends the shadcn/ui foundation with Prisma's design tokens, stricter accessibility defaults, and full TypeScript coverage — giving teams a consistent, type-safe starting point for building interfaces without reinventing primitives.
 
 ## Features
 
-- **Design Tokens from Figma**: All colors, spacing, typography, and other design tokens are synced from our Figma design files
-- **Dark Mode Support**: Full support for light and dark themes with automatic switching
-- **Tailwind CSS Integration**: Seamless integration with Tailwind CSS for rapid development
-- **Type-Safe**: TypeScript definitions for all components and tokens
-- **Accessible**: Built with accessibility in mind following WCAG guidelines
+- **Built on shadcn/ui** — Takes the unstyled, composable primitives from shadcn/ui and layers on Prisma's visual language, so you get a battle-tested component architecture with an opinionated design out of the box.
+- **Tailwind CSS native** — Every component is styled with Tailwind utility classes and driven by design tokens defined as CSS custom properties. No runtime CSS-in-JS, no style conflicts, just predictable output.
+- **Fully type-safe** — All components, props, and tokens ship with TypeScript definitions. Autocomplete works, invalid props fail at build time, and refactors are safe.
+- **Accessible by default** — Components are built on Radix UI primitives with correct ARIA attributes, keyboard navigation, and focus management baked in. Meets WCAG 2.1 AA as a baseline.
+- **Themeable** — Light and dark modes are supported through semantic token layers. Swap a handful of CSS variables to adapt Eclipse to any brand context.
+
+## Prerequisites
+
+Eclipse requires the following peer dependencies:
+
+- `react` and `react-dom` 18 or 19
+- `tailwindcss` v4
+- `@tailwindcss/postcss` v4
 
 ## Installation
 
@@ -23,7 +29,7 @@ pnpm add @prisma/eclipse
 
 ## Setup
 
-### 1. Configure PostCSS
+### Configure PostCSS
 
 Make sure you have the Tailwind v4 PostCSS plugin installed:
 
@@ -41,7 +47,7 @@ export default {
 };
 ```
 
-### 2. Import styles in your app global CSS
+### Import styles in your app global CSS
 
 Initialize Tailwind once in the consuming app, then import Eclipse styles:
 
@@ -50,7 +56,7 @@ Initialize Tailwind once in the consuming app, then import Eclipse styles:
 @import "@prisma/eclipse/styles/globals.css";
 ```
 
-### 3. Use components
+### Use components
 
 Import components from `@prisma/eclipse` in your app code:
 
@@ -62,217 +68,7 @@ export function App() {
 }
 ```
 
-### Notes
-
-- Keep Tailwind initialization at the app level (import `tailwindcss` once in the app entry stylesheet).
-- `@prisma/eclipse/styles/globals.css` includes Eclipse tokens/utilities and `@source` directives for Eclipse components.
-
-
-## Interactive Showcase
-
-<EclipseShowcase />
-
-## Using Components
-
-### Button Component
-
-```tsx
-import { Button } from "@prisma/eclipse";
-
-export function MyComponent() {
-  return (
-    <div className="space-x-4">
-      <Button variant="default">Default</Button>
-      <Button variant="ppg">Prisma Pulse & Accelerate</Button>
-      <Button variant="orm">Prisma ORM</Button>
-      <Button variant="destructive">Destructive</Button>
-    </div>
-  );
-}
-```
-
-### Button Variants
-
-- `default` - Standard button style
-- `ppg` - Prisma Pulse & Accelerate brand colors (teal/cyan)
-- `orm` - Prisma ORM brand colors (purple/blue)
-- `destructive` - Error/danger actions (red)
-- `outline` - Outlined button style
-- `secondary` - Secondary action style
-- `ghost` - Minimal button style
-- `link` - Link-styled button
-
-### Button Sizes
-
-- `sm` - Small button
-- `default` - Standard button size
-- `lg` - Large button
-
-## Color System
-
-Eclipse uses a semantic color system with support for both light and dark modes.
-
-### Background Colors
-
-```tsx
-<div className="bg-background-default">Default background</div>
-<div className="bg-background-neutral">Neutral background</div>
-<div className="bg-background-ppg">PPG background</div>
-<div className="bg-background-orm">ORM background</div>
-<div className="bg-background-error">Error background</div>
-<div className="bg-background-success">Success background</div>
-<div className="bg-background-warning">Warning background</div>
-```
-
-### Foreground Colors
-
-```tsx
-<span className="text-foreground-neutral">Neutral text</span>
-<span className="text-foreground-ppg">PPG text</span>
-<span className="text-foreground-orm">ORM text</span>
-<span className="text-foreground-error">Error text</span>
-<span className="text-foreground-success">Success text</span>
-<span className="text-foreground-warning">Warning text</span>
-```
-
-### Color Variants
-
-Each color has multiple variants for different use cases:
-
-- `default` - Base color
-- `strong` - Stronger/darker variant
-- `weak` - Lighter/softer variant
-- `reverse` - Contrast color for use on colored backgrounds
-- `reverse-weak` - Lighter reverse color
-
-Example:
-```tsx
-<div className="bg-background-ppg">
-  <span className="text-foreground-ppg-reverse">Text on PPG background</span>
-</div>
-```
-
-## Typography
-
-### Font Sizes
-
-```tsx
-<p className="text-2xs">2XS - 11px</p>
-<p className="text-xs">XS - 12px</p>
-<p className="text-sm">SM - 14px</p>
-<p className="text-md">MD - 16px (Base)</p>
-<p className="text-lg">LG - 18px</p>
-<p className="text-xl">XL - 20px</p>
-<p className="text-2xl">2XL - 24px</p>
-<p className="text-3xl">3XL - 30px</p>
-```
-
-### Font Weights
-
-```tsx
-<p className="font-normal">Normal (400)</p>
-<p className="font-medium">Medium (500)</p>
-<p className="font-semibold">Semibold (600)</p>
-<p className="font-bold">Bold (750)</p>
-<p className="font-ultra-bold">Ultra Bold (900)</p>
-```
-
-## Spacing
-
-Eclipse provides a comprehensive spacing system for margins and padding.
-
-### Margin Scale
-
-```tsx
-<div className="m-margin-4xs">4xs - 4px</div>
-<div className="m-margin-3xs">3xs - 8px</div>
-<div className="m-margin-2xs">2xs - 12px</div>
-<div className="m-margin-xs">xs - 16px</div>
-<div className="m-margin-sm">sm - 20px</div>
-<div className="m-margin-md">md - 24px</div>
-<div className="m-margin-lg">lg - 28px</div>
-<div className="m-margin-xl">xl - 32px</div>
-<div className="m-margin-4xl">4xl - 48px</div>
-```
-
-### Padding Utilities
-
-```tsx
-<div className="p-6">Container padding</div>
-<div className="p-padding-inline-element-lg">Element padding</div>
-```
-
-## Border Radius
-
-```tsx
-<div className="rounded-square-low">Low radius (3px)</div>
-<div className="rounded-square">Square radius (6px)</div>
-<div className="rounded-square-high">High radius (12px)</div>
-<div className="rounded-circle">Circular</div>
-```
-
-## Dark Mode
-
-Eclipse supports manual dark mode toggling. Apply the `dark` class to the `<html>` element:
-
-```tsx
-import { useEffect, useState } from "react";
-
-function App() {
-  const [isDark, setIsDark] = useState(false);
-
-  useEffect(() => {
-    document.documentElement.classList.toggle("dark", isDark);
-  }, [isDark]);
-
-  return (
-    <button onClick={() => setIsDark(!isDark)}>
-      Toggle {isDark ? "Light" : "Dark"} Mode
-    </button>
-  );
-}
-```
-
-## Design Tokens
-
-Access design tokens programmatically:
-
-```tsx
-import { tokens } from "@prisma/eclipse/tokens";
-
-console.log(tokens.borderRadius.square); // 6
-console.log(tokens.typography.fontSize.md); // 16
-console.log(tokens.margin.md); // 24
-```
-
-## Utilities
-
-### Class Name Utility
-
-Eclipse includes a `cn` utility for merging class names with Tailwind class deduplication:
-
-```tsx
-import { cn } from "@prisma/eclipse/lib/cn";
-
-function MyComponent({ className, isActive }) {
-  return (
-    <div className={cn(
-      "bg-background-default",
-      isActive && "bg-background-ppg",
-      className
-    )}>
-      Content
-    </div>
-  );
-}
-```
-
-## Resources
-
-- [GitHub Repository](https://github.com/prisma/prisma-docs)
-- [Figma Design Files](https://figma.com) (Internal)
-- [Tailwind CSS Documentation](https://tailwindcss.com)
-
-## Support
+## Notes
 
-For questions or issues with the Eclipse Design System, please reach out to the Prisma design team or open an issue on GitHub.
+- Import `tailwindcss` once in your app's entry stylesheet — don't add it inside Eclipse or in multiple places.
+- `@prisma/eclipse/styles/globals.css` includes Eclipse's design tokens, utility classes, and Tailwind v4 `@source` directives. These `@source` rules tell Tailwind where to scan for class names used by Eclipse components, so they get included in the generated CSS even though they live in `node_modules`.
\ No newline at end of file
diff --git a/apps/eclipse/src/components/page.tsx b/apps/eclipse/src/components/page.tsx
index eba5e4cf1b..2002f0e14e 100644
--- a/apps/eclipse/src/components/page.tsx
+++ b/apps/eclipse/src/components/page.tsx
@@ -80,11 +80,13 @@ export function DocsPage({
 
 export function DocsHeader({ children, className, ...props }: ComponentProps<'header'>) {
   return (
-    <header
-      className={`px-6 md:pl-[18.5rem] md:pr-12 pt-[4.75rem] md:pt-[6.25rem] pb-6 md:pb-12 flex flex-col items-stretch justify-start gap-2 border-b border-stroke-neutral ${className ?? ''}`}
-      {...props}
-    >
-      {children}
+    <header className="px-6 md:pl-[18.5rem] md:pr-12 pt-[4.75rem] md:pt-[6.25rem] pb-6 md:pb-12 flex flex-row items-stretch justify-start gap-12 border-b last:border-b-none border-stroke-neutral">
+      <div className="grow-1 flex flex-col items-stretch gap-2">
+        {children}
+      </div>
+      <div className="grow-0 shrink-0 w-[15rem] hidden xl:block">
+
+      </div>
     </header>
   );
 }
@@ -109,9 +111,9 @@ export function DocsDescription({ children, className, ...props }: ComponentProp
 
 export function DocsBody({ children, className, ...props }: ComponentProps<'div'>) {
   return (
-    <section className="px-6 md:pl-[18.5rem] md:pr-12 py-6 md:py-12 flex flex-row items-stretch justify-start gap-12">
-      <div className={`prose grow-1 min-w-0 ${className ?? ''}`} {...props}>
-        {children}
+    <section className="px-6 md:pl-[18.5rem] md:pr-12 py-6 md:py-12 flex flex-row items-stretch justify-start gap-12 border-b last:border-b-none border-stroke-neutral">
+      <div className="grow-1">
+        <div className="prose">{children}</div>
       </div>
       <div className="grow-0 shrink-0 w-[15rem] hidden xl:block">
         <TableOfContents />
@@ -138,37 +140,27 @@ function DocsFooter({ className }: { className?: string }) {
   if (!previous && !next) return null;
 
   return (
-    <nav
-      className={`mt-12 grid gap-3 ${previous && next ? 'grid-cols-2' : 'grid-cols-1'} ${className ?? ''}`}
-    >
-      {previous && (
-        <Link
-          href={previous.url}
-          className="flex flex-col gap-1 p-4 rounded-square border border-stroke-neutral hover:bg-background-neutral transition-colors"
-        >
-          <span className="text-xs text-foreground-neutral-weak">Previous</span>
-          <span className="flex items-center gap-1.5 text-sm font-medium text-foreground-neutral">
-            <svg className="size-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
-            </svg>
-            {previous.name}
-          </span>
-        </Link>
-      )}
-      {next && (
-        <Link
-          href={next.url}
-          className={`flex flex-col gap-1 p-4 rounded-square border border-stroke-neutral hover:bg-background-neutral transition-colors text-end ${!previous ? 'col-start-1' : ''}`}
-        >
-          <span className="text-xs text-foreground-neutral-weak">Next</span>
-          <span className="flex items-center justify-end gap-1.5 text-sm font-medium text-foreground-neutral">
-            {next.name}
-            <svg className="size-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
-            </svg>
-          </span>
-        </Link>
-      )}
-    </nav>
+    <footer className="p-6 md:pl-[18.5rem] md:pr-12 md:py-12 flex flex-row items-stretch justify-start gap-12 border-b last:border-b-0 border-stroke-neutral">
+      <div className="grow-1 flex flex-row items-stretch justify-center">
+        {previous && (
+          <Link href={previous.url} className="basis-1/2 flex flex-col items-start justify-start gap-1">
+            <span className="type-text-sm text-foreground-neutral-weak">Previous</span>
+            <span className="type-text-md text-foreground-neutral">
+              { previous.name }
+            </span>
+          </Link>
+        )}
+
+        {next && (
+          <Link href={next.url} className="basis-1/2 flex flex-col items-end justify-start gap-1">
+            <span className="type-text-sm text-foreground-neutral-weak">Next</span>
+            <span className="type-text-md text-foreground-neutral">
+              { next.name }
+            </span>
+          </Link>
+        )}
+      </div>
+      <div className="grow-0 shrink-0 w-[15rem] hidden xl:block"></div>
+    </footer>
   );
 }

From d6db3d5ee79a0eb41676f5ac80944cb69d33566e Mon Sep 17 00:00:00 2001
From: Ben Sekulowicz-Barclay <ben@seku.co>
Date: Tue, 24 Mar 2026 12:18:42 +0100
Subject: [PATCH 08/10] Bugfix in footer

---
 apps/eclipse/src/components/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/eclipse/src/components/page.tsx b/apps/eclipse/src/components/page.tsx
index 2002f0e14e..e830b0f278 100644
--- a/apps/eclipse/src/components/page.tsx
+++ b/apps/eclipse/src/components/page.tsx
@@ -141,7 +141,7 @@ function DocsFooter({ className }: { className?: string }) {
 
   return (
     <footer className="p-6 md:pl-[18.5rem] md:pr-12 md:py-12 flex flex-row items-stretch justify-start gap-12 border-b last:border-b-0 border-stroke-neutral">
-      <div className="grow-1 flex flex-row items-stretch justify-center">
+      <div className="grow-1 flex flex-row items-stretch justify-end">
         {previous && (
           <Link href={previous.url} className="basis-1/2 flex flex-col items-start justify-start gap-1">
             <span className="type-text-sm text-foreground-neutral-weak">Previous</span>

From d925be650a664fe1aa61e2169ff8a3a084a88bd8 Mon Sep 17 00:00:00 2001
From: Ben Sekulowicz-Barclay <ben@seku.co>
Date: Tue, 24 Mar 2026 13:59:21 +0100
Subject: [PATCH 09/10] =?UTF-8?q?Fixes=20for=20=F0=9F=90=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/eclipse/src/app/global.css         | 20 ++++++++++----------
 apps/eclipse/src/components/layout.tsx  | 21 +++++++++------------
 apps/eclipse/src/components/page.tsx    | 17 ++++++++++++++---
 apps/eclipse/src/components/search.tsx  | 19 +++++++++++++++++--
 apps/eclipse/src/components/sidebar.tsx |  7 +++++--
 packages/eclipse/src/styles/globals.css |  4 ++--
 6 files changed, 57 insertions(+), 31 deletions(-)

diff --git a/apps/eclipse/src/app/global.css b/apps/eclipse/src/app/global.css
index 49f1d3d094..0b98bc2efd 100644
--- a/apps/eclipse/src/app/global.css
+++ b/apps/eclipse/src/app/global.css
@@ -50,7 +50,7 @@
   }
 
   .font-mono-settings {
-    font-feature-settings: var(--font-mono--settings);
+    font-feature-settings: var(--font-mono-settings);
   }
 
   .no-scrollbar::-webkit-scrollbar {
@@ -67,11 +67,7 @@
 
   b,
   strong {
-    @apply font-semibold;
-  }
-
-  code {
-    @apply text-[0.875em];
+    @apply font-medium;
   }
 
   h1,
@@ -125,15 +121,19 @@
   p,
   li {
     code {
-      @apply -my-0.5 px-1.5 py-0.5 bg-background-neutral-strong rounded-square-low;
+      @apply -my-0.5 px-1.5 py-0.5 bg-background-neutral-strong rounded-square-low text-[0.875em];
     }
   }
 
   li {
-    @apply mx-6 list-disc list-outside;
+    @apply mx-6 list-outside;
+  }
+
+  ol li {
+    @apply list-decimal;
   }
 
-  pre {
-    @apply my-6 first:mt-0 last:mb-0 p-4 bg-background-neutral-weak text-foreground-neutral border border-stroke-neutral rounded-square;
+  ul li {
+    @apply list-disc;
   }
 }
\ No newline at end of file
diff --git a/apps/eclipse/src/components/layout.tsx b/apps/eclipse/src/components/layout.tsx
index 6e04cdd675..6935f421b8 100644
--- a/apps/eclipse/src/components/layout.tsx
+++ b/apps/eclipse/src/components/layout.tsx
@@ -4,13 +4,12 @@ import { TreeContextProvider } from '@fumadocs/base-ui/contexts/tree';
 import { SidebarProvider, SidebarContent, SidebarDrawer, SidebarPageTree } from './sidebar';
 import { Nav } from './nav';
 import { SearchToggle } from './search';
-import { SidebarEnabledFromPageProvider } from './page';
+import { SidebarEnabledFromPageProvider, SidebarEnabledGate } from './page';
 
 export interface DocsLayoutProps {
   tree: PageTree.Root;
 
   sidebar?: {
-    banner?: ReactNode;
     footer?: ReactNode;
     enabled?: boolean;
     defaultOpenLevel?: number;
@@ -41,16 +40,14 @@ export function DocsLayout({
         <SidebarEnabledFromPageProvider layoutEnabled={sidebarEnabled}>
           <Nav />
           <div>
-            {sidebarEnabled && (
-              <>
-                <SidebarContent banner={searchBanner} footer={sidebarProps.footer}>
-                  <SidebarPageTree />
-                </SidebarContent>
-                <SidebarDrawer banner={searchBanner} footer={sidebarProps.footer}>
-                  <SidebarPageTree />
-                </SidebarDrawer>
-              </>
-            )}
+            <SidebarEnabledGate>
+              <SidebarContent banner={searchBanner} footer={sidebarProps.footer}>
+                <SidebarPageTree />
+              </SidebarContent>
+              <SidebarDrawer banner={searchBanner} footer={sidebarProps.footer}>
+                <SidebarPageTree />
+              </SidebarDrawer>
+            </SidebarEnabledGate>
             <main>{children}</main>
           </div>
         </SidebarEnabledFromPageProvider>
diff --git a/apps/eclipse/src/components/page.tsx b/apps/eclipse/src/components/page.tsx
index e830b0f278..32bea10346 100644
--- a/apps/eclipse/src/components/page.tsx
+++ b/apps/eclipse/src/components/page.tsx
@@ -4,7 +4,7 @@ import type { ComponentProps, ReactNode } from 'react';
 import type { TOCItemType } from 'fumadocs-core/toc';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { createContext, use, useMemo, useState } from 'react';
+import { createContext, use, useEffect, useMemo, useState } from 'react';
 import { useFooterItems } from '@fumadocs/base-ui/utils/use-footer-items';
 import { TOCProvider, TableOfContents } from './toc';
 
@@ -36,9 +36,20 @@ export function SidebarEnabledFromPageProvider({
   );
 }
 
+export function SidebarEnabledGate({ children }: { children: ReactNode }) {
+  const enabled = use(SidebarEnabledContext);
+  if (!enabled) return null;
+  return <>{children}</>;
+}
+
 function SidebarEnabledSync({ enabled }: { enabled: boolean }) {
   const setEnabled = use(SidebarEnabledSetterContext);
-  if (!enabled) setEnabled(false);
+
+  useEffect(() => {
+    if (!enabled) setEnabled(false);
+    return () => setEnabled(true);
+  }, [enabled, setEnabled]);
+
   return null;
 }
 
@@ -80,7 +91,7 @@ export function DocsPage({
 
 export function DocsHeader({ children, className, ...props }: ComponentProps<'header'>) {
   return (
-    <header className="px-6 md:pl-[18.5rem] md:pr-12 pt-[4.75rem] md:pt-[6.25rem] pb-6 md:pb-12 flex flex-row items-stretch justify-start gap-12 border-b last:border-b-none border-stroke-neutral">
+    <header className={`px-6 md:pl-[18.5rem] md:pr-12 pt-[4.75rem] md:pt-[6.25rem] pb-6 md:pb-12 flex flex-row items-stretch justify-start gap-12 border-b last:border-b-none border-stroke-neutral ${className ?? ''}`} {...props}>
       <div className="grow-1 flex flex-col items-stretch gap-2">
         {children}
       </div>
diff --git a/apps/eclipse/src/components/search.tsx b/apps/eclipse/src/components/search.tsx
index a20386cb7f..62088f377a 100644
--- a/apps/eclipse/src/components/search.tsx
+++ b/apps/eclipse/src/components/search.tsx
@@ -3,7 +3,7 @@
 import { useDocsSearch } from 'fumadocs-core/search/client';
 import { useRouter } from 'next/navigation';
 import { createPortal } from 'react-dom';
-import { useEffect, useRef, useCallback } from 'react';
+import { useEffect, useRef, useCallback, useState } from 'react';
 import { useSearchContext } from '@fumadocs/base-ui/contexts/search';
 import type { SharedProps } from 'fumadocs-ui/components/dialog/search';
 
@@ -19,10 +19,13 @@ export default function EclipseSearchDialog({ open, onOpenChange }: SharedProps)
 function SearchDialogInner({ onClose }: { onClose: () => void }) {
   const router = useRouter();
   const inputRef = useRef<HTMLInputElement>(null);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
   const { search, setSearch, query } = useDocsSearch({ type: 'fetch' });
 
   useEffect(() => {
+    previousFocusRef.current = document.activeElement as HTMLElement | null;
     inputRef.current?.focus();
+    return () => { previousFocusRef.current?.focus(); };
   }, []);
 
   useEffect(() => {
@@ -45,6 +48,9 @@ function SearchDialogInner({ onClose }: { onClose: () => void }) {
       <div className="fixed inset-0 bg-background-default/50 backdrop-blur-surface" aria-hidden="true" />
 
       <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="Search documentation"
         className="relative z-10 w-full max-w-lg bg-background-default border border-stroke-neutral rounded-square shadow-box overflow-hidden"
         onClick={(e) => e.stopPropagation()}
         onKeyDown={(e) => {
@@ -132,8 +138,17 @@ function ResultIcon({ type }: { type: 'page' | 'heading' | 'text' }) {
   );
 }
 
+function useModifierKey() {
+  const [key, setKey] = useState('⌘');
+  useEffect(() => {
+    if (!navigator.userAgent.includes('Mac')) setKey('Ctrl');
+  }, []);
+  return key;
+}
+
 export function SearchToggle() {
   const { setOpenSearch } = useSearchContext();
+  const modifier = useModifierKey();
 
   return (
     <button
@@ -142,7 +157,7 @@ export function SearchToggle() {
     >
       <span className="text-sm text-foreground-neutral-weak">Search...</span>
       <kbd className="-mr-1.5 px-1.5 py-0.5 bg-background-neutral font-mono text-xs text-foreground-neutral-weaker rounded-square-low">
-        CMD+K
+        {modifier}+K
       </kbd>
     </button>
   );
diff --git a/apps/eclipse/src/components/sidebar.tsx b/apps/eclipse/src/components/sidebar.tsx
index e0f43cc920..f88cf94bd8 100644
--- a/apps/eclipse/src/components/sidebar.tsx
+++ b/apps/eclipse/src/components/sidebar.tsx
@@ -145,6 +145,10 @@ export function SidebarContent({
     if (collapsed) setHover(false);
   });
 
+  useEffect(() => {
+    return () => window.clearTimeout(timerRef.current);
+  }, []);
+
   if (mode !== 'full') return null;
 
   function shouldIgnoreHover(e: PointerEvent): boolean {
@@ -372,7 +376,7 @@ function SidebarFolderLink({ href, children }: { href: string; children: ReactNo
   );
 }
 
-function SidebarItem({ href, icon, children }: { href: string; icon?: ReactNode; external?: boolean; children: ReactNode }) {
+function SidebarItem({ href, icon, children }: { href: string; icon?: ReactNode; children: ReactNode }) {
   const pathname = usePathname();
   const active = pathname === href;
   const ref = useRef<HTMLAnchorElement>(null);
@@ -467,7 +471,6 @@ export function SidebarPageTree() {
             key={item.url}
             href={item.url}
             icon={item.icon}
-            external={item.external}
           >
             {item.name}
           </SidebarItem>
diff --git a/packages/eclipse/src/styles/globals.css b/packages/eclipse/src/styles/globals.css
index 673d7c3e58..7ae4041570 100644
--- a/packages/eclipse/src/styles/globals.css
+++ b/packages/eclipse/src/styles/globals.css
@@ -50,7 +50,7 @@
   --font-sans: "Inter", "Roboto", "Helvetica Neue", "Arial Nova", "Nimbus Sans", "Arial", sans-serif;
   --font-sans-settings: "cv01" on, "cv02" on, "cv06" on, "cv07" on, "cv08" on, "cv10" on;
   --font-mono: "Mona Sans Mono VF", ui-monospace, "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
-  --font-mono--settings: "ss01" on, "ss02" on, "ss05" on, "ss06" on;
+  --font-mono-settings: "ss01" on, "ss02" on, "ss05" on, "ss06" on;
 
   /* Typography - Font Sizes with paired Line Heights */
   --text-2xs: 0.6875rem;
@@ -514,7 +514,7 @@
   .type-code-xs,
   .type-code-xs-strong {
     font: normal 400 var(--text-md)/var(--text-md--line-height) var(--font-mono);
-    font-feature-settings: var(--font-mono--settings);
+    font-feature-settings: var(--font-mono-settings);
   }
 
   .type-code-sm,

From ff6ac11e82879c022794b9f823eb6604f71e5d55 Mon Sep 17 00:00:00 2001
From: Ben Sekulowicz-Barclay <ben@seku.co>
Date: Tue, 24 Mar 2026 16:24:11 +0100
Subject: [PATCH 10/10] =?UTF-8?q?Fixes=20for=20=F0=9F=90=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/eclipse/src/app/global.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/eclipse/src/app/global.css b/apps/eclipse/src/app/global.css
index 0b98bc2efd..dd924df9de 100644
--- a/apps/eclipse/src/app/global.css
+++ b/apps/eclipse/src/app/global.css
@@ -98,7 +98,7 @@
     + h4,
     + h5,
     + h6 {
-      @apply mt-6
+      @apply mt-6;
     }
   }