dev-api-ui 0.1.7

package/ui/components/Modal.tsx

@@ -0,0 +1,412 @@
+'use client';
+
+import { ReactNode, useEffect, useRef, useState } from 'react';
+
+interface ModalProps {
+  onClose: () => void;
+  children: ReactNode;
+  maxWidth?: number;
+}
+
+const CloseIcon = () => (
+  <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
+    <path d="M6 6l12 12" />
+    <path d="M18 6L6 18" />
+  </svg>
+);
+
+export function Modal({ onClose, children, maxWidth = 540 }: ModalProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<Element | null>(null);
+
+  useEffect(() => {
+    triggerRef.current = document.activeElement;
+    panelRef.current?.focus();
+    document.body.style.overflow = 'hidden';
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+        return;
+      }
+      if (e.key !== 'Tab') return;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const focusable = Array.from(
+        panel.querySelectorAll<HTMLElement>(
+          'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
+        )
+      );
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+      document.body.style.overflow = '';
+      (triggerRef.current as HTMLElement | null)?.focus();
+    };
+  }, [onClose]);
+
+  return (
+    <div
+      onClick={onClose}
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 50,
+        background: 'rgba(22,24,29,.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+        animation: 'mfade .12s ease-out',
+      }}
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-title"
+        tabIndex={-1}
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          width: '100%',
+          maxWidth,
+          maxHeight: '86vh',
+          overflow: 'auto',
+          background: 'var(--surface)',
+          border: '0.5px solid var(--hairline-2)',
+          borderRadius: 10,
+          animation: 'mrise .16s ease-out',
+          outline: 'none',
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+interface ModalHeaderProps {
+  title: string;
+  subtitle: string;
+  onClose: () => void;
+}
+
+export function ModalHeader({ title, subtitle, onClose }: ModalHeaderProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+        gap: 16,
+        padding: '20px 22px',
+        borderBottom: '0.5px solid var(--hairline)',
+      }}
+    >
+      <div>
+        <h3
+          id="modal-title"
+          style={{
+            fontFamily: 'var(--mono)',
+            fontSize: 18,
+            fontWeight: 600,
+            letterSpacing: '-0.01em',
+          }}
+        >
+          {title}
+        </h3>
+        <p style={{ fontSize: 13, color: 'var(--secondary)', marginTop: 4 }}>{subtitle}</p>
+      </div>
+      <button
+        onClick={onClose}
+        style={{
+          flex: 'none',
+          width: 30,
+          height: 30,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          border: '0.5px solid var(--hairline-2)',
+          borderRadius: 4,
+          background: 'var(--surface)',
+          color: 'var(--secondary)',
+          cursor: 'pointer',
+        }}
+        aria-label="Close"
+      >
+        <CloseIcon />
+      </button>
+    </div>
+  );
+}
+
+const DownloadIcon = () => (
+  <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="M12 3v12" />
+    <path d="M7 11l5 5 5-5" />
+    <path d="M5 21h14" />
+  </svg>
+);
+
+const LockIcon = () => (
+  <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <rect x="5" y="11" width="14" height="9" rx="1.5" />
+    <path d="M8 11V8a4 4 0 0 1 8 0v3" />
+  </svg>
+);
+
+const DL_ROWS = [
+  { gran: 'End of day (daily)', note: 'one settle per day', free: true },
+  { gran: 'Hourly', note: 'hourly bars', free: true },
+  { gran: '15-minute', note: 'intraday bars', free: false },
+  { gran: '1-minute', note: 'high-resolution', free: false },
+  { gran: 'Tick', note: 'every print', free: false },
+];
+
+interface DownloadModalProps {
+  sym: string;
+  onClose: () => void;
+}
+
+export function DownloadModal({ sym, onClose }: DownloadModalProps) {
+  const [fmt, setFmt] = useState<'CSV' | 'JSON' | 'Parquet'>('CSV');
+  return (
+    <Modal onClose={onClose}>
+      <ModalHeader
+        title={`Download ${sym}`}
+        subtitle="Anyone can export end-of-day and hourly. Intraday — 15-minute and finer — needs a Pro key."
+        onClose={onClose}
+      />
+      <div style={{ padding: '18px 22px' }}>
+        <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.07em', color: 'var(--tertiary)', marginBottom: 8 }}>
+          Format
+        </div>
+        <div aria-label="Format" style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
+          {(['CSV', 'JSON', 'Parquet'] as const).map((f) => (
+            <button
+              key={f}
+              aria-pressed={fmt === f}
+              onClick={() => setFmt(f)}
+              style={{
+                fontSize: 13,
+                fontWeight: 500,
+                padding: '6px 12px',
+                borderRadius: 4,
+                border: `0.5px solid ${fmt === f ? 'var(--accent)' : 'var(--hairline-2)'}`,
+                background: fmt === f ? '#F3FAF6' : 'var(--surface)',
+                color: fmt === f ? 'var(--accent)' : 'var(--secondary)',
+                cursor: 'pointer',
+              }}
+            >
+              {f}
+            </button>
+          ))}
+        </div>
+
+        <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.07em', color: 'var(--tertiary)', marginBottom: 8 }}>
+          Granularity
+        </div>
+        <div style={{ border: '0.5px solid var(--hairline-2)', borderRadius: 8, overflow: 'hidden' }}>
+          {DL_ROWS.map((row, i) => (
+            <div
+              key={row.gran}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: 14,
+                padding: '13px 16px',
+                borderBottom: i < DL_ROWS.length - 1 ? '0.5px solid var(--hairline)' : 'none',
+              }}
+            >
+              <div>
+                <div style={{ fontSize: 14, fontWeight: 500, color: row.free ? 'var(--ink)' : 'var(--tertiary)' }}>
+                  {row.gran}
+                </div>
+                <div style={{ fontSize: 12, color: 'var(--tertiary)', marginTop: 2 }}>{row.note}</div>
+              </div>
+              {row.free ? (
+                <a
+                  href="#"
+                  style={{
+                    flex: 'none',
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 6,
+                    fontSize: 13,
+                    fontWeight: 500,
+                    padding: '7px 12px',
+                    borderRadius: 4,
+                    border: '0.5px solid var(--hairline-2)',
+                    background: 'var(--surface)',
+                    color: 'var(--ink)',
+                    textDecoration: 'none',
+                  }}
+                >
+                  Download <DownloadIcon />
+                </a>
+              ) : (
+                <span
+                  style={{
+                    flex: 'none',
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 6,
+                    fontSize: 12,
+                    fontWeight: 500,
+                    color: 'var(--tertiary)',
+                  }}
+                >
+                  <LockIcon /> Pro
+                </span>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 16,
+          padding: '16px 22px',
+          borderTop: '0.5px solid var(--hairline)',
+          flexWrap: 'wrap',
+        }}
+      >
+        <span style={{ fontSize: 13, color: 'var(--secondary)' }}>Need intraday or tick history?</span>
+        <a
+          href="#"
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 7,
+            fontSize: 14,
+            fontWeight: 500,
+            padding: '9px 15px',
+            borderRadius: 4,
+            border: '0.5px solid transparent',
+            background: 'var(--accent)',
+            color: '#fff',
+            textDecoration: 'none',
+          }}
+        >
+          Upgrade to Pro
+        </a>
+      </div>
+    </Modal>
+  );
+}
+
+interface CiteModalProps {
+  sym: string;
+  group: string;
+  id: string;
+  name: string;
+  onClose: () => void;
+  brand?: string;
+  siteUrl?: string;
+}
+
+export function CiteModal({ sym, group, id, name, onClose, brand = 'Console', siteUrl = 'https://console.dev' }: CiteModalProps) {
+  const citeUrl = `${siteUrl}/${group}/${id}?as_of=2026-06-16`;
+  const citeText = `${brand} (2026). ${name} (${sym}) [Data set]. Retrieved 2026-06-16, from ${citeUrl}`;
+  const bibtex = `@misc{${brand.replace(/[^a-z0-9]/gi, '')}_${id.replace(/[^a-z0-9]/gi, '')}_2026,\n  title  = {${name} (${sym})},\n  author = {${brand}},\n  year   = {2026},\n  note   = {Point-in-time, as of 2026-06-16},\n  url    = {${citeUrl}}\n}`;
+  const [copied, setCopied] = useState<'url' | 'text' | 'bibtex' | null>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+
+  function copy(key: 'url' | 'text' | 'bibtex', value: string) {
+    navigator.clipboard.writeText(value).then(() => {
+      setCopied(key);
+      timerRef.current = setTimeout(() => setCopied(null), 1500);
+    });
+  }
+
+  return (
+    <Modal onClose={onClose} maxWidth={560}>
+      <ModalHeader
+        title={`Cite ${sym}`}
+        subtitle="Point-in-time citations resolve to the value as it was known on the date — reproducible and stable."
+        onClose={onClose}
+      />
+      <div style={{ padding: '18px 22px', display: 'grid', gap: 18 }}>
+        <div>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 7 }}>
+            <span style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.07em', color: 'var(--tertiary)' }}>
+              Permalink · point-in-time
+            </span>
+            <button onClick={() => copy('url', citeUrl)} style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 500, cursor: 'pointer', background: 'none', border: 'none', padding: 0 }}>{copied === 'url' ? 'Copied!' : 'Copy'}</button>
+          </div>
+          <div
+            style={{
+              fontFamily: 'var(--mono)',
+              fontSize: 13,
+              color: 'var(--ink)',
+              border: '0.5px solid var(--hairline-2)',
+              borderRadius: 4,
+              padding: '10px 12px',
+              background: 'var(--paper)',
+              wordBreak: 'break-all',
+            }}
+          >
+            {citeUrl}
+          </div>
+        </div>
+        <div>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 7 }}>
+            <span style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.07em', color: 'var(--tertiary)' }}>
+              Plain citation
+            </span>
+            <button onClick={() => copy('text', citeText)} style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 500, cursor: 'pointer', background: 'none', border: 'none', padding: 0 }}>{copied === 'text' ? 'Copied!' : 'Copy'}</button>
+          </div>
+          <p style={{ fontSize: 14, color: 'var(--ink)', lineHeight: 1.55 }}>{citeText}</p>
+        </div>
+        <div>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 7 }}>
+            <span style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.07em', color: 'var(--tertiary)' }}>
+              BibTeX
+            </span>
+            <button onClick={() => copy('bibtex', bibtex)} style={{ fontSize: 11, color: 'var(--code-dim)', fontWeight: 500, cursor: 'pointer', background: 'none', border: 'none', padding: 0 }}>{copied === 'bibtex' ? 'Copied!' : 'copy'}</button>
+          </div>
+          <pre
+            style={{
+              margin: 0,
+              padding: '14px 14px',
+              fontFamily: 'var(--mono)',
+              fontSize: 12.5,
+              lineHeight: 1.6,
+              color: 'var(--code-fg)',
+              background: 'var(--code-bg)',
+              border: '0.5px solid #23262B',
+              borderRadius: 8,
+              overflowX: 'auto',
+            }}
+          >
+            {bibtex}
+          </pre>
+        </div>
+      </div>
+      <div style={{ padding: '14px 22px', borderTop: '0.5px solid var(--hairline)', fontSize: 12, color: 'var(--tertiary)' }}>
+        Citations resolve point-in-time and never change once published.
+      </div>
+    </Modal>
+  );
+}

