designlang 7.0.0 → 7.2.0

package/website/app/components/StructuredData.js

@@ -0,0 +1,144 @@
+import {
+  SITE_URL,
+  SITE_NAME,
+  SITE_DESCRIPTION,
+  SITE_KEYWORDS,
+} from '../seo-config';
+
+// JSON-LD structured data. All content is server-literal — no user input is
+// interpolated into the JSON string. This matches the Next.js App Router
+// metadata docs' recommended inline-script pattern.
+// https://nextjs.org/docs/app/building-your-application/optimizing/metadata#json-ld
+export default function StructuredData() {
+  const graph = {
+    '@context': 'https://schema.org',
+    '@graph': [
+      {
+        '@type': 'SoftwareApplication',
+        '@id': `${SITE_URL}/#software`,
+        name: 'designlang',
+        alternateName: ['design-extract', 'designlang CLI'],
+        description: SITE_DESCRIPTION,
+        applicationCategory: 'DeveloperApplication',
+        applicationSubCategory: 'Design System Extractor',
+        operatingSystem: 'macOS, Windows, Linux',
+        softwareVersion: '7.0.0',
+        downloadUrl: 'https://www.npmjs.com/package/designlang',
+        installUrl: 'https://www.npmjs.com/package/designlang',
+        url: SITE_URL,
+        offers: {
+          '@type': 'Offer',
+          price: '0',
+          priceCurrency: 'USD',
+          availability: 'https://schema.org/InStock',
+        },
+        license: 'https://opensource.org/licenses/MIT',
+        codeRepository: 'https://github.com/Manavarya09/design-extract',
+        programmingLanguage: ['JavaScript', 'TypeScript'],
+        runtimePlatform: 'Node.js 20+',
+        featureList: [
+          'Reverse-engineer any website into a W3C DTCG design system',
+          'Emits primitive, semantic, and composite tokens',
+          'Multi-platform output: Tailwind, CSS variables, Figma variables, shadcn/ui, React, Vue, Svelte, iOS SwiftUI, Android Compose, Flutter, WordPress block theme',
+          'Stdio MCP server exposing tokens, regions, components, CSS health, and remediation',
+          'Agent rule emitter for Cursor, Claude Code, Windsurf, AGENTS.md',
+          'CSS health audit: specificity graph, !important count, unused CSS via Coverage API, @keyframes catalog',
+          'WCAG accessibility remediation with nearest passing palette color',
+          'Semantic region classifier (nav, hero, pricing, testimonials, footer, and more)',
+          'Reusable component clustering with variant detection',
+          'Dark mode diff, authenticated page crawling, responsive breakpoint capture',
+        ],
+        keywords: SITE_KEYWORDS.slice(0, 25).join(', '),
+        author: {
+          '@type': 'Person',
+          name: 'Manav Arya Singh',
+          url: 'https://manavaryasingh.com',
+        },
+        publisher: {
+          '@type': 'Person',
+          name: 'Manav Arya Singh',
+          url: 'https://manavaryasingh.com',
+        },
+      },
+      {
+        '@type': 'WebSite',
+        '@id': `${SITE_URL}/#website`,
+        url: SITE_URL,
+        name: SITE_NAME,
+        description: SITE_DESCRIPTION,
+        publisher: { '@id': `${SITE_URL}/#person` },
+        inLanguage: 'en-US',
+      },
+      {
+        '@type': 'Person',
+        '@id': `${SITE_URL}/#person`,
+        name: 'Manav Arya Singh',
+        url: 'https://manavaryasingh.com',
+        sameAs: [
+          'https://github.com/Manavarya09',
+          'https://www.npmjs.com/~manavarya0909',
+        ],
+      },
+      {
+        '@type': 'BreadcrumbList',
+        '@id': `${SITE_URL}/#breadcrumbs`,
+        itemListElement: [
+          { '@type': 'ListItem', position: 1, name: 'Home', item: SITE_URL },
+          { '@type': 'ListItem', position: 2, name: 'Extract', item: `${SITE_URL}/#extract` },
+          { '@type': 'ListItem', position: 3, name: 'Features', item: `${SITE_URL}/#features` },
+          { '@type': 'ListItem', position: 4, name: 'Specimens', item: `${SITE_URL}/#specimens` },
+          { '@type': 'ListItem', position: 5, name: 'Install', item: `${SITE_URL}/#install` },
+        ],
+      },
+      {
+        '@type': 'FAQPage',
+        '@id': `${SITE_URL}/#faq`,
+        mainEntity: [
+          {
+            '@type': 'Question',
+            name: 'What is designlang?',
+            acceptedAnswer: {
+              '@type': 'Answer',
+              text: 'designlang is an open-source CLI tool that crawls any live website with Playwright and emits its complete design system in W3C DTCG token format, plus Tailwind, CSS variables, Figma variables, shadcn/ui theme, and native emitters for iOS SwiftUI, Android Compose, Flutter, and WordPress block themes.',
+            },
+          },
+          {
+            '@type': 'Question',
+            name: 'Does designlang work with AI coding agents like Claude Code and Cursor?',
+            acceptedAnswer: {
+              '@type': 'Answer',
+              text: 'Yes. designlang ships a stdio MCP server (designlang mcp) that exposes extracted tokens, regions, components, CSS health, and accessibility remediation as MCP resources and tools, plus an --emit-agent-rules flag that writes .cursor/rules/designlang.mdc, .claude/skills/designlang/SKILL.md, CLAUDE.md.fragment, and agents.md.',
+            },
+          },
+          {
+            '@type': 'Question',
+            name: 'How is designlang different from Style Dictionary, Subframe, v0, Builder.io, and Project Wallace?',
+            acceptedAnswer: {
+              '@type': 'Answer',
+              text: 'designlang extracts from a live rendered URL, not a Figma file or a manually-authored token source. It outputs strict DTCG with a semantic/primitive layering and composite tokens, ships multi-platform emitters (iOS, Android, Flutter, WordPress) from one extraction, runs a CSS health audit plus a11y remediation, classifies page regions, and detects reusable components automatically. It is open-source under MIT and runs locally as a CLI or MCP server.',
+            },
+          },
+          {
+            '@type': 'Question',
+            name: 'Is designlang free and open source?',
+            acceptedAnswer: {
+              '@type': 'Answer',
+              text: 'Yes. designlang is MIT-licensed, free, and fully open-source. The CLI installs with npx designlang <url> and requires only Node.js 20 or later. The website at designlang.manavaryasingh.com offers a free rate-limited extraction for quick demos.',
+            },
+          },
+          {
+            '@type': 'Question',
+            name: 'What output formats does designlang support?',
+            acceptedAnswer: {
+              '@type': 'Answer',
+              text: 'W3C DTCG JSON (primitive, semantic, composite layers), Tailwind CSS config, CSS custom properties, Figma Variables JSON, shadcn/ui theme, React / Vue / Svelte theme objects, iOS SwiftUI Color + CGFloat extensions, Android Jetpack Compose Theme.kt and colors.xml, Flutter ThemeData, and a WordPress block theme skeleton (theme.json, style.css, templates).',
+            },
+          },
+        ],
+      },
+    ],
+  };
+
+  const json = JSON.stringify(graph).replace(/</g, '\\u003c');
+  return <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: json }} />;
+}

