@veluai/velu 0.2.13 → 0.2.15

package/runtime/velu-ui/components/ContextMenu.jsx

@@ -1,273 +1,298 @@
-import React from 'react';
-import {
-  Copy,
-  Check,
-  ChevronDown,
-  ArrowUpRight,
-  Sparkles,
-  Terminal,
-  Download,
-  Bot,
-  Wind,
-} from 'lucide-react';
-import Cluster from '../primitives/Cluster.jsx';
-import {
-  MarkdownIcon,
-  OpenAIIcon,
-  ClaudeIcon,
-  PerplexityIcon,
-  CursorIcon,
-  VscodeIcon,
-} from '../lib/brand-icons.jsx';
-
-/**
- * ContextMenu — the per-page agent/IDE action bar shown at the top of every
- * page: the section eyebrow on the left, and a "Copy Page" split-button with a
- * dropdown on the right. The dropdown items are driven by the Mintlify-
- * compatible `contextual.options` config.
- *
- * The primary button copies the page's Markdown (the `.md` twin). Items either
- * copy, open the Markdown, download the spec, or open the page in an AI tool /
- * IDE. All side effects happen in click handlers (SSR-safe — no window at
- * render).
- *
- * @param {{
- *   eyebrow?: string,                 // section/group label
- *   pageUrl: string,                  // page path, e.g. "/quickstart"
- *   title?: string,                   // page title (for AI prompts / filenames)
- *   isApi?: boolean,                  // API page → enable download-spec
- *   siteName?: string,                // for MCP deep-link labels
- *   options?: Array<string|{title,description,href,icon}>,
- *   onAssistant?: () => void,         // 'assistant' option → in-site Ask AI
- * }} props
- */
-
-// The Markdown URL for a page path (`/` → `/index.md`).
-const mdUrlForPage = (url) => (url === '/' ? '/index.md' : `${url}.md`);
-
-// key → { icon, label, desc, external?, apiOnly?, kind, url? }
-const REGISTRY = {
-  copy: { icon: Copy, label: 'Copy page', desc: 'Copy page as Markdown for LLMs', kind: 'copy' },
-  view: { icon: MarkdownIcon, label: 'View as Markdown', desc: 'Open the raw Markdown', kind: 'view', external: true },
-  'download-spec': { icon: Download, label: 'Download OpenAPI spec', desc: 'Save this endpoint as YAML', kind: 'spec', apiOnly: true },
-  assistant: { icon: Sparkles, label: 'Ask AI', desc: 'Ask the docs assistant about this page', kind: 'assistant' },
-  chatgpt: { icon: OpenAIIcon, label: 'Open in ChatGPT', desc: 'Ask questions about this page', kind: 'ai', external: true, url: (q) => `https://chatgpt.com/?hints=search&q=${q}` },
-  claude: { icon: ClaudeIcon, label: 'Open in Claude', desc: 'Ask questions about this page', kind: 'ai', external: true, url: (q) => `https://claude.ai/new?q=${q}` },
-  perplexity: { icon: PerplexityIcon, label: 'Open in Perplexity', desc: 'Ask questions about this page', kind: 'ai', external: true, url: (q) => `https://www.perplexity.ai/search?q=${q}` },
-  grok: { icon: Bot, label: 'Open in Grok', desc: 'Ask questions about this page', kind: 'ai', external: true, url: (q) => `https://grok.com/?q=${q}` },
-  aistudio: { icon: Sparkles, label: 'Open in AI Studio', desc: 'Ask questions about this page', kind: 'ai', external: true, url: (q) => `https://aistudio.google.com/app/prompts/new_chat?prompt=${q}` },
-  devin: { icon: Bot, label: 'Open in Devin', desc: 'Ask questions about this page', kind: 'ai', external: true, url: (q) => `https://app.devin.ai/?prompt=${q}` },
-  windsurf: { icon: Wind, label: 'Open in Windsurf', desc: 'Ask questions about this page', kind: 'ai', external: true, url: (q) => `https://windsurf.com/?q=${q}` },
-  mcp: { icon: Terminal, label: 'Copy MCP install command', desc: 'Copy npx command to install MCP server', kind: 'mcp' },
-  'add-mcp': { icon: Terminal, label: 'Add MCP server', desc: 'Copy command to add the MCP server', kind: 'mcp' },
-  cursor: { icon: CursorIcon, label: 'Connect to Cursor', desc: 'Install MCP Server on Cursor', kind: 'cursor', external: true },
-  vscode: { icon: VscodeIcon, label: 'Connect to VS Code', desc: 'Install MCP Server on VS Code', kind: 'vscode', external: true },
-  'devin-mcp': { icon: Terminal, label: 'Connect to Devin', desc: 'Install MCP Server on Devin', kind: 'cursor', external: true },
-};
-
-export default function ContextMenu({
-  eyebrow,
-  pageUrl,
-  title = '',
-  isApi = false,
-  siteName = 'docs',
-  options = [],
-  onAssistant,
-}) {
-  const [open, setOpen] = React.useState(false);
-  const [copied, setCopied] = React.useState(false);
-  const rootRef = React.useRef(null);
-  const copiedTimer = React.useRef(null);
-
-  React.useEffect(() => {
-    if (!open) return;
-    const onDoc = (e) => {
-      if (!rootRef.current?.contains(e.target)) setOpen(false);
-    };
-    const onKey = (e) => {
-      if (e.key === 'Escape') setOpen(false);
-    };
-    document.addEventListener('mousedown', onDoc);
-    document.addEventListener('keydown', onKey);
-    return () => {
-      document.removeEventListener('mousedown', onDoc);
-      document.removeEventListener('keydown', onKey);
-    };
-  }, [open]);
-
-  React.useEffect(() => () => clearTimeout(copiedTimer.current), []);
-
-  const flashCopied = () => {
-    setCopied(true);
-    clearTimeout(copiedTimer.current);
-    copiedTimer.current = setTimeout(() => setCopied(false), 1600);
-  };
-
-  const mdUrl = mdUrlForPage(pageUrl);
-
-  // Build the descriptor list from the configured options (skip API-only items
-  // off API pages, and any unsupported keys).
-  const items = [];
-  for (const o of options) {
-    if (typeof o === 'object' && o) {
-      items.push({ icon: ArrowUpRight, label: o.title, desc: o.description, external: true, kind: 'custom', href: o.href });
-      continue;
-    }
-    const def = REGISTRY[o];
-    if (!def) continue; // e.g. download-pdf — no static pipeline
-    if (def.apiOnly && !isApi) continue;
-    items.push({ ...def, key: o });
-  }
-
-  const copyText = async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      flashCopied();
-    } catch {
-      /* clipboard blocked — no-op */
-    }
-  };
-
-  const copyPage = async () => {
-    try {
-      const md = await fetch(mdUrl).then((r) => r.text());
-      await copyText(md);
-    } catch {
-      /* fetch failed — no-op */
-    }
-  };
-
-  const run = async (it) => {
-    setOpen(false);
-    const origin = window.location.origin;
-    const absMd = origin + mdUrl;
-    switch (it.kind) {
-      case 'copy':
-        return copyPage();
-      case 'view':
-        return void window.open(mdUrl, '_blank', 'noopener');
-      case 'spec': {
-        try {
-          const text = await fetch(mdUrl).then((r) => r.text());
-          const blob = new Blob([text], { type: 'text/yaml' });
-          const a = document.createElement('a');
-          a.href = URL.createObjectURL(blob);
-          a.download = `${(title || 'openapi').replace(/[^a-z0-9]+/gi, '-').toLowerCase()}.yaml`;
-          a.click();
-          URL.revokeObjectURL(a.href);
-        } catch {
-          /* no-op */
-        }
-        return;
-      }
-      case 'assistant':
-        return onAssistant?.();
-      case 'ai': {
-        const q = encodeURIComponent(`Read ${absMd} and answer my questions about this page.`);
-        return void window.open(it.url(q), '_blank', 'noopener');
-      }
-      case 'mcp':
-        // Stubbed: the Velu MCP server isn't hosted yet — this is the intended
-        // command, wired to <origin>/mcp once it exists.
-        return copyText(`npx -y @veluai/mcp@latest ${origin}/mcp`);
-      case 'cursor': {
-        const cfg =
-          typeof btoa === 'function' ? btoa(JSON.stringify({ url: `${origin}/mcp` })) : '';
-        return void window.open(
-          `cursor://anysphere.cursor-deeplink/mcp/install?name=${encodeURIComponent(siteName)}&config=${cfg}`,
-          '_blank',
-          'noopener',
-        );
-      }
-      case 'vscode': {
-        const cfg = encodeURIComponent(JSON.stringify({ name: siteName, url: `${origin}/mcp` }));
-        return void window.open(
-          `https://insiders.vscode.dev/redirect/mcp/install?${cfg}`,
-          '_blank',
-          'noopener',
-        );
-      }
-      case 'custom':
-        return void window.open(it.href, '_blank', 'noopener');
-      default:
-        return undefined;
-    }
-  };
-
-  // Nothing to show → render nothing (keeps the page top clean).
-  if (!eyebrow && !items.length) return null;
-
-  return (
-    <Cluster
-      space="var(--s-2)"
-      justify="space-between"
-      align="flex-end"
-      className="velu-context-bar"
-      data-pagefind-ignore=""
-    >
-      {eyebrow ? <span className="velu-context-bar__eyebrow">{eyebrow}</span> : <span />}
-
-      {items.length > 0 && (
-        <div ref={rootRef} className="velu-context-menu" data-open={open ? 'true' : 'false'}>
-          <div className="velu-context-menu__split">
-            <button
-              type="button"
-              className="velu-context-menu__copy"
-              onClick={copyPage}
-              aria-label="Copy page as Markdown"
-            >
-              <span className="velu-context-menu__copy-icon" aria-hidden="true">
-                {copied ? <Check size="1em" /> : <Copy size="1em" />}
-              </span>
-              <span>{copied ? 'Copied' : 'Copy Page'}</span>
-            </button>
-            <button
-              type="button"
-              className="velu-context-menu__toggle"
-              aria-haspopup="menu"
-              aria-expanded={open}
-              aria-label="More actions"
-              onClick={() => setOpen((v) => !v)}
-            >
-              <ChevronDown size="1em" aria-hidden="true" focusable="false" />
-            </button>
-          </div>
-
-          <ul className="velu-context-menu__menu" role="menu" aria-hidden={!open}>
-            {items.map((it, i) => {
-              const Icon = it.icon;
-              return (
-                <li key={it.key ?? it.href ?? i} role="none">
-                  <button
-                    type="button"
-                    role="menuitem"
-                    className="velu-context-menu__item"
-                    tabIndex={open ? 0 : -1}
-                    onClick={() => run(it)}
-                  >
-                    <span className="velu-context-menu__item-icon" aria-hidden="true">
-                      <Icon size="1.1em" />
-                    </span>
-                    <span className="velu-context-menu__item-text">
-                      <span className="velu-context-menu__item-title">
-                        {it.label}
-                        {it.external && (
-                          <ArrowUpRight
-                            className="velu-context-menu__item-ext"
-                            size="0.85em"
-                            aria-hidden="true"
-                          />
-                        )}
-                      </span>
-                      {it.desc && <span className="velu-context-menu__item-desc">{it.desc}</span>}
-                    </span>
-                  </button>
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-      )}
-    </Cluster>
-  );
-}
+import React from 'react';
+import {
+  Copy,
+  Check,
+  ChevronDown,
+  ArrowUpRight,
+  Sparkles,
+  Terminal,
+  Download,
+  Bot,
+  Wind,
+} from 'lucide-react';
+import Cluster from '../primitives/Cluster.jsx';
+import {
+  MarkdownIcon,
+  OpenAIIcon,
+  ClaudeIcon,
+  PerplexityIcon,
+  CursorIcon,
+  VscodeIcon,
+} from '../lib/brand-icons.jsx';
+
+/**
+ * ContextMenu — the per-page agent/IDE action bar shown at the top of every
+ * page: the section eyebrow on the left, and a "Copy Page" split-button with a
+ * dropdown on the right. The dropdown items are driven by the Mintlify-
+ * compatible `contextual.options` config.
+ *
+ * The primary button copies the page's Markdown (the `.md` twin). Items either
+ * copy, open the Markdown, download the spec, or open the page in an AI tool /
+ * IDE. All side effects happen in click handlers (SSR-safe — no window at
+ * render).
+ *
+ * @param {{
+ *   eyebrow?: string,                 // section/group label
+ *   pageUrl: string,                  // page path, e.g. "/quickstart"
+ *   title?: string,                   // page title (for AI prompts / filenames)
+ *   isApi?: boolean,                  // API page → enable download-spec
+ *   siteName?: string,                // for MCP deep-link labels
+ *   options?: Array<string|{title,description,href,icon}>,
+ *   onAssistant?: () => void,         // 'assistant' option → in-site Ask AI
+ *   getMarkdown?: () => string|Promise<string>, // override the .md-twin fetch
+ *                                     // (instant preview: no .md twin exists —
+ *                                     // the raw source comes from the store)
+ * }} props
+ */
+
+// The Markdown URL for a page path (`/` → `/index.md`).
+const mdUrlForPage = (url) => (url === '/' ? '/index.md' : `${url}.md`);
+
+// key → { icon, label, desc, external?, apiOnly?, kind, url? }
+const REGISTRY = {
+  copy: { icon: Copy, label: 'Copy page', desc: 'Copy page as Markdown for LLMs', kind: 'copy' },
+  view: { icon: MarkdownIcon, label: 'View as Markdown', desc: 'Open the raw Markdown', kind: 'view', external: true },
+  'download-spec': { icon: Download, label: 'Download OpenAPI spec', desc: 'Save this endpoint as YAML', kind: 'spec', apiOnly: true },
+  assistant: { icon: Sparkles, label: 'Ask AI', desc: 'Ask the docs assistant about this page', kind: 'assistant' },
+  chatgpt: { icon: OpenAIIcon, label: 'Open in ChatGPT', desc: 'Ask questions about this page', kind: 'ai', external: true, url: (q) => `https://chatgpt.com/?hints=search&q=${q}` },
+  claude: { icon: ClaudeIcon, label: 'Open in Claude', desc: 'Ask questions about this page', kind: 'ai', external: true, url: (q) => `https://claude.ai/new?q=${q}` },
+  perplexity: { icon: PerplexityIcon, label: 'Open in Perplexity', desc: 'Ask questions about this page', kind: 'ai', external: true, url: (q) => `https://www.perplexity.ai/search?q=${q}` },
+  grok: { icon: Bot, label: 'Open in Grok', desc: 'Ask questions about this page', kind: 'ai', external: true, url: (q) => `https://grok.com/?q=${q}` },
+  aistudio: { icon: Sparkles, label: 'Open in AI Studio', desc: 'Ask questions about this page', kind: 'ai', external: true, url: (q) => `https://aistudio.google.com/app/prompts/new_chat?prompt=${q}` },
+  devin: { icon: Bot, label: 'Open in Devin', desc: 'Ask questions about this page', kind: 'ai', external: true, url: (q) => `https://app.devin.ai/?prompt=${q}` },
+  windsurf: { icon: Wind, label: 'Open in Windsurf', desc: 'Ask questions about this page', kind: 'ai', external: true, url: (q) => `https://windsurf.com/?q=${q}` },
+  mcp: { icon: Terminal, label: 'Copy MCP install command', desc: 'Copy npx command to install MCP server', kind: 'mcp' },
+  'add-mcp': { icon: Terminal, label: 'Add MCP server', desc: 'Copy command to add the MCP server', kind: 'mcp' },
+  cursor: { icon: CursorIcon, label: 'Connect to Cursor', desc: 'Install MCP Server on Cursor', kind: 'cursor', external: true },
+  vscode: { icon: VscodeIcon, label: 'Connect to VS Code', desc: 'Install MCP Server on VS Code', kind: 'vscode', external: true },
+  'devin-mcp': { icon: Terminal, label: 'Connect to Devin', desc: 'Install MCP Server on Devin', kind: 'cursor', external: true },
+};
+
+export default function ContextMenu({
+  eyebrow,
+  pageUrl,
+  title = '',
+  isApi = false,
+  siteName = 'docs',
+  options = [],
+  onAssistant,
+  getMarkdown,
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [copied, setCopied] = React.useState(false);
+  const rootRef = React.useRef(null);
+  const copiedTimer = React.useRef(null);
+
+  React.useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => {
+      if (!rootRef.current?.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('mousedown', onDoc);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDoc);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  React.useEffect(() => () => clearTimeout(copiedTimer.current), []);
+
+  const flashCopied = () => {
+    setCopied(true);
+    clearTimeout(copiedTimer.current);
+    copiedTimer.current = setTimeout(() => setCopied(false), 1600);
+  };
+
+  const mdUrl = mdUrlForPage(pageUrl);
+
+  // Build the descriptor list from the configured options (skip API-only items
+  // off API pages, and any unsupported keys).
+  const items = [];
+  for (const o of options) {
+    if (typeof o === 'object' && o) {
+      items.push({ icon: ArrowUpRight, label: o.title, desc: o.description, external: true, kind: 'custom', href: o.href });
+      continue;
+    }
+    const def = REGISTRY[o];
+    if (!def) continue; // e.g. download-pdf — no static pipeline
+    if (def.apiOnly && !isApi) continue;
+    items.push({ ...def, key: o });
+  }
+
+  // Last-resort copy for contexts where the async Clipboard API is
+  // permission-denied — notably the instant preview's sandboxed iframe, whose
+  // opaque origin can never be granted clipboard-write.
+  const legacyCopy = (text) => {
+    const ta = document.createElement('textarea');
+    ta.value = text;
+    ta.setAttribute('readonly', '');
+    ta.style.position = 'fixed';
+    ta.style.opacity = '0';
+    document.body.appendChild(ta);
+    ta.select();
+    let ok = false;
+    try {
+      ok = document.execCommand('copy');
+    } catch {
+      /* not supported — give up below */
+    }
+    ta.remove();
+    return ok;
+  };
+
+  const copyText = async (text) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      flashCopied();
+    } catch {
+      if (legacyCopy(text)) flashCopied();
+    }
+  };
+
+  const copyPage = async () => {
+    try {
+      const md = getMarkdown ? await getMarkdown() : await fetch(mdUrl).then((r) => r.text());
+      await copyText(md);
+    } catch {
+      /* fetch failed — no-op */
+    }
+  };
+
+  const run = async (it) => {
+    setOpen(false);
+    const origin = window.location.origin;
+    const absMd = origin + mdUrl;
+    switch (it.kind) {
+      case 'copy':
+        return copyPage();
+      case 'view':
+        return void window.open(mdUrl, '_blank', 'noopener');
+      case 'spec': {
+        try {
+          const text = await fetch(mdUrl).then((r) => r.text());
+          const blob = new Blob([text], { type: 'text/yaml' });
+          const a = document.createElement('a');
+          a.href = URL.createObjectURL(blob);
+          a.download = `${(title || 'openapi').replace(/[^a-z0-9]+/gi, '-').toLowerCase()}.yaml`;
+          a.click();
+          URL.revokeObjectURL(a.href);
+        } catch {
+          /* no-op */
+        }
+        return;
+      }
+      case 'assistant':
+        return onAssistant?.();
+      case 'ai': {
+        const q = encodeURIComponent(`Read ${absMd} and answer my questions about this page.`);
+        return void window.open(it.url(q), '_blank', 'noopener');
+      }
+      case 'mcp':
+        // Stubbed: the Velu MCP server isn't hosted yet — this is the intended
+        // command, wired to <origin>/mcp once it exists.
+        return copyText(`npx -y @veluai/mcp@latest ${origin}/mcp`);
+      case 'cursor': {
+        const cfg =
+          typeof btoa === 'function' ? btoa(JSON.stringify({ url: `${origin}/mcp` })) : '';
+        return void window.open(
+          `cursor://anysphere.cursor-deeplink/mcp/install?name=${encodeURIComponent(siteName)}&config=${cfg}`,
+          '_blank',
+          'noopener',
+        );
+      }
+      case 'vscode': {
+        const cfg = encodeURIComponent(JSON.stringify({ name: siteName, url: `${origin}/mcp` }));
+        return void window.open(
+          `https://insiders.vscode.dev/redirect/mcp/install?${cfg}`,
+          '_blank',
+          'noopener',
+        );
+      }
+      case 'custom':
+        return void window.open(it.href, '_blank', 'noopener');
+      default:
+        return undefined;
+    }
+  };
+
+  // Nothing to show → render nothing (keeps the page top clean).
+  if (!eyebrow && !items.length) return null;
+
+  return (
+    <Cluster
+      space="var(--s-2)"
+      justify="space-between"
+      align="flex-end"
+      className="velu-context-bar"
+      data-pagefind-ignore=""
+    >
+      {eyebrow ? <span className="velu-context-bar__eyebrow">{eyebrow}</span> : <span />}
+
+      {items.length > 0 && (
+        <div ref={rootRef} className="velu-context-menu" data-open={open ? 'true' : 'false'}>
+          <div className="velu-context-menu__split">
+            <button
+              type="button"
+              className="velu-context-menu__copy"
+              onClick={copyPage}
+              aria-label="Copy page as Markdown"
+            >
+              <span className="velu-context-menu__copy-icon" aria-hidden="true">
+                {copied ? <Check size="1em" /> : <Copy size="1em" />}
+              </span>
+              <span>{copied ? 'Copied' : 'Copy Page'}</span>
+            </button>
+            <button
+              type="button"
+              className="velu-context-menu__toggle"
+              aria-haspopup="menu"
+              aria-expanded={open}
+              aria-label="More actions"
+              onClick={() => setOpen((v) => !v)}
+            >
+              <ChevronDown size="1em" aria-hidden="true" focusable="false" />
+            </button>
+          </div>
+
+          <ul className="velu-context-menu__menu" role="menu" aria-hidden={!open}>
+            {items.map((it, i) => {
+              const Icon = it.icon;
+              return (
+                <li key={it.key ?? it.href ?? i} role="none">
+                  <button
+                    type="button"
+                    role="menuitem"
+                    className="velu-context-menu__item"
+                    tabIndex={open ? 0 : -1}
+                    onClick={() => run(it)}
+                  >
+                    <span className="velu-context-menu__item-icon" aria-hidden="true">
+                      <Icon size="1.1em" />
+                    </span>
+                    <span className="velu-context-menu__item-text">
+                      <span className="velu-context-menu__item-title">
+                        {it.label}
+                        {it.external && (
+                          <ArrowUpRight
+                            className="velu-context-menu__item-ext"
+                            size="0.85em"
+                            aria-hidden="true"
+                          />
+                        )}
+                      </span>
+                      {it.desc && <span className="velu-context-menu__item-desc">{it.desc}</span>}
+                    </span>
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      )}
+    </Cluster>
+  );
+}