designlang 7.2.0 → 8.0.0

package/tests/interaction-states.test.js

@@ -1,62 +0,0 @@
-import { describe, it } from 'node:test';
-import assert from 'node:assert/strict';
-import { extractInteractionStates } from '../src/extractors/interaction-states.js';
-
-describe('extractInteractionStates', () => {
-  it('returns a default shape on empty input', () => {
-    const r = extractInteractionStates(null);
-    assert.equal(r.scrollSettled, false);
-    assert.equal(r.menusOpened, 0);
-    assert.deepEqual(r.modals, []);
-    assert.equal(r.hover.sampled, 0);
-  });
-
-  it('computes hover deltas between before/after style snapshots', () => {
-    const r = extractInteractionStates({
-      scrollSettled: true,
-      menusOpened: 2,
-      hoverSamples: [
-        {
-          selector: 'button:nth-of-type(1)',
-          before: { color: 'rgb(0,0,0)', backgroundColor: 'rgb(255,255,255)' },
-          after: { color: 'rgb(0,0,0)', backgroundColor: 'rgb(240,240,240)' },
-        },
-        {
-          selector: 'a:nth-of-type(1)',
-          before: { color: 'rgb(0,0,0)' },
-          after: { color: 'rgb(0,0,0)' },
-        },
-      ],
-      accordionsOpened: 3,
-      modals: [],
-    });
-    assert.equal(r.hover.sampled, 2);
-    assert.equal(r.hover.changed, 1);
-    assert.equal(r.hover.deltas[0].changes.backgroundColor.from, 'rgb(255,255,255)');
-    assert.equal(r.hover.deltas[0].changes.backgroundColor.to, 'rgb(240,240,240)');
-    assert.equal(r.accordionsOpened, 3);
-    assert.equal(r.menusOpened, 2);
-    assert.equal(r.scrollSettled, true);
-  });
-
-  it('normalizes modal snapshots', () => {
-    const r = extractInteractionStates({
-      modals: [
-        { trigger: 'Sign in', snapshot: { tag: 'dialog', role: 'dialog', bg: 'rgb(255,255,255)', color: 'rgb(17,17,17)', boxShadow: '0 10px 30px rgba(0,0,0,.2)', borderRadius: '12px', width: 400, height: 300 } },
-      ],
-    });
-    assert.equal(r.modals.length, 1);
-    assert.equal(r.modals[0].trigger, 'Sign in');
-    assert.equal(r.modals[0].bg, 'rgb(255,255,255)');
-    assert.equal(r.modals[0].width, 400);
-  });
-
-  it('handles missing snapshot fields gracefully', () => {
-    const r = extractInteractionStates({
-      hoverSamples: [{ selector: 'x', before: null, after: null }],
-      modals: [{ trigger: 'Menu' }],
-    });
-    assert.equal(r.hover.changed, 0);
-    assert.equal(r.modals[0].bg, '');
-  });
-});

package/tests/mcp.test.js

@@ -1,68 +0,0 @@
-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', {}));
-  });
-});

package/tests/modern-css.test.js

