designlang 7.0.0 → 7.1.0

package/website/app/components/RegionsComponents.js

@@ -0,0 +1,429 @@
+'use client';
+
+// §06 Regions + components.
+// Two sub-blocks:
+//   a. Region classifier — schematic page + legend of 9 roles
+//   b. Component clusters — an "unfold" list of 4 button variants
+
+import { useEffect, useRef, useState } from 'react';
+import Rule from './Rule';
+import Marginalia from './Marginalia';
+
+// Schematic regions — shape matches semantic-regions.js output
+// { role, selector, bbox: { x, y, w, h }, signals: [...] }
+const REGIONS = [
+  { role: 'nav', x: 0, y: 0, w: 640, h: 48 },
+  { role: 'hero', x: 0, y: 48, w: 640, h: 140 },
+  { role: 'features', x: 0, y: 188, w: 640, h: 84 },
+  { role: 'pricing', x: 0, y: 272, w: 640, h: 70 },
+  { role: 'testimonials', x: 0, y: 342, w: 640, h: 42 },
+  { role: 'footer', x: 0, y: 384, w: 640, h: 36 },
+];
+
+const ROLES = [
+  { role: 'nav', desc: 'top-anchored navigation', signal: 'landmark + top-anchored + link density > 0.5' },
+  { role: 'hero', desc: 'primary above-the-fold statement', signal: 'large type + early viewport + CTA' },
+  { role: 'features', desc: 'grid of benefit/feature cells', signal: '3+ siblings, similar structural hash' },
+  { role: 'pricing', desc: 'price tiers and plans', signal: 'currency symbol + repeated card shape' },
+  { role: 'testimonials', desc: 'social proof / quotes', signal: 'blockquote or quote glyph + attribution' },
+  { role: 'cta', desc: 'standalone conversion band', signal: 'single button + heading, full-width container' },
+  { role: 'footer', desc: 'bottom landmark', signal: 'landmark + bottom-anchored + link density high' },
+  { role: 'sidebar', desc: 'lateral aside content', signal: 'landmark=complementary or aside element' },
+  { role: 'content', desc: 'prose / article body', signal: 'main landmark, paragraph density, reading width' },
+];
+
+// Cluster — shape matches component-clusters.js output
+const BUTTON_CLUSTER = {
+  kind: 'button',
+  instanceCount: 24,
+  variants: [
+    {
+      name: 'primary',
+      css: {
+        background: 'var(--accent)',
+        color: 'var(--paper)',
+        border: '1px solid var(--accent)',
+        padding: '10px 18px',
+      },
+      instanceCount: 14,
+    },
+    {
+      name: 'secondary',
+      css: {
+        background: 'transparent',
+        color: 'var(--ink)',
+        border: '1px solid var(--ink)',
+        padding: '10px 18px',
+      },
+      instanceCount: 6,
+    },
+    {
+      name: 'ghost',
+      css: {
+        background: 'transparent',
+        color: 'var(--ink)',
+        border: '1px solid transparent',
+        padding: '10px 18px',
+        textDecoration: 'underline',
+        textUnderlineOffset: 3,
+      },
+      instanceCount: 3,
+    },
+    {
+      name: 'disabled',
+      css: {
+        background: 'var(--paper-2)',
+        color: 'var(--ink-3)',
+        border: '1px solid var(--ink-3)',
+        padding: '10px 18px',
+      },
+      instanceCount: 1,
+    },
+  ],
+};
+
+export default function RegionsComponents() {
+  return (
+    <>
+      <Rule number="06" label="Regions and components" />
+      <div className="with-margin" style={{ marginTop: 'var(--r5)' }}>
+        <div>
+          <div className="eyebrow" style={{ marginBottom: 'var(--r3)' }}>§06 Regions + components</div>
+          <h2 className="display" style={{ marginBottom: 'var(--r4)' }}>
+            Structure, not just style.
+          </h2>
+          <p className="prose" style={{ fontSize: 18, maxWidth: '62ch', color: 'var(--ink-2)' }}>
+            designlang labels the page before measuring it. Nav, hero, pricing, footer — nine
+            roles; landmarks first, heuristics second. Components are clustered by DOM signature
+            and style vector, not by guessing at class names.
+          </p>
+
+          <RegionOverlay />
+
+          <div
+            style={{
+              borderTop: '1px solid var(--ink)',
+              marginTop: 'var(--r8)',
+              paddingTop: 'var(--r6)',
+            }}
+          />
+
+          <ComponentClusters />
+        </div>
+
+        <Marginalia>
+          <div>MCP companion</div>
+          <p style={{ marginTop: 6 }}>
+            Regions and components live alongside the tokens, in the MCP companion JSON and the
+            DTCG <code>$extensions</code> field.
+          </p>
+          <hr style={{ margin: '12px 0', border: 0, borderTop: '1px solid var(--ink-3)' }} />
+          <p className="foot">
+            Agents can query <code>get_region</code> and <code>get_component</code> over MCP to
+            regenerate a section in matching style.
+          </p>
+        </Marginalia>
+      </div>
+    </>
+  );
+}
+
+// ── Sub-block A — Region classifier ────────────────────────────
+function RegionOverlay() {
+  const [hovered, setHovered] = useState(null);
+
+  return (
+    <div style={{ marginTop: 'var(--r7)' }}>
+      <div
+        className="mono"
+        style={{
+          fontSize: 11,
+          letterSpacing: '0.14em',
+          textTransform: 'uppercase',
+          color: 'var(--ink-2)',
+          marginBottom: 'var(--r3)',
+        }}
+      >
+        §06.a Region classifier
+      </div>
+
+      <div className="grid-12" style={{ alignItems: 'start' }}>
+        {/* Schematic page — span 7 */}
+        <div style={{ gridColumn: 'span 7' }}>
+          <div
+            style={{
+              position: 'relative',
+              width: '100%',
+              aspectRatio: '640 / 420',
+              background: 'var(--paper-2)',
+              border: '1px solid var(--ink)',
+            }}
+          >
+            <svg
+              viewBox="0 0 640 420"
+              preserveAspectRatio="none"
+              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
+              role="img"
+              aria-label="Schematic page with six classified regions"
+            >
+              {REGIONS.map((r) => {
+                const active = hovered === r.role;
+                return (
+                  <g
+                    key={r.role}
+                    onMouseEnter={() => setHovered(r.role)}
+                    onMouseLeave={() => setHovered(null)}
+                    style={{ cursor: 'pointer' }}
+                  >
+                    <rect
+                      x={r.x + 4}
+                      y={r.y + 4}
+                      width={r.w - 8}
+                      height={r.h - 8}
+                      fill={active ? 'var(--paper)' : 'transparent'}
+                      stroke="var(--ink)"
+                      strokeWidth="1"
+                    />
+                    <rect
+                      x={r.x + 10}
+                      y={r.y + 10}
+                      width={r.role.length * 7 + 10}
+                      height={16}
+                      fill="var(--paper)"
+                      stroke="var(--ink)"
+                      strokeWidth="0.5"
+                    />
+                    <text
+                      x={r.x + 15}
+                      y={r.y + 21}
+                      fontFamily="var(--font-mono)"
+                      fontSize="10"
+                      fill={active ? 'var(--accent)' : 'var(--ink)'}
+                      letterSpacing="0.06em"
+                    >
+                      {r.role}
+                    </text>
+                  </g>
+                );
+              })}
+            </svg>
+          </div>
+          <div
+            className="mono"
+            style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 'var(--r3)' }}
+          >
+            hover a region to match its role in the legend →
+          </div>
+        </div>
+
+        {/* Legend — span 5 */}
+        <div style={{ gridColumn: 'span 5' }}>
+          <div
+            className="mono"
+            style={{
+              fontSize: 10,
+              letterSpacing: '0.14em',
+              textTransform: 'uppercase',
+              color: 'var(--ink-3)',
+              marginBottom: 'var(--r3)',
+              display: 'grid',
+              gridTemplateColumns: '100px 1fr',
+              gap: 12,
+            }}
+          >
+            <span>role</span>
+            <span>signal</span>
+          </div>
+          <ul style={{ listStyle: 'none', padding: 0, margin: 0, borderTop: '1px solid var(--ink)' }}>
+            {ROLES.map((r) => {
+              const active = hovered === r.role;
+              return (
+                <li
+                  key={r.role}
+                  onMouseEnter={() => setHovered(r.role)}
+                  onMouseLeave={() => setHovered(null)}
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: '100px 1fr',
+                    gap: 12,
+                    padding: '8px 0',
+                    borderBottom: '1px solid var(--ink-3)',
+                    alignItems: 'baseline',
+                  }}
+                >
+                  <span
+                    className="mono"
+                    style={{
+                      fontSize: 12,
+                      color: active ? 'var(--ink)' : 'var(--ink-2)',
+                      textDecoration: active ? 'underline' : 'none',
+                      textDecorationColor: 'var(--accent)',
+                      textUnderlineOffset: 3,
+                      textDecorationThickness: 2,
+                    }}
+                  >
+                    {r.role}
+                  </span>
+                  <span style={{ fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.45 }}>
+                    <span style={{ color: 'var(--ink)' }}>{r.desc}.</span>{' '}
+                    <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>
+                      {r.signal}
+                    </span>
+                  </span>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Sub-block B — Component clusters ───────────────────────────
+function ComponentClusters() {
+  const ref = useRef(null);
+  const [visible, setVisible] = useState(false);
+  const [reduced, setReduced] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setReduced(mq.matches);
+  }, []);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    const el = ref.current;
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setVisible(true);
+            io.disconnect();
+          }
+        }
+      },
+      { threshold: 0.25 }
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, []);
+
+  return (
+    <div>
+      <div
+        className="mono"
+        style={{
+          fontSize: 11,
+          letterSpacing: '0.14em',
+          textTransform: 'uppercase',
+          color: 'var(--ink-2)',
+          marginBottom: 'var(--r3)',
+        }}
+      >
+        §06.b Component clusters
+      </div>
+      <div
+        className="mono"
+        style={{
+          fontSize: 12,
+          color: 'var(--ink)',
+          marginBottom: 'var(--r4)',
+          paddingBottom: 'var(--r3)',
+          borderBottom: '1px solid var(--ink)',
+        }}
+      >
+        button — {BUTTON_CLUSTER.instanceCount} instances, {BUTTON_CLUSTER.variants.length}{' '}
+        variants ({BUTTON_CLUSTER.variants.map((v) => v.name).join(', ')})
+      </div>
+
+      <div
+        ref={ref}
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(4, 1fr)',
+          gap: 'var(--r4)',
+        }}
+      >
+        {BUTTON_CLUSTER.variants.map((v, i) => {
+          const shown = reduced || visible;
+          return (
+            <div
+              key={v.name}
+              style={{
+                border: '1px solid var(--ink)',
+                padding: 'var(--r4)',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 'var(--r3)',
+                background: 'var(--paper)',
+                opacity: shown ? 1 : 0,
+                transform: shown ? 'translateX(0)' : 'translateX(-12px)',
+                transition: reduced
+                  ? 'none'
+                  : `opacity 200ms ease ${i * 80}ms, transform 200ms ease ${i * 80}ms`,
+              }}
+            >
+              <div
+                className="mono"
+                style={{
+                  fontSize: 10,
+                  letterSpacing: '0.14em',
+                  textTransform: 'uppercase',
+                  color: 'var(--ink-3)',
+                }}
+              >
+                {v.name} · {v.instanceCount}
+              </div>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  minHeight: 92,
+                  background: 'var(--paper-2)',
+                  border: '1px solid var(--ink-3)',
+                }}
+              >
+                <span
+                  className="mono"
+                  style={{
+                    ...v.css,
+                    fontSize: 13,
+                    letterSpacing: '0.04em',
+                    textTransform: 'uppercase',
+                    display: 'inline-block',
+                  }}
+                >
+                  Continue
+                </span>
+              </div>
+              <pre
+                className="mono"
+                style={{
+                  fontSize: 10,
+                  color: 'var(--ink-2)',
+                  lineHeight: 1.5,
+                  whiteSpace: 'pre-wrap',
+                  margin: 0,
+                }}
+              >
+{formatCss(v.css)}
+              </pre>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function formatCss(css) {
+  return Object.entries(css)
+    .map(([k, v]) => `${kebab(k)}: ${v};`)
+    .join('\n');
+}
+function kebab(s) {
+  return s.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
+}

package/website/app/components/Rule.js

@@ -0,0 +1,13 @@
+export default function Rule({ number, label }) {
+  return (
+    <div className="rule" role="separator" aria-label={label}>
+      <div className="rule-line" />
+      {(number || label) && (
+        <div className="rule-label">
+          {number && <span className="rule-number">§{number}</span>}
+          {label}
+        </div>
+      )}
+    </div>
+  );
+}

package/website/app/components/Specimens.js

@@ -0,0 +1,237 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import specimens from '../../lib/specimens.json';
+import Marginalia from './Marginalia';
+
+// Quick relative-luminance check used to guard against accents that would fail
+// 3:1 on paper. If they do, we fall back to ink.
+function contrastsOnPaper(hex) {
+  const paper = [0xf3, 0xf1, 0xea];
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  const lum = (c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  };
+  const l1 = 0.2126 * lum(paper[0]) + 0.7152 * lum(paper[1]) + 0.0722 * lum(paper[2]);
+  const l2 = 0.2126 * lum(r) + 0.7152 * lum(g) + 0.0722 * lum(b);
+  const ratio = (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+  return ratio >= 3;
+}
+
+export default function Specimens() {
+  const stripRef = useRef(null);
+
+  useEffect(() => {
+    const el = stripRef.current;
+    if (!el) return;
+
+    const cards = Array.from(el.querySelectorAll('[data-specimen]'));
+    const root = document.documentElement;
+    const DEFAULT = '#FF4800';
+
+    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    root.style.setProperty('--accent-transition', reduced ? '0s' : '400ms');
+    // Attach transition for --accent. Since CSS can't transition a custom
+    // property by default we apply it via a style tag scoped to documentElement.
+    const styleEl = document.createElement('style');
+    styleEl.textContent = `html { transition: --accent var(--accent-transition) ease; } @property --accent { syntax: '<color>'; inherits: true; initial-value: #FF4800; }`;
+    document.head.appendChild(styleEl);
+
+    const io = new IntersectionObserver(
+      (entries) => {
+        const visible = entries.filter((e) => e.isIntersecting);
+        if (visible.length === 0) {
+          root.style.setProperty('--accent', DEFAULT);
+          return;
+        }
+        // Pick the one with the greatest visibility ratio.
+        const top = visible.sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
+        const accent = top.target.getAttribute('data-accent') || DEFAULT;
+        const safe = contrastsOnPaper(accent) ? accent : '#0A0908';
+        root.style.setProperty('--accent', safe);
+      },
+      { root: el, threshold: [0.6] }
+    );
+
+    cards.forEach((c) => io.observe(c));
+    return () => {
+      io.disconnect();
+      root.style.setProperty('--accent', DEFAULT);
+      styleEl.remove();
+    };
+  }, []);
+
+  return (
+    <div>
+      <div className="with-margin" style={{ marginTop: 'var(--r5)', marginBottom: 'var(--r7)' }}>
+        <div>
+          <div className="section-label" style={{ marginBottom: 'var(--r5)' }}>
+            <span>§07 — Specimens</span>
+          </div>
+          <h2 className="display" style={{ marginBottom: 'var(--r5)' }}>
+            Six design systems,<br />
+            <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>one format.</em>
+          </h2>
+          <p className="prose" style={{ fontSize: 18, lineHeight: 1.5, maxWidth: '62ch' }}>
+            Each specimen was crawled once and written to DTCG. The page accent below is
+            pulled from the specimen&apos;s own extracted primary — the same{' '}
+            <code className="mono" style={{ fontSize: 14 }}>semantic.color.action.primary</code>{' '}
+            your agent would get over MCP.
+          </p>
+        </div>
+        <Marginalia>
+          <div>accessibility</div>
+          <p className="foot" style={{ marginTop: 6 }}>
+            The live <code>--accent</code> is tested for ≥3:1 contrast with paper on scroll.
+            Specimens that fall below fall back to ink.
+          </p>
+          <hr style={{ margin: '12px 0', border: 0, borderTop: '1px solid var(--ink-3)' }} />
+          <p className="foot">
+            Specimens are point-in-time snapshots, re-rendered from on-disk DTCG files.
+            To update, re-run <code>designlang &lt;url&gt; --platforms web</code> and
+            replace the specimen entry.
+          </p>
+        </Marginalia>
+      </div>
+
+      <div
+        ref={stripRef}
+        className="specimen-strip"
+        style={{
+          display: 'flex',
+          gap: 'var(--r5)',
+          overflowX: 'auto',
+          overflowY: 'hidden',
+          scrollSnapType: 'x mandatory',
+          paddingBottom: 'var(--r5)',
+          paddingInline: 'var(--page-pad-x)',
+          marginInline: 'calc(-1 * var(--page-pad-x))',
+          scrollbarWidth: 'thin',
+        }}
+      >
+        {specimens.map((s) => (
+          <SpecimenCard key={s.host} s={s} />
+        ))}
+      </div>
+
+      <style jsx>{`
+        .specimen-strip > :global([data-specimen]) {
+          flex: 0 0 640px;
+          height: 400px;
+          scroll-snap-align: start;
+          border: 1px solid var(--ink);
+          background: var(--paper-2);
+          padding: var(--r5);
+          display: grid;
+          grid-template-rows: auto auto 1fr auto auto;
+          gap: var(--r4);
+        }
+        @media (max-width: 860px) {
+          .specimen-strip {
+            flex-direction: column;
+            overflow-x: hidden;
+            scroll-snap-type: none;
+          }
+          .specimen-strip > :global([data-specimen]) {
+            flex: 0 0 auto;
+            width: 100%;
+            height: auto;
+            min-height: 420px;
+          }
+        }
+      `}</style>
+    </div>
+  );
+}
+
+function SpecimenCard({ s }) {
+  return (
+    <article data-specimen data-accent={s.accent} aria-label={`${s.display} specimen`}>
+      <header style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
+        <span className="chip mono">{s.host}</span>
+        <span className="chip mono">{s.year}</span>
+        <span className="chip mono">{s.framework}</span>
+      </header>
+
+      <div style={{ display: 'flex', gap: 0 }}>
+        {s.palette.map((hex) => (
+          <div key={hex} style={{ flex: '0 0 auto', marginRight: 8 }}>
+            <div
+              aria-hidden="true"
+              style={{
+                width: 40,
+                height: 40,
+                background: hex,
+                border: '1px solid var(--ink)',
+              }}
+            />
+            <div
+              className="mono"
+              style={{ fontSize: 10, marginTop: 4, color: 'var(--ink-2)', letterSpacing: '0.02em' }}
+            >
+              {hex.toUpperCase()}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div
+        className="display"
+        style={{
+          fontSize: 64,
+          lineHeight: 1,
+          letterSpacing: '-0.02em',
+          color: 'var(--ink)',
+          alignSelf: 'center',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+        }}
+      >
+        <span style={{ color: s.accent }}>{s.display}.</span>{' '}
+        <span style={{ color: 'var(--ink-2)' }}>Design as a system.</span>
+      </div>
+
+      <div style={{ display: 'flex', gap: 'var(--r6)' }}>
+        <Metric label="a11y" value={s.a11y} />
+        <Metric label="score" value={s.designScore} />
+        <Metric label="radius" value={s.radius} />
+      </div>
+
+      <footer
+        style={{
+          fontFamily: 'var(--font-display)',
+          fontStyle: 'italic',
+          color: 'var(--ink-2)',
+          fontSize: 14,
+          borderTop: '1px solid var(--ink-3)',
+          paddingTop: 10,
+        }}
+      >
+        {s.note}
+      </footer>
+    </article>
+  );
+}
+
+function Metric({ label, value }) {
+  return (
+    <div>
+      <div
+        className="display"
+        style={{ fontSize: 40, lineHeight: 1, letterSpacing: '-0.02em' }}
+      >
+        {value}
+      </div>
+      <div
+        className="mono"
+        style={{ fontSize: 10, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.12em', marginTop: 4 }}
+      >
+        {label}
+      </div>
+    </div>
+  );
+}