designlang 12.10.0 → 12.11.0

package/.claude-plugin/marketplace.json

@@ -9,7 +9,7 @@
       "name": "designlang",
       "source": "./",
       "description": "Eight slash commands wrapping the designlang CLI: /extract (full design language \u2192 DTCG, Tailwind, Figma), /grade (shareable HTML report card + SVG badge), /battle (head-to-head graded comparison), /remix (restyle in 6 vocabularies \u2014 brutalist, swiss, art-deco, cyberpunk, soft-ui, editorial), /pack (one downloadable design-system bundle), /theme-swap (OKLCH-correct recolour around a new brand primary), /brand (full editorial brand-guidelines book \u2014 13 chapters, hand-off-ready), /pair (fuse two designs across configurable axes \u2014 colours from one site, typography from another).",
-      "version": "12.10.0",
+      "version": "12.10.1",
       "author": {
         "name": "Manavarya Singh"
       },

package/.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "designlang",
   "description": "Extract any website's design language and ship it. Eight slash commands \u2014 /extract, /grade, /battle, /remix, /pack, /theme-swap, /brand, /pair \u2014 wrap the designlang CLI to pull DTCG tokens, Tailwind/shadcn/Figma vars, motion + voice, generate shareable graded report cards, head-to-head battle pages, six-vocabulary remixes, downloadable design-system bundles, OKLCH-correct theme recolouring, full editorial brand-guidelines books, and design crossovers between two sites.",
