designlang 7.1.0 → 8.0.0

package/src/utils/color-gamut.js

@@ -0,0 +1,82 @@
+// OKLCH / OKLab → sRGB hex conversion utilities.
+// Based on the public OKLab formulas by Björn Ottosson
+// (https://bottosson.github.io/posts/oklab/). Implemented locally (no deps).
+
+function clamp01(v) { return Math.max(0, Math.min(1, v)); }
+
+function linearToSrgb(x) {
+  // Convert linear-light sRGB [0..1] to sRGB gamma-encoded [0..1]
+  if (x < 0) x = 0;
+  if (x > 1) x = 1;
+  return x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055;
+}
+
+export function oklabToSrgb(L, a, b) {
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
+
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+
+  const r = +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+  const g = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+  const b2 = -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s;
+
+  return [linearToSrgb(r), linearToSrgb(g), linearToSrgb(b2)];
+}
+
+export function oklchToSrgb(L, C, h) {
+  const hr = (h * Math.PI) / 180;
+  const a = C * Math.cos(hr);
+  const b = C * Math.sin(hr);
+  return oklabToSrgb(L, a, b);
+}
+
+function toHex(v) {
+  const n = Math.round(clamp01(v) * 255);
+  return n.toString(16).padStart(2, '0');
+}
+
+export function rgbToHex(r, g, b) {
+  return '#' + toHex(r) + toHex(g) + toHex(b);
+}
+
+// Parse an oklch() or oklab() CSS value. Accepts values like:
+//   oklch(62.8% 0.258 29.23)
+//   oklch(0.628 0.258 29.23)
+//   oklab(0.628 0.1 -0.1)
+// Returns { type: 'oklch'|'oklab', L, C, h, a, b, raw } or null.
+export function parseOklchOrOklab(raw) {
+  if (!raw || typeof raw !== 'string') return null;
+  const m = raw.match(/^\s*(oklch|oklab)\(\s*([^)]+)\)\s*$/i);
+  if (!m) return null;
+  const type = m[1].toLowerCase();
+  // Strip alpha (everything after /)
+  const body = m[2].split('/')[0].trim();
+  const parts = body.split(/[\s,]+/).filter(Boolean);
+  if (parts.length < 3) return null;
+
+  function parseNum(s, scale = 1) {
+    if (s.endsWith('%')) return parseFloat(s) / 100;
+    return parseFloat(s) * scale;
+  }
+
+  const p0 = parts[0].endsWith('%') ? parseFloat(parts[0]) / 100 : parseFloat(parts[0]);
+  const p1 = parseFloat(parts[1]);
+  const p2 = parseFloat(parts[2]);
+  if ([p0, p1, p2].some(v => Number.isNaN(v))) return null;
+
+  if (type === 'oklch') return { type, L: p0, C: p1, h: p2, raw };
+  return { type, L: p0, a: p1, b: p2, raw };
+}
+
+export function oklchLikeToHex(raw) {
+  const parsed = parseOklchOrOklab(raw);
+  if (!parsed) return null;
+  const [r, g, b] = parsed.type === 'oklch'
+    ? oklchToSrgb(parsed.L, parsed.C, parsed.h)
+    : oklabToSrgb(parsed.L, parsed.a, parsed.b);
+  return rgbToHex(r, g, b);
+}

package/.github/FUNDING.yml

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

package/.github/ISSUE_TEMPLATE/bug_report.yml

@@ -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

@@ -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

@@ -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/chrome-extension/README.md

@@ -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

@@ -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/manifest.json

@@ -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

@@ -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

@@ -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);