@aravindc26/velu 0.11.0 → 0.11.3

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

@@ -3,6 +3,8 @@
 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 (
@@ -12,7 +14,13 @@ function ChevronDownIcon() {
   );
 }
 
-export function ProductSwitcher({ products }: { products: VeluProductOption[] }) {
+export function ProductSwitcher({
+  products,
+  iconLibrary,
+}: {
+  products: VeluProductOption[];
+  iconLibrary: VeluIconLibrary;
+}) {
   const pathname = usePathname();
   const [open, setOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
@@ -53,7 +61,15 @@ export function ProductSwitcher({ products }: { products: VeluProductOption[] })
   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>
+        <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 && (
@@ -65,7 +81,15 @@ export function ProductSwitcher({ products }: { products: VeluProductOption[] })
               className={`velu-product-option ${product.slug === current.slug ? 'active' : ''}`}
               onClick={() => switchTo(product)}
             >
-              <span className="velu-product-option-name">{product.product}</span>
+              <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>
               )}

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

@@ -1,13 +1,8 @@
 '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 }
-);
+import { PagefindSearch } from '@/components/search';
 
 interface ProvidersProps {
   children: ReactNode;

package/src/engine/components/search.tsx

@@ -95,6 +95,10 @@ export function PagefindSearch({
 
   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")')();

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

@@ -1,28 +1,18 @@
-import { getGlobalAnchors, getLanguages } from '@/lib/velu';
+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 (
-    <svg
-      className="velu-sidebar-link-icon"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M7 17 17 7" />
-      <path d="M7 7h10v10" />
-    </svg>
+    <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">
@@ -36,7 +26,15 @@ export function SidebarLinks() {
               rel="noopener noreferrer"
               className="velu-sidebar-link"
             >
-              <span className="velu-sidebar-link-text">{anchor.anchor}</span>
+              <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>
           ))}

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/toc-examples.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { usePathname } from 'next/navigation';
+import { useEffect } from 'react';
+
+export function TocExamples() {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const page = document.getElementById('nd-page');
+    const toc = document.getElementById('nd-toc');
+    const layout = document.getElementById('nd-docs-layout');
+    if (!page || !toc) return;
+
+    let wrapper: HTMLDivElement | null = null;
+    let placeholders: Array<{ node: HTMLElement; marker: Comment }> = [];
+    const media = window.matchMedia('(min-width: 1024px)');
+
+    const isTocVisible = () => {
+      if (!media.matches) return false;
+      const styles = window.getComputedStyle(toc);
+      return styles.display !== 'none' && styles.visibility !== 'hidden';
+    };
+
+    const mountIntoToc = () => {
+      if (wrapper) return;
+      const examples = Array.from(
+        page.querySelectorAll<HTMLElement>('.velu-request-example, .velu-response-example, .velu-panel'),
+      );
+      if (examples.length === 0) return;
+
+      wrapper = document.createElement('div');
+      wrapper.className = 'velu-toc-examples';
+      placeholders = [];
+
+      for (const node of examples) {
+        const marker = document.createComment('velu-example-placeholder');
+        node.parentNode?.insertBefore(marker, node);
+        placeholders.push({ node, marker });
+        node.classList.add('velu-in-toc-example');
+        wrapper.appendChild(node);
+      }
+
+      toc.classList.add('velu-toc-replaced');
+      page.classList.add('velu-page-with-toc-examples');
+      if (layout) layout.style.setProperty('--fd-toc-width', '420px');
+      toc.appendChild(wrapper);
+    };
+
+    const restoreToPage = () => {
+      if (wrapper) {
+        for (const { node, marker } of placeholders) {
+          if (marker.parentNode) {
+            marker.parentNode.insertBefore(node, marker);
+            marker.parentNode.removeChild(marker);
+          }
+          node.classList.remove('velu-in-toc-example');
+        }
+        wrapper.remove();
+        wrapper = null;
+        placeholders = [];
+      }
+
+      // Defensive cleanup in case of interrupted transitions.
+      toc.querySelectorAll('.velu-toc-examples').forEach((node) => node.remove());
+      document.querySelectorAll('.velu-in-toc-example').forEach((node) => {
+        node.classList.remove('velu-in-toc-example');
+      });
+
+      toc.classList.remove('velu-toc-replaced');
+      page.classList.remove('velu-page-with-toc-examples');
+      if (layout) layout.style.removeProperty('--fd-toc-width');
+    };
+
+    const syncPlacement = () => {
+      if (isTocVisible()) {
+        mountIntoToc();
+      } else {
+        restoreToPage();
+      }
+    };
+
+    syncPlacement();
+    if (media.addEventListener) {
+      media.addEventListener('change', syncPlacement);
+    } else {
+      // Fallback for older MediaQueryList implementations.
+      (media as any).addListener(syncPlacement);
+    }
+    window.addEventListener('resize', syncPlacement);
+    window.addEventListener('orientationchange', syncPlacement);
+    document.addEventListener('visibilitychange', syncPlacement);
+    const intervalId = window.setInterval(syncPlacement, 600);
+
+    return () => {
+      if (media.removeEventListener) {
+        media.removeEventListener('change', syncPlacement);
+      } else {
+        (media as any).removeListener(syncPlacement);
+      }
+      window.removeEventListener('resize', syncPlacement);
+      window.removeEventListener('orientationchange', syncPlacement);
+      document.removeEventListener('visibilitychange', syncPlacement);
+      window.clearInterval(intervalId);
+      restoreToPage();
+    };
+  }, [pathname]);
+
+  return null;
+}