designlang 7.1.0 → 8.0.0

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/utils.test.js

@@ -1,413 +0,0 @@
-import { describe, it } from 'node:test';
-import assert from 'node:assert/strict';
-import {
-  parseColor,
-  rgbToHex,
-  rgbToHsl,
-  colorDistance,
-  clusterColors,
-  clusterValues,
-  parseCSSValue,
-  detectScale,
-  nameFromUrl,
-  isSaturated,
-  safeName,
-  remToPx,
-  pxToRem,
-} from '../src/utils.js';
-
-// ── parseColor ──────────────────────────────────────────────────
-
-describe('parseColor', () => {
-  it('returns null for null/undefined/empty/none/inherit', () => {
-    assert.equal(parseColor(null), null);
-    assert.equal(parseColor(undefined), null);
-    assert.equal(parseColor(''), null);
-    assert.equal(parseColor('none'), null);
-    assert.equal(parseColor('inherit'), null);
-    assert.equal(parseColor('initial'), null);
-    assert.equal(parseColor('currentcolor'), null);
-  });
-
-  it('parses 3-digit hex (#RGB)', () => {
-    const c = parseColor('#f00');
-    assert.deepEqual(c, { r: 255, g: 0, b: 0, a: 1 });
-  });
-
-  it('parses 6-digit hex (#RRGGBB)', () => {
-    const c = parseColor('#0066cc');
-    assert.deepEqual(c, { r: 0, g: 102, b: 204, a: 1 });
-  });
-
-  it('parses 8-digit hex (#RRGGBBAA)', () => {
-    const c = parseColor('#0066cc80');
-    assert.equal(c.r, 0);
-    assert.equal(c.g, 102);
-    assert.equal(c.b, 204);
-    assert.ok(Math.abs(c.a - 128 / 255) < 0.01);
-  });
-
-  it('parses 4-digit hex (#RGBA)', () => {
-    const c = parseColor('#f008');
-    assert.equal(c.r, 255);
-    assert.equal(c.g, 0);
-    assert.equal(c.b, 0);
-    assert.ok(Math.abs(c.a - 0x88 / 255) < 0.01);
-  });
-
-  it('parses rgb(r, g, b)', () => {
-    const c = parseColor('rgb(100, 200, 50)');
-    assert.deepEqual(c, { r: 100, g: 200, b: 50, a: 1 });
-  });
-
-  it('parses rgba(r, g, b, a)', () => {
-    const c = parseColor('rgba(100, 200, 50, 0.5)');
-    assert.deepEqual(c, { r: 100, g: 200, b: 50, a: 0.5 });
-  });
-
-  it('parses hsl(h, s%, l%)', () => {
-    const c = parseColor('hsl(0, 100%, 50%)');
-    assert.equal(c.r, 255);
-    assert.equal(c.g, 0);
-    assert.equal(c.b, 0);
-    assert.equal(c.a, 1);
-  });
-
-  it('parses hsla(h, s%, l%, a)', () => {
-    const c = parseColor('hsla(0, 100%, 50%, 0.5)');
-    assert.equal(c.r, 255);
-    assert.equal(c.a, 0.5);
-  });
-
-  it('parses modern hsl syntax: hsl(210 50% 40%)', () => {
-    const c = parseColor('hsl(210 50% 40%)');
-    assert.ok(c);
-    assert.equal(c.a, 1);
-    // hsl(210, 50%, 40%) -> some shade of blue
-    assert.ok(c.b > c.r);
-  });
-
-  it('parses modern hsl syntax with alpha: hsl(210 50% 40% / 0.5)', () => {
-    const c = parseColor('hsl(210 50% 40% / 0.5)');
-    assert.ok(c);
-    assert.equal(c.a, 0.5);
-  });
-
-  it('parses oklch(L C H)', () => {
-    const c = parseColor('oklch(0.5 0.2 270)');
-    assert.ok(c);
-    assert.equal(c.a, 1);
-    assert.ok(c.r >= 0 && c.r <= 255);
-  });
-
-  it('parses oklch with alpha', () => {
-    const c = parseColor('oklch(0.5 0.2 270 / 0.8)');
-    assert.ok(c);
-    assert.equal(c.a, 0.8);
-  });
-
-  it('parses oklab(L a b)', () => {
-    const c = parseColor('oklab(0.5 0.1 -0.1)');
-    assert.ok(c);
-    assert.equal(c.a, 1);
-    assert.ok(c.r >= 0 && c.r <= 255);
-  });
-
-  it('parses color-mix(in srgb, ...)', () => {
-    const c = parseColor('color-mix(in srgb, #ff0000 50%, #0000ff)');
-    assert.ok(c);
-    // Should be roughly halfway between red and blue
-    assert.ok(c.r > 100);
-    assert.ok(c.b > 100);
-  });
-
-  it('parses named colors', () => {
-    const c = parseColor('red');
-    assert.deepEqual(c, { r: 255, g: 0, b: 0, a: 1 });
-  });
-
-  it('parses named color white', () => {
-    const c = parseColor('white');
-    assert.deepEqual(c, { r: 255, g: 255, b: 255, a: 1 });
-  });
-
-  it('parses named colors case-insensitively', () => {
-    const c = parseColor('RED');
-    assert.deepEqual(c, { r: 255, g: 0, b: 0, a: 1 });
-  });
-
-  it('returns null for unrecognized strings', () => {
-    assert.equal(parseColor('not-a-color'), null);
-    assert.equal(parseColor('blahblah'), null);
-  });
-});
-
-// ── rgbToHex ────────────────────────────────────────────────────
-
-describe('rgbToHex', () => {
-  it('converts black', () => {
-    assert.equal(rgbToHex({ r: 0, g: 0, b: 0 }), '#000000');
-  });
-
-  it('converts white', () => {
-    assert.equal(rgbToHex({ r: 255, g: 255, b: 255 }), '#ffffff');
-  });
-
-  it('converts a mid color', () => {
-    assert.equal(rgbToHex({ r: 0, g: 102, b: 204 }), '#0066cc');
-  });
-});
-
-// ── rgbToHsl ────────────────────────────────────────────────────
-
-describe('rgbToHsl', () => {
-  it('converts pure red', () => {
-    const hsl = rgbToHsl({ r: 255, g: 0, b: 0 });
-    assert.equal(hsl.h, 0);
-    assert.equal(hsl.s, 100);
-    assert.equal(hsl.l, 50);
-  });
-
-  it('converts pure green (CSS green = 0,128,0)', () => {
-    const hsl = rgbToHsl({ r: 0, g: 128, b: 0 });
-    assert.equal(hsl.h, 120);
-    assert.equal(hsl.l, 25);
-  });
-
-  it('converts gray (achromatic)', () => {
-    const hsl = rgbToHsl({ r: 128, g: 128, b: 128 });
-    assert.equal(hsl.h, 0);
-    assert.equal(hsl.s, 0);
-    assert.equal(hsl.l, 50);
-  });
-
-  it('converts white', () => {
-    const hsl = rgbToHsl({ r: 255, g: 255, b: 255 });
-    assert.equal(hsl.l, 100);
-    assert.equal(hsl.s, 0);
-  });
-});
-
-// ── colorDistance ────────────────────────────────────────────────
-
-describe('colorDistance', () => {
-  it('returns 0 for identical colors', () => {
-    assert.equal(colorDistance({ r: 100, g: 100, b: 100 }, { r: 100, g: 100, b: 100 }), 0);
-  });
-
-  it('returns correct Euclidean distance', () => {
-    const d = colorDistance({ r: 0, g: 0, b: 0 }, { r: 255, g: 255, b: 255 });
-    assert.ok(Math.abs(d - Math.sqrt(3 * 255 * 255)) < 0.01);
-  });
-
-  it('returns small distance for similar colors', () => {
-    const d = colorDistance({ r: 100, g: 100, b: 100 }, { r: 105, g: 100, b: 100 });
-    assert.ok(d < 10);
-  });
-});
-
-// ── clusterColors ───────────────────────────────────────────────
-
-describe('clusterColors', () => {
-  it('groups similar colors together', () => {
-    const colors = [
-      { hex: '#ff0000', parsed: { r: 255, g: 0, b: 0 }, count: 10 },
-      { hex: '#ff0505', parsed: { r: 255, g: 5, b: 5 }, count: 5 },
-      { hex: '#0000ff', parsed: { r: 0, g: 0, b: 255 }, count: 3 },
-    ];
-    const clusters = clusterColors(colors, 15);
-    // Red shades should be grouped, blue separate
-    assert.equal(clusters.length, 2);
-    assert.equal(clusters[0].count, 15); // red cluster total
-    assert.equal(clusters[1].count, 3);  // blue cluster
-  });
-
-  it('returns each color as its own cluster when threshold is 0', () => {
-    const colors = [
-      { hex: '#ff0000', parsed: { r: 255, g: 0, b: 0 }, count: 10 },
-      { hex: '#ff0505', parsed: { r: 255, g: 5, b: 5 }, count: 5 },
-    ];
-    const clusters = clusterColors(colors, 0);
-    assert.equal(clusters.length, 2);
-  });
-
-  it('sorts clusters by count descending', () => {
-    const colors = [
-      { hex: '#0000ff', parsed: { r: 0, g: 0, b: 255 }, count: 3 },
-      { hex: '#ff0000', parsed: { r: 255, g: 0, b: 0 }, count: 10 },
-    ];
-    const clusters = clusterColors(colors, 15);
-    assert.ok(clusters[0].count >= clusters[clusters.length - 1].count);
-  });
-});
-
-// ── clusterValues ───────────────────────────────────────────────
-
-describe('clusterValues', () => {
-  it('groups nearby numbers', () => {
-    const result = clusterValues([4, 5, 8, 16, 17, 32], 2);
-    // 4 and 5 cluster -> 4; 8 standalone; 16 and 17 cluster -> 16; 32 standalone
-    assert.ok(result.includes(4));
-    assert.ok(result.includes(8));
-    assert.ok(result.includes(16));
-    assert.ok(result.includes(32));
-    assert.ok(!result.includes(5));
-    assert.ok(!result.includes(17));
-  });
-
-  it('returns all values when threshold is 0', () => {
-    const result = clusterValues([1, 2, 3], 0);
-    assert.deepEqual(result, [1, 2, 3]);
-  });
-});
-
-// ── parseCSSValue ───────────────────────────────────────────────
-
-describe('parseCSSValue', () => {
-  it('parses px values', () => {
-    const r = parseCSSValue('16px');
-    assert.deepEqual(r, { value: 16, unit: 'px' });
-  });
-
-  it('parses rem values', () => {
-    const r = parseCSSValue('1.5rem');
-    assert.deepEqual(r, { value: 1.5, unit: 'rem' });
-  });
-
-  it('parses em values', () => {
-    const r = parseCSSValue('2em');
-    assert.deepEqual(r, { value: 2, unit: 'em' });
-  });
-
-  it('parses percentage values', () => {
-    const r = parseCSSValue('100%');
-    assert.deepEqual(r, { value: 100, unit: '%' });
-  });
-
-  it('parses unitless numbers', () => {
-    const r = parseCSSValue('1.5');
-    assert.deepEqual(r, { value: 1.5, unit: '' });
-  });
-
-  it('returns null for normal/auto/none', () => {
-    assert.equal(parseCSSValue('normal'), null);
-    assert.equal(parseCSSValue('auto'), null);
-    assert.equal(parseCSSValue('none'), null);
-  });
-
-  it('returns null for null/undefined', () => {
-    assert.equal(parseCSSValue(null), null);
-    assert.equal(parseCSSValue(undefined), null);
-  });
-});
-
-// ── detectScale ─────────────────────────────────────────────────
-
-describe('detectScale', () => {
-  it('detects a base unit for multiples-of-4 scale', () => {
-    // All values are divisible by 2 and 4; the algorithm picks the first
-    // candidate (2) that reaches the 60% threshold, so base is 2.
-    const result = detectScale([4, 8, 12, 16, 24, 32, 48, 64]);
-    assert.ok(result.base !== null);
-    assert.ok([2, 4].includes(result.base));
-  });
-
-  it('detects a base unit for multiples-of-8 scale', () => {
-    const result = detectScale([8, 16, 24, 32, 40, 48, 56, 64]);
-    assert.ok(result.base !== null);
-    assert.ok([2, 4, 8].includes(result.base));
-  });
-
-  it('returns null base for fewer than 3 values', () => {
-    const result = detectScale([10, 20]);
-    assert.equal(result.base, null);
-  });
-
-  it('returns null base for arbitrary values', () => {
-    const result = detectScale([3, 7, 11, 19, 37, 53]);
-    assert.equal(result.base, null);
-  });
-});
-
-// ── nameFromUrl ─────────────────────────────────────────────────
-
-describe('nameFromUrl', () => {
-  it('extracts hostname and makes it safe', () => {
-    // safeName replaces dots with hyphens
-    assert.equal(nameFromUrl('https://www.example.com/page'), 'example-com');
-  });
-
-  it('strips www prefix', () => {
-    const name = nameFromUrl('https://www.google.com');
-    assert.ok(!name.startsWith('www'));
-  });
-
-  it('returns unknown-site for invalid URLs', () => {
-    assert.equal(nameFromUrl('not a url'), 'unknown-site');
-  });
-
-  it('handles complex domains', () => {
-    const name = nameFromUrl('https://my-app.vercel.app/dashboard');
-    assert.equal(name, 'my-app-vercel-app');
-  });
-});
-
-// ── isSaturated ─────────────────────────────────────────────────
-
-describe('isSaturated', () => {
-  it('returns true for a saturated color', () => {
-    assert.equal(isSaturated({ r: 255, g: 0, b: 0 }), true);
-  });
-
-  it('returns false for gray', () => {
-    assert.equal(isSaturated({ r: 128, g: 128, b: 128 }), false);
-  });
-
-  it('returns false for white', () => {
-    assert.equal(isSaturated({ r: 255, g: 255, b: 255 }), false);
-  });
-
-  it('returns false for black', () => {
-    assert.equal(isSaturated({ r: 0, g: 0, b: 0 }), false);
-  });
-});
-
-// ── safeName ────────────────────────────────────────────────────
-
-describe('safeName', () => {
-  it('replaces special characters with hyphens', () => {
-    assert.equal(safeName('Hello World!'), 'hello-world');
-  });
-
-  it('collapses multiple hyphens', () => {
-    assert.equal(safeName('a--b---c'), 'a-b-c');
-  });
-
-  it('trims leading/trailing hyphens', () => {
-    assert.equal(safeName('--test--'), 'test');
-  });
-});
-
-// ── remToPx / pxToRem ──────────────────────────────────────────
-
-describe('remToPx', () => {
-  it('converts with default base 16', () => {
-    assert.equal(remToPx(1), 16);
-    assert.equal(remToPx(2), 32);
-  });
-
-  it('converts with custom base', () => {
-    assert.equal(remToPx(1, 10), 10);
-  });
-});
-
-describe('pxToRem', () => {
-  it('converts with default base 16', () => {
-    assert.equal(pxToRem(16), 1);
-    assert.equal(pxToRem(32), 2);
-  });
-
-  it('converts with custom base', () => {
-    assert.equal(pxToRem(10, 10), 1);
-  });
-});

package/website/.claude/launch.json

@@ -1,11 +0,0 @@
-{
-  "version": "0.0.1",
-  "configurations": [
-    {
-      "name": "website",
-      "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "dev"],
-      "port": 3000
-    }
-  ]
-}

package/website/AGENTS.md

@@ -1,5 +0,0 @@
-<!-- BEGIN:nextjs-agent-rules -->
-# This is NOT the Next.js you know
-
-This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
-<!-- END:nextjs-agent-rules -->

package/website/CLAUDE.md

@@ -1 +0,0 @@
-@AGENTS.md

package/website/README.md

@@ -1,36 +0,0 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.