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
  1. package/CHANGELOG.md +69 -0
  2. package/README.md +154 -13
  3. package/bin/design-extract.js +94 -1
  4. package/package.json +9 -3
  5. package/src/config.js +2 -0
  6. package/src/crawler.js +55 -6
  7. package/src/drift.js +137 -0
  8. package/src/extractors/accessibility.js +44 -1
  9. package/src/extractors/colors.js +50 -12
  10. package/src/extractors/component-anatomy.js +123 -0
  11. package/src/extractors/motion.js +184 -0
  12. package/src/extractors/scoring.js +49 -30
  13. package/src/extractors/voice.js +96 -0
  14. package/src/formatters/markdown.js +88 -0
  15. package/src/formatters/motion-tokens.js +22 -0
  16. package/src/index.js +14 -0
  17. package/src/lint.js +198 -0
  18. package/src/visual-diff.js +116 -0
  19. package/.github/FUNDING.yml +0 -1
  20. package/.github/ISSUE_TEMPLATE/bug_report.yml +0 -62
  21. package/.github/ISSUE_TEMPLATE/config.yml +0 -8
  22. package/.github/ISSUE_TEMPLATE/feature_request.yml +0 -28
  23. package/.github/og-preview.png +0 -0
  24. package/.github/workflows/manavarya-bot.yml +0 -17
  25. package/chrome-extension/README.md +0 -41
  26. package/chrome-extension/icons/favicon.svg +0 -7
  27. package/chrome-extension/icons/icon-128.png +0 -0
  28. package/chrome-extension/icons/icon-16.png +0 -0
  29. package/chrome-extension/icons/icon-32.png +0 -0
  30. package/chrome-extension/icons/icon-48.png +0 -0
  31. package/chrome-extension/manifest.json +0 -26
  32. package/chrome-extension/popup.html +0 -167
  33. package/chrome-extension/popup.js +0 -59
  34. package/docs/superpowers/plans/2026-04-18-designlang-v7.md +0 -1121
  35. package/docs/superpowers/specs/2026-04-18-designlang-v7-design.md +0 -150
  36. package/docs/superpowers/specs/2026-04-18-website-redesign-design.md +0 -120
  37. package/docs/superpowers/specs/2026-04-19-designlang-v7-1-design.md +0 -111
  38. package/tests/cli.test.js +0 -84
  39. package/tests/cookies.test.js +0 -98
  40. package/tests/extractors.test.js +0 -792
  41. package/tests/formatters.test.js +0 -709
  42. package/tests/interaction-states.test.js +0 -62
  43. package/tests/mcp.test.js +0 -68
  44. package/tests/modern-css.test.js +0 -104
  45. package/tests/routes-reconciliation.test.js +0 -120
  46. package/tests/utils.test.js +0 -413
  47. package/tests/wide-gamut.test.js +0 -90
  48. package/website/.claude/launch.json +0 -11
  49. package/website/AGENTS.md +0 -5
  50. package/website/CLAUDE.md +0 -1
  51. package/website/README.md +0 -36
  52. package/website/app/api/extract/route.js +0 -245
  53. package/website/app/components/A11ySlider.js +0 -369
  54. package/website/app/components/Comparison.js +0 -286
  55. package/website/app/components/CssHealth.js +0 -243
  56. package/website/app/components/Extractor.js +0 -184
  57. package/website/app/components/HeroExtractor.js +0 -455
  58. package/website/app/components/Marginalia.js +0 -3
  59. package/website/app/components/McpSection.js +0 -223
  60. package/website/app/components/PlatformTabs.js +0 -250
  61. package/website/app/components/RegionsComponents.js +0 -429
  62. package/website/app/components/Rule.js +0 -13
  63. package/website/app/components/Specimens.js +0 -237
  64. package/website/app/components/StructuredData.js +0 -144
  65. package/website/app/components/TokenBrowser.js +0 -344
  66. package/website/app/components/token-browser-sample.js +0 -65
  67. package/website/app/globals.css +0 -505
  68. package/website/app/icon.svg +0 -7
  69. package/website/app/layout.js +0 -126
  70. package/website/app/opengraph-image.js +0 -170
  71. package/website/app/page.js +0 -399
  72. package/website/app/robots.js +0 -15
  73. package/website/app/seo-config.js +0 -82
  74. package/website/app/sitemap.js +0 -18
  75. package/website/jsconfig.json +0 -7
  76. package/website/lib/cache.js +0 -73
  77. package/website/lib/rate-limit.js +0 -30
  78. package/website/lib/rate-limit.test.js +0 -55
  79. package/website/lib/specimens.json +0 -86
  80. package/website/lib/token-helpers.js +0 -70
  81. package/website/lib/url-safety.js +0 -103
  82. package/website/lib/url-safety.test.js +0 -116
  83. package/website/lib/zip-files.js +0 -15
  84. package/website/next.config.mjs +0 -15
  85. package/website/package-lock.json +0 -1353
  86. package/website/package.json +0 -19
  87. package/website/public/favicon.svg +0 -7
  88. package/website/public/logo-specimen.svg +0 -76
  89. package/website/public/mark.svg +0 -12
  90. package/website/public/site.webmanifest +0 -13
