designlang 11.0.0 → 11.0.2

package/bin/design-extract.js

@@ -84,6 +84,7 @@ program
   .option('--user-agent <ua>', 'override the browser User-Agent string')
   .option('--insecure', 'ignore HTTPS/SSL certificate errors (self-signed, dev, proxies)')
   .option('--ignore <selectors...>', 'CSS selectors to remove before extraction')
+  .option('--ignore-widgets', 'Also ignore a curated list of third-party widgets (Intercom, Drift, HubSpot chat, cookie banners, reCAPTCHA, etc.)  See `designlang widgets`.')
   .option('--selector <css>', 'only extract design from elements matching this CSS selector (e.g. ".pricing-card")')
   .option('--system-chrome', 'use the system Chrome install instead of the bundled Chromium (skips the 150MB Playwright download)')
   .option('--tokens-legacy', 'Emit pre-v7 flat token JSON (backward compat)')
@@ -106,6 +107,11 @@ program
     const config = loadConfig();
     const merged = mergeConfig(opts, config);
 
+    if (merged.ignoreWidgets || opts.ignoreWidgets) {
+      const { widgetIgnoreList } = await import('../src/widgets.js');
+      merged.ignore = [...(merged.ignore || []), ...widgetIgnoreList()];
+    }
+
     // Validate URL
     validateUrl(url);
 
@@ -1056,6 +1062,15 @@ program
     }
   });
 
+// ── Widgets — print the curated third-party widget ignore list ─
+program
+  .command('widgets')
+  .description('Print the curated widget-ignore selector list used by --ignore-widgets')
+  .action(async () => {
+    const { WIDGET_SELECTORS } = await import('../src/widgets.js');
+    for (const s of WIDGET_SELECTORS) console.log(s);
+  });
+
 // ── CI command — single PR-comment-ready report ────────────
 program
   .command('ci <url>')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designlang",
-  "version": "11.0.0",
+  "version": "11.0.2",
   "description": "Extract the complete design language from any website and ship it — clone to a working Next.js starter, guard tokens with a CI drift bot, or browse everything in a local studio. Outputs W3C DTCG tokens, motion tokens, typed anatomy stubs, Tailwind config, and ready-to-paste v0 / Lovable / Cursor / Claude-Artifacts prompts.",
   "type": "module",
   "bin": {

package/src/formatters/prompt-pack.js

@@ -15,16 +15,16 @@ function typeFamilies(design) {
 
 function scaleSnippet(scale = []) {
   if (!scale.length) return '(not detected)';
-  return scale.slice(0, 8).map(s => (s.value || s) + (s.label ? ` (${s.label})` : '')).join(', ');
+  return scale.slice(0, 8).map(s => String(s.value ?? s) + (s.label ? ` (${s.label})` : '')).join(', ');
 }
 
 function radiiSnippet(borders) {
-  const r = (borders?.radii || []).slice(0, 6).map(x => (x.value || x).toString());
+  const r = (borders?.radii || []).slice(0, 6).map(x => String(x.value ?? x));
   return r.length ? r.join(', ') : '(none)';
 }
 
 function shadowSnippet(shadows) {
-  const s = (shadows?.values || []).slice(0, 3).map(x => (x.value || x).toString());
+  const s = (shadows?.values || []).slice(0, 3).map(x => String(x.raw ?? x.value ?? x));
   return s.length ? s.join(' | ') : '(none)';
 }
 
@@ -138,8 +138,8 @@ export function formatCursorPrompt(design) {
     'export const tokens = {',
     `  colors: [${b.colors.map(c => `'${c}'`).join(', ')}],`,
     `  fonts: [${b.fonts.map(f => `'${f}'`).join(', ')}],`,
-    `  radii: [${(design.borders?.radii || []).slice(0, 6).map(r => `'${(r.value || r)}'`).join(', ')}],`,
-    `  shadows: [${(design.shadows?.values || []).slice(0, 3).map(s => `'${(s.value || s).replace(/'/g, "\\'")}'`).join(', ')}],`,
+    `  radii: [${(design.borders?.radii || []).slice(0, 6).map(r => `'${String(r.value ?? r)}'`).join(', ')}],`,
+    `  shadows: [${(design.shadows?.values || []).slice(0, 3).map(s => `'${String(s.raw ?? s.value ?? s).replace(/'/g, "\\'")}'`).join(', ')}],`,
     '};',
     '```',
     '',