package/website/app/components/TokenBrowser.js

@@ -0,0 +1,344 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { resolveRef, flattenTokens } from '../../lib/token-helpers';
+import { sampleTokens, sampleCommand } from './token-browser-sample';
+import Marginalia from './Marginalia';
+
+const REF_PATTERN = /^\{([^}]+)\}$/;
+function refTarget(value) {
+  if (typeof value !== 'string') return null;
+  const m = value.match(REF_PATTERN);
+  return m ? m[1] : null;
+}
+
+function Swatch({ value }) {
+  return (
+    <span
+      aria-hidden="true"
+      style={{
+        display: 'inline-block',
+        width: 14,
+        height: 14,
+        border: '1px solid var(--ink)',
+        background: value,
+        verticalAlign: 'middle',
+        marginRight: 8,
+      }}
+    />
+  );
+}
+
+function ValueSample({ row, resolvedHex, highlighted }) {
+  const { $type, $value } = row;
+  if ($type === 'color') {
+    const display = typeof $value === 'string' && $value.startsWith('{')
+      ? (resolvedHex || $value)
+      : $value;
+    return (
+      <span className="mono" style={{ fontSize: 12, display: 'inline-flex', alignItems: 'center' }}>
+        {typeof display === 'string' && display.startsWith('#') ? <Swatch value={display} /> : null}
+        <span style={{ color: highlighted ? 'var(--accent)' : 'var(--ink)' }}>{display}</span>
+      </span>
+    );
+  }
+  if ($type === 'dimension') {
+    return <span className="mono" style={{ fontSize: 12 }}>{String(resolvedHex || $value)}</span>;
+  }
+  if ($type === 'typography' && typeof $value === 'object' && $value) {
+    const { fontFamily, fontSize, lineHeight, fontWeight } = $value;
+    const label = `${String(fontFamily).split(',')[0]} ${fontSize}/${lineHeight} ${fontWeight}`;
+    return (
+      <span
+        style={{
+          fontFamily: String(fontFamily),
+          fontSize: 13,
+          lineHeight: 1.3,
+          fontWeight: Number(fontWeight) || 400,
+        }}
+      >
+        {label}
+      </span>
+    );
+  }
+  return <span className="mono" style={{ fontSize: 12 }}>{JSON.stringify($value)}</span>;
+}
+
+export default function TokenBrowser() {
+  const tokens = sampleTokens;
+  const semanticRows = useMemo(() => flattenTokens(tokens, { layer: 'semantic' }), [tokens]);
+  const primitiveRows = useMemo(() => flattenTokens(tokens, { layer: 'primitive' }), [tokens]);
+
+  const [activeIdx, setActiveIdx] = useState(-1);
+  const [reduced, setReduced] = useState(false);
+  const semanticRefs = useRef([]);
+  const primitiveRefs = useRef([]);
+  const containerRef = useRef(null);
+  const [lineGeom, setLineGeom] = useState(null); // { x1, y1, x2, y2, targetPrimitivePath }
+
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const update = () => setReduced(mq.matches);
+    update();
+    mq.addEventListener?.('change', update);
+    return () => mq.removeEventListener?.('change', update);
+  }, []);
+
+  // Compute line geometry when activeIdx changes.
+  useEffect(() => {
+    if (activeIdx < 0 || !containerRef.current) {
+      setLineGeom(null);
+      return;
+    }
+    const row = semanticRows[activeIdx];
+    if (!row) return setLineGeom(null);
+    const target = refTarget(row.$value);
+    if (!target) return setLineGeom(null);
+
+    const primitiveIdx = primitiveRows.findIndex((p) => p.path === target);
+    if (primitiveIdx < 0) return setLineGeom(null);
+
+    const semEl = semanticRefs.current[activeIdx];
+    const primEl = primitiveRefs.current[primitiveIdx];
+    const box = containerRef.current.getBoundingClientRect();
+    if (!semEl || !primEl) return setLineGeom(null);
+    const a = semEl.getBoundingClientRect();
+    const b = primEl.getBoundingClientRect();
+
+    setLineGeom({
+      x1: a.right - box.left,
+      y1: a.top + a.height / 2 - box.top,
+      x2: b.left - box.left,
+      y2: b.top + b.height / 2 - box.top,
+      targetPrimitivePath: target,
+      width: box.width,
+      height: box.height,
+    });
+  }, [activeIdx, semanticRows, primitiveRows]);
+
+  // Recompute on resize.
+  useEffect(() => {
+    const onResize = () => setActiveIdx((i) => i); // re-trigger
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+
+  const activeRow = activeIdx >= 0 ? semanticRows[activeIdx] : null;
+  const activeResolved = activeRow ? resolveRef(tokens, activeRow.path) : null;
+  const activeTargetPath = activeRow ? refTarget(activeRow.$value) : null;
+
+  const handleKey = (e) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setActiveIdx((i) => Math.min(semanticRows.length - 1, i < 0 ? 0 : i + 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActiveIdx((i) => Math.max(0, i < 0 ? 0 : i - 1));
+    } else if (e.key === 'Escape') {
+      setActiveIdx(-1);
+    }
+  };
+
+  return (
+    <div className="with-margin">
+      <div>
+        <h2 className="display" style={{ marginBottom: 'var(--r3)' }}>Aliases, not values.</h2>
+        <p className="prose" style={{ fontSize: 18, marginBottom: 'var(--r6)' }}>
+          v7.0 writes tokens in W3C DTCG. Hover a semantic row on the left and watch the
+          alias resolve through to its primitive on the right.
+        </p>
+
+        <div
+          ref={containerRef}
+          role="group"
+          aria-label="DTCG token browser"
+          tabIndex={0}
+          onKeyDown={handleKey}
+          style={{
+            position: 'relative',
+            display: 'grid',
+            gridTemplateColumns: '5fr 2fr 5fr',
+            columnGap: 0,
+            border: 'var(--hair)',
+            background: 'var(--paper-2)',
+          }}
+        >
+          {/* Left: semantic */}
+          <div>
+            <div
+              className="mono"
+              style={{
+                fontSize: 11,
+                letterSpacing: '0.12em',
+                textTransform: 'uppercase',
+                color: 'var(--ink-2)',
+                padding: '10px 14px',
+                borderBottom: 'var(--hair)',
+              }}
+            >
+              semantic
+            </div>
+            {semanticRows.map((row, i) => {
+              const isActive = i === activeIdx;
+              return (
+                <div
+                  key={row.path}
+                  ref={(el) => (semanticRefs.current[i] = el)}
+                  onMouseEnter={() => setActiveIdx(i)}
+                  onFocus={() => setActiveIdx(i)}
+                  tabIndex={-1}
+                  role="row"
+                  aria-selected={isActive}
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: '1fr auto',
+                    alignItems: 'center',
+                    gap: 12,
+                    padding: '10px 14px',
+                    borderBottom: i === semanticRows.length - 1 ? 0 : '1px solid var(--ink-3)',
+                    background: isActive ? 'var(--paper)' : 'transparent',
+                    cursor: 'pointer',
+                  }}
+                >
+                  <span className="mono" style={{ fontSize: 12, color: 'var(--ink)' }}>
+                    {row.path.replace(/^semantic\./, '')}
+                  </span>
+                  <ValueSample row={row} resolvedHex={isActive ? activeResolved : null} highlighted={isActive} />
+                </div>
+              );
+            })}
+          </div>
+
+          {/* Middle: flight-path */}
+          <div style={{ position: 'relative', borderLeft: '1px solid var(--ink-3)', borderRight: '1px solid var(--ink-3)' }}>
+            {lineGeom && (
+              <svg
+                aria-hidden="true"
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  width: '100%',
+                  height: '100%',
+                  pointerEvents: 'none',
+                  overflow: 'visible',
+                }}
+                viewBox={`0 0 ${lineGeom.width} ${lineGeom.height}`}
+                preserveAspectRatio="none"
+              >
+                <FlightLine geom={lineGeom} reduced={reduced} />
+              </svg>
+            )}
+          </div>
+
+          {/* Right: primitive */}
+          <div>
+            <div
+              className="mono"
+              style={{
+                fontSize: 11,
+                letterSpacing: '0.12em',
+                textTransform: 'uppercase',
+                color: 'var(--ink-2)',
+                padding: '10px 14px',
+                borderBottom: 'var(--hair)',
+              }}
+            >
+              primitive
+            </div>
+            {primitiveRows.map((row, i) => {
+              const isTarget = activeTargetPath === row.path;
+              return (
+                <div
+                  key={row.path}
+                  ref={(el) => (primitiveRefs.current[i] = el)}
+                  role="row"
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: '1fr auto',
+                    alignItems: 'center',
+                    gap: 12,
+                    padding: '10px 14px',
+                    borderBottom: i === primitiveRows.length - 1 ? 0 : '1px solid var(--ink-3)',
+                    background: isTarget ? 'var(--paper)' : 'transparent',
+                    boxShadow: isTarget ? 'inset 3px 0 0 var(--accent)' : 'none',
+                  }}
+                >
+                  <span className="mono" style={{ fontSize: 12 }}>
+                    {row.path.replace(/^primitive\./, '')}
+                  </span>
+                  <ValueSample row={row} highlighted={isTarget} />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Live region for screen readers */}
+        <div
+          aria-live="polite"
+          style={{
+            position: 'absolute',
+            width: 1,
+            height: 1,
+            overflow: 'hidden',
+            clip: 'rect(0 0 0 0)',
+          }}
+        >
+          {activeRow
+            ? `${activeRow.path} resolves to ${activeTargetPath || activeRow.$value} — ${activeResolved || ''}`
+            : ''}
+        </div>
+      </div>
+
+      <Marginalia>
+        <div>taxonomy</div>
+        <div>
+          Semantic tokens describe intent. Primitive tokens describe values.
+          designlang writes both in W3C DTCG so your consumer can choose which layer to bind to.
+        </div>
+        <hr style={{ margin: '12px 0', border: 0, borderTop: '1px solid var(--ink-3)' }} />
+        <div>produced by</div>
+        <div><code>{sampleCommand}</code></div>
+      </Marginalia>
+    </div>
+  );
+}
+
+function FlightLine({ geom, reduced }) {
+  const { x1, y1, x2, y2 } = geom;
+  // Curve control points for a smooth horizontal flight path.
+  const midX = (x1 + x2) / 2;
+  const d = `M ${x1} ${y1} C ${midX} ${y1}, ${midX} ${y2}, ${x2} ${y2}`;
+
+  const pathRef = useRef(null);
+  const [len, setLen] = useState(0);
+  useEffect(() => {
+    if (pathRef.current) setLen(pathRef.current.getTotalLength());
+  }, [x1, y1, x2, y2]);
+
+  return (
+    <>
+      <path
+        ref={pathRef}
+        d={d}
+        fill="none"
+        stroke="var(--accent)"
+        strokeWidth="1.5"
+        strokeDasharray={reduced ? '0' : len}
+        strokeDashoffset={reduced ? 0 : len}
+        style={{
+          animation: reduced ? 'none' : 'designlang-flight 320ms ease-out forwards',
+        }}
+      />
+      <circle cx={x2} cy={y2} r="3" fill="var(--accent)" />
+      <style>{`
+        @keyframes designlang-flight {
+          to { stroke-dashoffset: 0; }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          @keyframes designlang-flight { to { stroke-dashoffset: 0; } }
+        }
+      `}</style>
+    </>
+  );
+}

