@aravindc26/velu 0.10.0 → 0.11.1

package/src/engine/components/page-feedback.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import { useState, type MouseEvent as ReactMouseEvent } from 'react';
+import { ThumbsDown, ThumbsUp } from 'lucide-react';
+
+type Vote = 'yes' | 'no';
+
+const NO_OPTIONS = [
+  'Help me get started faster',
+  'Make it easier to find what I\'m looking for',
+  'Make it easy to understand the product and features',
+  'Update this documentation',
+  'Something else',
+];
+
+export function PageFeedback() {
+  const [vote, setVote] = useState<Vote | null>(null);
+  const [selectedReason, setSelectedReason] = useState<string>('');
+  const [details, setDetails] = useState('');
+  const [email, setEmail] = useState('');
+
+  const showForm = vote === 'no';
+  const showOptionalInputs = selectedReason === 'Something else';
+
+  const onChooseVote = (value: Vote) => {
+    if (vote === value) return;
+    setVote(value);
+    setSelectedReason('');
+    setDetails('');
+    setEmail('');
+  };
+
+  const stopEvent = (event: ReactMouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  const onCancel = () => {
+    setVote(null);
+    setSelectedReason('');
+    setDetails('');
+    setEmail('');
+  };
+
+  const onSubmit = () => {
+    // Placeholder for analytics/reporting integration.
+    onCancel();
+  };
+
+  return (
+    <div className="velu-page-feedback-block">
+      <div className="velu-page-feedback-row">
+        <p className="velu-page-feedback-question">Was this page helpful?</p>
+        <div className="velu-page-feedback-actions" role="group" aria-label="Feedback options">
+          <button
+            type="button"
+            className={['velu-page-feedback-btn', vote === 'yes' ? 'is-active' : ''].filter(Boolean).join(' ')}
+            aria-label="Mark page as helpful"
+            onClick={(event) => {
+              stopEvent(event);
+              onChooseVote('yes');
+            }}
+          >
+            <ThumbsUp />
+            <span>Yes</span>
+          </button>
+          <button
+            type="button"
+            className={['velu-page-feedback-btn', vote === 'no' ? 'is-active' : ''].filter(Boolean).join(' ')}
+            aria-label="Mark page as not helpful"
+            onClick={(event) => {
+              stopEvent(event);
+              onChooseVote('no');
+            }}
+          >
+            <ThumbsDown />
+            <span>No</span>
+          </button>
+        </div>
+      </div>
+
+      {showForm ? (
+        <div className="velu-page-feedback-panel">
+          <h3 className="velu-page-feedback-panel-title">How can we improve our product?</h3>
+
+          <div className="velu-page-feedback-options" role="radiogroup" aria-label="Feedback reasons">
+            {NO_OPTIONS.map((option) => {
+              const checked = selectedReason === option;
+              return (
+                <button
+                  key={option}
+                  type="button"
+                  role="radio"
+                  aria-checked={checked}
+                  className={['velu-page-feedback-option', checked ? 'is-checked' : ''].filter(Boolean).join(' ')}
+                  onClick={(event) => {
+                    stopEvent(event);
+                    setSelectedReason(option);
+                  }}
+                >
+                  <span className="velu-page-feedback-radio" aria-hidden="true" />
+                  <span>{option}</span>
+                </button>
+              );
+            })}
+          </div>
+
+          {showOptionalInputs ? (
+            <div className="velu-page-feedback-inputs">
+              <textarea
+                className="velu-page-feedback-input"
+                rows={3}
+                placeholder="(Optional) Could you share more about your experience?"
+                value={details}
+                onChange={(event) => setDetails(event.target.value)}
+              />
+              <input
+                className="velu-page-feedback-input"
+                type="email"
+                placeholder="(Optional) Email"
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+              />
+            </div>
+          ) : null}
+
+          <div className="velu-page-feedback-cta">
+            <button
+              type="button"
+              className="velu-page-feedback-cancel"
+              onClick={(event) => {
+                stopEvent(event);
+                onCancel();
+              }}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              className="velu-page-feedback-submit"
+              onClick={(event) => {
+                stopEvent(event);
+                onSubmit();
+              }}
+            >
+              Submit feedback
+            </button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,102 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import type { VeluProductOption } from '@/lib/velu';
+import type { VeluIconLibrary } from '@/lib/velu';
+import { VeluIcon } from '@/components/icon';
+
+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,
+  iconLibrary,
+}: {
+  products: VeluProductOption[];
+  iconLibrary: VeluIconLibrary;
+}) {
+  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-wrap">
+          <VeluIcon
+            name={current.icon}
+            iconType={current.iconType}
+            library={iconLibrary}
+            className="velu-product-icon"
+          />
+          <span className="velu-product-switcher-label">{current.product}</span>
+        </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-wrap">
+                <VeluIcon
+                  name={product.icon}
+                  iconType={product.iconType}
+                  library={iconLibrary}
+                  className="velu-product-option-icon"
+                />
+                <span className="velu-product-option-name">{product.product}</span>
+              </span>
+              {product.description && (
+                <span className="velu-product-option-desc">{product.description}</span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/engine/components/prompt.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { isValidElement, useMemo, useState, type ReactNode } from 'react';
+import { VeluIcon } from '@/components/icon';
+
+function flattenText(node: ReactNode): string {
+  if (node == null || typeof node === 'boolean') return '';
+  if (typeof node === 'string' || typeof node === 'number') return String(node);
+  if (Array.isArray(node)) return node.map((item) => flattenText(item)).join('');
+  if (isValidElement(node)) return flattenText((node.props as { children?: ReactNode })?.children);
+  return '';
+}
+
+function renderInlineMarkdown(text: string): ReactNode[] {
+  const tokens = text.split(/(\*\*[^*]+\*\*|\*[^*]+\*)/g).filter(Boolean);
+  return tokens.map((token, index) => {
+    if (token.startsWith('**') && token.endsWith('**')) {
+      return <strong key={`b-${index}`}>{token.slice(2, -2)}</strong>;
+    }
+    if (token.startsWith('*') && token.endsWith('*')) {
+      return <em key={`i-${index}`}>{token.slice(1, -1)}</em>;
+    }
+    return <span key={`t-${index}`}>{token}</span>;
+  });
+}
+
+export function VeluPrompt({
+  description,
+  children,
+  icon,
+  iconType,
+  actions,
+  className,
+}: {
+  description?: string;
+  children?: ReactNode;
+  icon?: string;
+  iconType?: string;
+  actions?: string[];
+  className?: string;
+}) {
+  const [copied, setCopied] = useState(false);
+  const promptText = useMemo(() => flattenText(children).trim(), [children]);
+  const label = (description && description.trim()) || 'Prompt';
+  const actionSet = new Set((Array.isArray(actions) && actions.length > 0 ? actions : ['copy']).map((item) => String(item).toLowerCase()));
+  const showCopy = actionSet.has('copy');
+  const showCursor = actionSet.has('cursor');
+
+  const onCopy = async () => {
+    if (!promptText) return;
+    try {
+      await navigator.clipboard.writeText(promptText);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1200);
+    } catch {
+      // no-op
+    }
+  };
+
+  const onCursor = () => {
+    if (!promptText) return;
+    const url = `https://cursor.com/link/prompt?text=${encodeURIComponent(promptText)}`;
+    window.open(url, '_blank', 'noopener,noreferrer');
+  };
+
+  return (
+    <div className={['velu-prompt', className].filter(Boolean).join(' ')}>
+      <div className="velu-prompt-row">
+        <div className="velu-prompt-left">
+          {icon ? <VeluIcon name={icon} iconType={iconType} className="velu-prompt-icon" /> : null}
+          <div className="velu-prompt-desc">{renderInlineMarkdown(label)}</div>
+        </div>
+        <div className="velu-prompt-actions">
+          {showCopy ? (
+            <button type="button" className="velu-prompt-copy" onClick={onCopy}>
+              {copied ? 'Copied' : 'Copy prompt'}
+            </button>
+          ) : null}
+          {showCursor ? (
+            <button type="button" className="velu-prompt-open" onClick={onCursor}>
+              <img src="/icons/cursor-dark.svg" alt="" aria-hidden="true" className="velu-prompt-open-icon velu-prompt-open-icon-on-light" />
+              <img src="/icons/cursor-light.svg" alt="" aria-hidden="true" className="velu-prompt-open-icon velu-prompt-open-icon-on-dark" />
+              Open in Cursor
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/engine/components/providers.tsx

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

package/src/engine/components/search.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useRef, useState, useCallback, type ReactNode } from 'react';
+import { usePathname } from 'next/navigation';
 
 interface PagefindResult {
   url: string;
@@ -19,10 +20,54 @@ interface PagefindResponse {
 
 interface PagefindInstance {
   init: () => Promise<void>;
-  search: (query: string) => Promise<PagefindResponse>;
+  search: (query: string, options?: { filters?: Record<string, string | string[]> }) => Promise<PagefindResponse>;
   destroy: () => void;
 }
 
+interface SearchFilters {
+  language?: string;
+  version?: string;
+  product?: string;
+}
+
+// Extract language and version/product from URL path
+// Format: /[lang]/[version|product]/... or /[version|product]/...
+function extractFiltersFromPath(pathname: string): SearchFilters {
+  const filters: SearchFilters = {};
+  const segments = pathname.split('/').filter(Boolean);
+  
+  // Common language codes (expand as needed)
+  const langCodes = new Set(['en', 'ja', 'es', 'fr', 'de', 'zh', 'ko', 'pt', 'ru', 'ar']);
+  
+  if (segments.length === 0) return filters;
+  
+  // Check if first segment is a language code
+  const firstSeg = segments[0];
+  if (langCodes.has(firstSeg)) {
+    filters.language = firstSeg;
+    // Look for version/product in second segment
+    if (segments.length > 1) {
+      const secondSeg = segments[1];
+      // Version patterns: v1, v2, v1.0, 1.0, etc.
+      if (/^v?\d/.test(secondSeg)) {
+        filters.version = secondSeg;
+      } else {
+        // Could be a product slug
+        filters.product = secondSeg;
+      }
+    }
+  } else {
+    // First segment might be version or product
+    if (/^v?\d/.test(firstSeg)) {
+      filters.version = firstSeg;
+    } else {
+      filters.product = firstSeg;
+    }
+  }
+  
+  return filters;
+}
+
 export function PagefindSearch({
   open,
   onOpenChange,
@@ -33,13 +78,27 @@ export function PagefindSearch({
   const inputRef = useRef<HTMLInputElement>(null);
   const dialogRef = useRef<HTMLDialogElement>(null);
   const pagefindRef = useRef<PagefindInstance | null>(null);
+  const pathname = usePathname();
   const [query, setQuery] = useState('');
   const [results, setResults] = useState<PagefindResult[]>([]);
   const [loading, setLoading] = useState(false);
   const [available, setAvailable] = useState(true);
+  const [activeFilters, setActiveFilters] = useState<SearchFilters>({});
+
+  // Extract filters from current URL when search opens
+  useEffect(() => {
+    if (open && pathname) {
+      const filters = extractFiltersFromPath(pathname);
+      setActiveFilters(filters);
+    }
+  }, [open, pathname]);
 
   useEffect(() => {
     async function loadPagefind() {
+      if (process.env.NODE_ENV !== 'production') {
+        setAvailable(false);
+        return;
+      }
       try {
         // Bypass bundler resolution — pagefind.js only exists in the static output
         const pf = await new Function('return import("/pagefind/pagefind.js")')();
@@ -72,7 +131,15 @@ export function PagefindSearch({
       }
       setLoading(true);
       try {
-        const response = await pagefindRef.current.search(q);
+        // Build filters for pagefind
+        const filters: Record<string, string> = {};
+        if (activeFilters.language) filters.language = activeFilters.language;
+        if (activeFilters.version) filters.version = activeFilters.version;
+        if (activeFilters.product) filters.product = activeFilters.product;
+
+        const response = await pagefindRef.current.search(q, 
+          Object.keys(filters).length > 0 ? { filters } : undefined
+        );
         const items = await Promise.all(
           response.results.slice(0, 8).map((r) => r.data())
         );
@@ -82,7 +149,7 @@ export function PagefindSearch({
       }
       setLoading(false);
     },
-    []
+    [activeFilters]
   );
 
   return (

package/src/engine/components/sidebar-links.tsx

@@ -0,0 +1,49 @@
+import { getGlobalAnchors, getIconLibrary, getLanguages } from '@/lib/velu';
+import { ThemeToggle } from '@/components/theme-toggle';
+import { LanguageSwitcher } from '@/components/lang-switcher';
+import { VeluIcon } from '@/components/icon';
+
+function ExternalLinkIcon() {
+  return (
+    <VeluIcon name="external-link" className="velu-sidebar-link-icon" fallback={false} />
+  );
+}
+
+export function SidebarLinks() {
+  const anchors = getGlobalAnchors();
+  const languages = getLanguages();
+  const iconLibrary = getIconLibrary();
+
+  return (
+    <div className="velu-sidebar-footer">
+      {anchors.length > 0 && (
+        <div className="velu-sidebar-links">
+          {anchors.map((anchor) => (
+            <a
+              key={anchor.href}
+              href={anchor.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="velu-sidebar-link"
+            >
+              <span className="velu-sidebar-link-left">
+                <VeluIcon
+                  name={anchor.icon}
+                  iconType={anchor.iconType}
+                  library={iconLibrary}
+                  className="velu-sidebar-link-leading-icon"
+                />
+                <span className="velu-sidebar-link-text">{anchor.anchor}</span>
+              </span>
+              <ExternalLinkIcon />
+            </a>
+          ))}
+        </div>
+      )}
+      <div className="velu-sidebar-footer-row">
+        {languages.length > 1 && <LanguageSwitcher languages={languages} defaultLang={languages[0]} />}
+        <ThemeToggle />
+      </div>
+    </div>
+  );
+}

package/src/engine/components/synced-tabs.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { Children, isValidElement, type ReactElement, type ReactNode, useMemo } from "react";
+import { Tabs as FumaTabs } from "fumadocs-ui/components/tabs";
+
+const SYNCED_GROUP_ID = "velu-synced-tabs";
+
+function findTitle(node: ReactNode): string | undefined {
+  if (Array.isArray(node)) {
+    for (const item of node) {
+      const found = findTitle(item);
+      if (found) return found;
+    }
+    return undefined;
+  }
+  if (!isValidElement(node)) return undefined;
+  const props = (node as ReactElement<Record<string, unknown>>).props;
+  const direct = props?.title ?? props?.["data-title"];
+  if (typeof direct === "string" && direct.trim()) return direct.trim();
+  return findTitle(props?.children as ReactNode);
+}
+
+interface VeluSyncedTabsProps {
+  items?: string[];
+  children?: ReactNode;
+  sync?: boolean;
+  borderBottom?: boolean;
+  className?: string;
+  groupId?: string;
+  [key: string]: unknown;
+}
+
+export function VeluSyncedTabs({ items, children, sync = true, borderBottom, className, groupId, ...props }: VeluSyncedTabsProps) {
+  const tabItems = useMemo(() => {
+    if (Array.isArray(items) && items.length > 0) return items;
+    const tabChildren = Children.toArray(children).filter((child) => isValidElement(child)) as ReactElement<any>[];
+    return tabChildren.map((child, idx) => findTitle(child) ?? `Tab ${idx + 1}`);
+  }, [children, items]);
+
+  return (
+    <FumaTabs
+      {...(props as any)}
+      items={tabItems}
+      groupId={sync ? (groupId ?? SYNCED_GROUP_ID) : undefined}
+      persist={sync}
+      className={[
+        "velu-tabs-plain !border-0 !bg-transparent !rounded-none !my-2",
+        className,
+        borderBottom ? "velu-tabs-border-bottom" : "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      {children}
+    </FumaTabs>
+  );
+}

package/src/engine/components/theme-toggle.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+
+export function ThemeToggle() {
+  const { setTheme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  const isDark = mounted ? resolvedTheme === 'dark' : false;
+
+  return (
+    <div className="velu-theme-toggle" style={mounted ? undefined : { opacity: 0 }}>
+      <button
+        type="button"
+        className={`velu-theme-btn ${!isDark ? 'active' : ''}`}
+        onClick={() => setTheme('light')}
+        aria-label="Light mode"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" width="16" height="16">
+          <circle cx="12" cy="12" r="4" />
+          <path d="M12 2v2" /><path d="M12 20v2" /><path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" /><path d="M2 12h2" /><path d="M20 12h2" /><path d="m6.34 17.66-1.41 1.41" /><path d="m19.07 4.93-1.41 1.41" />
+        </svg>
+      </button>
+      <button
+        type="button"
+        className={`velu-theme-btn ${isDark ? 'active' : ''}`}
+        onClick={() => setTheme('dark')}
+        aria-label="Dark mode"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" width="16" height="16">
+          <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+        </svg>
+      </button>
+    </div>
+  );
+}