dev-api-ui 0.1.7

package/ui/components/publictrades/Mark.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+// Status mark: colored dot + colored text. No pill, no chip, no border.
+interface MarkProps {
+  label: string;
+  color: string;  // hex — e.g. C.buy
+  size?: number;  // dot px, default 7
+  fontSize?: number;
+  justify?: 'start' | 'end';
+  eyebrow?: boolean; // mono uppercase sourced signal mode
+}
+
+export default function Mark({ label, color, size = 7, fontSize = 13, justify = 'start', eyebrow = false }: MarkProps) {
+  return (
+    <span style={{
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 7,
+      fontSize,
+      fontWeight: 500,
+      color,
+      justifyContent: justify === 'end' ? 'flex-end' : 'flex-start',
+      ...(eyebrow ? {
+        fontFamily: 'var(--mono)',
+        textTransform: 'uppercase' as const,
+        letterSpacing: '.03em',
+      } : {}),
+    }}>
+      <span style={{
+        width: size,
+        height: size,
+        borderRadius: '50%',
+        background: color,
+        flex: 'none',
+        display: 'inline-block',
+      }} />
+      {label}
+    </span>
+  );
+}

package/ui/components/publictrades/SourceBlock.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+
+interface SourceBlockProps {
+  label: string;
+  accession: string;
+  parserVersion: string;
+  href?: string;
+}
+
+const ExternalSvg = () => (
+  <svg
+    viewBox="0 0 24 24"
+    width={14}
+    height={14}
+    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>
+);
+
+export default function SourceBlock({ label, accession, parserVersion, href = '#' }: SourceBlockProps) {
+  return (
+    <>
+      <div style={{
+        marginTop: 18,
+        background: 'var(--surface)',
+        border: '.5px solid var(--hairline-2)',
+        borderRadius: 8,
+        padding: '18px 22px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 18,
+        flexWrap: 'wrap',
+      }}>
+        <div>
+          <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.07em', color: 'var(--tertiary)' }}>
+            {label}
+          </div>
+          <div style={{ fontSize: 15, marginTop: 5, fontFamily: 'var(--mono)', letterSpacing: '-.01em' }}>
+            {accession}
+          </div>
+          <div style={{ fontSize: 12, color: 'var(--tertiary)', marginTop: 4 }}>
+            {parserVersion}
+          </div>
+        </div>
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 7,
+            fontSize: 14,
+            fontWeight: 500,
+            padding: '9px 15px',
+            borderRadius: 4,
+            cursor: 'pointer',
+            border: '.5px solid transparent',
+            background: 'var(--accent)',
+            color: '#fff',
+            textDecoration: 'none',
+          }}
+        >
+          View original disclosure <ExternalSvg />
+        </a>
+      </div>
+      <div style={{
+        marginTop: 14,
+        fontSize: 13,
+        color: 'var(--secondary)',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+      }}>
+        <span style={{ color: '#1B7A4B', fontWeight: 600 }}>✓</span>
+        {' '}Verify it yourself. Every number on this page reconciles against the primary record.
+      </div>
+    </>
+  );
+}

