dev-api-ui 0.1.7

package/ui/components/SeriesPage.tsx

@@ -0,0 +1,461 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import type { SeriesData } from '../data/series';
+import StatusMark from './StatusMark';
+import SeriesChart from './SeriesChart';
+import RangeBar from './RangeBar';
+import CodeTabs from './CodeTabs';
+import { DownloadModal, CiteModal } from './Modal';
+
+const ExternalIcon = () => (
+  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ verticalAlign: '-1px' }} aria-hidden="true">
+    <path d="M13 5h6v6" />
+    <path d="M19 5l-8 8" />
+    <path d="M19 13v5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5" />
+  </svg>
+);
+
+const DownloadIcon = () => (
+  <svg viewBox="0 0 24 24" width="14" height="14" 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 ArrowIcon = () => (
+  <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="M5 12h14" />
+    <path d="M13 6l6 6-6 6" />
+  </svg>
+);
+
+interface SeriesPageProps {
+  data: SeriesData;
+  brand?: string;
+  siteUrl?: string;
+  apiUrl?: string;
+}
+
+type Modal = 'download' | 'cite' | null;
+
+export default function SeriesPage({ data: d, brand = 'Console', siteUrl = 'https://console.dev', apiUrl = 'https://api.console.dev' }: SeriesPageProps) {
+  const [modal, setModal] = useState<Modal>(null);
+
+  return (
+    <>
+      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 32px' }}>
+
+        {/* HEADER */}
+        <section style={{ padding: '28px 0 26px' }}>
+          {/* Breadcrumb */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--tertiary)' }}>
+            <Link href="#" style={{ color: 'var(--secondary)', textDecoration: 'none' }}>Data</Link>
+            <span>/</span>
+            <Link href={`/${d.group}`} style={{ color: 'var(--secondary)', textDecoration: 'none' }}>{d.groupLabel}</Link>
+            <span>/</span>
+            <span style={{ color: 'var(--ink)' }}>{d.sym}</span>
+          </div>
+
+          {/* Aligned grid: eyebrow↔status, ticker↔value, name↔delta */}
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: '1fr auto',
+              columnGap: 30,
+              rowGap: 10,
+              alignItems: 'baseline',
+              marginTop: 18,
+            }}
+          >
+            {/* Row 1 */}
+            <div
+              style={{
+                justifySelf: 'start',
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 8,
+                fontSize: 12,
+                fontWeight: 600,
+                letterSpacing: '.04em',
+                textTransform: 'uppercase',
+                color: 'var(--accent)',
+              }}
+            >
+              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', display: 'inline-block' }} />
+              {d.eyebrow}
+            </div>
+            <div style={{ justifySelf: 'end' }}>
+              <StatusMark color={d.statusColor} label={d.statusLabel} pulse={true} />
+            </div>
+
+            {/* Row 2 */}
+            <h1
+              style={{
+                justifySelf: 'start',
+                margin: 0,
+                fontFamily: 'var(--head)',
+                fontSize: 38,
+                fontWeight: 600,
+                letterSpacing: '-0.02em',
+                lineHeight: 1.02,
+              }}
+            >
+              {d.sym}
+            </h1>
+            <div style={{ justifySelf: 'end', fontSize: 42, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1 }}>
+              {d.value}{' '}
+              {d.valueUnit && (
+                <span style={{ fontSize: 16, fontWeight: 500, color: 'var(--tertiary)' }}>{d.valueUnit}</span>
+              )}
+            </div>
+
+            {/* Row 3 */}
+            <div style={{ justifySelf: 'start', fontSize: 14, color: 'var(--secondary)' }}>
+              ({d.name})
+            </div>
+            <div style={{ justifySelf: 'end' }}>
+              <span
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: 6,
+                  fontSize: 14,
+                  fontWeight: 500,
+                  color: d.deltaColor,
+                }}
+              >
+                <span style={{ width: 7, height: 7, borderRadius: '50%', background: d.deltaColor, display: 'inline-block' }} />
+                {d.delta}{' '}
+                <span style={{ color: 'var(--tertiary)', fontWeight: 400 }}>{d.deltaNote}</span>
+              </span>
+            </div>
+          </div>
+
+          {/* Action buttons */}
+          <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
+            <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',
+              }}
+            >
+              Get API key
+            </a>
+            <button
+              onClick={() => setModal('download')}
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 7,
+                fontSize: 14,
+                fontWeight: 500,
+                fontFamily: 'inherit',
+                padding: '9px 15px',
+                borderRadius: 4,
+                border: '0.5px solid var(--hairline-2)',
+                background: 'var(--surface)',
+                color: 'var(--ink)',
+                cursor: 'pointer',
+              }}
+            >
+              Download CSV <DownloadIcon />
+            </button>
+            <button
+              onClick={() => setModal('cite')}
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 7,
+                fontSize: 14,
+                fontWeight: 500,
+                fontFamily: 'inherit',
+                padding: '9px 15px',
+                borderRadius: 4,
+                border: '0.5px solid var(--hairline-2)',
+                background: 'var(--surface)',
+                color: 'var(--ink)',
+                cursor: 'pointer',
+              }}
+            >
+              Cite this series
+            </button>
+          </div>
+        </section>
+
+        {/* CHART + RANGE */}
+        <section style={{ padding: '0 0 30px', borderBottom: '0.5px solid var(--hairline)' }}>
+          <SeriesChart
+            points={d.points}
+            line={d.line}
+            axisStart={d.axisStart}
+            axisMid={d.axisMid}
+            axisEnd={d.axisEnd}
+          />
+          <RangeBar ranges={d.ranges} defaultIndex={2} />
+        </section>
+
+        {/* GEO LEDE */}
+        <section style={{ padding: '30px 0', borderBottom: '0.5px solid var(--hairline)' }}>
+          <p style={{ fontSize: 18, color: 'var(--secondary)', lineHeight: 1.6 }}>
+            As of{' '}
+            <b style={{ color: 'var(--ink)', fontWeight: 500 }}>{d.asOf}</b>, {d.sym} ({d.name}) is{' '}
+            <b style={{ color: 'var(--ink)', fontWeight: 500 }}>{d.value}</b>, reconciled from{' '}
+            <b style={{ color: 'var(--ink)', fontWeight: 500 }}>{d.sourceFeeds}</b> and refreshed every{' '}
+            <b style={{ color: 'var(--ink)', fontWeight: 500 }}>{d.frequency}</b>. Every observation is
+            point-in-time and names the feed it came from — backtest-safe and reproducible. {d.sym} is
+            available over REST and WebSocket on the {brand} API, with a free tier to start.
+          </p>
+        </section>
+
+        {/* QUERY / CODE TABS */}
+        <section style={{ padding: '32px 0', borderBottom: '0.5px solid var(--hairline)' }}>
+          <h2
+            style={{
+              fontFamily: 'var(--head)',
+              fontSize: 20,
+              fontWeight: 600,
+              letterSpacing: '-0.01em',
+              marginBottom: 6,
+            }}
+          >
+            How do I query {d.sym}?
+          </h2>
+          <p style={{ fontSize: 15, color: 'var(--secondary)', marginBottom: 16 }}>
+            One authenticated GET returns the latest value with its timestamp and source. Swap the language tab for your stack.
+          </p>
+          <CodeTabs group={d.group} id={d.id} apiUrl={apiUrl} />
+          <div
+            style={{
+              marginTop: 12,
+              fontSize: 13,
+              color: 'var(--secondary)',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+            }}
+          >
+            <span style={{ color: 'var(--accent)', fontWeight: 600 }}>✓</span>
+            Every field in the response names the feed and timestamp it came from.
+          </div>
+        </section>
+
+        {/* REFERENCE CARD */}
+        <section style={{ padding: '32px 0', borderBottom: '0.5px solid var(--hairline)' }}>
+          <h2 style={{ fontFamily: 'var(--head)', fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em', marginBottom: 14 }}>
+            Reference
+          </h2>
+          <div
+            style={{
+              background: 'var(--surface)',
+              border: '0.5px solid var(--hairline-2)',
+              borderRadius: 8,
+              padding: '20px 22px',
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+              <span
+                style={{
+                  fontFamily: 'var(--mono)',
+                  fontSize: 11,
+                  fontWeight: 600,
+                  letterSpacing: '.04em',
+                  color: '#fff',
+                  background: 'var(--ink)',
+                  borderRadius: 4,
+                  padding: '3px 8px',
+                }}
+              >
+                GET
+              </span>
+              <span style={{ fontFamily: 'var(--mono)', fontSize: 15, color: 'var(--ink)' }}>{d.endpoint}</span>
+            </div>
+            <p style={{ fontSize: 14, color: 'var(--secondary)', marginTop: 12, lineHeight: 1.55 }}>
+              {d.endpointDesc}
+            </p>
+            <div
+              style={{
+                borderTop: '0.5px solid var(--hairline)',
+                marginTop: 16,
+                paddingTop: 18,
+                display: 'grid',
+                gridTemplateColumns: 'repeat(4, 1fr)',
+                gap: 24,
+              }}
+            >
+              {[
+                { label: 'Rate limit', val: d.rate },
+                { label: 'Latency p95', val: d.latency },
+                { label: 'Source feed', val: d.sourceFeeds },
+                { label: 'Frequency', val: d.frequency },
+              ].map(({ label, val }) => (
+                <div key={label}>
+                  <div style={{ fontSize: 10, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.07em', color: 'var(--tertiary)' }}>
+                    {label}
+                  </div>
+                  <div style={{ fontSize: 15, marginTop: 5 }}>{val}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* PROVENANCE */}
+        <section style={{ padding: '32px 0', borderBottom: '0.5px solid var(--hairline)' }}>
+          <h2 style={{ fontFamily: 'var(--head)', fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em', marginBottom: 14 }}>
+            Provenance
+          </h2>
+          <div
+            style={{
+              background: 'var(--surface)',
+              border: '0.5px solid var(--hairline-2)',
+              borderRadius: 8,
+              padding: '20px 22px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              gap: 18,
+              flexWrap: 'wrap',
+            }}
+          >
+            <div>
+              <div style={{ fontSize: 15 }}>
+                Reconciled against <span style={{ fontWeight: 500 }}>{d.sourceName}</span> · parser v2.1
+              </div>
+              <div style={{ fontSize: 13, color: 'var(--tertiary)', marginTop: 4 }}>
+                Methodology and revision log are public and versioned.
+              </div>
+            </div>
+            <a
+              href="#"
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 7,
+                fontSize: 14,
+                fontWeight: 500,
+                padding: '9px 15px',
+                borderRadius: 4,
+                border: '0.5px solid var(--hairline-2)',
+                background: 'var(--surface)',
+                color: 'var(--ink)',
+                textDecoration: 'none',
+              }}
+            >
+              Read methodology <ExternalIcon />
+            </a>
+          </div>
+        </section>
+
+        {/* MORE IN GROUP */}
+        <section style={{ padding: '32px 0', borderBottom: '0.5px solid var(--hairline)' }}>
+          <h2 style={{ fontFamily: 'var(--head)', fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em', marginBottom: 16 }}>
+            More in {d.groupLabel}
+          </h2>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 14 }}>
+            {d.related.map((r) => (
+              <Link
+                key={r.sym}
+                href={`/${r.group}/${r.sym.replace('/', '').toLowerCase()}`}
+                style={{
+                  display: 'block',
+                  background: 'var(--surface)',
+                  border: '0.5px solid var(--hairline-2)',
+                  borderRadius: 8,
+                  padding: '18px 20px',
+                  color: 'inherit',
+                  textDecoration: 'none',
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                  <span style={{ fontFamily: 'var(--mono)', fontSize: 15, fontWeight: 600, letterSpacing: '-0.01em' }}>
+                    {r.sym}
+                  </span>
+                  <StatusMark color={r.color} label={r.status} size={6} fontSize={12} />
+                </div>
+                <div style={{ fontSize: 13, color: 'var(--secondary)', marginTop: 6 }}>{r.name}</div>
+                <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em', marginTop: 10 }}>{r.val}</div>
+              </Link>
+            ))}
+          </div>
+        </section>
+
+        {/* RELATED READING */}
+        <section style={{ padding: '32px 0 8px' }}>
+          <h2 style={{ fontFamily: 'var(--head)', fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em', marginBottom: 16 }}>
+            Related reading
+          </h2>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 14 }}>
+            {d.reading.map((item) => (
+              <a
+                key={item.title}
+                href="#"
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 8,
+                  background: 'var(--surface)',
+                  border: '0.5px solid var(--hairline-2)',
+                  borderRadius: 8,
+                  padding: '18px 20px',
+                  color: 'inherit',
+                  textDecoration: 'none',
+                  minHeight: 108,
+                }}
+              >
+                <span style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.07em', color: 'var(--accent)' }}>
+                  {item.type}
+                </span>
+                <span style={{ fontSize: 15, fontWeight: 500, color: 'var(--ink)', lineHeight: 1.4 }}>
+                  {item.title}
+                </span>
+                <span
+                  style={{
+                    marginTop: 'auto',
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 6,
+                    fontSize: 13,
+                    fontWeight: 500,
+                    color: 'var(--accent)',
+                  }}
+                >
+                  Read <ArrowIcon />
+                </span>
+              </a>
+            ))}
+          </div>
+        </section>
+
+      </div>
+
+      {/* MODALS */}
+      {modal === 'download' && (
+        <DownloadModal sym={d.sym} onClose={() => setModal(null)} />
+      )}
+      {modal === 'cite' && (
+        <CiteModal
+          sym={d.sym}
+          group={d.group}
+          id={d.id}
+          name={d.name}
+          brand={brand}
+          siteUrl={siteUrl}
+          onClose={() => setModal(null)}
+        />
+      )}
+    </>
+  );
+}

package/ui/components/StatusMark.tsx

@@ -0,0 +1,48 @@
+interface StatusMarkProps {
+  color: string;
+  label: string;
+  pulse?: boolean;
+  size?: number;
+  fontSize?: number;
+  mono?: boolean;
+  uppercase?: boolean;
+}
+
+export default function StatusMark({
+  color,
+  label,
+  pulse = false,
+  size = 7,
+  fontSize = 13,
+  mono = false,
+  uppercase = false,
+}: StatusMarkProps) {
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 6,
+        fontSize,
+        fontWeight: 500,
+        color,
+        fontFamily: mono ? 'var(--mono)' : undefined,
+        textTransform: uppercase ? 'uppercase' : undefined,
+        letterSpacing: uppercase ? '.03em' : undefined,
+      }}
+    >
+      <span
+        style={{
+          width: size,
+          height: size,
+          borderRadius: '50%',
+          background: color,
+          display: 'inline-block',
+          animation: pulse ? 'cpulse 1.8s ease-in-out infinite' : undefined,
+          flexShrink: 0,
+        }}
+      />
+      {label}
+    </span>
+  );
+}

package/ui/components/publictrades/ExternalLink.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+// Box-with-45°-arrow external link glyph — reused in source block + tape rows
+interface ExternalLinkProps {
+  href?: string;
+  width?: number;
+  height?: number;
+  style?: React.CSSProperties;
+}
+
+export default function ExternalLinkIcon({ href = '#', width = 14, height = 14, style }: ExternalLinkProps) {
+  return (
+    <a
+      href={href}
+      style={{ display: 'inline-flex', color: 'var(--accent)', ...style }}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        width={width}
+        height={height}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+        style={{ verticalAlign: '-1px' }}
+      >
+        <path d="M13 5h6v6" />
+        <path d="M19 5l-8 8" />
+        <path d="M19 13v5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5" />
+      </svg>
+    </a>
+  );
+}

package/ui/components/publictrades/FactsCard.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { ReactNode } from 'react';
+
+interface FactRow {
+  k: string;
+  v: ReactNode;
+}
+
+interface FactsCardProps {
+  rows: FactRow[];
+}
+
+export default function FactsCard({ rows }: FactsCardProps) {
+  return (
+    <div style={{
+      background: 'var(--surface)',
+      border: '.5px solid var(--hairline-2)',
+      borderRadius: 8,
+      padding: '4px 22px',
+    }}>
+      {rows.map((row, i) => (
+        <div
+          key={i}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 18,
+            padding: '13px 0',
+            borderBottom: i < rows.length - 1 ? '.5px solid var(--hairline)' : 'none',
+          }}
+        >
+          <span style={{ fontSize: 13, color: 'var(--secondary)', flex: 'none' }}>{row.k}</span>
+          <span style={{ fontSize: 14, textAlign: 'right' }}>{row.v}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

package/ui/components/publictrades/LedgerFooter.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+export default function LedgerFooter() {
+  return (
+    <footer style={{ borderTop: '.5px solid var(--hairline)', padding: '22px 0 60px', marginTop: 62 }}>
+      <div style={{
+        maxWidth: 760,
+        margin: '0 auto',
+        padding: '0 28px',
+        fontSize: 12,
+        color: 'var(--tertiary)',
+        display: 'flex',
+        justifyContent: 'space-between',
+        gap: 16,
+        flexWrap: 'wrap',
+      }}>
+        <span>PublicTrades · the disclosure tape · by the makers of the open filing index</span>
+        <span style={{ fontFamily: 'var(--mono)', letterSpacing: '-.01em' }}>Ledger v0.2</span>
+      </div>
+    </footer>
+  );
+}

package/ui/components/publictrades/LedgerNav.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+interface LedgerNavProps {
+  onGoTape?: () => void;
+}
+
+export default function LedgerNav({ onGoTape }: LedgerNavProps) {
+  return (
+    <header style={{ borderBottom: '.5px solid var(--hairline)', background: 'var(--paper)' }}>
+      <nav style={{
+        maxWidth: 760,
+        margin: '0 auto',
+        padding: '18px 28px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}>
+        {/* Wordmark */}
+        <button
+          onClick={onGoTape}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 9,
+            fontWeight: 600,
+            fontSize: 16,
+            letterSpacing: '-.01em',
+            cursor: 'pointer',
+            background: 'none',
+            border: 'none',
+            padding: 0,
+            color: 'inherit',
+          }}
+        >
+          <span style={{
+            width: 9,
+            height: 9,
+            borderRadius: '50%',
+            background: 'var(--accent)',
+            display: 'inline-block',
+          }} />
+          PublicTrades
+        </button>
+
+        {/* Nav links */}
+        <div style={{ display: 'flex', gap: 22, alignItems: 'center', fontSize: 14, color: 'var(--secondary)' }}>
+          <button
+            onClick={onGoTape}
+            style={{ color: 'var(--secondary)', cursor: 'pointer', background: 'none', border: 'none', padding: 0, fontSize: 'inherit' }}
+          >
+            Tape
+          </button>
+          <a href="#" style={{ color: 'var(--secondary)' }}>Docs</a>
+          <a href="#" style={{ color: 'var(--secondary)' }}>Pricing</a>
+          <a
+            href="#"
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 7,
+              fontSize: 13,
+              fontWeight: 500,
+              padding: '6px 12px',
+              borderRadius: 4,
+              cursor: 'pointer',
+              border: '.5px solid var(--hairline-2)',
+              background: 'transparent',
+              color: 'var(--ink)',
+              textDecoration: 'none',
+            }}
+          >
+            Get API key
+          </a>
+        </div>
+      </nav>
+    </header>
+  );
+}