designlang 7.0.0 → 7.2.0

package/.github/workflows/manavarya-bot.yml

@@ -0,0 +1,17 @@
+# Managed by bot-manavarya/reviewer — edits will be overwritten.
+name: manavarya-bot review
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, ready_for_review]
+
+jobs:
+  review:
+    if: ${{ github.event.pull_request.draft == false }}
+    uses: bot-manavarya/reviewer/.github/workflows/review.yml@main
+    with:
+      provider: 'gemini'
+      model: 'gemini-2.5-flash'
+    secrets:
+      bot-token: ${{ secrets.MANAVARYA_BOT_TOKEN }}
+      gemini-api-key: ${{ secrets.GEMINI_API_KEY }}

package/.vercel/README.txt

@@ -0,0 +1,11 @@
+> Why do I have a folder named ".vercel" in my project?
+The ".vercel" folder is created when you link a directory to a Vercel project.
+
+> What does the "project.json" file contain?
+The "project.json" file contains:
+- The ID of the Vercel project that you linked ("projectId")
+- The ID of the user or team your Vercel project is owned by ("orgId")
+
+> Should I commit the ".vercel" folder?
+No, you should not share the ".vercel" folder with anyone.
+Upon creation, it will be automatically added to your ".gitignore" file.

package/.vercel/project.json

