npm - designlang - Versions diffs - 7.2.0 → 9.0.0 - Mend

designlang 7.2.0 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (90) hide show

package/CHANGELOG.md +69 -0
package/README.md +154 -13
package/bin/design-extract.js +94 -1
package/package.json +9 -3
package/src/config.js +2 -0
package/src/crawler.js +55 -6
package/src/drift.js +137 -0
package/src/extractors/accessibility.js +44 -1
package/src/extractors/colors.js +50 -12
package/src/extractors/component-anatomy.js +123 -0
package/src/extractors/motion.js +184 -0
package/src/extractors/scoring.js +49 -30
package/src/extractors/voice.js +96 -0
package/src/formatters/markdown.js +88 -0
package/src/formatters/motion-tokens.js +22 -0
package/src/index.js +14 -0
package/src/lint.js +198 -0
package/src/visual-diff.js +116 -0
package/.github/FUNDING.yml +0 -1
package/.github/ISSUE_TEMPLATE/bug_report.yml +0 -62
package/.github/ISSUE_TEMPLATE/config.yml +0 -8
package/.github/ISSUE_TEMPLATE/feature_request.yml +0 -28
package/.github/og-preview.png +0 -0
package/.github/workflows/manavarya-bot.yml +0 -17
package/chrome-extension/README.md +0 -41
package/chrome-extension/icons/favicon.svg +0 -7
package/chrome-extension/icons/icon-128.png +0 -0
package/chrome-extension/icons/icon-16.png +0 -0
package/chrome-extension/icons/icon-32.png +0 -0
package/chrome-extension/icons/icon-48.png +0 -0
package/chrome-extension/manifest.json +0 -26
package/chrome-extension/popup.html +0 -167
package/chrome-extension/popup.js +0 -59
package/docs/superpowers/plans/2026-04-18-designlang-v7.md +0 -1121
package/docs/superpowers/specs/2026-04-18-designlang-v7-design.md +0 -150
package/docs/superpowers/specs/2026-04-18-website-redesign-design.md +0 -120
package/docs/superpowers/specs/2026-04-19-designlang-v7-1-design.md +0 -111
package/tests/cli.test.js +0 -84
package/tests/cookies.test.js +0 -98
package/tests/extractors.test.js +0 -792
package/tests/formatters.test.js +0 -709
package/tests/interaction-states.test.js +0 -62
package/tests/mcp.test.js +0 -68
package/tests/modern-css.test.js +0 -104
package/tests/routes-reconciliation.test.js +0 -120
package/tests/utils.test.js +0 -413
package/tests/wide-gamut.test.js +0 -90
package/website/.claude/launch.json +0 -11
package/website/AGENTS.md +0 -5
package/website/CLAUDE.md +0 -1
package/website/README.md +0 -36
package/website/app/api/extract/route.js +0 -245
package/website/app/components/A11ySlider.js +0 -369
package/website/app/components/Comparison.js +0 -286
package/website/app/components/CssHealth.js +0 -243
package/website/app/components/Extractor.js +0 -184
package/website/app/components/HeroExtractor.js +0 -455
package/website/app/components/Marginalia.js +0 -3
package/website/app/components/McpSection.js +0 -223
package/website/app/components/PlatformTabs.js +0 -250
package/website/app/components/RegionsComponents.js +0 -429
package/website/app/components/Rule.js +0 -13
package/website/app/components/Specimens.js +0 -237
package/website/app/components/StructuredData.js +0 -144
package/website/app/components/TokenBrowser.js +0 -344
package/website/app/components/token-browser-sample.js +0 -65
package/website/app/globals.css +0 -505
package/website/app/icon.svg +0 -7
package/website/app/layout.js +0 -126
package/website/app/opengraph-image.js +0 -170
package/website/app/page.js +0 -399
package/website/app/robots.js +0 -15
package/website/app/seo-config.js +0 -82
package/website/app/sitemap.js +0 -18
package/website/jsconfig.json +0 -7
package/website/lib/cache.js +0 -73
package/website/lib/rate-limit.js +0 -30
package/website/lib/rate-limit.test.js +0 -55
package/website/lib/specimens.json +0 -86
package/website/lib/token-helpers.js +0 -70
package/website/lib/url-safety.js +0 -103
package/website/lib/url-safety.test.js +0 -116
package/website/lib/zip-files.js +0 -15
package/website/next.config.mjs +0 -15
package/website/package-lock.json +0 -1353
package/website/package.json +0 -19
package/website/public/favicon.svg +0 -7
package/website/public/logo-specimen.svg +0 -76
package/website/public/mark.svg +0 -12
package/website/public/site.webmanifest +0 -13

package/src/visual-diff.js ADDED Viewed

