Merge pull request #2689 from fuma-nama/dev

fuma-nama · web-flow · commit f4ce0939503f · 2025-11-30T19:54:55.000+08:00
Sync
diff --git a/apps/docs/content/docs/ui/(ui)/layouts/notebook.mdx b/apps/docs/content/docs/ui/(ui)/layouts/notebook.mdx
@@ -1,5 +1,5 @@
 ---
-title: Notebook
+title: Notebook Layout
 description: A more compact version of Docs Layout
 ---
 
diff --git a/apps/docs/content/docs/ui/(ui)/layouts/page.mdx b/apps/docs/content/docs/ui/(ui)/layouts/page.mdx
@@ -60,7 +60,10 @@ This will render the title in the MDX body.
 Link to the original GitHub file with your component.
 
 ```tsx
+// docs layout:
 import { DocsPage } from 'fumadocs-ui/layouts/docs/page';
+// notebook layout:
+import { DocsPage } from 'fumadocs-ui/layouts/notebook/page';
 
 <DocsPage>
   <a
@@ -79,7 +82,10 @@ import { DocsPage } from 'fumadocs-ui/layouts/docs/page';
 Display last updated time of the page.
 
 ```tsx
+// docs layout:
 import { DocsPage, PageLastUpdate } from 'fumadocs-ui/layouts/docs/page';
+// notebook layout:
+import { DocsPage, PageLastUpdate } from 'fumadocs-ui/layouts/notebook/page';
 
 const lastModifiedTime: Date | undefined;
 
@@ -134,7 +140,10 @@ To extend the page to fill up all available space, pass `full` to the page compo
 This will force TOC to be shown as a popover.
 
 ```tsx
+// docs layout:
 import { DocsPage } from 'fumadocs-ui/layouts/docs/page';
+// notebook layout:
+import { DocsPage } from 'fumadocs-ui/layouts/notebook/page';
 
 <DocsPage full>...</DocsPage>;
 ```
@@ -147,15 +156,21 @@ For Markdown and MDX documents, You can obtain it using the
 [TOC Utility](/docs/headless/utils/get-toc). Content sources like Fumadocs MDX offer this out-of-the-box.
 
 ```tsx
+// docs layout:
 import { DocsPage } from 'fumadocs-ui/layouts/docs/page';
+// notebook layout:
+import { DocsPage } from 'fumadocs-ui/layouts/notebook/page';
 
 <DocsPage toc={headings}>...</DocsPage>;
 ```
 
 You can customise or disable it with the `tableOfContent` option, or with `tableOfContentPopover` on smaller devices.
 
 ```tsx
+// docs layout:
 import { DocsPage } from 'fumadocs-ui/layouts/docs/page';
+// notebook layout:
+import { DocsPage } from 'fumadocs-ui/layouts/notebook/page';
 
 <DocsPage tableOfContent={options} tableOfContentPopover={options}>
   ...
@@ -169,7 +184,10 @@ import { DocsPage } from 'fumadocs-ui/layouts/docs/page';
 You can choose another style for TOC, like `clerk` inspired by https://clerk.com:
 
 ```tsx
+// docs layout:
 import { DocsPage } from 'fumadocs-ui/layouts/docs/page';