@@ -0,0 +1 @@
+{"projectId":"prj_g6gBbA5TU1e3vLtU6w8FHJhy9Wmk","orgId":"team_NOd0BEOy4vNKC9vTwIRo0qdF","projectName":"website"}

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## [7.2.0] — 2026-04-19
+
+### Added
+
+- **Modern CSS surfacing (Tier 1a)** — crawler now captures pseudo-elements, variable-font axes (`font-variation-settings`), `@container` queries, and `env()` usage. Surfaced on `design.modernCss`. (#33)
+- **Wide-gamut color + CSS source attribution (Tier 1b)** — `oklch()`, `oklab()`, `color-mix()`, `light-dark()`, Display P3, and Rec2020 references are collected on `design.wideGamut`. A new `design.tokenSources` maps each extracted token to the stylesheet URL it first appeared in. (#34)
+- **Auto-interact pass (Tier 2)** — new `--deep-interact` flag (implied by `--full`) runs an interaction pass before extraction: full-page scroll in 4 steps, menu/dropdown opens, hover snapshots for the first batch of buttons/links with computed-style diffs, accordion clicks, and first-match modal trigger. Results populate `design.interactionStates` (hover deltas, menu/modal snapshots). Every step is wrapped in try/catch with per-step timeouts so interaction failures never kill the crawl.
+- **Multi-page token reconciliation (Tier 2)** — when `--depth >= 1` the extractor now emits three new artifacts alongside the merged baseline: `*-tokens-shared.json` (tokens shared across every route), `*-tokens-routes/<slug>.json` (per-route `added` and `changed` deltas), and `*-routes-report.md` (readable summary). Slugs are derived from the route path (`/` → `index`) with automatic collision handling.
+
+### Changed
+
+- `--full` now also enables `--deep-interact`.
+- `--depth <n>` description updated to mention the new reconciliation outputs.
+
+## [7.1.0] — 2026-04-19
+
+### Added
+
+- **Cookie file support** — `--cookie-file <path>` loads cookies from a JSON array, a Playwright `storageState.json`, or a Netscape `cookies.txt` (browser extensions, curl exports). The new loader lives in `src/utils-cookies.js` and merges cleanly with the existing `--cookie name=value` flag.
+- **`--insecure`** — ignores HTTPS/SSL certificate errors. Useful for self-signed dev servers, internal staging environments behind corporate proxies, and local extraction through MITM tools. Passes `ignoreHTTPSErrors: true` to the Playwright context plus the matching Chromium launch flags.
+- **`--user-agent <ua>`** — override the browser User-Agent string for extraction.
+- **Chrome extension** — `chrome-extension/` ships a Manifest v3 popup that hands the current tab off to [designlang.manavaryasingh.com](https://designlang.manavaryasingh.com) with the URL prefilled. Also emits a "Copy CLI" button that drops `npx designlang <url>` into the clipboard. Developer-mode install for now; Chrome Web Store listing pending.
+- **Website URL query parameter** — the extractor input on the hosted site now honours `?url=<encoded>` so the Chrome extension (and any deep link) can prefill.
+- **CONTRIBUTING**: "Good first issues" and "Credits" sections.
+
+### Thanks
+
+- A developer from China opened a conversation proposing cookie-file handling, SSL bypass, and a Chrome packaging story — this release ships all three.
+
 ## [7.0.0] — 2026-04-18
 
 ### Breaking

package/CONTRIBUTING.md

@@ -61,3 +61,28 @@ When filing a bug, please include:
 - One feature/fix per PR
 - Keep PRs focused and small when possible
 - Add a brief description of what changed and why
+
+## Good first issues
+
+Some work that's already scoped and ready for someone to pick up:
+
+- **Extra cookie formats** — add support for browser-specific exports (EditThisCookie, Cookie-Editor) on top of the existing JSON / Playwright / Netscape loaders in `src/utils-cookies.js`.
+- **Proxy support** — add `--proxy <url>` that passes through to Playwright's `proxy` launch option, paired with the existing `--insecure` flag for corporate networks.
+- **Chrome extension: DevTools panel** — extend `chrome-extension/` with a DevTools panel that shows tokens for the current tab without leaving the browser. See the roadmap in `chrome-extension/README.md`.
+- **Firefox + Edge packaging** — the manifest v3 extension already works in both; we just need store listings and icons.
+- **Additional CSS-in-JS emitters** — Emotion, Stitches, Vanilla Extract, Panda, styled-components. Each is a thin formatter module under `src/formatters/`.
+
+## Credits
+
+Shipped thanks to a few specific contributors — PRs welcome for the list:
+
+- [@Manavarya09](https://github.com/Manavarya09) — author, maintainer.
+- Community suggestions that landed as features: cookie-file loading, `--insecure` SSL bypass, and the first Chrome extension popup came from an external developer's proposal in mid-April 2026.
+
+If you open a PR or file an issue that materially shapes a release, we'll add you here.
+
+## Code of conduct
+
+Be decent. Disagreements about design, code, or approach are welcome — personal
+attacks are not. Maintainer reserves the right to close issues and PRs that
+don't engage in good faith.

package/README.md

@@ -1,13 +1,12 @@
 <p align="center">
-  <h1 align="center">DESIGNLANG</h1>
-  <p align="center">Reverse-engineer any website's complete design system in one command.</p>
+  <img src="website/public/logo-specimen.svg" alt="designlang — reads a website the way a developer reads a stylesheet" width="900">
 </p>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/designlang"><img src="https://img.shields.io/npm/v/designlang?color=blue&label=npm" alt="npm version"></a>
-  <a href="https://github.com/Manavarya09/design-extract/blob/main/LICENSE"><img src="https://img.shields.io/github/license/Manavarya09/design-extract" alt="license"></a>
-  <a href="https://nodejs.org"><img src="https://img.shields.io/node/v/designlang" alt="node version"></a>
-  <a href="https://website-five-lime-65.vercel.app"><img src="https://img.shields.io/badge/website-live-red" alt="website"></a>
+  <a href="https://www.npmjs.com/package/designlang"><img src="https://img.shields.io/npm/v/designlang?color=0A0908&labelColor=F3F1EA&label=npm" alt="npm version"></a>
+  <a href="https://github.com/Manavarya09/design-extract/blob/main/LICENSE"><img src="https://img.shields.io/github/license/Manavarya09/design-extract?color=0A0908&labelColor=F3F1EA" alt="license"></a>
+  <a href="https://nodejs.org"><img src="https://img.shields.io/node/v/designlang?color=0A0908&labelColor=F3F1EA" alt="node version"></a>
+  <a href="https://designlang.manavaryasingh.com/"><img src="https://img.shields.io/badge/website-live-FF4800?labelColor=F3F1EA" alt="website"></a>
 </p>
 
 ---
@@ -312,6 +311,26 @@ A dedicated audit pass surfaced on `design.cssHealth`:
 
 Also contributes a `cssHealth` dimension to the overall design score.
 
+### 22. Chrome Extension (NEW in v7.1)
+
+A Manifest-v3 popup lives in [`chrome-extension/`](chrome-extension/). One click on any tab opens `designlang.manavaryasingh.com` with the URL prefilled — no copy-paste, no context switch. There is also a **Copy CLI** button that puts `npx designlang <url>` in your clipboard.
+
+- **Permissions:** `activeTab` only, plus host access to the hosted extractor.
+- **Install:** toggle developer mode at `chrome://extensions`, click *Load unpacked*, pick the `chrome-extension/` folder.
+- **Firefox + Edge** work with the same MV3 manifest.
+
+### 23. Better Auth + Network Control (NEW in v7.1)
+
+Extracting from authenticated, self-signed, or non-default environments now takes one flag:
+
+- **`--cookie-file <path>`** — loads cookies from JSON array, Playwright `storageState.json`, or Netscape `cookies.txt` (browser extensions, curl exports). Merges cleanly with the existing `--cookie name=value` flag.
+- **`--insecure`** — ignore HTTPS/SSL certificate errors for self-signed dev servers, corporate staging, or MITM tools.
+- **`--user-agent <ua>`** — override the browser User-Agent string.
+
+```bash
+designlang https://staging.internal --cookie-file ./session.json --insecure
+```
+
 ## All Features
 
 | Feature | Flag / Command | Description |
@@ -326,12 +345,16 @@ Also contributes a `cssHealth` dimension to the overall design score.
 | Font files | automatic | Source detection (Google/self-hosted/CDN/system), @font-face CSS |
 | Image styles | automatic | Aspect ratios, shapes, filters, pattern classification |
 | Dark mode | `--dark` | Extracts dark color scheme + light/dark diff |
-| Auth pages | `--cookie`, `--header` | Extract from authenticated/protected pages |
-| Multi-page | `--depth <n>` | Crawl N internal pages for site-wide tokens |
+| Auth pages | `--cookie`, `--cookie-file`, `--header` | Extract from authenticated/protected pages; cookie files in JSON / Playwright storageState / Netscape formats |
+| Self-signed / dev TLS | `--insecure` | Ignore HTTPS/SSL certificate errors |
+| User-Agent override | `--user-agent <ua>` | Set a custom User-Agent string |
+| Chrome extension | `chrome-extension/` | One-click handoff from any tab, MV3, `activeTab` only |
+| Multi-page | `--depth <n>` | Crawl N internal pages; emits shared-vs-per-route token reconciliation (`*-tokens-shared.json`, `*-tokens-routes/<slug>.json`, `*-routes-report.md`) |
 | Screenshots | `--screenshots` | Capture buttons, cards, inputs, nav, hero, full page |
 | Responsive | `--responsive` | Crawl at 4 viewports, map breakpoint changes |
 | Interactions | `--interactions` | Capture hover/focus/active state transitions |
-| Everything | `--full` | Enable screenshots + responsive + interactions |
+| Auto-interact | `--deep-interact` | Scroll, open menus/modals/accordions, hover CTAs before extraction |
+| Everything | `--full` | Enable screenshots + responsive + interactions + deep-interact |
 | Apply | `designlang apply <url>` | Auto-detect framework and write tokens to your project |
 | Clone | `designlang clone <url>` | Generate a working Next.js starter with extracted design |
 | Score | `designlang score <url>` | Rate design quality with visual bar chart breakdown |
@@ -366,9 +389,13 @@ Options:
   --screenshots           Capture component screenshots
   --responsive            Capture at multiple breakpoints
   --interactions          Capture hover/focus/active states
-  --full                  Enable all captures
+  --deep-interact         Auto-interact pass (scroll, menus, modals, accordions, hover CTAs)
+  --full                  Enable all captures (implies --deep-interact)
   --cookie <cookies...>   Cookies for authenticated pages (name=value)
+  --cookie-file <path>    Load cookies from JSON / storageState / Netscape cookies.txt
   --header <headers...>   Custom headers (name:value)
+  --user-agent <ua>       Override the browser User-Agent string
+  --insecure              Ignore HTTPS/SSL certificate errors (self-signed, dev, proxies)
   --framework <type>      Only generate specific theme (react, shadcn)
   --platforms <csv>       Additional platforms: web,ios,android,flutter,wordpress,all (additive)
   --emit-agent-rules      Emit Cursor / Claude Code / CLAUDE.md / agents.md rule files
@@ -453,7 +480,7 @@ In Claude Code, use `/extract-design <url>`.
 
 ## Website
 
-**[website-five-lime-65.vercel.app](https://website-five-lime-65.vercel.app)** — the brutalist product page.
+**[design-extract-beta.vercel.app](https://design-extract-beta.vercel.app)** — the brutalist product page.
 
 ## Contributing
 

package/bin/design-extract.js

@@ -21,6 +21,7 @@ import { formatFlutterDart } from '../src/formatters/flutter-dart.js';
 import { formatVueTheme } from '../src/formatters/vue-theme.js';
 import { formatSvelteTheme } from '../src/formatters/svelte-theme.js';
 import { formatAgentRules } from '../src/formatters/agent-rules.js';
+import { reconcileRoutes, formatRoutesReport } from '../src/formatters/routes-reconciliation.js';
 import { loadConfig, mergeConfig } from '../src/config.js';
 import { diffDesigns, formatDiffMarkdown, formatDiffHtml } from '../src/diff.js';
 import { saveSnapshot, getHistory, formatHistoryMarkdown } from '../src/history.js';
@@ -63,9 +64,13 @@ program
   .option('--framework <type>', 'generate framework theme (react, shadcn, vue, svelte)')
   .option('--responsive', 'capture design at multiple breakpoints')
   .option('--interactions', 'capture hover/focus/active states')
-  .option('--full', 'enable all extra captures (screenshots, responsive, interactions)')
+  .option('--deep-interact', 'auto-interact pass: scroll, open menus/modals/accordions, hover CTAs (implies --interactions)')
+  .option('--full', 'enable all extra captures (screenshots, responsive, interactions, deep-interact)')
   .option('--cookie <cookies...>', 'cookies for authenticated pages (name=value)')
+  .option('--cookie-file <path>', 'load cookies from JSON, Playwright storageState, or Netscape cookies.txt')
   .option('--header <headers...>', 'custom headers (name:value)')
+  .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('--tokens-legacy', 'Emit pre-v7 flat token JSON (backward compat)')
   .option('--platforms <csv>', 'Additional platforms: web,ios,android,flutter,wordpress,all (web is always emitted)', 'web')
@@ -115,7 +120,19 @@ program
     try {
       spinner.text = `Crawling${merged.depth > 0 ? ` (depth: ${merged.depth})` : ''}...`;
       // Parse auth options
-      const cookies = merged.cookie || [];
+      const cliCookies = merged.cookie || [];
+      const fileCookies = [];
+      if (merged.cookieFile) {
+        try {
+          const { loadCookiesFromFile } = await import('../src/utils-cookies.js');
+          fileCookies.push(...loadCookiesFromFile(resolve(merged.cookieFile), url));
+        } catch (e) {
+          console.error(chalk.red(`\n  cookie-file load failed: ${e.message}\n`));
+          process.exit(1);
+        }
+      }
+      const { mergeCookies } = await import('../src/utils-cookies.js');
+      const cookies = mergeCookies(cliCookies, fileCookies, url);
       const headers = {};
       if (merged.header) {
         for (const h of merged.header) {
@@ -135,6 +152,9 @@ program
         ignore: merged.ignore,
         cookies: cookies.length > 0 ? cookies : undefined,
         headers: Object.keys(headers).length > 0 ? headers : undefined,
+        insecure: merged.insecure || false,
+        userAgent: merged.userAgent,
+        deepInteract: merged.deepInteract || merged.full,
       });
 
       // Responsive capture
@@ -241,6 +261,25 @@ program
         }
       }
 
+      // Multi-route token reconciliation (Tier 2). Only when --depth >= 1 and
+      // the crawler actually returned per-route token data.
+      if (merged.depth >= 1 && Array.isArray(design.routes) && design.routes.length > 0) {
+        const reconciled = reconcileRoutes(design.routes);
+        const sharedPath = join(outDir, `${prefix}-tokens-shared.json`);
+        writeFileSync(sharedPath, JSON.stringify(reconciled.shared, null, 2), 'utf-8');
+        platformFiles.push({ path: sharedPath, label: 'Shared tokens (multi-route)' });
+        const routesDir = join(outDir, `${prefix}-tokens-routes`);
+        mkdirSync(routesDir, { recursive: true });
+        for (const [slug, entry] of Object.entries(reconciled.perRoute)) {
+          const rp = join(routesDir, `${slug}.json`);
+          writeFileSync(rp, JSON.stringify({ url: entry.url, path: entry.path, added: entry.added, changed: entry.changed }, null, 2), 'utf-8');
+          platformFiles.push({ path: rp, label: `Route tokens (${slug})` });
+        }
+        const reportPath = join(outDir, `${prefix}-routes-report.md`);
+        writeFileSync(reportPath, formatRoutesReport(reconciled), 'utf-8');
+        platformFiles.push({ path: reportPath, label: 'Routes report (markdown)' });
+      }
+
       // Agent rules (opt-in, also enabled by --full)
       if (merged.emitAgentRules || merged.full) {
         const agentFiles = formatAgentRules({ design, tokens: dtcgTokens, url });

package/chrome-extension/README.md

@@ -0,0 +1,41 @@
+# designlang — Chrome extension
+
+Right-click → Extract design on any page. The extension opens
+[designlang.manavaryasingh.com](https://designlang.manavaryasingh.com) with the
+current tab's URL prefilled, so extraction starts with one click instead of
+switching windows and pasting.
+
+## Features
+
+- One-click handoff from any `http(s)://` page to the hosted extractor
+- "Copy CLI" button — drops `npx designlang <url>` straight into your clipboard
+- Zero tracking, zero analytics, zero permissions beyond `activeTab`
+
+## Install (developer mode, pending Chrome Web Store publish)
+
+1. Clone this repo.
+2. Open `chrome://extensions` in Chromium / Chrome / Edge / Arc / Brave.
+3. Toggle **Developer mode** (top right).
+4. Click **Load unpacked** and pick the `chrome-extension/` folder in this repo.
+5. Pin the extension from the puzzle-piece menu.
+
+## Permissions
+
+- `activeTab` — to read the URL of the tab you triggered the popup on.
+- `host_permissions` scoped to `https://designlang.manavaryasingh.com/*` for the
+  handoff.
+
+No content scripts, no remote code, no background service worker. The whole
+extension is ~3 KB of static HTML/JS/CSS.
+
+## Roadmap
+
+- Chrome Web Store listing.
+- Optional right-click context menu on links: *"Extract design from this link"*.
+- DevTools panel that shows the extracted tokens for the current tab alongside
+  the real DOM selector that produced them.
+- Firefox + Edge listings (the same MV3 manifest works for both).
+
+## Contributing
+
+PRs welcome. See the root [`CONTRIBUTING.md`](../CONTRIBUTING.md).

package/chrome-extension/icons/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="designlang">
+  <title>designlang</title>
+  <rect width="32" height="32" fill="#F3F1EA"/>
+  <circle cx="13" cy="20" r="7.5" fill="none" stroke="#0A0908" stroke-width="4.5"/>
+  <rect x="19" y="4" width="4.5" height="25" fill="#0A0908"/>
+  <rect x="25" y="25" width="4" height="4" fill="#FF4800"/>
+</svg>

package/chrome-extension/manifest.json

@@ -0,0 +1,26 @@
+{
+  "manifest_version": 3,
+  "name": "designlang",
+  "version": "1.0.0",
+  "description": "Extract any website's complete design system — DTCG tokens, Tailwind, Figma variables, MCP server context, iOS/Android/Flutter/WordPress emitters.",
+  "author": "Manav Arya Singh",
+  "homepage_url": "https://designlang.manavaryasingh.com",
+  "action": {
+    "default_title": "Extract design system with designlang",
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icons/icon-16.png",
+      "32": "icons/icon-32.png",
+      "48": "icons/icon-48.png",
+      "128": "icons/icon-128.png"
+    }
+  },
+  "icons": {
+    "16": "icons/icon-16.png",
+    "32": "icons/icon-32.png",
+    "48": "icons/icon-48.png",
+    "128": "icons/icon-128.png"
+  },
+  "permissions": ["activeTab"],
+  "host_permissions": ["https://designlang.manavaryasingh.com/*"]
+}

package/chrome-extension/popup.html

@@ -0,0 +1,167 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=360" />
+  <title>designlang</title>
+  <link rel="icon" href="icons/favicon.svg" type="image/svg+xml" />
+  <style>
+    :root {
+      --paper: #f3f1ea;
+      --ink: #0a0908;
+      --ink-2: #403c34;
+      --ink-3: #8b8778;
+      --accent: #ff4800;
+    }
+    *, *::before, *::after { box-sizing: border-box; }
+    html, body { margin: 0; padding: 0; }
+    body {
+      width: 360px;
+      background: var(--paper);
+      color: var(--ink);
+      font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
+      font-size: 14px;
+      line-height: 1.4;
+    }
+    .pad { padding: 18px 18px 20px; }
+    .bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 18px 10px;
+      border-bottom: 1px solid var(--ink);
+    }
+    .mono {
+      font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+      font-size: 11px;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink-2);
+    }
+    .mark {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      font-family: ui-monospace, Menlo, monospace;
+      font-weight: 600;
+    }
+    .mark svg { width: 16px; height: 16px; }
+    h1 {
+      margin: 16px 0 10px;
+      font-family: 'Iowan Old Style', Georgia, serif;
+      font-size: 22px;
+      font-weight: 400;
+      line-height: 1.1;
+      letter-spacing: -0.02em;
+    }
+    h1 em { color: var(--accent); font-style: italic; }
+    p { margin: 0 0 14px; color: var(--ink-2); }
+    .url {
+      display: block;
+      background: #fff;
+      border: 1px solid var(--ink);
+      padding: 10px 12px;
+      font: 12px ui-monospace, Menlo, monospace;
+      color: var(--ink);
+      word-break: break-all;
+      white-space: pre-wrap;
+      margin-bottom: 12px;
+    }
+    button, a.button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      width: 100%;
+      padding: 12px 14px;
+      font: 13px ui-monospace, Menlo, monospace;
+      letter-spacing: 0.03em;
+      background: var(--ink);
+      color: var(--paper);
+      border: 1px solid var(--ink);
+      box-shadow: 4px 4px 0 var(--accent);
+      cursor: pointer;
+      text-decoration: none;
+      transition: transform 120ms, box-shadow 120ms;
+    }
+    button:hover, a.button:hover {
+      transform: translate(-1px, -1px);
+      box-shadow: 5px 5px 0 var(--accent);
+    }
+    button:active, a.button:active {
+      transform: translate(3px, 3px);
+      box-shadow: 1px 1px 0 var(--accent);
+    }
+    .row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+      margin-top: 10px;
+    }
+    .secondary {
+      display: inline-flex;
+      justify-content: center;
+      padding: 9px 10px;
+      border: 1px solid var(--ink);
+      background: transparent;
+      color: var(--ink);
+      font: 11px ui-monospace, Menlo, monospace;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      text-decoration: none;
+      box-shadow: none;
+    }
+    .secondary:hover {
+      background: var(--ink);
+      color: var(--paper);
+      transform: none;
+      box-shadow: none;
+    }
+    .hint {
+      margin-top: 12px;
+      font: 11px ui-monospace, Menlo, monospace;
+      color: var(--ink-3);
+      line-height: 1.5;
+    }
+    .hint code { color: var(--ink); }
+  </style>
+</head>
+<body>
+  <div class="bar">
+    <span class="mark">
+      <svg viewBox="0 0 32 32" aria-hidden="true">
+        <rect width="32" height="32" fill="#F3F1EA"/>
+        <circle cx="13" cy="20" r="7.5" fill="none" stroke="#0A0908" stroke-width="4.5"/>
+        <rect x="19" y="4" width="4.5" height="25" fill="#0A0908"/>
+        <rect x="25" y="25" width="4" height="4" fill="#FF4800"/>
+      </svg>
+      designlang
+    </span>
+    <span class="mono">v7.0</span>
+  </div>
+
+  <div class="pad">
+    <h1>Read this page as a <em>design system</em>.</h1>
+    <p>Extracts DTCG tokens, Tailwind config, Figma variables, an MCP companion, and native iOS / Android / Flutter / WordPress outputs.</p>
+
+    <span class="url" id="url-display">—</span>
+
+    <button id="extract-btn">
+      Extract on designlang
+      <span>↗</span>
+    </button>
+
+    <div class="row">
+      <a class="secondary" id="copy-cli" href="#">Copy CLI</a>
+      <a class="secondary" href="https://github.com/Manavarya09/design-extract" target="_blank" rel="noopener">GitHub</a>
+    </div>
+
+    <div class="hint">
+      Prefer the CLI? <code>npx designlang &lt;url&gt;</code>. MCP server:
+      <code>designlang mcp</code>.
+    </div>
+  </div>
+
+  <script src="popup.js"></script>
+</body>
+</html>

package/chrome-extension/popup.js

@@ -0,0 +1,59 @@
+// designlang Chrome extension popup script.
+// On open, reads the active tab's URL, shows it, and wires the Extract button
+// to hand off to designlang.manavaryasingh.com with the URL prefilled.
+
+const SITE = 'https://designlang.manavaryasingh.com/';
+
+function isExtractable(url) {
+  if (!url) return false;
+  try {
+    const u = new URL(url);
+    return u.protocol === 'http:' || u.protocol === 'https:';
+  } catch {
+    return false;
+  }
+}
+
+async function getActiveTabUrl() {
+  const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
+  return tabs[0]?.url || '';
+}
+
+function render(tabUrl) {
+  const display = document.getElementById('url-display');
+  const btn = document.getElementById('extract-btn');
+  const copy = document.getElementById('copy-cli');
+
+  if (!isExtractable(tabUrl)) {
+    display.textContent = '(open a regular https:// page to extract)';
+    btn.disabled = true;
+    btn.style.opacity = '0.55';
+    btn.style.cursor = 'not-allowed';
+    copy.setAttribute('aria-disabled', 'true');
+    copy.style.pointerEvents = 'none';
+    copy.style.opacity = '0.55';
+    return;
+  }
+
+  display.textContent = tabUrl;
+
+  btn.addEventListener('click', () => {
+    const target = `${SITE}?url=${encodeURIComponent(tabUrl)}&source=chrome`;
+    chrome.tabs.create({ url: target });
+    window.close();
+  });
+
+  copy.addEventListener('click', async (e) => {
+    e.preventDefault();
+    const line = `npx designlang ${tabUrl}`;
+    try {
+      await navigator.clipboard.writeText(line);
+      copy.textContent = 'Copied';
+      setTimeout(() => { copy.textContent = 'Copy CLI'; }, 1200);
+    } catch {
+      copy.textContent = 'Clipboard denied';
+    }
+  });
+}
+
+getActiveTabUrl().then(render);