@aravindc26/velu 0.11.0 → 0.11.3

package/src/engine/components/icon.tsx

@@ -0,0 +1,136 @@
+import type { LucideIcon } from 'lucide-react';
+import {
+  Apple,
+  ArrowRight,
+  BookOpen,
+  CircleHelp,
+  Code2,
+  Download,
+  ExternalLink,
+  Flag,
+  Frame,
+  Lightbulb,
+  Hand,
+  Layers3,
+  Lock,
+  Newspaper,
+  Play,
+  Rocket,
+  Send,
+  Smartphone,
+  SquareTerminal,
+  Sparkles,
+  TriangleAlert,
+  Webhook,
+} from 'lucide-react';
+import type { VeluIconLibrary } from '@/lib/velu';
+
+const ICONS: Record<string, LucideIcon> = {
+  apple: Apple,
+  'arrow-right': ArrowRight,
+  'book-open': BookOpen,
+  'code-2': Code2,
+  download: Download,
+  'external-link': ExternalLink,
+  flag: Flag,
+  frame: Frame,
+  lightbulb: Lightbulb,
+  hand: Hand,
+  'layers-3': Layers3,
+  lock: Lock,
+  newspaper: Newspaper,
+  play: Play,
+  rocket: Rocket,
+  send: Send,
+  smartphone: Smartphone,
+  'square-terminal': SquareTerminal,
+  sparkles: Sparkles,
+  'triangle-alert': TriangleAlert,
+  webhook: Webhook,
+};
+
+const ALIASES: Record<string, string> = {
+  api: 'code-2',
+  bulb: 'lightbulb',
+  'book-open-cover': 'book-open',
+  'light-bulb': 'lightbulb',
+  'hand-index-finger': 'hand',
+  'hand-finger-right': 'hand',
+  'hand-point-right': 'hand',
+  'layer-group': 'layers-3',
+};
+
+function normalizeIconName(name: string): string {
+  return name.toLowerCase().trim().replace(/[_\s]+/g, '-');
+}
+
+export function VeluIcon({
+  name,
+  library = 'fontawesome',
+  iconType,
+  color,
+  className,
+  fallback = true,
+}: {
+  name?: string;
+  library?: VeluIconLibrary;
+  iconType?: string;
+  color?: string;
+  className?: string;
+  fallback?: boolean;
+}) {
+  if (!name) {
+    return fallback ? <CircleHelp className={className} style={color ? { color } : undefined} aria-hidden="true" /> : null;
+  }
+
+  const normalized = normalizeIconName(name);
+  if (/^(https?:\/\/|\/|\.{1,2}\/)/.test(name) || /\.(svg|png|jpg|jpeg|webp|gif)$/i.test(name)) {
+    return <img src={name} alt="" className={className} aria-hidden="true" />;
+  }
+
+  const canonical = ALIASES[normalized] ?? normalized;
+  const Icon = ICONS[canonical];
+
+  if (Icon) return <Icon className={className} style={color ? { color } : undefined} aria-hidden="true" />;
+
+  const faPrefixByType: Record<string, string> = {
+    brands: 'fa6-brands',
+    regular: 'fa6-regular',
+    solid: 'fa6-solid',
+    light: 'fa6-light',
+    thin: 'fa6-thin',
+    'sharp-solid': 'fa6-sharp-solid',
+    duotone: 'fa6-duotone',
+  };
+
+  const prefix =
+    library === 'lucide'
+      ? 'lucide'
+      : library === 'tabler'
+        ? 'tabler'
+        : faPrefixByType[(iconType ?? '').toLowerCase()] ?? 'fa6-solid';
+
+  const iconifyName = canonical.replace(/^fa-/, '');
+  const iconifyUrl = `https://api.iconify.design/${prefix}:${iconifyName}.svg`;
+
+  return (
+    <span
+      className={className}
+      aria-hidden="true"
+      style={{
+        display: 'inline-block',
+        width: '1em',
+        height: '1em',
+        backgroundColor: color ?? 'currentColor',
+        WebkitMaskImage: `url("${iconifyUrl}")`,
+        maskImage: `url("${iconifyUrl}")`,
+        WebkitMaskRepeat: 'no-repeat',
+        maskRepeat: 'no-repeat',
+        WebkitMaskPosition: 'center',
+        maskPosition: 'center',
+        WebkitMaskSize: 'contain',
+        maskSize: 'contain',
+      }}
+    />
+  );
+}

