spb/ai-atlas

1/**2 * The AI Atlas mark — an "atlas plate": a rounded-square plate carrying a fine coordinate grid, over which three nodes and3 * two edges draw the letter A as a graph. The horizontal baseline is a timeline; the accent node at its right end marks "now".4 * One geometry (32 × 32 viewBox) for every size: 16 px favicon (simplified grid), 32 px tab, 180 px Apple icon, 512 px PWA,5 * the in-page logo (CSS-variable colours) and the OG images (hex colours — ImageResponse cannot read CSS variables).6 */7export type MarkColors = { plate: string; ink: string; grid: string; accent: string };89/** Dark plate (favicon / PWA / OG). */10export const MARK_DARK: MarkColors = { plate: '#0b0d11', ink: '#e9ebf0', grid: 'rgba(233,235,240,0.22)', accent: '#6d95ff' };11/** Light plate (lockup on light backgrounds). */12export const MARK_LIGHT: MarkColors = { plate: '#e9ebf0', ink: '#0b0d11', grid: 'rgba(11,13,17,0.2)', accent: '#1f4fd8' };13/** In-page: follows the theme through the `--brand-*` tokens (globals.css). */14export const MARK_TOKENS: MarkColors = { plate: 'var(--brand-plate)', ink: 'var(--brand-ink)', grid: 'var(--brand-grid)', accent: 'var(--brand-accent)' };1516export const MARK_GEOMETRY = {17  apex: { x: 16, y: 8 },18  left: { x: 8.5, y: 24 },19  now: { x: 23.5, y: 24 },20  baseline: { x1: 5, x2: 27, y: 24 },21  gridH: [10.5, 17],22  gridV: [10.5, 21.5],23};2425type MarkOpts = { simplified?: boolean; plate?: boolean; radius?: number };2627/**28 * Inner artwork (no <svg> wrapper) so callers control size/attributes. `simplified` keeps two grid lines only — crisp at 16 px.29 * `plate=false` draws the graph alone (monochrome contexts).30 */31export function MarkArt({ colors, simplified = false, plate = true, radius = 7 }: { colors: MarkColors } & MarkOpts) {32  const g = MARK_GEOMETRY;33  const strokeW = simplified ? 2 : 1.7;34  const nodeR = simplified ? 2.4 : 2.1;35  const gridW = simplified ? 1 : 0.8;36  return (37    <>38      {plate && <rect x="1" y="1" width="30" height="30" rx={radius} fill={colors.plate} />}39      {g.gridH.map((y) => (40        <line key={`h${y}`} x1="4" x2="28" y1={y} y2={y} stroke={colors.grid} strokeWidth={gridW} />41      ))}42      {!simplified && g.gridV.map((x) => <line key={`v${x}`} x1={x} x2={x} y1="4" y2="28" stroke={colors.grid} strokeWidth={gridW} />)}43      <line x1={g.baseline.x1} x2={g.baseline.x2} y1={g.baseline.y} y2={g.baseline.y} stroke={colors.ink} strokeWidth={simplified ? 1.4 : 1.2} opacity={0.75} strokeLinecap="round" />44      <path d={`M${g.left.x} ${g.left.y}L${g.apex.x} ${g.apex.y}L${g.now.x} ${g.now.y}`} fill="none" stroke={colors.ink} strokeWidth={strokeW} strokeLinecap="round" strokeLinejoin="round" />45      <circle cx={g.apex.x} cy={g.apex.y} r={nodeR} fill={colors.ink} />46      <circle cx={g.left.x} cy={g.left.y} r={nodeR} fill={colors.ink} />47      <circle cx={g.now.x} cy={g.now.y} r={nodeR + 0.4} fill={colors.accent} />48    </>49  );50}5152/** The same artwork as a standalone SVG string (static assets, data URIs for ImageResponse). */53export function markSvgString(colors: MarkColors, { simplified = false, plate = true, radius = 7 }: MarkOpts = {}): string {54  const g = MARK_GEOMETRY;55  const strokeW = simplified ? 2 : 1.7;56  const nodeR = simplified ? 2.4 : 2.1;57  const gridW = simplified ? 1 : 0.8;58  const parts: string[] = [`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">`];59  if (plate) parts.push(`<rect x="1" y="1" width="30" height="30" rx="${radius}" fill="${colors.plate}"/>`);60  for (const y of g.gridH) parts.push(`<line x1="4" x2="28" y1="${y}" y2="${y}" stroke="${colors.grid}" stroke-width="${gridW}"/>`);61  if (!simplified) for (const x of g.gridV) parts.push(`<line x1="${x}" x2="${x}" y1="4" y2="28" stroke="${colors.grid}" stroke-width="${gridW}"/>`);62  parts.push(`<line x1="${g.baseline.x1}" x2="${g.baseline.x2}" y1="${g.baseline.y}" y2="${g.baseline.y}" stroke="${colors.ink}" stroke-width="${simplified ? 1.4 : 1.2}" opacity="0.75" stroke-linecap="round"/>`);63  parts.push(`<path d="M${g.left.x} ${g.left.y}L${g.apex.x} ${g.apex.y}L${g.now.x} ${g.now.y}" fill="none" stroke="${colors.ink}" stroke-width="${strokeW}" stroke-linecap="round" stroke-linejoin="round"/>`);64  parts.push(`<circle cx="${g.apex.x}" cy="${g.apex.y}" r="${nodeR}" fill="${colors.ink}"/>`);65  parts.push(`<circle cx="${g.left.x}" cy="${g.left.y}" r="${nodeR}" fill="${colors.ink}"/>`);66  parts.push(`<circle cx="${g.now.x}" cy="${g.now.y}" r="${nodeR + 0.4}" fill="${colors.accent}"/>`);67  parts.push('</svg>');68  return parts.join('');69}7071export function markDataUri(colors: MarkColors, opts?: MarkOpts): string {72  return `data:image/svg+xml;utf8,${encodeURIComponent(markSvgString(colors, opts))}`;73}7475/**76 * The mark for ImageResponse routes (OG images, PWA/Apple icons): a data-URI <img>, which satori rasterises reliably77 * (nested SVG element trees are not). Fixed hex colours only.78 */79export function MarkImg({ px, colors = MARK_DARK, simplified = false, plate = true, radius }: { px: number; colors?: MarkColors } & MarkOpts) {80  // eslint-disable-next-line @next/next/no-img-element81  return <img width={px} height={px} src={markDataUri(colors, { simplified, plate, radius })} alt="" style={{ width: px, height: px }} />;82}83