chore: update dependencies and enhance documentation layout

- Added `remark-gfm` package for GitHub Flavored Markdown support.
- Updated `next-env.d.ts` to reference the correct types path.
- Refined layout in `page.tsx` to include a mobile Table of Contents component.
- Adjusted styles in `command-menu.tsx` for improved backdrop clarity.
- Introduced a collapsible Table of Contents for better navigation on small screens.

Author: BunsDev

bun.lock

@@ -1,8 +1,9 @@
 import { notFound } from 'next/navigation';
 import { MDXRemote } from 'next-mdx-remote/rsc';
+import remarkGfm from 'remark-gfm';
 import { getDocBySlug, getAllDocSlugs, extractHeadings } from '@/lib/mdx';
 import { mdxComponents } from '@/components/docs/mdx-components';
-import { TableOfContents } from '@/components/docs/toc';
+import { TableOfContents, MobileTOC } from '@/components/docs/toc';
 
 interface DocPageProps {
   params: Promise<{
@@ -46,32 +47,40 @@ export default async function DocPage({ params }: DocPageProps) {
   const headings = extractHeadings(doc.content);
 
   return (
-    <>
-      <article className="relative">
-        {/* Page header */}
-        <div className="space-y-2">
-          <h1 className="scroll-m-20 text-4xl font-bold tracking-tight">
-            {doc.frontmatter.title}
-          </h1>
-          {doc.frontmatter.description && (
-            <p className="text-lg text-muted-foreground">
-              {doc.frontmatter.description}
-            </p>
-          )}
-        </div>
+    <div className="xl:grid xl:grid-cols-[1fr_200px] xl:gap-8">
+      {/* Left column: mobile TOC + article */}
+      <div className="min-w-0">
+        <MobileTOC items={headings} />
+        <article className="relative">
+          {/* Page header */}
+          <div className="space-y-2">
+            <h1 className="scroll-m-20 text-4xl font-bold tracking-tight">
+              {doc.frontmatter.title}
+            </h1>
+            {doc.frontmatter.description && (
+              <p className="text-lg text-muted-foreground">
+                {doc.frontmatter.description}
+              </p>
+            )}
+          </div>
 
-        {/* MDX Content */}
-        <div className="pb-12 pt-8">
-          <MDXRemote source={doc.content} components={mdxComponents} />
-        </div>
-      </article>
+          {/* MDX Content */}
+          <div className="pb-12 pt-8">
+            <MDXRemote
+              source={doc.content}
+              components={mdxComponents}
+              options={{ mdxOptions: { remarkPlugins: [remarkGfm] } }}
+            />
+          </div>
+        </article>
+      </div>
 
-      {/* Table of Contents - Desktop only */}
-      <div className="hidden text-sm xl:block">
-        <div className="sticky top-16 -mt-10 pt-4">
+      {/* Right column: Table of Contents (desktop only) */}
+      <aside className="hidden xl:block text-sm">
+        <div className="sticky top-24 pt-4">
           <TableOfContents items={headings} />
         </div>
-      </div>
-    </>
+      </aside>
+    </div>
   );
 }

packages/docs/app/docs/[[...slug]]/page.tsx

@@ -17,7 +17,7 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
       </aside>
 
       {/* Main content */}
-      <main className="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_200px]">
+      <main className="relative py-6 lg:gap-10 lg:py-8">
         <div className="mx-auto w-full min-w-0">
           {/* Mobile sidebar trigger - Glassmorphic */}
           <div className="flex items-center md:hidden mb-6 p-3 rounded-xl bg-background/50 dark:bg-background/30 backdrop-blur-md border border-white/10 dark:border-white/5">

packages/docs/app/docs/layout.tsx

@@ -63,19 +63,19 @@ export function CommandMenu() {
       </button>
 
       {open && (
-        <div className="fixed inset-0 z-[100]">
-          {/* Solid backdrop */}
+        <div className="fixed inset-0 z-[200]">
+          {/* Light backdrop - less opaque */}
           <div 
-            className="fixed inset-0 bg-black/80 backdrop-blur-sm" 
+            className="fixed inset-0 bg-black/40 backdrop-blur-[2px]" 
             onClick={() => setOpen(false)}
           />
 
-          {/* Dialog */}
-          <div className="fixed left-[50%] top-[20%] z-[101] w-full max-w-lg translate-x-[-50%] p-4">
+          {/* Dialog - above header (z-50) and mobile TOC (z-[60]) */}
+          <div className="fixed left-[50%] top-[20%] z-[201] w-full max-w-lg translate-x-[-50%] p-4">
             <Command className={cn(
               'relative rounded-2xl overflow-hidden',
-              'bg-zinc-900 border border-zinc-700',
-              'shadow-2xl shadow-black/50'
+              'bg-zinc-900/95 dark:bg-zinc-900 border border-zinc-700',
+              'shadow-2xl shadow-black/30'
             )}>
               {/* Search input */}
               <div className="flex items-center border-b border-zinc-700 px-4 bg-zinc-800">