@@ -0,0 +1,116 @@
+// designlang visual-diff <before> <after>
+// Captures screenshots for two URLs (or re-snapshots one URL across a time delta)
+// and emits a side-by-side HTML diff with token deltas and file-size/dimension signals.
+import { crawlPage } from './crawler.js';
+import { extractDesignLanguage } from './index.js';
+import { diffDesigns } from './diff.js';
+import { nameFromUrl } from './utils.js';
+import { statSync, existsSync, readFileSync } from 'fs';
+import { basename } from 'path';
+function fileKb(p) {
+  try { return Math.round(statSync(p).size / 1024); } catch { return 0; }
+}
+function toDataUri(p) {
+  try {
+    const buf = readFileSync(p);
+    return 'data:image/png;base64,' + buf.toString('base64');
+  } catch { return ''; }
+}
+async function captureFor(url, options = {}) {
+  const raw = await crawlPage(url, { ...options, screenshots: true });
+  const design = await extractDesignLanguage(url, { ...options, screenshots: true });
+  return { raw, design };
+}
+export async function visualDiff({ beforeUrl, afterUrl, options = {} } = {}) {
+  const before = await captureFor(beforeUrl, options);
+  const after = await captureFor(afterUrl, options);
+  const tokenDelta = diffDesigns(before.design, after.design);
+  const shotsBefore = before.raw.componentScreenshots || {};
+  const shotsAfter = after.raw.componentScreenshots || {};
+  const keys = [...new Set([...Object.keys(shotsBefore), ...Object.keys(shotsAfter)])];
+  const pairs = keys.map(k => {
+    const a = shotsBefore[k];
+    const b = shotsAfter[k];
+    return {
+      key: k,
+      before: a && existsSync(a) ? { path: a, sizeKb: fileKb(a) } : null,
+      after: b && existsSync(b) ? { path: b, sizeKb: fileKb(b) } : null,
+    };
+  });
+  return { pairs, tokenDelta, before: before.design, after: after.design };
+}
+export function formatVisualDiffHtml(result, { beforeLabel, afterLabel } = {}) {
+  const { pairs, tokenDelta, before, after } = result;
+  const bL = beforeLabel || nameFromUrl(before.meta.url);
+  const aL = afterLabel || nameFromUrl(after.meta.url);
+  const pairHtml = pairs.map(p => {
+    const deltaKb = (p.after?.sizeKb || 0) - (p.before?.sizeKb || 0);
+    const tag = deltaKb === 0 ? 'identical-size' : Math.abs(deltaKb) > 50 ? 'major-delta' : 'minor-delta';
+    return `
+      <section class="pair" data-status="${tag}">
+        <header>
+          <h3>${p.key}</h3>
+          <span class="delta">${deltaKb >= 0 ? '+' : ''}${deltaKb} KB</span>
+        </header>
+        <div class="frames">
+          <figure><figcaption>${bL}</figcaption>${p.before ? `<img src="${toDataUri(p.before.path)}" alt="${p.key} before">` : '<div class="missing">missing</div>'}</figure>
+          <figure><figcaption>${aL}</figcaption>${p.after ? `<img src="${toDataUri(p.after.path)}" alt="${p.key} after">` : '<div class="missing">missing</div>'}</figure>
+        </div>
+      </section>`;
+  }).join('');
+  const changedColors = (tokenDelta.colors?.changed || []).slice(0, 20);
+  const tokenRows = changedColors.map(c => `<tr><td>${c.token || c.key || ''}</td><td style="background:${c.before};">${c.before}</td><td style="background:${c.after};">${c.after}</td></tr>`).join('');
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>designlang · visual-diff · ${bL} → ${aL}</title>
+<style>
+  :root { --ink: #0A0908; --paper: #F3F1EA; --accent: #FF4800; }
+  * { box-sizing: border-box; }
+  body { margin: 0; font: 14px/1.5 ui-sans-serif, system-ui; background: var(--paper); color: var(--ink); }
+  header.top { padding: 32px 40px; border-bottom: 1px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; }
+  header.top h1 { font-size: 28px; margin: 0; letter-spacing: -0.02em; }
+  header.top .meta { font-variant-numeric: tabular-nums; opacity: 0.7; }
+  main { padding: 32px 40px; max-width: 1400px; margin: 0 auto; }
+  .pair { margin-bottom: 48px; border: 1px solid var(--ink); background: white; }
+  .pair header { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--ink); }
+  .pair[data-status="major-delta"] header { background: var(--accent); color: white; }
+  .pair[data-status="identical-size"] .delta::after { content: " — identical"; opacity: 0.6; }
+  .pair h3 { margin: 0; text-transform: uppercase; letter-spacing: 0.04em; }
+  .frames { display: grid; grid-template-columns: 1fr 1fr; }
+  figure { margin: 0; padding: 16px; border-right: 1px solid var(--ink); }
+  figure:last-child { border-right: 0; }
+  figcaption { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; margin-bottom: 8px; }
+  figure img { max-width: 100%; display: block; border: 1px solid #ddd; }
+  .missing { padding: 40px; text-align: center; opacity: 0.4; font-style: italic; border: 1px dashed #999; }
+  table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
+  th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--ink); }
+  h2 { margin-top: 48px; font-size: 20px; }
+</style>
+</head>
+<body>
+  <header class="top">
+    <h1>visual-diff</h1>
+    <div class="meta">${bL} → ${aL} · ${pairs.length} components</div>
+  </header>
+  <main>
+    <h2>Component snapshots</h2>
+    ${pairHtml || '<p>No component screenshots captured.</p>'}
+    ${changedColors.length ? `<h2>Color token changes</h2><table><thead><tr><th>token</th><th>before</th><th>after</th></tr></thead><tbody>${tokenRows}</tbody></table>` : ''}
+  </main>
+</body>
+</html>`;
+}

package/.github/FUNDING.yml DELETED Viewed

	@@ -1 +0,0 @@
1	- github: [Manavarya09]

package/.github/ISSUE_TEMPLATE/bug_report.yml DELETED Viewed

@@ -1,62 +0,0 @@
-name: Bug report
-description: Something in designlang is broken or produces wrong output.
-title: "[Bug]: "
-labels: ["bug"]
-body:
-  - type: input
-    id: url
-    attributes:
-      label: URL extracted
-      description: The site you ran designlang against.
-      placeholder: https://example.com
-    validations:
-      required: true
-  - type: input
-    id: command
-    attributes:
-      label: Command used
-      description: The exact command you ran.
-      placeholder: npx designlang https://example.com --full
-    validations:
-      required: true
-  - type: textarea
-    id: expected
-    attributes:
-      label: What you expected
-    validations:
-      required: true
-  - type: textarea
-    id: actual
-    attributes:
-      label: What actually happened
-      description: Include stack traces, log output, or relevant snippets from output files.
-    validations:
-      required: true
-  - type: input
-    id: version
-    attributes:
-      label: designlang version
-      description: Output of `npx designlang --version` (or the version in package.json)
-      placeholder: 7.0.0
-    validations:
-      required: true
-  - type: input
-    id: node
-    attributes:
-      label: Node.js version
-      description: Output of `node --version`
-      placeholder: v20.11.0
-    validations:
-      required: true
-  - type: input
-    id: os
-    attributes:
-      label: OS
-      placeholder: macOS 14.5 / Ubuntu 22.04 / Windows 11
-    validations:
-      required: true
-  - type: textarea
-    id: extra
-    attributes:
-      label: Anything else
-      description: Screenshots, env variables, network constraints, auth requirements, etc.

package/.github/ISSUE_TEMPLATE/config.yml DELETED Viewed

@@ -1,8 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: Question or discussion
-    url: https://github.com/Manavarya09/design-extract/discussions
-    about: Ask a question, share an extraction, or discuss ideas.
-  - name: designlang website
-    url: https://website-five-lime-65.vercel.app
-    about: Read more about what designlang does.

package/.github/ISSUE_TEMPLATE/feature_request.yml DELETED Viewed

@@ -1,28 +0,0 @@
-name: Feature request
-description: Suggest a new extraction, output format, or CLI capability.
-title: "[Feature]: "
-labels: ["enhancement"]
-body:
-  - type: textarea
-    id: problem
-    attributes:
-      label: Problem
-      description: What are you trying to do that designlang doesn't support today?
-    validations:
-      required: true
-  - type: textarea
-    id: proposal
-    attributes:
-      label: Proposal
-      description: What should designlang do? CLI flag, command, new extractor, new output format?
-    validations:
-      required: true
-  - type: textarea
-    id: alternatives
-    attributes:
-      label: Alternatives you've considered
-  - type: textarea
-    id: context
-    attributes:
-      label: Additional context
-      description: Example sites, example outputs, links to similar tools, screenshots.

package/.github/og-preview.png DELETED Viewed

Binary file

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

@@ -1,17 +0,0 @@
-# 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/chrome-extension/README.md DELETED Viewed

@@ -1,41 +0,0 @@
-# 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 DELETED Viewed

@@ -1,7 +0,0 @@
-<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/icons/icon-128.png DELETED Viewed

Binary file

package/chrome-extension/icons/icon-16.png DELETED Viewed

Binary file

package/chrome-extension/icons/icon-32.png DELETED Viewed

Binary file

package/chrome-extension/icons/icon-48.png DELETED Viewed

Binary file

package/chrome-extension/manifest.json DELETED Viewed

@@ -1,26 +0,0 @@
-{
-  "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 DELETED Viewed

@@ -1,167 +0,0 @@
-<!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 DELETED Viewed

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