conductor-figma 1.0.2 → 3.0.0

package/src/design/intelligence.js

@@ -1,341 +1,320 @@
 // ═══════════════════════════════════════════
-// CONDUCTOR — Design Intelligence
+// CONDUCTOR v3 — Design Intelligence Engine
 // ═══════════════════════════════════════════
-// Pure functions for design decisions. No Figma dependency.
-// These encode the rules a senior designer applies instinctively.
+// This is what separates Conductor from every other Figma MCP.
+// Every tool has design intelligence built in.
 
 // ─── 8px Grid ───
-
-export const BASE_UNITS = [4, 8];
-
-export function snapToGrid(value, base = 8) {
-  return Math.round(value / base) * base;
-}
-
-export function isOnGrid(value, base = 8) {
-  return value % base === 0;
-}
-
-export function generateSpacingScale(base = 8, steps = 12) {
-  const scale = [];
-  for (let i = 1; i <= steps; i++) {
-    scale.push(base * i);
-  }
-  return scale;
-}
-
-export function findNearestGridValue(value, base = 8) {
-  const snapped = snapToGrid(value, base);
-  return { original: value, snapped, diff: Math.abs(value - snapped), onGrid: value === snapped };
-}
-
-export function auditSpacing(values, base = 8) {
-  const results = values.map(v => findNearestGridValue(v, base));
-  const onGrid = results.filter(r => r.onGrid).length;
-  return {
-    total: values.length,
-    onGrid,
-    offGrid: values.length - onGrid,
-    adherence: values.length > 0 ? onGrid / values.length : 1,
-    issues: results.filter(r => !r.onGrid),
-    fixes: results.filter(r => !r.onGrid).map(r => ({ from: r.original, to: r.snapped })),
-  };
-}
+export function snap(v, grid = 8) { return Math.round(v / grid) * grid }
+export function snapUp(v, grid = 8) { return Math.ceil(v / grid) * grid }
 
 // ─── Type Scale ───