@@ -1,104 +0,0 @@
-import { describe, it } from 'node:test';
-import assert from 'node:assert/strict';
-import { extractModernCss } from '../src/extractors/modern-css.js';
-
-function mkStyle(overrides = {}) {
-  return {
-    tag: 'div',
-    classList: '',
-    fontVariationSettings: 'normal',
-    fontFeatureSettings: 'normal',
-    textWrap: '',
-    textDecorationStyle: '',
-    textDecorationThickness: '',
-    textUnderlineOffset: '',
-    pseudo: null,
-    ...overrides,
-  };
-}
-
-describe('extractModernCss', () => {
-  it('returns zeroed structure for empty payload', () => {
-    const r = extractModernCss({});
-    assert.equal(r.pseudoElements.count, 0);
-    assert.equal(r.variableFonts.count, 0);
-    assert.equal(r.containerQueries.count, 0);
-    assert.deepEqual(r.envUsage, []);
-  });
-
-  it('counts pseudo-elements and captures samples', () => {
-    const light = {
-      computedStyles: [
-        mkStyle({ tag: 'a', pseudo: { before: { content: '"→"', color: 'red' }, after: null } }),
-        mkStyle({ tag: 'li', pseudo: { before: { content: '"•"' }, after: { content: '"x"' } } }),
-      ],
-    };
-    const r = extractModernCss({ light });
-    assert.equal(r.pseudoElements.count, 3);
-    assert.ok(r.pseudoElements.samples.length >= 2);
-    assert.equal(r.pseudoElements.samples[0].which, '::before');
-  });
-
-  it('aggregates variable-font axes with min/max', () => {
-    const light = {
-      computedStyles: [
-        mkStyle({ fontVariationSettings: '"wght" 400, "slnt" 0' }),
-        mkStyle({ fontVariationSettings: '"wght" 700, "slnt" -8' }),
-      ],
-    };
-    const r = extractModernCss({ light });
-    assert.equal(r.variableFonts.count, 2);
-    const wght = r.variableFonts.axes.find(a => a.axis === 'wght');
-    assert.ok(wght);
-    assert.equal(wght.min, 400);
-    assert.equal(wght.max, 700);
-    const slnt = r.variableFonts.axes.find(a => a.axis === 'slnt');
-    assert.equal(slnt.min, -8);
-    assert.equal(slnt.max, 0);
-  });
-
-  it('collects OpenType features and counts', () => {
-    const light = {
-      computedStyles: [
-        mkStyle({ fontFeatureSettings: '"ss01" on, "cv11"' }),
-        mkStyle({ fontFeatureSettings: '"ss01"' }),
-      ],
-    };
-    const r = extractModernCss({ light });
-    const ss01 = r.openTypeFeatures.find(f => f.feature === 'ss01');
-    assert.equal(ss01.count, 2);
-    const cv11 = r.openTypeFeatures.find(f => f.feature === 'cv11');
-    assert.equal(cv11.count, 1);
-  });
-
-  it('collects modern text-layout properties', () => {
-    const light = {
-      computedStyles: [
-        mkStyle({ textWrap: 'balance', textDecorationStyle: 'wavy', textDecorationThickness: '2px', textUnderlineOffset: '3px' }),
-        mkStyle({ textWrap: 'balance' }),
-        mkStyle({ textWrap: 'pretty' }),
-      ],
-    };
-    const r = extractModernCss({ light });
-    const balance = r.textWrap.wrap.find(w => w.value === 'balance');
-    assert.equal(balance.count, 2);
-    assert.equal(r.textWrap.decorationStyle[0].value, 'wavy');
-    assert.equal(r.textWrap.decorationThickness[0].value, '2px');
-    assert.equal(r.textWrap.underlineOffset[0].value, '3px');
-  });
-
-  it('passes through container queries and env() usage', () => {
-    const light = {
-      computedStyles: [],
-      containerQueries: [
-        { condition: '(min-width: 480px)', selectorText: '.card', declarationCount: 3 },
-      ],
-      envUsage: ['safe-area-inset-top', 'safe-area-inset-top', 'viewport-segment-top'],
-    };
-    const r = extractModernCss({ light });
-    assert.equal(r.containerQueries.count, 1);
-    assert.equal(r.containerQueries.rules[0].condition, '(min-width: 480px)');
-    assert.equal(r.envUsage.length, 2);
-    assert.ok(r.envUsage.includes('safe-area-inset-top'));
-  });
-});

package/tests/routes-reconciliation.test.js