package/ui/components/Nav.tsx

@@ -0,0 +1,162 @@
+import Link from 'next/link';
+
+export type NavLink = { label: string; href: string };
+
+export interface NavProps {
+  wordmark?: string;
+  links?: NavLink[];
+  signInHref?: string;
+  getKeyHref?: string;
+  getKeyLabel?: string;
+  searchPlaceholder?: string;
+}
+
+const DEFAULT_LINKS: NavLink[] = [
+  { label: 'Data', href: '/fx' },
+  { label: 'Docs', href: '/docs' },
+  { label: 'Pricing', href: '/pricing' },
+  { label: 'Status', href: '/status' },
+];
+
+export default function Nav({
+  wordmark = 'Console',
+  links = DEFAULT_LINKS,
+  signInHref = '/login',
+  getKeyHref = '/signup',
+  getKeyLabel = 'Get API key',
+  searchPlaceholder = 'Search series, docs…',
+}: NavProps = {}) {
+  return (
+    <header
+      style={{
+        borderBottom: '0.5px solid var(--hairline)',
+        background: 'color-mix(in srgb, var(--paper) 85%, transparent)',
+        backdropFilter: 'saturate(180%) blur(8px)',
+        position: 'sticky',
+        top: 0,
+        zIndex: 20,
+      }}
+    >
+      <nav
+        style={{
+          maxWidth: 1100,
+          margin: '0 auto',
+          padding: '14px 32px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 24,
+        }}
+      >
+        {/* Left: wordmark + search */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 18,
+            flex: 1,
+            minWidth: 0,
+            maxWidth: 540,
+          }}
+        >
+          <Link
+            href="/"
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 9,
+              fontFamily: 'var(--mono)',
+              fontWeight: 600,
+              fontSize: 16,
+              letterSpacing: '-0.01em',
+              flex: 'none',
+              color: 'inherit',
+              textDecoration: 'none',
+            }}
+          >
+            <span
+              style={{
+                width: 9,
+                height: 9,
+                background: 'var(--accent)',
+                transform: 'rotate(45deg)',
+                display: 'inline-block',
+              }}
+            />
+            {wordmark}
+          </Link>
+          <span
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 9,
+              flex: 1,
+              minWidth: 0,
+              fontSize: 13,
+              color: 'var(--tertiary)',
+              border: '0.5px solid var(--hairline-2)',
+              borderRadius: 4,
+              padding: '8px 12px',
+              background: 'var(--surface)',
+            }}
+          >
+            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
+              <circle cx="11" cy="11" r="7" />
+              <path d="M21 21l-4-4" />
+            </svg>
+            <span style={{ flex: 1 }}>{searchPlaceholder}</span>
+            <span
+              style={{
+                border: '0.5px solid var(--hairline-2)',
+                borderRadius: 3,
+                padding: '1px 6px',
+                fontSize: 11,
+              }}
+            >
+              ⌘K
+            </span>
+          </span>
+        </div>
+
+        {/* Right: links + actions */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 18, flex: 'none' }}>
+          <div style={{ display: 'flex', gap: 20, fontSize: 14, color: 'var(--secondary)' }}>
+            {links.map((l) => (
+              <Link key={l.label} href={l.href} style={{ color: 'var(--secondary)', textDecoration: 'none' }}>{l.label}</Link>
+            ))}
+          </div>
+          <a
+            href={signInHref}
+            style={{
+              fontSize: 13,
+              fontWeight: 500,
+              padding: '7px 13px',
+              borderRadius: 4,
+              border: '0.5px solid var(--hairline-2)',
+              background: 'var(--surface)',
+              color: 'var(--ink)',
+              textDecoration: 'none',
+            }}
+          >
+            Sign in
+          </a>
+          <a
+            href={getKeyHref}
+            style={{
+              fontSize: 13,
+              fontWeight: 500,
+              padding: '7px 13px',
+              borderRadius: 4,
+              border: '0.5px solid transparent',
+              background: 'var(--accent)',
+              color: '#fff',
+              textDecoration: 'none',
+            }}
+          >
+            {getKeyLabel}
+          </a>
+        </div>
+      </nav>
+    </header>
+  );
+}