package/ui/components/publictrades/Tape.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import Mark from './Mark';
+import { TapeRow } from './types';
+
+interface TapeProps {
+  rows: TapeRow[];
+  // column mode: 'entity' shows sym+name, 'asset' shows actor+sym, 'global' shows actor+sym
+  mode: 'entity' | 'asset' | 'global';
+  onRowClick?: (row: TapeRow) => void;
+  onActorClick?: (row: TapeRow, e: React.MouseEvent | React.KeyboardEvent) => void;
+  onAssetClick?: (row: TapeRow, e: React.MouseEvent | React.KeyboardEvent) => void;
+}
+
+const EXT_SVG = (
+  <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="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 GRID = '104px 1fr 96px 116px 20px';
+
+function TapeHeader({ actorCol }: { actorCol: string }) {
+  const cellStyle: React.CSSProperties = {
+    fontSize: 10,
+    fontWeight: 600,
+    textTransform: 'uppercase',
+    letterSpacing: '.07em',
+    color: 'var(--tertiary)',
+  };
+  return (
+    <div style={{
+      display: 'grid',
+      gridTemplateColumns: GRID,
+      alignItems: 'center',
+      gap: 16,
+      padding: '9px 18px',
+      borderBottom: '.5px solid var(--hairline-2)',
+      background: 'var(--paper)',
+    }}>
+      <span style={cellStyle}>Date</span>
+      <span style={cellStyle}>{actorCol}</span>
+      <span style={{ ...cellStyle, textAlign: 'right' }}>Action</span>
+      <span style={{ ...cellStyle, textAlign: 'right' }}>Amount</span>
+      <span />
+    </div>
+  );
+}
+
+export default function Tape({ rows, mode, onRowClick, onActorClick, onAssetClick }: TapeProps) {
+  const actorCol = mode === 'entity' ? 'Asset' : 'Actor';
+
+  return (
+    <div style={{
+      background: 'var(--surface)',
+      border: '.5px solid var(--hairline-2)',
+      borderRadius: 8,
+      overflow: 'hidden',
+    }}>
+      <TapeHeader actorCol={actorCol} />
+      {rows.map((row, i) => (
+        <div
+          key={i}
+          onClick={() => onRowClick?.(row)}
+          role={onRowClick ? 'button' : undefined}
+          tabIndex={onRowClick ? 0 : undefined}
+          onKeyDown={onRowClick ? (e) => { if (e.key === 'Enter' || e.key === ' ') onRowClick(row); } : undefined}
+          style={{
+            display: 'grid',
+            gridTemplateColumns: GRID,
+            alignItems: 'center',
+            gap: 16,
+            padding: '13px 18px',
+            borderBottom: i < rows.length - 1 ? '.5px solid var(--hairline)' : 'none',
+            fontSize: 13,
+            cursor: onRowClick ? 'pointer' : undefined,
+          }}
+          onMouseEnter={e => { (e.currentTarget as HTMLDivElement).style.background = 'var(--paper)'; }}
+          onMouseLeave={e => { (e.currentTarget as HTMLDivElement).style.background = ''; }}
+        >
+          {/* Date */}
+          <span style={{ fontFamily: 'var(--mono)', letterSpacing: '-.01em', color: 'var(--secondary)' }}>
+            {row.date}
+          </span>
+
+          {/* Actor / Asset cell */}
+          {mode === 'entity' ? (
+            // entity mode: ticker (mono/600) then company name (tertiary)
+            <span>
+              <span
+                onClick={e => onAssetClick?.(row, e)}
+                role={onAssetClick ? 'button' : undefined}
+                tabIndex={onAssetClick ? 0 : undefined}
+                onKeyDown={onAssetClick ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.stopPropagation(); onAssetClick(row, e); } } : undefined}
+                style={{ fontFamily: 'var(--mono)', fontWeight: 600, color: 'var(--ink)', cursor: onAssetClick ? 'pointer' : undefined }}
+              >
+                {row.sym}
+              </span>
+              {row.name && (
+                <span style={{ color: 'var(--tertiary)', marginLeft: 8 }}>{row.name}</span>
+              )}
+            </span>
+          ) : (
+            // asset / global mode: actor name then sym mono
+            <span>
+              <span
+                onClick={e => onActorClick?.(row, e)}
+                role={onActorClick ? 'button' : undefined}
+                tabIndex={onActorClick ? 0 : undefined}
+                onKeyDown={onActorClick ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.stopPropagation(); onActorClick(row, e); } } : undefined}
+                style={{ fontWeight: 600, color: 'var(--ink)', cursor: onActorClick ? 'pointer' : undefined }}
+              >
+                {row.actor}
+              </span>
+              <span
+                onClick={e => onAssetClick?.(row, e)}
+                role={onAssetClick ? 'button' : undefined}
+                tabIndex={onAssetClick ? 0 : undefined}
+                onKeyDown={onAssetClick ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.stopPropagation(); onAssetClick(row, e); } } : undefined}
+                style={{ color: 'var(--tertiary)', fontFamily: 'var(--mono)', letterSpacing: '-.01em', marginLeft: 8, cursor: onAssetClick ? 'pointer' : undefined }}
+              >
+                {row.sym}
+              </span>
+            </span>
+          )}
+
+          {/* Action — right-justified mark */}
+          <span style={{ textAlign: 'right' }}>
+            <Mark label={row.actLabel} color={row.actColor} justify="end" />
+          </span>
+
+          {/* Amount */}
+          <span style={{ textAlign: 'right', color: 'var(--secondary)', fontFamily: 'var(--mono)', letterSpacing: '-.01em' }}>
+            {row.amount}
+          </span>
+
+          {/* External link */}
+          <span style={{ textAlign: 'right', display: 'inline-flex', justifyContent: 'flex-end', color: 'var(--accent)' }}>
+            <a
+              href="#"
+              aria-label={`View filing for ${row.actor ? row.actor + ' · ' : ''}${row.sym}`}
+              style={{ display: 'inline-flex', color: 'var(--accent)' }}
+              onClick={e => e.stopPropagation()}
+            >
+              {EXT_SVG}
+            </a>
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}

package/ui/components/publictrades/ThreeStamps.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+interface StampData {
+  label: string;
+  date: string;
+  hint: string;
+  pit?: boolean; // "Became public" cell tint
+}
+
+interface ThreeStampsProps {
+  stamps: [StampData, StampData, StampData];
+}
+
+export default function ThreeStamps({ stamps }: ThreeStampsProps) {
+  return (
+    <div style={{
+      display: 'grid',
+      gridTemplateColumns: '1fr 1fr 1fr',
+      marginTop: 18,
+      border: '.5px solid var(--hairline-2)',
+      borderRadius: 8,
+      overflow: 'hidden',
+      background: 'var(--surface)',
+    }}>
+      {stamps.map((s, i) => (
+        <div
+          key={i}
+          style={{
+            padding: '14px 18px',
+            borderRight: i < 2 ? '.5px solid var(--hairline)' : 'none',
+            background: s.pit ? 'var(--paper)' : undefined,
+          }}
+        >
+          <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.07em', color: 'var(--tertiary)' }}>
+            {s.label}
+          </div>
+          <div style={{ fontSize: 18, marginTop: 5, letterSpacing: '-.01em', fontFamily: 'var(--mono)' }}>
+            {s.date}
+          </div>
+          <div style={{ fontSize: 11, color: s.pit ? 'var(--accent)' : 'var(--tertiary)', marginTop: 3 }}>
+            {s.hint}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/ui/components/publictrades/types.ts

@@ -0,0 +1,19 @@
+// PublicTrades-local semantic colors — NOT in shared themes.css
+export const C = {
+  buy:  '#1B7A4B',
+  sell: '#B23B3B',
+  cong: '#946A1B',
+  f4:   '#1E3A5F', // same as accent; kept local for clarity
+} as const;
+
+export type ActionVariant = 'buy' | 'sell' | 'congress' | 'form4';
+
+export interface TapeRow {
+  date: string;
+  actor?: string; // entity pages
+  sym: string;
+  name?: string;  // asset pages
+  actLabel: string;
+  actColor: string;
+  amount: string;
+}