package/src/engine/components/image-zoom-fallback.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { createPortal } from "react-dom";
+import { useEffect, useState } from "react";
+
+type LightboxImage = {
+  src: string;
+  alt: string;
+};
+
+function hasNoZoom(img: HTMLImageElement): boolean {
+  return img.hasAttribute("noZoom")
+    || img.hasAttribute("nozoom")
+    || img.getAttribute("data-no-zoom") === "true";
+}
+
+function shouldSkipImage(img: HTMLImageElement): boolean {
+  if (!img.src) return true;
+  if (img.classList.contains("velu-image-zoomable")) return true; // handled by VeluImage
+  if (hasNoZoom(img)) return true;
+  if (img.closest("pre, code, .shiki")) return true;
+  if (img.closest(".velu-image-lightbox")) return true;
+  if (img.classList.contains("velu-view-option-icon-img") || img.classList.contains("velu-lang-icon-img")) return true;
+
+  const rect = img.getBoundingClientRect();
+  if (rect.width > 0 && rect.height > 0 && (rect.width < 96 || rect.height < 56)) return true;
+  return false;
+}
+
+function applyZoomableMarkers(root: ParentNode) {
+  const images = root.querySelectorAll<HTMLImageElement>("#nd-page img");
+  for (const img of images) {
+    if (shouldSkipImage(img)) {
+      img.classList.remove("velu-image-zoomable-fallback");
+      if (img.getAttribute("data-velu-zoom-fallback") === "1") {
+        img.removeAttribute("data-velu-zoom-fallback");
+        if (img.getAttribute("role") === "button") img.removeAttribute("role");
+      }
+      continue;
+    }
+
+    img.classList.add("velu-image-zoomable-fallback");
+    if (!img.hasAttribute("tabindex")) img.tabIndex = 0;
+    if (!img.hasAttribute("role")) img.setAttribute("role", "button");
+    img.setAttribute("data-velu-zoom-fallback", "1");
+  }
+}
+
+export function VeluImageZoomFallback() {
+  const [mounted, setMounted] = useState(false);
+  const [activeImage, setActiveImage] = useState<LightboxImage | null>(null);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    const pageRoot = document.getElementById("nd-page");
+    if (!pageRoot) return;
+
+    const tryOpen = (img: HTMLImageElement) => {
+      if (shouldSkipImage(img)) return;
+      setActiveImage({
+        src: img.currentSrc || img.src,
+        alt: img.alt ?? "",
+      });
+    };
+
+    applyZoomableMarkers(document);
+
+    const observerOptions: MutationObserverInit = { subtree: true, childList: true, attributes: true, attributeFilter: ["class", "src", "noZoom", "nozoom"] };
+    const observer = new MutationObserver(() => {
+      observer.disconnect();
+      applyZoomableMarkers(document);
+      observer.observe(pageRoot, observerOptions);
+    });
+    observer.observe(pageRoot, observerOptions);
+
+    const onClickCapture = (event: MouseEvent) => {
+      const target = event.target as Element | null;
+      const img = target?.closest("img") as HTMLImageElement | null;
+      if (!img || !pageRoot.contains(img)) return;
+      if (!img.classList.contains("velu-image-zoomable-fallback")) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+      tryOpen(img);
+    };
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Enter" && event.key !== " ") return;
+      const active = document.activeElement as HTMLImageElement | null;
+      if (!active || !pageRoot.contains(active)) return;
+      if (!(active instanceof HTMLImageElement)) return;
+      if (!active.classList.contains("velu-image-zoomable-fallback")) return;
+
+      event.preventDefault();
+      tryOpen(active);
+    };
+
+    pageRoot.addEventListener("click", onClickCapture, true);
+    pageRoot.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      observer.disconnect();
+      pageRoot.removeEventListener("click", onClickCapture, true);
+      pageRoot.removeEventListener("keydown", onKeyDown);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!activeImage) return;
+    const prevOverflow = document.body.style.overflow;
+    const onEsc = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setActiveImage(null);
+    };
+
+    document.body.style.overflow = "hidden";
+    window.addEventListener("keydown", onEsc);
+    return () => {
+      document.body.style.overflow = prevOverflow;
+      window.removeEventListener("keydown", onEsc);
+    };
+  }, [activeImage]);
+
+  if (!mounted || !activeImage) return null;
+
+  return createPortal(
+    <div className="velu-image-lightbox" role="dialog" aria-modal="true" onClick={() => setActiveImage(null)}>
+      <button
+        type="button"
+        className="velu-image-lightbox-close"
+        aria-label="Close image zoom"
+        onClick={() => setActiveImage(null)}
+      >
+        ×
+      </button>
+      <img
+        src={activeImage.src}
+        alt={activeImage.alt}
+        className="velu-image-lightbox-img"
+        onClick={(event) => event.stopPropagation()}
+      />
+    </div>,
+    document.body,
+  );
+}

