designlang 7.2.0 → 8.0.0

package/website/app/components/Comparison.js

@@ -1,286 +0,0 @@
-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>
-  );
-}

package/website/app/components/CssHealth.js

@@ -1,243 +0,0 @@
-// §04 CSS health — mostly static. Static SVG plot, no ResizeObserver needed
-// (responsive via 100% width + aspect-ratio). Numbers are the PR B smoke
-// sample taken from stripe.com: 14 sheets, 89% unused, 764 !important rules,
-// 9,041 duplicate declarations.
-
-// Synthetic sample shaped from the PR B smoke distribution: a mostly low
-// specificity body with a rising-ramp tail — the classic "!important wall"
-// silhouette. X = rule order (0..100), Y = collapsed specificity (a*100+b*10+c).
-const POINTS = [
-  [2, 11], [4, 10], [6, 20], [8, 12], [10, 21], [12, 11], [14, 22],
-  [16, 20], [18, 12], [20, 22], [22, 30], [24, 20], [26, 21], [28, 31],
-  [30, 22], [32, 30], [34, 31], [36, 22], [38, 32], [40, 30], [42, 40],
-  [44, 32], [46, 41], [48, 42], [50, 51], [52, 42], [54, 50], [56, 61],
-  [58, 52], [60, 71], [62, 81], [64, 92], [66, 112], [68, 121], [70, 141],
-  [72, 161], [74, 172], [76, 191], [78, 202], [80, 221], [82, 232],
-  [84, 252], [86, 272], [88, 291], [90, 311], [92, 331], [94, 352],
-  [96, 372], [98, 391], [100, 412],
-];
-
-const VENDOR_CHIPS = [
-  ['-webkit-', '183'],
-  ['-moz-', '41'],
-  ['-ms-', '7'],
-  ['-o-', '2'],
-  ['duplicates', '9,041'],
-];
-
-const STATS = [
-  ['89%', 'unused css'],
-  ['764', '!important rules'],
-  ['9,041', 'duplicate declarations'],
-  ['14', 'stylesheets analyzed'],
-];
-
-import Rule from './Rule';
-import Marginalia from './Marginalia';
-
-function SpecificityPlot() {
-  // viewBox 100 x 100 (abstract units), axis gutters inside.
-  const maxY = 500;
-  const padL = 10;
-  const padB = 12;
-  const padT = 4;
-  const padR = 4;
-
-  return (
-    <svg
-      viewBox="0 0 200 125"
-      preserveAspectRatio="none"
-      role="img"
-      aria-label="Specificity scatter plot — rule order vs specificity score"
-      style={{
-        width: '100%',
-        aspectRatio: '16 / 10',
-        border: '1px solid var(--ink)',
-        background: 'var(--paper)',
-        display: 'block',
-      }}
-    >
-      {/* axis lines */}
-      <line x1={padL} y1={125 - padB} x2={200 - padR} y2={125 - padB} stroke="var(--ink)" strokeWidth="0.5" />
-      <line x1={padL} y1={padT} x2={padL} y2={125 - padB} stroke="var(--ink)" strokeWidth="0.5" />
-
-      {/* axis labels (mono ~10px visually — SVG units scaled) */}
-      <text x={padL} y={124} fontFamily="var(--font-mono)" fontSize="3.2" fill="var(--ink-2)" letterSpacing="0.1">
-        rule order →
-      </text>
-      <text
-        x={padL + 1}
-        y={padT + 3}
-        fontFamily="var(--font-mono)"
-        fontSize="3.2"
-        fill="var(--ink-2)"
-        letterSpacing="0.1"
-      >
-        ↑ specificity
-      </text>
-      <text x={200 - padR - 14} y={124} fontFamily="var(--font-mono)" fontSize="3" fill="var(--ink-3)">
-        n=50
-      </text>
-
-      {/* points */}
-      {POINTS.map(([x, y], i) => {
-        const px = padL + (x / 100) * (200 - padL - padR);
-        const py = 125 - padB - (Math.min(y, maxY) / maxY) * (125 - padB - padT);
-        const outlier = y > 200;
-        return (
-          <rect
-            key={i}
-            x={px - 1}
-            y={py - 1}
-            width="2"
-            height="2"
-            fill={outlier ? 'var(--accent)' : 'var(--ink)'}
-          />
-        );
-      })}
-    </svg>
-  );
-}
-
-export default function CssHealth() {
-  return (
-    <>
-      <Rule number="04" label="CSS health audit" />
-      <div className="with-margin" style={{ marginTop: 'var(--r5)' }}>
-        <div>
-          <div className="eyebrow" style={{ marginBottom: 'var(--r3)' }}>§04 CSS health</div>
-          <h2 className="display" style={{ marginBottom: 'var(--r4)' }}>
-            The stylesheet is the problem.
-          </h2>
-          <p className="prose" style={{ fontSize: 18, maxWidth: '62ch', color: 'var(--ink-2)' }}>
-            Most sites ship 40–90% unused CSS, long walls of <code>!important</code> escalations,
-            and a specificity graph that rises forever. v7.0 surfaces all of it — not as a
-            vanity score, but as exact declaration-level evidence.
-          </p>
-
-          <div
-            className="grid-12"
-            style={{
-              marginTop: 'var(--r7)',
-              gap: 'var(--col-gap)',
-              alignItems: 'start',
-            }}
-          >
-            {/* Big numerals — span 5 */}
-            <div
-              style={{
-                gridColumn: 'span 5',
-                display: 'grid',
-                gridTemplateColumns: '1fr 1fr',
-                gap: 'var(--r5) var(--r4)',
-              }}
-            >
-              {STATS.map(([n, label]) => (
-                <div key={label} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                  <div
-                    className="display"
-                    style={{
-                      fontSize: 'clamp(64px, 7vw, 120px)',
-                      lineHeight: 0.95,
-                      fontVariantNumeric: 'tabular-nums',
-                      fontFeatureSettings: "'tnum' 1",
-                      letterSpacing: '-0.04em',
-                    }}
-                  >
-                    {n}
-                  </div>
-                  <div
-                    className="mono"
-                    style={{
-                      fontSize: 11,
-                      letterSpacing: '0.14em',
-                      textTransform: 'uppercase',
-                      color: 'var(--ink-2)',
-                    }}
-                  >
-                    {label}
-                  </div>
-                </div>
-              ))}
-            </div>
-
-            {/* Plot — span 7 */}
-            <div style={{ gridColumn: 'span 7' }}>
-              <div
-                className="mono"
-                style={{
-                  fontSize: 11,
-                  letterSpacing: '0.14em',
-                  textTransform: 'uppercase',
-                  color: 'var(--ink-2)',
-                  marginBottom: 'var(--r3)',
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                }}
-              >
-                <span>specificity distribution</span>
-                <span style={{ color: 'var(--accent)' }}>outliers: specificity &gt; 200</span>
-              </div>
-              <SpecificityPlot />
-              <div
-                className="mono"
-                style={{
-                  fontSize: 11,
-                  color: 'var(--ink-3)',
-                  marginTop: 'var(--r3)',
-                }}
-              >
-                collapsed score: a×100 + b×10 + c. rising tail = accumulated !important wall.
-              </div>
-            </div>
-          </div>
-
-          {/* Caption strip — vendor prefix chips */}
-          <div
-            style={{
-              marginTop: 'var(--r7)',
-              display: 'flex',
-              flexWrap: 'wrap',
-              gap: 'var(--r3)',
-              borderTop: 'var(--hair)',
-              paddingTop: 'var(--r4)',
-            }}
-          >
-            {VENDOR_CHIPS.map(([k, v]) => (
-              <span
-                key={k}
-                className="mono"
-                style={{
-                  display: 'inline-flex',
-                  alignItems: 'baseline',
-                  gap: 8,
-                  padding: '3px 8px',
-                  border: '1px solid var(--ink)',
-                  fontSize: 11,
-                  letterSpacing: '0.04em',
-                }}
-              >
-                <span style={{ color: 'var(--ink-2)' }}>{k}</span>
-                <span style={{ fontVariantNumeric: 'tabular-nums' }}>{v}</span>
-              </span>
-            ))}
-          </div>
-        </div>
-
-        <Marginalia>
-          <div>additive scoring</div>
-          <p style={{ marginTop: 6 }}>
-            Tracked additively: existing score fields kept for back-compat; CSS health joins as a new
-            dimension.
-          </p>
-          <hr style={{ margin: '12px 0', border: 0, borderTop: '1px solid var(--ink-3)' }} />
-          <div>works on any site</div>
-          <p className="foot" style={{ marginTop: 6 }}>
-            Flags rising specificity, zombie declarations, and abandoned <code>!important</code> walls —
-            with exact selector provenance.
-          </p>
-        </Marginalia>
-      </div>
-    </>
-  );
-}