designlang 7.1.0 → 7.2.0

package/tests/routes-reconciliation.test.js

@@ -0,0 +1,120 @@
+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/);
+  });
+});

package/tests/wide-gamut.test.js

@@ -0,0 +1,90 @@
+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/app/page.js

@@ -187,8 +187,10 @@ function InstallTracks() {
 {`1  $ npx designlang <url>
 2  $ npx designlang <url> --platforms all
 3  $ npx designlang <url> --emit-agent-rules
-4  $ npx designlang <url> --tokens-legacy
-5  $ npx designlang <url> --dark`}
+4  $ npx designlang <url> --cookie-file ./cookies.txt
+5  $ npx designlang <url> --insecure
+6  $ npx designlang <url> --user-agent "custom-ua"
+7  $ npx designlang <url> --tokens-legacy`}
           </pre>
         </div>
 
@@ -246,26 +248,71 @@ function InstallTracks() {
             <li>agents.md</li>
           </ul>
         </div>
+
+        {/* Chrome extension */}
+        <div className="install-col">
+          <div style={colHead}>track 04 · new in v7.1</div>
+          <h3 className="display" style={colTitle}>Chrome extension</h3>
+          <p style={{ fontSize: 14, color: 'var(--ink-2)', marginBottom: 'var(--r3)', maxWidth: '34ch' }}>
+            One click from any tab. Opens this page with the URL prefilled.
+          </p>
+          <ol
+            className="mono"
+            style={{
+              padding: 0,
+              margin: 0,
+              listStylePosition: 'inside',
+              fontSize: 12,
+              lineHeight: 1.9,
+              color: 'var(--ink-2)',
+            }}
+          >
+            <li>clone the repo</li>
+            <li>open <code style={{ color: 'var(--ink)' }}>chrome://extensions</code></li>
+            <li>toggle developer mode</li>
+            <li>load unpacked → <code style={{ color: 'var(--ink)' }}>chrome-extension/</code></li>
+          </ol>
+          <p style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 'var(--r4)', fontStyle: 'italic', fontFamily: 'var(--font-display)' }}>
+            Manifest v3. Only permission: <code className="mono" style={{ fontStyle: 'normal' }}>activeTab</code>.
+          </p>
+          <a
+            href="https://github.com/Manavarya09/design-extract/tree/main/chrome-extension"
+            target="_blank"
+            rel="noopener"
+            className="mono"
+            style={{ display: 'inline-block', marginTop: 'var(--r3)', fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase' }}
+          >
+            source →
+          </a>
+        </div>
       </div>
 
       <style>{`
         .install-grid {
           display: grid;
-          grid-template-columns: repeat(3, minmax(0, 1fr));
+          grid-template-columns: repeat(4, minmax(0, 1fr));
           gap: 0;
         }
         .install-col {
-          padding: 0 var(--r5);
+          padding: 0 var(--r4);
         }
         .install-col:first-child { padding-left: 0; }
         .install-col:last-child { padding-right: 0; }
         .install-col + .install-col {
           border-left: 1px solid var(--ink);
         }
-        @media (max-width: 860px) {
-          .install-grid { grid-template-columns: 1fr; gap: var(--r6); }
-          .install-col { padding: 0; }
-          .install-col + .install-col { border-left: 0; border-top: 1px solid var(--ink); padding-top: var(--r5); }
+        @media (max-width: 1100px) {
+          .install-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
+          .install-col { padding: var(--r4) var(--r4); }
+          .install-col:nth-child(2n+1) { padding-left: 0; }
+          .install-col:nth-child(2n) { padding-right: 0; }
+          .install-col:nth-child(n+3) { border-top: 1px solid var(--ink); }
+          .install-col:nth-child(2n+1) { border-left: 0; }
+        }
+        @media (max-width: 640px) {
+          .install-grid { grid-template-columns: 1fr; gap: 0; }
+          .install-col { padding: var(--r5) 0; border-left: 0 !important; }
+          .install-col + .install-col { border-top: 1px solid var(--ink); }
         }
       `}</style>
     </div>