+// notebook layout:
+import { DocsPage } from 'fumadocs-ui/layouts/notebook/page';
 
 <DocsPage
   tableOfContent={{
@@ -189,11 +207,12 @@ Footer is a navigation element that has two buttons to jump to the next and prev
 Customise the footer with the `footer` option.
 
 ```tsx
-import { DocsPage, DocsBody } from 'fumadocs-ui/layouts/docs/page';
+// docs layout:
+import { DocsPage } from 'fumadocs-ui/layouts/docs/page';
+// notebook layout:
+import { DocsPage } from 'fumadocs-ui/layouts/notebook/page';
 
-<DocsPage footer={options}>
-  <DocsBody>...</DocsBody>
-</DocsPage>;
+<DocsPage footer={options}>...</DocsPage>;
 ```
 
 <auto-type-table path="../../props.ts" name="FooterProps" />
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -1,5 +1,7 @@
 # next-docs-zeta
 
+## 16.2.1
+
 ## 16.2.0
 
 ## 16.1.0
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-core",
-  "version": "16.2.0",
+  "version": "16.2.1",
   "description": "The React.js library for building a documentation website",
   "keywords": [
     "Fumadocs",
diff --git a/packages/create-app-versions/CHANGELOG.md b/packages/create-app-versions/CHANGELOG.md
@@ -1,5 +1,14 @@
 # create-fumadocs-versions
 
+## 16.0.21
+
+### Patch Changes
+
+- Updated dependencies [556cb6b]
+- Updated dependencies [c6120ff]
+  - fumadocs-ui@16.2.1
+  - fumadocs-core@16.2.1
+
 ## 16.0.20
 
 ### Patch Changes
diff --git a/packages/create-app-versions/package.json b/packages/create-app-versions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-fumadocs-versions",
-  "version": "16.0.20",
+  "version": "16.0.21",
   "private": true,
   "description": "Used to track dependency versions in create-fumadocs-app",
   "dependencies": {
diff --git a/packages/create-app/CHANGELOG.md b/packages/create-app/CHANGELOG.md
@@ -1,5 +1,7 @@
 # create-next-docs-app
 
+## 16.0.21
+
 ## 16.0.20
 
 ## 16.0.19
diff --git a/packages/create-app/package.json b/packages/create-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-fumadocs-app",
-  "version": "16.0.20",
+  "version": "16.0.21",
   "description": "Create a new documentation site with Fumadocs",
   "keywords": [
     "react",
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
@@ -1,5 +1,13 @@
 # next-docs-ui
 
+## 16.2.1
+
+### Patch Changes
+
+- 556cb6b: Fix missing default colors
+- c6120ff: Add sidebar animation back
+  - fumadocs-core@16.2.1
+
 ## 16.2.0
 
 ### Minor Changes
diff --git a/packages/ui/css/shadcn.css b/packages/ui/css/shadcn.css
@@ -1,3 +1,5 @@
+@import './colors/index.css';
+
 @theme {
   --color-fd-background: var(--background);
   --color-fd-foreground: var(--foreground);
@@ -27,3 +29,7 @@
   --color-fd-ring: var(--sidebar-ring);
   --color-fd-primary-foreground: var(--sidebar-primary-foreground);
 }
+
+@theme static {
+  --color-fd-error: var(--destructive);
+}
diff --git a/packages/ui/css/solar.css b/packages/ui/css/solar.css
@@ -69,10 +69,6 @@
   }
 }
 
-#nd-sidebar {
-  @apply bg-fd-card;
-}
-
 #nd-sidebar[data-collapsed='false'] {
   border: none;
   @apply bg-fd-background;
diff --git a/packages/ui/eslint.config.mjs b/packages/ui/eslint.config.mjs
@@ -11,6 +11,7 @@ export default [
       '@typescript-eslint/unbound-method': 'off',
       '@typescript-eslint/restrict-template-expressions': 'off',
       'import/no-relative-packages': 'off',
+      'react-hooks/purity': 'off',
     },
   },
 ];
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "16.2.0",
+  "version": "16.2.1",
   "description": "The React.js documentation framework",
   "keywords": [
     "NextJs",
diff --git a/packages/ui/src/components/sidebar/base.tsx b/packages/ui/src/components/sidebar/base.tsx
@@ -3,6 +3,7 @@ import { ChevronDown, ExternalLink } from 'lucide-react';
 import {
   type ComponentProps,
   createContext,
+  type PointerEvent,
   type ReactNode,
   type RefObject,
   use,
@@ -130,71 +131,59 @@ export function useFolderDepth() {
 
 export function SidebarContent({
   children,
-  aside,
 }: {
-  aside?: (state: {
+  children: (state: {
+    ref: RefObject<HTMLElement | null>;
     collapsed: boolean;
     hovered: boolean;
-  }) => ComponentProps<'aside'>;
-  children: ReactNode;
+    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);
-  const ignoreHoverUntil = useRef(0);
 
   useOnChange(collapsed, () => {
-    if (collapsed) {
-      setHover(true);
-      ignoreHoverUntil.current = Date.now() + 200;
-
-      setTimeout(() => {
-        setHover(false);
-      }, 200);
-    }
+    if (collapsed) setHover(false);
   });
 
   if (mode !== 'full') return;
 
-  return (
-    <aside
-      id="nd-sidebar"
-      data-collapsed={collapsed}
-      data-hovered={collapsed && hover}
-      {...aside?.({ collapsed, hovered: hover })}
-      onPointerEnter={(e) => {
-        if (
-          !collapsed ||
-          e.pointerType === 'touch' ||
-          ignoreHoverUntil.current > Date.now()
-        )
-          return;
-        window.clearTimeout(timerRef.current);
-        setHover(true);
-      }}
-      onPointerLeave={(e) => {
-        if (
-          !collapsed ||
-          e.pointerType === 'touch' ||
-          ignoreHoverUntil.current > Date.now()
-        )
-          return;
-        window.clearTimeout(timerRef.current);
-
-        timerRef.current = window.setTimeout(
-          () => {
-            setHover(false);
-            ignoreHoverUntil.current = Date.now() + 200;
-          },
-          Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100
-            ? 0
-            : 500,
-        );
-      }}
-    >
-      {children}
-    </aside>
-  );
+  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'>) {
diff --git a/packages/ui/src/layouts/docs/client.tsx b/packages/ui/src/layouts/docs/client.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { Sidebar as SidebarIcon } from 'lucide-react';
 import {
   type ComponentProps,
   createContext,
@@ -9,10 +8,7 @@ import {
   useMemo,
 } from 'react';
 import { cn } from '@/utils/cn';
-import { buttonVariants } from '@/components/ui/button';
 import { useSidebar } from '@/components/sidebar/base';
-import { SidebarCollapseTrigger } from './sidebar';
-import { SearchToggle } from '../shared/search-toggle';
 import { usePathname } from 'fumadocs-core/framework';
 import { isTabActive } from '@/utils/is-active';
 import Link from 'fumadocs-core/link';
@@ -71,7 +67,7 @@ export function LayoutBody({
     <div
       id="nd-docs-layout"
       className={cn(
-        'grid transition-[grid-template-columns] overflow-x-clip min-h-(--fd-docs-height) [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]',
+        'grid transition-[grid-template-columns] overflow-x-clip min-h-(--fd-docs-height) 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,
       )}
       data-sidebar-collapsed={collapsed}
@@ -86,8 +82,6 @@ export function LayoutBody({
           '--fd-docs-row-3':
             'calc(var(--fd-docs-row-2) + var(--fd-toc-popover-height))',
           '--fd-sidebar-col': collapsed ? '0px' : 'var(--fd-sidebar-width)',
-          gridAutoColumns: 'auto',
-          gridAutoRows: 'auto',
           ...style,
         } as object
       }
@@ -98,32 +92,6 @@ export function LayoutBody({
   );
 }
 
-export function CollapsibleControl() {
-  const { collapsed } = useSidebar();
-
-  return (
-    <div
-      className={cn(
-        'fixed flex top-16 shadow-lg transition-opacity rounded-xl p-0.5 border bg-fd-muted text-fd-muted-foreground z-10 max-md:hidden xl:top-4 xl:start-4 max-xl:end-4',
-        !collapsed && 'pointer-events-none opacity-0',
-      )}
-    >
-      <SidebarCollapseTrigger
-        className={cn(
-          buttonVariants({
-            color: 'ghost',
-            size: 'icon-sm',
-            className: 'rounded-lg',
-          }),
-        )}
-      >
-        <SidebarIcon />
-      </SidebarCollapseTrigger>
-      <SearchToggle className="rounded-lg" hideIfDisabled />
-    </div>
-  );
-}
-
 export function LayoutTabs({
   options,
   ...props
diff --git a/packages/ui/src/layouts/docs/index.tsx b/packages/ui/src/layouts/docs/index.tsx
diff --git a/packages/ui/src/layouts/docs/sidebar.tsx b/packages/ui/src/layouts/docs/sidebar.tsx
diff --git a/packages/ui/src/layouts/notebook/client.tsx b/packages/ui/src/layouts/notebook/client.tsx
diff --git a/packages/ui/src/layouts/notebook/sidebar.tsx b/packages/ui/src/layouts/notebook/sidebar.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "fumadocs-core",`
`3`		`- "version": "16.2.0",`
	`3`	`+ "version": "16.2.1",`
`4`	`4`	`"description": "The React.js library for building a documentation website",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"Fumadocs",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "create-fumadocs-versions",`
`3`		`- "version": "16.0.20",`
	`3`	`+ "version": "16.0.21",`
`4`	`4`	`"private": true,`
`5`	`5`	`"description": "Used to track dependency versions in create-fumadocs-app",`
`6`	`6`	`"dependencies": {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "create-fumadocs-app",`
`3`		`- "version": "16.0.20",`
	`3`	`+ "version": "16.0.21",`
`4`	`4`	`"description": "Create a new documentation site with Fumadocs",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"react",`