@@ -1,120 +0,0 @@
-import { describe, it } from 'node:test';
-import assert from 'node:assert/strict';
-import { reconcileRoutes, slugForPath, formatRoutesReport } from '../src/formatters/routes-reconciliation.js';
-
-function leaf(v) { return { $value: v, $type: 'color' }; }
-
-const baseTokens = {
-  primitive: {
-    color: {
-      brand: { primary: leaf('#ff0000'), secondary: leaf('#00ff00') },
-      neutral: { 100: leaf('#ffffff') },
-    },
-  },
-  semantic: {},
-};
-
-describe('slugForPath', () => {
-  it('treats / and empty as index', () => {
-    assert.equal(slugForPath('/'), 'index');
-    assert.equal(slugForPath(''), 'index');
-    assert.equal(slugForPath(null), 'index');
-  });
-  it('slugifies standard paths', () => {
-    assert.equal(slugForPath('/pricing'), 'pricing');
-    assert.equal(slugForPath('/docs/getting-started'), 'docs-getting-started');
-  });
-});
-
-describe('reconcileRoutes', () => {
-  it('returns empty-safe output for no routes', () => {
-    const r = reconcileRoutes([]);
-    assert.equal(r.summary.routeCount, 0);
-    assert.equal(r.summary.sharedTokenCount, 0);
-    assert.deepEqual(r.perRoute, {});
-  });
-
-  it('intersects identical tokens across routes into shared', () => {
-    const routes = [
-      { url: 'https://x.com/', path: '/', tokens: baseTokens },
-      { url: 'https://x.com/about', path: '/about', tokens: baseTokens },
-    ];
-    const r = reconcileRoutes(routes);
-    assert.equal(r.summary.routeCount, 2);
-    assert.ok(r.summary.sharedTokenCount >= 3);
-    // shared tree has the primitive.color.brand.primary leaf
-    assert.equal(r.shared.primitive.color.brand.primary.$value, '#ff0000');
-    // neither route should have "added" or "changed" entries
-    assert.deepEqual(r.perRoute.index.added, {});
-    assert.deepEqual(r.perRoute.index.changed, {});
-    assert.deepEqual(r.perRoute.about.added, {});
-  });
-
-  it('emits `added` tokens for a route that has unique tokens', () => {
-    const priceTokens = {
-      primitive: {
-        color: {
-          brand: { primary: leaf('#ff0000'), secondary: leaf('#00ff00') },
-          neutral: { 100: leaf('#ffffff') },
-          accent: { gold: leaf('#ffd700') }, // unique to /pricing
-        },
-      },
-      semantic: {},
-    };
-    const routes = [
-      { url: 'https://x.com/', path: '/', tokens: baseTokens },
-      { url: 'https://x.com/pricing', path: '/pricing', tokens: priceTokens },
-    ];
-    const r = reconcileRoutes(routes);
-    assert.equal(r.perRoute.pricing.added.primitive.color.accent.gold.$value, '#ffd700');
-    // The base route has no "added" since all its tokens are shared or absent.
-    assert.deepEqual(r.perRoute.index.added, {});
-  });
-
-  it('emits `changed` when a route overrides an otherwise-shared token value', () => {
-    const darkTokens = {
-      primitive: {
-        color: {
-          brand: { primary: leaf('#aa0000'), secondary: leaf('#00ff00') }, // primary differs
-          neutral: { 100: leaf('#ffffff') },
-        },
-      },
-      semantic: {},
-    };
-    const routes = [
-      { url: 'https://x.com/', path: '/', tokens: baseTokens },
-      { url: 'https://x.com/dark', path: '/dark', tokens: darkTokens },
-    ];
-    const r = reconcileRoutes(routes);
-    // primary shouldn't be shared because values disagree
-    assert.ok(!('primary' in (r.shared.primitive?.color?.brand || {})),
-      'disagreeing primary should not be shared');
-    // both routes should have primary in their `changed` bucket
-    assert.equal(r.perRoute.index.changed.primitive.color.brand.primary.$value, '#ff0000');
-    assert.equal(r.perRoute.dark.changed.primitive.color.brand.primary.$value, '#aa0000');
-    assert.ok(r.summary.drift.length >= 2);
-  });
-
-  it('resolves slug collisions by appending a numeric suffix', () => {
-    const routes = [
-      { url: 'https://x.com/docs/a', path: '/docs-a', tokens: baseTokens },
-      { url: 'https://x.com/docs-a/', path: '/docs-a', tokens: baseTokens },
-    ];
-    const r = reconcileRoutes(routes);
-    const slugs = Object.keys(r.perRoute);
-    assert.equal(slugs.length, 2);
-    assert.ok(slugs.includes('docs-a'));
-    assert.ok(slugs.some(s => s.startsWith('docs-a-')));
-  });
-
-  it('formatRoutesReport produces readable markdown', () => {
-    const routes = [
-      { url: 'https://x.com/', path: '/', tokens: baseTokens },
-      { url: 'https://x.com/pricing', path: '/pricing', tokens: baseTokens },
-    ];
-    const md = formatRoutesReport(reconcileRoutes(routes));
-    assert.match(md, /Routes crawled.*2/);
-    assert.match(md, /Shared tokens/);
-    assert.match(md, /pricing/);
-  });
-});