package/src/formatters/tailwind.js

@@ -1,7 +1,7 @@
 import { rgbToHex, rgbToHsl } from '../utils.js';
 
 function generateColorScale(hex, parsed) {
-  const { h, s } = rgbToHsl(parsed);
+  const { h, s } = parsed.hsl ?? rgbToHsl(parsed.rgb);
   const scale = {};
   const levels = [
     { name: '50', l: 97 }, { name: '100', l: 94 }, { name: '200', l: 86 },

package/src/multipage.js

@@ -127,11 +127,11 @@ function typeSet(typography) {
 }
 
 function spaceSet(spacing) {
-  return new Set(((spacing?.scale) || []).map(s => (s.value || s).toString()));
+  return new Set(((spacing?.scale) || []).map(s => String(s.value ?? s)));
 }
 
 function radiusSet(borders) {
-  return new Set(((borders?.radii) || []).map(r => (r.value || r).toString()));
+  return new Set(((borders?.radii) || []).map(r => String(r.value ?? r)));
 }
 
 export function computeCrossPageConsistency(pages) {

package/src/widgets.js

@@ -0,0 +1,48 @@
+// Curated selector list for third-party widgets that pollute extractions.
+// Enabled via --ignore-widgets; appended to user-supplied --ignore selectors.
+//
+// Criteria for inclusion: widget renders on tens of thousands of sites, uses a
+// stable ID/attr hook, and its styles would skew token extraction (chat bubbles
+// with off-brand radii/shadows, cookie banners with alarm colors, etc.).
+
+export const WIDGET_SELECTORS = [
+  // Live chat / support
+  '#intercom-container', '#intercom-frame', 'iframe[name*="intercom"]',
+  '#drift-widget', '#drift-frame-controller', '#drift-frame-chat',
+  '#hubspot-messages-iframe-container',
+  '#crisp-chatbox', '.crisp-client',
+  'iframe[title*="Messaging"]', '#launcher', '[data-product="web_widget"]', // Zendesk
+  '#tawk-default', 'iframe[title*="chat window"]',
+  '#chat-widget-container', '#livechat-compact-container', // LiveChat
+  '#helpshift-iframe',
+  'iframe[src*="freshchat"]', '#fc_frame',
+  'iframe[src*="olark"]', '#olark-wrapper',
+
+  // Cookie / consent banners
+  '#CybotCookiebotDialog', '#CybotCookiebotDialogBody',
+  '#onetrust-banner-sdk', '#onetrust-consent-sdk', '#onetrust-pc-sdk',
+  '.termly-banner-top', '.termly-styles-banner',
+  '#cookiebanner', '#cookie-banner', '#cookie-notice',
+  '.cc-window', '.cc-banner', // Cookieconsent by Insites
+  '#usercentrics-root',
+  '#iubenda-cs-banner',
+
+  // reCAPTCHA / anti-bot (visible v2 badge)
+  '.grecaptcha-badge', 'iframe[src*="recaptcha"]',
+
+  // Analytics / pixel iframes (invisible but can leak tokens)
+  'iframe[src*="doubleclick"]', 'iframe[src*="googletagmanager"]',
+  'iframe[src*="facebook.com/tr"]',
+
+  // Social share floating bars
+  '.addthis_floating_style', '#addthis-smartlayers',
+  '.sharethis-inline-share-buttons',
+
+  // Generic catch-alls (last so specific IDs take priority in logs)
+  '[id^="chat-widget"]', '[class*="chat-widget"]',
+  '[aria-label*="cookie" i][role="dialog"]',
+];
+
+export function widgetIgnoreList() {
+  return [...WIDGET_SELECTORS];
+}