@aravindc26/velu 0.11.6 → 0.11.9

package/src/cli.ts

@@ -1,5 +1,5 @@
 import { resolve, join, dirname, delimiter } from "node:path";
-import { existsSync, mkdirSync, writeFileSync, readdirSync, copyFileSync, cpSync, rmSync, readFileSync } from "node:fs";
+import { existsSync, mkdirSync, writeFileSync, readdirSync, copyFileSync, cpSync, rmSync, renameSync, readFileSync } from "node:fs";
 import { spawn } from "node:child_process";
 import { fileURLToPath } from "node:url";
 
@@ -214,7 +214,20 @@ function prepareRuntimeOutDir(docsOutDir: string): string {
   const runtimeOutDir = join(PACKAGE_ROOT, ".velu-out");
   if (samePath(docsOutDir, runtimeOutDir)) return runtimeOutDir;
 
-  rmSync(runtimeOutDir, { recursive: true, force: true });
+  try {
+    rmSync(runtimeOutDir, { recursive: true, force: true });
+  } catch {
+    // On Windows the directory may be locked by a previous dev-server process.
+    // Rename it aside so we can proceed; the stale copy is cleaned up later.
+    const stale = `${runtimeOutDir}-stale-${Date.now()}`;
+    try {
+      renameSync(runtimeOutDir, stale);
+      // Best-effort async cleanup — ignore errors if still locked.
+      try { rmSync(stale, { recursive: true, force: true }); } catch {}
+    } catch {
+      // If even rename fails, try to overwrite in place.
+    }
+  }
   cpSync(docsOutDir, runtimeOutDir, { recursive: true, force: true });
   return runtimeOutDir;
 }
@@ -291,6 +304,29 @@ function collectStaticRoutePaths(distDir: string): string[] {
   return Array.from(routes).sort((a, b) => a.localeCompare(b));
 }
 
+function collectMarkdownPaths(distDir: string): string[] {
+  const markdownPaths = new Set<string>();
+
+  function walk(relDir: string) {
+    const absDir = join(distDir, relDir);
+    const entries = readdirSync(absDir, { withFileTypes: true });
+    for (const entry of entries) {
+      const relPath = relDir ? join(relDir, entry.name) : entry.name;
+      if (entry.isDirectory()) {
+        walk(relPath);
+        continue;
+      }
+      if (!entry.isFile()) continue;
+      if (!entry.name.toLowerCase().endsWith(".md")) continue;
+      const normalized = relPath.replace(/\\/g, "/").replace(/^\/+/, "");
+      markdownPaths.add(`/${normalized}`);
+    }
+  }
+
+  walk("");
+  return Array.from(markdownPaths).sort((a, b) => a.localeCompare(b));
+}
+
 function addStaticRouteCompatibility(outDir: string) {
   const distDir = join(outDir, "dist");
   if (!existsSync(distDir)) return;
@@ -349,6 +385,33 @@ function addStaticRouteCompatibility(outDir: string) {
     writeFileSync(redirectsPath, merged, "utf-8");
   }
 
+  const mdPaths = collectMarkdownPaths(distDir);
+  if (mdPaths.length > 0) {
+    const headersPath = join(distDir, "_headers");
+    let mergedHeaders = existsSync(headersPath) ? readFileSync(headersPath, "utf-8") : "";
+    let headerAdded = 0;
+
+    for (const mdPath of mdPaths) {
+      const block = [
+        mdPath,
+        "  Content-Type: text/markdown; charset=utf-8",
+        "  Content-Disposition: inline",
+        "  X-Content-Type-Options: nosniff",
+        "",
+      ].join("\n");
+      if (mergedHeaders.includes(block)) continue;
+      if (mergedHeaders.length > 0 && !mergedHeaders.endsWith("\n")) mergedHeaders += "\n";
+      if (mergedHeaders.length > 0) mergedHeaders += "\n";
+      mergedHeaders += block;
+      headerAdded += 1;
+    }
+
+    if (headerAdded > 0) {
+      writeFileSync(headersPath, mergedHeaders.replace(/\n{3,}/g, "\n\n").trimEnd() + "\n", "utf-8");
+    }
+    console.log(`📄 Added inline markdown headers for ${mdPaths.length} .md routes`);
+  }
+
   console.log(`🔁 Added static compatibility for ${routes.length} routes (${aliasCount} .html aliases, ${redirectAdded} redirects)`);
 }
 

package/src/engine/app/(docs)/[...slug]/layout.tsx

