feat: update header, sidebar, and TOC to match mockup exactly

eslint.config.mjs

@@ -0,0 +1,57 @@
+import js from '@eslint/js';
+import typescriptPlugin from '@typescript-eslint/eslint-plugin';
+import typescriptParser from '@typescript-eslint/parser';
+
+export default [
+  js.configs.recommended,
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    plugins: {
+      '@typescript-eslint': typescriptPlugin,
+    },
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        React: 'readonly',
+        JSX: 'readonly',
+        NodeJS: 'readonly',
+        console: 'readonly',
+        process: 'readonly',
+        __dirname: 'readonly',
+        __filename: 'readonly',
+        module: 'readonly',
+        require: 'readonly',
+        exports: 'readonly',
+        document: 'readonly',
+        window: 'readonly',
+        navigator: 'readonly',
+        fetch: 'readonly',
+      },
+    },
+    rules: {
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+      'no-undef': 'off', // TypeScript handles this
+    },
+  },
+  {
+    ignores: [
+      'node_modules/**',
+      '.next/**',
+      'out/**',
+      'build/**',
+      'dist/**',
+      'coverage/**',
+      '*.config.js',
+      '*.config.mjs',
+      'jest.config.js',
+    ],
+  },
+];

package.json

@@ -8,7 +8,7 @@
     "build": "next build",
     "build:search": "tsx scripts/build-search-index.ts",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint .",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,md,mdx,json,css}\"",
     "typecheck": "tsc --noEmit",
     "test": "jest --passWithNoTests",
@@ -28,6 +28,8 @@
     "shiki": "^3.20.0"
   },
   "devDependencies": {
+    "@eslint/eslintrc": "^3.3.3",
+    "@eslint/js": "^9.39.2",
     "@tailwindcss/postcss": "^4.1.18",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^14.3.1",
@@ -37,6 +39,8 @@
     "@types/node": "^20.19.27",
     "@types/react": "^18.3.27",
     "@types/react-dom": "^18.3.7",
+    "@typescript-eslint/eslint-plugin": "^8.50.1",
+    "@typescript-eslint/parser": "^8.50.1",
     "autoprefixer": "^10.4.23",
     "eslint": "^9.15.0",
     "eslint-config-next": "^16.1.1",

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

@@ -115,7 +115,7 @@ export default async function DocPage({ params }: PageProps) {
           <ReactMarkdown
             remarkPlugins={[remarkGfm]}
             components={{
-                  code({ node, inline, className, children, ...props }: any) {
+                  code({ inline, className, children, ...props }: any) {
                     const match = /language-(\w+)/.exec(className || '');
                     const language = match ? match[1] : 'text';
 
@@ -136,16 +136,16 @@ export default async function DocPage({ params }: PageProps) {
                   },
                   // Skip markdown h1 to avoid duplicate with page title
                   h1: () => null,
-                  h2: ({ node, ...props }: any) => <h2 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
-                  h3: ({ node, ...props }: any) => <h3 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
-                  h4: ({ node, ...props }: any) => <h4 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
-                  h5: ({ node, ...props }: any) => <h5 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
-                  h6: ({ node, ...props }: any) => <h6 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
-                  p: ({ node, ...props }: any) => <p {...props} />,
-                  ul: ({ node, ...props }: any) => <ul {...props} />,
-                  ol: ({ node, ...props }: any) => <ol {...props} />,
-                  li: ({ node, ...props }: any) => <li {...props} />,
-              a: ({ node, ...props }: any) => <a {...props} />,
+                  h2: ({ ...props }: any) => <h2 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
+                  h3: ({ ...props }: any) => <h3 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
+                  h4: ({ ...props }: any) => <h4 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
+                  h5: ({ ...props }: any) => <h5 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
+                  h6: ({ ...props }: any) => <h6 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
+                  p: ({ ...props }: any) => <p {...props} />,
+                  ul: ({ ...props }: any) => <ul {...props} />,
+                  ol: ({ ...props }: any) => <ol {...props} />,
+                  li: ({ ...props }: any) => <li {...props} />,
+              a: ({ ...props }: any) => <a {...props} />,
             }}
           >
             {body}
@@ -190,7 +190,7 @@ export async function generateStaticParams() {
           files.push(slug);
         }
       }
-    } catch (error) {
+    } catch {
       // continue
     }
     return files;

src/app/docs/docs.css

@@ -1,5 +1,90 @@
 /* EmberDocs Documentation Pages - Matching ui-mockup-01-documentation-page.html */
 
+/* Header - Exact mockup match */
+.header {
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  padding: 12px 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  backdrop-filter: blur(10px);
+}
+
+.header-content {
+  max-width: 1920px;
+  margin: 0 auto;
+  padding: 0 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 18px;
+  font-weight: 700;
+  text-decoration: none;
+  color: var(--text);
+}
+
+.logo-mark {
+  width: 28px;
+  height: 28px;
+  background: linear-gradient(135deg, var(--purple), var(--amber));
+  border-radius: 6px;
+}
+
+.header-nav {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+}
+
+.nav-link {
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  transition: color 0.2s;
+}
+
+.nav-link:hover {
+  color: var(--text);
+}
+
+.search-trigger {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--text-secondary);
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+  min-width: 200px;
+  font-family: inherit;
+}
+
+.search-trigger:hover {
+  border-color: var(--purple);
+  background: var(--surface);
+}
+
+.kbd {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-size: 12px;
+  font-family: 'JetBrains Mono', monospace;
+}
+
 /* Ensure docs pages use the correct color scheme */
 .docs-layout {
   background: var(--bg);
@@ -33,6 +118,16 @@
   margin-bottom: 8px;
 }
 
+.sidebar-nav {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sidebar-nav li {
+  margin-bottom: 2px;
+}
+
 .sidebar-link {
   display: block;
   padding: 8px 24px;
@@ -215,7 +310,7 @@
 }
 
 /* Table of Contents */
-.docs-toc {
+.toc {
   padding: 48px 24px;
   height: calc(100vh - 64px);
   position: sticky;
@@ -285,7 +380,7 @@
     grid-template-columns: 280px 1fr;
   }
 
-  .docs-toc {
+  .toc {
     display: none;
   }
 }
@@ -401,22 +496,22 @@
 
 /* Scrollbar styling for dark theme */
 .docs-sidebar::-webkit-scrollbar,
-.docs-toc::-webkit-scrollbar {
+.toc::-webkit-scrollbar {
   width: 8px;
 }
 
 .docs-sidebar::-webkit-scrollbar-track,
-.docs-toc::-webkit-scrollbar-track {
+.toc::-webkit-scrollbar-track {
   background: transparent;
 }
 
 .docs-sidebar::-webkit-scrollbar-thumb,
-.docs-toc::-webkit-scrollbar-thumb {
+.toc::-webkit-scrollbar-thumb {
   background: var(--border);
   border-radius: 4px;
 }
 
 .docs-sidebar::-webkit-scrollbar-thumb:hover,
-.docs-toc::-webkit-scrollbar-thumb:hover {
+.toc::-webkit-scrollbar-thumb:hover {
   background: var(--surface-hover);
 }