@fumadocs/base-ui 16.6.5 → 16.6.7

package/css/generated/docs.css

@@ -426,6 +426,7 @@
 @source inline("use");
 @source inline("useActiveAnchor");
 @source inline("useFooterItems");
+@source inline("useI18n");
 @source inline("useIsScrollTop");
 @source inline("useLinkItems");
 @source inline("useMemo");

package/css/generated/flux.css

@@ -2,6 +2,7 @@
 @source inline("!isActive");
 @source inline("!open");
 @source inline("*:rounded-lg");
+@source inline("---spacing");
 @source inline("--fd-toc-width");
 @source inline("--removed-body-scroll-bar-size");
 @source inline("--spacing");
@@ -12,7 +13,6 @@
 @source inline("[&_svg]:shrink-0");
 @source inline("[&_svg]:size-4");
 @source inline("[grid-area:main]");
-@source inline("[scrollbar-width:none]");
 @source inline("a");
 @source inline("absolute");
 @source inline("active");
@@ -187,6 +187,7 @@
 @source inline("inline-flex");
 @source inline("input");
 @source inline("inset-0");
+@source inline("inset-x-0");
 @source inline("interface");
 @source inline("invisible");
 @source inline("isActive");
@@ -207,7 +208,7 @@
 @source inline("located");
 @source inline("lucide-react");
 @source inline("main");
-@source inline("mask-[linear-gradient(to_bottom,transparent,white_calc(var(--spacing)*14),white_calc(100%-var(--spacing)*14),transparent)]");
+@source inline("mask-[linear-gradient(to_bottom,transparent,white_--spacing(14),white_calc(100%---spacing(14)),transparent)]");
 @source inline("max");
 @source inline("max-h-[50vh]");
 @source inline("max-w-[1200px]");
@@ -221,6 +222,7 @@
 @source inline("menuItems");
 @source inline("mergeRefs");
 @source inline("min");
+@source inline("min-h-0");
 @source inline("min-h-11");
 @source inline("min-w-0");
 @source inline("mode");
@@ -249,6 +251,7 @@
 @source inline("number");
 @source inline("object");
 @source inline("of");
+@source inline("onAnimationComplete");
 @source inline("onClick");
 @source inline("onOpenChange");
 @source inline("opacity");
@@ -260,7 +263,6 @@
 @source inline("overflow-x-clip");
 @source inline("overflow-y-auto");
 @source inline("overflow-y-hidden");
-@source inline("overscroll-contain");
 @source inline("p");
 @source inline("p-1");
 @source inline("p-1.5");
@@ -314,10 +316,12 @@
 @source inline("rounded-lg");
 @source inline("rounded-xl");
 @source inline("rtl:rotate-180");
+@source inline("scale");
 @source inline("searchToggle");
 @source inline("secondary");
 @source inline("selected");
 @source inline("selectedIdx");
+@source inline("setBlockScroll");
 @source inline("setContainer");
 @source inline("setDate");
 @source inline("setOpen");
@@ -381,6 +385,7 @@
 @source inline("tocOptions");
 @source inline("tocPopoverEnabled");
 @source inline("tool");
+@source inline("top-0");
 @source inline("transform");
 @source inline("transition");
 @source inline("transition-all");
@@ -388,6 +393,7 @@
 @source inline("transition-opacity");
 @source inline("transition-transform");
 @source inline("translate-x-[calc(-50%-var(--removed-body-scroll-bar-size,0px)/2)]");
+@source inline("translateY");
 @source inline("tree");
 @source inline("true");
 @source inline("truncate");
@@ -400,10 +406,12 @@
 @source inline("use");
 @source inline("useActiveAnchor");
 @source inline("useFooterItems");
+@source inline("useI18n");
 @source inline("useLinkItems");
 @source inline("useMemo");
 @source inline("usePathname");
 @source inline("useRef");
+@source inline("useSearchContext");
 @source inline("useSidebar");
 @source inline("useState");
 @source inline("useTOCItems");

package/css/generated/notebook.css

@@ -464,6 +464,7 @@
 @source inline("use");
 @source inline("useActiveAnchor");
 @source inline("useFooterItems");
+@source inline("useI18n");
 @source inline("useIsScrollTop");
 @source inline("useLinkItems");
 @source inline("useMemo");

package/css/generated/shared.css

@@ -260,6 +260,7 @@
 @source inline("defaultTranslations");
 @source inline("defaultValue");
 @source inline("defaults");
+@source inline("defineI18nUI");
 @source inline("defined");
 @source inline("delay");
 @source inline("dependencies");
@@ -473,6 +474,7 @@
 @source inline("is");
 @source inline("isActive");
 @source inline("isLoading");
+@source inline("isOpen");
 @source inline("isWindows");
 @source inline("it");
 @source inline("item");
@@ -1006,6 +1008,7 @@
 @source inline("use");
 @source inline("useCopyButton");
 @source inline("useDocsSearch");
+@source inline("useI18n");
 @source inline("useMediaQuery");
 @source inline("useMemo");
 @source inline("useOnChange");

package/css/lib/shiki.css

@@ -26,26 +26,6 @@
     filter: blur(0);
   }
 