-
-export const TYPE_SCALES = {
-  'minor-second':    { name: 'Minor Second',    ratio: 1.067 },
-  'major-second':    { name: 'Major Second',    ratio: 1.125 },
-  'minor-third':     { name: 'Minor Third',     ratio: 1.2 },
-  'major-third':     { name: 'Major Third',     ratio: 1.25 },
-  'perfect-fourth':  { name: 'Perfect Fourth',  ratio: 1.333 },
-  'augmented-fourth':{ name: 'Augmented Fourth', ratio: 1.414 },
-  'perfect-fifth':   { name: 'Perfect Fifth',   ratio: 1.5 },
-  'golden-ratio':    { name: 'Golden Ratio',    ratio: 1.618 },
-};
-
-export function generateTypeScale(baseFontSize = 16, scaleKey = 'major-third', steps = { down: 2, up: 6 }) {
-  const scale = TYPE_SCALES[scaleKey] || TYPE_SCALES['major-third'];
-  const sizes = [];
-
-  for (let i = -steps.down; i <= steps.up; i++) {
-    const size = Math.round(baseFontSize * Math.pow(scale.ratio, i) * 100) / 100;
-    const snapped = Math.round(size);
-    sizes.push({ step: i, raw: size, size: snapped, label: getTypeLabel(i) });
-  }
-
-  return { scale: scale.name, ratio: scale.ratio, baseFontSize, sizes };
-}
-
-function getTypeLabel(step) {
-  const labels = { '-2': 'xs', '-1': 'sm', 0: 'base', 1: 'md', 2: 'lg', 3: 'xl', 4: '2xl', 5: '3xl', 6: '4xl' };
-  return labels[String(step)] || `step-${step}`;
+const TYPE_SCALES = {
+  minor2:    1.067, major2:    1.125, minor3:    1.200,
+  major3:    1.250, perfect4:  1.333, aug4:      1.414,
+  perfect5:  1.500, golden:    1.618,
 }
 
-export function detectTypeScale(fontSizes) {
-  if (fontSizes.length < 3) return { detected: false, scale: null, ratio: null };
-  const sorted = [...fontSizes].sort((a, b) => a - b);
-  const ratios = [];
-  for (let i = 1; i < sorted.length; i++) {
-    ratios.push(sorted[i] / sorted[i - 1]);
+export function typeScale(base = 16, ratio = 'major2', steps = 8) {
+  const r = TYPE_SCALES[ratio] || parseFloat(ratio) || 1.125
+  const scale = {}
+  const names = ['xs','sm','base','md','lg','xl','2xl','3xl','4xl','5xl']
+  for (let i = -2; i < steps; i++) {
+    const size = Math.round(base * Math.pow(r, i))
+    scale[names[i + 2] || `${i + 2}xl`] = size
   }
-  const avgRatio = ratios.reduce((s, r) => s + r, 0) / ratios.length;
+  return scale
+}
 
-  let closest = null;
-  let closestDist = Infinity;
-  for (const [key, val] of Object.entries(TYPE_SCALES)) {
-    const dist = Math.abs(avgRatio - val.ratio);
-    if (dist < closestDist) { closestDist = dist; closest = { key, ...val }; }
+// ─── Semantic Colors ───
+export function semanticColors(brand = '#6366f1', mode = 'dark') {
+  const hex2rgb = h => { const n = parseInt(h.replace('#',''), 16); return [(n>>16)&255,(n>>8)&255,n&255] }
+  const rgb2hex = (r,g,b) => '#' + [r,g,b].map(x => x.toString(16).padStart(2,'0')).join('')
+  const [br,bg,bb] = hex2rgb(brand)
+
+  if (mode === 'dark') return {
+    bg:       '#09090f', bg2:      '#0f0f1c', bg3:      '#14142a',
+    surface:  '#12122a', surface2: '#16163a', surface3: '#1a1a42',
+    border:   '#1e1e3a', border2:  '#282850', border3:  '#323268',
+    text1:    '#f0f0f8', text2:    '#a0a0b8', text3:    '#686880',
+    brand, brandDim: rgb2hex(Math.round(br*.3), Math.round(bg*.3), Math.round(bb*.3)),
+    success: '#4ade80', warning: '#fbbf24', error: '#f87171', info: '#60a5fa',
   }
-
   return {
-    detected: closestDist < 0.1,
-    scale: closest,
-    avgRatio: Math.round(avgRatio * 1000) / 1000,
-    sizes: sorted,
-  };
-}
-
-export function getLineHeight(fontSize) {
-  if (fontSize <= 14) return 1.6;
-  if (fontSize <= 20) return 1.5;
-  if (fontSize <= 32) return 1.3;
-  if (fontSize <= 48) return 1.15;
-  return 1.1;
-}
-
-export function getFontWeight(level) {
-  const weights = { heading: 700, subheading: 600, body: 400, caption: 400, label: 500 };
-  return weights[level] || 400;
-}
-
-export function checkMeasure(charCount) {
-  return { charCount, optimal: charCount >= 45 && charCount <= 75, tooNarrow: charCount < 45, tooWide: charCount > 75 };
-}
-
-// ─── Color ───
-
-export function hexToRgb(hex) {
-  hex = hex.replace('#', '');
-  if (hex.length === 3) hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
-  return { r: parseInt(hex.substr(0,2),16), g: parseInt(hex.substr(2,2),16), b: parseInt(hex.substr(4,2),16) };
-}
-
-export function rgbToHex(r, g, b) {
-  return '#' + [r, g, b].map(c => Math.max(0, Math.min(255, Math.round(c))).toString(16).padStart(2, '0')).join('');
-}
-
-export function hexToHsl(hex) {
-  const { r, g, b } = hexToRgb(hex);
-  const rf = r/255, gf = g/255, bf = b/255;
-  const max = Math.max(rf, gf, bf), min = Math.min(rf, gf, bf);
-  let h, s, l = (max + min) / 2;
-  if (max === min) { h = s = 0; }
-  else {
-    const d = max - min;
-    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    if (max === rf) h = ((gf - bf) / d + (gf < bf ? 6 : 0)) / 6;
-    else if (max === gf) h = ((bf - rf) / d + 2) / 6;
-    else h = ((rf - gf) / d + 4) / 6;
+    bg:       '#ffffff', bg2:      '#f9f9fb', bg3:      '#f3f3f7',
+    surface:  '#ffffff', surface2: '#f5f5fa', surface3: '#ededf5',
+    border:   '#e4e4ec', border2:  '#d0d0dd', border3:  '#b8b8cc',
+    text1:    '#111118', text2:    '#55556a', text3:    '#88889a',
+    brand, brandDim: rgb2hex(Math.min(255,br+180), Math.min(255,bg+180), Math.min(255,bb+180)),
+    success: '#16a34a', warning: '#d97706', error: '#dc2626', info: '#2563eb',
   }
-  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
 }
 
-export function hslToHex(h, s, l) {
-  s /= 100; l /= 100;
-  const a = s * Math.min(l, 1 - l);
-  const f = (n) => {
-    const k = (n + h / 30) % 12;
-    return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-  };
-  return rgbToHex(Math.round(f(0)*255), Math.round(f(8)*255), Math.round(f(4)*255));
-}
+// ─── Spacing System ───
+export const SPACING = { none:0, xs:4, sm:8, md:16, lg:24, xl:32, '2xl':48, '3xl':64, '4xl':96 }
 
-export function generatePalette(baseHex, steps = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]) {
-  const { h, s } = hexToHsl(baseHex);
-  return steps.map(step => {
-    const l = step <= 50 ? 97 : step >= 950 ? 8 : Math.round(100 - (step / 10));
-    const satAdj = step <= 100 || step >= 900 ? Math.max(0, s - 10) : s;
-    return { step, hex: hslToHex(h, satAdj, l) };
-  });
-}
+// ─── Corner Radius ───
+export const RADIUS = { none:0, xs:4, sm:6, md:8, lg:12, xl:16, '2xl':20, '3xl':24, full:9999 }
 
-export function generateSemanticColors(brandHex) {
-  const { h } = hexToHsl(brandHex);
-  return {
-    primary:   brandHex,
-    surface:   hslToHex(h, 5, 98),
-    surfaceAlt:hslToHex(h, 5, 95),
-    border:    hslToHex(h, 8, 88),
-    text:      hslToHex(h, 10, 15),
-    textMuted: hslToHex(h, 6, 45),
-    accent:    brandHex,
-    success:   '#16a34a',
-    warning:   '#d97706',
-    danger:    '#dc2626',
-    info:      '#2563eb',
-  };
+// ─── Shadows ───
+export const SHADOWS = {
+  sm:   { color:'#00000015', offset:{x:0,y:1},  blur:3,  spread:0 },
+  md:   { color:'#00000020', offset:{x:0,y:4},  blur:8,  spread:-2 },
+  lg:   { color:'#00000025', offset:{x:0,y:8},  blur:24, spread:-4 },
+  xl:   { color:'#00000030', offset:{x:0,y:20}, blur:48, spread:-8 },
 }
 
-export function generateDarkMode(lightColors) {
-  const result = {};
-  for (const [key, hex] of Object.entries(lightColors)) {
-    if (typeof hex !== 'string' || !hex.startsWith('#')) { result[key] = hex; continue; }
-    const { h, s, l } = hexToHsl(hex);
-    result[key] = hslToHex(h, Math.min(s, 80), 100 - l);
+// ─── Component Intelligence ───
+// When an AI says "create a button", this knows what that means.
+export function componentDefaults(type, variant = 'default') {
+  const defs = {
+    button: {
+      default:  { h:44, px:20, py:0, radius:10, fontSize:15, fontWeight:'Semi Bold', minW:100, touchTarget:44 },
+      sm:       { h:36, px:14, py:0, radius:8,  fontSize:13, fontWeight:'Medium',    minW:72,  touchTarget:44 },
+      lg:       { h:52, px:28, py:0, radius:12, fontSize:17, fontWeight:'Semi Bold', minW:120, touchTarget:52 },
+      icon:     { h:40, px:10, py:0, radius:10, fontSize:18, fontWeight:'Medium',    minW:40,  touchTarget:44 },
+    },
+    input: {
+      default:  { h:44, px:14, py:0, radius:8,  fontSize:15, fontWeight:'Regular', borderW:1.5 },
+      sm:       { h:36, px:12, py:0, radius:6,  fontSize:13, fontWeight:'Regular', borderW:1 },
+      lg:       { h:52, px:16, py:0, radius:10, fontSize:17, fontWeight:'Regular', borderW:1.5 },
+    },
+    card: {
+      default:  { px:24, py:24, radius:16, gap:16, borderW:1 },
+      compact:  { px:16, py:16, radius:12, gap:12, borderW:1 },
+      spacious: { px:32, py:32, radius:20, gap:20, borderW:1 },
+    },
+    avatar: {
+      default:  { size:40, radius:9999, fontSize:16, fontWeight:'Semi Bold' },
+      sm:       { size:32, radius:9999, fontSize:13, fontWeight:'Semi Bold' },
+      lg:       { size:56, radius:9999, fontSize:22, fontWeight:'Semi Bold' },
+    },
+    badge: {
+      default:  { h:24, px:10, py:0, radius:6, fontSize:11, fontWeight:'Semi Bold' },
+      pill:     { h:24, px:10, py:0, radius:9999, fontSize:11, fontWeight:'Semi Bold' },
+    },
+    nav: {
+      default:  { h:64, px:24, gap:24, fontSize:14, fontWeight:'Medium' },
+      compact:  { h:52, px:16, gap:16, fontSize:13, fontWeight:'Medium' },
+    },
+    section: {
+      default:  { py:96, px:48, gap:48, maxW:1120 },
+      compact:  { py:64, px:32, gap:32, maxW:1120 },
+      hero:     { py:120, px:48, gap:36, maxW:1120 },
+    },
+    modal: {
+      default:  { px:28, py:28, radius:20, gap:20, maxW:480, borderW:1 },
+      lg:       { px:36, py:36, radius:24, gap:24, maxW:640, borderW:1 },
+    },
+    sidebar: {
+      default:  { w:260, px:16, py:20, gap:4, fontSize:14 },
+      compact:  { w:220, px:12, py:16, gap:2, fontSize:13 },
+      wide:     { w:300, px:20, py:24, gap:4, fontSize:14 },
+    },
+    toast: {
+      default:  { h:48, px:16, py:0, radius:10, fontSize:14, fontWeight:'Medium', gap:10 },
+    },
+    tooltip: {
+      default:  { px:10, py:6, radius:6, fontSize:12, fontWeight:'Medium' },
+    },
+    chip: {
+      default:  { h:32, px:12, py:0, radius:8, fontSize:13, fontWeight:'Medium', gap:6 },
+    },
+    divider: {
+      default:  { h:1, color:'border' },
+    },
+    skeleton: {
+      default:  { radius:8, color:'surface2' },
+    },
+    progress: {
+      default:  { h:8, radius:4 },
+      thin:     { h:4, radius:2 },
+    },
+    switch: {
+      default:  { w:44, h:24, radius:12, thumbSize:20, touchTarget:44 },
+    },
+    checkbox: {
+      default:  { size:20, radius:4, borderW:2, touchTarget:44 },
+    },
+    radio: {
+      default:  { size:20, radius:9999, borderW:2, touchTarget:44 },
+    },
+    table: {
+      default:  { cellPx:16, cellPy:12, headerFontSize:12, bodyFontSize:14, headerWeight:'Semi Bold', borderW:1 },
+    },
+    tabs: {
+      default:  { h:44, px:16, gap:4, fontSize:14, fontWeight:'Medium', indicatorH:2, indicatorRadius:1 },
+    },
+    dropdown: {
+      default:  { itemH:40, px:12, py:8, radius:12, fontSize:14, gap:2, shadow:'lg' },
+    },
   }
-  return result;
+  const comp = defs[type]
+  if (!comp) return null
+  return comp[variant] || comp.default || null
 }
 
-export function relativeLuminance(hex) {
-  const { r, g, b } = hexToRgb(hex);
-  const [rs, gs, bs] = [r, g, b].map(c => {
-    c = c / 255;
-    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-  });
-  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
-}
-
-export function contrastRatio(hex1, hex2) {
-  const l1 = relativeLuminance(hex1);
-  const l2 = relativeLuminance(hex2);
-  const lighter = Math.max(l1, l2);
-  const darker = Math.min(l1, l2);
-  return (lighter + 0.05) / (darker + 0.05);
+// ─── Layout Intelligence ───
+export function suggestAutoLayout(intent) {
+  const layouts = {
+    'row':      { direction:'HORIZONTAL', gap:snap(12), align:'CENTER' },
+    'column':   { direction:'VERTICAL',   gap:snap(16), align:'STRETCH' },
+    'center':   { direction:'VERTICAL',   gap:snap(16), align:'CENTER', justify:'CENTER' },
+    'spread':   { direction:'HORIZONTAL', gap:0,         align:'CENTER', justify:'SPACE_BETWEEN' },
+    'stack':    { direction:'VERTICAL',   gap:0,         align:'STRETCH' },
+    'wrap':     { direction:'HORIZONTAL', gap:snap(12), align:'CENTER', wrap:true },
+    'grid-2':   { direction:'HORIZONTAL', gap:snap(16), align:'STRETCH', childWidth:'FILL' },
+    'grid-3':   { direction:'HORIZONTAL', gap:snap(16), align:'STRETCH', childWidth:'FILL' },
+    'grid-4':   { direction:'HORIZONTAL', gap:snap(16), align:'STRETCH', childWidth:'FILL' },
+    'sidebar':  { direction:'HORIZONTAL', gap:0,         align:'STRETCH' },
+    'header':   { direction:'HORIZONTAL', gap:snap(16), align:'CENTER', px:snap(24) },
+    'card-row': { direction:'HORIZONTAL', gap:snap(20), align:'STRETCH' },
+    'form':     { direction:'VERTICAL',   gap:snap(16), align:'STRETCH' },
+  }
+  return layouts[intent] || layouts.column
 }
 
-export function checkContrast(fgHex, bgHex) {
-  const ratio = contrastRatio(fgHex, bgHex);
+// ─── Accessibility ───
+export function checkContrast(fg, bg) {
+  const hex2lum = h => {
+    const [r,g,b] = [1,3,5].map(i => { let c = parseInt(h.slice(i,i+2),16)/255; return c<=0.03928?c/12.92:Math.pow((c+0.055)/1.055,2.4) })
+    return 0.2126*r + 0.7152*g + 0.0722*b
+  }
+  const l1 = hex2lum(fg.replace('#',''))
+  const l2 = hex2lum(bg.replace('#',''))
+  const ratio = (Math.max(l1,l2)+0.05)/(Math.min(l1,l2)+0.05)
   return {
-    ratio: Math.round(ratio * 100) / 100,
+    ratio: Math.round(ratio*100)/100,
     aa: ratio >= 4.5,
-    aaLarge: ratio >= 3,
     aaa: ratio >= 7,
-    aaaLarge: ratio >= 4.5,
-  };
-}
-
-// ─── Shadow / Elevation ───
-
-export function generateElevation(steps = ['sm', 'md', 'lg', 'xl', '2xl']) {
-  const configs = {
-    sm:  { y: 1, blur: 2, spread: 0, opacity: 0.05 },
-    md:  { y: 2, blur: 4, spread: -1, opacity: 0.06 },
-    lg:  { y: 4, blur: 8, spread: -2, opacity: 0.08 },
-    xl:  { y: 8, blur: 16, spread: -4, opacity: 0.1 },
-    '2xl': { y: 16, blur: 32, spread: -8, opacity: 0.12 },
-  };
-  return steps.map(step => ({ step, ...configs[step], css: `0 ${configs[step].y}px ${configs[step].blur}px ${configs[step].spread}px rgba(0,0,0,${configs[step].opacity})` }));
-}
-
-// ─── Border Radius ───
-
-export function generateRadiusScale(base = 4) {
-  return [
-    { name: 'none', value: 0 },
-    { name: 'sm', value: base },
-    { name: 'md', value: base * 2 },
-    { name: 'lg', value: base * 3 },
-    { name: 'xl', value: base * 4 },
-    { name: '2xl', value: base * 6 },
-    { name: 'full', value: 9999 },
-  ];
+    aaLarge: ratio >= 3,
+  }
 }
 
-// ─── Hierarchy ───
-
-export function assessHierarchy(elements) {
-  // elements: [{ type: 'heading'|'subheading'|'body'|'button'|'caption', fontSize, fontWeight, color }]
-  const sorted = [...elements].sort((a, b) => {
-    const weightA = (a.fontSize || 16) * (a.fontWeight || 400) / 400;
-    const weightB = (b.fontSize || 16) * (b.fontWeight || 400) / 400;
-    return weightB - weightA;
-  });
-
-  const issues = [];
-  for (let i = 0; i < sorted.length - 1; i++) {
-    const curr = sorted[i];
-    const next = sorted[i + 1];
-    const currWeight = (curr.fontSize || 16) * (curr.fontWeight || 400) / 400;
-    const nextWeight = (next.fontSize || 16) * (next.fontWeight || 400) / 400;
-    if (currWeight / nextWeight < 1.1) {
-      issues.push({ a: curr, b: next, reason: 'Insufficient visual weight difference between levels' });
-    }
+export function auditAccessibility(node) {
+  const issues = []
+  // Touch target
+  if (node.type === 'button' || node.type === 'input' || node.type === 'link') {
+    if ((node.height || 0) < 44) issues.push({ severity:'error', rule:'touch-target', message:`Touch target ${node.height}px is below 44px minimum`, fix:{ height:44 } })
   }
-
-  return { elements: sorted, issues, score: issues.length === 0 ? 100 : Math.max(0, 100 - issues.length * 20) };
+  // Text contrast
+  if (node.type === 'text' && node.color && node.bgColor) {
+    const c = checkContrast(node.color, node.bgColor)
+    if (!c.aa && (node.fontSize || 16) < 18) issues.push({ severity:'error', rule:'contrast-aa', message:`Contrast ratio ${c.ratio}:1 fails WCAG AA (needs 4.5:1)`, ratio:c.ratio })
+    else if (!c.aaLarge && (node.fontSize || 16) >= 18) issues.push({ severity:'warning', rule:'contrast-aa-large', message:`Large text contrast ${c.ratio}:1 fails AA (needs 3:1)`, ratio:c.ratio })
+  }
+  // Font size
+  if (node.type === 'text' && (node.fontSize || 16) < 12) {
+    issues.push({ severity:'warning', rule:'min-font-size', message:`Font size ${node.fontSize}px is below 12px minimum`, fix:{ fontSize:12 } })
+  }
+  return issues
 }
 
-// ─── Accessibility ───
-
-export function checkTouchTarget(width, height, minSize = 44) {
-  return { width, height, passes: width >= minSize && height >= minSize, minSize };
+// ─── Font Weight Map ───
+export const FONT_WEIGHTS = {
+  '100':'Thin','200':'Extra Light','300':'Light','400':'Regular',
+  '500':'Medium','600':'Semi Bold','700':'Bold','800':'Extra Bold','900':'Black',
+  thin:'Thin', light:'Light', regular:'Regular', normal:'Regular',
+  medium:'Medium', semibold:'Semi Bold', bold:'Bold', extrabold:'Extra Bold', black:'Black',
 }
 
-// ─── Auto-Layout ───
-
-export function inferLayoutDirection(children) {
-  if (children.length < 2) return 'vertical';
-  const firstTwo = children.slice(0, 2);
-  const xDiff = Math.abs(firstTwo[0].x - firstTwo[1].x);
-  const yDiff = Math.abs(firstTwo[0].y - firstTwo[1].y);
-  return xDiff > yDiff ? 'horizontal' : 'vertical';
+export function resolveFontWeight(w) {
+  if (!w) return 'Regular'
+  return FONT_WEIGHTS[String(w).toLowerCase()] || FONT_WEIGHTS[w] || w
 }
 
-export function inferGap(children, direction = 'vertical') {
-  if (children.length < 2) return 8;
-  const gaps = [];
-  const sorted = [...children].sort((a, b) => direction === 'vertical' ? a.y - b.y : a.x - b.x);
-  for (let i = 1; i < sorted.length; i++) {
-    const gap = direction === 'vertical'
-      ? sorted[i].y - (sorted[i-1].y + sorted[i-1].height)
-      : sorted[i].x - (sorted[i-1].x + sorted[i-1].width);
-    if (gap > 0) gaps.push(gap);
+// ─── Gradient Helpers ───
+export function linearGradient(angle, stops) {
+  const rad = (angle - 90) * Math.PI / 180
+  return {
+    type: 'GRADIENT_LINEAR',
+    gradientTransform: [[Math.cos(rad), Math.sin(rad), 0.5 - 0.5*Math.cos(rad) - 0.5*Math.sin(rad)], [-Math.sin(rad), Math.cos(rad), 0.5 + 0.5*Math.sin(rad) - 0.5*Math.cos(rad)]],
+    gradientStops: stops.map(s => ({ position: s.position, color: hexToFigmaColor(s.color) })),
   }
-  if (gaps.length === 0) return 8;
-  const avg = gaps.reduce((s, g) => s + g, 0) / gaps.length;
-  return snapToGrid(avg);
 }
 
-export function inferPadding(parent, children) {
-  if (children.length === 0) return { top: 16, right: 16, bottom: 16, left: 16 };
-  const minX = Math.min(...children.map(c => c.x));
-  const minY = Math.min(...children.map(c => c.y));
-  const maxX = Math.max(...children.map(c => c.x + c.width));
-  const maxY = Math.max(...children.map(c => c.y + c.height));
+export function radialGradient(stops) {
   return {
-    top: snapToGrid(minY - parent.y),
-    right: snapToGrid((parent.x + parent.width) - maxX),
-    bottom: snapToGrid((parent.y + parent.height) - maxY),
-    left: snapToGrid(minX - parent.x),
-  };
+    type: 'GRADIENT_RADIAL',
+    gradientTransform: [[0.5,0,0.25],[0,0.5,0.25]],
+    gradientStops: stops.map(s => ({ position: s.position, color: hexToFigmaColor(s.color) })),
+  }
 }
 
-// ─── Responsive ───
-
-export const BREAKPOINTS = {
-  mobile:  { name: 'Mobile',  width: 375, height: 812 },
-  tablet:  { name: 'Tablet',  width: 768, height: 1024 },
-  desktop: { name: 'Desktop', width: 1440, height: 900 },
-};
-
-export function scaleForBreakpoint(value, fromWidth, toWidth) {
-  return Math.round(value * (toWidth / fromWidth));
+export function hexToFigmaColor(hex) {
+  hex = hex.replace('#','')
+  const hasAlpha = hex.length === 8
+  const r = parseInt(hex.slice(0,2),16) / 255
+  const g = parseInt(hex.slice(2,4),16) / 255
+  const b = parseInt(hex.slice(4,6),16) / 255
+  const a = hasAlpha ? parseInt(hex.slice(6,8),16) / 255 : 1
+  return { r, g, b, a }
 }
 
-// ─── Design Score ───
-
-export function computeDesignScore(audit) {
-  const weights = { spacing: 25, typography: 20, color: 15, components: 15, accessibility: 15, hierarchy: 10 };
-  let total = 0;
-  let maxTotal = 0;
+export function figmaColorToHex({r,g,b,a}) {
+  const h = [r,g,b].map(v => Math.round(v*255).toString(16).padStart(2,'0')).join('')
+  return a !== undefined && a < 1 ? '#' + h + Math.round(a*255).toString(16).padStart(2,'0') : '#' + h
+}
 
-  for (const [category, weight] of Object.entries(weights)) {
-    const score = audit[category] ?? 100;
-    total += score * weight;
-    maxTotal += 100 * weight;
+// ─── Design Craft Guide ───
+export function getDesignCraftGuide() {
+  return {
+    typography: {
+      rules: [
+        'Use 2-3 font weights maximum (Regular + Semi Bold, or Regular + Medium + Bold)',
+        'Body text: 15-17px, line-height 1.5-1.7',
+        'Headings: Use type scale ratios, not arbitrary sizes',
+        'Never use font size below 12px',
+        'Label/caption text: 11-13px, uppercase + letter-spacing for differentiation',
+      ],
+      scale: typeScale(16, 'major2'),
+    },
+    spacing: {
+      rules: [
+        'Use 8px grid for all spacing',
+        'Content padding: 24-48px',
+        'Card padding: 20-32px',
+        'Section vertical padding: 64-120px',
+        'Gap between related items: 8-16px',
+        'Gap between groups: 24-48px',
+      ],
+      system: SPACING,
+    },
+    color: {
+      rules: [
+        'Maximum 3 brand colors',
+        'Use opacity for hierarchy, not different grays',
+        'Text hierarchy: 3 levels (primary, secondary, muted)',
+        'Always check contrast ratios (WCAG AA minimum)',
+        'Semantic colors for status: success/warning/error/info',
+      ],
+    },
+    layout: {
+      rules: [
+        'Content max-width: 1120-1200px',
+        'Use auto-layout for everything (no absolute positioning)',
+        'Consistent alignment (CENTER for hero sections, LEFT for content)',
+        'Visual hierarchy through size contrast, not just weight',
+        'Generous whitespace signals quality',
+      ],
+    },
+    components: {
+      rules: [
+        'Buttons: minimum 44px touch target',
+        'Inputs: match button height for visual rhythm',
+        'Cards: consistent padding and corner radius',
+        'Icons: 20-24px for UI, 16-18px inline with text',
+        'Avatars: always circular (border-radius: 9999)',
+      ],
+    },
+    antiPatterns: [
+      'Random font sizes not on a scale',
+      'Spacing values not on 4/8px grid',
+      'Too many colors competing for attention',
+      'Tiny click targets on interactive elements',
+      'Inconsistent corner radii across components',
+      'Text on images without proper contrast overlay',
+      'More than 3 font weights on one screen',
+    ],
   }
-
-  return Math.round((total / maxTotal) * 100);
 }