claudecode-omc 5.9.1 → 5.11.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.
- package/.local/settings/settings.json +8 -0
- package/.omc-curation/governance.json +3 -0
- package/.omc-curation/sources.lock.json +5 -0
- package/README.md +10 -1
- package/bundled/manifest.json +2 -1
- package/bundled/upstream/impeccable/.omc-source/bundle.json +20 -0
- package/bundled/upstream/impeccable/.omc-source/provenance.json +105 -0
- package/bundled/upstream/impeccable/agents/impeccable-manual-edit-applier.md +97 -0
- package/bundled/upstream/impeccable/skills/impeccable/SKILL.md +168 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/adapt.md +311 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/animate.md +201 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/audit.md +133 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/bolder.md +113 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/brand.md +108 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/clarify.md +288 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/codex.md +105 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/colorize.md +257 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/craft.md +123 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/critique.md +767 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/delight.md +302 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/distill.md +111 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/document.md +429 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/extract.md +69 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/harden.md +347 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/hooks.md +88 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/init.md +172 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/interaction-design.md +189 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/layout.md +161 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/live.md +718 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/onboard.md +234 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/optimize.md +258 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/overdrive.md +130 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/polish.md +241 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/product.md +60 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/quieter.md +99 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/shape.md +165 -0
- package/bundled/upstream/impeccable/skills/impeccable/reference/typeset.md +279 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/command-metadata.json +94 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/context-signals.mjs +225 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/context.mjs +280 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/critique-storage.mjs +242 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/detect-csp.mjs +198 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/detect.mjs +21 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/detector/browser/injected/index.mjs +1735 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/detector/cli/main.mjs +244 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/detector/detect-antipatterns-browser.js +4907 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/detector/detect-antipatterns.mjs +43 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/detector/engines/browser/detect-url.mjs +252 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/detector/engines/regex/detect-text.mjs +552 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/detector/engines/static-html/css-cascade.mjs +1013 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/detector/engines/static-html/detect-html.mjs +208 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/detector/engines/visual/screenshot-contrast.mjs +189 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/detector/findings.mjs +12 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/detector/node/file-system.mjs +198 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/detector/profile/profiler.mjs +166 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/detector/registry/antipatterns.mjs +419 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/detector/rules/checks.mjs +2671 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/detector/shared/color.mjs +124 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/detector/shared/constants.mjs +101 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/detector/shared/page.mjs +7 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/hook-admin.mjs +574 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/hook-before-edit.mjs +473 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/hook-lib.mjs +1286 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/hook.mjs +61 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/lib/design-parser.mjs +835 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/lib/impeccable-paths.mjs +126 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/lib/is-generated.mjs +69 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live/browser-script-parts.mjs +49 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live/completion.mjs +19 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live/event-validation.mjs +137 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live/insert-ui.mjs +458 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live/manual-apply.mjs +939 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live/manual-edit-routes.mjs +357 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live/manual-edits-buffer.mjs +152 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live/session-store.mjs +289 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live/svelte-component.mjs +826 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live/sveltekit-adapter.mjs +274 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live/ui-core.mjs +180 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live/vocabulary.mjs +36 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live-accept.mjs +812 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live-browser-dom.js +146 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live-browser-session.js +123 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live-browser.js +11086 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live-commit-manual-edits.mjs +1241 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live-complete.mjs +75 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live-copy-edit-agent.mjs +683 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live-discard-manual-edits.mjs +51 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live-inject.mjs +583 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live-insert.mjs +272 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live-manual-edit-evidence.mjs +363 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live-poll.mjs +379 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live-resume.mjs +94 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live-server.mjs +1134 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live-status.mjs +61 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live-wrap.mjs +894 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/live.mjs +246 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/modern-screenshot.umd.js +14 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/palette.mjs +633 -0
- package/bundled/upstream/impeccable/skills/impeccable/scripts/pin.mjs +214 -0
- package/package.json +1 -1
- package/src/cli/source.js +6 -0
- package/src/config/sources.js +15 -0
- package/src/merge/content-patch.js +4 -0
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
import fs from 'node:fs';
|
|
2
|
+
import path from 'node:path';
|
|
3
|
+
|
|
4
|
+
import { GENERIC_FONTS, OVERUSED_FONTS } from '../../shared/constants.mjs';
|
|
5
|
+
import { isFullPage } from '../../shared/page.mjs';
|
|
6
|
+
import { finding } from '../../findings.mjs';
|
|
7
|
+
import { profileFindings, profileStep, profileStepAsync } from '../../profile/profiler.mjs';
|
|
8
|
+
import {
|
|
9
|
+
checkElementBorders,
|
|
10
|
+
checkElementClippedOverflow,
|
|
11
|
+
checkElementColors,
|
|
12
|
+
checkElementGlow,
|
|
13
|
+
checkElementGptBorderShadow,
|
|
14
|
+
checkElementHeroEyebrow,
|
|
15
|
+
checkElementIconTile,
|
|
16
|
+
checkElementItalicSerif,
|
|
17
|
+
checkElementMotion,
|
|
18
|
+
checkElementOversizedH1,
|
|
19
|
+
checkElementQuality,
|
|
20
|
+
checkCreamPalette,
|
|
21
|
+
checkHtmlPatterns,
|
|
22
|
+
checkPageLayout,
|
|
23
|
+
checkPageQualityFromDoc,
|
|
24
|
+
checkRepeatedSectionKickersFromDoc,
|
|
25
|
+
resolveBackground,
|
|
26
|
+
resolveBorderRadiusPx,
|
|
27
|
+
} from '../../rules/checks.mjs';
|
|
28
|
+
import { filterByProviders } from '../../registry/antipatterns.mjs';
|
|
29
|
+
import { detectText, runTextContentAnalyzers } from '../regex/detect-text.mjs';
|
|
30
|
+
import {
|
|
31
|
+
StaticDocument,
|
|
32
|
+
buildStaticStyleMap,
|
|
33
|
+
buildStaticWindow,
|
|
34
|
+
collectStaticCssText,
|
|
35
|
+
} from './css-cascade.mjs';
|
|
36
|
+
|
|
37
|
+
function checkStaticPageTypography(document, window) {
|
|
38
|
+
const findings = [];
|
|
39
|
+
const fonts = new Set();
|
|
40
|
+
const overusedFound = new Set();
|
|
41
|
+
for (const el of document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, td, th, dd, blockquote, figcaption, a, button, label, span, div')) {
|
|
42
|
+
const hasText = el.childNodes.some(n => n.nodeType === 3 && n.textContent.trim().length > 0);
|
|
43
|
+
if (!hasText) continue;
|
|
44
|
+
const ff = window.getComputedStyle(el).fontFamily || '';
|
|
45
|
+
const stack = ff.split(',').map(f => f.trim().replace(/^['"]|['"]$/g, '').toLowerCase());
|
|
46
|
+
const primary = stack.find(f => f && !GENERIC_FONTS.has(f));
|
|
47
|
+
if (!primary) continue;
|
|
48
|
+
fonts.add(primary);
|
|
49
|
+
if (OVERUSED_FONTS.has(primary)) overusedFound.add(primary);
|
|
50
|
+
}
|
|
51
|
+
for (const font of overusedFound) {
|
|
52
|
+
findings.push({ id: 'overused-font', snippet: `Primary font: ${font}` });
|
|
53
|
+
}
|
|
54
|
+
if (fonts.size === 1 && document.querySelectorAll('*').length >= 20) {
|
|
55
|
+
findings.push({ id: 'single-font', snippet: `only font used is ${[...fonts][0]}` });
|
|
56
|
+
}
|
|
57
|
+
const sizes = new Set();
|
|
58
|
+
for (const el of document.querySelectorAll('h1, h2, h3, h4, h5, h6, p, span, a, li, td, th, label, button, div')) {
|
|
59
|
+
const fontSize = parseFloat(window.getComputedStyle(el).fontSize);
|
|
60
|
+
if (fontSize >= 8 && fontSize < 200) sizes.add(Math.round(fontSize * 10) / 10);
|
|
61
|
+
}
|
|
62
|
+
if (sizes.size >= 3) {
|
|
63
|
+
const sorted = [...sizes].sort((a, b) => a - b);
|
|
64
|
+
const ratio = sorted[sorted.length - 1] / sorted[0];
|
|
65
|
+
if (ratio < 2.0) {
|
|
66
|
+
findings.push({ id: 'flat-type-hierarchy', snippet: `Sizes: ${sorted.map(s => s + 'px').join(', ')} (ratio ${ratio.toFixed(1)}:1)` });
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
return findings;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
function checkElementBrokenImage(el) {
|
|
73
|
+
const src = (el.getAttribute && el.getAttribute('src')) ?? el.attribs?.src;
|
|
74
|
+
// Missing src attribute entirely
|
|
75
|
+
if (src === undefined || src === null) {
|
|
76
|
+
return [{ id: 'broken-image', snippet: '<img> with no src attribute' }];
|
|
77
|
+
}
|
|
78
|
+
const trimmed = String(src).trim();
|
|
79
|
+
// Empty or placeholder-only src values
|
|
80
|
+
if (trimmed === '' || trimmed === '#') {
|
|
81
|
+
return [{ id: 'broken-image', snippet: `<img src="${src}">` }];
|
|
82
|
+
}
|
|
83
|
+
return [];
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
const STATIC_ELEMENT_RULES = [
|
|
87
|
+
{ id: 'border-rules', selector: '*', run: (el, tag, style, window, customPropMap) => checkElementBorders(tag, style, null, resolveBorderRadiusPx(el, style, parseFloat(style.width) || 0, window)) },
|
|
88
|
+
{ id: 'color-rules', selector: '*', run: (el, tag, style, window, customPropMap) => checkElementColors(el, style, tag, window, customPropMap, false) },
|
|
89
|
+
{ id: 'dark-glow', selector: '*', run: (el, tag, style, window, customPropMap) => checkElementGlow(tag, style, resolveBackground(el.parentElement || el, window, customPropMap)) },
|
|
90
|
+
{ id: 'motion-rules', selector: '*', run: (el, tag, style) => checkElementMotion(tag, style) },
|
|
91
|
+
{ id: 'icon-tile-stack', selector: 'h1,h2,h3,h4,h5,h6', run: (el, tag, _style, window) => checkElementIconTile(el, tag, window) },
|
|
92
|
+
{ id: 'italic-serif-display', selector: 'h1,h2', run: (el, tag, style) => checkElementItalicSerif(el, style, tag) },
|
|
93
|
+
{ id: 'hero-eyebrow-chip', selector: 'h1', run: (el, tag, style, window, customPropMap) => checkElementHeroEyebrow(el, style, tag, window, customPropMap) },
|
|
94
|
+
{ id: 'broken-image', selector: 'img', run: (el) => checkElementBrokenImage(el) },
|
|
95
|
+
{ id: 'quality-rules', selector: '*', run: (el, tag, style, window) => checkElementQuality(el, style, tag, window) },
|
|
96
|
+
{ id: 'oversized-h1', selector: 'h1', run: (el, tag, style, window) => checkElementOversizedH1(el, style, tag, window) },
|
|
97
|
+
{ id: 'clipped-overflow-container', selector: '*', run: (el, tag, style, window) => checkElementClippedOverflow(el, style, tag, window) },
|
|
98
|
+
{ id: 'gpt-thin-border-wide-shadow', selector: '*', run: (el, tag, style) => checkElementGptBorderShadow(el, style) },
|
|
99
|
+
];
|
|
100
|
+
|
|
101
|
+
async function detectHtml(filePath, options = {}) {
|
|
102
|
+
const profile = options?.profile;
|
|
103
|
+
const html = profileStep(profile, {
|
|
104
|
+
engine: 'static-html',
|
|
105
|
+
phase: 'setup',
|
|
106
|
+
ruleId: 'read-html',
|
|
107
|
+
target: filePath,
|
|
108
|
+
}, () => fs.readFileSync(filePath, 'utf-8'));
|
|
109
|
+
|
|
110
|
+
let modules;
|
|
111
|
+
try {
|
|
112
|
+
modules = await profileStepAsync(profile, {
|
|
113
|
+
engine: 'static-html',
|
|
114
|
+
phase: 'setup',
|
|
115
|
+
ruleId: 'import-static-parser',
|
|
116
|
+
target: filePath,
|
|
117
|
+
}, async () => {
|
|
118
|
+
const [htmlparser2, cssSelect, csstree, domutils] = await Promise.all([
|
|
119
|
+
import('htmlparser2'),
|
|
120
|
+
import('css-select'),
|
|
121
|
+
import('css-tree'),
|
|
122
|
+
import('domutils'),
|
|
123
|
+
]);
|
|
124
|
+
return {
|
|
125
|
+
parseDocument: htmlparser2.parseDocument,
|
|
126
|
+
selectAll: cssSelect.selectAll,
|
|
127
|
+
selectOne: cssSelect.selectOne,
|
|
128
|
+
is: cssSelect.is,
|
|
129
|
+
csstree,
|
|
130
|
+
domutils,
|
|
131
|
+
};
|
|
132
|
+
});
|
|
133
|
+
} catch {
|
|
134
|
+
return detectText(html, filePath, options);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
const resolvedPath = path.resolve(filePath);
|
|
138
|
+
const fileDir = path.dirname(resolvedPath);
|
|
139
|
+
const root = profileStep(profile, {
|
|
140
|
+
engine: 'static-html',
|
|
141
|
+
phase: 'parse-html',
|
|
142
|
+
ruleId: 'parse-document',
|
|
143
|
+
target: filePath,
|
|
144
|
+
}, () => modules.parseDocument(html, { lowerCaseAttributeNames: false, lowerCaseTags: true }));
|
|
145
|
+
|
|
146
|
+
const cssText = collectStaticCssText(root, fileDir, profile, filePath, modules);
|
|
147
|
+
const document = new StaticDocument(root, modules);
|
|
148
|
+
buildStaticStyleMap(root, document, cssText, modules, profile, filePath);
|
|
149
|
+
const window = buildStaticWindow(document);
|
|
150
|
+
|
|
151
|
+
const customPropMap = null;
|
|
152
|
+
|
|
153
|
+
const findings = [];
|
|
154
|
+
const runElementCheck = (ruleId, callback) => profile
|
|
155
|
+
? profileFindings(profile, { engine: 'static-html', phase: 'element', ruleId, target: filePath }, callback)
|
|
156
|
+
: callback();
|
|
157
|
+
|
|
158
|
+
const visitedByRule = new Map();
|
|
159
|
+
for (const rule of STATIC_ELEMENT_RULES) {
|
|
160
|
+
const elements = document.querySelectorAll(rule.selector);
|
|
161
|
+
visitedByRule.set(rule.id, elements.length);
|
|
162
|
+
for (const el of elements) {
|
|
163
|
+
const tag = el.tagName.toLowerCase();
|
|
164
|
+
const style = window.getComputedStyle(el);
|
|
165
|
+
for (const f of runElementCheck(rule.id, () => rule.run(el, tag, style, window, customPropMap))) {
|
|
166
|
+
findings.push(finding(f.id, filePath, f.snippet));
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
if (isFullPage(html)) {
|
|
172
|
+
const runPageCheck = (ruleId, callback) => profile
|
|
173
|
+
? profileFindings(profile, { engine: 'static-html', phase: 'page', ruleId, target: filePath }, callback)
|
|
174
|
+
: callback();
|
|
175
|
+
for (const f of runPageCheck('typography-rules', () => checkStaticPageTypography(document, window))) {
|
|
176
|
+
findings.push(finding(f.id, filePath, f.snippet));
|
|
177
|
+
}
|
|
178
|
+
for (const f of runPageCheck('repeated-section-kickers', () => checkRepeatedSectionKickersFromDoc(document, window))) {
|
|
179
|
+
findings.push(finding(f.id, filePath, f.snippet));
|
|
180
|
+
}
|
|
181
|
+
for (const f of runPageCheck('layout-rules', () => checkPageLayout(document, window))) {
|
|
182
|
+
findings.push(finding(f.id, filePath, f.snippet));
|
|
183
|
+
}
|
|
184
|
+
for (const f of runPageCheck('cream-palette', () => checkCreamPalette(document, window))) {
|
|
185
|
+
findings.push(finding(f.id, filePath, f.snippet));
|
|
186
|
+
}
|
|
187
|
+
for (const f of runPageCheck('skipped-heading', () => checkPageQualityFromDoc(document))) {
|
|
188
|
+
findings.push(finding(f.id, filePath, f.snippet));
|
|
189
|
+
}
|
|
190
|
+
for (const f of runPageCheck('html-patterns', () => checkHtmlPatterns(html).filter(item =>
|
|
191
|
+
item.id !== 'bounce-easing' && item.id !== 'layout-transition'
|
|
192
|
+
))) {
|
|
193
|
+
findings.push(finding(f.id, filePath, f.snippet));
|
|
194
|
+
}
|
|
195
|
+
// Text-content analyzers (em-dash overuse, marketing buzzwords,
|
|
196
|
+
// numbered section markers, aphoristic cadence) live in the regex
|
|
197
|
+
// engine. Call them from here so .html files get the same coverage
|
|
198
|
+
// as .css/.tsx files. These are scoped to text content only and
|
|
199
|
+
// don't overlap with static-html's element/page rules.
|
|
200
|
+
for (const f of runPageCheck('text-content', () => runTextContentAnalyzers(html, filePath, options))) {
|
|
201
|
+
findings.push(finding(f.antipattern, filePath, f.snippet));
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
return filterByProviders(findings, options.providers);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
export { checkStaticPageTypography, STATIC_ELEMENT_RULES, detectHtml };
|
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
function sanitizeScreenshotClip(clip, viewport) {
|
|
2
|
+
if (!clip) return null;
|
|
3
|
+
const x = Math.max(0, Math.floor(clip.x || 0));
|
|
4
|
+
const y = Math.max(0, Math.floor(clip.y || 0));
|
|
5
|
+
const width = Math.min(
|
|
6
|
+
Math.max(1, Math.ceil(clip.width || 0)),
|
|
7
|
+
Math.max(1, viewport?.width || 1600),
|
|
8
|
+
);
|
|
9
|
+
const height = Math.min(
|
|
10
|
+
Math.max(1, Math.ceil(clip.height || 0)),
|
|
11
|
+
320,
|
|
12
|
+
);
|
|
13
|
+
if (width < 1 || height < 1) return null;
|
|
14
|
+
return { x, y, width, height };
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
async function compareScreenshotContrast(page, beforeBase64, afterBase64, candidate) {
|
|
18
|
+
return page.evaluate(async ({ beforeBase64, afterBase64, candidate }) => {
|
|
19
|
+
const loadImage = (base64) => new Promise((resolve, reject) => {
|
|
20
|
+
const img = new Image();
|
|
21
|
+
img.onload = () => resolve(img);
|
|
22
|
+
img.onerror = () => reject(new Error('Could not decode contrast screenshot'));
|
|
23
|
+
img.src = `data:image/png;base64,${base64}`;
|
|
24
|
+
});
|
|
25
|
+
const [before, after] = await Promise.all([loadImage(beforeBase64), loadImage(afterBase64)]);
|
|
26
|
+
const width = Math.min(before.width, after.width);
|
|
27
|
+
const height = Math.min(before.height, after.height);
|
|
28
|
+
if (width < 1 || height < 1) return null;
|
|
29
|
+
|
|
30
|
+
const canvas = document.createElement('canvas');
|
|
31
|
+
canvas.width = width;
|
|
32
|
+
canvas.height = height;
|
|
33
|
+
const ctx = canvas.getContext('2d', { willReadFrequently: true });
|
|
34
|
+
if (!ctx) return null;
|
|
35
|
+
|
|
36
|
+
ctx.drawImage(before, 0, 0, width, height);
|
|
37
|
+
const beforePixels = ctx.getImageData(0, 0, width, height).data;
|
|
38
|
+
ctx.clearRect(0, 0, width, height);
|
|
39
|
+
ctx.drawImage(after, 0, 0, width, height);
|
|
40
|
+
const afterPixels = ctx.getImageData(0, 0, width, height).data;
|
|
41
|
+
|
|
42
|
+
const luminance = ({ r, g, b }) => {
|
|
43
|
+
const convert = c => {
|
|
44
|
+
const v = c / 255;
|
|
45
|
+
return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
|
|
46
|
+
};
|
|
47
|
+
return 0.2126 * convert(r) + 0.7152 * convert(g) + 0.0722 * convert(b);
|
|
48
|
+
};
|
|
49
|
+
const ratio = (a, b) => {
|
|
50
|
+
const l1 = luminance(a);
|
|
51
|
+
const l2 = luminance(b);
|
|
52
|
+
return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
const cssTextColor = candidate.textColor && !candidate.preferRenderedForeground
|
|
56
|
+
? {
|
|
57
|
+
r: candidate.textColor.r,
|
|
58
|
+
g: candidate.textColor.g,
|
|
59
|
+
b: candidate.textColor.b,
|
|
60
|
+
}
|
|
61
|
+
: null;
|
|
62
|
+
const ratios = [];
|
|
63
|
+
let glyphPixels = 0;
|
|
64
|
+
let strongestDelta = 0;
|
|
65
|
+
for (let i = 0; i < beforePixels.length; i += 4) {
|
|
66
|
+
const delta = Math.abs(beforePixels[i] - afterPixels[i])
|
|
67
|
+
+ Math.abs(beforePixels[i + 1] - afterPixels[i + 1])
|
|
68
|
+
+ Math.abs(beforePixels[i + 2] - afterPixels[i + 2])
|
|
69
|
+
+ Math.abs(beforePixels[i + 3] - afterPixels[i + 3]);
|
|
70
|
+
strongestDelta = Math.max(strongestDelta, delta);
|
|
71
|
+
if (delta < 10) continue;
|
|
72
|
+
glyphPixels++;
|
|
73
|
+
const fg = cssTextColor || {
|
|
74
|
+
r: beforePixels[i],
|
|
75
|
+
g: beforePixels[i + 1],
|
|
76
|
+
b: beforePixels[i + 2],
|
|
77
|
+
};
|
|
78
|
+
const bg = {
|
|
79
|
+
r: afterPixels[i],
|
|
80
|
+
g: afterPixels[i + 1],
|
|
81
|
+
b: afterPixels[i + 2],
|
|
82
|
+
};
|
|
83
|
+
ratios.push(ratio(fg, bg));
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
if (ratios.length < 8) {
|
|
87
|
+
return {
|
|
88
|
+
glyphPixels,
|
|
89
|
+
strongestDelta,
|
|
90
|
+
worstRatio: null,
|
|
91
|
+
p10Ratio: null,
|
|
92
|
+
medianRatio: null,
|
|
93
|
+
};
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
ratios.sort((a, b) => a - b);
|
|
97
|
+
const pick = pct => ratios[Math.min(ratios.length - 1, Math.max(0, Math.floor((pct / 100) * ratios.length)))];
|
|
98
|
+
return {
|
|
99
|
+
glyphPixels,
|
|
100
|
+
strongestDelta,
|
|
101
|
+
worstRatio: ratios[0],
|
|
102
|
+
p10Ratio: pick(10),
|
|
103
|
+
medianRatio: pick(50),
|
|
104
|
+
};
|
|
105
|
+
}, { beforeBase64, afterBase64, candidate });
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
async function captureVisualContrastCandidate(page, candidate, viewport) {
|
|
109
|
+
const clip = sanitizeScreenshotClip(candidate.clip, viewport);
|
|
110
|
+
if (!clip) return null;
|
|
111
|
+
|
|
112
|
+
const beforeBase64 = await page.screenshot({
|
|
113
|
+
encoding: 'base64',
|
|
114
|
+
clip,
|
|
115
|
+
captureBeyondViewport: true,
|
|
116
|
+
});
|
|
117
|
+
const token = `impeccable-contrast-${Date.now()}-${Math.random().toString(36).slice(2)}`;
|
|
118
|
+
const applied = await page.evaluate(({ selector, token, backgroundClipText }) => {
|
|
119
|
+
let el;
|
|
120
|
+
try {
|
|
121
|
+
el = document.querySelector(selector);
|
|
122
|
+
} catch {
|
|
123
|
+
return false;
|
|
124
|
+
}
|
|
125
|
+
if (!el) return false;
|
|
126
|
+
let style = document.getElementById('impeccable-visual-contrast-hide-style');
|
|
127
|
+
if (!style) {
|
|
128
|
+
style = document.createElement('style');
|
|
129
|
+
style.id = 'impeccable-visual-contrast-hide-style';
|
|
130
|
+
style.textContent = [
|
|
131
|
+
'[data-impeccable-visual-contrast-target] {',
|
|
132
|
+
' color: transparent !important;',
|
|
133
|
+
' -webkit-text-fill-color: transparent !important;',
|
|
134
|
+
' text-shadow: none !important;',
|
|
135
|
+
'}',
|
|
136
|
+
'[data-impeccable-visual-contrast-target][data-impeccable-bgclip-text="true"] {',
|
|
137
|
+
' background-image: none !important;',
|
|
138
|
+
'}',
|
|
139
|
+
].join('\n');
|
|
140
|
+
document.head.appendChild(style);
|
|
141
|
+
}
|
|
142
|
+
el.setAttribute('data-impeccable-visual-contrast-target', token);
|
|
143
|
+
if (backgroundClipText) el.setAttribute('data-impeccable-bgclip-text', 'true');
|
|
144
|
+
return true;
|
|
145
|
+
}, {
|
|
146
|
+
selector: candidate.selector,
|
|
147
|
+
token,
|
|
148
|
+
backgroundClipText: candidate.backgroundClipText,
|
|
149
|
+
});
|
|
150
|
+
if (!applied) return null;
|
|
151
|
+
|
|
152
|
+
let afterBase64;
|
|
153
|
+
try {
|
|
154
|
+
afterBase64 = await page.screenshot({
|
|
155
|
+
encoding: 'base64',
|
|
156
|
+
clip,
|
|
157
|
+
captureBeyondViewport: true,
|
|
158
|
+
});
|
|
159
|
+
} finally {
|
|
160
|
+
await page.evaluate(({ selector }) => {
|
|
161
|
+
try {
|
|
162
|
+
const el = document.querySelector(selector);
|
|
163
|
+
if (el) {
|
|
164
|
+
el.removeAttribute('data-impeccable-visual-contrast-target');
|
|
165
|
+
el.removeAttribute('data-impeccable-bgclip-text');
|
|
166
|
+
}
|
|
167
|
+
} catch {
|
|
168
|
+
// Ignore invalid or stale selectors during cleanup.
|
|
169
|
+
}
|
|
170
|
+
}, { selector: candidate.selector }).catch(() => {});
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
const metrics = await compareScreenshotContrast(page, beforeBase64, afterBase64, candidate);
|
|
174
|
+
if (!metrics || !Number.isFinite(metrics.p10Ratio) || metrics.glyphPixels < 8) return null;
|
|
175
|
+
const measuredRatio = metrics.p10Ratio;
|
|
176
|
+
if (measuredRatio >= candidate.threshold) return null;
|
|
177
|
+
const textLabel = candidate.text ? ` "${candidate.text}"` : '';
|
|
178
|
+
const reasonLabel = (candidate.reasons || []).slice(0, 3).join(', ') || 'visual background';
|
|
179
|
+
return {
|
|
180
|
+
id: 'low-contrast',
|
|
181
|
+
snippet: `pixel contrast ${measuredRatio.toFixed(1)}:1 median ${metrics.medianRatio.toFixed(1)}:1 (need ${candidate.threshold}:1) on ${reasonLabel}${textLabel}`,
|
|
182
|
+
};
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
export {
|
|
186
|
+
sanitizeScreenshotClip,
|
|
187
|
+
compareScreenshotContrast,
|
|
188
|
+
captureVisualContrastCandidate,
|
|
189
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { getAntipattern } from './registry/antipatterns.mjs';
|
|
2
|
+
|
|
3
|
+
function getAP(id) {
|
|
4
|
+
return getAntipattern(id);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
function finding(id, filePath, snippet, line = 0) {
|
|
8
|
+
const ap = getAP(id);
|
|
9
|
+
return { antipattern: id, name: ap.name, description: ap.description, severity: ap.severity || 'warning', file: filePath, line, snippet };
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export { getAP, finding };
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
import fs from 'node:fs';
|
|
2
|
+
import path from 'node:path';
|
|
3
|
+
|
|
4
|
+
// ---------------------------------------------------------------------------
|
|
5
|
+
// File walker
|
|
6
|
+
// ---------------------------------------------------------------------------
|
|
7
|
+
|
|
8
|
+
const SKIP_DIRS = new Set([
|
|
9
|
+
'node_modules', '.git', 'dist', 'build', '.next', '.nuxt', '.output',
|
|
10
|
+
'.svelte-kit', '__pycache__', '.turbo', '.vercel',
|
|
11
|
+
]);
|
|
12
|
+
|
|
13
|
+
const SCANNABLE_EXTENSIONS = new Set([
|
|
14
|
+
'.html', '.htm', '.css', '.scss', '.sass', '.less',
|
|
15
|
+
'.jsx', '.tsx', '.js', '.ts',
|
|
16
|
+
'.vue', '.svelte', '.astro',
|
|
17
|
+
]);
|
|
18
|
+
|
|
19
|
+
const HTML_EXTENSIONS = new Set(['.html', '.htm']);
|
|
20
|
+
|
|
21
|
+
function walkDir(dir) {
|
|
22
|
+
const files = [];
|
|
23
|
+
let entries;
|
|
24
|
+
try { entries = fs.readdirSync(dir, { withFileTypes: true }); } catch { return files; }
|
|
25
|
+
for (const entry of entries) {
|
|
26
|
+
if (SKIP_DIRS.has(entry.name)) continue;
|
|
27
|
+
const full = path.join(dir, entry.name);
|
|
28
|
+
if (entry.isDirectory()) files.push(...walkDir(full));
|
|
29
|
+
else if (SCANNABLE_EXTENSIONS.has(path.extname(entry.name).toLowerCase())) files.push(full);
|
|
30
|
+
}
|
|
31
|
+
return files;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
// ---------------------------------------------------------------------------
|
|
36
|
+
// Import graph (multi-file awareness)
|
|
37
|
+
// ---------------------------------------------------------------------------
|
|
38
|
+
|
|
39
|
+
function resolveImport(specifier, fromDir, fileSet) {
|
|
40
|
+
if (!/^[./]/.test(specifier)) return null; // skip bare specifiers
|
|
41
|
+
const base = path.resolve(fromDir, specifier);
|
|
42
|
+
if (fileSet.has(base)) return base;
|
|
43
|
+
for (const ext of SCANNABLE_EXTENSIONS) {
|
|
44
|
+
const withExt = base + ext;
|
|
45
|
+
if (fileSet.has(withExt)) return withExt;
|
|
46
|
+
}
|
|
47
|
+
// index file convention
|
|
48
|
+
for (const ext of SCANNABLE_EXTENSIONS) {
|
|
49
|
+
const indexFile = path.join(base, 'index' + ext);
|
|
50
|
+
if (fileSet.has(indexFile)) return indexFile;
|
|
51
|
+
}
|
|
52
|
+
return null;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
function buildImportGraph(files) {
|
|
56
|
+
const fileSet = new Set(files);
|
|
57
|
+
const graph = new Map();
|
|
58
|
+
|
|
59
|
+
for (const file of files) {
|
|
60
|
+
const content = fs.readFileSync(file, 'utf-8');
|
|
61
|
+
const dir = path.dirname(file);
|
|
62
|
+
const imports = new Set();
|
|
63
|
+
|
|
64
|
+
// ES imports: import ... from '...' and import '...'
|
|
65
|
+
const esRe = /import\s+(?:[\s\S]*?from\s+)?['"]([^'"]+)['"]/g;
|
|
66
|
+
let m;
|
|
67
|
+
while ((m = esRe.exec(content)) !== null) {
|
|
68
|
+
const resolved = resolveImport(m[1], dir, fileSet);
|
|
69
|
+
if (resolved) imports.add(resolved);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// CSS @import
|
|
73
|
+
const cssRe = /@import\s+(?:url\(\s*)?['"]?([^'");\s]+)['"]?\s*\)?/g;
|
|
74
|
+
while ((m = cssRe.exec(content)) !== null) {
|
|
75
|
+
const resolved = resolveImport(m[1], dir, fileSet);
|
|
76
|
+
if (resolved) imports.add(resolved);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// SCSS @use / @forward
|
|
80
|
+
const scssRe = /@(?:use|forward)\s+['"]([^'"]+)['"]/g;
|
|
81
|
+
while ((m = scssRe.exec(content)) !== null) {
|
|
82
|
+
const resolved = resolveImport(m[1], dir, fileSet);
|
|
83
|
+
if (resolved) imports.add(resolved);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
graph.set(file, imports);
|
|
87
|
+
}
|
|
88
|
+
return graph;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// ---------------------------------------------------------------------------
|
|
92
|
+
// Framework dev server detection
|
|
93
|
+
// ---------------------------------------------------------------------------
|
|
94
|
+
|
|
95
|
+
const FRAMEWORK_CONFIGS = [
|
|
96
|
+
{ name: 'Next.js', files: ['next.config.js', 'next.config.mjs', 'next.config.ts'], defaultPort: 3000,
|
|
97
|
+
portRe: /port\s*[:=]\s*(\d+)/,
|
|
98
|
+
fingerprint: { header: 'x-powered-by', value: /next/i } },
|
|
99
|
+
{ name: 'SvelteKit', files: ['svelte.config.js', 'svelte.config.ts'], defaultPort: 5173,
|
|
100
|
+
portRe: /port\s*[:=]\s*(\d+)/,
|
|
101
|
+
fingerprint: { header: 'x-sveltekit-page', value: null } },
|
|
102
|
+
{ name: 'Nuxt', files: ['nuxt.config.js', 'nuxt.config.ts'], defaultPort: 3000,
|
|
103
|
+
portRe: /port\s*[:=]\s*(\d+)/,
|
|
104
|
+
fingerprint: { header: 'x-powered-by', value: /nuxt/i } },
|
|
105
|
+
{ name: 'Vite', files: ['vite.config.js', 'vite.config.ts', 'vite.config.mjs'], defaultPort: 5173,
|
|
106
|
+
portRe: /port\s*[:=]\s*(\d+)/,
|
|
107
|
+
fingerprint: { body: /@vite\/client/ } },
|
|
108
|
+
{ name: 'Astro', files: ['astro.config.js', 'astro.config.ts', 'astro.config.mjs'], defaultPort: 4321,
|
|
109
|
+
portRe: /port\s*[:=]\s*(\d+)/,
|
|
110
|
+
fingerprint: { body: /astro/i } },
|
|
111
|
+
{ name: 'Angular', files: ['angular.json'], defaultPort: 4200,
|
|
112
|
+
portRe: /"port"\s*:\s*(\d+)/,
|
|
113
|
+
fingerprint: { body: /ng-version/i } },
|
|
114
|
+
{ name: 'Remix', files: ['remix.config.js', 'remix.config.ts'], defaultPort: 3000,
|
|
115
|
+
portRe: /port\s*[:=]\s*(\d+)/,
|
|
116
|
+
fingerprint: { header: 'x-powered-by', value: /remix/i } },
|
|
117
|
+
];
|
|
118
|
+
|
|
119
|
+
function detectFrameworkConfig(dir) {
|
|
120
|
+
let entries;
|
|
121
|
+
try { entries = fs.readdirSync(dir); } catch { return null; }
|
|
122
|
+
const entrySet = new Set(entries);
|
|
123
|
+
|
|
124
|
+
for (const cfg of FRAMEWORK_CONFIGS) {
|
|
125
|
+
const match = cfg.files.find(f => entrySet.has(f));
|
|
126
|
+
if (!match) continue;
|
|
127
|
+
|
|
128
|
+
const configPath = path.join(dir, match);
|
|
129
|
+
let port = cfg.defaultPort;
|
|
130
|
+
try {
|
|
131
|
+
const content = fs.readFileSync(configPath, 'utf-8');
|
|
132
|
+
const portMatch = content.match(cfg.portRe);
|
|
133
|
+
if (portMatch) port = parseInt(portMatch[1], 10);
|
|
134
|
+
} catch { /* use default */ }
|
|
135
|
+
|
|
136
|
+
return { name: cfg.name, port, configPath, fingerprint: cfg.fingerprint };
|
|
137
|
+
}
|
|
138
|
+
return null;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
/**
|
|
142
|
+
* Check if a port is listening and optionally verify it matches the expected framework.
|
|
143
|
+
* Returns { listening: true, matched: true/false } or { listening: false }.
|
|
144
|
+
*/
|
|
145
|
+
async function isPortListening(port, fingerprint = null) {
|
|
146
|
+
if (!fingerprint) {
|
|
147
|
+
// Simple TCP probe fallback
|
|
148
|
+
const net = await import('node:net');
|
|
149
|
+
return new Promise((resolve) => {
|
|
150
|
+
const sock = net.default.createConnection({ port, host: '127.0.0.1' });
|
|
151
|
+
sock.setTimeout(500);
|
|
152
|
+
sock.on('connect', () => { sock.destroy(); resolve({ listening: true, matched: true }); });
|
|
153
|
+
sock.on('error', () => resolve({ listening: false }));
|
|
154
|
+
sock.on('timeout', () => { sock.destroy(); resolve({ listening: false }); });
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
// HTTP probe with fingerprint matching
|
|
159
|
+
try {
|
|
160
|
+
const controller = new AbortController();
|
|
161
|
+
const timeout = setTimeout(() => controller.abort(), 2000);
|
|
162
|
+
const res = await fetch(`http://localhost:${port}/`, { signal: controller.signal, redirect: 'follow' });
|
|
163
|
+
clearTimeout(timeout);
|
|
164
|
+
|
|
165
|
+
// Check header fingerprint
|
|
166
|
+
if (fingerprint.header) {
|
|
167
|
+
const val = res.headers.get(fingerprint.header);
|
|
168
|
+
if (val && (!fingerprint.value || fingerprint.value.test(val))) {
|
|
169
|
+
return { listening: true, matched: true };
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
// Check body fingerprint
|
|
174
|
+
if (fingerprint.body) {
|
|
175
|
+
const body = await res.text();
|
|
176
|
+
if (fingerprint.body.test(body)) {
|
|
177
|
+
return { listening: true, matched: true };
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
// Port is listening but doesn't match the expected framework
|
|
182
|
+
return { listening: true, matched: false };
|
|
183
|
+
} catch {
|
|
184
|
+
return { listening: false };
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
export {
|
|
189
|
+
SKIP_DIRS,
|
|
190
|
+
SCANNABLE_EXTENSIONS,
|
|
191
|
+
HTML_EXTENSIONS,
|
|
192
|
+
walkDir,
|
|
193
|
+
resolveImport,
|
|
194
|
+
buildImportGraph,
|
|
195
|
+
FRAMEWORK_CONFIGS,
|
|
196
|
+
detectFrameworkConfig,
|
|
197
|
+
isPortListening,
|
|
198
|
+
};
|