OpenAPI: use container query

.changeset/rude-geckos-yawn.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-openapi': patch
+---
+
+use container query

.changeset/wicked-wolves-pay.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-openapi': patch
+---
+
+Improve `allOf` merging util

packages/openapi/src/ui/api-page.tsx

@@ -321,7 +321,7 @@ async function APIPage({
   const { dereferenced } = ctx.schema;
   let { renderPageLayout } = ctx.content ?? {};
   renderPageLayout ??= (slots) => (
-    <div className="flex flex-col gap-24 text-sm">
+    <div className="flex flex-col gap-24 text-sm @container">
       {slots.operations?.map((op) => op.children)}
       {slots.webhooks?.map((op) => op.children)}
     </div>

packages/openapi/src/ui/operation/index.tsx

@@ -263,7 +263,7 @@ export async function Operation({
   if (type === 'operation') {
     renderOperationLayout ??= (slots) => {
       return (
-        <div className="flex flex-col gap-x-6 gap-y-4 xl:flex-row xl:items-start">
+        <div className="flex flex-col gap-x-6 gap-y-4 @4xl:flex-row @4xl:items-start">
           <div className="min-w-0 flex-1">
             {slots.header}
             {slots.apiPlayground}

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

@@ -13,13 +13,9 @@ import {
   type SidebarComponents,
   SidebarContent,
   SidebarContentMobile,
-  SidebarFolder,
-  SidebarFolderContent,
-  SidebarFolderLink,
-  SidebarFolderTrigger,
   SidebarFooter,
   SidebarHeader,
-  SidebarItem,
+  SidebarLinkItem,
   SidebarPageTree,
   type SidebarProps,
   SidebarTrigger,
@@ -541,48 +537,3 @@ function NavbarLinkItem({
     </LinkItem>
   );
 }
-
-function SidebarLinkItem({
-  item,
-  ...props
-}: {
-  item: Exclude<LinkItemType, { type: 'icon' }>;
-  className?: string;
-}) {
-  if (item.type === 'menu')
-    return (
-      <SidebarFolder {...props}>
-        {item.url ? (
-          <SidebarFolderLink href={item.url} external={item.external}>
-            {item.icon}
-            {item.text}
-          </SidebarFolderLink>
-        ) : (
-          <SidebarFolderTrigger>
-            {item.icon}
-            {item.text}
-          </SidebarFolderTrigger>
-        )}
-        <SidebarFolderContent>
-          {item.items.map((child, i) => (
-            <SidebarLinkItem key={i} item={child} />
-          ))}
-        </SidebarFolderContent>
-      </SidebarFolder>
-    );
-
-  if (item.type === 'custom') return <div {...props}>{item.children}</div>;
-
-  return (
-    <SidebarItem
-      href={item.url}
-      icon={item.icon}
-      external={item.external}
-      {...props}
-    >
-      {item.text}
-    </SidebarItem>
-  );
-}
-
-export { Navbar, NavbarSidebarTrigger };

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

@@ -33,6 +33,7 @@ import type * as PageTree from 'fumadocs-core/page-tree';
 import { useTreeContext, useTreePath } from '@/contexts/tree';
 import { useMediaQuery } from 'fumadocs-core/utils/use-media-query';
 import { Presence } from '@radix-ui/react-presence';
+import type { LinkItemType } from '@/layouts/shared/link-item';
 
 export interface SidebarProps {
   /**
@@ -557,3 +558,46 @@ function PageTreeFolder({
     </SidebarFolder>
   );
 }
+
+export function SidebarLinkItem({
+  item,
+  ...props
+}: {
+  item: Exclude<LinkItemType, { type: 'icon' }>;
+  className?: string;
+}) {
+  if (item.type === 'menu')
+    return (
+      <SidebarFolder {...props}>
+        {item.url ? (
+          <SidebarFolderLink href={item.url} external={item.external}>
+            {item.icon}
+            {item.text}
+          </SidebarFolderLink>
+        ) : (
+          <SidebarFolderTrigger>
+            {item.icon}
+            {item.text}
+          </SidebarFolderTrigger>
+        )}
+        <SidebarFolderContent>
+          {item.items.map((child, i) => (
+            <SidebarLinkItem key={i} item={child} />
+          ))}
+        </SidebarFolderContent>
+      </SidebarFolder>
+    );
+
+  if (item.type === 'custom') return <div {...props}>{item.children}</div>;
+
+  return (
+    <SidebarItem
+      href={item.url}
+      icon={item.icon}
+      external={item.external}
+      {...props}
+    >
+      {item.text}
+    </SidebarItem>
+  );
+}