designlang 7.0.0 → 7.2.0

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

package/website/app/components/PlatformTabs.js

@@ -0,0 +1,250 @@
+'use client';
+
+import { useRef, useState } from 'react';
+
+const TABS = [
+  {
+    id: 'web',
+    label: 'Web',
+    filename: 'tokens.css',
+    code: `:root {
+  --color-action-primary: #533afd;
+  --radius-control: 8px;
+}`,
+  },
+  {
+    id: 'ios',
+    label: 'iOS',
+    filename: 'DesignTokens.swift',
+    code: `import SwiftUI
+
+extension Color {
+  static let actionPrimary = Color(hex: 0x533AFD)
+}`,
+  },
+  {
+    id: 'android',
+    label: 'Android',
+    filename: 'DesignTokens.kt',
+    code: `import androidx.compose.ui.graphics.Color
+
+val ActionPrimary = Color(0xFF533AFD)
+
+// res/values/colors.xml
+// <color name="action_primary">#FF533AFD</color>`,
+  },
+  {
+    id: 'flutter',
+    label: 'Flutter',
+    filename: 'design_tokens.dart',
+    code: `import 'package:flutter/material.dart';
+
+class DesignTokens {
+  static const Color actionPrimary = Color(0xFF533AFD);
+}`,
+  },
+  {
+    id: 'wordpress',
+    label: 'WordPress',
+    filename: 'theme.json',
+    code: `{
+  "settings": {
+    "color": {
+      "palette": [
+        { "slug": "action-primary", "color": "#533AFD", "name": "Action Primary" }
+      ]
+    }
+  }
+}`,
+  },
+];
+
+export default function PlatformTabs() {
+  const [activeId, setActiveId] = useState(TABS[0].id);
+  const [copied, setCopied] = useState(false);
+  const tabRefs = useRef({});
+
+  const active = TABS.find((t) => t.id === activeId) || TABS[0];
+  const lines = active.code.split('\n');
+
+  const onKeyDown = (e) => {
+    const idx = TABS.findIndex((t) => t.id === activeId);
+    if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      const next = TABS[(idx + 1) % TABS.length];
+      setActiveId(next.id);
+      tabRefs.current[next.id]?.focus();
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      const next = TABS[(idx - 1 + TABS.length) % TABS.length];
+      setActiveId(next.id);
+      tabRefs.current[next.id]?.focus();
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      setActiveId(TABS[0].id);
+      tabRefs.current[TABS[0].id]?.focus();
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      const last = TABS[TABS.length - 1];
+      setActiveId(last.id);
+      tabRefs.current[last.id]?.focus();
+    }
+  };
+
+  const onCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(active.code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1400);
+    } catch {
+      // noop
+    }
+  };
+
+  return (
+    <div>
+      <div style={{ padding: 'var(--r5) 0 var(--r4)' }}>
+        <div className="eyebrow" style={{ marginBottom: 'var(--r3)' }}>§03 Multi-platform emitters</div>
+        <h2 className="display">One token. Five languages.</h2>
+        <p className="prose" style={{ marginTop: 'var(--r4)', fontSize: 18, maxWidth: '52ch' }}>
+          The same semantic token, emitted in five native dialects. No style leaks,
+          no translation layer.
+        </p>
+      </div>
+
+      {/* Tab strip */}
+      <div
+        role="tablist"
+        aria-label="Platform emitters"
+        onKeyDown={onKeyDown}
+        style={{
+          display: 'flex',
+          gap: 0,
+          borderBottom: 'var(--hair)',
+        }}
+      >
+        {TABS.map((t) => {
+          const selected = t.id === activeId;
+          return (
+            <button
+              key={t.id}
+              ref={(el) => (tabRefs.current[t.id] = el)}
+              role="tab"
+              id={`platform-tab-${t.id}`}
+              aria-selected={selected}
+              aria-controls={`platform-panel-${t.id}`}
+              tabIndex={selected ? 0 : -1}
+              onClick={() => setActiveId(t.id)}
+              style={{
+                padding: '14px 18px 13px',
+                fontFamily: 'var(--font-mono)',
+                fontSize: 12,
+                letterSpacing: '0.08em',
+                textTransform: 'uppercase',
+                color: selected ? 'var(--ink)' : 'var(--ink-2)',
+                borderBottom: selected ? '2px solid var(--accent)' : '2px solid transparent',
+                marginBottom: '-1px',
+                background: 'transparent',
+              }}
+            >
+              {t.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Code panel */}
+      <div
+        role="tabpanel"
+        id={`platform-panel-${active.id}`}
+        aria-labelledby={`platform-tab-${active.id}`}
+        style={{
+          position: 'relative',
+          background: 'var(--ink)',
+          color: 'var(--paper)',
+          border: 'var(--hair)',
+          borderTop: 0,
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'baseline',
+            padding: '12px 20px',
+            borderBottom: '1px solid var(--ink-2)',
+            fontFamily: 'var(--font-mono)',
+            fontSize: 11,
+            color: 'var(--ink-3)',
+            letterSpacing: '0.04em',
+          }}
+        >
+          <span>{active.filename}</span>
+          <button
+            onClick={onCopy}
+            style={{
+              fontFamily: 'var(--font-mono)',
+              fontSize: 11,
+              letterSpacing: '0.08em',
+              textTransform: 'uppercase',
+              color: copied ? 'var(--accent)' : 'var(--paper)',
+              padding: '4px 10px',
+              border: '1px solid var(--ink-3)',
+            }}
+            aria-live="polite"
+          >
+            {copied ? 'Copied' : 'Copy'}
+          </button>
+        </div>
+
+        <div
+          style={{
+            padding: '20px 0',
+            fontFamily: 'var(--font-mono)',
+            fontSize: 13,
+            lineHeight: 1.6,
+            fontFeatureSettings: "'zero' 1, 'ss01' 1",
+          }}
+        >
+          {lines.map((line, i) => (
+            <div
+              key={i}
+              style={{
+                display: 'grid',
+                gridTemplateColumns: '3.5rem 1fr',
+                alignItems: 'baseline',
+              }}
+            >
+              <span
+                style={{
+                  color: 'var(--ink-3)',
+                  textAlign: 'right',
+                  paddingRight: 14,
+                  borderRight: '1px solid var(--ink-2)',
+                  userSelect: 'none',
+                }}
+              >
+                {i + 1}
+              </span>
+              <pre style={{ margin: 0, paddingLeft: 20, whiteSpace: 'pre', color: 'var(--paper)' }}>
+                {line || ' '}
+              </pre>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <p
+        className="mono"
+        style={{
+          marginTop: 'var(--r4)',
+          fontSize: 12,
+          color: 'var(--ink-2)',
+        }}
+      >
+        <code>designlang &lt;url&gt; --platforms all</code> writes these files under{' '}
+        <code>./design-extract-output/&lt;platform&gt;/</code>.
+      </p>
+    </div>
+  );
+}