package/website/app/components/token-browser-sample.js

@@ -0,0 +1,65 @@
+// Hand-curated DTCG sample shaped exactly like formatDtcgTokens() output.
+// Derived from the Stripe PR B smoke run; used as seed data for <TokenBrowser />.
+
+export const sampleTokens = {
+  $metadata: {
+    generator: 'designlang',
+    version: '7.0.0',
+    spec: 'https://design-tokens.github.io/community-group/format/',
+    source: 'https://stripe.com',
+  },
+  primitive: {
+    color: {
+      brand: {
+        primary: { $value: '#533afd', $type: 'color' },
+        secondary: { $value: '#0a2540', $type: 'color' },
+      },
+      neutral: {
+        n100: { $value: '#f6f9fc', $type: 'color' },
+        n500: { $value: '#8792a2', $type: 'color' },
+        n900: { $value: '#0a2540', $type: 'color' },
+      },
+      background: {
+        bg0: { $value: '#ffffff', $type: 'color' },
+      },
+    },
+    radius: {
+      r0: { $value: '4px', $type: 'dimension' },
+      r1: { $value: '8px', $type: 'dimension' },
+    },
+    spacing: {
+      s2: { $value: '8px', $type: 'dimension' },
+      s4: { $value: '16px', $type: 'dimension' },
+    },
+  },
+  semantic: {
+    color: {
+      action: {
+        primary: { $value: '{primitive.color.brand.primary}', $type: 'color' },
+      },
+      surface: {
+        default: { $value: '{primitive.color.background.bg0}', $type: 'color' },
+      },
+      text: {
+        body: { $value: '{primitive.color.neutral.n900}', $type: 'color' },
+      },
+    },
+    radius: {
+      control: { $value: '{primitive.radius.r1}', $type: 'dimension' },
+    },
+    typography: {
+      body: {
+        $value: {
+          fontFamily: 'sohne-var, Helvetica Neue, Arial, sans-serif',
+          fontSize: '16px',
+          fontWeight: '400',
+          lineHeight: '1.5',
+        },
+        $type: 'typography',
+      },
+    },
+  },
+};
+
+// The CLI invocation that produced the sample.
+export const sampleCommand = '$ npx designlang https://stripe.com --format dtcg';