@@ -4,6 +4,7 @@ import type { LinkItemType } from 'fumadocs-ui/layouts/shared';
 import { baseOptions } from '@/lib/layout.shared';
 import { source } from '@/lib/source';
 import {
+  getDropdownOptions,
   getIconLibrary,
   getLanguages,
   getVersionOptions,
@@ -15,6 +16,7 @@ import {
 import { SidebarLinks } from '@/components/sidebar-links';
 import { ProductSwitcher } from '@/components/product-switcher';
 import { VeluIcon } from '@/components/icon';
+import { HeaderTabLink } from '@/components/header-tab-link';
 
 interface LayoutParams {
   slug?: string[];
@@ -222,12 +224,54 @@ function normalizePath(value: string): string {
   return value.replace(/^\/+|\/+$/g, '').toLowerCase();
 }
 
+function normalizeSidebarTabUrl(url: string): string {
+  const trimmed = url.trim();
+  if (trimmed.length <= 1) return trimmed;
+  return trimmed.endsWith('/') ? trimmed.slice(0, -1) : trimmed;
+}
+
 function basename(value: string): string {
   const normalized = normalizePath(value);
   const parts = normalized.split('/').filter(Boolean);
   return parts[parts.length - 1] ?? normalized;
 }
 
+function collectPageUrls(tree: unknown, out: Set<string> = new Set<string>()): Set<string> {
+  if (!tree || typeof tree !== 'object') return out;
+
+  const node = tree as {
+    type?: string;
+    url?: unknown;
+    external?: unknown;
+    index?: { url?: unknown };
+    children?: unknown[];
+  };
+
+  if (node.type === 'page' && node.external !== true && typeof node.url === 'string' && node.url.length > 0) {
+    out.add(normalizeSidebarTabUrl(node.url));
+  }
+
+  if (node.type === 'folder' && typeof node.index?.url === 'string' && node.index.url.length > 0) {
+    out.add(normalizeSidebarTabUrl(node.index.url));
+  }
+
+  if (Array.isArray(node.children)) {
+    for (const child of node.children) collectPageUrls(child, out);
+  }
+
+  return out;
+}
+
+function doesUrlBelongToTab(url: string, tabSlug: string): boolean {
+  const normalizedUrl = normalizePath(url);
+  const normalizedTab = normalizePath(tabSlug);
+  if (!normalizedUrl || !normalizedTab) return false;
+  return normalizedUrl === normalizedTab
+    || normalizedUrl.startsWith(`${normalizedTab}/`)
+    || normalizedUrl.includes(`/${normalizedTab}/`)
+    || normalizedUrl.endsWith(`/${normalizedTab}`);
+}
+
 function resolveMenuTargetUrl(menuPages: string[], tabUrls: Set<string>): string | undefined {
   const urls = Array.from(tabUrls);
   if (urls.length === 0) return undefined;
@@ -271,6 +315,49 @@ function resolveMenuLinksForTab(
   return best;
 }
 
+function withPrefixedPath(url: string, prefix?: string): string {
+  const normalizedPrefix = (prefix ?? '').trim().replace(/^\/+|\/+$/g, '');
+  if (!normalizedPrefix) return url;
+  if (/^(https?:|mailto:|tel:|#)/i.test(url)) return url;
+
+  const hashIndex = url.indexOf('#');
+  const queryIndex = url.indexOf('?');
+  const endIndex = [hashIndex, queryIndex].filter((index) => index >= 0).sort((a, b) => a - b)[0] ?? url.length;
+  const path = url.slice(0, endIndex);
+  const suffix = url.slice(endIndex);
+  if (!path.startsWith('/')) return url;
+
+  const prefixed = path === '/'
+    ? `/${normalizedPrefix}`
+    : path.startsWith(`/${normalizedPrefix}/`) || path === `/${normalizedPrefix}`
+      ? path
+      : `/${normalizedPrefix}${path}`;
+
+  return `${prefixed}${suffix}`;
+}
+
+function resolveRequestPathPrefix(
+  slugInput: string[] | undefined,
+  tabs: Array<{ url: string }>,
+): string | undefined {
+  const slug = (slugInput ?? []).map((segment) => segment.trim().toLowerCase()).filter(Boolean);
+  if (slug.length < 2) return undefined;
+
+  const tabRoots = new Set(
+    tabs
+      .map((tab) => normalizePath(tab.url).split('/').filter(Boolean)[0] ?? '')
+      .map((segment) => segment.toLowerCase())
+      .filter((segment) => segment.length > 0),
+  );
+
+  const first = slug[0] ?? '';
+  const second = slug[1] ?? '';
+  if (!first || !second) return undefined;
+  if (tabRoots.has(first)) return undefined;
+  if (tabRoots.has(second)) return first;
+  return undefined;
+}
+
 function scopeTreeToTab<T extends { children?: unknown[] }>(
   tree: T,
   tabSlug?: string,
@@ -341,22 +428,69 @@ function scopeTreeToTab<T extends { children?: unknown[] }>(
   return { ...tree, children: scopedChildren } as T;
 }
 
+function flattenSingleRootFolder<T extends { children?: unknown[] }>(tree: T): T {
+  const topChildren = Array.isArray(tree.children) ? tree.children : [];
+  if (topChildren.length === 0) return tree;
+
+  const rootFolders = topChildren.filter((child) => {
+    const node = child as PageTreeFolderNode;
+    return node?.type === 'folder' && node.root === true;
+  }) as PageTreeFolderNode[];
+
+  if (rootFolders.length !== 1) return tree;
+  const rootFolder = rootFolders[0];
+  const rootChildren = Array.isArray(rootFolder.children) ? rootFolder.children : [];
+  if (rootChildren.length === 0) return tree;
+
+  const nonRootChildren = topChildren.filter((child) => child !== rootFolder);
+  return { ...tree, children: [...rootChildren, ...nonRootChildren] } as T;
+}
+
 export default async function SlugLayout({ children, params }: SlugLayoutProps) {
   const resolvedParams = await params;
   const locale = resolveLocale(resolvedParams.slug);
+  const localePageTree = source.getPageTree(locale);
   const versions = getVersionOptions();
   const products = getProductOptions();
+  const dropdowns = getDropdownOptions();
   const iconLibrary = getIconLibrary();
   const currentVersion = resolveCurrentVersion(resolvedParams.slug, versions);
   const currentProduct = resolveCurrentProduct(resolvedParams.slug, products);
   const { containerSlug, tabSlug: currentTabSlug } = resolveTabContext(resolvedParams.slug);
   const activePrefix = currentVersion?.slug ?? currentProduct?.slug;
-  const containerScopedTree = filterTreeBySlugPrefix(source.getPageTree(locale), activePrefix);
+  const containerScopedTree = filterTreeBySlugPrefix(localePageTree, activePrefix);
   const rawTree = scopeTreeToTab(containerScopedTree, currentTabSlug, containerSlug);
-  const navbarTabs = buildNavbarTabs(source.getPageTree(locale)) ?? [];
+  const activeTree = dropdowns.length > 0 ? flattenSingleRootFolder(rawTree) : rawTree;
+  const navbarTabs = buildNavbarTabs(localePageTree) ?? [];
+  const allPageUrls = collectPageUrls(localePageTree);
+  const requestPathPrefix = resolveRequestPathPrefix(resolvedParams.slug, navbarTabs);
   const tabMenuDefinitions = getTabMenuDefinitions();
-  const tree = renderIconsInTree(rawTree, iconLibrary);
+  const tree = renderIconsInTree(activeTree, iconLibrary);
   const base = baseOptions();
+  const dropdownTabs = dropdowns.map((dropdown) => {
+    const defaultUrl = withTrailingSlashUrl(dropdown.defaultPath);
+    const matchingUrls = Array.from(allPageUrls).filter((url) => (
+      doesUrlBelongToTab(url, dropdown.slug)
+      || dropdown.tabSlugs.some((tabSlug) => doesUrlBelongToTab(url, tabSlug))
+    ));
+    const urls = new Set<string>(matchingUrls);
+    urls.add(normalizeSidebarTabUrl(defaultUrl));
+
+    return {
+      url: defaultUrl,
+      urls,
+      title: dropdown.dropdown,
+      description: dropdown.description,
+      icon: dropdown.icon ? (
+        <VeluIcon
+          name={dropdown.icon}
+          iconType={dropdown.iconType}
+          library={iconLibrary}
+          fallback={false}
+        />
+      ) : undefined,
+    };
+  });
   const headerTabLinks: LinkItemType[] = navbarTabs
     .map((tab): LinkItemType | null => {
       const tabText = typeof tab.title === 'string' ? tab.title : '';
@@ -371,22 +505,27 @@ export default async function SlugLayout({ children, params }: SlugLayoutProps)
         return {
           type: 'menu',
           text: tabText,
-          url: withTrailingSlashUrl(tab.url),
+          url: withTrailingSlashUrl(withPrefixedPath(tab.url, requestPathPrefix)),
           active: 'nested-url',
           secondary: false,
           items: menuLinks.map((item) => ({
             text: item.text,
-            url: withTrailingSlashUrl(item.url),
+            url: withTrailingSlashUrl(withPrefixedPath(item.url, requestPathPrefix)),
             active: 'nested-url',
           })),
         };
       }
 
       return {
-        text: tabText,
-        url: withTrailingSlashUrl(tab.url),
-        active: 'nested-url',
+        type: 'custom',
         secondary: false,
+        children: (
+          <HeaderTabLink
+            text={tabText}
+            href={withTrailingSlashUrl(withPrefixedPath(tab.url, requestPathPrefix))}
+            urls={Array.from(tab.urls).map((url) => withTrailingSlashUrl(withPrefixedPath(url, requestPathPrefix)))}
+          />
+        ),
       };
     })
     .filter((link): link is LinkItemType => link !== null);
@@ -395,12 +534,15 @@ export default async function SlugLayout({ children, params }: SlugLayoutProps)
     <DocsLayout
       tree={tree}
       sidebar={{
+        tabs: dropdownTabs.length > 0 ? dropdownTabs : undefined,
         collapsible: true,
-        banner: products.length > 1 ? (
-          <div className="velu-sidebar-banner">
-            <ProductSwitcher products={products} iconLibrary={iconLibrary} />
-          </div>
-        ) : undefined,
+        banner: products.length > 1
+          ? (
+            <div className="velu-sidebar-banner">
+              <ProductSwitcher products={products} iconLibrary={iconLibrary} />
+            </div>
+          )
+          : undefined,
         footer: ({ className, children, ...props }: any) => (
           <div
             className={['velu-sidebar-footer-shell', className].filter(Boolean).join(' ')}

package/src/engine/app/(docs)/[...slug]/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { readFile } from 'node:fs/promises';
+import { readFile, stat } from 'node:fs/promises';
 import { join } from 'node:path';
 import { parse as parseYaml } from 'yaml';
 import { createRelativeLink } from 'fumadocs-ui/mdx';
@@ -14,13 +14,26 @@ import { getMDXComponents } from '@/mdx-components';
 import { source } from '@/lib/source';
 import { VeluManualApiPlayground } from '@/components/manual-api-playground';
 import { VeluOpenAPI, VeluOpenAPISchema } from '@/components/openapi';
-import { getApiConfig, getLanguages, getVersionOptions, getProductOptions, getSeoConfig, getSiteName, getSiteOrigin } from '@/lib/velu';
+import {
+  getApiConfig,
+  getContextualOptions,
+  getFooterSocials,
+  getLanguages,
+  getMetadataConfig,
+  getVersionOptions,
+  getProductOptions,
+  getSeoConfig,
+  getSiteDescription,
+  getSiteName,
+  getSiteOrigin,
+} from '@/lib/velu';
 import { CopyPageButton } from '@/components/copy-page';
 import { ChangelogFilters } from '@/components/changelog-filters';
 import { VeluImageZoomFallback } from '@/components/image-zoom-fallback';
 import { OpenApiTocSync } from '@/components/openapi-toc-sync';
 import { TocExamples } from '@/components/toc-examples';
 import { PageFeedback } from '@/components/page-feedback';
+import { VeluIcon } from '@/components/icon';
 import { parseChangelogFromMarkdown, parseFrontmatterBoolean } from '@/lib/changelog';
 
 interface RouteParams {
@@ -58,7 +71,12 @@ interface InlineApiDoc {
   method: string;
 }
 
-async function loadMarkdownForSlug(slug: string[], locale: string, hasI18n: boolean): Promise<string | undefined> {
+interface LoadedMarkdown {
+  content: string;
+  modifiedAt?: Date;
+}
+
+async function loadMarkdownForSlug(slug: string[], locale: string, hasI18n: boolean): Promise<LoadedMarkdown | undefined> {
   const rel = slug.join('/');
   const docsRoots = [
     join(process.cwd(), 'content', 'docs'),
@@ -71,7 +89,12 @@ async function loadMarkdownForSlug(slug: string[], locale: string, hasI18n: bool
 
   for (const filePath of paths) {
     try {
-      return await readFile(filePath, 'utf-8');
+      const content = await readFile(filePath, 'utf-8');
+      const stats = await stat(filePath).catch(() => null);
+      return {
+        content,
+        modifiedAt: stats?.mtime,
+      };
     } catch {
       // ignore and continue
     }
@@ -80,6 +103,14 @@ async function loadMarkdownForSlug(slug: string[], locale: string, hasI18n: bool
   return undefined;
 }
 
+function formatLastModifiedDate(value: Date): string {
+  return new Intl.DateTimeFormat('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  }).format(value);
+}
+
 function resolveLocaleSlug(slugInput: string[] | undefined) {
   const languages = getLanguages();
   const defaultLanguage = languages[0] ?? 'en';
@@ -555,9 +586,11 @@ function buildInlineApiDoc(
 
 export default async function Page({ params }: PageProps) {
   const resolvedParams = await params;
+  const metadataConfig = getMetadataConfig();
   const { locale, pageSlug } = resolveLocaleSlug(resolvedParams.slug);
   const { locale: filterLocale, version, product } = resolveContextFromSlug(resolvedParams.slug);
   const hasI18n = getLanguages().length > 1;
+  const footerSocials = getFooterSocials();
 
   const page = hasI18n ? source.getPage(pageSlug, locale) : source.getPage(pageSlug);
 
@@ -566,7 +599,11 @@ export default async function Page({ params }: PageProps) {
   const pageDataRecord = (page.data as unknown) as Record<string, unknown>;
   const MDX = pageDataRecord.body as any;
   if (typeof MDX !== 'function') notFound();
-  const sourceMarkdown = await loadMarkdownForSlug(pageSlug, locale, hasI18n);
+  const loadedMarkdown = await loadMarkdownForSlug(pageSlug, locale, hasI18n);
+  const sourceMarkdown = loadedMarkdown?.content;
+  const lastModifiedLabel = metadataConfig.timestamp && loadedMarkdown?.modifiedAt
+    ? formatLastModifiedDate(loadedMarkdown.modifiedAt)
+    : undefined;
   const dataMarkdown = typeof pageDataRecord.processedMarkdown === 'string'
     ? String(pageDataRecord.processedMarkdown)
     : undefined;
@@ -680,7 +717,7 @@ export default async function Page({ params }: PageProps) {
             {isDeprecatedPage ? <span className="velu-pill velu-pill-deprecated velu-page-deprecated-badge">Deprecated</span> : null}
           </div>
           <div className="velu-title-actions">
-            <CopyPageButton />
+            <CopyPageButton options={getContextualOptions()} mcpUrl={getSiteOrigin() + '/mcp'} />
             {showRssButton ? (
               <a className="velu-rss-button" href={rssHref} aria-label="Subscribe to this changelog RSS feed">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
@@ -693,6 +730,9 @@ export default async function Page({ params }: PageProps) {
           </div>
         </div>
         {page.data.description ? <DocsDescription>{page.data.description}</DocsDescription> : null}
+        {lastModifiedLabel ? (
+          <p className="velu-page-last-updated">Last updated {lastModifiedLabel}</p>
+        ) : null}
         <DocsBody>
           {!hasExplicitApiRendering && inlineApiDoc && playgroundDisplay === 'interactive' ? (
             <VeluOpenAPI
@@ -770,7 +810,34 @@ export default async function Page({ params }: PageProps) {
         </section>
       </div>
       <footer className="velu-footer">
-        Powered by <a href="https://getvelu.com" target="_blank" rel="noopener noreferrer">Velu</a>
+        {footerSocials.length > 0 ? (
+          <div className="velu-footer-socials" aria-label="Social links">
+            {footerSocials.map((social) => (
+              <a
+                key={`${social.key}:${social.href}`}
+                href={social.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="velu-footer-social-link"
+                aria-label={social.label}
+                title={social.label}
+              >
+                <VeluIcon
+                  name={social.icon}
+                  iconType={social.iconType}
+                  library="fontawesome"
+                  className="velu-footer-social-icon"
+                  fallback={false}
+                />
+              </a>
+            ))}
+          </div>
+        ) : (
+          <span />
+        )}
+        <div className="velu-footer-powered">
+          Powered by <a href="https://getvelu.com" target="_blank" rel="noopener noreferrer">Velu</a>
+        </div>
       </footer>
     </DocsPage>
   );
@@ -804,7 +871,8 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
 
   if (!page) notFound();
 
-  const sourceMarkdown = await loadMarkdownForSlug(pageSlug, locale, hasI18n);
+  const loadedMarkdown = await loadMarkdownForSlug(pageSlug, locale, hasI18n);
+  const sourceMarkdown = loadedMarkdown?.content;
   const pageDataRecord = (page.data as unknown) as Record<string, unknown>;
   const dataMarkdown = typeof pageDataRecord.processedMarkdown === 'string'
     ? String(pageDataRecord.processedMarkdown)
@@ -835,7 +903,7 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
     || (mergedMetatags.robots ?? '').toLowerCase().includes('none');
   const titleOverride = mergedMetatags.title?.trim();
   const resolvedTitle = titleOverride || `${page.data.title} - ${siteName}`;
-  const resolvedDescription = (mergedMetatags.description?.trim() || page.data.description || '').trim() || undefined;
+  const resolvedDescription = (mergedMetatags.description?.trim() || page.data.description || getSiteDescription() || '').trim() || undefined;
   const generatedSocialImage = buildGeneratedOgImagePath(pageUrl);
   const fallbackImage = mergedMetatags['og:image']
     || mergedMetatags['twitter:image']

package/src/engine/app/copy-page.css

@@ -32,6 +32,12 @@
   margin-top: 0.35rem;
 }
 
+.velu-page-last-updated {
+  margin: 0.35rem 0 0;
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+  font-size: 0.8125rem;
+}
+
 .velu-rss-button {
   display: inline-flex;
   align-items: center;
@@ -155,10 +161,20 @@
   background-color: var(--color-fd-accent, #27272a);
 }
 
+.velu-copy-option-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  margin-top: 0.15rem;
+}
+
+.velu-copy-option-icon svg,
 .velu-copy-option svg {
   flex-shrink: 0;
   opacity: 0.7;
-  margin-top: 0.15rem;
   overflow: visible;
 }
 

package/src/engine/app/global.css

@@ -7,6 +7,69 @@ body {
   min-height: 100vh;
 }
 
+body:has(.velu-announcement) #nd-docs-layout,
+body:has(.velu-announcement) #nd-notebook-layout {
+  --fd-banner-height: var(--velu-announcement-h, 0px) !important;
+}
+
+/* ── Global announcement banner ── */
+.velu-announcement {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0.5rem 1rem;
+  background-color: var(--color-fd-primary);
+  color: #fff;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  text-align: center;
+  gap: 0.5rem;
+  border-radius: 0;
+  margin: 0;
+  border: none;
+}
+
+.velu-announcement a {
+  color: #fff;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.velu-announcement a:hover {
+  opacity: 0.85;
+}
+
+.velu-announcement-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.velu-announcement-dismiss {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 0.25rem;
+  background: transparent;
+  color: #fff;
+  font-size: 1rem;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: opacity 0.15s;
+}
+
+.velu-announcement-dismiss:hover {
+  opacity: 1;
+}
+
 .velu-nav-brand {
   display: inline-flex;
   align-items: center;
@@ -581,13 +644,50 @@ nextjs-portal {
 
 .velu-footer {
   margin-top: 3rem;
-  padding-top: 1.5rem;
+  padding-top: 1.1rem;
   border-top: 1px solid var(--color-fd-border);
-  text-align: right;
-  font-size: 1.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  font-size: 1rem;
   color: var(--color-fd-muted-foreground);
 }
 
+.velu-footer-socials {
+  display: inline-flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.velu-footer-social-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-fd-muted-foreground);
+  opacity: 0.78;
+  text-decoration: none;
+  transition: color 0.15s, opacity 0.15s;
+}
+
+.velu-footer-social-link:hover {
+  color: var(--color-fd-foreground);
+  opacity: 1;
+}
+
+.velu-footer-social-icon {
+  width: 1.05rem;
+  height: 1.05rem;
+  flex-shrink: 0;
+}
+
+.velu-footer-powered {
+  margin-left: auto;
+  font-size: 1.15rem;
+  line-height: 1.3;
+}
+
 .velu-page-feedback-wrap {
   margin-top: 2.75rem;
   display: grid;
@@ -867,16 +967,22 @@ nextjs-portal {
   }
 }
 
-.velu-footer a {
+.velu-footer-powered a {
   color: var(--color-fd-primary);
   font-weight: 600;
   text-decoration: none;
 }
 
-.velu-footer a:hover {
+.velu-footer-powered a:hover {
   text-decoration: underline;
 }
 
+@media (max-width: 768px) {
+  .velu-footer-powered {
+    margin-left: 0;
+  }
+}
+
 [data-card].velu-card-horizontal {
   display: grid !important;
   grid-template-columns: 2.25rem minmax(0, 1fr);