designlang 7.2.0 → 8.0.0

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/tests/wide-gamut.test.js

@@ -1,90 +0,0 @@
-import { describe, it } from 'node:test';
-import assert from 'node:assert/strict';
-import { oklchToSrgb, oklabToSrgb, oklchLikeToHex, parseOklchOrOklab, rgbToHex } from '../src/utils/color-gamut.js';
-import { extractWideGamut } from '../src/extractors/wide-gamut.js';
-import { extractTokenSources } from '../src/extractors/token-sources.js';
-
-describe('color-gamut', () => {
-  it('converts oklch(1 0 0) to white', () => {
-    const hex = oklchLikeToHex('oklch(1 0 0)');
-    assert.equal(hex, '#ffffff');
-  });
-
-  it('converts oklch(0 0 0) to black', () => {
-    const hex = oklchLikeToHex('oklch(0 0 0)');
-    assert.equal(hex, '#000000');
-  });
-
-  it('converts a mid-chroma oklch to approximate sRGB', () => {
-    // oklch(62.8% 0.258 29.23) ≈ red (#ff0000) region
-    const hex = oklchLikeToHex('oklch(62.8% 0.258 29.23)');
-    assert.ok(/^#[0-9a-f]{6}$/.test(hex));
-    // Red channel should dominate
-    const r = parseInt(hex.slice(1, 3), 16);
-    const g = parseInt(hex.slice(3, 5), 16);
-    const b = parseInt(hex.slice(5, 7), 16);
-    assert.ok(r > g, `expected r>g, got ${hex}`);
-    assert.ok(r > b, `expected r>b, got ${hex}`);
-  });
-
-  it('parses oklab values with percentages', () => {
-    const p = parseOklchOrOklab('oklab(62.8% 0.1 -0.1)');
-    assert.equal(p.type, 'oklab');
-    assert.ok(Math.abs(p.L - 0.628) < 1e-6);
-  });
-
-  it('rgbToHex clamps and formats correctly', () => {
-    assert.equal(rgbToHex(1, 0, 0), '#ff0000');
-    assert.equal(rgbToHex(0, 1, 0), '#00ff00');
-    assert.equal(rgbToHex(1.5, -0.5, 0.5), '#ff0080');
-  });
-});
-
-describe('extractWideGamut', () => {
-  it('returns zeros for empty input', () => {
-    const r = extractWideGamut([]);
-    assert.equal(r.totalCount, 0);
-    assert.equal(r.oklch.count, 0);
-  });
-
-  it('buckets colors by type and emits hex for oklch samples', () => {
-    const r = extractWideGamut([
-      { raw: 'oklch(62.8% 0.258 29.23)', type: 'oklch', property: 'color', selector: '.btn' },
-      { raw: 'color-mix(in oklab, red, blue)', type: 'color-mix', property: 'background', selector: '.x' },
-      { raw: 'light-dark(white, black)', type: 'light-dark', property: 'color', selector: '.y' },
-      { raw: 'color(display-p3 1 0 0)', type: 'display-p3', property: 'background', selector: '.p3' },
-    ]);
-    assert.equal(r.oklch.count, 1);
-    assert.ok(r.oklch.samples[0].value?.startsWith('#'));
-    assert.equal(r.colorMix.count, 1);
-    assert.equal(r.lightDark.count, 1);
-    assert.equal(r.displayP3.count, 1);
-    assert.equal(r.totalCount, 4);
-  });
-});
-
-describe('extractTokenSources', () => {
-  it('returns an array of token→sourceUrl entries based on first matching element', () => {
-    const design = {
-      colors: { primary: { hex: '#0072f5' }, text: ['#111111'] },
-      typography: { families: [{ name: 'Geist' }] },
-      spacing: { base: 8 },
-      borders: { radii: [{ value: '8px' }] },
-    };
-    const styles = [
-      { color: 'rgb(0, 114, 245)', fontFamily: '"Geist", sans-serif', paddingTop: '8px', borderRadius: '8px', sources: [{ url: 'https://cdn.example/app.css', mediaText: '' }] },
-      { color: 'rgb(17, 17, 17)', sources: [{ url: 'https://cdn.example/text.css', mediaText: '' }] },
-    ];
-    const out = extractTokenSources(design, styles);
-    const primary = out.find(t => t.token === 'color.primary');
-    assert.equal(primary.sourceUrl, 'https://cdn.example/app.css');
-    const text = out.find(t => t.token === 'color.text');
-    assert.equal(text.sourceUrl, 'https://cdn.example/text.css');
-    const font = out.find(t => t.token === 'font.body');
-    assert.equal(font.sourceUrl, 'https://cdn.example/app.css');
-    const spacing = out.find(t => t.token === 'spacing.base');
-    assert.equal(spacing.sourceUrl, 'https://cdn.example/app.css');
-    const radius = out.find(t => t.token === 'radius.base');
-    assert.equal(radius.sourceUrl, 'https://cdn.example/app.css');
-  });
-});

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.