designlang 7.0.0 → 7.2.0

package/website/app/components/CssHealth.js

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

package/website/app/components/HeroExtractor.js

@@ -0,0 +1,455 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import Marginalia from './Marginalia';
+
+const STAGE_LABEL = {
+  crawl: 'walking DOM',
+  colors: 'resolving palette',
+  typography: 'reading type',
+  spacing: 'measuring rhythm',
+  shadows: 'catching shadows',
+  borders: 'tracing radii',
+  components: 'clustering components',
+  regions: 'naming regions',
+  a11y: 'auditing contrast',
+  score: 'scoring system',
+};
+
+const MAX_SWATCHES = 24;
+const MAX_DIMENSIONS = 12;
+
+export default function HeroExtractor() {
+  const [status, setStatus] = useState('idle'); // idle | streaming | done | error
+  const [stage, setStage] = useState(null);
+  const [cached, setCached] = useState(false);
+  const [swatches, setSwatches] = useState([]);
+  const [fontSample, setFontSample] = useState(null);
+  const [dimensions, setDimensions] = useState([]);
+  const [summary, setSummary] = useState(null);
+  const [files, setFiles] = useState(null);
+  const [errorMsg, setErrorMsg] = useState(null);
+  const [rateLimitMsg, setRateLimitMsg] = useState(null);
+  const [downloadBusy, setDownloadBusy] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const inputRef = useRef(null);
+
+  // Accept ?url= query param (Chrome extension handoff, deep links). Only
+  // applied once on mount; the extension prefills the input and the user still
+  // controls submission.
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const params = new URLSearchParams(window.location.search);
+    const incoming = params.get('url');
+    if (!incoming || !inputRef.current) return;
+    try {
+      const parsed = new URL(incoming);
+      if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
+        inputRef.current.value = parsed.toString();
+      }
+    } catch {
+      // Ignore malformed URLs silently — user still sees the default placeholder.
+    }
+  }, []);
+
+  const reset = useCallback(() => {
+    setStage(null);
+    setCached(false);
+    setSwatches([]);
+    setFontSample(null);
+    setDimensions([]);
+    setSummary(null);
+    setFiles(null);
+    setErrorMsg(null);
+    setRateLimitMsg(null);
+    setCopied(false);
+  }, []);
+
+  const handleEvent = useCallback((event) => {
+    switch (event.type) {
+      case 'cache':
+        setCached(true);
+        break;
+      case 'stage':
+        setStage(event.name);
+        break;
+      case 'token': {
+        if (event.$type === 'color' && typeof event.value === 'string' && event.value.startsWith('#')) {
+          setSwatches((prev) => {
+            if (prev.length >= MAX_SWATCHES) return prev;
+            if (prev.some((s) => s.path === event.path)) return prev;
+            return [...prev, { path: event.path, hex: event.value }];
+          });
+        } else if (event.$type === 'fontFamily' && typeof event.value === 'string') {
+          setFontSample((prev) => prev || event.value);
+        } else if (event.$type === 'dimension' && typeof event.value === 'string') {
+          const px = parseFloat(event.value);
+          if (!Number.isNaN(px)) {
+            setDimensions((prev) => {
+              if (prev.length >= MAX_DIMENSIONS) return prev;
+              return [...prev, { path: event.path, px, raw: event.value }];
+            });
+          }
+        }
+        break;
+      }
+      case 'summary':
+        setSummary(event.summary);
+        break;
+      case 'files':
+        setFiles(event.files);
+        setStatus('done');
+        break;
+      case 'error':
+        setErrorMsg(event.error || 'Extraction failed');
+        setStatus('error');
+        break;
+    }
+  }, []);
+
+  const handleSubmit = useCallback(async (e) => {
+    e.preventDefault();
+    if (status === 'streaming') return;
+    reset();
+    setStatus('streaming');
+
+    const url = inputRef.current?.value?.trim() || '';
+    let res;
+    try {
+      res = await fetch('/api/extract', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ url }),
+      });
+    } catch (err) {
+      setErrorMsg('Network error — check your connection.');
+      setStatus('error');
+      return;
+    }
+
+    if (!res.ok) {
+      let body = null;
+      try { body = await res.json(); } catch {}
+      if (res.status === 429) {
+        setRateLimitMsg(body?.error || 'Rate limit reached. Try again in 24h.');
+      } else if (res.status === 400) {
+        setErrorMsg(body?.error || 'Invalid URL.');
+      } else {
+        setErrorMsg(body?.error || 'Extraction failed. Try another URL.');
+      }
+      setStatus('error');
+      return;
+    }
+
+    if (!res.body) {
+      setErrorMsg('Browser does not support streaming responses.');
+      setStatus('error');
+      return;
+    }
+
+    const reader = res.body.pipeThrough(new TextDecoderStream()).getReader();
+    let buffer = '';
+    try {
+      while (true) {
+        const { value, done } = await reader.read();
+        if (done) break;
+        buffer += value;
+        let nl;
+        while ((nl = buffer.indexOf('\n')) !== -1) {
+          const line = buffer.slice(0, nl).trim();
+          buffer = buffer.slice(nl + 1);
+          if (!line) continue;
+          try {
+            handleEvent(JSON.parse(line));
+          } catch {
+            // Ignore partial / malformed lines — defensive only.
+          }
+        }
+      }
+      if (buffer.trim()) {
+        try { handleEvent(JSON.parse(buffer.trim())); } catch {}
+      }
+    } catch (err) {
+      setErrorMsg('Stream interrupted. Try another URL.');
+      setStatus('error');
+    }
+  }, [status, handleEvent, reset]);
+
+  const handleDownload = useCallback(async () => {
+    if (!files || downloadBusy) return;
+    setDownloadBusy(true);
+    try {
+      const { zipFilesToUrl } = await import('../../lib/zip-files.js');
+      const { url, filename } = await zipFilesToUrl(files, {
+        name: `designlang-${new Date().toISOString().slice(0, 10)}`,
+      });
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      a.click();
+      setTimeout(() => URL.revokeObjectURL(url), 1000);
+    } finally {
+      setDownloadBusy(false);
+    }
+  }, [files, downloadBusy]);
+
+  const handleCopyMarkdown = useCallback(async () => {
+    if (!files) return;
+    const mdKey = Object.keys(files).find((k) => k.endsWith('-design-language.md'));
+    if (!mdKey) return;
+    try {
+      await navigator.clipboard.writeText(files[mdKey]);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1800);
+    } catch {
+      // no-op
+    }
+  }, [files]);
+
+  const stageLabel = stage ? STAGE_LABEL[stage] || stage : null;
+  const streaming = status === 'streaming';
+  const disabled = streaming;
+
+  return (
+    <>
+      <div className="with-margin" style={{ marginTop: 'var(--r8)' }}>
+        <form
+          onSubmit={handleSubmit}
+          style={{
+            display: 'flex',
+            alignItems: 'stretch',
+            gap: 0,
+            maxWidth: 720,
+            border: 'var(--hair)',
+          }}
+        >
+          <label htmlFor="url" style={{ display: 'none' }}>URL</label>
+          <input
+            id="url"
+            ref={inputRef}
+            name="url"
+            type="url"
+            placeholder="https://stripe.com"
+            defaultValue="https://stripe.com"
+            disabled={disabled}
+            className="mono"
+            style={{
+              flex: 1,
+              padding: '18px 20px',
+              fontSize: 16,
+              color: 'var(--ink)',
+              background: 'transparent',
+              borderRight: 'var(--hair)',
+            }}
+          />
+          <button
+            type="submit"
+            className="cta"
+            disabled={disabled}
+            style={{ boxShadow: 'none' }}
+          >
+            {streaming ? 'Extracting…' : 'Extract'}
+            <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--ink-3)' }}>↵</span>
+          </button>
+        </form>
+
+        <Marginalia>
+          <div>status</div>
+          <div style={{ minHeight: '1.5em' }}>
+            {status === 'idle' && <code style={{ color: 'var(--ink-3)' }}>awaiting URL</code>}
+            {streaming && stageLabel && (
+              <code>§ {stageLabel}{cached ? ' (cached)' : ''}</code>
+            )}
+            {streaming && !stageLabel && <code>§ opening stream</code>}
+            {status === 'done' && <code style={{ color: 'var(--accent)' }}>complete{cached ? ' (cached)' : ''}</code>}
+            {status === 'error' && <code style={{ color: 'var(--accent)' }}>halted</code>}
+          </div>
+          {cached && (
+            <>
+              <hr style={{ margin: '12px 0', border: 0, borderTop: '1px solid var(--ink-3)' }} />
+              <span className="chip" style={{ fontSize: 10 }}>cached · &lt; 24h</span>
+            </>
+          )}
+        </Marginalia>
+      </div>
+
+      {errorMsg && (
+        <p className="mono" role="alert" style={{ marginTop: 'var(--r4)', fontSize: 12, color: 'var(--accent)' }}>
+          {errorMsg}{' '}
+          {status === 'error' && (
+            <button
+              type="button"
+              onClick={reset}
+              style={{ textDecoration: 'underline', color: 'inherit', marginLeft: 8 }}
+            >
+              Try another URL
+            </button>
+          )}
+        </p>
+      )}
+
+      {rateLimitMsg && (
+        <p className="mono" role="alert" style={{ marginTop: 'var(--r4)', fontSize: 12, color: 'var(--accent)' }}>
+          {rateLimitMsg}
+        </p>
+      )}
+
+      <p className="mono" style={{ marginTop: 14, fontSize: 11, color: 'var(--ink-3)' }}>
+        Free, rate-limited to 3 extractions per day. Private IPs rejected. No accounts.
+      </p>
+
+      {/* ── Live paint ─────────────────────────────────────── */}
+      {(swatches.length > 0 || fontSample || dimensions.length > 0 || summary) && (
+        <div style={{ marginTop: 'var(--r7)', display: 'grid', gap: 'var(--r5)' }}>
+          {swatches.length > 0 && (
+            <div>
+              <div className="section-label" style={{ marginBottom: 'var(--r3)' }}>
+                <span>palette</span>
+              </div>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--r3)' }}>
+                {swatches.map((s, i) => (
+                  <div
+                    key={s.path}
+                    style={{
+                      opacity: 0,
+                      animation: `designlang-fade-in 200ms ease-out forwards`,
+                      animationDelay: `${i * 40}ms`,
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: 40,
+                        height: 40,
+                        background: s.hex,
+                        border: 'var(--hair)',
+                      }}
+                    />
+                    <div
+                      className="mono"
+                      style={{ fontSize: 10, color: 'var(--ink-3)', marginTop: 4 }}
+                    >
+                      {s.hex}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {fontSample && (
+            <div>
+              <div className="section-label" style={{ marginBottom: 'var(--r3)' }}>
+                <span>type</span>
+              </div>
+              <div
+                style={{
+                  fontFamily: `${fontSample}, system-ui, sans-serif`,
+                  fontSize: 32,
+                  lineHeight: 1.2,
+                  letterSpacing: '-0.01em',
+                }}
+              >
+                Aa Bb Cc 123
+              </div>
+              <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 4 }}>
+                {fontSample}
+              </div>
+            </div>
+          )}
+
+          {dimensions.length > 0 && (
+            <div>
+              <div className="section-label" style={{ marginBottom: 'var(--r3)' }}>
+                <span>scale</span>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8 }}>
+                {dimensions.map((d, i) => (
+                  <div
+                    key={d.path}
+                    title={`${d.path} — ${d.raw}`}
+                    style={{
+                      width: 14,
+                      height: Math.min(Math.max(d.px, 4), 120),
+                      background: 'var(--ink)',
+                      opacity: 0,
+                      animation: `designlang-fade-in 200ms ease-out forwards`,
+                      animationDelay: `${i * 30}ms`,
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {summary && (
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
+                gap: 'var(--r5)',
+                borderTop: 'var(--hair)',
+                paddingTop: 'var(--r5)',
+              }}
+            >
+              <Numeral value={summary.colors} label="colors" />
+              <Numeral value={summary.spacingCount} label="spacing" />
+              <Numeral value={summary.shadowCount} label="shadows" />
+              <Numeral value={summary.componentCount} label="components" />
+              <Numeral
+                value={summary.score?.overall ?? '—'}
+                label={`score ${summary.score?.grade ? `(${summary.score.grade})` : ''}`}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
+      {files && (
+        <div style={{ marginTop: 'var(--r6)', display: 'flex', gap: 'var(--r3)', flexWrap: 'wrap' }}>
+          <button
+            type="button"
+            onClick={handleDownload}
+            className="cta"
+            disabled={downloadBusy}
+          >
+            {downloadBusy ? 'Zipping…' : `Download all (.zip) — ${Object.keys(files).length} files`}
+          </button>
+          <button
+            type="button"
+            onClick={handleCopyMarkdown}
+            className="cta"
+            style={{ background: 'var(--paper)', color: 'var(--ink)', boxShadow: 'none' }}
+          >
+            {copied ? 'Copied' : 'Copy markdown'}
+          </button>
+        </div>
+      )}
+
+      <style jsx>{`
+        @keyframes designlang-fade-in {
+          from { opacity: 0; transform: translateY(4px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          * { animation: none !important; }
+        }
+      `}</style>
+    </>
+  );
+}
+
+function Numeral({ value, label }) {
+  return (
+    <div>
+      <div
+        className="display"
+        style={{ fontSize: 'clamp(32px, 5vw, 56px)', lineHeight: 1 }}
+      >
+        {value}
+      </div>
+      <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 6, textTransform: 'uppercase', letterSpacing: '0.1em' }}>
+        {label}
+      </div>
+    </div>
+  );
+}

package/website/app/components/Marginalia.js

@@ -0,0 +1,3 @@
+export default function Marginalia({ children }) {
+  return <aside className="marginalia">{children}</aside>;
+}