designlang 6.0.0 → 7.1.0

package/tests/extractors.test.js

@@ -11,6 +11,11 @@ import { extractLayout } from '../src/extractors/layout.js';
 import { extractGradients } from '../src/extractors/gradients.js';
 import { extractZIndex } from '../src/extractors/zindex.js';
 import { scoreDesignSystem } from '../src/extractors/scoring.js';
+import { extractStackFingerprint } from '../src/extractors/stack-fingerprint.js';
+import { extractCssHealth } from '../src/extractors/css-health.js';
+import { remediateFailingPairs } from '../src/extractors/a11y-remediation.js';
+import { extractSemanticRegions } from '../src/extractors/semantic-regions.js';
+import { clusterComponents } from '../src/extractors/component-clusters.js';
 
 // ── Shared fixture defaults ─────────────────────────────────────
 
@@ -659,3 +664,129 @@ describe('scoreDesignSystem', () => {
     assert.ok(result.issues.some(i => i.includes('primary')));
   });
 });
+
+// ── extractStackFingerprint ─────────────────────────────────────
+
+describe('extractStackFingerprint', () => {
+  it('detects Next.js from __NEXT_DATA__', () => {
+    const out = extractStackFingerprint({ windowGlobals: ['__NEXT_DATA__'], scripts: [], metas: [], classNameSample: [] });
+    assert.equal(out.framework, 'next');
+  });
+
+  it('detects Tailwind from utility-heavy classNames', () => {
+    const out = extractStackFingerprint({
+      windowGlobals: [],
+      scripts: [],
+      metas: [],
+      classNameSample: [
+        'flex items-center gap-4 text-sm text-gray-600',
+        'px-4 py-2 rounded-md bg-blue-500',
+        'grid grid-cols-3 md:grid-cols-4',
+        'flex justify-center',
+        'p-4 shadow-md',
+        'mt-4 text-lg',
+      ],
+    });
+    assert.equal(out.css.layer, 'tailwind');
+    assert.ok(out.css.tailwind.utilities.length > 0);
+  });
+
+  it('returns unknown when nothing matches', () => {
+    const out = extractStackFingerprint({ windowGlobals: [], scripts: [], metas: [], classNameSample: ['foo', 'bar'] });
+    assert.equal(out.framework, 'unknown');
+    assert.equal(out.css.layer, 'unknown');
+  });
+});
+
+// ── extractCssHealth ────────────────────────────────────────────
+
+describe('extractCssHealth', () => {
+  const payload = [{
+    url: 'https://x.com/a.css',
+    text: '.a{color:red}.a{color:red}.b{color:blue !important}.c-webkit-foo{color:x}@keyframes fade{0%{opacity:0}100%{opacity:1}\n}',
+    totalBytes: 1000,
+    ranges: [{ start: 0, end: 400 }], // 60% unused
+  }];
+
+  it('counts !important', () => {
+    const r = extractCssHealth(payload);
+    assert.equal(r.importantCount, 1);
+  });
+
+  it('counts duplicate declarations', () => {
+    const r = extractCssHealth(payload);
+    assert.ok(r.duplicates >= 1);
+  });
+
+  it('reports unused bytes', () => {
+    const r = extractCssHealth(payload);
+    assert.equal(r.unusedBytes, 600);
+    assert.equal(r.usedBytes, 400);
+  });
+
+  it('catalogs keyframes', () => {
+    const r = extractCssHealth(payload);
+    assert.ok(r.keyframes.some(k => k.name === 'fade'));
+  });
+});
+
+// ── remediateFailingPairs ───────────────────────────────────────
+
+describe('remediateFailingPairs', () => {
+  it('suggests a palette color that passes AA', () => {
+    const failing = [{ fg: '#777777', bg: '#ffffff', ratio: 3.5, rule: 'AA-normal' }];
+    const palette = ['#000000', '#222222', '#555555', '#cccccc'];
+    const out = remediateFailingPairs(failing, palette);
+    assert.equal(out.length, 1);
+    assert.ok(out[0].suggestion);
+    assert.ok(out[0].suggestion.newRatio >= 4.5);
+  });
+
+  it('returns null suggestion when no palette color passes', () => {
+    const failing = [{ fg: '#eee', bg: '#fff', ratio: 1.1, rule: 'AA-normal' }];
+    const palette = ['#dedede'];
+    const out = remediateFailingPairs(failing, palette);
+    assert.equal(out[0].suggestion, null);
+  });
+});
+
+// ── extractSemanticRegions ──────────────────────────────────────
+
+describe('extractSemanticRegions', () => {
+  it('labels header as nav', () => {
+    const out = extractSemanticRegions([{ tag: 'header', role: '', className: '', id: '', text: 'Home About', headings: [], buttonCount: 3, cardCount: 0, bounds: { x: 0, y: 0, w: 1280, h: 80 } }]);
+    assert.equal(out[0].role, 'nav');
+  });
+
+  it('labels section with CTA + heading as hero', () => {
+    const out = extractSemanticRegions([{ tag: 'section', role: '', className: 'hero', id: '', text: 'Welcome', headings: ['Build better'], buttonCount: 2, cardCount: 0, bounds: { x: 0, y: 80, w: 1280, h: 600 } }]);
+    assert.equal(out[0].role, 'hero');
+  });
+
+  it('labels pricing based on cards + keyword', () => {
+    const out = extractSemanticRegions([{ tag: 'section', role: '', className: '', id: '', text: 'Basic $9/mo Pro $29/mo Team $99/mo', headings: ['Pricing'], buttonCount: 3, cardCount: 3, bounds: { x: 0, y: 0, w: 1280, h: 400 } }]);
+    assert.equal(out[0].role, 'pricing');
+  });
+});
+
+// ── clusterComponents ───────────────────────────────────────────
+
+describe('clusterComponents', () => {
+  it('collapses identical instances into one entry', () => {
+    const els = Array.from({ length: 5 }, () => ({ kind: 'button', structuralHash: 'button>span', styleVector: [16, 8, 0, 0], css: { bg: '#f00' } }));
+    const out = clusterComponents(els);
+    assert.equal(out.length, 1);
+    assert.equal(out[0].instanceCount, 5);
+  });
+
+  it('separates variants with different style vectors', () => {
+    const els = [
+      { kind: 'button', structuralHash: 'button>span', styleVector: [16, 8, 0, 0], css: { bg: '#f00' } },
+      { kind: 'button', structuralHash: 'button>span', styleVector: [16, 8, 0, 0], css: { bg: '#f00' } },
+      { kind: 'button', structuralHash: 'button>span', styleVector: [0, 0, 16, 8], css: { bg: '#0f0' } },
+    ];
+    const out = clusterComponents(els);
+    assert.equal(out.length, 1);
+    assert.equal(out[0].variants.length, 2);
+  });
+});