package/ui/components/OnThisPage.tsx

@@ -0,0 +1,56 @@
+interface Anchor {
+  id: string;
+  label: string;
+}
+
+interface OnThisPageProps {
+  anchors: Anchor[];
+  active: string;
+}
+
+export default function OnThisPage({ anchors, active }: OnThisPageProps) {
+  return (
+    <aside
+      style={{
+        position: 'sticky',
+        top: 57,
+        alignSelf: 'start',
+        padding: '34px 22px 40px',
+      }}
+    >
+      <div
+        style={{
+          fontSize: 11,
+          fontWeight: 600,
+          textTransform: 'uppercase',
+          letterSpacing: '.07em',
+          color: 'var(--tertiary)',
+          marginBottom: 10,
+        }}
+      >
+        On this page
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        {anchors.map((a) => {
+          const isActive = active === a.id;
+          return (
+            <a
+              key={a.id}
+              href={`#${a.id}`}
+              aria-current={isActive ? 'page' : undefined}
+              style={{
+                fontSize: 13,
+                textDecoration: 'none',
+                color: isActive ? 'var(--accent)' : 'var(--secondary)',
+                borderLeft: `2px solid ${isActive ? 'var(--accent)' : 'transparent'}`,
+                paddingLeft: 10,
+              }}
+            >
+              {a.label}
+            </a>
+          );
+        })}
+      </div>
+    </aside>
+  );
+}