wcag-scanner 1.2.65 → 1.2.67

package/dist/react/browserScanner.js

@@ -4,15 +4,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.scanBrowserPage = scanBrowserPage;
+exports.getNthChildSelector = getNthChildSelector;
 exports.getElementPath = getElementPath;
+exports.findElement = findElement;
+exports.findBySnippet = findBySnippet;
 const images_1 = __importDefault(require("../rules/images"));
+const backgroundImages_1 = __importDefault(require("../rules/backgroundImages"));
 const contrast_1 = __importDefault(require("../rules/contrast"));
 const forms_1 = __importDefault(require("../rules/forms"));
 const aria_1 = __importDefault(require("../rules/aria"));
 const structure_1 = __importDefault(require("../rules/structure"));
 const keyboard_1 = __importDefault(require("../rules/keyboard"));
+const presets_1 = require("../rules/presets");
 const RULES = {
     images: images_1.default,
+    backgroundImages: backgroundImages_1.default,
     contrast: contrast_1.default,
     forms: forms_1.default,
     aria: aria_1.default,
@@ -20,40 +26,117 @@ const RULES = {
     keyboard: keyboard_1.default,
 };
 async function scanBrowserPage(options = {}) {
+    var _a, _b;
     const start = performance.now();
-    const ruleNames = options.rules || Object.keys(RULES);
+    const ruleNames = (0, presets_1.resolveRuleNames)(options, presets_1.FAST_RULES);
     const violations = [];
     const warnings = [];
     const passes = [];
-    for (const name of ruleNames) {
-        const rule = RULES[name];
-        if (!rule)
-            continue;
-        try {
-            const res = await rule.check(document, window, options);
-            violations.push(...(res.violations || []));
-            warnings.push(...(res.warnings || []));
-            passes.push(...(res.passes || []));
+    const overlayRoot = document.querySelector('[data-wcag-overlay-root="true"]');
+    const overlayParent = (_a = overlayRoot === null || overlayRoot === void 0 ? void 0 : overlayRoot.parentNode) !== null && _a !== void 0 ? _a : null;
+    const overlayNextSibling = (_b = overlayRoot === null || overlayRoot === void 0 ? void 0 : overlayRoot.nextSibling) !== null && _b !== void 0 ? _b : null;
+    try {
+        // Detach the dev overlay while scanning so the inspector never scans itself.
+        if (overlayRoot && overlayParent) {
+            overlayParent.removeChild(overlayRoot);
         }
-        catch (_a) {
-            // rule failed in browser context — skip silently
+        for (const name of ruleNames) {
+            const rule = RULES[name];
+            if (!rule)
+                continue;
+            try {
+                const res = await rule.check(document, window, options);
+                violations.push(...(res.violations || []));
+                warnings.push(...(res.warnings || []));
+                passes.push(...(res.passes || []));
+            }
+            catch (_c) {
+                // rule failed in browser context — skip silently
+            }
         }
     }
-    // Exclude any elements that live inside the WCAG overlay itself
-    const overlayRoot = document.querySelector('[data-wcag-overlay-root]');
-    const isInOverlay = (el) => el != null && overlayRoot != null && overlayRoot.contains(el);
+    finally {
+        if (overlayRoot && overlayParent) {
+            overlayParent.insertBefore(overlayRoot, overlayNextSibling);
+        }
+    }
+    // Exclude elements that live inside the WCAG overlay itself
+    const overlaySurface = document.querySelector('[data-wcag-overlay="true"]');
+    const isInOverlay = (el) => el != null && ((overlaySurface != null && overlaySurface.contains(el)) ||
+        (overlayRoot != null && overlayRoot.contains(el)));
     const annotate = (item) => {
         const el = findElement(item, document);
-        return { ...item, domElement: el !== null && el !== void 0 ? el : undefined, elementPath: el ? getElementPath(el) : undefined };
+        if (!el)
+            return { ...item };
+        return {
+            ...item,
+            domElement: el,
+            elementPath: getElementPath(el),
+            elementSelector: getNthChildSelector(el),
+        };
     };
     return {
-        violations: violations.map(annotate).filter(v => { var _a; return !isInOverlay((_a = v.domElement) !== null && _a !== void 0 ? _a : null); }),
-        warnings: warnings.map(annotate).filter(w => { var _a; return !isInOverlay((_a = w.domElement) !== null && _a !== void 0 ? _a : null); }),
-        passes,
+        violations: dedupeIssues(violations.map(annotate)).filter(v => { var _a; return !isInOverlay((_a = v.domElement) !== null && _a !== void 0 ? _a : null); }),
+        warnings: dedupeIssues(warnings.map(annotate)).filter(w => { var _a; return !isInOverlay((_a = w.domElement) !== null && _a !== void 0 ? _a : null); }),
+        passes: dedupePasses(passes),
         duration: Math.round(performance.now() - start),
     };
 }
-/** Build a readable CSS-selector-style breadcrumb for an element. */
+function dedupeIssues(items) {
+    const seen = new Set();
+    return items.filter(item => {
+        var _a, _b, _c;
+        const key = [
+            item.rule,
+            item.description,
+            item.impact,
+            item.snippet,
+            (_a = item.element) === null || _a === void 0 ? void 0 : _a.tagName,
+            (_b = item.element) === null || _b === void 0 ? void 0 : _b.id,
+            (_c = item.element) === null || _c === void 0 ? void 0 : _c.className,
+        ].join('::');
+        if (seen.has(key))
+            return false;
+        seen.add(key);
+        return true;
+    });
+}
+function dedupePasses(items) {
+    const seen = new Set();
+    return items.filter(item => {
+        const key = [item.rule, item.description].join('::');
+        if (seen.has(key))
+            return false;
+        seen.add(key);
+        return true;
+    });
+}
+/**
+ * Build a precise nth-child CSS selector path for an element.
+ * This is unambiguous and always finds the exact element.
+ */
+function getNthChildSelector(el) {
+    const parts = [];
+    let current = el;
+    while (current && current.nodeType === 1) {
+        const parent = current.parentElement;
+        if (!parent)
+            break;
+        // If element has a unique ID we can stop traversing early
+        const id = current.id;
+        if (id) {
+            parts.unshift(`#${CSS.escape(id)}`);
+            break;
+        }
+        const index = Array.from(parent.children).indexOf(current) + 1;
+        parts.unshift(`${current.tagName.toLowerCase()}:nth-child(${index})`);
+        current = parent;
+        if (parts.length >= 8)
+            break;
+    }
+    return parts.join(' > ');
+}
+/** Build a human-readable breadcrumb label for an element. */
 function getElementPath(el) {
     const parts = [];
     let current = el;
@@ -63,7 +146,6 @@ function getElementPath(el) {
             part += `#${current.id}`;
         }
         else if (current.className && typeof current.className === 'string') {
-            // Skip auto-generated class names (hashed, uuid-like)
             const classes = current.className
                 .trim()
                 .split(/\s+/)
@@ -80,16 +162,19 @@ function getElementPath(el) {
 function findElement(item, doc) {
     var _a, _b;
     const { element: info, snippet } = item;
+    // 1. ID — most reliable
     if (info === null || info === void 0 ? void 0 : info.id) {
         const el = doc.getElementById(info.id);
         if (el)
             return el;
     }
+    // 2. Snippet attribute matching
     if (snippet) {
         const el = findBySnippet(snippet, doc);
         if (el)
             return el;
     }
+    // 3. tagName + className
     if (info === null || info === void 0 ? void 0 : info.tagName) {
         try {
             const classes = (_b = (_a = info.className) === null || _a === void 0 ? void 0 : _a.trim().split(/\s+/).filter(Boolean)) !== null && _b !== void 0 ? _b : [];
@@ -99,7 +184,7 @@ function findElement(item, doc) {
                 return el;
         }
         catch (_c) {
-            // invalid selector
+            // invalid selector — skip
         }
     }
     return null;

package/dist/react/gemini.d.ts

@@ -0,0 +1,12 @@
+export interface AiSuggestion {
+    code: string;
+    explanation: string;
+}
+export declare function getAiSuggestion(apiKey: string, violation: {
+    rule?: string;
+    description?: string;
+    snippet?: string;
+    help?: string;
+}): Promise<AiSuggestion>;
+export declare function getStoredApiKey(): string;
+export declare function setStoredApiKey(key: string): void;

package/dist/react/gemini.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAiSuggestion = getAiSuggestion;
+exports.getStoredApiKey = getStoredApiKey;
+exports.setStoredApiKey = setStoredApiKey;
+const GEMINI_URL = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent';
+async function getAiSuggestion(apiKey, violation) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const prompt = [
+        'You are a web accessibility expert. A WCAG violation was found:',
+        `Rule: ${(_a = violation.rule) !== null && _a !== void 0 ? _a : ''}`,
+        `Issue: ${(_b = violation.description) !== null && _b !== void 0 ? _b : ''}`,
+        violation.help ? `Hint: ${violation.help}` : '',
+        violation.snippet ? `HTML:\n${violation.snippet}` : '',
+        '',
+        'Reply with ONLY:',
+        '1. The corrected HTML inside a ```html block',
+        '2. One sentence explaining the fix',
+    ]
+        .filter(Boolean)
+        .join('\n');
+    const res = await fetch(`${GEMINI_URL}?key=${encodeURIComponent(apiKey)}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            contents: [{ parts: [{ text: prompt }] }],
+            generationConfig: { maxOutputTokens: 512, temperature: 0.1 },
+        }),
+    });
+    if (!res.ok) {
+        const body = await res.text().catch(() => '');
+        throw new Error(`Gemini ${res.status}: ${body.slice(0, 120)}`);
+    }
+    const data = await res.json();
+    const text = (_h = (_g = (_f = (_e = (_d = (_c = data.candidates) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.content) === null || _e === void 0 ? void 0 : _e.parts) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.text) !== null && _h !== void 0 ? _h : '';
+    const codeMatch = text.match(/```(?:html)?\s*([\s\S]*?)```/);
+    const code = codeMatch ? codeMatch[1].trim() : '';
+    const explanation = (_j = text
+        .replace(/```(?:html)?\s*[\s\S]*?```/g, '')
+        .trim()
+        .split('\n')
+        .filter(Boolean)
+        .slice(-1)[0]) !== null && _j !== void 0 ? _j : 'See corrected code above.';
+    return { code, explanation };
+}
+function getStoredApiKey() {
+    var _a;
+    try {
+        return (_a = localStorage.getItem('wcag-gemini-key')) !== null && _a !== void 0 ? _a : '';
+    }
+    catch (_b) {
+        return '';
+    }
+}
+function setStoredApiKey(key) {
+    try {
+        localStorage.setItem('wcag-gemini-key', key.trim());
+    }
+    catch ( /* */_a) { /* */ }
+}

package/dist/react/index.d.ts

@@ -3,3 +3,6 @@ export type { WcagDevOverlayProps } from './WcagDevOverlay';
 export { scanBrowserPage } from './browserScanner';
 export type { BrowserScanResults, AnnotatedViolation, AnnotatedWarning } from './browserScanner';
 export { initWcagOverlay } from './init';
+export { getAiSuggestion, getStoredApiKey, setStoredApiKey } from './gemini';
+export type { AiSuggestion } from './gemini';
+export { FAST_RULES, FULL_RULES, RULE_PRESETS, resolveRuleNames } from '../rules/presets';

package/dist/react/index.js

@@ -1,9 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.initWcagOverlay = exports.scanBrowserPage = exports.WcagDevOverlay = void 0;
+exports.resolveRuleNames = exports.RULE_PRESETS = exports.FULL_RULES = exports.FAST_RULES = exports.setStoredApiKey = exports.getStoredApiKey = exports.getAiSuggestion = exports.initWcagOverlay = exports.scanBrowserPage = exports.WcagDevOverlay = void 0;
 var WcagDevOverlay_1 = require("./WcagDevOverlay");
 Object.defineProperty(exports, "WcagDevOverlay", { enumerable: true, get: function () { return WcagDevOverlay_1.WcagDevOverlay; } });
 var browserScanner_1 = require("./browserScanner");
 Object.defineProperty(exports, "scanBrowserPage", { enumerable: true, get: function () { return browserScanner_1.scanBrowserPage; } });
 var init_1 = require("./init");
 Object.defineProperty(exports, "initWcagOverlay", { enumerable: true, get: function () { return init_1.initWcagOverlay; } });
+var gemini_1 = require("./gemini");
+Object.defineProperty(exports, "getAiSuggestion", { enumerable: true, get: function () { return gemini_1.getAiSuggestion; } });
+Object.defineProperty(exports, "getStoredApiKey", { enumerable: true, get: function () { return gemini_1.getStoredApiKey; } });
+Object.defineProperty(exports, "setStoredApiKey", { enumerable: true, get: function () { return gemini_1.setStoredApiKey; } });
+var presets_1 = require("../rules/presets");
+Object.defineProperty(exports, "FAST_RULES", { enumerable: true, get: function () { return presets_1.FAST_RULES; } });
+Object.defineProperty(exports, "FULL_RULES", { enumerable: true, get: function () { return presets_1.FULL_RULES; } });
+Object.defineProperty(exports, "RULE_PRESETS", { enumerable: true, get: function () { return presets_1.RULE_PRESETS; } });
+Object.defineProperty(exports, "resolveRuleNames", { enumerable: true, get: function () { return presets_1.resolveRuleNames; } });

package/dist/rules/backgroundImages.d.ts

@@ -0,0 +1,8 @@
+import { ScannerOptions, ScanResults } from '../types';
+/**
+ * Check CSS background images for potentially meaningful content that lacks text alternatives.
+ */
+declare const _default: {
+    check(document: Document, window: Window, _options: ScannerOptions): Promise<ScanResults>;
+};
+export default _default;

package/dist/rules/backgroundImages.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Check CSS background images for potentially meaningful content that lacks text alternatives.
+ */
+exports.default = {
+    async check(document, window, _options) {
+        const results = {
+            passes: [],
+            violations: [],
+            warnings: []
+        };
+        checkBackgroundImages(document, window, results);
+        return results;
+    }
+};
+function checkBackgroundImages(document, window, results) {
+    var _a, _b, _c, _d;
+    const root = (_a = document.body) !== null && _a !== void 0 ? _a : document.documentElement;
+    if (!root)
+        return;
+    const walker = document.createTreeWalker(root, 1);
+    let current = walker.currentNode;
+    while (current) {
+        const element = current;
+        if (!shouldInspectBackgroundImage(element)) {
+            current = walker.nextNode();
+            continue;
+        }
+        const style = window.getComputedStyle(element);
+        const backgroundImage = style.backgroundImage;
+        if (!backgroundImage || backgroundImage === 'none') {
+            current = walker.nextNode();
+            continue;
+        }
+        if (isElementHidden(element, window) || element.getAttribute('aria-hidden') === 'true') {
+            current = walker.nextNode();
+            continue;
+        }
+        const info = {
+            tagName: element.tagName.toLowerCase(),
+            id: element.id || null,
+            className: ((_b = element.className) === null || _b === void 0 ? void 0 : _b.toString()) || null,
+            textContent: ((_c = element.textContent) === null || _c === void 0 ? void 0 : _c.substring(0, 50)) || null
+        };
+        const hasTextContent = ((_d = element.textContent) === null || _d === void 0 ? void 0 : _d.trim()) !== '';
+        const hasAriaLabel = element.hasAttribute('aria-label');
+        const hasAriaLabelledby = element.hasAttribute('aria-labelledby');
+        const hasTitle = element.hasAttribute('title');
+        if (!hasTextContent && !hasAriaLabel && !hasAriaLabelledby && !hasTitle) {
+            if (backgroundImage.includes('url(') && !isBackgroundLikelyDecorative(element)) {
+                results.warnings.push({
+                    rule: 'background-image',
+                    element: info,
+                    impact: 'moderate',
+                    description: 'Element with background image may need text alternative',
+                    snippet: element.outerHTML.slice(0, 150) + (element.outerHTML.length > 150 ? '...' : ''),
+                    wcag: ['1.1.1'],
+                    help: 'If the background image conveys meaning, add text alternative via aria-label or text content'
+                });
+            }
+        }
+        current = walker.nextNode();
+    }
+}
+function isElementHidden(element, window) {
+    if (element.hasAttribute('hidden') || element.getAttribute('aria-hidden') === 'true') {
+        return true;
+    }
+    try {
+        const style = window.getComputedStyle(element);
+        return style.display === 'none' || style.visibility === 'hidden';
+    }
+    catch (_a) {
+        return false;
+    }
+}
+function shouldInspectBackgroundImage(element) {
+    var _a;
+    const tagName = element.tagName.toLowerCase();
+    if (['script', 'style', 'link', 'meta', 'head', 'title', 'base', 'noscript'].includes(tagName)) {
+        return false;
+    }
+    if (element.hasAttribute('hidden') || element.getAttribute('aria-hidden') === 'true') {
+        return false;
+    }
+    if (element.hasAttribute('style')) {
+        const inlineStyle = (element.getAttribute('style') || '').toLowerCase();
+        if (inlineStyle.includes('background'))
+            return true;
+    }
+    if (element.hasAttribute('title') || element.hasAttribute('aria-label') || element.hasAttribute('aria-labelledby')) {
+        return true;
+    }
+    if (element.childElementCount === 0 && ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim())) {
+        return true;
+    }
+    return ['div', 'section', 'article', 'header', 'footer', 'main', 'aside', 'nav', 'figure', 'a', 'button'].includes(tagName);
+}
+function isBackgroundLikelyDecorative(element) {
+    var _a, _b;
+    const decorativeElements = ['header', 'footer', 'section', 'article', 'div'];
+    const tagName = ((_a = element.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
+    if (decorativeElements.includes(tagName)) {
+        const className = ((_b = element.className) === null || _b === void 0 ? void 0 : _b.toString()) || '';
+        if (className.includes('background') ||
+            className.includes('banner') ||
+            className.includes('hero') ||
+            className.includes('container') ||
+            className.includes('wrapper') ||
+            className.includes('section')) {
+            return true;
+        }
+    }
+    return false;
+}

package/dist/rules/contrast.js

@@ -18,6 +18,8 @@ exports.default = {
             violations: [],
             warnings: []
         };
+        const backgroundColorCache = new WeakMap();
+        const parsedColorCache = new Map();
         // Minimum contrast requirements by WCAG level
         const contrastRequirements = {
             'A': {
@@ -39,13 +41,15 @@ exports.default = {
         const textElements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, span, div, a, button, label, li, td, th');
         for (const element of textElements) {
             // Skip empty or hidden elements
-            if (!((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || isElementHidden(element)) {
+            if (!((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim())) {
                 continue;
             }
-            // Get computed styles
             const style = window.getComputedStyle(element);
+            if (isElementHidden(element, style)) {
+                continue;
+            }
             const textColor = style.color;
-            const bgColor = getBackgroundColor(element, window);
+            const bgColor = getBackgroundColor(element, window, backgroundColorCache);
             // Skip if we couldn't determine colors
             if (!textColor || !bgColor) {
                 continue;
@@ -53,11 +57,11 @@ exports.default = {
             // Determine if text is large according to WCAG
             const fontSize = parseFloat(style.fontSize);
             const fontWeight = style.fontWeight;
-            const isLargeText = fontSize >= 24 || (fontSize >= 18.5 && parseInt(fontWeight) >= 700);
+            const isLargeText = fontSize >= 24 || (fontSize >= 18.5 && isBoldWeight(fontWeight));
             // Get required contrast ratio
             const requiredRatio = isLargeText ? requirements.largeText : requirements.normalText;
             // Calculate contrast ratio
-            const contrastRatio = calculateContrastRatio(textColor, bgColor);
+            const contrastRatio = calculateContrastRatio(textColor, bgColor, parsedColorCache);
             const info = {
                 tagName: element.tagName.toLowerCase(),
                 id: element.id || null,
@@ -95,34 +99,45 @@ exports.default = {
  * Check if an element is hidden
  * @param element Element to check
  */
-function isElementHidden(element) {
+function isElementHidden(element, style) {
     if (element.hasAttribute('hidden') || element.getAttribute('aria-hidden') === 'true') {
         return true;
     }
-    try {
-        const style = getComputedStyle(element);
-        return style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0';
-    }
-    catch (e) {
-        return false;
-    }
+    return style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0';
+}
+function isBoldWeight(fontWeight) {
+    const numeric = parseInt(fontWeight, 10);
+    if (!Number.isNaN(numeric))
+        return numeric >= 700;
+    return fontWeight === 'bold' || fontWeight === 'bolder';
 }
 /**
  * Get the effective background color of an element
  * @param element Element to check
  * @param window Browser window
  */
-function getBackgroundColor(element, window) {
+function getBackgroundColor(element, window, cache) {
+    const cached = cache.get(element);
+    if (cached)
+        return cached;
     let current = element;
     while (current !== null && current.nodeType === 1) {
+        const cachedCurrent = cache.get(current);
+        if (cachedCurrent) {
+            cache.set(element, cachedCurrent);
+            return cachedCurrent;
+        }
         const style = window.getComputedStyle(current);
         const backgroundColor = style.backgroundColor;
         if (backgroundColor && backgroundColor !== 'transparent' && backgroundColor !== 'rgba(0, 0, 0, 0)') {
+            cache.set(current, backgroundColor);
+            cache.set(element, backgroundColor);
             return backgroundColor;
         }
         current = current.parentElement;
     }
     // If we couldn't find a background color, default to white
+    cache.set(element, 'rgb(255, 255, 255)');
     return 'rgb(255, 255, 255)';
 }
 /**
@@ -130,9 +145,9 @@ function getBackgroundColor(element, window) {
  * @param foreground Foreground color
  * @param background Background color
  */
-function calculateContrastRatio(foreground, background) {
-    const fgRgb = parseColor(foreground);
-    const bgRgb = parseColor(background);
+function calculateContrastRatio(foreground, background, cache) {
+    const fgRgb = parseColor(foreground, cache);
+    const bgRgb = parseColor(background, cache);
     if (!fgRgb || !bgRgb) {
         return 0;
     }
@@ -146,42 +161,53 @@ function calculateContrastRatio(foreground, background) {
  * Parse color string to RGB values
  * @param color Color string
  */
-function parseColor(color) {
+function parseColor(color, cache) {
+    const cached = cache.get(color);
+    if (cached !== undefined)
+        return cached;
     // Handle 'rgb(r, g, b)' format
     let match = color.match(/rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/i);
     if (match) {
-        return {
+        const parsed = {
             r: parseInt(match[1]),
             g: parseInt(match[2]),
             b: parseInt(match[3])
         };
+        cache.set(color, parsed);
+        return parsed;
     }
     // Handle 'rgba(r, g, b, a)' format
     match = color.match(/rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([0-9.]+)\s*\)/i);
     if (match) {
-        return {
+        const parsed = {
             r: parseInt(match[1]),
             g: parseInt(match[2]),
             b: parseInt(match[3])
         };
+        cache.set(color, parsed);
+        return parsed;
     }
     // Handle hex format (#RRGGBB)
     match = color.match(/#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i);
     if (match) {
-        return {
+        const parsed = {
             r: parseInt(match[1], 16),
             g: parseInt(match[2], 16),
             b: parseInt(match[3], 16)
         };
+        cache.set(color, parsed);
+        return parsed;
     }
     // Handle shorthand hex format (#RGB)
     match = color.match(/#([0-9a-f])([0-9a-f])([0-9a-f])/i);
     if (match) {
-        return {
+        const parsed = {
             r: parseInt(match[1] + match[1], 16),
             g: parseInt(match[2] + match[2], 16),
             b: parseInt(match[3] + match[3], 16)
         };
+        cache.set(color, parsed);
+        return parsed;
     }
     // Handle common color names
     const colorNames = {
@@ -194,8 +220,11 @@ function parseColor(color) {
         gray: { r: 128, g: 128, b: 128 }
     };
     if (colorNames[color.toLowerCase()]) {
-        return colorNames[color.toLowerCase()];
+        const parsed = colorNames[color.toLowerCase()];
+        cache.set(color, parsed);
+        return parsed;
     }
+    cache.set(color, null);
     return null;
 }
 /**