package/tests/formatters.test.js

@@ -7,6 +7,13 @@ import { formatCssVars } from '../src/formatters/css-vars.js';
 import { formatPreview } from '../src/formatters/preview.js';
 import { formatFigma } from '../src/formatters/figma.js';
 import { formatReactTheme, formatShadcnTheme } from '../src/formatters/theme.js';
+import { formatDtcgTokens } from '../src/formatters/dtcg-tokens.js';
+import { resolveRef } from '../src/formatters/_token-ref.js';
+import { formatIosSwiftUI } from '../src/formatters/ios-swiftui.js';
+import { formatAndroidCompose } from '../src/formatters/android-compose.js';
+import { formatFlutterDart } from '../src/formatters/flutter-dart.js';
+import { formatWordPressTheme } from '../src/formatters/wordpress.js';
+import { formatAgentRules } from '../src/formatters/agent-rules.js';
 
 // ── Shared mock design object ───────────────────────────────────
 
@@ -226,6 +233,44 @@ describe('formatTokens', () => {
   });
 });
 
+// ── formatDtcgTokens ────────────────────────────────────────────
+
+describe('formatDtcgTokens', () => {
+  const minimalDesign = {
+    colors: { primary: '#3b82f6', secondary: '#10b981', neutrals: ['#111','#888','#eee'], backgrounds: ['#fff'], text: ['#111'], all: [] },
+    typography: { families: ['Inter'], scale: [{ size:'16px', weight:'400', lineHeight:'1.5' }] },
+    spacing: { scale: ['4px','8px','16px'], base: '4px' },
+    shadows: { values: ['0 1px 2px rgba(0,0,0,0.1)'] },
+    borders: { radii: ['4px','8px'] },
+    variables: {},
+  };
+
+  it('emits $value/$type for every leaf', () => {
+    const out = formatDtcgTokens(minimalDesign);
+    assert.equal(out.primitive.color.brand.primary.$value, '#3b82f6');
+    assert.equal(out.primitive.color.brand.primary.$type, 'color');
+  });
+
+  it('emits semantic aliases referencing primitives', () => {
+    const out = formatDtcgTokens(minimalDesign);
+    assert.match(out.semantic.color.action.primary.$value, /^\{primitive\.color\.brand\.primary\}$/);
+    assert.equal(out.semantic.color.action.primary.$type, 'color');
+  });
+
+  it('emits composite typography tokens', () => {
+    const out = formatDtcgTokens(minimalDesign);
+    const body = out.semantic.typography.body;
+    assert.equal(body.$type, 'typography');
+    assert.equal(body.$value.fontFamily, 'Inter');
+    assert.equal(body.$value.fontSize, '16px');
+  });
+
+  it('round-trips through JSON unchanged', () => {
+    const out = formatDtcgTokens(minimalDesign);
+    assert.deepEqual(JSON.parse(JSON.stringify(out)), out);
+  });
+});
+
 // ── formatTailwind ──────────────────────────────────────────────
 
 describe('formatTailwind', () => {
@@ -475,3 +520,190 @@ describe('formatShadcnTheme', () => {
     assert.ok(result.includes('shadcn/ui'));
   });
 });
