designlang 6.0.0 → 7.1.0

package/website/app/api/extract/route.js

@@ -1,18 +1,50 @@
+// POST /api/extract
+// Streaming NDJSON: one JSON event per line.
+// Events:
+//   { type:'cache', cached:true }               — if served from Blob
+//   { type:'stage', name:'crawl'|... }           — progress markers
+//   { type:'token', category, path, value, $type } — one per semantic token
+//   { type:'summary', summary }
+//   { type:'files', files }                      — final, full file map
+//   { type:'error', error }                      — terminal failure
+
 import { extractDesignLanguage } from '../../../../src/index.js';
 import { formatMarkdown } from '../../../../src/formatters/markdown.js';
-import { formatTokens } from '../../../../src/formatters/tokens.js';
 import { formatTailwind } from '../../../../src/formatters/tailwind.js';
 import { formatCssVars } from '../../../../src/formatters/css-vars.js';
 import { formatPreview } from '../../../../src/formatters/preview.js';
 import { formatFigma } from '../../../../src/formatters/figma.js';
 import { formatReactTheme, formatShadcnTheme } from '../../../../src/formatters/theme.js';
+import { formatWordPress, formatWordPressTheme } from '../../../../src/formatters/wordpress.js';
+import { formatDtcgTokens } from '../../../../src/formatters/dtcg-tokens.js';
+import { formatIosSwiftUI } from '../../../../src/formatters/ios-swiftui.js';
+import { formatAndroidCompose } from '../../../../src/formatters/android-compose.js';
+import { formatFlutterDart } from '../../../../src/formatters/flutter-dart.js';
+import { formatAgentRules } from '../../../../src/formatters/agent-rules.js';
 import { nameFromUrl } from '../../../../src/utils.js';
 
-export const maxDuration = 60;
+import { validateTargetUrl } from '../../../../website/lib/url-safety.js';
+import { checkRate } from '../../../../website/lib/rate-limit.js';
+import { cacheKey, getCached, putCached } from '../../../../website/lib/cache.js';
+
+export const runtime = 'nodejs';
 export const dynamic = 'force-dynamic';