@@ -1,19 +0,0 @@
1
- {
2
- "name": "website",
3
- "version": "0.1.0",
4
- "private": true,
5
- "scripts": {
6
- "dev": "next dev",
7
- "build": "next build --webpack",
8
- "start": "next start"
9
- },
10
- "dependencies": {
11
- "@sparticuz/chromium": "^147.0.0",
12
- "@vercel/blob": "^2.3.3",
13
- "jszip": "^3.10.1",
14
- "next": "16.2.3",
15
- "playwright-core": "^1.59.1",
16
- "react": "19.2.4",
17
- "react-dom": "19.2.4"
18
- }
19
- }
@@ -1,7 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="designlang">
2
- <title>designlang</title>
3
- <rect width="32" height="32" fill="#F3F1EA"/>
4
- <circle cx="13" cy="20" r="7.5" fill="none" stroke="#0A0908" stroke-width="4.5"/>
5
- <rect x="19" y="4" width="4.5" height="25" fill="#0A0908"/>
6
- <rect x="25" y="25" width="4" height="4" fill="#FF4800"/>
7
- </svg>
@@ -1,76 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 420" role="img" aria-label="designlang — reads a website the way a developer reads a stylesheet">
2
- <title>designlang</title>
3
- <desc>Museum specimen label for designlang. A lowercase d constructed from a ring, a stem, and one extracted orange token, set on warm paper with a palette strip.</desc>
4
-
5
- <!-- Paper card -->
6
- <rect width="1200" height="420" fill="#F3F1EA"/>
7
- <rect x="1" y="1" width="1198" height="418" fill="none" stroke="#0A0908" stroke-width="2"/>
8
-
9
- <!-- Top caption strip -->
10
- <g font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="13" fill="#403C34" letter-spacing="1.4">
11
- <text x="40" y="40">SPECIMEN / 01</text>
12
- <text x="40" y="58">EXTRACTED 2026</text>
13
- </g>
14
- <g font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="13" fill="#403C34" letter-spacing="1.4" text-anchor="end">
15
- <text x="1160" y="40">v7.0</text>
16
- <text x="1160" y="58">W3C DTCG</text>
17
- </g>
18
-
19
- <!-- Top hairline -->
20
- <line x1="40" y1="82" x2="1160" y2="82" stroke="#0A0908" stroke-width="1"/>
21
-
22
- <!-- Mark: lowercase d with extracted token. Fits inside the band 100-300 (200px tall). -->
23
- <g transform="translate(64, 116)">
24
- <circle cx="58" cy="120" r="50" fill="none" stroke="#0A0908" stroke-width="24"/>
25
- <rect x="94" y="20" width="24" height="164" fill="#0A0908"/>
26
- <rect x="124" y="156" width="28" height="28" fill="#FF4800"/>
27
- </g>
28
-
29
- <!-- Wordmark -->
30
- <text x="260" y="216"
31
- font-family="'Fraunces', 'Iowan Old Style', Georgia, serif"
32
- font-size="128" fill="#0A0908" letter-spacing="-3"
33
- text-rendering="geometricPrecision">designlang<tspan fill="#FF4800">.</tspan></text>
34
-
35
- <!-- Tagline -->
36
- <text x="260" y="268"
37
- font-family="'Instrument Sans', 'Helvetica Neue', sans-serif"
38
- font-size="18" fill="#403C34" font-style="italic">
39
- reads a website the way a developer reads a stylesheet.
40
- </text>
41
-
42
- <!-- Bottom hairline -->
43
- <line x1="40" y1="308" x2="1160" y2="308" stroke="#0A0908" stroke-width="1"/>
44
-
45
- <!-- Palette strip -->
46
- <g transform="translate(40, 344)">
47
- <g font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="10" fill="#403C34" letter-spacing="0.7">
48
- <g>
49
- <rect width="42" height="42" fill="#0A0908"/>
50
- <text x="0" y="56">#0A0908</text>
51
- </g>
52
- <g transform="translate(58, 0)">
53
- <rect width="42" height="42" fill="#403C34"/>
54
- <text x="0" y="56">#403C34</text>
55
- </g>
56
- <g transform="translate(116, 0)">
57
- <rect width="42" height="42" fill="#8B8778"/>
58
- <text x="0" y="56">#8B8778</text>
59
- </g>
60
- <g transform="translate(174, 0)">
61
- <rect width="42" height="42" fill="#D8D3C5"/>
62
- <text x="0" y="56">#D8D3C5</text>
63
- </g>
64
- <g transform="translate(232, 0)">
65
- <rect width="42" height="42" fill="#FF4800"/>
66
- <text x="0" y="56">#FF4800</text>
67
- </g>
68
- </g>
69
-
70
- <!-- Right caption -->
71
- <g font-family="ui-monospace, 'SF Mono', Menlo, monospace" font-size="12" fill="#403C34" letter-spacing="1" text-anchor="end">
72
- <text x="1120" y="16">$ npx designlang &lt;url&gt;</text>
73
- <text x="1120" y="34" fill="#8B8778">MIT / Node ≥ 20 / Playwright</text>
74
- </g>
75
- </g>
76
- </svg>
@@ -1,12 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" role="img" aria-label="designlang">
2
- <title>designlang</title>
3
- <!-- Token grid scaffold, set in a 10×10 specimen field. -->
4
- <!-- Mark = a lowercase d constructed from two primitives (counter, stem) + one orange token. -->
5
- <rect width="120" height="120" fill="transparent"/>
6
- <!-- counter: a ring, ink -->
7
- <circle cx="50" cy="74" r="30" fill="none" stroke="#0A0908" stroke-width="16"/>
8
- <!-- stem: a bar right of counter, ink -->
9
- <rect x="72" y="10" width="16" height="100" fill="#0A0908"/>
10
- <!-- token: the extracted primary, accent -->
11
- <rect x="92" y="92" width="18" height="18" fill="#FF4800"/>
12
- </svg>
@@ -1,13 +0,0 @@
1
- {
2
- "name": "designlang",
3
- "short_name": "designlang",
4
- "description": "Extract any website's complete design system as W3C DTCG tokens, Tailwind, Figma variables, shadcn, iOS, Android, Flutter, WordPress, plus an MCP server.",
5
- "start_url": "/",
6
- "display": "standalone",
7
- "background_color": "#F3F1EA",
8
- "theme_color": "#F3F1EA",
9
- "icons": [
10
- { "src": "/favicon.svg", "sizes": "any", "type": "image/svg+xml" },
11
- { "src": "/icon.svg", "sizes": "any", "type": "image/svg+xml" }
12
- ]
13
- }