+
+// ── resolveRef (token reference helper) ─────────────────────────
+
+describe('resolveRef', () => {
+  const tokens = {
+    primitive: {
+      color: { brand: { primary: { $value: '#3B82F6', $type: 'color' } } },
+      spacing: { s0: { $value: '4px', $type: 'dimension' } },
+    },
+    semantic: {
+      color: {
+        action: {
+          primary: { $value: '{primitive.color.brand.primary}', $type: 'color' },
+        },
+      },
+      alias: {
+        ref: { $value: '{semantic.color.action.primary}', $type: 'color' },
+      },
+    },
+  };
+
+  it('returns the raw $value for non-reference tokens', () => {
+    assert.equal(resolveRef(tokens, 'primitive.color.brand.primary'), '#3B82F6');
+  });
+
+  it('follows one-level references', () => {
+    assert.equal(resolveRef(tokens, 'semantic.color.action.primary'), '#3B82F6');
+  });
+
+  it('follows chained references', () => {
+    assert.equal(resolveRef(tokens, 'semantic.alias.ref'), '#3B82F6');
+  });
+
+  it('returns undefined for missing paths', () => {
+    assert.equal(resolveRef(tokens, 'primitive.does.not.exist'), undefined);
+  });
+
+  it('resolves dimension tokens', () => {
+    assert.equal(resolveRef(tokens, 'primitive.spacing.s0'), '4px');
+  });
+});
+
+// ── formatIosSwiftUI ────────────────────────────────────────────
+
+describe('formatIosSwiftUI', () => {
+  const tokens = formatDtcgTokens(mockDesign);
+
+  it('emits import SwiftUI and extension Color', () => {
+    const result = formatIosSwiftUI(tokens);
+    assert.ok(result.includes('import SwiftUI'));
+    assert.ok(result.includes('extension Color'));
+  });
+
+  it('emits actionPrimary with resolved primitive hex', () => {
+    const result = formatIosSwiftUI(tokens);
+    // mockDesign primary is #0066cc → semantic.color.action.primary resolves to #0066cc
+    assert.ok(
+      /static let actionPrimary = Color\(hex: 0x0066CC\)/.test(result),
+      'expected actionPrimary with resolved hex',
+    );
+  });
+
+  it('resolves semantic references (no raw {...} strings in output)', () => {
+    const result = formatIosSwiftUI(tokens);
+    assert.ok(!result.includes('{primitive.'), 'should not leak DTCG refs');
+  });
+
+  it('is idempotent', () => {
+    const a = formatIosSwiftUI(tokens);
+    const b = formatIosSwiftUI(tokens);
+    assert.equal(a, b);
+  });
+});
+
+// ── formatAndroidCompose ────────────────────────────────────────
+
+describe('formatAndroidCompose', () => {
+  const tokens = formatDtcgTokens(mockDesign);
+
+  it('Theme.kt contains object DesignTokens and ActionPrimary', () => {
+    const out = formatAndroidCompose(tokens);
+    assert.ok(out['Theme.kt'].includes('object DesignTokens'));
+    assert.ok(/val ActionPrimary = Color\(0xFF0066CC\)/.test(out['Theme.kt']));
+  });
+
+  it('colors.xml has <color name="action_primary">', () => {
+    const out = formatAndroidCompose(tokens);
+    assert.ok(out['colors.xml'].includes('<color name="action_primary">#FF0066CC</color>'));
+  });
+
+  it('dimens.xml has <dimen name="spacing_s0"> with dp unit', () => {
+    const out = formatAndroidCompose(tokens);
+    assert.ok(/<dimen name="spacing_s0">\d+dp<\/dimen>/.test(out['dimens.xml']));
+  });
+});
+
+// ── formatFlutterDart ───────────────────────────────────────────
+
+describe('formatFlutterDart', () => {
+  const tokens = formatDtcgTokens(mockDesign);
+
+  it('contains class DesignTokens', () => {
+    const out = formatFlutterDart(tokens);
+    assert.ok(out.includes('class DesignTokens'));
+  });
+
+  it('emits actionPrimary with resolved ARGB hex', () => {
+    const out = formatFlutterDart(tokens);
+    assert.ok(
+      /static const Color actionPrimary = Color\(0xFF0066CC\);/.test(out),
+      'expected actionPrimary with resolved hex',
+    );
+  });
+});
+
+// ── formatWordPressTheme (block-theme skeleton) ─────────────────
+
+describe('formatWordPressTheme', () => {
+  const tokens = formatDtcgTokens(mockDesign);
+  const out = formatWordPressTheme(tokens, mockDesign);
+
+  it('theme.json parses and has color palette with at least one entry', () => {
+    const parsed = JSON.parse(out['theme.json']);
+    assert.ok(Array.isArray(parsed.settings.color.palette));
+    assert.ok(parsed.settings.color.palette.length > 0);
+    // At least one entry should have a hex color derived from semantics
+    const actionPrimary = parsed.settings.color.palette.find(p => p.slug === 'action-primary');
+    assert.ok(actionPrimary);
+    assert.equal(actionPrimary.color.toLowerCase(), '#0066cc');
+  });
+
+  it('theme.json is version 3', () => {
+    const parsed = JSON.parse(out['theme.json']);
+    assert.equal(parsed.version, 3);
+  });
+
+  it('style.css contains Theme Name and --action-primary custom prop', () => {
+    assert.ok(out['style.css'].includes('Theme Name:'));
+    assert.ok(out['style.css'].includes('--action-primary:'));
+  });
+
+  it('functions.php starts with <?php', () => {
+    assert.ok(out['functions.php'].startsWith('<?php'));
+  });
+});
+
+// ── formatAgentRules ────────────────────────────────────────────
+
+describe('formatAgentRules', () => {
+  const tokens = formatDtcgTokens(mockDesign);
+  const url = 'https://example.com';
+  const designWithRegions = { ...mockDesign, regions: [{ role: 'hero' }, { role: 'footer' }] };
+  const out = formatAgentRules({ design: designWithRegions, tokens, url });
+
+  it('emits all four files, each non-empty', () => {
+    for (const key of [
+      '.cursor/rules/designlang.mdc',
+      '.claude/skills/designlang/SKILL.md',
+      'CLAUDE.md.fragment',
+      'agents.md',
+    ]) {
+      assert.ok(typeof out[key] === 'string' && out[key].length > 0, `missing ${key}`);
+    }
+  });
+
+  it('Cursor .mdc begins with frontmatter containing alwaysApply: true', () => {
+    const mdc = out['.cursor/rules/designlang.mdc'];
+    assert.ok(mdc.startsWith('---'), 'expected frontmatter start');
+    const fm = mdc.split('---')[1];
+    assert.ok(fm.includes('alwaysApply: true'), 'expected alwaysApply: true');
+  });
+
+  it('all four files reference the source URL', () => {
+    for (const key of Object.keys(out)) {
+      assert.ok(out[key].includes(url), `${key} missing url`);
+    }
+  });
+
+  it('all four files contain resolved hex for semantic.color.action.primary', () => {
+    // mockDesign primary is #0066cc — resolved value should appear verbatim,
+    // and the raw DTCG reference must not leak.
+    for (const key of Object.keys(out)) {
+      assert.ok(out[key].toLowerCase().includes('#0066cc'), `${key} missing resolved hex`);
+      assert.ok(!out[key].includes('{primitive.color.brand.primary}'), `${key} leaked raw DTCG ref`);
+    }
+  });
+});

