@aravindc26/velu 0.9.1 → 0.11.0

package/src/engine/app/global.css

@@ -1,5 +1,4 @@
 @import 'tailwindcss';
-@import 'fumadocs-ui/css/neutral.css';
 @import 'fumadocs-ui/css/preset.css';
 @import './velu-theme.css';
 
@@ -8,6 +7,10 @@ body {
 }
 
 /* Ensure sidebar/toc widths are set on the grid layout */
+nextjs-portal {
+  display: none !important;
+}
+
 @media (min-width: 768px) {
   #nd-docs-layout[data-sidebar-collapsed='false'] {
     --fd-sidebar-width: 268px;
@@ -19,3 +22,345 @@ body {
     --fd-toc-width: 268px;
   }
 }
+
+.velu-sidebar-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-top: 0.5rem;
+}
+
+.velu-sidebar-banner {
+  display: flex;
+  width: 100%;
+  padding: 0.125rem 0;
+  order: -1;
+}
+
+/* Keep the sidebar title row above the product switcher */
+#nd-sidebar .flex.flex-col > :first-child {
+  order: -2;
+}
+
+.velu-header-version-switcher {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.velu-version-switcher-wrap {
+  position: relative;
+}
+
+.velu-version-switcher {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.25rem 0.5rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.velu-version-switcher:hover {
+  color: var(--color-fd-foreground);
+  background-color: var(--color-fd-accent);
+}
+
+.velu-version-switcher svg {
+  width: 0.9rem;
+  height: 0.9rem;
+}
+
+.velu-version-switcher svg:last-child {
+  width: 0.8rem;
+  height: 0.8rem;
+}
+
+.velu-version-menu {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  right: 0;
+  min-width: 7.5rem;
+  padding: 0.25rem;
+  border-radius: 0.5rem;
+  background-color: var(--color-fd-popover);
+  border: 1px solid var(--color-fd-border);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 60;
+}
+
+.velu-version-option {
+  display: block;
+  width: 100%;
+  padding: 0.35rem 0.5rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.8rem;
+  text-align: left;
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.velu-version-option:hover {
+  background-color: var(--color-fd-accent);
+  color: var(--color-fd-foreground);
+}
+
+.velu-version-option.active {
+  color: var(--color-fd-primary);
+}
+
+.velu-product-switcher-wrap {
+  position: relative;
+  width: 100%;
+}
+
+.velu-product-switcher {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.5rem 0.625rem;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.5rem;
+  background: var(--color-fd-background);
+  color: var(--color-fd-foreground);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: border-color 0.15s, background-color 0.15s;
+}
+
+.velu-product-switcher:hover {
+  border-color: var(--color-fd-primary);
+  background-color: var(--color-fd-accent);
+}
+
+.velu-product-switcher svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+
+.velu-product-switcher-label {
+  flex: 1;
+  text-align: left;
+}
+
+.velu-product-menu {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  right: 0;
+  padding: 0.25rem;
+  border-radius: 0.5rem;
+  background-color: var(--color-fd-popover);
+  border: 1px solid var(--color-fd-border);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 60;
+}
+
+.velu-product-option {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 0.5rem 0.625rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.velu-product-option:hover {
+  background-color: var(--color-fd-accent);
+}
+
+.velu-product-option.active {
+  background-color: var(--color-fd-accent);
+}
+
+.velu-product-option-name {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-fd-foreground);
+}
+
+.velu-product-option.active .velu-product-option-name {
+  color: var(--color-fd-primary);
+}
+
+.velu-product-option-desc {
+  font-size: 0.6875rem;
+  color: var(--color-fd-muted-foreground);
+  margin-top: 0.125rem;
+}
+
+.velu-sidebar-footer-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.velu-sidebar-links {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.velu-sidebar-link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  color: var(--color-fd-muted-foreground);
+  text-decoration: none;
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.velu-sidebar-link:hover {
+  color: var(--color-fd-foreground);
+  background-color: var(--color-fd-accent);
+}
+
+.velu-sidebar-link-text {
+  flex: 1;
+}
+
+.velu-sidebar-link-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  opacity: 0.5;
+  flex-shrink: 0;
+}
+
+.velu-sidebar-link:hover .velu-sidebar-link-icon {
+  opacity: 0.8;
+}
+
+.velu-theme-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  border-radius: 0.5rem;
+  background-color: var(--color-fd-accent);
+  width: fit-content;
+  margin-left: auto;
+}
+
+.velu-lang-switcher {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.5rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+  position: relative;
+}
+
+.velu-lang-switcher:hover {
+  color: var(--color-fd-foreground);
+  background-color: var(--color-fd-accent);
+}
+
+.velu-lang-switcher svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.velu-lang-menu {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 0.25rem;
+  min-width: 8rem;
+  padding: 0.25rem;
+  border-radius: 0.5rem;
+  background-color: var(--color-fd-popover);
+  border: 1px solid var(--color-fd-border);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 50;
+}
+
+.velu-lang-option {
+  display: block;
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.875rem;
+  text-align: left;
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.velu-lang-option:hover {
+  background-color: var(--color-fd-accent);
+  color: var(--color-fd-foreground);
+}
+
+.velu-lang-option.active {
+  color: var(--color-fd-primary);
+}
+
+.velu-theme-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.375rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--color-fd-muted-foreground);
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.velu-theme-btn:hover {
+  color: var(--color-fd-foreground);
+}
+
+.velu-theme-btn.active {
+  background-color: var(--color-fd-background);
+  color: var(--color-fd-foreground);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.velu-footer {
+  margin-top: 3rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--color-fd-border);
+  text-align: right;
+  font-size: 1.2rem;
+  color: var(--color-fd-muted-foreground);
+}
+
+.velu-footer a {
+  color: var(--color-fd-primary);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.velu-footer a:hover {
+  text-decoration: underline;
+}

package/src/engine/app/layout.tsx

@@ -1,7 +1,6 @@
 import type { ReactNode } from 'react';
-import { RootProvider } from 'fumadocs-ui/provider/next';
 import { getAppearance } from '@/lib/velu';
-import { PagefindSearch } from '@/components/search';
+import { Providers } from '@/components/providers';
 import { VeluAssistant } from '@/components/assistant';
 import './global.css';
 import './search.css';
@@ -21,13 +20,10 @@ export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning>
       <body className="min-h-screen" suppressHydrationWarning>
-        <RootProvider
-          theme={theme}
-          search={{ SearchDialog: PagefindSearch }}
-        >
+        <Providers theme={theme}>
           {children}
           <VeluAssistant />
-        </RootProvider>
+        </Providers>
       </body>
     </html>
   );

package/src/engine/app/search.css

@@ -116,3 +116,23 @@
   border-radius: 2px;
   padding: 0 2px;
 }
+
+/* Search filter indicator */
+.fd-search-filters {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--color-fd-border, #27272a);
+  background: var(--color-fd-accent, #27272a);
+  font-size: 0.75rem;
+}
+
+.fd-search-filter-label {
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+}
+
+.fd-search-filter-value {
+  color: var(--color-fd-primary, #818cf8);
+  font-weight: 500;
+}

package/src/engine/components/lang-switcher.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { usePathname } from 'next/navigation';
+
+function GlobeIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+      <path d="M2 12h20" />
+    </svg>
+  );
+}
+
+function nativeLabel(code: string): string {
+  try {
+    const dn = new Intl.DisplayNames([code], { type: 'language' });
+    const name = dn.of(code);
+    if (name) return name.charAt(0).toUpperCase() + name.slice(1);
+  } catch {}
+  return code.toUpperCase();
+}
+
+export function LanguageSwitcher({ languages, defaultLang }: { languages: string[]; defaultLang: string }) {
+  const [open, setOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const pathname = usePathname();
+
+  useEffect(() => setMounted(true), []);
+
+  const current = useMemo(() => {
+    const firstSeg = pathname.split('/').filter(Boolean)[0];
+    return languages.includes(firstSeg ?? '') ? firstSeg! : defaultLang;
+  }, [pathname, languages, defaultLang]);
+
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, []);
+
+  if (languages.length <= 1) return null;
+
+  function switchTo(code: string) {
+    setOpen(false);
+    const segments = pathname.split('/').filter(Boolean);
+    const isLangPrefix = languages.includes(segments[0] ?? '');
+    const rest = isLangPrefix ? segments.slice(1) : segments;
+    const newPath = code === defaultLang
+      ? '/' + rest.join('/')
+      : '/' + code + '/' + rest.join('/');
+    window.location.href = newPath;
+  }
+
+  return (
+    <div ref={ref} style={{ position: 'relative', ...(mounted ? {} : { opacity: 0, pointerEvents: 'none' as const }) }}>
+      <button
+        type="button"
+        className="velu-lang-switcher"
+        onClick={() => mounted && setOpen(!open)}
+      >
+        <GlobeIcon />
+        <span>{nativeLabel(current)}</span>
+      </button>
+      {open && (
+        <div className="velu-lang-menu">
+          {languages.map((code) => (
+            <button
+              key={code}
+              type="button"
+              className={`velu-lang-option ${code === current ? 'active' : ''}`}
+              onClick={() => switchTo(code)}
+            >
+              {nativeLabel(code)}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/engine/components/product-switcher.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import type { VeluProductOption } from '@/lib/velu';
+
+function ChevronDownIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+
+export function ProductSwitcher({ products }: { products: VeluProductOption[] }) {
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const current = useMemo(() => {
+    const firstSeg = pathname.split('/').filter(Boolean)[0] ?? '';
+    return products.find((p) => p.slug === firstSeg) ?? products[0];
+  }, [pathname, products]);
+
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, []);
+
+  if (!current || products.length <= 1) return null;
+
+  function switchTo(target: VeluProductOption) {
+    setOpen(false);
+
+    const segments = pathname.split('/').filter(Boolean);
+    const firstSeg = segments[0] ?? '';
+
+    if (current && current.slug === firstSeg) {
+      // Replace the product segment, keep tab/group/page segments
+      const rest = segments.slice(1);
+      if (rest.length > 0) {
+        window.location.href = '/' + [target.slug, ...rest].join('/');
+        return;
+      }
+    }
+
+    window.location.href = target.defaultPath;
+  }
+
+  return (
+    <div className="velu-product-switcher-wrap" ref={ref}>
+      <button type="button" className="velu-product-switcher" onClick={() => setOpen((v) => !v)}>
+        <span className="velu-product-switcher-label">{current.product}</span>
+        <ChevronDownIcon />
+      </button>
+      {open && (
+        <div className="velu-product-menu">
+          {products.map((product) => (
+            <button
+              key={product.slug}
+              type="button"
+              className={`velu-product-option ${product.slug === current.slug ? 'active' : ''}`}
+              onClick={() => switchTo(product)}
+            >
+              <span className="velu-product-option-name">{product.product}</span>
+              {product.description && (
+                <span className="velu-product-option-desc">{product.description}</span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/engine/components/providers.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import dynamic from 'next/dynamic';
+import { RootProvider } from 'fumadocs-ui/provider/next';
+
+const PagefindSearch = dynamic(
+  () => import('@/components/search').then((m) => m.PagefindSearch),
+  { ssr: false }
+);
+
+interface ProvidersProps {
+  children: ReactNode;
+  theme?: {
+    defaultTheme: string;
+    enableSystem: boolean;
+  };
+}
+
+export function Providers({ children, theme }: ProvidersProps) {
+  return (
+    <RootProvider theme={theme} search={{ SearchDialog: PagefindSearch }}>
+      {children}
+    </RootProvider>
+  );
+}