@aravindc26/velu 0.13.8 → 0.13.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aravindc26/velu",
-  "version": "0.13.8",
+  "version": "0.13.11",
   "description": "A modern documentation site generator powered by Markdown and JSON configuration",
   "type": "module",
   "license": "MIT",

package/src/cli.ts

@@ -181,10 +181,12 @@ async function lint(docsDir: string) {
 interface PathEntry {
   path: string;
   file: string | null;
+  tab: string | null;
+  tabSlug: string | null;
 }
 
 async function paths(docsDir: string) {
-  const { collectPagesByLanguage } = await import("./validate.js");
+  const { collectPagesWithTabsByLanguage } = await import("./validate.js");
   const { normalizeConfigNavigation } = await import("./navigation-normalize.js");
   const { readFileSync, existsSync } = await import("node:fs");
   const { join } = await import("node:path");
@@ -197,23 +199,31 @@ async function paths(docsDir: string) {
 
   const raw = JSON.parse(readFileSync(configPath, "utf-8"));
   const config = normalizeConfigNavigation(raw);
-  const pagesByLanguage = collectPagesByLanguage(config);
+  const pagesByLanguage = collectPagesWithTabsByLanguage(config);
   const groupedEntries: Record<string, PathEntry[]> = {};
   const flatEntries: PathEntry[] = [];
 
   for (const [language, pages] of Object.entries(pagesByLanguage)) {
-    const entries: PathEntry[] = pages.map((pagePath) => {
+    const entries: PathEntry[] = pages.map((pageWithTab) => {
+      const pagePath = pageWithTab.page;
       // Check for .mdx first, then .md
       const mdxPath = join(docsDir, `${pagePath}.mdx`);
       const mdPath = join(docsDir, `${pagePath}.md`);
 
+      const entry: PathEntry = {
+        path: pagePath,
+        file: null,
+        tab: pageWithTab.tab,
+        tabSlug: pageWithTab.tabSlug,
+      };
+
       if (existsSync(mdxPath)) {
-        return { path: pagePath, file: `${pagePath}.mdx` };
-      }
-      if (existsSync(mdPath)) {
-        return { path: pagePath, file: `${pagePath}.md` };
+        entry.file = `${pagePath}.mdx`;
+      } else if (existsSync(mdPath)) {
+        entry.file = `${pagePath}.md`;
       }
-      return { path: pagePath, file: null };
+
+      return entry;
     });
     groupedEntries[language] = entries;
     flatEntries.push(...entries);

package/src/engine/app/_preview/[sessionId]/layout.tsx

@@ -1,6 +1,7 @@
+import type { Metadata } from 'next';
 import type { ReactNode } from 'react';
 import { loadSessionConfigSource, getSessionThemeCss } from '@/lib/preview-config';
-import { getBannerConfig, getFontsConfig, getSiteFavicon } from '@/lib/velu';
+import { getBannerConfig, getFontsConfig, getSiteDescription, getSiteFavicon, getSiteName } from '@/lib/velu';
 import { VeluBanner } from '@/components/banner';
 
 interface LayoutProps {
@@ -8,6 +9,18 @@ interface LayoutProps {
   params: Promise<{ sessionId: string }>;
 }
 
+export async function generateMetadata({ params }: { params: Promise<{ sessionId: string }> }): Promise<Metadata> {
+  const { sessionId } = await params;
+  const configSource = loadSessionConfigSource(sessionId);
+  if (!configSource) return {};
+  const title = getSiteName(configSource);
+  const description = getSiteDescription(configSource);
+  return {
+    ...(title ? { title: { default: title, template: `%s - ${title}` } } : {}),
+    ...(description ? { description } : {}),
+  };
+}
+
 /**
  * Session layout: injects per-session theme CSS, Google Fonts, and banner.
  * Uses React 19 resource hoisting (<style precedence> / <link precedence>)

package/src/engine/lib/preview-config.ts

@@ -6,6 +6,7 @@ import { existsSync, readFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { normalizeConfigNavigation } from './navigation-normalize';
 import type { VeluConfigSource, VeluConfig } from './velu';
+import { getFontsConfig } from './velu';
 
 const WORKSPACE_DIR = process.env.WORKSPACE_DIR || '/mnt/nfs_share/editor_sessions';
 const PRIMARY_CONFIG_NAME = 'docs.json';
@@ -91,38 +92,80 @@ function textColorFor(hex: string): string {
 }
 
 /**
- * Generate CSS custom properties for a session's primary color theme.
+ * Generate CSS custom properties for a session's primary color theme and font overrides.
  */
 export function getSessionThemeCss(sessionId: string): string | null {
   const configSource = loadSessionConfigSource(sessionId);
-  const colors = configSource?.config.colors;
-  if (!colors?.primary) return null;
+  if (!configSource) return null;
 
-  const { primary, light, dark } = colors;
-  const lightAccent = light || primary;
-  const darkAccent = dark || primary;
   const lines: string[] = [];
 
-  if (lightAccent) {
-    const accentLow = mixColors(lightAccent, '#ffffff', 0.15);
-    lines.push(':root {');
-    lines.push(`  --color-fd-primary: ${lightAccent};`);
-    lines.push(`  --color-fd-primary-foreground: ${textColorFor(lightAccent)};`);
-    lines.push(`  --color-fd-accent: ${accentLow};`);
-    lines.push(`  --color-fd-accent-foreground: ${textColorFor(accentLow)};`);
-    lines.push(`  --color-fd-ring: ${lightAccent};`);
-    lines.push('}');
+  // ── Color overrides ──
+  const colors = configSource.config.colors;
+  if (colors?.primary) {
+    const { primary, light, dark } = colors;
+    const lightAccent = light || primary;
+    const darkAccent = dark || primary;
+
+    if (lightAccent) {
+      const accentLow = mixColors(lightAccent, '#ffffff', 0.15);
+      lines.push(':root {');
+      lines.push(`  --color-fd-primary: ${lightAccent};`);
+      lines.push(`  --color-fd-primary-foreground: ${textColorFor(lightAccent)};`);
+      lines.push(`  --color-fd-accent: ${accentLow};`);
+      lines.push(`  --color-fd-accent-foreground: ${textColorFor(accentLow)};`);
+      lines.push(`  --color-fd-ring: ${lightAccent};`);
+      lines.push('}');
+    }
+
+    if (darkAccent) {
+      const accentLow = mixColors(darkAccent, '#000000', 0.3);
+      lines.push('.dark {');
+      lines.push(`  --color-fd-primary: ${darkAccent};`);
+      lines.push(`  --color-fd-primary-foreground: ${textColorFor(darkAccent)};`);
+      lines.push(`  --color-fd-accent: ${accentLow};`);
+      lines.push(`  --color-fd-accent-foreground: ${textColorFor(accentLow)};`);
+      lines.push(`  --color-fd-ring: ${darkAccent};`);
+      lines.push('}');
+    }
   }
 
-  if (darkAccent) {
-    const accentLow = mixColors(darkAccent, '#000000', 0.3);
-    lines.push('.dark {');
-    lines.push(`  --color-fd-primary: ${darkAccent};`);
-    lines.push(`  --color-fd-primary-foreground: ${textColorFor(darkAccent)};`);
-    lines.push(`  --color-fd-accent: ${accentLow};`);
-    lines.push(`  --color-fd-accent-foreground: ${textColorFor(accentLow)};`);
-    lines.push(`  --color-fd-ring: ${darkAccent};`);
-    lines.push('}');
+  // ── Font overrides ──
+  const fontsConfig = getFontsConfig(configSource);
+  if (fontsConfig) {
+    const { heading, body } = fontsConfig;
+    // @font-face for custom sources
+    for (const def of [heading, body]) {
+      if (def?.source) {
+        const fmt = def.format || (def.source.endsWith('.woff2') ? 'woff2' : 'woff');
+        lines.push(`@font-face {`);
+        lines.push(`  font-family: '${def.family}';`);
+        lines.push(`  src: url('${def.source}') format('${fmt}');`);
+        if (def.weight) lines.push(`  font-weight: ${def.weight};`);
+        lines.push(`  font-display: swap;`);
+        lines.push(`}`);
+      }
+    }
+    // CSS variable overrides
+    const vars: string[] = [];
+    if (body) {
+      vars.push(`  --font-fd-sans: '${body.family}', ui-sans-serif, system-ui, sans-serif;`);
+    }
+    if (heading) {
+      vars.push(`  --velu-font-heading: '${heading.family}', ui-sans-serif, system-ui, sans-serif;`);
+    }
+    if (vars.length) {
+      lines.push(':root {');
+      lines.push(...vars);
+      lines.push('}');
+    }
+    // Heading font-family rule
+    if (heading) {
+      lines.push('h1, h2, h3, h4, h5, h6 {');
+      lines.push(`  font-family: var(--velu-font-heading);`);
+      if (heading.weight) lines.push(`  font-weight: ${heading.weight};`);
+      lines.push('}');
+    }
   }
 
   return lines.length > 0 ? lines.join('\n') : null;

package/src/engine/source.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig, defineDocs } from 'fumadocs-mdx/config';
 import { metaSchema, pageSchema } from 'fumadocs-core/source/schema';
 import { transformerMetaHighlight } from '@shikijs/transformers';
-import { remarkCodeFilenameToTitle, sharedRehypeCodeOptions } from '@core/lib/remark-plugins';
+import { remarkCodeFilenameToTitle, remarkStripJsxFromHeadings, sharedRehypeCodeOptions } from '@core/lib/remark-plugins';
 import { z } from 'zod';
 
 const contentDir = process.env.PREVIEW_CONTENT_DIR || 'content/docs';
@@ -27,7 +27,7 @@ export const docs = defineDocs({
 
 export default defineConfig({
   mdxOptions: {
-    remarkPlugins: [remarkCodeFilenameToTitle],
+    remarkPlugins: [remarkStripJsxFromHeadings, remarkCodeFilenameToTitle],
     rehypeCodeOptions: ({
       ...sharedRehypeCodeOptions,
       transformers: [transformerMetaHighlight()],

package/src/engine-core/components/assistant.tsx

@@ -68,6 +68,7 @@ function initAssistant() {
     eventSource: EventSource | null;
     expanded: boolean;
     bootstrapped: boolean;
+    feedback: Record<string, 'up' | 'down'>;
   } = {
     conversationId: null,
     conversationToken: null,
@@ -75,6 +76,7 @@ function initAssistant() {
     eventSource: null,
     expanded: false,
     bootstrapped: false,
+    feedback: {},
   };
 
   const askBar = document.getElementById('veluAskBar')!;
@@ -93,6 +95,7 @@ function initAssistant() {
       sessionStorage.setItem('velu-conv-id', state.conversationId || '');
       sessionStorage.setItem('velu-conv-token', state.conversationToken || '');
       sessionStorage.setItem('velu-last-seq', String(state.lastSeq));
+      sessionStorage.setItem('velu-feedback', JSON.stringify(state.feedback));
     } catch {}
   }
 
@@ -117,6 +120,7 @@ function initAssistant() {
     state.conversationId = null;
     state.conversationToken = null;
     state.lastSeq = 0;
+    state.feedback = {};
     if (state.eventSource) { state.eventSource.close(); state.eventSource = null; }
     messagesEl.innerHTML = '';
     chatInput.value = '';
@@ -143,6 +147,28 @@ function initAssistant() {
       .catch(() => {});
   }
 
+  function submitFeedback(messageId: number, rating: 'up' | 'down') {
+    return fetch(API_BASE + '/messages/' + messageId + '/feedback', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({ rating }),
+    }).then((r) => r.json());
+  }
+
+  function retractFeedback(messageId: number) {
+    return fetch(API_BASE + '/messages/' + messageId + '/feedback', {
+      method: 'DELETE',
+      credentials: 'include',
+    }).then((r) => r.json());
+  }
+
+  function saveFeedbackState() {
+    try {
+      sessionStorage.setItem('velu-feedback', JSON.stringify(state.feedback));
+    } catch {}
+  }
+
   function formatContent(text: string, citations: any[]) {
     let html = text
       .replace(/&/g, '&amp;')
@@ -162,9 +188,10 @@ function initAssistant() {
     return html;
   }
 
-  function addMessage(role: string, content: string, citations: any[] = []) {
+  function addMessage(role: string, content: string, citations: any[] = [], messageId?: number) {
     const msgDiv = document.createElement('div');
     msgDiv.className = 'velu-msg velu-msg-' + role;
+    if (messageId) msgDiv.setAttribute('data-message-id', String(messageId));
     const bubble = document.createElement('div');
     bubble.className = 'velu-msg-bubble velu-msg-bubble-' + role;
     bubble.innerHTML = formatContent(content, citations);
@@ -188,17 +215,121 @@ function initAssistant() {
       const actions = document.createElement('div');
       actions.className = 'velu-msg-actions';
       actions.innerHTML =
-        '<button class="velu-msg-action" title="Like"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg></button>' +
-        '<button class="velu-msg-action" title="Dislike"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"/></svg></button>' +
-        '<button class="velu-msg-action velu-msg-copy" title="Copy"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>';
+        '<button class="velu-msg-action velu-msg-like" title="Like"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg></button>' +
+        '<button class="velu-msg-action velu-msg-dislike" title="Dislike"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"/></svg></button>' +
+        '<button class="velu-msg-action velu-msg-copy" title="Copy"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>' +
+        '<button class="velu-msg-action velu-msg-regenerate" title="Regenerate"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><polyline points="23 20 23 14 17 14"/><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/></svg></button>';
       msgDiv.appendChild(actions);
 
-      const copyBtn = actions.querySelector('.velu-msg-copy');
+      // Restore feedback state if we have it for this message
+      const existingRating = messageId ? state.feedback[messageId] : null;
+      const likeBtn = actions.querySelector('.velu-msg-like') as HTMLElement;
+      const dislikeBtn = actions.querySelector('.velu-msg-dislike') as HTMLElement;
+      if (existingRating === 'up') likeBtn.classList.add('velu-msg-action-active');
+      if (existingRating === 'down') dislikeBtn.classList.add('velu-msg-action-active');
+
+      // Like button
+      if (likeBtn && dislikeBtn) {
+        likeBtn.onclick = () => {
+          if (!messageId) return;
+          const isActive = likeBtn.classList.contains('velu-msg-action-active');
+          if (isActive) {
+            // Retract
+            likeBtn.classList.remove('velu-msg-action-active');
+            delete state.feedback[messageId];
+            saveFeedbackState();
+            retractFeedback(messageId).catch(() => {});
+          } else {
+            // Submit up
+            likeBtn.classList.add('velu-msg-action-active');
+            dislikeBtn.classList.remove('velu-msg-action-active');
+            state.feedback[messageId] = 'up';
+            saveFeedbackState();
+            submitFeedback(messageId, 'up').catch(() => {});
+          }
+        };
+        dislikeBtn.onclick = () => {
+          if (!messageId) return;
+          const isActive = dislikeBtn.classList.contains('velu-msg-action-active');
+          if (isActive) {
+            // Retract
+            dislikeBtn.classList.remove('velu-msg-action-active');
+            delete state.feedback[messageId];
+            saveFeedbackState();
+            retractFeedback(messageId).catch(() => {});
+          } else {
+            // Submit down
+            dislikeBtn.classList.add('velu-msg-action-active');
+            likeBtn.classList.remove('velu-msg-action-active');
+            state.feedback[messageId] = 'down';
+            saveFeedbackState();
+            submitFeedback(messageId, 'down').catch(() => {});
+          }
+        };
+      }
+
+      // Copy button
+      const copyBtn = actions.querySelector('.velu-msg-copy') as HTMLElement;
       if (copyBtn) {
-        (copyBtn as HTMLElement).onclick = () => {
+        copyBtn.onclick = () => {
           navigator.clipboard.writeText(content);
-          (copyBtn as HTMLElement).title = 'Copied!';
-          setTimeout(() => { (copyBtn as HTMLElement).title = 'Copy'; }, 1500);
+          copyBtn.classList.add('velu-msg-action-active');
+          copyBtn.title = 'Copied!';
+          setTimeout(() => { copyBtn.classList.remove('velu-msg-action-active'); copyBtn.title = 'Copy'; }, 1500);
+        };
+      }
+
+      // Regenerate button
+      const regenBtn = actions.querySelector('.velu-msg-regenerate') as HTMLElement;
+      if (regenBtn) {
+        regenBtn.onclick = () => {
+          const allMsgs = messagesEl.querySelectorAll('.velu-msg');
+          let lastUserText = '';
+          for (let i = allMsgs.length - 1; i >= 0; i--) {
+            if (allMsgs[i].classList.contains('velu-msg-user')) {
+              const bubble = allMsgs[i].querySelector('.velu-msg-bubble');
+              if (bubble) lastUserText = bubble.textContent || '';
+              break;
+            }
+          }
+          if (lastUserText) {
+            msgDiv.remove();
+            saveState();
+            addThinking();
+            bootstrap()
+              .then(() =>
+                fetch(API_BASE + '/messages', {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json' },
+                  credentials: 'include',
+                  body: JSON.stringify({
+                    message: lastUserText,
+                    conversation_id: state.conversationId,
+                  }),
+                })
+              )
+              .then((r) => {
+                if (r.status === 429) {
+                  removeThinking();
+                  addMessage('assistant', 'Rate limited. Please wait a moment and try again.');
+                  return;
+                }
+                return r.json();
+              })
+              .then((data: any) => {
+                if (!data) return;
+                if (data.conversation_id) state.conversationId = data.conversation_id;
+                if (data.conversation_token) state.conversationToken = data.conversation_token;
+                saveState();
+                if (!state.eventSource || state.eventSource.readyState === 2) {
+                  connectSSE();
+                }
+              })
+              .catch(() => {
+                removeThinking();
+                addMessage('assistant', 'Failed to connect. Please try again.');
+              });
+          }
         };
       }
     }
@@ -233,7 +364,7 @@ function initAssistant() {
         const data = JSON.parse(e.data);
         const msg = data.message || data;
         if (msg.seq) state.lastSeq = msg.seq;
-        addMessage('assistant', msg.content || '', msg.citations || []);
+        addMessage('assistant', msg.content || '', msg.citations || [], msg.id);
       } catch {}
     });
 
@@ -342,9 +473,11 @@ function initAssistant() {
     const savedConvId = sessionStorage.getItem('velu-conv-id');
     const savedConvToken = sessionStorage.getItem('velu-conv-token');
     const savedSeq = sessionStorage.getItem('velu-last-seq');
+    const savedFeedback = sessionStorage.getItem('velu-feedback');
     if (savedConvId) state.conversationId = savedConvId;
     if (savedConvToken) state.conversationToken = savedConvToken;
     if (savedSeq) state.lastSeq = parseInt(savedSeq, 10) || 0;
+    if (savedFeedback) try { state.feedback = JSON.parse(savedFeedback); } catch {}
     if (savedMessages) messagesEl.innerHTML = savedMessages;
     if (savedExpanded === '1') {
       state.expanded = true;

package/src/engine-core/css/assistant.css

@@ -225,6 +225,14 @@
   background-color: var(--color-fd-accent, #27272a);
 }
 
+.velu-msg-action.velu-msg-action-active {
+  color: var(--color-fd-primary, #818cf8);
+}
+
+.velu-msg-action.velu-msg-action-active svg {
+  fill: currentColor;
+}
+
 /* Thinking dots */
 .velu-thinking-dots {
   display: inline-flex;

package/src/engine-core/css/shared.css

@@ -1008,6 +1008,11 @@ nextjs-portal {
   margin: 0 !important;
 }
 
+/* Add spacing between consecutive card groups (Mintlify compat) */
+.velu-card-group + .velu-card-group {
+  margin-top: 0.75rem;
+}
+
 .velu-card-image {
   width: 100%;
   border-radius: 0.55rem;

package/src/engine-core/lib/remark-plugins.ts

@@ -89,6 +89,44 @@ export function remarkCodeFilenameToTitle() {
   return (tree: any) => visit(tree);
 }
 
+/**
+ * Remark plugin that strips JSX/MDX elements (like <Icon />) from headings.
+ *
+ * fumadocs' rehypeToc plugin converts heading content into a static
+ * `export const toc = [...]` at the MDX module level. MDX components
+ * (e.g. Icon) are only injected at render time via getMDXComponents(),
+ * so any JSX reference in a heading causes "ReferenceError: X is not defined"
+ * when the toc export evaluates.
+ *
+ * This plugin removes mdxJsxFlowElement / mdxJsxTextElement nodes from
+ * headings before TOC extraction runs. The heading body still renders
+ * with the component because MDX components are in scope at render time.
+ */
+export function remarkStripJsxFromHeadings() {
+  return (tree: any) => {
+    if (!tree || !Array.isArray(tree.children)) return;
+
+    function visitNode(node: any) {
+      if (
+        node.type === 'heading' &&
+        Array.isArray(node.children)
+      ) {
+        node.children = node.children.filter(
+          (child: any) =>
+            child.type !== 'mdxJsxTextElement' &&
+            child.type !== 'mdxJsxFlowElement',
+        );
+      }
+
+      if (Array.isArray(node.children)) {
+        for (const child of node.children) visitNode(child);
+      }
+    }
+
+    visitNode(tree);
+  };
+}
+
 /**
  * Shared rehype code options for consistent syntax highlighting.
  */

package/src/engine-core/mdx-components.tsx

@@ -190,6 +190,7 @@ export function getMDXComponents(opts: { iconLibrary: VeluIconLibrary; apiConfig
     },
     Accordions: FumaAccordions as any,
     Accordion: FumaAccordion as any,
+    AccordionGroup: FumaAccordions as any,
     CodeGroup: VeluCodeGroup as any,
     Frame: ({ children, caption, hint, className }: any) => (
       <>

package/src/validate.ts

@@ -233,30 +233,43 @@ function isPageString(item: unknown): item is string {
   return typeof item === "string";
 }
 
+interface PageWithTab {
+  page: string;
+  tab: string | null;
+  tabSlug: string | null;
+}
+
 function collectPagesFromTabs(tabs: VeluTab[]): string[] {
-  const pages: string[] = [];
+  return collectPagesWithTabsFromTabs(tabs).map((p) => p.page);
+}
 
-  function collectFromGroup(group: VeluGroup) {
+function collectPagesWithTabsFromTabs(tabs: VeluTab[]): PageWithTab[] {
+  const pages: PageWithTab[] = [];
+
+  function collectFromGroup(group: VeluGroup, tab: string | null, tabSlug: string | null) {
     for (const item of group.pages) {
       if (isPageString(item)) {
-        pages.push(item);
+        pages.push({ page: item, tab, tabSlug });
       } else if (isGroup(item)) {
-        collectFromGroup(item);
+        collectFromGroup(item, tab, tabSlug);
       }
     }
   }
 
   for (const tab of tabs) {
+    const tabName = tab.tab || null;
+    const tabSlug = tab.slug || tabName;
+
     if (tab.pages) {
       for (const item of tab.pages) {
         if (isPageString(item)) {
-          pages.push(item);
+          pages.push({ page: item, tab: tabName, tabSlug });
         }
       }
     }
     if (tab.groups) {
       for (const group of tab.groups) {
-        collectFromGroup(group);
+        collectFromGroup(group, tabName, tabSlug);
       }
     }
   }
@@ -293,6 +306,28 @@ function collectPagesByLanguage(config: VeluConfig): Record<string, string[]> {
   return grouped;
 }
 
+function collectPagesWithTabsByLanguage(config: VeluConfig): Record<string, PageWithTab[]> {
+  const grouped: Record<string, PageWithTab[]> = {};
+
+  if (config.navigation.languages && config.navigation.languages.length > 0) {
+    for (const lang of config.navigation.languages) {
+      grouped[lang.language] = collectPagesWithTabsFromTabs(lang.tabs);
+    }
+    return grouped;
+  }
+
+  const basePages = collectPagesWithTabsFromTabs(config.navigation.tabs ?? []);
+  if (config.languages && config.languages.length > 0) {
+    for (const lang of config.languages) {
+      grouped[lang] = [...basePages];
+    }
+    return grouped;
+  }
+
+  grouped.en = basePages;
+  return grouped;
+}
+
 function validateVeluConfig(docsDir: string, schemaPath: string): { valid: boolean; errors: string[] } {
   const errors: string[] = [];
 
@@ -362,4 +397,4 @@ function validateVeluConfig(docsDir: string, schemaPath: string): { valid: boole
   return { valid: errors.length === 0, errors };
 }
 
-export { validateVeluConfig, collectPages, collectPagesByLanguage, VeluConfig, VeluGroup, VeluTab, VeluSeparator, VeluLink, VeluAnchor };
+export { validateVeluConfig, collectPages, collectPagesByLanguage, collectPagesWithTabsByLanguage, VeluConfig, VeluGroup, VeluTab, VeluSeparator, VeluLink, VeluAnchor, type PageWithTab };