-  "version": "12.10.0",
+  "version": "12.10.1",
   "author": {
     "name": "Manavarya Singh",
     "url": "https://github.com/Manavarya09"

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # Changelog
 
+## [12.11.0] — 2026-05-15
+
+**`brand --pdf` ships native PDF brand guides.**
+
+```bash
+npx designlang brand stripe.com --pdf
+# → stripe-com.brand.pdf  (print-ready, ~3–5s)
+```
+
+What you get on top of any "save as PDF":
+
+- **Per-chapter page breaks** — every section starts on a fresh page.
+- **Running footer** — `designlang · <subject> · <page> of <total>` on every page.
+- **Selectable text + embedded fonts** — never rasterized.
+- **`--paper a4|letter|tabloid` + `--landscape`** for any output target.
+- **`--attach-tokens`** embeds the DTCG tokens JSON *inside* the PDF as a
+  proper file attachment — open the PDF in Preview/Acrobat, hit the
+  paperclip, drop the JSON straight into Tailwind.
+- **`--no-print-background`** strips the brand-colour cover band for a
+  smaller file when you need it.
+
+Adds one tiny dep (`pdf-lib`, MIT, ~600KB) used only when `--attach-tokens`
+is passed; lazy-imported behind a dynamic `import()`.
+
+## [12.10.1] — 2026-05-13
+
+**Tiny ship: \`stats\` now scans multiple URLs at once.**
+
+\`designlang stats\` previously took exactly one URL. Now it takes any
+number, runs them in parallel, and prints each block with a divider:
+
+\`\`\`bash
+npx designlang stats stripe.com vercel.com linear.app
+\`\`\`
+
+In \`--as-json\` mode:
+
+- One URL → a bare object (legacy shape, unchanged)
+- Two-or-more URLs → an array of objects
+- Per-URL failures don't kill the batch — they surface as
+  \`{ url, error }\` in JSON or a red row in pretty mode, and the
+  process exits non-zero only when at least one site failed.
+
+No flag changes, no schema breaks for the existing single-URL callers.
+
 ## [12.10.0] — 2026-05-12
 
 **Small ship: \`designlang stats\` + low-confidence warning in grade cards.**

package/bin/design-extract.js

@@ -53,6 +53,7 @@ import { buildPack } from '../src/pack.js';
 import { recolorDesign } from '../src/recolor.js';
 import { formatThemeSwap, formatThemeSwapMarkdown } from '../src/formatters/theme-swap.js';
 import { formatBrandBook, formatBrandBookMarkdown } from '../src/formatters/brand-book.js';
+import { htmlToPdf } from '../src/pdf.js';
 import { fuseDesigns, AXES } from '../src/fuse.js';
 import { formatPair, formatPairMarkdown } from '../src/formatters/pair.js';
 import { nameFromUrl } from '../src/utils.js';
@@ -946,23 +947,31 @@ program
 
 // ── Stats command — fast stdout summary, no files written ──
 program
-  .command('stats <url>')
-  .description('Print a concise one-screen summary to stdout — grade, primary, fonts, spacing, voice. No files written.')
-  .option('-j, --as-json', 'emit machine-readable JSON to stdout instead of pretty text')
-  .action(async (url, opts) => {
-    if (!url.startsWith('http')) url = `https://${url}`;
-    validateUrl(url);
+  .command('stats <urls...>')
+  .description('Print a concise one-screen summary to stdout — grade, primary, fonts, spacing, voice. Accepts multiple URLs. No files written.')
+  .option('-j, --as-json', 'emit machine-readable JSON to stdout instead of pretty text (an array when multiple URLs)')
+  .action(async (urls, opts) => {
+    // Normalise each URL the same way the single-URL path used to.
+    const targets = urls.map(u => {
+      const full = u.startsWith('http') ? u : `https://${u}`;
+      validateUrl(full);
+      return full;
+    });
 
     // Quiet path for --as-json: no spinner / chrome noise, just data on stdout.
     // (`--json` is already a global program flag; `--as-json` avoids the clash.)
     const wantJson = !!opts.asJson;
-    const spinner = wantJson ? null : ora(`Reading ${url}...`).start();
-    try {
+    const spinner = wantJson
+      ? null
+      : ora(targets.length === 1 ? `Reading ${targets[0]}...` : `Reading ${targets.length} sites in parallel...`).start();
+
+    // Single helper used by both pretty and JSON paths.
+    async function summarise(url) {
       const design = await extractDesignLanguage(url);
       const s = design.score || {};
       const primary = design.colors?.primary;
       const families = (design.typography?.families || []).map(f => f?.name || f).filter(Boolean);
-      const summary = {
+      return {
         url,
         title: design.meta?.title,
         grade: s.grade ?? null,
@@ -985,30 +994,24 @@ program
         stack: design.stack?.framework,
         intent: design.pageIntent?.type,
       };
+    }
 
-      if (wantJson) {
-        if (spinner) spinner.stop();
-        process.stdout.write(JSON.stringify(summary, null, 2) + '\n');
-        return;
-      }
-
-      spinner.stop();
+    function printPretty(summary) {
       const gradeColor =
         summary.grade === 'A' ? chalk.green
         : summary.grade === 'B' ? chalk.cyan
         : summary.grade === 'C' ? chalk.yellow
         : summary.grade === 'D' ? chalk.magenta
         : chalk.red;
+      const primary = summary.primary;
       const confTag = primary && primary.confidence != null
         ? (primary.confidence < 0.5
             ? chalk.yellow(`~${Math.round(primary.confidence * 100)}% conf`)
             : chalk.gray(`${Math.round(primary.confidence * 100)}% conf`))
         : '';
-      const line = (label, value) =>
-        `  ${chalk.gray(label.padEnd(12))} ${value}`;
-
+      const line = (label, value) => `  ${chalk.gray(label.padEnd(12))} ${value}`;
       console.log('');
-      console.log(`  ${chalk.bold(url)}`);
+      console.log(`  ${chalk.bold(summary.url)}`);
       if (summary.title) console.log(`  ${chalk.gray(summary.title)}`);
       console.log('');
       console.log(line('Grade', `${gradeColor.bold(summary.grade || '—')} ${chalk.gray('·')} ${chalk.bold(String(summary.score ?? '—') + '/100')}`));
@@ -1017,10 +1020,10 @@ program
       } else {
         console.log(line('Primary', chalk.gray('—')));
       }
-      if (families.length) {
-        const head = families[0];
-        const body = families[1] || head;
-        const extra = families.length > 2 ? chalk.gray(` +${families.length - 2}`) : '';
+      if (summary.families.length) {
+        const head = summary.families[0];
+        const body = summary.families[1] || head;
+        const extra = summary.fontFamilyCount > 2 ? chalk.gray(` +${summary.fontFamilyCount - 2}`) : '';
         console.log(line('Fonts', `${head}${body && body !== head ? chalk.gray(' / ') + body : ''}${extra}`));
       } else {
         console.log(line('Fonts', chalk.gray('—')));
@@ -1034,7 +1037,41 @@ program
       console.log(line('Material', summary.material || chalk.gray('—')));
       console.log(line('Tone', summary.tone || chalk.gray('—')));
       console.log(line('Intent', summary.intent || chalk.gray('—')));
+    }
+
+    try {
+      // Settle so a single failure doesn't kill the whole batch; per-URL
+      // errors are surfaced as individual rejections in both paths.
+      const results = await Promise.allSettled(targets.map(summarise));
+
+      if (wantJson) {
+        if (spinner) spinner.stop();
+        const payload = results.map((r, i) => r.status === 'fulfilled'
+          ? r.value
+          : { url: targets[i], error: r.reason?.message || String(r.reason) });
+        // When the caller passed a single URL we keep the legacy shape
+        // (a bare object) so existing scripts don't break. Multiple URLs
+        // become an array.
+        const out = targets.length === 1 ? payload[0] : payload;
+        process.stdout.write(JSON.stringify(out, null, 2) + '\n');
+        return;
+      }
+
+      spinner.stop();
+      let anyFailed = false;
+      results.forEach((r, i) => {
+        if (i > 0) console.log(chalk.gray('  ' + '─'.repeat(60)));
+        if (r.status === 'fulfilled') {
+          printPretty(r.value);
+        } else {
+          anyFailed = true;
+          console.log('');
+          console.log(`  ${chalk.bold(targets[i])}`);
+          console.log(`  ${chalk.red('failed:')} ${chalk.red(r.reason?.message || String(r.reason))}`);
+        }
+      });
       console.log('');
+      if (anyFailed) process.exitCode = 1;
     } catch (err) {
       if (spinner) spinner.fail('Stats failed');
       console.error(chalk.red(`\n  ${err.message}\n`));
@@ -1420,6 +1457,11 @@ program
   .option('-n, --name <name>', 'output file prefix (default: derived from URL)')
   .option('--format <fmt>', 'output format: html, md, json, all', 'all')
   .option('--open', 'open the HTML book in the default browser')
+  .option('--pdf', 'also emit a print-ready PDF brand guide (chapter bookmarks, running page numbers)')
+  .option('--paper <size>', 'PDF paper size: a4 | letter | tabloid', 'a4')
+  .option('--landscape', 'PDF landscape orientation')
+  .option('--no-print-background', 'strip the brand-colour cover band from the PDF (smaller file)')
+  .option('--attach-tokens', 'embed the DTCG tokens JSON as a PDF file attachment')
   .action(async (url, opts) => {
     if (!url.startsWith('http')) url = `https://${url}`;
     validateUrl(url);
@@ -1441,11 +1483,14 @@ program
       const prefix = opts.name || `${nameFromUrl(url)}.brand`;
       const written = [];
 
-      if (opts.format === 'all' || opts.format === 'html') {
-        const html = formatBrandBook(design, { version: PKG_VERSION });
-        const p = join(outDir, `${prefix}.html`);
-        writeFileSync(p, html);
-        written.push(p);
+      let bookHtml = null;
+      if (opts.format === 'all' || opts.format === 'html' || opts.pdf) {
+        bookHtml = formatBrandBook(design, { version: PKG_VERSION });
+        if (opts.format === 'all' || opts.format === 'html') {
+          const p = join(outDir, `${prefix}.html`);
+          writeFileSync(p, bookHtml);
+          written.push(p);
+        }
       }
       if (opts.format === 'all' || opts.format === 'md') {
         const md = formatBrandBookMarkdown(design);
@@ -1479,6 +1524,42 @@ program
         written.push(p);
       }
 
+      if (opts.pdf) {
+        spinner.text = 'Rendering PDF...';
+        const pdfPath = join(outDir, `${prefix}.pdf`);
+        const attachments = [];
+        if (opts.attachTokens) {
+          // Reuse the JSON we just wrote if available; otherwise build a DTCG payload on the fly.
+          let tokensJson;
+          try {
+            tokensJson = readFileSync(join(outDir, `${prefix}.json`));
+          } catch {
+            tokensJson = Buffer.from(JSON.stringify({
+              colors: design.colors, typography: design.typography,
+              spacing: design.spacing, motion: design.motion,
+            }, null, 2));
+          }
+          attachments.push({
+            filename: `${nameFromUrl(url)}-tokens.json`,
+            contents: tokensJson,
+            mimeType: 'application/json',
+            description: 'Design tokens (DTCG-aligned)',
+          });
+        }
+        await htmlToPdf(bookHtml, {
+          paper: opts.paper,
+          landscape: !!opts.landscape,
+          printBackground: opts.printBackground !== false,
+          attachments,
+          metadata: {
+            title: `${new URL(url).hostname} brand guidelines`,
+            subject: `${new URL(url).hostname} brand guidelines`,
+          },
+          outPath: pdfPath,
+        });
+        written.push(pdfPath);
+      }
+
       spinner.stop();
       const colorCount = (design.colors?.all || []).length;
       const fontCount = (design.typography?.families || []).length;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "designlang",
-  "version": "12.10.0",
-  "description": "Extract the complete design language from any website and ship it \u2014 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.",
+  "version": "12.11.0",
+  "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": {
     "designlang": "./bin/design-extract.js"
@@ -17,6 +17,7 @@
     "chalk": "^5.3.0",
     "commander": "^12.0.0",
     "ora": "^8.0.0",
+    "pdf-lib": "^1.17.1",
     "playwright": "^1.42.0"
   },
   "engines": {
@@ -48,4 +49,4 @@
   ],
   "author": "masyv",
   "license": "MIT"
-}
+}

package/src/formatters/brand-book.js

@@ -945,7 +945,8 @@ export function formatBrandBook(design, opts = {}) {
     .cover, .toc, section { page-break-inside: avoid; border-color: #ddd; padding: 36px 32px; }
     .cover-band { background-color: var(--accent) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
     .toc, .cover { page-break-after: always; }
-    section { page-break-after: always; }
+    section { page-break-before: always; page-break-after: always; break-before: page; }
+    .topbar { display: none !important; }
     .scale-table, .a11y-pair, .component-card { page-break-inside: avoid; }
   }
 </style>

package/src/pdf.js

@@ -0,0 +1,56 @@
+import { chromium } from 'playwright';
+import { writeFileSync } from 'fs';
+
+export async function htmlToPdf(html, opts = {}) {
+  const {
+    paper = 'a4',
+    landscape = false,
+    printBackground = true,
+    attachments = [],
+    metadata = {},
+    outPath,
+  } = opts;
+
+  const format = String(paper).toLowerCase();
+  const browser = await chromium.launch();
+  try {
+    const page = await browser.newPage();
+    await page.setContent(html, { waitUntil: 'networkidle' });
+
+    const subject = metadata.subject || '';
+    const buffer = await page.pdf({
+      format,
+      landscape: !!landscape,
+      printBackground,
+      margin: { top: '24mm', right: '18mm', bottom: '20mm', left: '18mm' },
+      displayHeaderFooter: true,
+      headerTemplate: `<div></div>`,
+      footerTemplate: `<div style="font-family: -apple-system, sans-serif; font-size: 9px; color: #888; width: 100%; padding: 0 18mm; display: flex; justify-content: space-between;"><span>designlang${subject ? ' · ' + escapeHtml(subject) : ''}</span><span><span class="pageNumber"></span> of <span class="totalPages"></span></span></div>`,
+    });
+
+    if (attachments.length) {
+      const { PDFDocument } = await import('pdf-lib');
+      const pdfDoc = await PDFDocument.load(buffer);
+      if (metadata.title) pdfDoc.setTitle(metadata.title);
+      if (metadata.subject) pdfDoc.setSubject(metadata.subject);
+      pdfDoc.setAuthor('designlang');
+      pdfDoc.setCreator('designlang');
+      for (const a of attachments) {
+        await pdfDoc.attach(a.contents, a.filename, {
+          mimeType: a.mimeType || 'application/json',
+          description: a.description || a.filename,
+        });
+      }
+      writeFileSync(outPath, await pdfDoc.save());
+    } else {
+      writeFileSync(outPath, buffer);
+    }
+  } finally {
+    await browser.close();
+  }
+  return outPath;
+}
+
+function escapeHtml(s) {
+  return String(s).replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+}