-  &[data-line-numbers] .twoslash-meta-line {
-    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
-  }
-
-  &[data-line-numbers] .line {
-    counter-increment: line;
-    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
-  }
-
-  &[data-line-numbers] .line::after {
-    position: absolute;
-    content: counter(line);
-    color: color-mix(
-      in oklab,
-      var(--fd-counter-color, var(--color-fd-muted-foreground)) 60%,
-      transparent
-    );
-    @apply top-0 left-4;
-  }
-
   .diff::before {
     position: absolute;
     left: calc(var(--spacing) * 1.5);
@@ -75,14 +55,39 @@
   .highlighted {
     --fd-counter-color: var(--color-fd-primary);
     padding-left: calc(var(--padding-left) - 2px);
+    @apply bg-fd-primary/10;
+  }
 
-    @apply border-l-2 border-fd-primary/50 bg-fd-primary/10;
+  .highlighted::after {
+    position: absolute;
+    content: '';
+    @apply inset-y-0 left-0 border-l-2 border-fd-primary/50;
   }
 
   .highlighted-word {
     padding: 1px;
     @apply border -my-px border-fd-primary/30 bg-fd-primary/10 rounded-md font-medium;
   }
+
+  &[data-line-numbers] .twoslash-meta-line {
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
+  }
+
+  &[data-line-numbers] .line {
+    counter-increment: line;
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
+  }
+
+  &[data-line-numbers] .line::after {
+    position: absolute;
+    content: counter(line);
+    color: color-mix(
+      in oklab,
+      var(--fd-counter-color, var(--color-fd-muted-foreground)) 60%,
+      transparent
+    );
+    @apply inset-y-0 left-0 w-7 text-right;
+  }
 }
 
 .dark .shiki:not(.not-fumadocs-codeblock *) {

package/dist/contexts/search.d.ts

@@ -49,6 +49,7 @@ interface SearchProviderProps {
 }
 interface SearchContextType {
   enabled: boolean;
+  open: boolean;
   hotKey: HotKey[];
   setOpenSearch: (value: boolean) => void;
 }

package/dist/contexts/search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search.d.ts","names":[],"sources":["../../src/contexts/search.tsx"],"mappings":";;;;UAaU,MAAA;EACR,OAAA,EAAS,SAAA;;AAHI;;EAQb,GAAA,aAAgB,CAAA,EAAG,aAAA;AAAA;AAAA,UAGJ,WAAA;EACf,IAAA;EACA,YAAA,GAAe,IAAA;AAAA;AAAA,KAGL,UAAA,IAAc,IAAA,UAAc,IAAA;AAAA,UAEvB,OAAA;EACf,IAAA;EACA,KAAA;AAAA;AAAA,UAGe,mBAAA;EAZW;;;;;EAkB1B,OAAA;EAbU;;;EAkBV,KAAA,GAAQ,UAAA;EAlBkC;AAE5C;;;;EAuBE,MAAA,GAAS,MAAA;EAlBM;;;;;EAyBf,YAAA,EAAc,aAAA,CAAc,WAAA;EAAd;;;EAKd,OAAA,GAAU,OAAA,CAAQ,WAAA,GAAc,MAAA;EAEhC,QAAA,GAAW,SAAA;AAAA;AAAA,UAGH,iBAAA;EACR,OAAA;EACA,MAAA,EAAQ,MAAA;EACR,aAAA,GAAgB,KAAA;AAAA;AAAA,iBASF,gBAAA,CAAA,GAAoB,iBAAA;AAAA,iBAgBpB,cAAA,CAAA;EACd,YAAA;EACA,QAAA;EACA,OAAA;EACA,OAAA;EACA,MAAA;EAUA;AAAA,GACC,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBA+CN,UAAA,CAAA;EAAa;AAAA;EAAc,QAAA,EAAU,SAAA;AAAA,IAAW,SAAA"}
+{"version":3,"file":"search.d.ts","names":[],"sources":["../../src/contexts/search.tsx"],"mappings":";;;;UAaU,MAAA;EACR,OAAA,EAAS,SAAA;;AAHI;;EAQb,GAAA,aAAgB,CAAA,EAAG,aAAA;AAAA;AAAA,UAGJ,WAAA;EACf,IAAA;EACA,YAAA,GAAe,IAAA;AAAA;AAAA,KAGL,UAAA,IAAc,IAAA,UAAc,IAAA;AAAA,UAEvB,OAAA;EACf,IAAA;EACA,KAAA;AAAA;AAAA,UAGe,mBAAA;EAZW;;;;;EAkB1B,OAAA;EAbU;;;EAkBV,KAAA,GAAQ,UAAA;EAlBkC;AAE5C;;;;EAuBE,MAAA,GAAS,MAAA;EAlBM;;;;;EAyBf,YAAA,EAAc,aAAA,CAAc,WAAA;EAAd;;;EAKd,OAAA,GAAU,OAAA,CAAQ,WAAA,GAAc,MAAA;EAEhC,QAAA,GAAW,SAAA;AAAA;AAAA,UAGH,iBAAA;EACR,OAAA;EACA,IAAA;EACA,MAAA,EAAQ,MAAA;EACR,aAAA,GAAgB,KAAA;AAAA;AAAA,iBAUF,gBAAA,CAAA,GAAoB,iBAAA;AAAA,iBAgBpB,cAAA,CAAA;EACd,YAAA;EACA,QAAA;EACA,OAAA;EACA,OAAA;EACA,MAAA;EAUA;AAAA,GACC,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAgDN,UAAA,CAAA;EAAa;AAAA;EAAc,QAAA,EAAU,SAAA;AAAA,IAAW,SAAA"}

package/dist/contexts/search.js

@@ -6,6 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/contexts/search.tsx
 const SearchContext = createContext({
 	enabled: false,
+	open: false,
 	hotKey: [],
 	setOpenSearch: () => void 0
 });
@@ -42,9 +43,10 @@ function SearchProvider({ SearchDialog, children, preload = true, options, hotKe
 	return /* @__PURE__ */ jsxs(SearchContext, {
 		value: useMemo(() => ({
 			enabled: true,
+			open: isOpen ?? false,
 			hotKey,
 			setOpenSearch: setIsOpen
-		}), [hotKey]),
+		}), [isOpen, hotKey]),
 		children: [isOpen !== void 0 && /* @__PURE__ */ jsx(Suspense, {
 			fallback: null,
 			children: /* @__PURE__ */ jsx(SearchDialog, {

package/dist/contexts/search.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.js","names":[],"sources":["../../src/contexts/search.tsx"],"sourcesContent":["'use client';\nimport {\n  type ComponentType,\n  createContext,\n  type ReactNode,\n  Suspense,\n  use,\n  useEffect,\n  useEffectEvent,\n  useMemo,\n  useState,\n} from 'react';\n\ninterface HotKey {\n  display: ReactNode;\n\n  /**\n   * Key code or a function determining whether the key is pressed.\n   */\n  key: string | ((e: KeyboardEvent) => boolean);\n}\n\nexport interface SharedProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}\n\nexport type SearchLink = [name: string, href: string];\n\nexport interface TagItem {\n  name: string;\n  value: string;\n}\n\nexport interface SearchProviderProps {\n  /**\n   * Preload search dialog before opening it\n   *\n   * @defaultValue `true`\n   */\n  preload?: boolean;\n\n  /**\n   * Custom links to be displayed if search is empty\n   */\n  links?: SearchLink[];\n\n  /**\n   * Hotkeys for triggering search dialog\n   *\n   * @defaultValue Meta/Ctrl + K\n   */\n  hotKey?: HotKey[];\n\n  /**\n   * Replace default search dialog, allowing you to use other solutions such as Algolia Search\n   *\n   * It receives the `open` and `onOpenChange` prop, can be lazy loaded with `next/dynamic`\n   */\n  SearchDialog: ComponentType<SharedProps>;\n\n  /**\n   * Additional props to the dialog\n   */\n  options?: Partial<SharedProps & Record<string, unknown>>;\n\n  children?: ReactNode;\n}\n\ninterface SearchContextType {\n  enabled: boolean;\n  hotKey: HotKey[];\n  setOpenSearch: (value: boolean) => void;\n}\n\nconst SearchContext = createContext<SearchContextType>({\n  enabled: false,\n  hotKey: [],\n  setOpenSearch: () => undefined,\n});\n\nexport function useSearchContext(): SearchContextType {\n  return use(SearchContext);\n}\n\nfunction MetaOrControl() {\n  const [key, setKey] = useState('⌘');\n\n  useEffect(() => {\n    const isWindows = window.navigator.userAgent.includes('Windows');\n\n    if (isWindows) setKey('Ctrl');\n  }, []);\n\n  return key;\n}\n\nexport function SearchProvider({\n  SearchDialog,\n  children,\n  preload = true,\n  options,\n  hotKey = [\n    {\n      key: (e) => e.metaKey || e.ctrlKey,\n      display: <MetaOrControl />,\n    },\n    {\n      key: 'k',\n      display: 'K',\n    },\n  ],\n  links,\n}: SearchProviderProps) {\n  const [isOpen, setIsOpen] = useState(preload ? false : undefined);\n  const onKeyDown = useEffectEvent((e: KeyboardEvent) => {\n    if (hotKey.every((v) => (typeof v.key === 'string' ? e.key === v.key : v.key(e)))) {\n      setIsOpen((open) => !open);\n      e.preventDefault();\n    }\n  });\n\n  useEffect(() => {\n    window.addEventListener('keydown', onKeyDown);\n    return () => {\n      window.removeEventListener('keydown', onKeyDown);\n    };\n  }, [hotKey]);\n\n  return (\n    <SearchContext\n      value={useMemo(\n        () => ({\n          enabled: true,\n          hotKey,\n          setOpenSearch: setIsOpen,\n        }),\n        [hotKey],\n      )}\n    >\n      {isOpen !== undefined && (\n        <Suspense fallback={null}>\n          <SearchDialog\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            // @ts-expect-error -- insert prop for official UIs\n            links={links}\n            {...options}\n          />\n        </Suspense>\n      )}\n\n      {children}\n    </SearchContext>\n  );\n}\n\n/**\n * Show children only when search is enabled via React Context\n */\nexport function SearchOnly({ children }: { children: ReactNode }) {\n  const search = useSearchContext();\n\n  if (search.enabled) return children;\n}\n"],"mappings":";;;;;;AA2EA,MAAM,gBAAgB,cAAiC;CACrD,SAAS;CACT,QAAQ,EAAE;CACV,qBAAqB;CACtB,CAAC;AAEF,SAAgB,mBAAsC;AACpD,QAAO,IAAI,cAAc;;AAG3B,SAAS,gBAAgB;CACvB,MAAM,CAAC,KAAK,UAAU,SAAS,IAAI;AAEnC,iBAAgB;AAGd,MAFkB,OAAO,UAAU,UAAU,SAAS,UAAU,CAEjD,QAAO,OAAO;IAC5B,EAAE,CAAC;AAEN,QAAO;;AAGT,SAAgB,eAAe,EAC7B,cACA,UACA,UAAU,MACV,SACA,SAAS,CACP;CACE,MAAM,MAAM,EAAE,WAAW,EAAE;CAC3B,SAAS,oBAAC,kBAAgB;CAC3B,EACD;CACE,KAAK;CACL,SAAS;CACV,CACF,EACD,SACsB;CACtB,MAAM,CAAC,QAAQ,aAAa,SAAS,UAAU,QAAQ,OAAU;CACjE,MAAM,YAAY,gBAAgB,MAAqB;AACrD,MAAI,OAAO,OAAO,MAAO,OAAO,EAAE,QAAQ,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,CAAE,EAAE;AACjF,cAAW,SAAS,CAAC,KAAK;AAC1B,KAAE,gBAAgB;;GAEpB;AAEF,iBAAgB;AACd,SAAO,iBAAiB,WAAW,UAAU;AAC7C,eAAa;AACX,UAAO,oBAAoB,WAAW,UAAU;;IAEjD,CAAC,OAAO,CAAC;AAEZ,QACE,qBAAC;EACC,OAAO,eACE;GACL,SAAS;GACT;GACA,eAAe;GAChB,GACD,CAAC,OAAO,CACT;aAEA,WAAW,UACV,oBAAC;GAAS,UAAU;aAClB,oBAAC;IACC,MAAM;IACN,cAAc;IAEP;IACP,GAAI;KACJ;IACO,EAGZ;GACa;;;;;AAOpB,SAAgB,WAAW,EAAE,YAAqC;AAGhE,KAFe,kBAAkB,CAEtB,QAAS,QAAO"}
+{"version":3,"file":"search.js","names":[],"sources":["../../src/contexts/search.tsx"],"sourcesContent":["'use client';\nimport {\n  type ComponentType,\n  createContext,\n  type ReactNode,\n  Suspense,\n  use,\n  useEffect,\n  useEffectEvent,\n  useMemo,\n  useState,\n} from 'react';\n\ninterface HotKey {\n  display: ReactNode;\n\n  /**\n   * Key code or a function determining whether the key is pressed.\n   */\n  key: string | ((e: KeyboardEvent) => boolean);\n}\n\nexport interface SharedProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}\n\nexport type SearchLink = [name: string, href: string];\n\nexport interface TagItem {\n  name: string;\n  value: string;\n}\n\nexport interface SearchProviderProps {\n  /**\n   * Preload search dialog before opening it\n   *\n   * @defaultValue `true`\n   */\n  preload?: boolean;\n\n  /**\n   * Custom links to be displayed if search is empty\n   */\n  links?: SearchLink[];\n\n  /**\n   * Hotkeys for triggering search dialog\n   *\n   * @defaultValue Meta/Ctrl + K\n   */\n  hotKey?: HotKey[];\n\n  /**\n   * Replace default search dialog, allowing you to use other solutions such as Algolia Search\n   *\n   * It receives the `open` and `onOpenChange` prop, can be lazy loaded with `next/dynamic`\n   */\n  SearchDialog: ComponentType<SharedProps>;\n\n  /**\n   * Additional props to the dialog\n   */\n  options?: Partial<SharedProps & Record<string, unknown>>;\n\n  children?: ReactNode;\n}\n\ninterface SearchContextType {\n  enabled: boolean;\n  open: boolean;\n  hotKey: HotKey[];\n  setOpenSearch: (value: boolean) => void;\n}\n\nconst SearchContext = createContext<SearchContextType>({\n  enabled: false,\n  open: false,\n  hotKey: [],\n  setOpenSearch: () => undefined,\n});\n\nexport function useSearchContext(): SearchContextType {\n  return use(SearchContext);\n}\n\nfunction MetaOrControl() {\n  const [key, setKey] = useState('⌘');\n\n  useEffect(() => {\n    const isWindows = window.navigator.userAgent.includes('Windows');\n\n    if (isWindows) setKey('Ctrl');\n  }, []);\n\n  return key;\n}\n\nexport function SearchProvider({\n  SearchDialog,\n  children,\n  preload = true,\n  options,\n  hotKey = [\n    {\n      key: (e) => e.metaKey || e.ctrlKey,\n      display: <MetaOrControl />,\n    },\n    {\n      key: 'k',\n      display: 'K',\n    },\n  ],\n  links,\n}: SearchProviderProps) {\n  const [isOpen, setIsOpen] = useState(preload ? false : undefined);\n  const onKeyDown = useEffectEvent((e: KeyboardEvent) => {\n    if (hotKey.every((v) => (typeof v.key === 'string' ? e.key === v.key : v.key(e)))) {\n      setIsOpen((open) => !open);\n      e.preventDefault();\n    }\n  });\n\n  useEffect(() => {\n    window.addEventListener('keydown', onKeyDown);\n    return () => {\n      window.removeEventListener('keydown', onKeyDown);\n    };\n  }, [hotKey]);\n\n  return (\n    <SearchContext\n      value={useMemo(\n        () => ({\n          enabled: true,\n          open: isOpen ?? false,\n          hotKey,\n          setOpenSearch: setIsOpen,\n        }),\n        [isOpen, hotKey],\n      )}\n    >\n      {isOpen !== undefined && (\n        <Suspense fallback={null}>\n          <SearchDialog\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            // @ts-expect-error -- insert prop for official UIs\n            links={links}\n            {...options}\n          />\n        </Suspense>\n      )}\n\n      {children}\n    </SearchContext>\n  );\n}\n\n/**\n * Show children only when search is enabled via React Context\n */\nexport function SearchOnly({ children }: { children: ReactNode }) {\n  const search = useSearchContext();\n\n  if (search.enabled) return children;\n}\n"],"mappings":";;;;;;AA4EA,MAAM,gBAAgB,cAAiC;CACrD,SAAS;CACT,MAAM;CACN,QAAQ,EAAE;CACV,qBAAqB;CACtB,CAAC;AAEF,SAAgB,mBAAsC;AACpD,QAAO,IAAI,cAAc;;AAG3B,SAAS,gBAAgB;CACvB,MAAM,CAAC,KAAK,UAAU,SAAS,IAAI;AAEnC,iBAAgB;AAGd,MAFkB,OAAO,UAAU,UAAU,SAAS,UAAU,CAEjD,QAAO,OAAO;IAC5B,EAAE,CAAC;AAEN,QAAO;;AAGT,SAAgB,eAAe,EAC7B,cACA,UACA,UAAU,MACV,SACA,SAAS,CACP;CACE,MAAM,MAAM,EAAE,WAAW,EAAE;CAC3B,SAAS,oBAAC,kBAAgB;CAC3B,EACD;CACE,KAAK;CACL,SAAS;CACV,CACF,EACD,SACsB;CACtB,MAAM,CAAC,QAAQ,aAAa,SAAS,UAAU,QAAQ,OAAU;CACjE,MAAM,YAAY,gBAAgB,MAAqB;AACrD,MAAI,OAAO,OAAO,MAAO,OAAO,EAAE,QAAQ,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,CAAE,EAAE;AACjF,cAAW,SAAS,CAAC,KAAK;AAC1B,KAAE,gBAAgB;;GAEpB;AAEF,iBAAgB;AACd,SAAO,iBAAiB,WAAW,UAAU;AAC7C,eAAa;AACX,UAAO,oBAAoB,WAAW,UAAU;;IAEjD,CAAC,OAAO,CAAC;AAEZ,QACE,qBAAC;EACC,OAAO,eACE;GACL,SAAS;GACT,MAAM,UAAU;GAChB;GACA,eAAe;GAChB,GACD,CAAC,QAAQ,OAAO,CACjB;aAEA,WAAW,UACV,oBAAC;GAAS,UAAU;aAClB,oBAAC;IACC,MAAM;IACN,cAAc;IAEP;IACP,GAAI;KACJ;IACO,EAGZ;GACa;;;;;AAOpB,SAAgB,WAAW,EAAE,YAAqC;AAGhE,KAFe,kBAAkB,CAEtB,QAAS,QAAO"}

package/dist/layouts/flux/index.d.ts

@@ -58,7 +58,6 @@ declare function NavigationPanel({
   tabDropdown,
   tool,
   link,
-  className,
   children,
   ...props
 }: NavigationPanelProps & Omit<ComponentProps<typeof motion.div>, 'children'> & {

package/dist/layouts/flux/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/layouts/flux/index.tsx"],"mappings":";;;;;;;;;;;UAqBiB,eAAA,SAAwB,eAAA;EACvC,IAAA,EAAM,QAAA,CAAS,IAAA;EAEf,OAAA,GAAU,cAAA;EAHK;;;EAQf,cAAA,GAAiB,cAAA,CAAe,cAAA;EAEhC,qBAAA,IAAyB,KAAA,EAAO,oBAAA,KAAyB,SAAA;AAAA;AAAA,UAGjD,cAAA,SAEN,cAAA,WACA,IAAA,CAAK,cAAA,QAAsB,OAAA;EAC7B,OAAA;EACA,SAAA,GAAY,SAAA;EACZ,UAAA,GAAa,OAAA,CAAQ,yBAAA;EAnBiC;;;EAwBtD,IAAA,GAAO,mBAAA,KAAwB,qBAAA;EAE/B,MAAA,GAAS,SAAA;EACT,MAAA,GAAS,SAAA;AAAA;AAAA,iBAGK,UAAA,CAAA;EACd,IAAA;EACA,GAAA;EACA,OAAA;IACE,OAAA,EAAS,cAAA;IACT,IAAA,EAAM,WAAA;IACN,gBAAA;IACA,QAAA;IAAA,GACG;EAAA;EAEL,YAAA;EACA,WAAA;EACA,IAAA;EACA,QAAA;EACA,cAAA;EACA,qBAAA;EAAA,GACG;AAAA,GACF,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,UAuID,oBAAA;EACf,IAAA,EAAM,SAAA;EACN,WAAA,EAAa,SAAA;EACb,IAAA,EAAM,SAAA;EACN,IAAA,EAAM,SAAA;AAAA;AAAA,iBAGQ,eAAA,CAAA;EACd,IAAA;EACA,WAAA;EACA,IAAA;EACA,IAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,oBAAA,GACD,IAAA,CAAK,cAAA,QAAsB,MAAA,CAAO,GAAA;EA5LgC;;AACnE;EA+LG,QAAA,IAAY,eAAA,EAAiB,SAAA,KAAc,SAAA;AAAA,IAC5C,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiCa,sBAAA,CAAA;EACd,OAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,MAAA,CAAO,GAAA;EAAS,OAAA;AAAA,IAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/layouts/flux/index.tsx"],"mappings":";;;;;;;;;;;UAsBiB,eAAA,SAAwB,eAAA;EACvC,IAAA,EAAM,QAAA,CAAS,IAAA;EAEf,OAAA,GAAU,cAAA;EAHK;;;EAQf,cAAA,GAAiB,cAAA,CAAe,cAAA;EAEhC,qBAAA,IAAyB,KAAA,EAAO,oBAAA,KAAyB,SAAA;AAAA;AAAA,UAGjD,cAAA,SAEN,cAAA,WACA,IAAA,CAAK,cAAA,QAAsB,OAAA;EAC7B,OAAA;EACA,SAAA,GAAY,SAAA;EACZ,UAAA,GAAa,OAAA,CAAQ,yBAAA;EAnBiC;;;EAwBtD,IAAA,GAAO,mBAAA,KAAwB,qBAAA;EAE/B,MAAA,GAAS,SAAA;EACT,MAAA,GAAS,SAAA;AAAA;AAAA,iBAGK,UAAA,CAAA;EACd,IAAA;EACA,GAAA;EACA,OAAA;IACE,OAAA,EAAS,cAAA;IACT,IAAA,EAAM,WAAA;IACN,gBAAA;IACA,QAAA;IAAA,GACG;EAAA;EAEL,YAAA;EACA,WAAA;EACA,IAAA;EACA,QAAA;EACA,cAAA;EACA,qBAAA;EAAA,GACG;AAAA,GACF,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,UAuID,oBAAA;EACf,IAAA,EAAM,SAAA;EACN,WAAA,EAAa,SAAA;EACb,IAAA,EAAM,SAAA;EACN,IAAA,EAAM,SAAA;AAAA;AAAA,iBAGQ,eAAA,CAAA;EACd,IAAA;EACA,WAAA;EACA,IAAA;EACA,IAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,oBAAA,GACD,IAAA,CAAK,cAAA,QAAsB,MAAA,CAAO,GAAA;EA3LgC;;AACnE;EA8LG,QAAA,IAAY,eAAA,EAAiB,SAAA,KAAc,SAAA;AAAA,IAC5C,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAyCa,sBAAA,CAAA;EACd,OAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,MAAA,CAAO,GAAA;EAAS,OAAA;AAAA,IAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/layouts/flux/index.js

@@ -5,6 +5,7 @@ import { buttonVariants } from "../../components/ui/button.js";
 import { TreeContextProvider } from "../../contexts/tree.js";
 import { SidebarViewport, useSidebar } from "../../components/sidebar/base.js";
 import { LinkItem } from "../../utils/link-item.js";
+import { useSearchContext } from "../../contexts/search.js";
 import { SearchToggle } from "../shared/search-toggle.js";
 import { renderTitleNav, useLinkItems } from "../shared/index.js";
 import { LanguageToggle } from "../shared/language-toggle.js";
@@ -117,10 +118,16 @@ function NavigationSidebarTrigger() {
 		})
 	});
 }
-function NavigationPanel({ head, tabDropdown, tool, link, className, children = (v) => v, ...props }) {
+function NavigationPanel({ head, tabDropdown, tool, link, children = (v) => v, ...props }) {
+	const { open } = useSearchContext();
 	return /* @__PURE__ */ jsx(motion.div, {
-		className: cn("fixed left-1/2 w-[calc(100%-var(--removed-body-scroll-bar-size,0px))] translate-x-[calc(-50%-var(--removed-body-scroll-bar-size,0px)/2)] bottom-0 z-40 bg-fd-popover text-fd-popover-foreground border-t shadow-lg sm:bottom-6 sm:rounded-2xl sm:border sm:max-w-[380px]", className),
 		...props,
+		className: cn("fixed left-1/2 w-[calc(100%-var(--removed-body-scroll-bar-size,0px))] translate-x-[calc(-50%-var(--removed-body-scroll-bar-size,0px)/2)] bottom-0 z-40 bg-fd-popover text-fd-popover-foreground border-t shadow-lg sm:bottom-6 sm:rounded-2xl sm:border sm:max-w-[380px]", props.className),
+		animate: props.animate ?? {
+			scale: open ? .9 : 1,
+			translateY: open ? 20 : 0,
+			opacity: open ? .8 : 1
+		},
 		children: children(/* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-row items-center ps-2.5 p-1 gap-2 min-h-11",
 			children: [head, /* @__PURE__ */ jsx("div", {

package/dist/layouts/flux/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Sidebar"],"sources":["../../../src/layouts/flux/index.tsx"],"sourcesContent":["'use client';\nimport type * as PageTree from 'fumadocs-core/page-tree';\nimport type { BaseLayoutProps } from '@/layouts/shared';\nimport { TreeContextProvider } from '@/contexts/tree';\nimport { getSidebarTabs, type GetSidebarTabsOptions } from '@/components/sidebar/tabs';\nimport type { SidebarPageTreeComponents } from '@/components/sidebar/page-tree';\nimport { type ComponentProps, HTMLAttributes, type ReactNode, useMemo } from 'react';\nimport { cn } from '@/utils/cn';\nimport { SidebarViewport, useSidebar } from '@/components/sidebar/base';\nimport { SidebarTabsDropdown, type SidebarTabWithProps } from './tab-dropdown';\nimport { Sidebar, SidebarContent, SidebarLinkItem, SidebarPageTree } from './sidebar';\nimport { buttonVariants } from '@/components/ui/button';\nimport { Languages, SidebarIcon, XIcon } from 'lucide-react';\nimport { renderTitleNav, useLinkItems } from '../shared';\nimport { LanguageToggle } from '../shared/language-toggle';\nimport { SearchToggle } from '../shared/search-toggle';\nimport { ThemeToggle } from '../shared/theme-toggle';\nimport { LinkItem } from '@/utils/link-item';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { RemoveScroll } from 'react-remove-scroll';\n\nexport interface DocsLayoutProps extends BaseLayoutProps {\n  tree: PageTree.Root;\n\n  sidebar?: SidebarOptions;\n\n  /**\n   * Props for the `div` container\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n\n  renderNavigationPanel?: (props: NavigationPanelProps) => ReactNode;\n}\n\ninterface SidebarOptions\n  extends\n    ComponentProps<'aside'>,\n    Pick<ComponentProps<typeof Sidebar>, 'defaultOpenLevel' | 'prefetch'> {\n  enabled?: boolean;\n  component?: ReactNode;\n  components?: Partial<SidebarPageTreeComponents>;\n\n  /**\n   * Root Toggle options\n   */\n  tabs?: SidebarTabWithProps[] | GetSidebarTabsOptions | false;\n\n  banner?: ReactNode;\n  footer?: ReactNode;\n}\n\nexport function DocsLayout({\n  tree,\n  nav = {},\n  sidebar: {\n    enabled: sidebarEnabled = true,\n    tabs: sidebarTabs,\n    defaultOpenLevel,\n    prefetch,\n    ...sidebarProps\n  } = {},\n  searchToggle = {},\n  themeSwitch = {},\n  i18n = false,\n  children,\n  containerProps,\n  renderNavigationPanel = (props) => <NavigationPanel {...props} />,\n  ...props\n}: DocsLayoutProps) {\n  const tabs = useMemo(() => {\n    if (Array.isArray(sidebarTabs)) {\n      return sidebarTabs;\n    }\n    if (typeof sidebarTabs === 'object') {\n      return getSidebarTabs(tree, sidebarTabs);\n    }\n    if (sidebarTabs !== false) {\n      return getSidebarTabs(tree);\n    }\n    return [];\n  }, [tree, sidebarTabs]);\n  const { menuItems } = useLinkItems(props);\n  const iconLinks = menuItems.filter((item) => item.type === 'icon');\n\n  function sidebar() {\n    const { footer, banner, component, components, ...rest } = sidebarProps;\n    if (component) return component;\n\n    return (\n      <SidebarContent {...rest}>\n        <div className=\"flex flex-col gap-3 p-4 pb-2 empty:hidden\">{banner}</div>\n        <SidebarViewport>\n          {menuItems\n            .filter((v) => v.type !== 'icon')\n            .map((item, i, list) => (\n              <SidebarLinkItem\n                key={i}\n                item={item}\n                className={cn(i === list.length - 1 && 'mb-4')}\n              />\n            ))}\n          <SidebarPageTree {...components} />\n        </SidebarViewport>\n        {footer}\n      </SidebarContent>\n    );\n  }\n\n  return (\n    <TreeContextProvider tree={tree}>\n      <Sidebar defaultOpenLevel={defaultOpenLevel} prefetch={prefetch}>\n        <div\n          id=\"nd-flux-layout\"\n          {...containerProps}\n          className={cn(\n            'flex flex-col items-center pb-24 overflow-x-clip',\n            containerProps?.className,\n          )}\n        >\n          {sidebarEnabled && sidebar()}\n          {children}\n        </div>\n        {renderNavigationPanel({\n          head: renderTitleNav(nav, {\n            className: 'inline-flex items-center gap-2.5 text-sm font-semibold',\n          }),\n          tabDropdown: tabs.length > 0 && <SidebarTabsDropdown className=\"flex-1\" options={tabs} />,\n          tool: (\n            <>\n              {i18n && (\n                <LanguageToggle>\n                  <Languages className=\"size-4.5\" />\n                </LanguageToggle>\n              )}\n\n              {searchToggle.enabled !== false &&\n                (searchToggle.components?.sm ?? (\n                  <SearchToggle className=\"rounded-lg\" hideIfDisabled />\n                ))}\n\n              <NavigationSidebarTrigger />\n              {themeSwitch.enabled !== false &&\n                (themeSwitch.component ?? (\n                  <ThemeToggle\n                    className=\"px-1 py-0 h-full ms-1 rounded-xl bg-fd-muted *:rounded-lg\"\n                    mode={themeSwitch.mode}\n                  />\n                ))}\n            </>\n          ),\n          link: iconLinks.map((item, i) => (\n            <LinkItem\n              key={i}\n              item={item}\n              className={cn(buttonVariants({ size: 'icon-sm', color: 'ghost' }))}\n              aria-label={item.label}\n            >\n              {item.icon}\n            </LinkItem>\n          )),\n        })}\n      </Sidebar>\n    </TreeContextProvider>\n  );\n}\n\nfunction NavigationSidebarTrigger() {\n  const { open, setOpen } = useSidebar();\n  return (\n    <button\n      className={cn(\n        buttonVariants({\n          variant: 'ghost',\n          size: 'icon-sm',\n          className: 'overflow-hidden',\n        }),\n      )}\n      onClick={() => setOpen((prev) => !prev)}\n    >\n      <AnimatePresence mode=\"wait\">\n        <motion.span\n          key={open ? 'open' : 'closed'}\n          transition={{ duration: 0.2 }}\n          initial={{\n            y: '100%',\n            opacity: 0,\n          }}\n          animate={{\n            y: 0,\n            opacity: 1,\n          }}\n          exit={{\n            y: '100%',\n            opacity: 0,\n          }}\n        >\n          {open ? <XIcon /> : <SidebarIcon />}\n        </motion.span>\n      </AnimatePresence>\n    </button>\n  );\n}\n\nexport interface NavigationPanelProps {\n  head: ReactNode;\n  tabDropdown: ReactNode;\n  tool: ReactNode;\n  link: ReactNode;\n}\n\nexport function NavigationPanel({\n  head,\n  tabDropdown,\n  tool,\n  link,\n  className,\n  children = (v) => v,\n  ...props\n}: NavigationPanelProps &\n  Omit<ComponentProps<typeof motion.div>, 'children'> & {\n    /**\n     * replace default children\n     */\n    children?: (defaultChildren: ReactNode) => ReactNode;\n  }) {\n  return (\n    <motion.div\n      className={cn(\n        'fixed left-1/2 w-[calc(100%-var(--removed-body-scroll-bar-size,0px))] translate-x-[calc(-50%-var(--removed-body-scroll-bar-size,0px)/2)] bottom-0 z-40 bg-fd-popover text-fd-popover-foreground border-t shadow-lg sm:bottom-6 sm:rounded-2xl sm:border sm:max-w-[380px]',\n        className,\n      )}\n      {...props}\n    >\n      {children(\n        <>\n          <div className=\"flex flex-row items-center ps-2.5 p-1 gap-2 min-h-11\">\n            {head}\n            <div id=\"flux-layout-slot\" className=\"flex-1\" />\n          </div>\n\n          <div className=\"flex flex-row gap-1.5 overflow-x-auto overflow-y-hidden p-2 sm:p-1\">\n            <div className=\"flex flex-row items-center gap-2 min-w-0 flex-1\">{tabDropdown}</div>\n\n            <div className=\"flex flex-row items-center text-fd-muted-foreground border-x px-0.5 empty:hidden\">\n              {link}\n            </div>\n\n            <div className=\"flex flex-row items-center text-fd-muted-foreground empty:hidden\">\n              {tool}\n            </div>\n          </div>\n        </>,\n      )}\n    </motion.div>\n  );\n}\n\nexport function NavigationPanelOverlay({\n  enabled = false,\n  className,\n  ...props\n}: ComponentProps<typeof motion.div> & { enabled?: boolean }) {\n  return (\n    <RemoveScroll enabled={enabled}>\n      <motion.div\n        className={cn(\n          'fixed inset-0 z-30 pr-(--removed-body-scroll-bar-size,0) backdrop-blur-md bg-fd-background/60',\n          !enabled && 'pointer-events-none',\n          className,\n        )}\n        initial=\"hide\"\n        variants={{\n          show: {\n            opacity: 1,\n          },\n          hide: {\n            opacity: 0,\n          },\n        }}\n        animate={enabled ? 'show' : 'hide'}\n        exit=\"hide\"\n        {...props}\n      />\n    </RemoveScroll>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Sidebar"],"sources":["../../../src/layouts/flux/index.tsx"],"sourcesContent":["'use client';\nimport type * as PageTree from 'fumadocs-core/page-tree';\nimport type { BaseLayoutProps } from '@/layouts/shared';\nimport { TreeContextProvider } from '@/contexts/tree';\nimport { getSidebarTabs, type GetSidebarTabsOptions } from '@/components/sidebar/tabs';\nimport type { SidebarPageTreeComponents } from '@/components/sidebar/page-tree';\nimport { type ComponentProps, HTMLAttributes, type ReactNode, useMemo } from 'react';\nimport { cn } from '@/utils/cn';\nimport { SidebarViewport, useSidebar } from '@/components/sidebar/base';\nimport { SidebarTabsDropdown, type SidebarTabWithProps } from './tab-dropdown';\nimport { Sidebar, SidebarContent, SidebarLinkItem, SidebarPageTree } from './sidebar';\nimport { buttonVariants } from '@/components/ui/button';\nimport { Languages, SidebarIcon, XIcon } from 'lucide-react';\nimport { renderTitleNav, useLinkItems } from '../shared';\nimport { LanguageToggle } from '../shared/language-toggle';\nimport { SearchToggle } from '../shared/search-toggle';\nimport { ThemeToggle } from '../shared/theme-toggle';\nimport { LinkItem } from '@/utils/link-item';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { RemoveScroll } from 'react-remove-scroll';\nimport { useSearchContext } from '@/contexts/search';\n\nexport interface DocsLayoutProps extends BaseLayoutProps {\n  tree: PageTree.Root;\n\n  sidebar?: SidebarOptions;\n\n  /**\n   * Props for the `div` container\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n\n  renderNavigationPanel?: (props: NavigationPanelProps) => ReactNode;\n}\n\ninterface SidebarOptions\n  extends\n    ComponentProps<'aside'>,\n    Pick<ComponentProps<typeof Sidebar>, 'defaultOpenLevel' | 'prefetch'> {\n  enabled?: boolean;\n  component?: ReactNode;\n  components?: Partial<SidebarPageTreeComponents>;\n\n  /**\n   * Root Toggle options\n   */\n  tabs?: SidebarTabWithProps[] | GetSidebarTabsOptions | false;\n\n  banner?: ReactNode;\n  footer?: ReactNode;\n}\n\nexport function DocsLayout({\n  tree,\n  nav = {},\n  sidebar: {\n    enabled: sidebarEnabled = true,\n    tabs: sidebarTabs,\n    defaultOpenLevel,\n    prefetch,\n    ...sidebarProps\n  } = {},\n  searchToggle = {},\n  themeSwitch = {},\n  i18n = false,\n  children,\n  containerProps,\n  renderNavigationPanel = (props) => <NavigationPanel {...props} />,\n  ...props\n}: DocsLayoutProps) {\n  const tabs = useMemo(() => {\n    if (Array.isArray(sidebarTabs)) {\n      return sidebarTabs;\n    }\n    if (typeof sidebarTabs === 'object') {\n      return getSidebarTabs(tree, sidebarTabs);\n    }\n    if (sidebarTabs !== false) {\n      return getSidebarTabs(tree);\n    }\n    return [];\n  }, [tree, sidebarTabs]);\n  const { menuItems } = useLinkItems(props);\n  const iconLinks = menuItems.filter((item) => item.type === 'icon');\n\n  function sidebar() {\n    const { footer, banner, component, components, ...rest } = sidebarProps;\n    if (component) return component;\n\n    return (\n      <SidebarContent {...rest}>\n        <div className=\"flex flex-col gap-3 p-4 pb-2 empty:hidden\">{banner}</div>\n        <SidebarViewport>\n          {menuItems\n            .filter((v) => v.type !== 'icon')\n            .map((item, i, list) => (\n              <SidebarLinkItem\n                key={i}\n                item={item}\n                className={cn(i === list.length - 1 && 'mb-4')}\n              />\n            ))}\n          <SidebarPageTree {...components} />\n        </SidebarViewport>\n        {footer}\n      </SidebarContent>\n    );\n  }\n\n  return (\n    <TreeContextProvider tree={tree}>\n      <Sidebar defaultOpenLevel={defaultOpenLevel} prefetch={prefetch}>\n        <div\n          id=\"nd-flux-layout\"\n          {...containerProps}\n          className={cn(\n            'flex flex-col items-center pb-24 overflow-x-clip',\n            containerProps?.className,\n          )}\n        >\n          {sidebarEnabled && sidebar()}\n          {children}\n        </div>\n        {renderNavigationPanel({\n          head: renderTitleNav(nav, {\n            className: 'inline-flex items-center gap-2.5 text-sm font-semibold',\n          }),\n          tabDropdown: tabs.length > 0 && <SidebarTabsDropdown className=\"flex-1\" options={tabs} />,\n          tool: (\n            <>\n              {i18n && (\n                <LanguageToggle>\n                  <Languages className=\"size-4.5\" />\n                </LanguageToggle>\n              )}\n\n              {searchToggle.enabled !== false &&\n                (searchToggle.components?.sm ?? (\n                  <SearchToggle className=\"rounded-lg\" hideIfDisabled />\n                ))}\n\n              <NavigationSidebarTrigger />\n              {themeSwitch.enabled !== false &&\n                (themeSwitch.component ?? (\n                  <ThemeToggle\n                    className=\"px-1 py-0 h-full ms-1 rounded-xl bg-fd-muted *:rounded-lg\"\n                    mode={themeSwitch.mode}\n                  />\n                ))}\n            </>\n          ),\n          link: iconLinks.map((item, i) => (\n            <LinkItem\n              key={i}\n              item={item}\n              className={cn(buttonVariants({ size: 'icon-sm', color: 'ghost' }))}\n              aria-label={item.label}\n            >\n              {item.icon}\n            </LinkItem>\n          )),\n        })}\n      </Sidebar>\n    </TreeContextProvider>\n  );\n}\n\nfunction NavigationSidebarTrigger() {\n  const { open, setOpen } = useSidebar();\n  return (\n    <button\n      className={cn(\n        buttonVariants({\n          variant: 'ghost',\n          size: 'icon-sm',\n          className: 'overflow-hidden',\n        }),\n      )}\n      onClick={() => setOpen((prev) => !prev)}\n    >\n      <AnimatePresence mode=\"wait\">\n        <motion.span\n          key={open ? 'open' : 'closed'}\n          transition={{ duration: 0.2 }}\n          initial={{\n            y: '100%',\n            opacity: 0,\n          }}\n          animate={{\n            y: 0,\n            opacity: 1,\n          }}\n          exit={{\n            y: '100%',\n            opacity: 0,\n          }}\n        >\n          {open ? <XIcon /> : <SidebarIcon />}\n        </motion.span>\n      </AnimatePresence>\n    </button>\n  );\n}\n\nexport interface NavigationPanelProps {\n  head: ReactNode;\n  tabDropdown: ReactNode;\n  tool: ReactNode;\n  link: ReactNode;\n}\n\nexport function NavigationPanel({\n  head,\n  tabDropdown,\n  tool,\n  link,\n  children = (v) => v,\n  ...props\n}: NavigationPanelProps &\n  Omit<ComponentProps<typeof motion.div>, 'children'> & {\n    /**\n     * replace default children\n     */\n    children?: (defaultChildren: ReactNode) => ReactNode;\n  }) {\n  const { open } = useSearchContext();\n  return (\n    <motion.div\n      {...props}\n      className={cn(\n        'fixed left-1/2 w-[calc(100%-var(--removed-body-scroll-bar-size,0px))] translate-x-[calc(-50%-var(--removed-body-scroll-bar-size,0px)/2)] bottom-0 z-40 bg-fd-popover text-fd-popover-foreground border-t shadow-lg sm:bottom-6 sm:rounded-2xl sm:border sm:max-w-[380px]',\n        props.className,\n      )}\n      animate={\n        props.animate ?? {\n          scale: open ? 0.9 : 1,\n          translateY: open ? 20 : 0,\n          opacity: open ? 0.8 : 1,\n        }\n      }\n    >\n      {children(\n        <>\n          <div className=\"flex flex-row items-center ps-2.5 p-1 gap-2 min-h-11\">\n            {head}\n            <div id=\"flux-layout-slot\" className=\"flex-1\" />\n          </div>\n\n          <div className=\"flex flex-row gap-1.5 overflow-x-auto overflow-y-hidden p-2 sm:p-1\">\n            <div className=\"flex flex-row items-center gap-2 min-w-0 flex-1\">{tabDropdown}</div>\n\n            <div className=\"flex flex-row items-center text-fd-muted-foreground border-x px-0.5 empty:hidden\">\n              {link}\n            </div>\n\n            <div className=\"flex flex-row items-center text-fd-muted-foreground empty:hidden\">\n              {tool}\n            </div>\n          </div>\n        </>,\n      )}\n    </motion.div>\n  );\n}\n\nexport function NavigationPanelOverlay({\n  enabled = false,\n  className,\n  ...props\n}: ComponentProps<typeof motion.div> & { enabled?: boolean }) {\n  return (\n    <RemoveScroll enabled={enabled}>\n      <motion.div\n        className={cn(\n          'fixed inset-0 z-30 pr-(--removed-body-scroll-bar-size,0) backdrop-blur-md bg-fd-background/60',\n          !enabled && 'pointer-events-none',\n          className,\n        )}\n        initial=\"hide\"\n        variants={{\n          show: {\n            opacity: 1,\n          },\n          hide: {\n            opacity: 0,\n          },\n        }}\n        animate={enabled ? 'show' : 'hide'}\n        exit=\"hide\"\n        {...props}\n      />\n    </RemoveScroll>\n  );\n}\n"],"mappings":"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"}

package/dist/layouts/flux/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","names":[],"sources":["../../../src/layouts/flux/sidebar.tsx"],"mappings":";;;;;;;;;iBAoCgB,OAAA,CAAQ,KAAA,EAAO,cAAA,QAAsB,eAAA,IAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI1D,aAAA,CAAc,KAAA,EAAO,cAAA,QAAsB,eAAA,IAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI9D,sBAAA,CAAuB,KAAA,EAAO,cAAA,QAAsB,wBAAA,IAA4B,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIhF,eAAA,CAAgB,KAAA,EAAO,cAAA,QAAsB,iBAAA,IAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIlE,cAAA,CAAe,KAAA,EAAO,cAAA,QAAsB,gBAAA,IAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIhE,cAAA,CAAA;EACd,GAAA,EAAK,OAAA;EACL,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,cAAA,YAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA0EV,gBAAA,CAAA;EAAmB,SAAA;EAAW,KAAA;EAAO,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,QAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiB9E,WAAA,CAAA;EACd,SAAA;EACA,KAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,aAAA,IAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiB1B,oBAAA,CAAA;EACd,SAAA;EACA,KAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,sBAAA,IAA0B,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAuBnC,iBAAA,CAAA;EACd,SAAA;EACA,KAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,mBAAA,IAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiBhC,oBAAA,CAAA;EACd,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,sBAAA,IAA0B,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAoCtC,eAAA,GAAe,UAAA,EAAA,OAAA,CAO1B,yBAAA,MAP0B,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cASf,eAAA;EAAe,IAAA;EAAA,GAAA;AAAA,GAAA,KAAA,CAAA,cAAA,CAAA,WAAA;gBAAA,YAAA"}
+{"version":3,"file":"sidebar.d.ts","names":[],"sources":["../../../src/layouts/flux/sidebar.tsx"],"mappings":";;;;;;;;;iBAoCgB,OAAA,CAAQ,KAAA,EAAO,cAAA,QAAsB,eAAA,IAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI1D,aAAA,CAAc,KAAA,EAAO,cAAA,QAAsB,eAAA,IAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI9D,sBAAA,CAAuB,KAAA,EAAO,cAAA,QAAsB,wBAAA,IAA4B,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIhF,eAAA,CAAgB,KAAA,EAAO,cAAA,QAAsB,iBAAA,IAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIlE,cAAA,CAAe,KAAA,EAAO,cAAA,QAAsB,gBAAA,IAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIhE,cAAA,CAAA;EACd,GAAA,EAAK,OAAA;EACL,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,cAAA,YAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA6EV,gBAAA,CAAA;EAAmB,SAAA;EAAW,KAAA;EAAO,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,QAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiB9E,WAAA,CAAA;EACd,SAAA;EACA,KAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,aAAA,IAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiB1B,oBAAA,CAAA;EACd,SAAA;EACA,KAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,sBAAA,IAA0B,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAuBnC,iBAAA,CAAA;EACd,SAAA;EACA,KAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,mBAAA,IAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiBhC,oBAAA,CAAA;EACd,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,sBAAA,IAA0B,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAoCtC,eAAA,GAAe,UAAA,EAAA,OAAA,CAO1B,yBAAA,MAP0B,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cASf,eAAA;EAAe,IAAA;EAAA,GAAA;AAAA,GAAA,KAAA,CAAA,cAAA,CAAA,WAAA;gBAAA,YAAA"}

package/dist/layouts/flux/sidebar.js

@@ -5,7 +5,7 @@ import { mergeRefs } from "../../utils/merge-refs.js";
 import { SidebarCollapseTrigger as SidebarCollapseTrigger$1, SidebarFolder as SidebarFolder$1, SidebarFolderContent as SidebarFolderContent$1, SidebarFolderLink as SidebarFolderLink$1, SidebarFolderTrigger as SidebarFolderTrigger$1, SidebarItem as SidebarItem$1, SidebarProvider, SidebarSeparator as SidebarSeparator$1, SidebarTrigger as SidebarTrigger$1, SidebarViewport as SidebarViewport$1, useFolder, useFolderDepth, useSidebar } from "../../components/sidebar/base.js";
 import { createLinkItemRenderer } from "../../components/sidebar/link-item.js";
 import { createPageTreeRenderer } from "../../components/sidebar/page-tree.js";
-import { useEffect, useEffectEvent, useRef } from "react";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { motion } from "motion/react";
@@ -43,6 +43,7 @@ function SidebarTrigger(props) {
 }
 function SidebarContent({ ref: refProp, className, children, ...props }) {
 	const ref = useRef(null);
+	const [blockScroll, setBlockScroll] = useState(false);
 	const { open, setOpen } = useSidebar();
 	const listener = useEffectEvent((e) => {
 		if (open && e.key === "Escape") {
@@ -56,8 +57,9 @@ function SidebarContent({ ref: refProp, className, children, ...props }) {
 			window.removeEventListener("keydown", listener);
 		};
 	}, []);
+	if (open && !blockScroll) setBlockScroll(true);
 	return /* @__PURE__ */ jsx(RemoveScroll, {
-		enabled: open,
+		enabled: blockScroll,
 		children: /* @__PURE__ */ jsx(motion.div, {
 			className: cn("fixed inset-0 py-10 z-30 backdrop-blur-md bg-fd-background/60", !open && "pointer-events-none"),
 			initial: "hide",
@@ -70,8 +72,11 @@ function SidebarContent({ ref: refProp, className, children, ...props }) {
 			onClick: () => {
 				setOpen(false);
 			},
+			onAnimationComplete: (definition) => {
+				if (definition === "hide") setBlockScroll(false);
+			},
 			children: /* @__PURE__ */ jsx(motion.div, {
-				className: "absolute overflow-y-auto pr-(--removed-body-scroll-bar-size,0) [scrollbar-width:none] py-16 inset-0 bottom-26 overscroll-contain mask-[linear-gradient(to_bottom,transparent,white_calc(var(--spacing)*14),white_calc(100%-var(--spacing)*14),transparent)] lg:text-sm",
+				className: "absolute top-0 min-h-0 inset-x-0 bottom-26 overflow-y-auto fd-scroll-container pr-(--removed-body-scroll-bar-size,0) py-16 mask-[linear-gradient(to_bottom,transparent,white_--spacing(14),white_calc(100%---spacing(14)),transparent)] lg:text-sm",
 				variants: {
 					show: {
 						y: 0,
@@ -83,14 +88,13 @@ function SidebarContent({ ref: refProp, className, children, ...props }) {
 					}
 				},
 				transition: {
-					duration: .3,
+					duration: .4,
 					ease: [
 						.16,
 						1,
 						.3,
 						1
-					],
-					opacity: { duration: .1 }
+					]
 				},
 				children: /* @__PURE__ */ jsx(motion.aside, {
 					id: "nd-sidebar",

package/dist/layouts/flux/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","names":["Base.SidebarItem","Base.SidebarFolderTrigger","Base.SidebarFolderLink","Base.SidebarFolderContent","Base.SidebarProvider","Base.SidebarFolder","Base.SidebarCollapseTrigger","Base.SidebarViewport","Base.SidebarTrigger","Base.useSidebar","Base.useFolderDepth","Base.SidebarSeparator","Base.useFolder"],"sources":["../../../src/layouts/flux/sidebar.tsx"],"sourcesContent":["'use client';\nimport * as Base from '@/components/sidebar/base';\nimport { cn } from '@/utils/cn';\nimport { type ComponentProps, useEffect, useEffectEvent, useRef } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { createPageTreeRenderer } from '@/components/sidebar/page-tree';\nimport { createLinkItemRenderer } from '@/components/sidebar/link-item';\nimport { mergeRefs } from '@/utils/merge-refs';\nimport { motion } from 'motion/react';\nimport { RemoveScroll } from 'react-remove-scroll';\n\nconst MotionSidebarItem = motion.create(Base.SidebarItem);\nconst MotionSidebarFolderTrigger = motion.create(Base.SidebarFolderTrigger);\nconst MotionSidebarFolderLink = motion.create(Base.SidebarFolderLink);\nconst MotionSidebarFolderContent = motion.create(Base.SidebarFolderContent);\n\nconst itemVariants = cva(\n  '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',\n  {\n    variants: {\n      variant: {\n        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',\n        button:\n          'transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none',\n      },\n      highlight: {\n        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\",\n      },\n    },\n  },\n);\n\nfunction getItemOffset(depth: number) {\n  return `calc(${2 + 3 * depth} * var(--spacing))`;\n}\n\nexport function Sidebar(props: ComponentProps<typeof Base.SidebarProvider>) {\n  return <Base.SidebarProvider {...props} />;\n}\n\nexport function SidebarFolder(props: ComponentProps<typeof Base.SidebarFolder>) {\n  return <Base.SidebarFolder {...props} />;\n}\n\nexport function SidebarCollapseTrigger(props: ComponentProps<typeof Base.SidebarCollapseTrigger>) {\n  return <Base.SidebarCollapseTrigger {...props} />;\n}\n\nexport function SidebarViewport(props: ComponentProps<typeof Base.SidebarViewport>) {\n  return <Base.SidebarViewport {...props} />;\n}\n\nexport function SidebarTrigger(props: ComponentProps<typeof Base.SidebarTrigger>) {\n  return <Base.SidebarTrigger {...props} />;\n}\n\nexport function SidebarContent({\n  ref: refProp,\n  className,\n  children,\n  ...props\n}: ComponentProps<'aside'>) {\n  const ref = useRef<HTMLElement>(null);\n  const { open, setOpen } = Base.useSidebar();\n\n  const listener = useEffectEvent((e: KeyboardEvent) => {\n    if (open && e.key === 'Escape') {\n      setOpen(false);\n      e.preventDefault();\n    }\n  });\n  useEffect(() => {\n    window.addEventListener('keydown', listener);\n    return () => {\n      window.removeEventListener('keydown', listener);\n    };\n  }, []);\n\n  return (\n    <RemoveScroll enabled={open}>\n      <motion.div\n        className={cn(\n          'fixed inset-0 py-10 z-30 backdrop-blur-md bg-fd-background/60',\n          !open && 'pointer-events-none',\n        )}\n        initial=\"hide\"\n        variants={{\n          show: {\n            opacity: 1,\n          },\n          hide: {\n            opacity: 0,\n          },\n        }}\n        animate={open ? 'show' : 'hide'}\n        exit=\"hide\"\n        onClick={() => {\n          setOpen(false);\n        }}\n      >\n        <motion.div\n          className=\"absolute overflow-y-auto pr-(--removed-body-scroll-bar-size,0) [scrollbar-width:none] py-16 inset-0 bottom-26 overscroll-contain mask-[linear-gradient(to_bottom,transparent,white_calc(var(--spacing)*14),white_calc(100%-var(--spacing)*14),transparent)] lg:text-sm\"\n          variants={{\n            show: {\n              y: 0,\n              opacity: 1,\n            },\n            hide: {\n              y: '80%',\n              opacity: 0,\n            },\n          }}\n          transition={{\n            duration: 0.3,\n            ease: [0.16, 1, 0.3, 1],\n            opacity: {\n              duration: 0.1,\n            },\n          }}\n        >\n          <motion.aside\n            id=\"nd-sidebar\"\n            ref={mergeRefs(ref, refProp)}\n            className={cn('mx-auto sm:max-w-[400px]', className)}\n            onClick={(e) => e.stopPropagation()}\n            {...(props as ComponentProps<typeof motion.aside>)}\n          >\n            {children}\n          </motion.aside>\n        </motion.div>\n      </motion.div>\n    </RemoveScroll>\n  );\n}\n\nexport function SidebarSeparator({ className, style, children, ...props }: ComponentProps<'p'>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <Base.SidebarSeparator\n      className={cn('[&_svg]:size-4 [&_svg]:shrink-0', className)}\n      style={{\n        paddingInlineStart: getItemOffset(depth),\n        ...style,\n      }}\n      {...props}\n    >\n      {children}\n    </Base.SidebarSeparator>\n  );\n}\n\nexport function SidebarItem({\n  className,\n  style,\n  children,\n  ...props\n}: ComponentProps<typeof Base.SidebarItem>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <MotionSidebarItem\n      className={cn(itemVariants({ variant: 'link', highlight: depth >= 1 }), className)}\n      style={{\n        paddingInlineStart: getItemOffset(depth),\n        ...style,\n      }}\n      {...(props as object)}\n    >\n      {children}\n    </MotionSidebarItem>\n  );\n}\n\nexport function SidebarFolderTrigger({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof Base.SidebarFolderTrigger>) {\n  const { depth, collapsible } = Base.useFolder()!;\n\n  return (\n    <MotionSidebarFolderTrigger\n      className={(s) =>\n        cn(\n          itemVariants({ variant: collapsible ? 'button' : null }),\n          'w-full',\n          typeof className === 'function' ? className(s) : className,\n        )\n      }\n      style={{\n        paddingInlineStart: getItemOffset(depth - 1),\n        ...style,\n      }}\n      {...(props as ComponentProps<typeof MotionSidebarFolderTrigger>)}\n    >\n      {props.children}\n    </MotionSidebarFolderTrigger>\n  );\n}\n\nexport function SidebarFolderLink({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof Base.SidebarFolderLink>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <MotionSidebarFolderLink\n      className={cn(itemVariants({ variant: 'link', highlight: depth > 1 }), 'w-full', className)}\n      style={{\n        paddingInlineStart: getItemOffset(depth - 1),\n        ...style,\n      }}\n      {...(props as ComponentProps<typeof MotionSidebarFolderLink>)}\n    >\n      {props.children}\n    </MotionSidebarFolderLink>\n  );\n}\n\nexport function SidebarFolderContent({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof Base.SidebarFolderContent>) {\n  const depth = Base.useFolderDepth();\n  const { open } = Base.useFolder()!;\n\n  return (\n    <MotionSidebarFolderContent\n      className={(s) =>\n        cn(\n          'relative',\n          depth === 1 &&\n            \"before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5\",\n\n          typeof className === 'function' ? className(s) : className,\n        )\n      }\n      {...(props as ComponentProps<typeof MotionSidebarFolderContent>)}\n    >\n      <motion.div\n        initial=\"hide\"\n        animate={open ? 'show' : 'hide'}\n        exit=\"hide\"\n        variants={{\n          show: {\n            opacity: 1,\n          },\n          hide: {\n            opacity: 0,\n          },\n        }}\n      >\n        {children}\n      </motion.div>\n    </MotionSidebarFolderContent>\n  );\n}\n\nexport const SidebarPageTree = createPageTreeRenderer({\n  SidebarFolder,\n  SidebarFolderContent,\n  SidebarSeparator,\n  SidebarFolderLink,\n  SidebarFolderTrigger,\n  SidebarItem,\n});\n\nexport const SidebarLinkItem = createLinkItemRenderer({\n  SidebarFolder,\n  SidebarFolderContent,\n  SidebarFolderLink,\n  SidebarFolderTrigger,\n  SidebarItem,\n});\n"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","names":["Base.SidebarItem","Base.SidebarFolderTrigger","Base.SidebarFolderLink","Base.SidebarFolderContent","Base.SidebarProvider","Base.SidebarFolder","Base.SidebarCollapseTrigger","Base.SidebarViewport","Base.SidebarTrigger","Base.useSidebar","Base.useFolderDepth","Base.SidebarSeparator","Base.useFolder"],"sources":["../../../src/layouts/flux/sidebar.tsx"],"sourcesContent":["'use client';\nimport * as Base from '@/components/sidebar/base';\nimport { cn } from '@/utils/cn';\nimport { type ComponentProps, useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { createPageTreeRenderer } from '@/components/sidebar/page-tree';\nimport { createLinkItemRenderer } from '@/components/sidebar/link-item';\nimport { mergeRefs } from '@/utils/merge-refs';\nimport { motion } from 'motion/react';\nimport { RemoveScroll } from 'react-remove-scroll';\n\nconst MotionSidebarItem = motion.create(Base.SidebarItem);\nconst MotionSidebarFolderTrigger = motion.create(Base.SidebarFolderTrigger);\nconst MotionSidebarFolderLink = motion.create(Base.SidebarFolderLink);\nconst MotionSidebarFolderContent = motion.create(Base.SidebarFolderContent);\n\nconst itemVariants = cva(\n  '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',\n  {\n    variants: {\n      variant: {\n        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',\n        button:\n          'transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none',\n      },\n      highlight: {\n        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\",\n      },\n    },\n  },\n);\n\nfunction getItemOffset(depth: number) {\n  return `calc(${2 + 3 * depth} * var(--spacing))`;\n}\n\nexport function Sidebar(props: ComponentProps<typeof Base.SidebarProvider>) {\n  return <Base.SidebarProvider {...props} />;\n}\n\nexport function SidebarFolder(props: ComponentProps<typeof Base.SidebarFolder>) {\n  return <Base.SidebarFolder {...props} />;\n}\n\nexport function SidebarCollapseTrigger(props: ComponentProps<typeof Base.SidebarCollapseTrigger>) {\n  return <Base.SidebarCollapseTrigger {...props} />;\n}\n\nexport function SidebarViewport(props: ComponentProps<typeof Base.SidebarViewport>) {\n  return <Base.SidebarViewport {...props} />;\n}\n\nexport function SidebarTrigger(props: ComponentProps<typeof Base.SidebarTrigger>) {\n  return <Base.SidebarTrigger {...props} />;\n}\n\nexport function SidebarContent({\n  ref: refProp,\n  className,\n  children,\n  ...props\n}: ComponentProps<'aside'>) {\n  const ref = useRef<HTMLElement>(null);\n  const [blockScroll, setBlockScroll] = useState(false);\n  const { open, setOpen } = Base.useSidebar();\n\n  const listener = useEffectEvent((e: KeyboardEvent) => {\n    if (open && e.key === 'Escape') {\n      setOpen(false);\n      e.preventDefault();\n    }\n  });\n  useEffect(() => {\n    window.addEventListener('keydown', listener);\n    return () => {\n      window.removeEventListener('keydown', listener);\n    };\n  }, []);\n\n  if (open && !blockScroll) setBlockScroll(true);\n\n  return (\n    <RemoveScroll enabled={blockScroll}>\n      <motion.div\n        className={cn(\n          'fixed inset-0 py-10 z-30 backdrop-blur-md bg-fd-background/60',\n          !open && 'pointer-events-none',\n        )}\n        initial=\"hide\"\n        variants={{\n          show: {\n            opacity: 1,\n          },\n          hide: {\n            opacity: 0,\n          },\n        }}\n        animate={open ? 'show' : 'hide'}\n        exit=\"hide\"\n        onClick={() => {\n          setOpen(false);\n        }}\n        onAnimationComplete={(definition) => {\n          if (definition === 'hide') setBlockScroll(false);\n        }}\n      >\n        <motion.div\n          className=\"absolute top-0 min-h-0 inset-x-0 bottom-26 overflow-y-auto fd-scroll-container pr-(--removed-body-scroll-bar-size,0) py-16 mask-[linear-gradient(to_bottom,transparent,white_--spacing(14),white_calc(100%---spacing(14)),transparent)] lg:text-sm\"\n          variants={{\n            show: {\n              y: 0,\n              opacity: 1,\n            },\n            hide: {\n              y: '80%',\n              opacity: 0,\n            },\n          }}\n          transition={{\n            duration: 0.4,\n            ease: [0.16, 1, 0.3, 1],\n          }}\n        >\n          <motion.aside\n            id=\"nd-sidebar\"\n            ref={mergeRefs(ref, refProp)}\n            className={cn('mx-auto sm:max-w-[400px]', className)}\n            onClick={(e) => e.stopPropagation()}\n            {...(props as ComponentProps<typeof motion.aside>)}\n          >\n            {children}\n          </motion.aside>\n        </motion.div>\n      </motion.div>\n    </RemoveScroll>\n  );\n}\n\nexport function SidebarSeparator({ className, style, children, ...props }: ComponentProps<'p'>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <Base.SidebarSeparator\n      className={cn('[&_svg]:size-4 [&_svg]:shrink-0', className)}\n      style={{\n        paddingInlineStart: getItemOffset(depth),\n        ...style,\n      }}\n      {...props}\n    >\n      {children}\n    </Base.SidebarSeparator>\n  );\n}\n\nexport function SidebarItem({\n  className,\n  style,\n  children,\n  ...props\n}: ComponentProps<typeof Base.SidebarItem>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <MotionSidebarItem\n      className={cn(itemVariants({ variant: 'link', highlight: depth >= 1 }), className)}\n      style={{\n        paddingInlineStart: getItemOffset(depth),\n        ...style,\n      }}\n      {...(props as object)}\n    >\n      {children}\n    </MotionSidebarItem>\n  );\n}\n\nexport function SidebarFolderTrigger({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof Base.SidebarFolderTrigger>) {\n  const { depth, collapsible } = Base.useFolder()!;\n\n  return (\n    <MotionSidebarFolderTrigger\n      className={(s) =>\n        cn(\n          itemVariants({ variant: collapsible ? 'button' : null }),\n          'w-full',\n          typeof className === 'function' ? className(s) : className,\n        )\n      }\n      style={{\n        paddingInlineStart: getItemOffset(depth - 1),\n        ...style,\n      }}\n      {...(props as ComponentProps<typeof MotionSidebarFolderTrigger>)}\n    >\n      {props.children}\n    </MotionSidebarFolderTrigger>\n  );\n}\n\nexport function SidebarFolderLink({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof Base.SidebarFolderLink>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <MotionSidebarFolderLink\n      className={cn(itemVariants({ variant: 'link', highlight: depth > 1 }), 'w-full', className)}\n      style={{\n        paddingInlineStart: getItemOffset(depth - 1),\n        ...style,\n      }}\n      {...(props as ComponentProps<typeof MotionSidebarFolderLink>)}\n    >\n      {props.children}\n    </MotionSidebarFolderLink>\n  );\n}\n\nexport function SidebarFolderContent({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof Base.SidebarFolderContent>) {\n  const depth = Base.useFolderDepth();\n  const { open } = Base.useFolder()!;\n\n  return (\n    <MotionSidebarFolderContent\n      className={(s) =>\n        cn(\n          'relative',\n          depth === 1 &&\n            \"before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5\",\n\n          typeof className === 'function' ? className(s) : className,\n        )\n      }\n      {...(props as ComponentProps<typeof MotionSidebarFolderContent>)}\n    >\n      <motion.div\n        initial=\"hide\"\n        animate={open ? 'show' : 'hide'}\n        exit=\"hide\"\n        variants={{\n          show: {\n            opacity: 1,\n          },\n          hide: {\n            opacity: 0,\n          },\n        }}\n      >\n        {children}\n      </motion.div>\n    </MotionSidebarFolderContent>\n  );\n}\n\nexport const SidebarPageTree = createPageTreeRenderer({\n  SidebarFolder,\n  SidebarFolderContent,\n  SidebarSeparator,\n  SidebarFolderLink,\n  SidebarFolderTrigger,\n  SidebarItem,\n});\n\nexport const SidebarLinkItem = createLinkItemRenderer({\n  SidebarFolder,\n  SidebarFolderContent,\n  SidebarFolderLink,\n  SidebarFolderTrigger,\n  SidebarItem,\n});\n"],"mappings":"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"}

package/dist/layouts/flux/tab-dropdown.js

@@ -40,7 +40,7 @@ function SidebarTabsDropdown({ options, placeholder, className, ...props }) {
 			children: [/* @__PURE__ */ jsx(AnimatePresence, {
 				mode: "popLayout",
 				children: /* @__PURE__ */ jsx(motion.span, {
-					className: "flex w-full items-center text-nowrap gap-1.5",
+					className: "flex w-full min-w-0 overflow-hidden items-center text-nowrap gap-1.5",
 					initial: {
 						opacity: 0,
 						y: "100%"

package/dist/layouts/flux/tab-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-dropdown.js","names":[],"sources":["../../../src/layouts/flux/tab-dropdown.tsx"],"sourcesContent":["'use client';\nimport { Check, ChevronsUpDown } from 'lucide-react';\nimport { type ComponentProps, type ReactNode, useMemo, useState } from 'react';\nimport Link from 'fumadocs-core/link';\nimport { usePathname } from 'fumadocs-core/framework';\nimport { cn } from '@/utils/cn';\nimport { isActive, normalize } from '@/utils/urls';\nimport { useSidebar } from '@/components/sidebar/base';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport type { SidebarTab } from '@/components/sidebar/tabs';\nimport { AnimatePresence, motion } from 'motion/react';\n\nexport interface SidebarTabWithProps extends SidebarTab {\n  props?: ComponentProps<'a'>;\n}\n\nexport function SidebarTabsDropdown({\n  options,\n  placeholder,\n  className,\n  ...props\n}: {\n  placeholder?: ReactNode;\n  options: SidebarTabWithProps[];\n} & ComponentProps<'button'>) {\n  const [open, setOpen] = useState(false);\n  const { closeOnRedirect } = useSidebar();\n  const pathname = usePathname();\n  const selectedIdx = useMemo(() => {\n    return options.findLastIndex((item) => isTabActive(item, pathname));\n  }, [options, pathname]);\n  const selected = selectedIdx !== -1 ? options[selectedIdx] : undefined;\n\n  const onClick = () => {\n    closeOnRedirect.current = false;\n    setOpen(false);\n  };\n\n  const item = selected ? (\n    <>\n      <div className=\"size-4.5 shrink-0 empty:hidden\">{selected.icon}</div>\n      <p className=\"font-medium\">{selected.title}</p>\n    </>\n  ) : (\n    placeholder\n  );\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      {item && (\n        <PopoverTrigger\n          className={cn(\n            'flex items-center gap-2 rounded-full p-1.5 border shadow-sm text-sm text-start transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground data-open:bg-fd-accent data-open:text-fd-accent-foreground',\n            className,\n          )}\n          {...props}\n        >\n          <AnimatePresence mode=\"popLayout\">\n            <motion.span\n              key={selectedIdx}\n              className=\"flex w-full items-center text-nowrap gap-1.5\"\n              initial={{\n                opacity: 0,\n                y: '100%',\n              }}\n              animate={{\n                opacity: 1,\n                y: 0,\n              }}\n              exit={{\n                opacity: 0,\n                y: '-100%',\n              }}\n            >\n              {item}\n            </motion.span>\n          </AnimatePresence>\n          <ChevronsUpDown className=\"shrink-0 ms-auto size-4 text-fd-muted-foreground\" />\n        </PopoverTrigger>\n      )}\n      <PopoverContent\n        align=\"start\"\n        className=\"flex flex-col gap-1 max-w-svw p-1 fd-scroll-container\"\n      >\n        {options.map((item, i) => {\n          const isActive = i === selectedIdx;\n          if (!isActive && item.unlisted) return;\n\n          return (\n            <Link\n              key={item.url}\n              href={item.url}\n              onClick={onClick}\n              {...item.props}\n              className={cn(\n                'flex items-center gap-1.5 rounded-lg p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground',\n                item.props?.className,\n              )}\n            >\n              <div className=\"shrink-0 mb-auto size-4.5 empty:hidden\">{item.icon}</div>\n              <div>\n                <p className=\"text-sm font-medium leading-none\">{item.title}</p>\n                <p className=\"text-[0.8125rem] text-fd-muted-foreground mt-1 empty:hidden\">\n                  {item.description}\n                </p>\n              </div>\n\n              <Check\n                className={cn(\n                  'shrink-0 ms-auto size-3.5 text-fd-primary',\n                  !isActive && 'invisible',\n                )}\n              />\n            </Link>\n          );\n        })}\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport function isTabActive(tab: SidebarTab, pathname: string) {\n  if (tab.urls) return tab.urls.has(normalize(pathname));\n\n  return isActive(tab.url, pathname, true);\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,SAAgB,oBAAoB,EAClC,SACA,aACA,WACA,GAAG,SAIyB;CAC5B,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,EAAE,oBAAoB,YAAY;CACxC,MAAM,WAAW,aAAa;CAC9B,MAAM,cAAc,cAAc;AAChC,SAAO,QAAQ,eAAe,SAAS,YAAY,MAAM,SAAS,CAAC;IAClE,CAAC,SAAS,SAAS,CAAC;CACvB,MAAM,WAAW,gBAAgB,KAAK,QAAQ,eAAe;CAE7D,MAAM,gBAAgB;AACpB,kBAAgB,UAAU;AAC1B,UAAQ,MAAM;;CAGhB,MAAM,OAAO,WACX,8CACE,oBAAC;EAAI,WAAU;YAAkC,SAAS;GAAW,EACrE,oBAAC;EAAE,WAAU;YAAe,SAAS;GAAU,IAC9C,GAEH;AAGF,QACE,qBAAC;EAAc;EAAM,cAAc;aAChC,QACC,qBAAC;GACC,WAAW,GACT,kNACA,UACD;GACD,GAAI;cAEJ,oBAAC;IAAgB,MAAK;cACpB,oBAAC,OAAO;KAEN,WAAU;KACV,SAAS;MACP,SAAS;MACT,GAAG;MACJ;KACD,SAAS;MACP,SAAS;MACT,GAAG;MACJ;KACD,MAAM;MACJ,SAAS;MACT,GAAG;MACJ;eAEA;OAfI,YAgBO;KACE,EAClB,oBAAC,kBAAe,WAAU,qDAAqD;IAChE,EAEnB,oBAAC;GACC,OAAM;GACN,WAAU;aAET,QAAQ,KAAK,MAAM,MAAM;IACxB,MAAM,WAAW,MAAM;AACvB,QAAI,CAAC,YAAY,KAAK,SAAU;AAEhC,WACE,qBAAC;KAEC,MAAM,KAAK;KACF;KACT,GAAI,KAAK;KACT,WAAW,GACT,iGACA,KAAK,OAAO,UACb;;MAED,oBAAC;OAAI,WAAU;iBAA0C,KAAK;QAAW;MACzE,qBAAC,oBACC,oBAAC;OAAE,WAAU;iBAAoC,KAAK;QAAU,EAChE,oBAAC;OAAE,WAAU;iBACV,KAAK;QACJ,IACA;MAEN,oBAAC,SACC,WAAW,GACT,6CACA,CAAC,YAAY,YACd,GACD;;OAtBG,KAAK,IAuBL;KAET;IACa;GACT;;AAId,SAAgB,YAAY,KAAiB,UAAkB;AAC7D,KAAI,IAAI,KAAM,QAAO,IAAI,KAAK,IAAI,UAAU,SAAS,CAAC;AAEtD,QAAO,SAAS,IAAI,KAAK,UAAU,KAAK"}
+{"version":3,"file":"tab-dropdown.js","names":[],"sources":["../../../src/layouts/flux/tab-dropdown.tsx"],"sourcesContent":["'use client';\nimport { Check, ChevronsUpDown } from 'lucide-react';\nimport { type ComponentProps, type ReactNode, useMemo, useState } from 'react';\nimport Link from 'fumadocs-core/link';\nimport { usePathname } from 'fumadocs-core/framework';\nimport { cn } from '@/utils/cn';\nimport { isActive, normalize } from '@/utils/urls';\nimport { useSidebar } from '@/components/sidebar/base';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport type { SidebarTab } from '@/components/sidebar/tabs';\nimport { AnimatePresence, motion } from 'motion/react';\n\nexport interface SidebarTabWithProps extends SidebarTab {\n  props?: ComponentProps<'a'>;\n}\n\nexport function SidebarTabsDropdown({\n  options,\n  placeholder,\n  className,\n  ...props\n}: {\n  placeholder?: ReactNode;\n  options: SidebarTabWithProps[];\n} & ComponentProps<'button'>) {\n  const [open, setOpen] = useState(false);\n  const { closeOnRedirect } = useSidebar();\n  const pathname = usePathname();\n  const selectedIdx = useMemo(() => {\n    return options.findLastIndex((item) => isTabActive(item, pathname));\n  }, [options, pathname]);\n  const selected = selectedIdx !== -1 ? options[selectedIdx] : undefined;\n\n  const onClick = () => {\n    closeOnRedirect.current = false;\n    setOpen(false);\n  };\n\n  const item = selected ? (\n    <>\n      <div className=\"size-4.5 shrink-0 empty:hidden\">{selected.icon}</div>\n      <p className=\"font-medium\">{selected.title}</p>\n    </>\n  ) : (\n    placeholder\n  );\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      {item && (\n        <PopoverTrigger\n          className={cn(\n            'flex items-center gap-2 rounded-full p-1.5 border shadow-sm text-sm text-start transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground data-open:bg-fd-accent data-open:text-fd-accent-foreground',\n            className,\n          )}\n          {...props}\n        >\n          <AnimatePresence mode=\"popLayout\">\n            <motion.span\n              key={selectedIdx}\n              className=\"flex w-full min-w-0 overflow-hidden items-center text-nowrap gap-1.5\"\n              initial={{\n                opacity: 0,\n                y: '100%',\n              }}\n              animate={{\n                opacity: 1,\n                y: 0,\n              }}\n              exit={{\n                opacity: 0,\n                y: '-100%',\n              }}\n            >\n              {item}\n            </motion.span>\n          </AnimatePresence>\n          <ChevronsUpDown className=\"shrink-0 ms-auto size-4 text-fd-muted-foreground\" />\n        </PopoverTrigger>\n      )}\n      <PopoverContent\n        align=\"start\"\n        className=\"flex flex-col gap-1 max-w-svw p-1 fd-scroll-container\"\n      >\n        {options.map((item, i) => {\n          const isActive = i === selectedIdx;\n          if (!isActive && item.unlisted) return;\n\n          return (\n            <Link\n              key={item.url}\n              href={item.url}\n              onClick={onClick}\n              {...item.props}\n              className={cn(\n                'flex items-center gap-1.5 rounded-lg p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground',\n                item.props?.className,\n              )}\n            >\n              <div className=\"shrink-0 mb-auto size-4.5 empty:hidden\">{item.icon}</div>\n              <div>\n                <p className=\"text-sm font-medium leading-none\">{item.title}</p>\n                <p className=\"text-[0.8125rem] text-fd-muted-foreground mt-1 empty:hidden\">\n                  {item.description}\n                </p>\n              </div>\n\n              <Check\n                className={cn(\n                  'shrink-0 ms-auto size-3.5 text-fd-primary',\n                  !isActive && 'invisible',\n                )}\n              />\n            </Link>\n          );\n        })}\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport function isTabActive(tab: SidebarTab, pathname: string) {\n  if (tab.urls) return tab.urls.has(normalize(pathname));\n\n  return isActive(tab.url, pathname, true);\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,SAAgB,oBAAoB,EAClC,SACA,aACA,WACA,GAAG,SAIyB;CAC5B,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,EAAE,oBAAoB,YAAY;CACxC,MAAM,WAAW,aAAa;CAC9B,MAAM,cAAc,cAAc;AAChC,SAAO,QAAQ,eAAe,SAAS,YAAY,MAAM,SAAS,CAAC;IAClE,CAAC,SAAS,SAAS,CAAC;CACvB,MAAM,WAAW,gBAAgB,KAAK,QAAQ,eAAe;CAE7D,MAAM,gBAAgB;AACpB,kBAAgB,UAAU;AAC1B,UAAQ,MAAM;;CAGhB,MAAM,OAAO,WACX,8CACE,oBAAC;EAAI,WAAU;YAAkC,SAAS;GAAW,EACrE,oBAAC;EAAE,WAAU;YAAe,SAAS;GAAU,IAC9C,GAEH;AAGF,QACE,qBAAC;EAAc;EAAM,cAAc;aAChC,QACC,qBAAC;GACC,WAAW,GACT,kNACA,UACD;GACD,GAAI;cAEJ,oBAAC;IAAgB,MAAK;cACpB,oBAAC,OAAO;KAEN,WAAU;KACV,SAAS;MACP,SAAS;MACT,GAAG;MACJ;KACD,SAAS;MACP,SAAS;MACT,GAAG;MACJ;KACD,MAAM;MACJ,SAAS;MACT,GAAG;MACJ;eAEA;OAfI,YAgBO;KACE,EAClB,oBAAC,kBAAe,WAAU,qDAAqD;IAChE,EAEnB,oBAAC;GACC,OAAM;GACN,WAAU;aAET,QAAQ,KAAK,MAAM,MAAM;IACxB,MAAM,WAAW,MAAM;AACvB,QAAI,CAAC,YAAY,KAAK,SAAU;AAEhC,WACE,qBAAC;KAEC,MAAM,KAAK;KACF;KACT,GAAI,KAAK;KACT,WAAW,GACT,iGACA,KAAK,OAAO,UACb;;MAED,oBAAC;OAAI,WAAU;iBAA0C,KAAK;QAAW;MACzE,qBAAC,oBACC,oBAAC;OAAE,WAAU;iBAAoC,KAAK;QAAU,EAChE,oBAAC;OAAE,WAAU;iBACV,KAAK;QACJ,IACA;MAEN,oBAAC,SACC,WAAW,GACT,6CACA,CAAC,YAAY,YACd,GACD;;OAtBG,KAAK,IAuBL;KAET;IACa;GACT;;AAId,SAAgB,YAAY,KAAiB,UAAkB;AAC7D,KAAI,IAAI,KAAM,QAAO,IAAI,KAAK,IAAI,UAAU,SAAS,CAAC;AAEtD,QAAO,SAAS,IAAI,KAAK,UAAU,KAAK"}

package/dist/layouts/home/client.d.ts

@@ -4,7 +4,7 @@ import * as class_variance_authority_types0 from "class-variance-authority/types
 
 //#region src/layouts/home/client.d.ts
 declare const navItemVariants: (props?: ({
-  variant?: "button" | "main" | "icon" | null | undefined;
+  variant?: "icon" | "main" | "button" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Header({
   nav,

package/dist/layouts/notebook/client.d.ts

@@ -41,7 +41,7 @@ declare function NavbarLinkItem({
   ...props
 }: {
   item: LinkItemType;
-} & HTMLAttributes<HTMLElement>): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+} & HTMLAttributes<HTMLElement>): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
 //#endregion
 export { LayoutBody, LayoutContext, LayoutContextProvider, LayoutHeader, LayoutHeaderTabs, LayoutInfo, NavbarLinkItem };
 //# sourceMappingURL=client.d.ts.map

package/dist/layouts/notebook/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","names":[],"sources":["../../../src/layouts/notebook/client.tsx"],"mappings":";;;;;;;cAuBa,aAAA,EAAa,KAAA,CAAA,OAAA,EAAA,UAAA;;;UAOT,UAAA;EACf,OAAA;EACA,OAAA;AAAA;AAAA,iBAGc,qBAAA,CAAA;EACd,kBAAA;EACA,OAAA;EACA,OAAA;EACA;AAAA,GACC,UAAA;EACD,kBAAA;EACA,QAAA,EAAU,SAAA;AAAA,IACX,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoBe,YAAA,CAAa,KAAA,EAAO,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAW5C,UAAA,CAAA;EAAa,SAAA;EAAW,KAAA;EAAO,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAqC1E,gBAAA,CAAA;EACd,OAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,cAAA;EACD,OAAA,EAAS,mBAAA;AAAA,IACV,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAgCe,cAAA,CAAA;EACd,IAAA;EACA,SAAA;EAAA,GACG;AAAA;EACA,IAAA,EAAM,YAAA;AAAA,IAAiB,cAAA,CAAe,WAAA,yCAAY,kBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,QAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,SAAA"}
+{"version":3,"file":"client.d.ts","names":[],"sources":["../../../src/layouts/notebook/client.tsx"],"mappings":";;;;;;;cAuBa,aAAA,EAAa,KAAA,CAAA,OAAA,EAAA,UAAA;;;UAOT,UAAA;EACf,OAAA;EACA,OAAA;AAAA;AAAA,iBAGc,qBAAA,CAAA;EACd,kBAAA;EACA,OAAA;EACA,OAAA;EACA;AAAA,GACC,UAAA;EACD,kBAAA;EACA,QAAA,EAAU,SAAA;AAAA,IACX,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoBe,YAAA,CAAa,KAAA,EAAO,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAW5C,UAAA,CAAA;EAAa,SAAA;EAAW,KAAA;EAAO,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAqC1E,gBAAA,CAAA;EACd,OAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,cAAA;EACD,OAAA,EAAS,mBAAA;AAAA,IACV,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAgCe,cAAA,CAAA;EACd,IAAA;EACA,SAAA;EAAA,GACG;AAAA;EACA,IAAA,EAAM,YAAA;AAAA,IAAiB,cAAA,CAAe,WAAA,yCAAY,QAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,SAAA,wBAAA,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/layouts/shared/index.d.ts

@@ -62,7 +62,7 @@ declare function resolveLinkItems({
 declare function renderTitleNav({
   title,
   url
-}: Partial<NavOptions>, props: ComponentProps<'a'>): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+}: Partial<NavOptions>, props: ComponentProps<'a'>): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
 declare function useLinkItems({
   githubUrl,
   links

package/dist/layouts/shared/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/layouts/shared/index.tsx"],"mappings":";;;;;;;UAKiB,UAAA;EACf,OAAA;EACA,SAAA,EAAW,SAAA;EAEX,KAAA,GAAQ,SAAA,KAAc,KAAA,EAAO,cAAA,UAAwB,SAAA;EAJtC;;;;EAUf,GAAA;EAN6B;;;;;EAa7B,eAAA;EAEA,QAAA,GAAW,SAAA;AAAA;AAAA,UAGI,eAAA;EACf,WAAA;IACE,OAAA;IACA,SAAA,GAAY,SAAA;IACZ,IAAA;EAAA;EAGF,YAAA,GAAe,OAAA;IACb,OAAA;IACA,UAAA,EAAY,OAAA;MACV,EAAA,EAAI,SAAA;MACJ,EAAA,EAAI,SAAA;IAAA;EAAA;;;;;;EASR,IAAA,aAAiB,UAAA;EAAA;;;EAKjB,SAAA;EAEA,KAAA,GAAQ,YAAA;EAMY;;;EAFpB,GAAA,GAAM,OAAA,CAAQ,UAAA;EAEd,QAAA,GAAW,SAAA;AAAA;;;;iBAMG,gBAAA,CAAA;EACd,KAAA;EACA;AAAA,GACC,IAAA,CAAK,eAAA,2BAA0C,YAAA;AAAA,iBAoBlC,cAAA,CAAA;EACZ,KAAA;EAAO;AAAA,GAAa,OAAA,CAAQ,UAAA,GAC9B,KAAA,EAAO,cAAA,6CAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,QAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,SAAA;AAAA,iBAUZ,YAAA,CAAA;EAAe,SAAA;EAAW;AAAA,GAAS,IAAA,CAAK,eAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/layouts/shared/index.tsx"],"mappings":";;;;;;;UAKiB,UAAA;EACf,OAAA;EACA,SAAA,EAAW,SAAA;EAEX,KAAA,GAAQ,SAAA,KAAc,KAAA,EAAO,cAAA,UAAwB,SAAA;EAJtC;;;;EAUf,GAAA;EAN6B;;;;;EAa7B,eAAA;EAEA,QAAA,GAAW,SAAA;AAAA;AAAA,UAGI,eAAA;EACf,WAAA;IACE,OAAA;IACA,SAAA,GAAY,SAAA;IACZ,IAAA;EAAA;EAGF,YAAA,GAAe,OAAA;IACb,OAAA;IACA,UAAA,EAAY,OAAA;MACV,EAAA,EAAI,SAAA;MACJ,EAAA,EAAI,SAAA;IAAA;EAAA;;;;;;EASR,IAAA,aAAiB,UAAA;EAAA;;;EAKjB,SAAA;EAEA,KAAA,GAAQ,YAAA;EAMY;;;EAFpB,GAAA,GAAM,OAAA,CAAQ,UAAA;EAEd,QAAA,GAAW,SAAA;AAAA;;;;iBAMG,gBAAA,CAAA;EACd,KAAA;EACA;AAAA,GACC,IAAA,CAAK,eAAA,2BAA0C,YAAA;AAAA,iBAoBlC,cAAA,CAAA;EACZ,KAAA;EAAO;AAAA,GAAa,OAAA,CAAQ,UAAA,GAC9B,KAAA,EAAO,cAAA,6CAAmB,QAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,SAAA,wBAAA,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUZ,YAAA,CAAA;EAAe,SAAA;EAAW;AAAA,GAAS,IAAA,CAAK,eAAA"}

package/dist/style.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -281,6 +281,9 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .inset-x-0 {
+    inset-inline: calc(var(--spacing) * 0);
+  }
   .inset-x-2 {
     inset-inline: calc(var(--spacing) * 2);
   }
@@ -290,6 +293,9 @@
   .inset-y-2 {
     inset-block: calc(var(--spacing) * 2);
   }
+  .start {
+    inset-inline-start: var(--spacing);
+  }
   .start-0 {
     inset-inline-start: calc(var(--spacing) * 0);
   }
@@ -330,7 +336,7 @@
     top: calc(var(--spacing) * 1.5);
   }
   .top-1\/2 {
-    top: calc(1/2 * 100%);
+    top: calc(1 / 2 * 100%);
   }
   .top-2 {
     top: calc(var(--spacing) * 2);
@@ -357,7 +363,7 @@
     bottom: calc(var(--spacing) * 26);
   }
   .left-1\/2 {
-    left: calc(1/2 * 100%);
+    left: calc(1 / 2 * 100%);
   }
   .z-2 {
     z-index: 2;
@@ -1038,7 +1044,7 @@
     width: calc(var(--spacing) * 1.5);
   }
   .w-1\/4 {
-    width: calc(1/4 * 100%);
+    width: calc(1 / 4 * 100%);
   }
   .w-4 {
     width: calc(var(--spacing) * 4);
@@ -1132,7 +1138,7 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .-translate-x-1\/2 {
-    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .translate-x-2 {
@@ -1144,7 +1150,7 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .-translate-y-1\/2 {
-    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .-translate-y-full {
@@ -1463,12 +1469,12 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .mask-\[linear-gradient\(to_bottom\,transparent\,white_--spacing\(14\)\,white_calc\(100\%---spacing\(14\)\)\,transparent\)\] {
+    mask-image: linear-gradient(to bottom,transparent,white calc(var(--spacing) * 14),white calc(100% - calc(var(--spacing) * 14)),transparent);
+  }
   .mask-\[linear-gradient\(to_bottom\,transparent\,white_16px\,white_calc\(100\%-16px\)\,transparent\)\] {
     mask-image: linear-gradient(to bottom,transparent,white 16px,white calc(100% - 16px),transparent);
   }
-  .mask-\[linear-gradient\(to_bottom\,transparent\,white_calc\(var\(--spacing\)\*14\)\,white_calc\(100\%-var\(--spacing\)\*14\)\,transparent\)\] {
-    mask-image: linear-gradient(to bottom,transparent,white calc(var(--spacing) * 14),white calc(100% - var(--spacing) * 14),transparent);
-  }
   .mask-\[linear-gradient\(to_bottom\,white\,white_30px\,transparent_80px\)\] {
     mask-image: linear-gradient(to bottom,white,white 30px,transparent 80px);
   }
@@ -2328,7 +2334,7 @@
   .data-ending-style\:data-\[activation-direction\=left\]\:translate-x-1\/2 {
     &[data-ending-style] {
       &[data-activation-direction="left"] {
-        --tw-translate-x: calc(1/2 * 100%);
+        --tw-translate-x: calc(1 / 2 * 100%);
         translate: var(--tw-translate-x) var(--tw-translate-y);
       }
     }
@@ -2336,7 +2342,7 @@
   .data-starting-style\:data-\[activation-direction\=left\]\:-translate-x-1\/2 {
     &[data-starting-style] {
       &[data-activation-direction="left"] {
-        --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
         translate: var(--tw-translate-x) var(--tw-translate-y);
       }
     }
@@ -2344,7 +2350,7 @@
   .data-ending-style\:data-\[activation-direction\=right\]\:-translate-x-1\/2 {
     &[data-ending-style] {
       &[data-activation-direction="right"] {
-        --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
         translate: var(--tw-translate-x) var(--tw-translate-y);
       }
     }
@@ -2352,7 +2358,7 @@
   .data-starting-style\:data-\[activation-direction\=right\]\:translate-x-1\/2 {
     &[data-starting-style] {
       &[data-activation-direction="right"] {
-        --tw-translate-x: calc(1/2 * 100%);
+        --tw-translate-x: calc(1 / 2 * 100%);
         translate: var(--tw-translate-x) var(--tw-translate-y);
       }
     }
@@ -2874,23 +2880,6 @@
   &.has-focused:hover .line:not(.focused) {
     filter: blur(0);
   }
-  &[data-line-numbers] .twoslash-meta-line {
-    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
-  }
-  &[data-line-numbers] .line {
-    counter-increment: line;
-    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
-  }
-  &[data-line-numbers] .line::after {
-    position: absolute;
-    content: counter(line);
-    color: var(--fd-counter-color, hsl(0, 0%, 45.1%));
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix( in oklab, var(--fd-counter-color, var(--color-fd-muted-foreground)) 60%, transparent );
-    }
-    top: calc(var(--spacing) * 0);
-    left: calc(var(--spacing) * 4);
-  }
   .diff::before {
     position: absolute;
     left: calc(var(--spacing) * 1.5);
@@ -2915,16 +2904,22 @@
   .highlighted {
     --fd-counter-color: var(--color-fd-primary);
     padding-left: calc(var(--padding-left) - 2px);
+    background-color: color-mix(in srgb, hsl(0, 0%, 9%) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-fd-primary) 10%, transparent);
+    }
+  }
+  .highlighted::after {
+    position: absolute;
+    content: '';
+    inset-block: calc(var(--spacing) * 0);
+    left: calc(var(--spacing) * 0);
     border-left-style: var(--tw-border-style);
     border-left-width: 2px;
     border-color: color-mix(in srgb, hsl(0, 0%, 9%) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-fd-primary) 50%, transparent);
     }
-    background-color: color-mix(in srgb, hsl(0, 0%, 9%) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-fd-primary) 10%, transparent);
-    }
   }
   .highlighted-word {
     padding: 1px;
@@ -2943,6 +2938,25 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
+  &[data-line-numbers] .twoslash-meta-line {
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
+  }
+  &[data-line-numbers] .line {
+    counter-increment: line;
+    padding-left: calc(var(--padding-left) + 7 * var(--spacing));
+  }
+  &[data-line-numbers] .line::after {
+    position: absolute;
+    content: counter(line);
+    color: var(--fd-counter-color, hsl(0, 0%, 45.1%));
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix( in oklab, var(--fd-counter-color, var(--color-fd-muted-foreground)) 60%, transparent );
+    }
+    inset-block: calc(var(--spacing) * 0);
+    left: calc(var(--spacing) * 0);
+    width: calc(var(--spacing) * 7);
+    text-align: right;
+  }
 }
 .dark .shiki:not(.not-fumadocs-codeblock *) {
   code span {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fumadocs/base-ui",
-  "version": "16.6.5",
+  "version": "16.6.7",
   "description": "The Base UI version of Fumadocs UI",
   "keywords": [
     "Docs",
@@ -100,29 +100,29 @@
   "dependencies": {
     "@base-ui/react": "^1.2.0",
     "class-variance-authority": "^0.7.1",
-    "lucide-react": "^0.570.0",
-    "motion": "^12.34.0",
+    "lucide-react": "^0.575.0",
+    "motion": "^12.34.3",
     "next-themes": "^0.4.6",
-    "react-medium-image-zoom": "^5.4.0",
+    "react-medium-image-zoom": "^5.4.1",
     "react-remove-scroll": "^2.7.2",
     "rehype-raw": "^7.0.0",
     "scroll-into-view-if-needed": "^3.1.0",
-    "tailwind-merge": "^3.4.1",
+    "tailwind-merge": "^3.5.0",
     "unist-util-visit": "^5.1.0",
     "@fumadocs/tailwind": "0.0.2"
   },
   "devDependencies": {
-    "@tailwindcss/cli": "^4.1.18",
+    "@tailwindcss/cli": "^4.2.1",
     "@types/hast": "^3.0.4",
-    "@types/node": "^25.2.3",
+    "@types/node": "^25.3.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "tailwindcss": "^4.1.18",
-    "tsdown": "^0.20.3",
+    "tailwindcss": "^4.2.1",
+    "tsdown": "0.20.3",
     "unified": "^11.0.5",
     "@fumadocs/cli": "1.2.4",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "16.6.5",
+    "fumadocs-core": "16.6.7",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {
@@ -132,7 +132,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "tailwindcss": "^4.0.0",
-    "fumadocs-core": "16.6.5"
+    "fumadocs-core": "16.6.7"
   },
   "peerDependenciesMeta": {
     "next": {