dev-api-ui 0.1.7

package/ui/components/ParamsTable.tsx

@@ -0,0 +1,86 @@
+interface Param {
+  name: string;
+  type: string;
+  description: string;
+}
+
+interface ParamsTableProps {
+  params: Param[];
+}
+
+export default function ParamsTable({ params }: ParamsTableProps) {
+  return (
+    <div
+      style={{
+        background: 'var(--surface)',
+        border: '0.5px solid var(--hairline-2)',
+        borderRadius: 8,
+        overflow: 'hidden',
+        marginTop: 18,
+      }}
+    >
+      {/* Tinted header */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '180px 110px 1fr',
+          gap: 16,
+          padding: '9px 18px',
+          borderBottom: '0.5px solid var(--hairline-2)',
+          background: '#F4F4F1',
+        }}
+      >
+        {['Name', 'Type', 'Description'].map((h) => (
+          <span
+            key={h}
+            style={{
+              fontSize: 10,
+              fontWeight: 600,
+              textTransform: 'uppercase',
+              letterSpacing: '.07em',
+              color: 'var(--tertiary)',
+            }}
+          >
+            {h}
+          </span>
+        ))}
+      </div>
+
+      {/* Rows — horizontal hairlines only */}
+      {params.map((p, i) => (
+        <div
+          key={p.name}
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '180px 110px 1fr',
+            gap: 16,
+            padding: '12px 18px',
+            borderBottom: i < params.length - 1 ? '0.5px solid var(--hairline)' : undefined,
+            fontSize: 13,
+            alignItems: 'start',
+          }}
+        >
+          <span
+            style={{
+              fontFamily: 'var(--mono)',
+              color: 'var(--ink)',
+              wordBreak: 'break-all',
+            }}
+          >
+            {p.name}
+          </span>
+          <span
+            style={{
+              fontFamily: 'var(--mono)',
+              color: 'var(--tertiary)',
+              fontSize: 12,
+            }}
+          >
+            {p.type}
+          </span>
+          <span style={{ color: 'var(--secondary)', lineHeight: 1.5 }}>{p.description}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

package/ui/components/RangeBar.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { useState } from 'react';
+import type { RangeEntry } from '../data/series';
+
+interface RangeBarProps {
+  ranges: RangeEntry[];
+  defaultIndex?: number;
+}
+
+const UP_COLOR = '#1F8A5B';
+const DOWN_COLOR = '#C2453B';
+
+export default function RangeBar({ ranges, defaultIndex = 2 }: RangeBarProps) {
+  const [active, setActive] = useState(defaultIndex);
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(7, 1fr)',
+        gap: 8,
+        marginTop: 12,
+      }}
+    >
+      {ranges.map((r, i) => {
+        const isActive = i === active;
+        return (
+          <button
+            key={r.label}
+            onClick={() => setActive(i)}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 3,
+              padding: '10px 8px',
+              borderRadius: 6,
+              border: `0.5px solid ${isActive ? 'var(--ink)' : 'var(--hairline-2)'}`,
+              background: isActive ? 'var(--ink)' : 'var(--surface)',
+              cursor: 'pointer',
+              textAlign: 'center',
+            }}
+          >
+            <span
+              style={{
+                fontSize: 13,
+                fontWeight: 600,
+                color: isActive ? '#fff' : 'var(--secondary)',
+              }}
+            >
+              {r.label}
+            </span>
+            <span
+              style={{
+                fontSize: 12,
+                color: isActive ? '#A9AFB8' : r.up ? UP_COLOR : DOWN_COLOR,
+              }}
+            >
+              {r.delta}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/ui/components/SeriesChart.tsx

@@ -0,0 +1,218 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { createChart, AreaSeries, ColorType, LineStyle, CrosshairMode } from 'lightweight-charts';
+import type { UTCTimestamp } from 'lightweight-charts';
+
+interface SeriesChartProps {
+  points?: { time: string; value: number }[];
+  line: string;
+  axisStart: string;
+  axisMid: string;
+  axisEnd: string;
+}
+
+/** Convert a hex string like "#1F8A5B" or "#1AB" to "rgba(31,138,91,0.10)".
+ *  Falls back to the default accent rgba if the input is not a valid hex color. */
+function hexToRgba(hex: string, alpha: number): string {
+  let h = hex.replace('#', '');
+  if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
+    return `rgba(31,138,91,${alpha})`;
+  }
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+
+/** Parse the SVG `line` points string into lightweight-charts data.
+ *  Points are "x,y x,y …" where y is top-down (smaller y = higher value).
+ *  We invert: value = maxY - y, and assign sequential daily UTCTimestamps. */
+function parseLineData(line: string): { time: UTCTimestamp; value: number }[] {
+  if (!line.trim()) return [];
+  const pairs = line.trim().split(/\s+/);
+  const ys = pairs.map((p) => parseFloat(p.split(',')[1])).filter((y) => !Number.isNaN(y));
+  if (ys.length === 0) return [];
+  const maxY = Math.max(...ys);
+  const base = 1_600_000_000 as UTCTimestamp; // arbitrary epoch start
+  return ys.map((y, i) => ({
+    time: (base + i * 86400) as UTCTimestamp,
+    value: maxY - y,
+  }));
+}
+
+/** Convert 'YYYY-MM-DD' string points to lightweight-charts format. */
+function parsePointsData(
+  points: { time: string; value: number }[],
+): { time: string; value: number }[] {
+  return [...points].sort((a, b) => (a.time < b.time ? -1 : 1));
+}
+
+export default function SeriesChart({ points, line, axisStart, axisMid, axisEnd }: SeriesChartProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    const tooltip = tooltipRef.current;
+    if (!el) return;
+
+    // Resolve CSS tokens from the nearest themed ancestor
+    const style = getComputedStyle(el);
+    const accent = style.getPropertyValue('--accent').trim() || '#1F8A5B';
+    const hairline = style.getPropertyValue('--hairline').trim() || '#E6E6E2';
+    const textColor = style.getPropertyValue('--secondary').trim() || '#6B7280';
+
+    const chart = createChart(el, {
+      width: el.clientWidth,
+      height: 240,
+      layout: {
+        background: { type: ColorType.Solid, color: 'transparent' },
+        textColor,
+        fontSize: 11,
+        attributionLogo: false, // logo removed; attribution in footer per ADR E4
+      },
+      grid: {
+        vertLines: { visible: false },
+        horzLines: { color: hairline, style: LineStyle.Solid },
+      },
+      rightPriceScale: { borderVisible: false, ticksVisible: false, visible: false },
+      timeScale: { borderVisible: false, ticksVisible: false, visible: false },
+      crosshair: {
+        mode: CrosshairMode.Magnet,
+        vertLine: {
+          color: accent,
+          width: 1,
+          style: LineStyle.Dashed,
+          labelVisible: false,
+        },
+        horzLine: { visible: false, labelVisible: false },
+      },
+      handleScroll: false,
+      handleScale: false,
+    });
+
+    const series = chart.addSeries(AreaSeries, {
+      lineColor: accent,
+      lineWidth: 2,
+      topColor: hexToRgba(accent, 0.10),
+      bottomColor: hexToRgba(accent, 0),
+      priceLineVisible: false,
+      lastValueVisible: false,
+      crosshairMarkerVisible: true,
+      crosshairMarkerRadius: 4,
+      crosshairMarkerBorderColor: accent,
+      crosshairMarkerBackgroundColor: accent,
+    });
+
+    // Prefer real `points` data; fall back to SVG-derived data
+    const hasPoints = points && points.length > 0;
+    if (hasPoints) {
+      series.setData(parsePointsData(points));
+    } else if (line.trim()) {
+      series.setData(parseLineData(line));
+    }
+
+    chart.timeScale().fitContent();
+
+    // Hover tooltip
+    chart.subscribeCrosshairMove((param) => {
+      if (!tooltip) return;
+
+      if (!param.time || !param.point || param.point.x < 0 || param.point.y < 0) {
+        tooltip.style.display = 'none';
+        return;
+      }
+
+      const d = param.seriesData.get(series) as { value?: number } | undefined;
+      if (!d || d.value === undefined) {
+        tooltip.style.display = 'none';
+        return;
+      }
+
+      // Format time: UTCTimestamp (number) or YYYY-MM-DD string
+      let dateStr = '';
+      if (typeof param.time === 'string') {
+        dateStr = param.time; // already YYYY-MM-DD
+      } else {
+        const date = new Date((param.time as number) * 1000);
+        dateStr = date.toISOString().slice(0, 10);
+      }
+
+      tooltip.innerHTML =
+        `<div style="font-size:11px;color:var(--tertiary)">${dateStr}</div>` +
+        `<div style="font-size:13px;font-weight:600;color:var(--ink);margin-top:2px">${d.value.toLocaleString(undefined, { maximumFractionDigits: 5 })}</div>`;
+
+      // Position tooltip near cursor, clamped inside container
+      const elRect = el.getBoundingClientRect();
+      const tooltipWidth = 112;
+      const tooltipHeight = 46;
+      let left = param.point.x + 12;
+      let top = param.point.y - tooltipHeight / 2;
+
+      if (left + tooltipWidth > elRect.width) left = param.point.x - tooltipWidth - 12;
+      if (top < 0) top = 0;
+      if (top + tooltipHeight > elRect.height) top = elRect.height - tooltipHeight;
+
+      tooltip.style.left = `${left}px`;
+      tooltip.style.top = `${top}px`;
+      tooltip.style.display = 'block';
+    });
+
+    const ro = new ResizeObserver(() => {
+      chart.applyOptions({ width: el.clientWidth });
+    });
+    ro.observe(el);
+
+    return () => {
+      ro.disconnect();
+      chart.remove();
+      if (tooltip) tooltip.style.display = 'none';
+    };
+  }, [points, line]);
+
+  return (
+    <div
+      style={{
+        background: 'var(--surface)',
+        border: '0.5px solid var(--hairline-2)',
+        borderRadius: 8,
+        padding: '18px 18px 10px',
+      }}
+    >
+      <div style={{ position: 'relative' }}>
+        <div ref={containerRef} />
+        {/* Floating hover tooltip */}
+        <div
+          ref={tooltipRef}
+          style={{
+            display: 'none',
+            position: 'absolute',
+            pointerEvents: 'none',
+            background: 'var(--surface)',
+            border: '0.5px solid var(--hairline-2)',
+            borderRadius: 4,
+            padding: '6px 10px',
+            boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+            whiteSpace: 'nowrap',
+            zIndex: 10,
+          }}
+        />
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          fontSize: 11,
+          color: 'var(--tertiary)',
+          padding: '8px 2px 2px',
+        }}
+      >
+        <span>{axisStart}</span>
+        <span>{axisMid}</span>
+        <span>{axisEnd}</span>
+      </div>
+    </div>
+  );
+}