designlang 6.0.0 → 7.1.0

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

package/website/app/components/McpSection.js

@@ -0,0 +1,223 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import Marginalia from './Marginalia';
+
+const CURSOR_RULE = `---
+description: Design system extracted from https://stripe.com — use these tokens, do not invent new ones.
+globs: **/*.{ts,tsx,jsx,js,css,scss,html,vue,svelte,swift,kt,dart,php}
+alwaysApply: true
+---
+
+# Design system reference
+
+Source: https://stripe.com
+Extracted by designlang v7.0.0 on 2026-04-18T12:00:00Z
+
+## Semantic tokens (use these)
+- color.action.primary: #533afd
+- color.surface.default: #ffffff
+- color.text.body: #0a2540
+- radius.control: 8px
+- typography.body.fontFamily: sohne-var, Helvetica Neue, Arial, sans-serif
+
+## How to use
+- Prefer \`semantic.*\` tokens over \`primitive.*\`.
+- Never invent new tokens or hex values; reuse the ones above.
+- When a value is missing, pick the closest existing semantic token and flag the gap.
+- Reference tokens by their dotted path (e.g. \`semantic.color.action.primary\`).
+`;
+
+// The transcript. Each step is either typed (user input) or printed (server output).
+const TRANSCRIPT = [
+  { kind: 'typed', text: '$ designlang mcp --output-dir ./design-extract-output' },
+  { kind: 'print', text: '{"jsonrpc":"2.0","id":1,"result":{"serverInfo":{"name":"designlang","version":"7.0.0"}}}' },
+  { kind: 'typed', text: '{"jsonrpc":"2.0","id":2,"method":"tools/call","params":{"name":"search_tokens","arguments":{"query":"action.primary"}}}' },
+  { kind: 'print', text: '{"jsonrpc":"2.0","id":2,"result":{"matches":[{"path":"semantic.color.action.primary","$type":"color","$value":"#533afd"}]}}' },
+];
+
+function Terminal({ reduced }) {
+  const [lines, setLines] = useState(() =>
+    reduced ? TRANSCRIPT.map((t) => ({ ...t, rendered: t.text })) : []
+  );
+  const containerRef = useRef(null);
+  const [inView, setInView] = useState(false);
+
+  // IntersectionObserver to pause when offscreen.
+  useEffect(() => {
+    if (reduced) return;
+    if (!containerRef.current) return;
+    const el = containerRef.current;
+    const io = new IntersectionObserver(
+      ([entry]) => setInView(entry.isIntersecting),
+      { threshold: 0.25 }
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, [reduced]);
+
+  // Typewriter runner.
+  useEffect(() => {
+    if (reduced) return;
+    if (!inView) return;
+    const controller = new AbortController();
+    const signal = controller.signal;
+
+    async function run() {
+      while (!signal.aborted) {
+        setLines([]);
+        for (let i = 0; i < TRANSCRIPT.length; i++) {
+          if (signal.aborted) return;
+          const step = TRANSCRIPT[i];
+          if (step.kind === 'typed') {
+            // ~55 cps ≈ 18ms per char
+            for (let j = 0; j <= step.text.length; j++) {
+              if (signal.aborted) return;
+              await wait(18, signal);
+              setLines((prev) => {
+                const next = [...prev];
+                next[i] = { ...step, rendered: step.text.slice(0, j) };
+                return next;
+              });
+            }
+            await wait(280, signal);
+          } else {
+            await wait(220, signal);
+            if (signal.aborted) return;
+            setLines((prev) => {
+              const next = [...prev];
+              next[i] = { ...step, rendered: step.text };
+              return next;
+            });
+          }
+        }
+        await wait(2000, signal);
+      }
+    }
+
+    run().catch(() => {});
+    return () => controller.abort();
+  }, [inView, reduced]);
+
+  return (
+    <div
+      ref={containerRef}
+      aria-label="designlang MCP terminal transcript"
+      style={{
+        background: 'var(--ink)',
+        color: 'var(--paper)',
+        border: 'var(--hair)',
+        fontFamily: 'var(--font-mono)',
+        fontSize: 12,
+        lineHeight: 1.55,
+        padding: 'var(--r4) var(--r5)',
+        minHeight: 320,
+        overflow: 'auto',
+      }}
+    >
+      <div style={{ color: 'var(--ink-3)', marginBottom: 8 }}>
+        designlang-mcp · stdio
+      </div>
+      {TRANSCRIPT.map((step, i) => {
+        const line = lines[i];
+        const rendered = line?.rendered ?? '';
+        const done = rendered.length === step.text.length;
+        return (
+          <pre
+            key={i}
+            style={{
+              margin: 0,
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-all',
+              color: step.kind === 'typed' ? 'var(--paper)' : 'var(--ink-3)',
+            }}
+          >
+            {step.kind === 'print' && rendered ? <span style={{ color: 'var(--accent)' }}>» </span> : null}
+            {rendered}
+            {!done && !reduced ? <span style={{ opacity: 0.7 }}>▍</span> : null}
+          </pre>
+        );
+      })}
+    </div>
+  );
+}
+
+function wait(ms, signal) {
+  return new Promise((resolve, reject) => {
+    const t = setTimeout(resolve, ms);
+    signal.addEventListener('abort', () => {
+      clearTimeout(t);
+      reject(new Error('aborted'));
+    }, { once: true });
+  });
+}
+
+export default function McpSection() {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const update = () => setReduced(mq.matches);
+    update();
+    mq.addEventListener?.('change', update);
+    return () => mq.removeEventListener?.('change', update);
+  }, []);
+
+  return (
+    <div>
+      <div style={{ padding: 'var(--r5) 0 var(--r6)' }}>
+        <h2 className="display">Your editor reads this.</h2>
+        <p className="prose" style={{ marginTop: 'var(--r4)', fontSize: 18, maxWidth: '52ch' }}>
+          The MCP server exposes five resources and five tools over stdio, speaking
+          JSON-RPC to Claude Code, Cursor, and Windsurf. See <a href="#install">§09</a> for install.
+        </p>
+      </div>
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'minmax(0, 7fr) minmax(0, 5fr)',
+          columnGap: 0,
+          alignItems: 'stretch',
+        }}
+      >
+        {/* Left: rule file */}
+        <div
+          style={{
+            background: 'var(--paper-2)',
+            border: 'var(--hair)',
+            borderRight: 0,
+            padding: 'var(--r4) var(--r5)',
+            fontFamily: 'var(--font-mono)',
+            fontSize: 12,
+            lineHeight: 1.55,
+            overflow: 'auto',
+          }}
+        >
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 'var(--r3)' }}>
+            <span style={{ color: 'var(--ink-3)' }}>.cursor/rules/designlang.mdc</span>
+            <span className="chip" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>
+              alwaysApply: true
+            </span>
+          </div>
+          <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word', color: 'var(--ink)' }}>
+            {CURSOR_RULE}
+          </pre>
+        </div>
+
+        {/* Right: terminal */}
+        <Terminal reduced={reduced} />
+      </div>
+
+      <div style={{ marginTop: 'var(--r6)' }}>
+        <Marginalia>
+          <div>install</div>
+          <div>
+            <code>{'{ "mcpServers": { "designlang": { "command": "npx", "args": ["designlang","mcp"] } } }'}</code>
+          </div>
+          <hr style={{ margin: '12px 0', border: 0, borderTop: '1px solid var(--ink-3)' }} />
+          <div>Zero-config for any MCP-aware agent.</div>
+        </Marginalia>
+      </div>
+    </div>
+  );
+}