package/src/engine/components/image.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { createPortal } from "react-dom";
+import { useEffect, useMemo, useState, type ImgHTMLAttributes, type KeyboardEvent, type MouseEvent } from "react";
+
+type VeluImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, "src"> & {
+  src?: string | { src?: string };
+  noZoom?: boolean | "" | "true" | "false";
+};
+
+function toImageSrc(value: VeluImageProps["src"]): string | undefined {
+  if (typeof value === "string") return value;
+  if (value && typeof value === "object" && typeof value.src === "string") return value.src;
+  return undefined;
+}
+
+function isNoZoom(value: VeluImageProps["noZoom"]): boolean {
+  if (value === true || value === "") return true;
+  if (typeof value === "string") return value.toLowerCase() === "true";
+  return false;
+}
+
+export function VeluImage({
+  src,
+  alt,
+  className,
+  noZoom,
+  onClick,
+  onKeyDown,
+  tabIndex,
+  role,
+  ...props
+}: VeluImageProps) {
+  const [open, setOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const resolvedSrc = useMemo(() => toImageSrc(src), [src]);
+  const zoomDisabled = isNoZoom(noZoom) || !resolvedSrc;
+  const isZoomable = !zoomDisabled;
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    const previousOverflow = document.body.style.overflow;
+    const onEsc = (event: globalThis.KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+
+    document.body.style.overflow = "hidden";
+    window.addEventListener("keydown", onEsc);
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener("keydown", onEsc);
+    };
+  }, [open]);
+
+  const handleClick = (event: MouseEvent<HTMLImageElement>) => {
+    onClick?.(event);
+    if (event.defaultPrevented || !isZoomable) return;
+    event.preventDefault();
+    event.stopPropagation();
+    setOpen(true);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLImageElement>) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || !isZoomable) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    setOpen(true);
+  };
+
+  return (
+    <>
+      <img
+        {...props}
+        src={resolvedSrc}
+        alt={alt}
+        className={[className, isZoomable ? "velu-image-zoomable" : ""].filter(Boolean).join(" ")}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        role={isZoomable ? "button" : role}
+        tabIndex={isZoomable ? (tabIndex ?? 0) : tabIndex}
+        aria-label={isZoomable ? (alt ? `Zoom image: ${alt}` : "Zoom image") : props["aria-label"]}
+      />
+      {mounted && open && resolvedSrc
+        ? createPortal(
+          <div className="velu-image-lightbox" role="dialog" aria-modal="true" onClick={() => setOpen(false)}>
+            <button
+              type="button"
+              className="velu-image-lightbox-close"
+              aria-label="Close image zoom"
+              onClick={() => setOpen(false)}
+            >
+              ×
+            </button>
+            <img
+              src={resolvedSrc}
+              alt={alt ?? ""}
+              className="velu-image-lightbox-img"
+              onClick={(event) => event.stopPropagation()}
+            />
+          </div>,
+          document.body,
+        )
+        : null}
+    </>
+  );
+}

