@veluai/velu 0.1.15 → 0.2.0

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

@@ -0,0 +1,384 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import MethodBadge from './MethodBadge.jsx';
+import ApiPath from './ApiPath.jsx';
+import TryItBar from './TryItBar.jsx';
+import ApiClient from './ApiClient.jsx';
+import ApiField from './ApiField.jsx';
+import Field from './Field.jsx';
+import Accordion, { AccordionGroup } from './Accordion.jsx';
+import CodeBlock, { CodeGroup } from './CodeBlock.jsx';
+import ApiSamples from './ApiSamples.jsx';
+import Callout from './Callout.jsx';
+import { sendApiRequest } from '../lib/api-send.js';
+
+/**
+ * ApiReferencePage — the full, auto-generated reference page for one OpenAPI
+ * operation. Driven entirely by the normalized `operation` model (see the
+ * CLI's src/openapi/parse.js). Renders the doc body (auth, params, body,
+ * responses) and an interactive "Try It" playground that builds + sends the
+ * request (through the dev proxy by default — see lib/api-send.js).
+ *
+ * The right-rail code samples live in the page's right aside (the runtime
+ * renders <ApiSamples> there for API pages) — this component owns the main
+ * column + the playground only.
+ *
+ * @param {{ operation: object, api?: { proxy?: boolean, server?: string } }} props
+ */
+const LOCATION_LABEL = { path: 'Path Parameters', query: 'Query Parameters', header: 'Header Parameters' };
+
+export default function ApiReferencePage({ operation, samples = [], apiOperations = [], api = {} }) {
+  const [open, setOpen] = useState(false);
+  // Which operation the playground is currently showing. Defaults to this
+  // page's own operation; the dropdown can switch it to any sibling.
+  const [activeId, setActiveId] = useState(operation.id);
+
+  // The switchable list — fall back to just this page's operation.
+  const ops =
+    apiOperations.length > 0
+      ? apiOperations
+      : [{ id: operation.id, method: operation.method, title: operation.title, operation, samples, api }];
+  const current = ops.find((o) => o.id === activeId) || { operation, samples, api };
+  // Each operation carries its own (section-level) api config; fall back to
+  // this page's config.
+  const currentApi = current.api ?? api;
+  const server = currentApi.server || current.operation.servers?.[0] || '';
+
+  // While the playground modal is open, close on Escape and lock the
+  // page scroll so the dimmed backdrop reads as a true overlay.
+  useEffect(() => {
+    if (!open || typeof document === 'undefined') return undefined;
+    const onKey = (e) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('keydown', onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+
+  if (!operation) return null;
+
+  return (
+    <div className="velu-api-page">
+      {/* The page title + description come from the page frontmatter heading
+          (rendered by the runtime), so this component starts at the Try-It bar
+          to avoid a duplicate title. */}
+      <TryItBar
+        method={operation.method}
+        path={operation.path}
+        cta="Try It"
+        onTry={() => {
+          setActiveId(operation.id);
+          setOpen(true);
+        }}
+        className="velu-api-page__tryit"
+      />
+
+      {/* Authorizations */}
+      {operation.auth?.length > 0 && (
+        <section className="velu-api-page__section">
+          <h2>Authorizations</h2>
+          {operation.auth.map((a, i) => (
+            <Field key={i} name={a.name} pre={a.prefix} type={a.type} required={a.required} post={a.in}>
+              {a.description}
+            </Field>
+          ))}
+        </section>
+      )}
+
+      {/* Parameters, by location */}
+      {['path', 'query', 'header'].map((loc) => {
+        const rows = operation.parameters?.[loc] || [];
+        if (!rows.length) return null;
+        return (
+          <section key={loc} className="velu-api-page__section">
+            <h2>{LOCATION_LABEL[loc]}</h2>
+            {rows.map((p, i) => (
+              <Field key={i} name={p.name} type={p.type} required={p.required}>
+                {p.description}
+                {p.enum && <EnumHint values={p.enum} />}
+              </Field>
+            ))}
+          </section>
+        );
+      })}
+
+      {/* Request body */}
+      {operation.body?.fields?.length > 0 && (
+        <section className="velu-api-page__section">
+          <h2>Body</h2>
+          {operation.body.fields.map((f, i) => (
+            <Field key={i} name={f.name} type={f.type} required={f.required}>
+              {f.description}
+              {f.enum && <EnumHint values={f.enum} />}
+            </Field>
+          ))}
+        </section>
+      )}
+
+      {/* Responses */}
+      {operation.responses?.length > 0 && (
+        <section className="velu-api-page__section">
+          <h2>Response</h2>
+          <ResponseSections responses={operation.responses} />
+        </section>
+      )}
+
+      {/* Try-It playground — rendered as an overlay above the page, with a
+          blurred backdrop, rather than inline. Portaled to <body> so the
+          docs layout's @container containment can't clip the fixed overlay. */}
+      {open && typeof document !== 'undefined' &&
+        createPortal(
+          <div
+            className="velu-api-modal"
+            role="presentation"
+            onClick={() => setOpen(false)}
+          >
+            <div
+              className="velu-api-modal__panel"
+              role="dialog"
+              aria-modal="true"
+              aria-label={`${operation.title} playground`}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <Playground
+                key={current.operation.id}
+                operation={current.operation}
+                samples={current.samples}
+                operations={ops}
+                activeId={activeId}
+                onSelectOperation={setActiveId}
+                server={server}
+                proxy={currentApi.proxy !== false}
+                onClose={() => setOpen(false)}
+              />
+            </div>
+          </div>,
+          document.body,
+        )}
+    </div>
+  );
+}
+
+function EnumHint({ values }) {
+  return (
+    <p className="velu-api-page__enum">
+      Allowed values:{' '}
+      {values.map((v, i) => (
+        <code key={i}>{String(v)}</code>
+      ))}
+    </p>
+  );
+}
+
+function ResponseSections({ responses }) {
+  return (
+    <AccordionGroup className="velu-api-resp">
+      {responses.map((r, i) => {
+        return (
+          <Accordion
+            key={i}
+            defaultOpen
+            title={
+              <span className="velu-api-resp__head">
+                <span className="velu-api-resp__status">{r.status}</span>
+                {r.contentType && (
+                  <span className="velu-api-resp__ctype">{r.contentType}</span>
+                )}
+              </span>
+            }
+          >
+            {r.description && <p className="velu-api-resp__desc">{r.description}</p>}
+            {r.fields?.map((f, j) => (
+              <Field key={j} name={f.name} type={f.type} required={f.required}>
+                {f.description}
+              </Field>
+            ))}
+          </Accordion>
+        );
+      })}
+    </AccordionGroup>
+  );
+}
+
+// ── The interactive playground ──────────────────────────────────────────────
+
+function Playground({
+  operation,
+  samples = [],
+  operations = [],
+  activeId,
+  onSelectOperation,
+  server,
+  proxy,
+  onClose,
+}) {
+  const [values, setValues] = useState({});
+  const [bodyText, setBodyText] = useState(
+    operation.body ? JSON.stringify(operation.body.example ?? {}, null, 2) : '',
+  );
+  const [busy, setBusy] = useState(false);
+  const [resp, setResp] = useState(null);
+
+  const set = (loc, name, v) =>
+    setValues((prev) => ({ ...prev, [loc]: { ...(prev[loc] || {}), [name]: v } }));
+
+  const onSend = useCallback(async () => {
+    setBusy(true);
+    setResp(null);
+    try {
+      const result = await sendApiRequest({ operation, server, proxy, values, bodyText });
+      setResp(result);
+    } catch (err) {
+      setResp({ error: String(err?.message || err) });
+    } finally {
+      setBusy(false);
+    }
+  }, [operation, server, proxy, values, bodyText]);
+
+  const sections = [];
+  if (operation.auth?.length) sections.push(['auth', 'Authorization', operation.auth]);
+  for (const loc of ['path', 'query', 'header']) {
+    const rows = operation.parameters?.[loc] || [];
+    if (rows.length) sections.push([loc, LOCATION_LABEL[loc].replace(' Parameters', ''), rows]);
+  }
+
+  return (
+    <ApiClient
+      method={operation.method}
+      label={operation.title}
+      path={operation.path}
+      description={operation.description}
+      operations={operations}
+      activeId={activeId}
+      onSelectOperation={onSelectOperation}
+      onSend={onSend}
+      sending={busy}
+      onClose={onClose}
+      response={resp ? <ResponsePanel resp={resp} /> : null}
+      aside={<ApiSamples samples={samples} responses={operation.responses} />}
+    >
+      <AccordionGroup>
+        {sections.map(([loc, title, rows]) => (
+          <Accordion key={loc} title={title} defaultOpen>
+            {rows.map((f, i) => (
+              <ApiField
+                key={i}
+                name={f.name}
+                type={f.type}
+                required={f.required}
+                prefix={f.prefix}
+                value={values[loc]?.[f.name] ?? ''}
+                onChange={(e) => set(loc, f.name, e.target.value)}
+              >
+                {f.description}
+              </ApiField>
+            ))}
+          </Accordion>
+        ))}
+        {operation.body && (
+          <Accordion title="Body" defaultOpen>
+            <textarea
+              className="velu-api-body-input"
+              spellCheck={false}
+              rows={Math.min(14, bodyText.split('\n').length + 1)}
+              value={bodyText}
+              onChange={(e) => setBodyText(e.target.value)}
+            />
+          </Accordion>
+        )}
+      </AccordionGroup>
+    </ApiClient>
+  );
+}
+
+/**
+ * ResponsePanel — the live-response viewer: a Body / Header tabbed card.
+ *  - Body:   a status-colored Callout (green for 2xx, red otherwise) plus the
+ *            response body.
+ *  - Header: the response headers as a key/value table.
+ */
+function ResponsePanel({ resp }) {
+  const [tab, setTab] = useState('body');
+  if (!resp) return null;
+
+  const isError = resp.error != null;
+  const ok = !isError && resp.status >= 200 && resp.status < 300;
+  const statusLabel = isError
+    ? 'Request failed'
+    : `${resp.status}${resp.statusText ? ` - ${resp.statusText}` : ''}`;
+  const bodyStr = isError
+    ? resp.error
+    : typeof resp.body === 'string'
+      ? resp.body
+      : JSON.stringify(resp.body, null, 2);
+  const headerRows = Object.entries(resp.headers || {});
+
+  // Reuse the CodeGroup's tab chrome (velu-code-block__*) so the Body/Header
+  // switcher looks identical to the code-sample tabs.
+  const tabCls = (name) =>
+    `velu-code-block__tab${tab === name ? ' velu-code-block__tab--active' : ''}`;
+
+  return (
+    <div className="velu-code-block velu-api-resp-panel">
+      <div className="velu-code-block__header">
+        <div className="velu-code-block__tabs" role="tablist">
+          <button
+            type="button"
+            role="tab"
+            aria-selected={tab === 'body'}
+            className={tabCls('body')}
+            onClick={() => setTab('body')}
+          >
+            <span className="velu-code-block__tab-label">Body</span>
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={tab === 'header'}
+            className={tabCls('header')}
+            onClick={() => setTab('header')}
+            disabled={!headerRows.length || undefined}
+          >
+            <span className="velu-code-block__tab-label">Header</span>
+          </button>
+        </div>
+      </div>
+
+      <div className="velu-api-resp-panel__content">
+        {tab === 'body' ? (
+          <>
+            <Callout
+              type={ok ? 'check' : 'danger'}
+              className="velu-api-resp-panel__status"
+            >
+              {statusLabel}
+            </Callout>
+            {!isError && (
+              <div className="velu-api-resp-body__scroll velu-hide-scrollbar">
+                <CodeBlock language="json">{bodyStr || '(empty)'}</CodeBlock>
+              </div>
+            )}
+          </>
+        ) : (
+          <div className="velu-api-resp-headers__scroll velu-hide-scrollbar">
+            <table className="velu-api-resp-headers">
+              <tbody>
+                {headerRows.map(([k, val]) => (
+                  <tr key={k}>
+                    <td className="velu-api-resp-headers__key">{k}</td>
+                    <td className="velu-api-resp-headers__val">{val}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import CodeBlock, { CodeGroup } from './CodeBlock.jsx';
+
+/**
+ * ApiSamples — the right-rail of an API reference page: the request code
+ * snippets (curl / JS / Python / Ruby tabs) and the example responses
+ * (one tab per status). The runtime renders this in the page's right aside
+ * (where the TOC sits for normal pages).
+ *
+ * @param {{ samples: {key,label,language,code}[], responses: object[] }} props
+ */
+export default function ApiSamples({ samples = [], responses = [] }) {
+  const withExample = responses.filter((r) => r.example != null);
+  return (
+    <div className="velu-api-samples">
+      {samples.length > 0 && (
+        <CodeGroup className="velu-api-samples__req">
+          {samples.map((s) => (
+            <CodeBlock key={s.key} title={s.label} language={s.language}>
+              {s.code}
+            </CodeBlock>
+          ))}
+        </CodeGroup>
+      )}
+      {withExample.length > 0 && (
+        <CodeGroup className="velu-api-samples__res">
+          {withExample.map((r) => (
+            <CodeBlock key={r.status} title={r.status} language="json">
+              {JSON.stringify(r.example, null, 2)}
+            </CodeBlock>
+          ))}
+        </CodeGroup>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,272 @@
+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"
+    >
+      {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>
+  );
+}