designlang 7.0.0 → 7.1.0

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>
+  );
+}

package/website/app/components/Comparison.js

@@ -0,0 +1,286 @@
+import Marginalia from './Marginalia';
+
+const TOOLS = [
+  'designlang',
+  'v0',
+  'Builder.io Visual Copilot',
+  'Style Dictionary',
+  'Subframe',
+  'Project Wallace',
+];
+
+// Y = yes, N = no, P = partial
+const ROWS = [
+  {
+    feature: 'Extracts from a live URL',
+    cells: ['Y', 'N', 'Y', 'N', 'N', 'Y'],
+  },
+  {
+    feature: 'Emits W3C DTCG tokens',
+    cells: ['Y', 'N', 'N', 'Y', 'N', 'N'],
+  },
+  {
+    feature: 'Semantic alias layer',
+    cells: ['Y', 'N', 'N', 'Y', 'P', 'N'],
+  },
+  {
+    feature: 'Multi-platform output (iOS, Android, Flutter)',
+    cells: ['Y', 'N', 'N', 'Y', 'N', 'N'],
+  },
+  {
+    feature: 'MCP server over stdio',
+    cells: ['Y', 'N', 'N', 'N', 'N', 'N'],
+  },
+  {
+    feature: 'CSS health audit',
+    cells: ['Y', 'N', 'N', 'N', 'N', 'Y'],
+  },
+  {
+    feature: 'A11y remediation suggestions',
+    cells: ['P', 'N', 'P', 'N', 'N', 'P'],
+  },
+  {
+    feature: 'Component cluster detection',
+    cells: ['P', 'Y', 'Y', 'N', 'Y', 'N'],
+  },
+  {
+    feature: 'Offline / local-only',
+    cells: ['Y', 'N', 'N', 'Y', 'N', 'N'],
+  },
+  {
+    feature: 'Open source / MIT',
+    cells: ['Y', 'N', 'N', 'Y', 'N', 'P'],
+  },
+];
+
+function Mark({ kind }) {
+  if (kind === 'Y') {
+    return (
+      <svg width="14" height="14" viewBox="0 0 14 14" aria-label="yes" role="img">
+        <rect x="2" y="2" width="10" height="10" fill="var(--ink)" transform="rotate(45 7 7)" />
+      </svg>
+    );
+  }
+  if (kind === 'P') {
+    return (
+      <svg width="16" height="16" viewBox="0 0 16 16" aria-label="partial" role="img">
+        <rect
+          x="3"
+          y="3"
+          width="10"
+          height="10"
+          fill="var(--accent)"
+          stroke="var(--ink)"
+          strokeWidth="1"
+          transform="rotate(45 8 8)"
+        />
+      </svg>
+    );
+  }
+  return (
+    <span className="mono" style={{ color: 'var(--ink-3)', fontSize: 14 }} aria-label="no">
+      —
+    </span>
+  );
+}
+
+export default function Comparison() {
+  return (
+    <div>
+      <div className="with-margin" style={{ marginTop: 'var(--r5)', marginBottom: 'var(--r7)' }}>
+        <div>
+          <div className="section-label" style={{ marginBottom: 'var(--r5)' }}>
+            <span>§08 — Compared</span>
+          </div>
+          <h2 className="display" style={{ marginBottom: 'var(--r4)' }}>
+            Where designlang doesn&apos;t win,<br />
+            <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>it says so.</em>
+          </h2>
+          <p className="prose" style={{ fontSize: 18, lineHeight: 1.5, maxWidth: '62ch' }}>
+            We picked five tools doing closely adjacent work. The matrix below is our honest
+            assessment on 2026-04-18, written by someone who actually uses all six.
+          </p>
+        </div>
+        <Marginalia>
+          <div>legend</div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
+            <Mark kind="Y" /> <span>supported</span>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
+            <Mark kind="P" /> <span>partial</span>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
+            <Mark kind="N" /> <span>not supported</span>
+          </div>
+          <hr style={{ margin: '12px 0', border: 0, borderTop: '1px solid var(--ink-3)' }} />
+          <p className="foot">
+            Open a PR if this matrix is wrong for your tool. We&apos;ll update it or explain
+            our read.
+          </p>
+        </Marginalia>
+      </div>
+
+      <div style={{ overflowX: 'auto', marginBottom: 'var(--r7)' }}>
+        <table
+          style={{
+            width: '100%',
+            minWidth: 900,
+            borderCollapse: 'collapse',
+            tableLayout: 'fixed',
+          }}
+        >
+          <thead>
+            <tr>
+              <th
+                scope="col"
+                className="mono"
+                style={{
+                  textAlign: 'left',
+                  fontSize: 12,
+                  textTransform: 'uppercase',
+                  letterSpacing: '0.12em',
+                  color: 'var(--ink-2)',
+                  padding: '12px 20px 12px 0',
+                  borderBottom: '1px solid var(--ink)',
+                  fontWeight: 400,
+                  width: '28%',
+                }}
+              >
+                Feature
+              </th>
+              {TOOLS.map((t, i) => (
+                <th
+                  key={t}
+                  scope="col"
+                  className="mono"
+                  style={{
+                    textAlign: 'center',
+                    fontSize: 12,
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.08em',
+                    color: i === 0 ? 'var(--ink)' : 'var(--ink-2)',
+                    padding: '12px 8px',
+                    borderBottom: '1px solid var(--ink)',
+                    fontWeight: 400,
+                  }}
+                >
+                  {t}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {ROWS.map((row, rIdx) => (
+              <tr key={row.feature}>
+                <th
+                  scope="row"
+                  style={{
+                    textAlign: 'left',
+                    padding: '14px 20px 14px 0',
+                    fontWeight: 400,
+                    fontSize: 15,
+                    color: 'var(--ink)',
+                    borderBottom: rIdx === ROWS.length - 1 ? 0 : '1px solid var(--paper-3)',
+                  }}
+                >
+                  {row.feature}
+                </th>
+                {row.cells.map((c, i) => (
+                  <td
+                    key={i}
+                    style={{
+                      textAlign: 'center',
+                      padding: '14px 8px',
+                      verticalAlign: 'middle',
+                      borderBottom: rIdx === ROWS.length - 1 ? 0 : '1px solid var(--paper-3)',
+                    }}
+                  >
+                    <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
+                      <Mark kind={c} />
+                    </span>
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="with-margin">
+        <div>
+          <h3
+            className="mono"
+            style={{
+              fontSize: 12,
+              textTransform: 'uppercase',
+              letterSpacing: '0.14em',
+              color: 'var(--ink-2)',
+              marginBottom: 'var(--r4)',
+            }}
+          >
+            What designlang is not
+          </h3>
+          <ul
+            style={{
+              listStyle: 'none',
+              padding: 0,
+              display: 'grid',
+              gap: 'var(--r3)',
+              maxWidth: '72ch',
+            }}
+          >
+            <li
+              style={{
+                borderLeft: '1px solid var(--ink)',
+                paddingLeft: 'var(--r4)',
+                fontSize: 16,
+                lineHeight: 1.5,
+              }}
+            >
+              <em style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic' }}>
+                It is not a design-to-code generator.
+              </em>{' '}
+              It extracts the <strong>system</strong>, not the components as JSX.
+            </li>
+            <li
+              style={{
+                borderLeft: '1px solid var(--ink)',
+                paddingLeft: 'var(--r4)',
+                fontSize: 16,
+                lineHeight: 1.5,
+              }}
+            >
+              <em style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic' }}>
+                It is not a hosted cloud service.
+              </em>{' '}
+              The free website extractor is rate-limited; production use should run the CLI or
+              MCP server locally.
+            </li>
+            <li
+              style={{
+                borderLeft: '1px solid var(--ink)',
+                paddingLeft: 'var(--r4)',
+                fontSize: 16,
+                lineHeight: 1.5,
+              }}
+            >
+              <em style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic' }}>
+                It is not a Figma plugin.
+              </em>{' '}
+              designlang reads the <strong>rendered DOM</strong>, not the Figma file — the
+              output is what your users actually see, not what a designer intended.
+            </li>
+          </ul>
+        </div>
+        <Marginalia>
+          <div>honesty clause</div>
+          <p className="foot" style={{ marginTop: 6 }}>
+            Two partial cells for designlang on purpose — the a11y remediation engine
+            suggests fixes but won&apos;t rewrite your markup, and component cluster
+            detection is heuristic, not vision-based.
+          </p>
+        </Marginalia>
+      </div>
+    </div>
+  );
+}