+export const maxDuration = 60;
+
+const STAGES = [
+  'crawl',
+  'colors',
+  'typography',
+  'spacing',
+  'shadows',
+  'borders',
+  'components',
+  'regions',
+  'a11y',
+  'score',
+];
 
 async function getBrowserOptions() {
-  // On Vercel/Lambda, use @sparticuz/chromium; locally, use playwright's bundled browser
   if (process.env.VERCEL || process.env.AWS_LAMBDA_FUNCTION_NAME) {
     const chromium = (await import('@sparticuz/chromium')).default;
     return {
@@ -23,63 +55,191 @@ async function getBrowserOptions() {
   return {};
 }
 
+function ndjson(obj) {
+  return new TextEncoder().encode(JSON.stringify(obj) + '\n');
+}
+
+// Walk a DTCG token tree and yield every leaf ({ $value, $type }).
+function* walkDtcgTokens(tree, path = []) {
+  if (!tree || typeof tree !== 'object') return;
+  if (tree.$value !== undefined && tree.$type !== undefined) {
+    yield { path: path.join('.'), value: tree.$value, $type: tree.$type };
+    return;
+  }
+  for (const key of Object.keys(tree)) {
+    if (key.startsWith('$')) continue;
+    yield* walkDtcgTokens(tree[key], [...path, key]);
+  }
+}
+
+function buildSummary(design) {
+  return {
+    url: design.meta?.url,
+    title: design.meta?.title,
+    colors: design.colors?.all?.length ?? 0,
+    colorList: (design.colors?.all || []).slice(0, 20).map((c) => c.hex),
+    fonts: design.typography?.families?.map((f) => f.name).join(', ') || 'none detected',
+    spacingCount: design.spacing?.scale?.length ?? 0,
+    spacingBase: design.spacing?.base ?? null,
+    shadowCount: design.shadows?.values?.length ?? 0,
+    radiiCount: design.borders?.radii?.length ?? 0,
+    componentCount: Object.keys(design.components || {}).length,
+    cssVarCount: Object.values(design.variables || {}).reduce((s, v) => s + Object.keys(v).length, 0),
+    a11yScore: design.accessibility?.score ?? null,
+    a11yFailCount: design.accessibility?.failCount ?? 0,
+    score: design.score,
+  };
+}
+
+function buildFiles(design, targetUrl) {
+  const prefix = nameFromUrl(targetUrl);
+  const dtcg = formatDtcgTokens(design);
+  const dtcgJson = JSON.stringify(dtcg, null, 2);
+
+  const files = {
+    [`${prefix}-design-language.md`]: formatMarkdown(design),
+    [`${prefix}-design-tokens.json`]: dtcgJson,
+    [`${prefix}-tailwind.config.js`]: formatTailwind(design),
+    [`${prefix}-variables.css`]: formatCssVars(design),
+    [`${prefix}-preview.html`]: formatPreview(design),
+    [`${prefix}-figma-variables.json`]: formatFigma(design),
+    [`${prefix}-theme.js`]: formatReactTheme(design),
+    [`${prefix}-shadcn-theme.css`]: formatShadcnTheme(design),
+    [`${prefix}-wordpress-theme.json`]: formatWordPress(design),
+  };
+
+  // MCP companion JSON — same subset the CLI writes.
+  files[`${prefix}-mcp.json`] = JSON.stringify({
+    colors: { all: design.colors?.all || [] },
+    regions: design.regions || [],
+    componentClusters: design.componentClusters || [],
+    accessibility: { remediation: design.accessibility?.remediation || [] },
+    cssHealth: design.cssHealth || null,
+  }, null, 2);
+
+  // iOS
+  files['ios/DesignTokens.swift'] = formatIosSwiftUI(dtcg);
+
+  // Android (returns { filename: content })
+  const android = formatAndroidCompose(dtcg);
+  for (const name of Object.keys(android)) {
+    files[`android/${name}`] = android[name];
+  }
+
+  // Flutter
+  files['flutter/design_tokens.dart'] = formatFlutterDart(dtcg);
+
+  // WordPress block theme (5 files)
+  const wpTheme = formatWordPressTheme(dtcg, design);
+  for (const name of Object.keys(wpTheme)) {
+    files[`wordpress-theme/${name}`] = wpTheme[name];
+  }
+
+  // Agent rules
+  const agentFiles = formatAgentRules({ design, tokens: dtcg, url: targetUrl });
+  for (const name of Object.keys(agentFiles)) {
+    files[name] = agentFiles[name];
+  }
+
+  return { files, dtcg };
+}
+
+function extractIp(request) {
+  const xff = request.headers.get('x-forwarded-for');
+  if (xff) return xff.split(',')[0].trim();
+  const real = request.headers.get('x-real-ip');
+  if (real) return real.trim();
+  return 'unknown';
+}
+
+// Emit cached payload as a simulated stream so the hero paints consistently.
+async function streamCached(controller, cached, targetUrl) {
+  controller.enqueue(ndjson({ type: 'cache', cached: true }));
+  for (const stage of STAGES) {
+    controller.enqueue(ndjson({ type: 'stage', name: stage }));
+    await new Promise((r) => setTimeout(r, 40));
+  }
+  // Re-derive DTCG tokens from the cached design so the token-by-token paint
+  // still happens on a cache hit.
+  const { files, dtcg } = buildFiles(cached.design, targetUrl);
+  for (const { path, value, $type } of walkDtcgTokens(dtcg)) {
+    const category = path.split('.')[1] || 'misc';
+    controller.enqueue(ndjson({ type: 'token', category, path, value, $type }));
+  }
+  controller.enqueue(ndjson({ type: 'summary', summary: buildSummary(cached.design) }));
+  controller.enqueue(ndjson({ type: 'files', files }));
+}
+
 export async function POST(request) {
-  try {
-    const { url } = await request.json();
-
-    if (!url) {
-      return Response.json({ error: 'URL is required' }, { status: 400 });
-    }
-
-    let targetUrl = url;
-    if (!targetUrl.startsWith('http')) targetUrl = `https://${targetUrl}`;
-
-    // Validate URL
-    try {
-      new URL(targetUrl);
-    } catch {
-      return Response.json({ error: 'Invalid URL' }, { status: 400 });
-    }
-
-    const browserOpts = await getBrowserOptions();
-    const design = await extractDesignLanguage(targetUrl, browserOpts);
-
-    const prefix = nameFromUrl(targetUrl);
-
-    const files = {
-      [`${prefix}-design-language.md`]: formatMarkdown(design),
-      [`${prefix}-design-tokens.json`]: formatTokens(design),
-      [`${prefix}-tailwind.config.js`]: formatTailwind(design),
-      [`${prefix}-variables.css`]: formatCssVars(design),
-      [`${prefix}-preview.html`]: formatPreview(design),
-      [`${prefix}-figma-variables.json`]: formatFigma(design),
-      [`${prefix}-theme.js`]: formatReactTheme(design),
-      [`${prefix}-shadcn-theme.css`]: formatShadcnTheme(design),
-    };
+  let body;
+  try { body = await request.json(); } catch {
+    return Response.json({ error: 'Invalid JSON body' }, { status: 400 });
+  }
 
-    const summary = {
-      url: design.meta.url,
-      title: design.meta.title,
-      colors: design.colors.all.length,
-      colorList: design.colors.all.slice(0, 20).map(c => c.hex),
-      fonts: design.typography.families.map(f => f.name).join(', ') || 'none detected',
-      spacingCount: design.spacing.scale.length,
-      spacingBase: design.spacing.base,
-      shadowCount: design.shadows.values.length,
-      radiiCount: design.borders.radii.length,
-      componentCount: Object.keys(design.components).length,
-      cssVarCount: Object.values(design.variables).reduce((s, v) => s + Object.keys(v).length, 0),
-      a11yScore: design.accessibility?.score ?? null,
-      a11yFailCount: design.accessibility?.failCount ?? 0,
-      score: design.score,
-    };
+  const validation = validateTargetUrl(body?.url);
+  if (!validation.ok) {
+    return Response.json({ error: validation.reason }, { status: validation.status });
+  }
+  const targetUrl = validation.url;
 
-    return Response.json({ summary, files });
-  } catch (err) {
-    console.error('Extraction failed:', err);
+  const ip = extractIp(request);
+  const rate = checkRate(`extract:${ip}`);
+  if (!rate.allowed) {
     return Response.json(
-      { error: err.message || 'Extraction failed' },
-      { status: 500 }
+      { error: 'Rate limit — 3 extractions per day. Try again later.', resetAt: rate.resetAt },
+      { status: 429 }
     );
   }
+
+  const stream = new ReadableStream({
+    async start(controller) {
+      try {
+        const key = cacheKey(targetUrl);
+        const cached = await getCached(key);
+        if (cached) {
+          await streamCached(controller, cached, targetUrl);
+          controller.close();
+          return;
+        }
+
+        // Pre-stage markers — best-effort progress since extraction is atomic.
+        controller.enqueue(ndjson({ type: 'stage', name: 'crawl' }));
+
+        const browserOpts = await getBrowserOptions();
+        const design = await extractDesignLanguage(targetUrl, browserOpts);
+
+        // Post-stage markers once extraction resolves.
+        for (const stage of STAGES.slice(1)) {
+          controller.enqueue(ndjson({ type: 'stage', name: stage }));
+        }
+
+        const { files, dtcg } = buildFiles(design, targetUrl);
+
+        // Token-by-token paint — every DTCG leaf becomes its own event.
+        for (const { path, value, $type } of walkDtcgTokens(dtcg)) {
+          const category = path.split('.')[1] || 'misc';
+          controller.enqueue(ndjson({ type: 'token', category, path, value, $type }));
+        }
+
+        controller.enqueue(ndjson({ type: 'summary', summary: buildSummary(design) }));
+        controller.enqueue(ndjson({ type: 'files', files }));
+
+        // Fire-and-forget cache write.
+        putCached(key, { design }).catch(() => {});
+      } catch (err) {
+        console.error('[extract] failed', { url: targetUrl, ip, message: err?.message });
+        controller.enqueue(ndjson({ type: 'error', error: err?.message || 'Extraction failed' }));
+      } finally {
+        controller.close();
+      }
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      'content-type': 'application/x-ndjson; charset=utf-8',
+      'cache-control': 'no-store',
+      'x-accel-buffering': 'no',
+    },
+  });
 }

package/website/app/components/A11ySlider.js

@@ -0,0 +1,369 @@
+'use client';
+
+// §05 A11y remediation — interactive contrast slider.
+// WCAG relative-luminance formula copied here (~12 lines) so this stays
+// client-side and doesn't import from the CLI package.
+
+import { useMemo, useState } from 'react';
+import Rule from './Rule';
+import Marginalia from './Marginalia';
+
+// ── WCAG helpers ────────────────────────────────────────────────
+function toRgb(hex) {
+  const h = String(hex || '').replace('#', '');
+  const n = h.length === 3 ? h.split('').map((x) => x + x).join('') : h;
+  const i = parseInt(n, 16);
+  return [(i >> 16) & 255, (i >> 8) & 255, i & 255];
+}
+function relLum([r, g, b]) {
+  const f = (c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
+}
+function contrast(a, b) {
+  const la = relLum(toRgb(a));
+  const lb = relLum(toRgb(b));
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}
+function lerpHex(a, b, t) {
+  const [ar, ag, ab] = toRgb(a);
+  const [br, bg, bb] = toRgb(b);
+  const r = Math.round(ar + (br - ar) * t);
+  const g = Math.round(ag + (bg - ag) * t);
+  const bl = Math.round(ab + (bb - ab) * t);
+  return (
+    '#' +
+    [r, g, bl].map((x) => x.toString(16).padStart(2, '0')).join('').toUpperCase()
+  );
+}
+
+// ── Demo data (shaped like remediateFailingPairs output) ────────
+const BG = '#F3F1EA';
+const FAIL_FG = '#B8B199';
+const PASS_FG = '#403C34';
+
+const REMEDIATIONS = [
+  {
+    fg: '#B8B199',
+    bg: '#F3F1EA',
+    ratio: 2.11,
+    rule: 'AA-normal',
+    suggestion: { replace: 'fg', color: '#403C34', newRatio: 7.84 },
+  },
+  {
+    fg: '#8B8778',
+    bg: '#F3F1EA',
+    ratio: 3.28,
+    rule: 'AA-normal',
+    suggestion: { replace: 'fg', color: '#0A0908', newRatio: 15.92 },
+  },
+  {
+    fg: '#FF4800',
+    bg: '#ECE8DD',
+    ratio: 3.51,
+    rule: 'AAA-normal',
+    suggestion: { replace: 'fg', color: '#0A0908', newRatio: 15.31 },
+  },
+];
+
+function tagFor(ratio) {
+  if (ratio >= 7) return { label: 'AAA', color: 'var(--ink)', underline: true };
+  if (ratio >= 4.5) return { label: 'AA', color: 'var(--accent)', underline: false };
+  if (ratio >= 3) return { label: 'AA large', color: 'var(--accent)', underline: false };
+  return { label: 'FAIL', color: 'var(--ink)', underline: false };
+}
+
+export default function A11ySlider() {
+  const [t, setT] = useState(0);
+  const fg = useMemo(() => lerpHex(FAIL_FG, PASS_FG, t / 100), [t]);
+  const ratio = useMemo(() => contrast(fg, BG), [fg]);
+  const tag = tagFor(ratio);
+
+  return (
+    <>
+      <Rule number="05" label="A11y remediation" />
+      <div className="with-margin" style={{ marginTop: 'var(--r5)' }}>
+        <div>
+          <div className="eyebrow" style={{ marginBottom: 'var(--r3)' }}>§05 A11y remediation</div>
+          <h2 className="display" style={{ marginBottom: 'var(--r4)' }}>
+            From score to fix.
+          </h2>
+          <p className="prose" style={{ fontSize: 18, maxWidth: '62ch', color: 'var(--ink-2)' }}>
+            Most tools hand you a failing contrast ratio. designlang hands you the next color in
+            your own palette that passes AA. Drag to see the difference.
+          </p>
+
+          <div
+            className="grid-12"
+            style={{ marginTop: 'var(--r7)', alignItems: 'start' }}
+          >
+            {/* LEFT — slider tiles (span 6) */}
+            <div style={{ gridColumn: 'span 6' }}>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--r4)' }}>
+                {/* Failing tile (static reference) */}
+                <Tile
+                  bg={BG}
+                  fg={FAIL_FG}
+                  ratio={contrast(FAIL_FG, BG)}
+                  label="failing pair"
+                  staticTag={{ label: 'FAIL', color: 'var(--ink)', underline: false }}
+                />
+                {/* Live tile driven by slider */}
+                <Tile
+                  bg={BG}
+                  fg={fg}
+                  ratio={ratio}
+                  label="remediated"
+                  staticTag={tag}
+                />
+              </div>
+
+              <div style={{ marginTop: 'var(--r5)' }}>
+                <label
+                  htmlFor="a11y-range"
+                  className="mono"
+                  style={{
+                    fontSize: 11,
+                    letterSpacing: '0.14em',
+                    textTransform: 'uppercase',
+                    color: 'var(--ink-2)',
+                    display: 'block',
+                    marginBottom: 8,
+                  }}
+                >
+                  drag: failing → remediated
+                </label>
+                <input
+                  id="a11y-range"
+                  type="range"
+                  min="0"
+                  max="100"
+                  value={t}
+                  onChange={(e) => setT(Number(e.target.value))}
+                  aria-valuetext={`contrast ratio ${ratio.toFixed(2)} to 1`}
+                  className="a11y-range"
+                  style={{ width: '100%' }}
+                />
+                <div
+                  className="mono"
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    marginTop: 6,
+                    fontSize: 11,
+                    color: 'var(--ink-3)',
+                  }}
+                >
+                  <span>{FAIL_FG}</span>
+                  <span style={{ fontVariantNumeric: 'tabular-nums' }}>{fg}</span>
+                  <span>{PASS_FG}</span>
+                </div>
+              </div>
+            </div>
+
+            {/* RIGHT — remediation list (span 6) */}
+            <div style={{ gridColumn: 'span 6' }}>
+              <div
+                className="mono"
+                style={{
+                  fontSize: 11,
+                  letterSpacing: '0.14em',
+                  textTransform: 'uppercase',
+                  color: 'var(--ink-2)',
+                  marginBottom: 'var(--r3)',
+                }}
+              >
+                remediateFailingPairs() output
+              </div>
+              <div
+                role="table"
+                style={{
+                  border: '1px solid var(--ink)',
+                  fontFamily: 'var(--font-mono)',
+                  fontSize: 12,
+                }}
+              >
+                <div
+                  role="row"
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: '1.3fr 0.3fr 1.3fr 0.9fr 0.7fr',
+                    padding: '8px 12px',
+                    borderBottom: '1px solid var(--ink)',
+                    color: 'var(--ink-3)',
+                    letterSpacing: '0.08em',
+                    textTransform: 'uppercase',
+                    fontSize: 10,
+                  }}
+                >
+                  <span>original</span>
+                  <span />
+                  <span>suggested</span>
+                  <span>ratio</span>
+                  <span>rule</span>
+                </div>
+                {REMEDIATIONS.map((r, i) => (
+                  <div
+                    key={i}
+                    role="row"
+                    style={{
+                      display: 'grid',
+                      gridTemplateColumns: '1.3fr 0.3fr 1.3fr 0.9fr 0.7fr',
+                      padding: '10px 12px',
+                      borderTop: i === 0 ? 0 : '1px solid var(--ink-3)',
+                      alignItems: 'center',
+                    }}
+                  >
+                    <span>
+                      <Swatch color={r.fg} /> {r.fg}{' '}
+                      <span style={{ color: 'var(--ink-3)' }}>on</span>{' '}
+                      <Swatch color={r.bg} />
+                    </span>
+                    <span style={{ color: 'var(--ink-3)', textAlign: 'center' }}>→</span>
+                    <span>
+                      <Swatch color={r.suggestion.color} /> {r.suggestion.color}
+                    </span>
+                    <span style={{ fontVariantNumeric: 'tabular-nums' }}>
+                      <span style={{ color: 'var(--ink-3)' }}>{r.ratio.toFixed(2)}</span>
+                      <span style={{ color: 'var(--ink-3)' }}> → </span>
+                      <span style={{ color: 'var(--accent)' }}>
+                        {r.suggestion.newRatio.toFixed(2)}
+                      </span>
+                    </span>
+                    <span style={{ color: 'var(--ink-2)' }}>{r.rule}</span>
+                  </div>
+                ))}
+              </div>
+              <p
+                className="mono"
+                style={{
+                  marginTop: 'var(--r3)',
+                  fontSize: 11,
+                  color: 'var(--ink-3)',
+                  maxWidth: '52ch',
+                }}
+              >
+                designlang only suggests colors that already exist in the extracted palette. No
+                invented tokens.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <Marginalia>
+          <div>WCAG thresholds</div>
+          <div style={{ marginTop: 6 }}>
+            <div><code>AA normal 4.5:1</code></div>
+            <div><code>AA large 3:1</code></div>
+            <div><code>AAA normal 7:1</code></div>
+            <div><code>AAA large 4.5:1</code></div>
+          </div>
+          <hr style={{ margin: '12px 0', border: 0, borderTop: '1px solid var(--ink-3)' }} />
+          <p className="foot">
+            Run <code>designlang &lt;url&gt;</code> and every failing pair ships with a drop-in fix.
+          </p>
+        </Marginalia>
+      </div>
+
+      <style jsx>{`
+        .a11y-range {
+          -webkit-appearance: none;
+          appearance: none;
+          height: 2px;
+          background: var(--ink);
+          outline: 0;
+          cursor: pointer;
+        }
+        .a11y-range::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          appearance: none;
+          width: 18px;
+          height: 18px;
+          background: var(--paper);
+          border: 2px solid var(--ink);
+          border-radius: 0;
+          cursor: grab;
+        }
+        .a11y-range::-moz-range-thumb {
+          width: 18px;
+          height: 18px;
+          background: var(--paper);
+          border: 2px solid var(--ink);
+          border-radius: 0;
+          cursor: grab;
+        }
+        .a11y-range:focus-visible {
+          outline: 2px solid var(--accent);
+          outline-offset: 3px;
+        }
+      `}</style>
+    </>
+  );
+}
+
+function Swatch({ color }) {
+  return (
+    <span
+      aria-hidden="true"
+      style={{
+        display: 'inline-block',
+        width: 10,
+        height: 10,
+        background: color,
+        border: '1px solid var(--ink)',
+        verticalAlign: 'middle',
+        marginRight: 4,
+      }}
+    />
+  );
+}
+
+function Tile({ bg, fg, ratio, label, staticTag }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--r3)' }}>
+      <div
+        style={{
+          width: '100%',
+          aspectRatio: '1 / 1',
+          maxWidth: 220,
+          maxHeight: 220,
+          background: bg,
+          border: '1px solid var(--ink)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <span
+          className="display"
+          style={{ color: fg, fontSize: 'clamp(36px, 4vw, 64px)', letterSpacing: '-0.03em' }}
+        >
+          Aa
+        </span>
+      </div>
+      <div className="mono" style={{ fontSize: 11, display: 'flex', flexDirection: 'column', gap: 2 }}>
+        <span style={{ color: 'var(--ink-3)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
+          {label}
+        </span>
+        <span style={{ fontVariantNumeric: 'tabular-nums' }}>
+          {fg.toUpperCase()} <span style={{ color: 'var(--ink-3)' }}>on</span> {bg.toUpperCase()}
+        </span>
+        <span
+          style={{
+            color: staticTag.color,
+            fontVariantNumeric: 'tabular-nums',
+            letterSpacing: '0.06em',
+            textTransform: 'uppercase',
+            textDecoration: staticTag.underline ? 'underline' : 'none',
+            textDecorationColor: 'var(--accent)',
+            textUnderlineOffset: 3,
+          }}
+        >
+          {staticTag.label} {ratio.toFixed(2)}:1
+        </span>
+      </div>
+    </div>
+  );
+}