designlang 6.0.0 → 7.1.0

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

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