package/tests/mcp.test.js

@@ -0,0 +1,68 @@
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { buildResources } from '../src/mcp/resources.js';
+import { buildTools } from '../src/mcp/tools.js';
+
+const tokens = {
+  $metadata: { source: 'https://x.com' },
+  primitive: { color: { brand: { primary: { $value: '#3b82f6', $type: 'color' } } } },
+  semantic: { color: { action: { primary: { $value: '{primitive.color.brand.primary}', $type: 'color' } } } },
+};
+const design = {
+  colors: { all: ['#000', '#111', '#555', '#fff'] },
+  regions: [{ role: 'hero', bounds: { x:0,y:0,w:1280,h:600 }, heading: 'Build' }],
+  componentClusters: [{ kind: 'button', instanceCount: 5, variants: [{ css: { bg: '#3b82f6' }, instanceCount: 3 }] }],
+  accessibility: { remediation: [{ fg:'#eee', bg:'#fff', ratio:1.1, rule:'AA-normal', suggestion:{replace:'fg',color:'#000',newRatio:21}}] },
+  cssHealth: null,
+};
+
+describe('MCP resources', () => {
+  it('lists five URIs', () => {
+    const r = buildResources({ design, tokens });
+    assert.equal(r.list().length, 5);
+    assert.ok(r.list().find(x => x.uri === 'designlang://tokens/semantic'));
+  });
+  it('reads semantic tokens', () => {
+    const r = buildResources({ design, tokens });
+    const out = r.read('designlang://tokens/semantic');
+    const body = JSON.parse(out.text);
+    assert.ok(body.color?.action?.primary);
+  });
+  it('throws for unknown uri', () => {
+    const r = buildResources({ design, tokens });
+    assert.throws(() => r.read('designlang://nope'));
+  });
+});
+
+describe('MCP tools', () => {
+  it('search_tokens finds semantic token by substring', async () => {
+    const t = buildTools({ design, tokens });
+    const res = await t.call('search_tokens', { query: 'action.primary' });
+    assert.ok(JSON.stringify(res.matches).includes('action.primary'));
+  });
+  it('find_nearest_color returns a palette color passing AA', async () => {
+    const t = buildTools({ design, tokens });
+    const res = await t.call('find_nearest_color', { hex: '#ffffff', level: 'AA-normal' });
+    assert.ok(res.color);
+    assert.ok(res.newRatio >= 4.5);
+  });
+  it('get_region returns hero', async () => {
+    const t = buildTools({ design, tokens });
+    const res = await t.call('get_region', { name: 'hero' });
+    assert.equal(res.role, 'hero');
+  });
+  it('get_component returns button cluster', async () => {
+    const t = buildTools({ design, tokens });
+    const res = await t.call('get_component', { name: 'button' });
+    assert.equal(res.kind, 'button');
+  });
+  it('list_failing_contrast_pairs returns remediation array', async () => {
+    const t = buildTools({ design, tokens });
+    const res = await t.call('list_failing_contrast_pairs');
+    assert.equal(res.length, 1);
+  });
+  it('throws on unknown tool', async () => {
+    const t = buildTools({ design, tokens });
+    await assert.rejects(() => t.call('nope', {}));
+  });
+});