designlang 8.0.0 → 10.0.0

package/src/extractors/page-intent.js

@@ -0,0 +1,172 @@
+// Classify a crawled URL into a canonical page type. Heuristic-only by default
+// (zero deps, deterministic). Returns { type, confidence, signals, alternates }.
+// Consumers can fall back to the optional --smart LLM pass when confidence is low.
+
+const TYPES = [
+  'landing', 'pricing', 'docs', 'blog', 'blog-post',
+  'product', 'about', 'dashboard', 'auth', 'legal', 'unknown',
+];
+
+const URL_RULES = [
+  { re: /\/pricing(\/|$)/i, type: 'pricing', weight: 0.9 },
+  { re: /\/plans?(\/|$)/i, type: 'pricing', weight: 0.75 },
+  { re: /\/docs?(\/|$)|\/documentation|\/guide/i, type: 'docs', weight: 0.9 },
+  { re: /\/api-reference|\/reference(\/|$)/i, type: 'docs', weight: 0.85 },
+  { re: /\/blog(\/[\w-]+)+/i, type: 'blog-post', weight: 0.9 },
+  { re: /\/blog(\/|$)/i, type: 'blog', weight: 0.85 },
+  { re: /\/changelog(\/|$)/i, type: 'blog', weight: 0.6 },
+  { re: /\/about(\/|$)|\/company|\/team/i, type: 'about', weight: 0.85 },
+  { re: /\/product(\/|$)|\/products\//i, type: 'product', weight: 0.75 },
+  { re: /\/features?(\/|$)|\/solutions?(\/|$)/i, type: 'product', weight: 0.7 },
+  { re: /\/login|\/signin|\/sign-in|\/signup|\/sign-up|\/register/i, type: 'auth', weight: 0.95 },
+  { re: /\/terms|\/privacy|\/legal|\/cookie-policy/i, type: 'legal', weight: 0.95 },
+  { re: /\/app(\/|$)|\/dashboard|\/console|\/admin/i, type: 'dashboard', weight: 0.8 },
+];
+
+const PRICING_TEXT = /(\$\s?\d|€\s?\d|£\s?\d|₹\s?\d)|\b(per\s?(month|user|seat)|\/mo\b|\/month|\/year|\/yr|billed (annually|monthly)|free (forever|plan|tier)|start (free|trial))\b/i;
+const DOCS_TEXT = /\b(installation|getting started|api reference|parameters|return value|npm install|yarn add|pnpm add|`npx |import \{|quickstart)\b/i;
+const BLOG_POST_TEXT = /\b(by\s+[A-Z][a-z]+\s+[A-Z][a-z]+|posted on|published (on|in)|min read|\d+\s+min read)\b/i;
+const LEGAL_TEXT = /\b(privacy policy|terms of service|terms of use|cookie policy|data protection|gdpr|ccpa|effective date|last updated)\b/i;
+const AUTH_TEXT = /\b(sign in|log in|create (an )?account|forgot password|email address|password)\b/i;
+
+function rootPath(url) {
+  try {
+    const u = new URL(url);
+    return (u.pathname || '/').replace(/\/+$/, '') || '/';
+  } catch { return '/'; }
+}
+
+function countFormFields(sections) {
+  // sections text doesn't include input tags, so we approximate via headings + text.
+  return sections.reduce((n, s) => n + (s.buttonCount || 0), 0);
+}
+
+function detectDocsLayout(sections) {
+  // Docs pages often have a sidebar nav + long-form article.
+  const hasSidebar = sections.some(s =>
+    (s.tag === 'aside') || /sidebar|toc|nav-?docs|left-?nav/i.test(s.className || '')
+  );
+  const longArticle = sections.find(s => s.tag === 'main' || s.tag === 'section');
+  const articleLen = longArticle ? (longArticle.text || '').length : 0;
+  return { hasSidebar, articleLen };
+}
+
+function detectPricingLayout(sections) {
+  // 2-4 similarly-sized cards with currency signals = pricing table.
+  for (const s of sections) {
+    if (!PRICING_TEXT.test(s.text || '')) continue;
+    if ((s.cardCount || 0) >= 2 && (s.cardCount || 0) <= 6) return true;
+  }
+  return false;
+}
+
+export function extractPageIntent(rawData = {}, opts = {}) {
+  const url = opts.url || rawData.url || '';
+  const path = rootPath(url);
+  const title = (opts.title || rawData.title || '').toLowerCase();
+  const sections = (rawData.light && rawData.light.sections) || rawData.sections || [];
+  const metas = ((rawData.light && rawData.light.stack && rawData.light.stack.metas) || []).map(m => ({
+    name: (m.name || '').toLowerCase(),
+    content: (m.content || ''),
+  }));
+  const description = (metas.find(m => m.name === 'description') || {}).content || '';
+  const ogType = (metas.find(m => m.name === 'og:type') || {}).content || '';
+
+  const scores = Object.fromEntries(TYPES.map(t => [t, 0]));
+  const signals = [];
+
+  // 1) URL rules (strongest signal).
+  for (const rule of URL_RULES) {
+    if (rule.re.test(path)) {
+      scores[rule.type] += rule.weight;
+      signals.push({ kind: 'url', type: rule.type, weight: rule.weight });
+    }
+  }
+
+  // 2) og:type.
+  if (ogType === 'article') {
+    scores['blog-post'] += 0.6;
+    signals.push({ kind: 'meta', type: 'blog-post', weight: 0.6, detail: 'og:type=article' });
+  }
+
+  // 3) Title keywords.
+  if (/\bpricing\b|\bplans?\b/.test(title)) { scores.pricing += 0.4; signals.push({ kind: 'title', type: 'pricing', weight: 0.4 }); }
+  if (/\bdocs?\b|documentation|guide/.test(title)) { scores.docs += 0.4; signals.push({ kind: 'title', type: 'docs', weight: 0.4 }); }
+  if (/\bblog\b/.test(title)) { scores.blog += 0.3; signals.push({ kind: 'title', type: 'blog', weight: 0.3 }); }
+  if (/\bprivacy|\bterms\b/.test(title)) { scores.legal += 0.5; signals.push({ kind: 'title', type: 'legal', weight: 0.5 }); }
+  if (/\bsign.?in|\blog.?in|\bsign.?up\b/.test(title)) { scores.auth += 0.5; signals.push({ kind: 'title', type: 'auth', weight: 0.5 }); }
+
+  // 4) DOM text signals.
+  const bigText = sections.map(s => s.text || '').join('\n').slice(0, 8000);
+  if (PRICING_TEXT.test(bigText) && detectPricingLayout(sections)) {
+    scores.pricing += 0.6;
+    signals.push({ kind: 'dom', type: 'pricing', weight: 0.6, detail: 'currency+card-grid' });
+  }
+  if (DOCS_TEXT.test(bigText)) {
+    const { hasSidebar, articleLen } = detectDocsLayout(sections);
+    const w = 0.3 + (hasSidebar ? 0.25 : 0) + (articleLen > 1500 ? 0.15 : 0);
+    scores.docs += w;
+    signals.push({ kind: 'dom', type: 'docs', weight: w, detail: `sidebar=${hasSidebar} article=${articleLen}` });
+  }
+  if (BLOG_POST_TEXT.test(bigText)) {
+    scores['blog-post'] += 0.35;
+    signals.push({ kind: 'dom', type: 'blog-post', weight: 0.35, detail: 'byline|min-read' });
+  }
+  if (LEGAL_TEXT.test(bigText)) {
+    scores.legal += 0.4;
+    signals.push({ kind: 'dom', type: 'legal', weight: 0.4 });
+  }
+  if (AUTH_TEXT.test(bigText) && countFormFields(sections) < 8 && bigText.length < 3000) {
+    scores.auth += 0.35;
+    signals.push({ kind: 'dom', type: 'auth', weight: 0.35, detail: 'auth-form-shape' });
+  }
+
+  // 5) Path="/" fallback → landing (weak prior).
+  if (path === '/' || path === '') {
+    scores.landing += 0.45;
+    signals.push({ kind: 'url', type: 'landing', weight: 0.45, detail: 'root-path' });
+  }
+
+  // 6) Generic "has hero + features + cta" shape → landing.
+  const roles = new Set();
+  for (const s of sections) {
+    const blob = `${s.className || ''} ${s.id || ''}`.toLowerCase();
+    if (/hero/.test(blob)) roles.add('hero');
+    if ((s.cardCount || 0) >= 3) roles.add('features');
+    if (/cta|get-?started/.test(blob)) roles.add('cta');
+    if (s.tag === 'footer') roles.add('footer');
+  }
+  if (roles.has('hero') && (roles.has('features') || roles.has('cta'))) {
+    scores.landing += 0.3;
+    signals.push({ kind: 'shape', type: 'landing', weight: 0.3, detail: [...roles].join('+') });
+  }
+
+  // Pick winner.
+  const ranked = Object.entries(scores).sort((a, b) => b[1] - a[1]);
+  const [winType, winScore] = ranked[0];
+  const [, secondScore] = ranked[1] || ['unknown', 0];
+  const margin = winScore - secondScore;
+  let confidence = 0;
+  if (winScore > 0) {
+    confidence = Math.min(1, winScore * 0.6 + margin * 0.4);
+  }
+  const type = winScore === 0 ? 'unknown' : winType;
+
+  const alternates = ranked
+    .filter(([, s]) => s > 0 && s !== winScore)
+    .slice(0, 3)
+    .map(([t, s]) => ({ type: t, score: Number(s.toFixed(3)) }));
+
+  return {
+    type,
+    confidence: Number(confidence.toFixed(3)),
+    path,
+    title: opts.title || rawData.title || '',
+    description: description.slice(0, 200),
+    signals: signals.slice(0, 20),
+    alternates,
+    needsSmart: confidence < 0.6,
+  };
+}
+
+export const PAGE_TYPES = TYPES;

package/src/extractors/section-roles.js

@@ -0,0 +1,135 @@
+// Attach richer semantic roles to the sections that semantic-regions.js already
+// found. v9 labels were coarse (hero/features/pricing/testimonials/cta/footer/nav);
+// v10 adds logo-wall, stats, faq, comparison, steps, gallery, bento, blog-grid.
+// Input: enriched sections (from crawler) + existing `regions` array. Output: a
+// parallel array with { role, subrole, confidence, slots }.
+
+const CTA_RE = /\b(get started|sign ?up|try (free|it|now)|start (free|trial|now)|book a demo|request demo|contact sales|talk to sales|learn more|watch demo)\b/i;
+const STATS_RE = /\b(\d[\d,.]*[+%]|\d+x\b|\$\d+[MBK]\b)/i;
+const FAQ_RE = /\b(frequently asked|faq|common questions|questions & answers)\b/i;
+const STEPS_RE = /\b(step\s?\d|how it works|\d\s*\.\s+[A-Z])/i;
+const COMPARE_RE = /\b(vs\.?|compared to|free vs|basic vs|enterprise vs)\b/i;
+const TESTIMONIAL_RE = /(".{20,}"|".{20,}"|—\s?[A-Z][a-z]+\s+[A-Z][a-z]+|ceo|founder|head of)/i;
+const PRICING_RE = /(\$\s?\d|€\s?\d|£\s?\d|per\s?(month|user|seat)|\/mo\b|\/month|billed)/i;
+
+function blob(s) {
+  return `${s.className || ''} ${s.id || ''}`.toLowerCase();
+}
+
+function detectLogoWall(s) {
+  // Logo walls: many small images in one row, minimal text.
+  // The enriched sections don't carry image counts directly — we proxy via
+  // cardCount with very short text.
+  if ((s.cardCount || 0) >= 5 && (s.text || '').length < 300 &&
+      /(trusted by|used by|customers|as seen in|logos?|partners|clients)/i.test(s.text || '' + ' ' + blob(s))) {
+    return true;
+  }
+  return false;
+}
+
+function detectBento(s) {
+  const b = blob(s);
+  if (/bento/.test(b)) return true;
+  // Bento hint: 4-8 cards with irregular sizes — we can't measure layout grid
+  // here, so fall back to class name + cardCount heuristic.
+  return false;
+}
+
+function classifyRole(s, existingRole, pageType) {
+  const text = (s.text || '').slice(0, 2000);
+  const b = blob(s);
+  const headings = s.headings || [];
+  const h1 = (headings[0] || '').toLowerCase();
+
+  // Landmarks come first.
+  if (s.tag === 'footer') return { role: 'footer', confidence: 0.95 };
+  if (s.tag === 'nav' || /^nav|header-nav|top-?bar/.test(b)) return { role: 'nav', confidence: 0.9 };
+
+  // Strong class-based hints.
+  if (/logo-?(wall|cloud|grid|strip)|trusted-?by/.test(b) || detectLogoWall(s)) {
+    return { role: 'logo-wall', confidence: 0.85 };
+  }
+  if (/bento/.test(b) || detectBento(s)) return { role: 'bento', subrole: 'features', confidence: 0.75 };
+  if (/gallery|carousel|slider/.test(b)) return { role: 'gallery', confidence: 0.7 };
+  if (/stat(s|istic)|metric|number/.test(b) && STATS_RE.test(text)) return { role: 'stats', confidence: 0.85 };
+  if (FAQ_RE.test(text) || /\bfaq\b/.test(b)) return { role: 'faq', confidence: 0.85 };
+  if (STEPS_RE.test(text) && (s.cardCount || 0) >= 3) return { role: 'steps', confidence: 0.75 };
+  if (COMPARE_RE.test(text) && (s.cardCount || 0) >= 2) return { role: 'comparison', confidence: 0.7 };
+  if (PRICING_RE.test(text) && (s.cardCount || 0) >= 2) return { role: 'pricing-table', confidence: 0.9 };
+
+  // Testimonials vs hero vs features — existing classifier handled most of these;
+  // re-run with tighter signals.
+  if (TESTIMONIAL_RE.test(text) || /testimonial|review|quote/.test(b)) {
+    return { role: 'testimonial', confidence: 0.8 };
+  }
+  if (/hero/.test(b) || (headings.length === 1 && (s.buttonCount || 0) >= 1 && s.bounds && s.bounds.h > 300 && s.bounds.y < 400)) {
+    return { role: 'hero', confidence: 0.85 };
+  }
+  if ((s.cardCount || 0) >= 3 && (/(feature|benefit|what you get|why )/i.test(text) || /feature|grid/.test(b))) {
+    return { role: 'feature-grid', confidence: 0.8 };
+  }
+  if (CTA_RE.test(text) && (s.buttonCount || 0) >= 1 && text.length < 600) {
+    return { role: 'cta', confidence: 0.75 };
+  }
+  if (pageType === 'blog' && (s.cardCount || 0) >= 3) {
+    return { role: 'blog-grid', confidence: 0.75 };
+  }
+
+  // Fall back to the coarse existing label if we have one.
+  if (existingRole && existingRole !== 'content') {
+    return { role: existingRole, confidence: 0.4 };
+  }
+  return { role: 'content', confidence: 0.3 };
+}
+
+function extractSlots(s) {
+  // Lightweight slot detection from headings + button count. Real DOM-walking
+  // slot extraction happens in component-anatomy.js — here we just record
+  // rendered copy so prompts can quote the actual words.
+  const slots = {};
+  if ((s.headings || []).length) slots.heading = s.headings[0];
+  if ((s.headings || []).length > 1) slots.subheadings = s.headings.slice(1);
+  if (s.buttonCount > 0) slots.ctaCount = s.buttonCount;
+  const text = s.text || '';
+  const firstPara = text.split(/\n{2,}/)[0];
+  if (firstPara && firstPara.length < 400 && firstPara !== slots.heading) {
+    slots.lede = firstPara.trim();
+  }
+  return slots;
+}
+
+export function extractSectionRoles(sections = [], regions = [], pageIntent = null) {
+  const pageType = pageIntent && pageIntent.type;
+  const labeled = sections.map((s, i) => {
+    const existing = regions[i] ? regions[i].role : null;
+    const classified = classifyRole(s, existing, pageType);
+    return {
+      index: i,
+      tag: s.tag,
+      role: classified.role,
+      subrole: classified.subrole || null,
+      confidence: Number((classified.confidence || 0).toFixed(3)),
+      heading: (s.headings && s.headings[0]) || null,
+      bounds: s.bounds,
+      buttonCount: s.buttonCount || 0,
+      cardCount: s.cardCount || 0,
+      slots: extractSlots(s),
+      needsSmart: (classified.confidence || 0) < 0.5,
+    };
+  });
+
+  // Reading-order + emphasis summary.
+  const byRole = {};
+  for (const r of labeled) {
+    byRole[r.role] = (byRole[r.role] || 0) + 1;
+  }
+
+  return {
+    sections: labeled,
+    counts: byRole,
+    readingOrder: labeled
+      .filter(r => r.bounds)
+      .sort((a, b) => (a.bounds?.y || 0) - (b.bounds?.y || 0))
+      .map(r => r.role),
+  };
+}

package/src/extractors/voice.js

@@ -0,0 +1,96 @@
+// Brand voice extraction — microcopy patterns from CTA verbs, headings, and section copy.
+// Feeds LLMs the *tone*, not just the paint.
+
+const IMPERATIVE_VERBS = new Set([
+  'get', 'start', 'try', 'build', 'create', 'ship', 'deploy', 'launch', 'learn', 'read',
+  'buy', 'shop', 'explore', 'discover', 'join', 'sign', 'subscribe', 'book', 'download',
+  'install', 'contact', 'talk', 'request', 'view', 'see', 'watch', 'read', 'meet',
+]);
+
+const FRIENDLY_MARKERS = /\b(we|our|us|you|your|let's|hey|welcome|thanks|love|yay|awesome)\b/i;
+const FORMAL_MARKERS = /\b(enterprise|platform|solution|infrastructure|comprehensive|leverage|empower|facilitate|utilize)\b/i;
+const TECHNICAL_MARKERS = /\b(api|sdk|webhook|latency|throughput|cli|runtime|schema|endpoint|token|typescript|kubernetes)\b/i;
+const PLAYFUL_MARKERS = /[!?]{1,2}$|\b(magic|wow|boom|zap|rocket|sparkle|fire)\b|[✨🚀🔥⚡💫]/i;
+
+function words(str) {
+  return (str || '').toLowerCase().match(/[a-z']+/g) || [];
+}
+
+function firstVerb(text) {
+  const w = words(text);
+  for (const word of w) {
+    if (IMPERATIVE_VERBS.has(word)) return word;
+  }
+  return w[0] || '';
+}
+
+function scoreTone(texts) {
+  const joined = texts.join(' ');
+  return {
+    friendly: (joined.match(FRIENDLY_MARKERS) || []).length,
+    formal: (joined.match(FORMAL_MARKERS) || []).length,
+    technical: (joined.match(TECHNICAL_MARKERS) || []).length,
+    playful: (joined.match(PLAYFUL_MARKERS) || []).length,
+  };
+}
+
+function pickTone(scores) {
+  const entries = Object.entries(scores);
+  const total = entries.reduce((s, [, n]) => s + n, 0);
+  if (total === 0) return 'neutral';
+  const [top] = entries.sort((a, b) => b[1] - a[1]);
+  return top[1] / total > 0.4 ? top[0] : 'neutral';
+}
+
+function topN(arr, n = 10) {
+  const counts = {};
+  for (const v of arr) if (v) counts[v] = (counts[v] || 0) + 1;
+  return Object.entries(counts).sort((a, b) => b[1] - a[1]).slice(0, n).map(([value, count]) => ({ value, count }));
+}
+
+function avgLen(arr) {
+  if (!arr.length) return 0;
+  return Math.round(arr.reduce((s, v) => s + v.length, 0) / arr.length);
+}
+
+export function extractVoice({ componentCandidates = [], sections = [] } = {}) {
+  const buttons = componentCandidates.filter(c => c.kind === 'button' || c.kind === 'link').map(c => c.text).filter(Boolean);
+  const headings = sections.flatMap(s => s.headings || []).filter(Boolean);
+  const sectionTexts = sections.map(s => s.text || '').filter(Boolean);
+
+  const ctaVerbs = buttons.map(firstVerb).filter(Boolean);
+  const buttonPatterns = topN(buttons.map(b => b.toLowerCase().trim()), 15);
+  const ctaTopVerbs = topN(ctaVerbs, 10);
+
+  const tone = pickTone(scoreTone([...buttons, ...headings, ...sectionTexts]));
+  const personPronoun = /\byou\b/i.test(headings.join(' ') + sectionTexts.join(' '))
+    ? (/\bwe\b/i.test(headings.join(' ')) ? 'we→you' : 'you-only')
+    : (/\bwe\b/i.test(headings.join(' ')) ? 'we-only' : 'third-person');
+
+  const headingStyle = (() => {
+    if (!headings.length) return 'unknown';
+    const titleCase = headings.filter(h => /^[A-Z]/.test(h) && /\s[A-Z]/.test(h)).length;
+    const sentenceCase = headings.filter(h => /^[A-Z]/.test(h) && !/\s[A-Z]/.test(h)).length;
+    const allLower = headings.filter(h => h === h.toLowerCase()).length;
+    if (allLower > headings.length / 2) return 'all-lowercase';
+    if (titleCase > sentenceCase) return 'Title Case';
+    return 'Sentence case';
+  })();
+
+  const avgHeadingWords = avgLen(headings.map(h => words(h))) / Math.max(avgLen(headings) || 1, 1) * (avgLen(headings) || 1);
+  const headingLengthClass = avgHeadingWords <= 4 ? 'tight' : avgHeadingWords <= 8 ? 'balanced' : 'verbose';
+
+  return {
+    tone,
+    pronoun: personPronoun,
+    headingStyle,
+    headingLengthClass,
+    ctaVerbs: ctaTopVerbs,
+    buttonPatterns,
+    sampleHeadings: headings.slice(0, 10),
+    stats: {
+      buttons: buttons.length,
+      headings: headings.length,
+    },
+  };
+}

package/src/formatters/markdown.js

@@ -623,6 +623,185 @@ export function formatMarkdown(design) {
     }
   }
 
+  // ── Motion Language (v9) ──
+  if (design.motion && (design.motion.durations?.length || design.motion.keyframes?.length)) {
+    lines.push('## Motion Language');
+    lines.push('');
+    lines.push(`**Feel:** ${design.motion.feel} · **Scroll-linked:** ${design.motion.scrollLinked?.present ? 'yes' : 'no'}`);
+    lines.push('');
+    if (design.motion.durations?.length) {
+      lines.push('### Duration Tokens');
+      lines.push('');
+      lines.push('| name | value | ms |');
+      lines.push('|---|---|---|');
+      for (const d of design.motion.durations) lines.push(`| \`${d.name}\` | \`${d.css}\` | ${d.ms} |`);
+      lines.push('');
+    }
+    if (design.motion.easings?.length) {
+      lines.push('### Easing Families');
+      lines.push('');
+      const byFamily = {};
+      for (const e of design.motion.easings) (byFamily[e.family] ||= []).push(e);
+      for (const [family, list] of Object.entries(byFamily)) {
+        lines.push(`- **${family}** (${list.reduce((s, e) => s + (e.count || 0), 0)} uses) — \`${list.map(e => e.raw).slice(0, 3).join('`, `')}\``);
+      }
+      lines.push('');
+    }
+    if (design.motion.springs?.length) {
+      lines.push('### Spring / Overshoot Easings');
+      lines.push('');
+      for (const s of design.motion.springs) lines.push(`- \`${s.raw}\``);
+      lines.push('');
+    }
+    const usedKf = (design.motion.keyframes || []).filter(k => k.used);
+    if (usedKf.length) {
+      lines.push('### Keyframes In Use');
+      lines.push('');
+      lines.push('| name | kind | properties | uses |');
+      lines.push('|---|---|---|---|');
+      for (const k of usedKf.slice(0, 20)) lines.push(`| \`${k.name}\` | ${k.kind} | ${k.propertiesAnimated.slice(0, 4).join(', ')} | ${k.usageCount} |`);
+      lines.push('');
+    }
+  }
+
+  // ── Component Anatomy (v9) ──
+  if ((design.componentAnatomy || []).length) {
+    lines.push('## Component Anatomy');
+    lines.push('');
+    for (const a of design.componentAnatomy.slice(0, 6)) {
+      lines.push(`### ${a.kind} — ${a.totalInstances} instance${a.totalInstances === 1 ? '' : 's'}`);
+      lines.push('');
+      const slots = Object.entries(a.slots).filter(([, v]) => v).map(([k]) => k);
+      if (slots.length) lines.push(`**Slots:** ${slots.join(', ')}`);
+      if (a.props.variant.length) lines.push(`**Variants:** ${a.props.variant.join(' · ')}`);
+      if (a.props.size.length) lines.push(`**Sizes:** ${a.props.size.join(' · ')}`);
+      lines.push('');
+      if (a.variants.length > 1) {
+        lines.push('| variant | count | sample label |');
+        lines.push('|---|---|---|');
+        for (const v of a.variants.slice(0, 8)) lines.push(`| ${v.name} | ${v.count} | ${(v.sampleText[0] || '').slice(0, 40)} |`);
+        lines.push('');
+      }
+    }
+  }
+
+  // ── Brand Voice (v9) ──
+  if (design.voice && (design.voice.ctaVerbs?.length || design.voice.sampleHeadings?.length)) {
+    lines.push('## Brand Voice');
+    lines.push('');
+    lines.push(`**Tone:** ${design.voice.tone} · **Pronoun:** ${design.voice.pronoun} · **Headings:** ${design.voice.headingStyle} (${design.voice.headingLengthClass})`);
+    lines.push('');
+    if (design.voice.ctaVerbs?.length) {
+      lines.push('### Top CTA Verbs');
+      lines.push('');
+      for (const v of design.voice.ctaVerbs.slice(0, 8)) lines.push(`- **${v.value}** (${v.count})`);
+      lines.push('');
+    }
+    if (design.voice.buttonPatterns?.length) {
+      lines.push('### Button Copy Patterns');
+      lines.push('');
+      for (const p of design.voice.buttonPatterns.slice(0, 10)) lines.push(`- "${p.value}" (${p.count}×)`);
+      lines.push('');
+    }
+    if (design.voice.sampleHeadings?.length) {
+      lines.push('### Sample Headings');
+      lines.push('');
+      for (const h of design.voice.sampleHeadings) lines.push(`> ${h}`);
+      lines.push('');
+    }
+  }
+
+  // ── v10: Page Intent ──
+  if (design.pageIntent && design.pageIntent.type) {
+    lines.push('## Page Intent');
+    lines.push('');
+    lines.push(`**Type:** \`${design.pageIntent.type}\` (confidence ${design.pageIntent.confidence})`);
+    if (design.pageIntent.description) lines.push(`**Description:** ${design.pageIntent.description}`);
+    if (design.pageIntent.alternates?.length) {
+      lines.push('');
+      lines.push('Alternates: ' + design.pageIntent.alternates.map(a => `${a.type} (${a.score})`).join(', '));
+    }
+    lines.push('');
+  }
+
+  // ── v10: Section Roles ──
+  if (design.sectionRoles && design.sectionRoles.sections?.length) {
+    lines.push('## Section Roles');
+    lines.push('');
+    lines.push('Reading order (top→bottom): ' + (design.sectionRoles.readingOrder || []).join(' → '));
+    lines.push('');
+    lines.push('| # | Role | Heading | Confidence |');
+    lines.push('|---|------|---------|------------|');
+    for (const s of design.sectionRoles.sections.slice(0, 20)) {
+      const h = (s.heading || '').replace(/\|/g, '\\|').slice(0, 80);
+      lines.push(`| ${s.index} | ${s.role}${s.subrole ? ` · ${s.subrole}` : ''} | ${h || '—'} | ${s.confidence} |`);
+    }
+    lines.push('');
+  }
+
+  // ── v10: Material Language ──
+  if (design.materialLanguage && design.materialLanguage.label) {
+    lines.push('## Material Language');
+    lines.push('');
+    lines.push(`**Label:** \`${design.materialLanguage.label}\` (confidence ${design.materialLanguage.confidence})`);
+    const m = design.materialLanguage.metrics || {};
+    lines.push('');
+    lines.push('| Metric | Value |');
+    lines.push('|--------|-------|');
+    if (m.saturation != null) lines.push(`| Avg saturation | ${m.saturation} |`);
+    if (m.shadowProfile) lines.push(`| Shadow profile | ${m.shadowProfile} |`);
+    if (m.avgShadowBlur != null) lines.push(`| Avg shadow blur | ${m.avgShadowBlur}px |`);
+    if (m.maxRadius != null) lines.push(`| Max radius | ${m.maxRadius}px |`);
+    if (m.hasBackdropBlur != null) lines.push(`| backdrop-filter in use | ${m.hasBackdropBlur ? 'yes' : 'no'} |`);
+    if (m.gradientCount != null) lines.push(`| Gradients | ${m.gradientCount} |`);
+    lines.push('');
+  }
+
+  // ── v10: Imagery Style ──
+  if (design.imageryStyle && design.imageryStyle.label && design.imageryStyle.label !== 'none') {
+    lines.push('## Imagery Style');
+    lines.push('');
+    lines.push(`**Label:** \`${design.imageryStyle.label}\` (confidence ${design.imageryStyle.confidence})`);
+    const c = design.imageryStyle.counts || {};
+    lines.push(`**Counts:** total ${c.total || 0}, svg ${c.svg || 0}, icon ${c.icon || 0}, screenshot-like ${c.screenshot || 0}, photo-like ${c.photoLike || 0}`);
+    if (design.imageryStyle.dominantAspect) lines.push(`**Dominant aspect:** ${design.imageryStyle.dominantAspect}`);
+    if (design.imageryStyle.radiusProfile) lines.push(`**Radius profile on images:** ${design.imageryStyle.radiusProfile}`);
+    lines.push('');
+  }
+
+  // ── v10: Component Library ──
+  if (design.componentLibrary && design.componentLibrary.library && design.componentLibrary.library !== 'unknown') {
+    lines.push('## Component Library');
+    lines.push('');
+    lines.push(`**Detected:** \`${design.componentLibrary.library}\` (confidence ${design.componentLibrary.confidence})`);
+    if ((design.componentLibrary.evidence || []).length) {
+      lines.push('');
+      lines.push('Evidence:');
+      for (const e of design.componentLibrary.evidence) lines.push(`- ${e}`);
+    }
+    if ((design.componentLibrary.alternates || []).length) {
+      lines.push('');
+      lines.push('Also considered: ' + design.componentLibrary.alternates.map(a => `${a.id} (${a.score})`).join(', '));
+    }
+    lines.push('');
+  }
+
+  // ── v10: Multi-Page Map ──
+  if (design.multiPage && Array.isArray(design.multiPage.pages) && design.multiPage.pages.length) {
+    lines.push('## Multi-Page Map');
+    lines.push('');
+    lines.push('| Page Type | URL | Status |');
+    lines.push('|-----------|-----|--------|');
+    for (const p of design.multiPage.pages) {
+      lines.push(`| ${p.type || '—'} | ${p.url} | ${p.error ? 'error' : 'ok'} |`);
+    }
+    lines.push('');
+    if (design.multiPage.consistency?.shared?.colors?.length) {
+      lines.push(`**Shared colors across pages:** ${design.multiPage.consistency.shared.colors.slice(0, 10).map(c => `\`${c}\``).join(', ')}`);
+      lines.push('');
+    }
+  }
+
   // ── Quick Start ──
   lines.push('## Quick Start');
   lines.push('');

package/src/formatters/motion-tokens.js

@@ -0,0 +1,22 @@
+// Emits a DTCG-flavored motion tokens JSON.
+export function formatMotionTokens(motion) {
+  if (!motion) return '{}';
+  const out = {
+    $description: 'Motion tokens extracted by designlang',
+    duration: {},
+    easing: {},
+    spring: {},
+  };
+  for (const d of motion.durations || []) {
+    out.duration[d.name] = { $value: d.css, $type: 'duration', ms: d.ms };
+  }
+  for (const e of motion.easings || []) {
+    const slug = e.family + (e.raw.includes('cubic-bezier') ? `-${Math.abs(e.raw.split('').reduce((a, c) => a + c.charCodeAt(0), 0)) % 1000}` : '');
+    out.easing[slug] = { $value: e.raw, $type: 'cubicBezier', family: e.family };
+  }
+  (motion.springs || []).forEach((s, i) => {
+    out.spring[`spring-${i + 1}`] = { $value: s.raw, $type: 'cubicBezier', overshoot: true };
+  });
+  out.$meta = { feel: motion.feel, scrollLinked: !!motion.scrollLinked?.present };
+  return JSON.stringify(out, null, 2);
+}