spb/cancerindex

1/** Render a JSON object as a readable nested definition list (used for ranking inputs, cursors, drift). */2export function JsonView({ data, depth = 0 }: { data: unknown; depth?: number }) {3  if (data == null) return <span className="text-ink-4">null</span>;4  if (typeof data !== 'object') {5    return <span className={typeof data === 'number' ? 'ci-num ci-mono' : 'ci-mono'}>{String(data)}</span>;6  }7  if (Array.isArray(data)) {8    if (data.length === 0) return <span className="text-ink-4">[]</span>;9    return (10      <ol className="ml-3 list-decimal space-y-0.5 pl-3 text-[12.5px]">11        {data.map((v, i) => (12          <li key={i}>13            <JsonView data={v} depth={depth + 1} />14          </li>15        ))}16      </ol>17    );18  }19  const entries = Object.entries(data as Record<string, unknown>);20  if (entries.length === 0) return <span className="text-ink-4">{'{}'}</span>;21  return (22    <dl className={`grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-[12.5px] ${depth > 0 ? 'ml-2 border-l border-rule pl-2' : ''}`}>23      {entries.map(([k, v]) => (24        <div key={k} className="contents">25          <dt className="ci-mono text-ink-3">{k}</dt>26          <dd className="min-w-0 break-words">27            <JsonView data={v} depth={depth + 1} />28          </dd>29        </div>30      ))}31    </dl>32  );33}34