package/src/engine/components/manual-api-playground.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+type PlaygroundDisplayMode = 'interactive' | 'simple' | 'none';
+type AuthMethod = 'bearer' | 'basic' | 'key' | 'none';
+
+interface VeluManualApiPlaygroundProps {
+  method: string;
+  url: string;
+  display?: PlaygroundDisplayMode;
+  authMethod?: AuthMethod;
+  authName?: string;
+  className?: string;
+}
+
+interface RequestResult {
+  status: number;
+  statusText: string;
+  body: string;
+}
+
+export function VeluManualApiPlayground({
+  method,
+  url,
+  display = 'interactive',
+  authMethod = 'none',
+  authName = 'x-api-key',
+  className,
+}: VeluManualApiPlaygroundProps) {
+  const normalizedMethod = String(method || 'GET').toUpperCase();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<RequestResult | null>(null);
+
+  const [bearerToken, setBearerToken] = useState('');
+  const [basicUser, setBasicUser] = useState('');
+  const [basicPass, setBasicPass] = useState('');
+  const [apiKey, setApiKey] = useState('');
+
+  const headers = useMemo(() => {
+    const nextHeaders = new Headers();
+
+    if (authMethod === 'bearer' && bearerToken) {
+      nextHeaders.set('Authorization', `Bearer ${bearerToken}`);
+    }
+
+    if (authMethod === 'basic' && (basicUser || basicPass)) {
+      const encoded = window.btoa(`${basicUser}:${basicPass}`);
+      nextHeaders.set('Authorization', `Basic ${encoded}`);
+    }
+
+    if (authMethod === 'key' && apiKey) {
+      nextHeaders.set(authName || 'x-api-key', apiKey);
+    }
+
+    return nextHeaders;
+  }, [apiKey, authMethod, authName, basicPass, basicUser, bearerToken]);
+
+  async function sendRequest() {
+    setIsLoading(true);
+    setError(null);
+    setResult(null);
+
+    try {
+      const response = await fetch(url, {
+        method: normalizedMethod,
+        headers,
+      });
+
+      const text = await response.text();
+      let formatted = text;
+      try {
+        const parsed = JSON.parse(text);
+        formatted = JSON.stringify(parsed, null, 2);
+      } catch {
+        // Keep raw body text when response is not JSON.
+      }
+
+      setResult({
+        status: response.status,
+        statusText: response.statusText,
+        body: formatted,
+      });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Request failed';
+      setError(message);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  if (display === 'none') return null;
+
+  if (display === 'simple') {
+    return (
+      <section className={['velu-manual-api', 'velu-manual-api-simple', className].filter(Boolean).join(' ')}>
+        <code>{normalizedMethod} {url}</code>
+      </section>
+    );
+  }
+
+  return (
+    <section className={['velu-manual-api', className].filter(Boolean).join(' ')}>
+      <div className="velu-manual-api-head">
+        <span className="velu-manual-api-method">{normalizedMethod}</span>
+        <code className="velu-manual-api-url">{url}</code>
+        <button type="button" className="velu-manual-api-send" onClick={sendRequest} disabled={isLoading}>
+          {isLoading ? 'Sending…' : 'Send'}
+        </button>
+      </div>
+
+      {authMethod === 'bearer' ? (
+        <label className="velu-manual-api-auth">
+          <span>Bearer token</span>
+          <input type="password" value={bearerToken} onChange={(event) => setBearerToken(event.target.value)} placeholder="Enter token" />
+        </label>
+      ) : null}
+
+      {authMethod === 'basic' ? (
+        <div className="velu-manual-api-auth-grid">
+          <label className="velu-manual-api-auth">
+            <span>Username</span>
+            <input type="text" value={basicUser} onChange={(event) => setBasicUser(event.target.value)} placeholder="Username" />
+          </label>
+          <label className="velu-manual-api-auth">
+            <span>Password</span>
+            <input type="password" value={basicPass} onChange={(event) => setBasicPass(event.target.value)} placeholder="Password" />
+          </label>
+        </div>
+      ) : null}
+
+      {authMethod === 'key' ? (
+        <label className="velu-manual-api-auth">
+          <span>{authName || 'x-api-key'}</span>
+          <input type="password" value={apiKey} onChange={(event) => setApiKey(event.target.value)} placeholder="Enter API key" />
+        </label>
+      ) : null}
+
+      {error ? <p className="velu-manual-api-error">{error}</p> : null}
+
+      {result ? (
+        <div className="velu-manual-api-result">
+          <div className="velu-manual-api-status">
+            {result.status} {result.statusText}
+          </div>
+          <pre>
+            <code>{result.body || '(empty response)'}</code>
+          </pre>
+        </div>
+      ) : null}
+    </section>
+  );
+}

package/src/engine/components/mermaid.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import mermaid from 'mermaid';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+type MermaidPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+let mermaidInitialized = false;
+
+function ensureMermaid() {
+  if (mermaidInitialized) return;
+  mermaid.initialize({
+    startOnLoad: false,
+    securityLevel: 'loose',
+    theme: 'base',
+    suppressErrorRendering: true,
+  });
+  mermaidInitialized = true;
+}
+
+function buildSvgThemeCss() {
+  return [
+    ':root{--m-fg:#0f172a;--m-bg:#ffffff;--m-border:#cbd5e1;--m-edge-bg:#e2e8f0;}',
+    ':root[data-theme="dark"],.dark{--m-fg:#e5e7eb;--m-bg:#0b1220;--m-border:#334155;--m-edge-bg:#1f2937;}',
+    '.velu-mermaid-svg svg{font-family:inherit!important;}',
+    '.velu-mermaid-svg .label,.velu-mermaid-svg .label text,.velu-mermaid-svg .nodeLabel,.velu-mermaid-svg .nodeLabel p,.velu-mermaid-svg .edgeLabel,.velu-mermaid-svg .edgeLabel text,.velu-mermaid-svg .cluster-label text,.velu-mermaid-svg text{color:var(--m-fg)!important;fill:var(--m-fg)!important;}',
+    '.velu-mermaid-svg .node rect,.velu-mermaid-svg .node circle,.velu-mermaid-svg .node ellipse,.velu-mermaid-svg .node polygon,.velu-mermaid-svg .node path{stroke:var(--m-border)!important;fill:color-mix(in oklab,var(--m-bg) 92%,var(--m-fg) 8%)!important;}',
+    '.velu-mermaid-svg .edgePath .path,.velu-mermaid-svg .flowchart-link{stroke:var(--m-fg)!important;stroke-opacity:.95!important;}',
+    '.velu-mermaid-svg .edgeLabel rect,.velu-mermaid-svg .labelBkg{fill:var(--m-edge-bg)!important;stroke:var(--m-border)!important;opacity:1!important;}',
+    '.velu-mermaid-svg g.edgeLabel,.velu-mermaid-svg .edgeLabel{opacity:1!important;}',
+    '.velu-mermaid-svg .edgeLabel text{fill:var(--m-fg)!important;}',
+    '.velu-mermaid-svg .edgeLabel .label,.velu-mermaid-svg .edgeLabel .label *{color:var(--m-fg)!important;background:transparent!important;padding:0!important;border:0!important;box-shadow:none!important;}',
+    '.velu-mermaid-svg .edgeLabel foreignObject,.velu-mermaid-svg .edgeLabel foreignObject *{overflow:visible!important;}',
+    '.velu-mermaid-svg .cluster rect{fill:color-mix(in oklab,var(--m-bg) 88%,var(--m-fg) 12%)!important;stroke:var(--m-border)!important;}',
+    '.velu-mermaid-svg .marker,.velu-mermaid-svg marker path{fill:var(--m-fg)!important;stroke:var(--m-fg)!important;}',
+  ].join('');
+}
+
+export function VeluMermaid({
+  chart,
+  children,
+  className,
+  actions,
+  placement = 'bottom-right',
+}: {
+  chart?: string;
+  children?: unknown;
+  className?: string;
+  actions?: boolean;
+  placement?: MermaidPlacement;
+}) {
+  const source = useMemo(() => {
+    if (typeof chart === 'string' && chart.trim()) return chart;
+    if (typeof children === 'string' && children.trim()) return children;
+    return '';
+  }, [chart, children]);
+
+  const [svg, setSvg] = useState<string>('');
+  const [error, setError] = useState<string>('');
+  const [scale, setScale] = useState<number>(1);
+  const [offset, setOffset] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
+  const [autoActions, setAutoActions] = useState<boolean>(false);
+  const hostRef = useRef<HTMLDivElement | null>(null);
+  const uid = useMemo(() => `velu-mermaid-${Math.random().toString(36).slice(2, 10)}`, []);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function run() {
+      if (!source) {
+        setSvg('');
+        setError('');
+        return;
+      }
+
+      try {
+        ensureMermaid();
+        const { svg: rendered } = await mermaid.render(uid, source);
+        if (cancelled) return;
+        setSvg(rendered);
+        setError('');
+      } catch {
+        if (cancelled) return;
+        setSvg('');
+        setError('Failed to render Mermaid diagram.');
+      }
+    }
+
+    run();
+    return () => {
+      cancelled = true;
+    };
+  }, [source, uid]);
+
+  useEffect(() => {
+    if (!hostRef.current || !svg) {
+      setAutoActions(false);
+      return;
+    }
+    const svgEl = hostRef.current.querySelector('svg');
+    const h = svgEl?.getBoundingClientRect().height ?? 0;
+    setAutoActions(h > 220);
+  }, [svg]);
+
+  const showActions = Boolean(actions ?? autoActions);
+
+  const controlsClass = `velu-mermaid-controls velu-mermaid-controls-${placement}`;
+  const transform = `translate(${offset.x}px, ${offset.y}px) scale(${scale})`;
+
+  return (
+    <div className={['velu-mermaid', className].filter(Boolean).join(' ')}>
+      <div
+        className="velu-mermaid-stage"
+        ref={hostRef}
+        style={{ transform }}
+      >
+        {error ? (
+          <pre className="velu-mermaid-error"><code>{source}</code></pre>
+        ) : (
+          <div
+            className="velu-mermaid-svg"
+            dangerouslySetInnerHTML={{ __html: svg }}
+          />
+        )}
+      </div>
+
+      <style dangerouslySetInnerHTML={{ __html: buildSvgThemeCss() }} />
+
+      {showActions ? (
+        <div className={controlsClass}>
+          <button className="velu-mermaid-btn-up" type="button" onClick={() => setOffset((p) => ({ ...p, y: p.y - 18 }))} aria-label="Pan up">↑</button>
+          <button className="velu-mermaid-btn-zoom-in" type="button" onClick={() => setScale((v) => Math.min(2.4, +(v + 0.1).toFixed(2)))} aria-label="Zoom in">+</button>
+          <button className="velu-mermaid-btn-left" type="button" onClick={() => setOffset((p) => ({ ...p, x: p.x - 18 }))} aria-label="Pan left">←</button>
+          <button className="velu-mermaid-btn-reset" type="button" onClick={() => { setScale(1); setOffset({ x: 0, y: 0 }); }} aria-label="Reset">↻</button>
+          <button className="velu-mermaid-btn-right" type="button" onClick={() => setOffset((p) => ({ ...p, x: p.x + 18 }))} aria-label="Pan right">→</button>
+          <button className="velu-mermaid-btn-down" type="button" onClick={() => setOffset((p) => ({ ...p, y: p.y + 18 }))} aria-label="Pan down">↓</button>
+          <button className="velu-mermaid-btn-zoom-out" type="button" onClick={() => setScale((v) => Math.max(0.6, +(v - 0.1).toFixed(2)))} aria-label="Zoom out">−</button>
+        </div>
+      ) : null}
+    </div>
+  );
+}