@mp3wizard/figma-console-mcp 1.22.1 → 1.22.4

package/figma-desktop-bridge/code.js

@@ -3289,6 +3289,7 @@ figma.ui.onmessage = async (msg) => {
         'wcag-non-text-contrast', 'wcag-color-only', 'wcag-focus-indicator',
         'wcag-letter-spacing', 'wcag-paragraph-spacing', 'wcag-image-alt',
         'wcag-heading-hierarchy', 'wcag-reflow', 'wcag-reading-order',
+        'wcag-disabled-no-context', 'token-misuse',
         'hardcoded-color', 'no-text-style', 'default-name', 'detached-component',
         'no-autolayout', 'empty-container'
       ];
@@ -3299,9 +3300,10 @@ figma.ui.onmessage = async (msg) => {
           'wcag-contrast', 'wcag-text-size', 'wcag-target-size', 'wcag-line-height',
           'wcag-non-text-contrast', 'wcag-color-only', 'wcag-focus-indicator',
           'wcag-letter-spacing', 'wcag-paragraph-spacing', 'wcag-image-alt',
-          'wcag-heading-hierarchy', 'wcag-reflow', 'wcag-reading-order'
+          'wcag-heading-hierarchy', 'wcag-reflow', 'wcag-reading-order',
+          'wcag-disabled-no-context'
         ],
-        'design-system': ['hardcoded-color', 'no-text-style', 'default-name', 'detached-component'],
+        'design-system': ['hardcoded-color', 'no-text-style', 'default-name', 'detached-component', 'token-misuse'],
         'layout': ['no-autolayout', 'empty-container']
       };
 
@@ -3310,15 +3312,17 @@ figma.ui.onmessage = async (msg) => {
         'wcag-target-size': 'critical',
         'wcag-non-text-contrast': 'critical',
         'wcag-color-only': 'critical',
+        'wcag-focus-indicator': 'critical',
         'wcag-text-size': 'warning',
-        'wcag-line-height': 'warning',
-        'wcag-focus-indicator': 'warning',
         'wcag-letter-spacing': 'warning',
-        'wcag-paragraph-spacing': 'warning',
         'wcag-image-alt': 'warning',
         'wcag-heading-hierarchy': 'warning',
         'wcag-reflow': 'warning',
         'wcag-reading-order': 'warning',
+        'wcag-disabled-no-context': 'warning',
+        'wcag-line-height': 'info',
+        'wcag-paragraph-spacing': 'info',
+        'token-misuse': 'warning',
         'hardcoded-color': 'warning',
         'no-text-style': 'warning',
         'default-name': 'warning',
@@ -3327,20 +3331,47 @@ figma.ui.onmessage = async (msg) => {
         'empty-container': 'info'
       };
 
+      // WCAG conformance level per rule — lets teams filter by target level (AA vs AAA)
+      var wcagLevelMap = {
+        'wcag-contrast': 'aa',           // 1.4.3 Contrast (Minimum) — Level AA
+        'wcag-target-size': 'aa',        // 2.5.8 Target Size (Minimum) — Level AA
+        'wcag-non-text-contrast': 'aa',  // 1.4.11 Non-text Contrast — Level AA
+        'wcag-color-only': 'a',          // 1.4.1 Use of Color — Level A
+        'wcag-focus-indicator': 'aa',    // 2.4.7 Focus Visible — Level AA
+        'wcag-text-size': 'best-practice', // Not actually 1.4.4; 12px minimum is a readability best practice
+        'wcag-line-height': 'best-practice', // 1.4.12 is about supporting user overrides, not requiring specific values
+        'wcag-letter-spacing': 'best-practice', // Negative spacing actively harms readability
+        'wcag-paragraph-spacing': 'best-practice', // 1.4.12 is about supporting user overrides
+        'wcag-image-alt': 'a',           // 1.1.1 Non-text Content — Level A
+        'wcag-heading-hierarchy': 'a',   // 1.3.1 Info and Relationships — Level A
+        'wcag-reflow': 'aa',            // 1.4.10 Reflow — Level AA
+        'wcag-reading-order': 'a',       // 1.3.2 Meaningful Sequence — Level A
+        'wcag-disabled-no-context': 'aa', // 4.1.2 Name, Role, Value — disabled elements need ARIA context
+        'token-misuse': 'design-system',
+        'hardcoded-color': 'design-system',
+        'no-text-style': 'design-system',
+        'default-name': 'design-system',
+        'detached-component': 'design-system',
+        'no-autolayout': 'design-system',
+        'empty-container': 'design-system'
+      };
+
       var ruleDescriptions = {
-        'wcag-contrast': 'Text does not meet WCAG AA contrast ratio (4.5:1 normal, 3:1 large)',
-        'wcag-text-size': 'Text size is below 12px minimum',
-        'wcag-target-size': 'Interactive element is smaller than 24x24px minimum target size',
-        'wcag-line-height': 'Line height is less than 1.5x the font size',
-        'wcag-non-text-contrast': 'UI component or graphical object does not meet 3:1 contrast ratio against adjacent color (WCAG 1.4.11)',
-        'wcag-color-only': 'Component variants appear to differ only by color without additional visual indicator (WCAG 1.4.1)',
-        'wcag-focus-indicator': 'Interactive component is missing a focus/focused variant or focus indicator is insufficient (WCAG 2.4.7)',
-        'wcag-letter-spacing': 'Negative letter spacing harms readability (WCAG 1.4.12)',
-        'wcag-paragraph-spacing': 'Paragraph spacing is less than 2x the font size (WCAG 1.4.12)',
-        'wcag-image-alt': 'Image or image fill has no description annotation for alternative text (WCAG 1.1.1)',
-        'wcag-heading-hierarchy': 'Heading levels skip a level (e.g., H1 followed by H3) breaking document structure (WCAG 1.3.1)',
-        'wcag-reflow': 'Frame uses fixed positioning without auto-layout, may not reflow for different viewport sizes (WCAG 1.4.10)',
-        'wcag-reading-order': 'Visual position of elements does not match layer order, which may confuse screen readers (WCAG 1.3.2)',
+        'wcag-contrast': 'Text does not meet WCAG AA contrast ratio (4.5:1 normal, 3:1 large text ≥24px or ≥18.5px bold). Best practice: always target 4.5:1, especially in dark mode.',
+        'wcag-text-size': 'Text size is below 12px — readability best practice. Note: WCAG 1.4.4 requires supporting 200% text-only zoom (use rem/em units), not a specific minimum size.',
+        'wcag-target-size': 'Interactive element is smaller than 24x24px minimum target size (WCAG 2.5.8)',
+        'wcag-line-height': 'Line height is below 1.5x font size — best practice for readability. Note: WCAG 1.4.12 requires that content does not break when users override spacing to 1.5x, not that designs must use 1.5x by default.',
+        'wcag-non-text-contrast': 'UI component or graphical object does not meet 3:1 contrast ratio against adjacent color. Also applies to borders and chart elements against adjacent elements (WCAG 1.4.11)',
+        'wcag-color-only': 'Information is conveyed only through color change (e.g., error state uses red border without an error message or icon). Color can supplement but must not be the sole indicator (WCAG 1.4.1)',
+        'wcag-focus-indicator': 'Interactive component is missing a focus/focused variant or the focus indicator is insufficient. A visible focus state is critical — without it, keyboard users cannot navigate the interface (WCAG 2.4.7)',
+        'wcag-letter-spacing': 'Negative letter spacing actively harms readability. WCAG 1.4.12 requires content to support user-overridden spacing without breaking.',
+        'wcag-paragraph-spacing': 'Paragraph spacing is below 2x font size — best practice. WCAG 1.4.12 requires content to support user-overridden spacing to 2x without loss of content, not that designs must use 2x by default.',
+        'wcag-image-alt': 'Image or image fill has no description annotation for alternative text. All images need alt text; decorative images should be explicitly marked as decorative. Graphs and charts also need long descriptions (e.g., a data table) (WCAG 1.1.1)',
+        'wcag-heading-hierarchy': 'Heading levels skip a level (e.g., H1 followed by H3). Use H1 through H6 sequentially without skipping levels (WCAG 1.3.1)',
+        'wcag-reflow': 'Frame uses fixed positioning without auto-layout. Content must support 400% zoom on 1280px viewport (equivalent to 320px minimum width) without horizontal scrolling or loss of content (WCAG 1.4.10)',
+        'wcag-reading-order': 'Visual position of elements does not match layer order. Keyboard navigation and screen reader order must follow a logical sequence (WCAG 1.3.2)',
+        'wcag-disabled-no-context': 'Disabled variant has no tooltip, helper text, or annotation explaining why the element is disabled. Use aria-disabled (not HTML disabled) to keep the element focusable for screen readers, and add a tooltip so all users understand the disabled reason.',
+        'token-misuse': 'Variable name prefix does not match its usage context (e.g., a bg/* token used as a text fill, or a text/* token used as a background). This may cause contrast issues and indicates a misbound token.',
         'hardcoded-color': 'Fill color is not bound to a variable or style',
         'no-text-style': 'Text node is not using a text style',
         'default-name': 'Node has a default Figma name (e.g., "Frame 1")',
@@ -3995,8 +4026,131 @@ figma.ui.onmessage = async (msg) => {
           } catch (e) { /* slot sublayer */ }
         }
 
+        // wcag-disabled-no-context: Disabled variant without tooltip/helper text (Isabella's pattern)
+        if (activeRuleSet['wcag-disabled-no-context'] && nodeType === 'COMPONENT_SET' && !truncated) {
+          try {
+            var csChildren = node.children;
+            if (csChildren) {
+              for (var dci = 0; dci < csChildren.length && !truncated; dci++) {
+                var dcVariant = csChildren[dci];
+                try {
+                  var dcName = dcVariant.name || '';
+                  if (/(disabled|inactive)/i.test(dcName)) {
+                    // Check if disabled variant has tooltip, helper text, or descriptive child
+                    var hasContextChild = false;
+                    try {
+                      if (dcVariant.children) {
+                        for (var dcci = 0; dcci < dcVariant.children.length; dcci++) {
+                          var dcChild = dcVariant.children[dcci];
+                          try {
+                            var dcChildName = (dcChild.name || '').toLowerCase();
+                            // Look for tooltip, helper text, hint, description, or error message children
+                            if (/tooltip|helper|hint|description|message|caption|note|info|why|reason/i.test(dcChildName)) {
+                              hasContextChild = true;
+                              break;
+                            }
+                            // Recurse one level for nested tooltip/helper
+                            if (dcChild.children) {
+                              for (var dcgci = 0; dcgci < dcChild.children.length; dcgci++) {
+                                var dcGrandchild = dcChild.children[dcgci];
+                                try {
+                                  if (/tooltip|helper|hint|description|message/i.test(dcGrandchild.name || '')) {
+                                    hasContextChild = true;
+                                    break;
+                                  }
+                                } catch (e) { /* skip */ }
+                              }
+                              if (hasContextChild) break;
+                            }
+                          } catch (e) { /* skip */ }
+                        }
+                      }
+                    } catch (e) { /* skip */ }
+                    // Also check component description for disabled guidance
+                    var hasDisabledAnnotation = false;
+                    try {
+                      var csDesc = (node.description || '').toLowerCase();
+                      if (/disabled.*tooltip|disabled.*helper|disabled.*hint|aria-disabled|why.*disabled|disabled.*reason/i.test(csDesc)) {
+                        hasDisabledAnnotation = true;
+                      }
+                    } catch (e) { /* skip */ }
+                    if (!hasContextChild && !hasDisabledAnnotation) {
+                      if (totalFindings < maxFindings) {
+                        findings['wcag-disabled-no-context'].push({
+                          id: dcVariant.id,
+                          name: nodeName + ' / ' + dcVariant.name,
+                          suggestion: 'Disabled elements should remain focusable (use aria-disabled, not HTML disabled). Add a tooltip or helper text explaining why the element is disabled so screen reader users understand the context.'
+                        });
+                        totalFindings++;
+                      } else { truncated = true; }
+                    }
+                  }
+                } catch (e) { /* skip variant */ }
+              }
+            }
+          } catch (e) { /* slot sublayer */ }
+        }
+
         // ---- Design System checks ----
 
+        // token-misuse: Variable name prefix doesn't match usage context
+        if (activeRuleSet['token-misuse'] && !isPage && !isSection && !truncated) {
+          try {
+            var tmFills = node.fills;
+            if (tmFills && tmFills.length > 0) {
+              for (var tmi = 0; tmi < tmFills.length; tmi++) {
+                var tmFill = tmFills[tmi];
+                if (tmFill.type === 'SOLID' && tmFill.visible !== false) {
+                  try {
+                    if (tmFill.boundVariables && tmFill.boundVariables.color) {
+                      var tmVarId = tmFill.boundVariables.color.id;
+                      // Resolve variable name
+                      try {
+                        var tmVar = figma.variables.getVariableById(tmVarId);
+                        if (tmVar) {
+                          var tmVarName = tmVar.name.toLowerCase();
+                          var isBgToken = /^(bg|background|surface|fill)[\/-]/.test(tmVarName);
+                          var isTextNode = nodeType === 'TEXT';
+                          // Flag: bg/surface token used as text fill
+                          if (isTextNode && isBgToken) {
+                            if (totalFindings < maxFindings) {
+                              findings['token-misuse'].push({
+                                id: nodeId,
+                                name: nodeName,
+                                variable: tmVar.name,
+                                usage: 'text fill',
+                                expectedPrefix: 'text/*, fg/*, foreground/*',
+                                suggestion: 'This text node uses a background/surface token ("' + tmVar.name + '") as its fill color. This is likely a misbound token — use a text/foreground token instead.'
+                              });
+                              totalFindings++;
+                            } else { truncated = true; }
+                          }
+                          // Flag: text/foreground token used as frame/shape background
+                          var isTextToken = /^(text|fg|foreground|font)[\/-]/.test(tmVarName);
+                          var isContainerNode = nodeType === 'FRAME' || nodeType === 'COMPONENT' || nodeType === 'INSTANCE' || nodeType === 'RECTANGLE';
+                          if (isContainerNode && isTextToken && !truncated) {
+                            if (totalFindings < maxFindings) {
+                              findings['token-misuse'].push({
+                                id: nodeId,
+                                name: nodeName,
+                                variable: tmVar.name,
+                                usage: 'background fill',
+                                expectedPrefix: 'bg/*, background/*, surface/*',
+                                suggestion: 'This container uses a text/foreground token ("' + tmVar.name + '") as its background fill. This is likely a misbound token — use a background/surface token instead.'
+                              });
+                              totalFindings++;
+                            } else { truncated = true; }
+                          }
+                        }
+                      } catch (e) { /* can't resolve variable */ }
+                    }
+                  } catch (e) { /* no bound vars */ }
+                }
+              }
+            }
+          } catch (e) { /* slot sublayer */ }
+        }
+
         // hardcoded-color: Solid fills without variable binding or style
         if (activeRuleSet['hardcoded-color'] && !isPage && !isSection && !truncated) {
           try {
@@ -4190,6 +4344,7 @@ figma.ui.onmessage = async (msg) => {
         categories.push({
           rule: ruleId,
           severity: sev,
+          wcagLevel: wcagLevelMap[ruleId] || null,
           count: findings[ruleId].length,
           description: ruleDescriptions[ruleId],
           nodes: findings[ruleId]
@@ -4430,7 +4585,47 @@ figma.ui.onmessage = async (msg) => {
       var variants = isComponentSet ? componentSet.children : [componentSet];
       var variantCount = variants.length;
 
-      // 1. State coverage analysis
+      // ---- Classify component as interactive vs presentational ----
+      var interactiveNames = /^(button|link|input|checkbox|radio|switch|toggle|tab|select|slider|dropdown|menu-item|search|combobox|listbox)/i;
+      var presentationalNames = /^(alert|badge|card|avatar|divider|skeleton|tooltip|tag|chip|banner|callout|notification|toast|icon|image|separator|progress|spinner|loader|breadcrumb|label|heading|paragraph|caption|stat|meter|indicator)/i;
+
+      // Parse variant axes from variant names (e.g., "type=success, style=fill" → {type: [...], style: [...]})
+      var variantAxes = {};
+      var hasStateAxis = false;
+      for (var vai = 0; vai < variants.length; vai++) {
+        var vParts = variants[vai].name.split(',');
+        for (var vpi = 0; vpi < vParts.length; vpi++) {
+          var kv = vParts[vpi].trim().split('=');
+          if (kv.length === 2) {
+            var axisName = kv[0].trim().toLowerCase();
+            var axisValue = kv[1].trim().toLowerCase();
+            if (!variantAxes[axisName]) variantAxes[axisName] = [];
+            if (variantAxes[axisName].indexOf(axisValue) === -1) {
+              variantAxes[axisName].push(axisValue);
+            }
+            // Check if this axis contains interaction state values
+            if (axisName === 'state' && /(hover|focus|pressed|disabled|active)/i.test(axisValue)) {
+              hasStateAxis = true;
+            }
+          }
+        }
+      }
+
+      var componentName = componentSet.name || '';
+      var isInteractive = interactiveNames.test(componentName) || hasStateAxis;
+      var isPresentational = !isInteractive && (presentationalNames.test(componentName) || !hasStateAxis);
+      // If ambiguous, check if any variant mentions interaction states
+      if (!isInteractive && !isPresentational) {
+        for (var ami = 0; ami < variants.length; ami++) {
+          if (/(hover|focus|pressed|disabled)/i.test(variants[ami].name)) {
+            isInteractive = true;
+            break;
+          }
+        }
+        if (!isInteractive) isPresentational = true;
+      }
+
+      // 1. Coverage analysis — adapts to component classification
       var stateKeywords = {
         'default': /(default|rest|idle|normal|base)/i,
         'hover': /(hover|hovered)/i,
@@ -4440,35 +4635,69 @@ figma.ui.onmessage = async (msg) => {
         'active': /(active|pressed|selected)/i,
         'loading': /(loading|spinner)/i
       };
+
+      var coveredCount = 0;
+      var totalStates = 0;
+      var missingStates = [];
       var statesCovered = {};
       var statesFound = {};
-      for (var sk in stateKeywords) {
-        statesCovered[sk] = false;
-        statesFound[sk] = null;
-      }
-      for (var vi = 0; vi < variants.length; vi++) {
-        var vName = variants[vi].name;
-        for (var sk2 in stateKeywords) {
-          if (stateKeywords[sk2].test(vName)) {
-            statesCovered[sk2] = true;
-            if (!statesFound[sk2]) statesFound[sk2] = vName;
+      var coverageLabel = '';
+      var variantAxisCoverage = null;
+
+      if (isInteractive) {
+        // Interactive components: check for interaction states
+        coverageLabel = 'interactive-states';
+        for (var sk in stateKeywords) {
+          statesCovered[sk] = false;
+          statesFound[sk] = null;
+        }
+        for (var vi = 0; vi < variants.length; vi++) {
+          var vName = variants[vi].name;
+          for (var sk2 in stateKeywords) {
+            if (stateKeywords[sk2].test(vName)) {
+              statesCovered[sk2] = true;
+              if (!statesFound[sk2]) statesFound[sk2] = vName;
+            }
           }
         }
-      }
-      // If only one variant and no state keywords match, assume it's default
-      if (variantCount === 1 && !statesCovered['default']) {
-        statesCovered['default'] = true;
-        statesFound['default'] = variants[0].name;
-      }
-      var coveredCount = 0;
-      var totalStates = 0;
-      var missingStates = [];
-      for (var sk3 in statesCovered) {
-        totalStates++;
-        if (statesCovered[sk3]) {
-          coveredCount++;
-        } else {
-          missingStates.push(sk3);
+        if (variantCount === 1 && !statesCovered['default']) {
+          statesCovered['default'] = true;
+          statesFound['default'] = variants[0].name;
+        }
+        for (var sk3 in statesCovered) {
+          totalStates++;
+          if (statesCovered[sk3]) {
+            coveredCount++;
+          } else {
+            missingStates.push(sk3);
+          }
+        }
+      } else {
+        // Presentational components: check variant axis completeness
+        coverageLabel = 'variant-axes';
+        // Calculate expected combinations vs actual
+        var axisNames = [];
+        var axisCounts = [];
+        var expectedCombinations = 1;
+        for (var axName in variantAxes) {
+          axisNames.push(axName);
+          axisCounts.push(variantAxes[axName].length);
+          expectedCombinations *= variantAxes[axName].length;
+        }
+        // Score: actual variants / expected combinations (capped at 100%)
+        var axisCoverageRatio = expectedCombinations > 0 ? Math.min(1, variantCount / expectedCombinations) : 1;
+        coveredCount = variantCount;
+        totalStates = expectedCombinations;
+        variantAxisCoverage = {
+          axes: variantAxes,
+          axisCount: axisNames.length,
+          expectedCombinations: expectedCombinations,
+          actualVariants: variantCount,
+          completeness: Math.round(axisCoverageRatio * 100) + '%'
+        };
+        // For presentational, no "missing states" — instead note if combinations are incomplete
+        if (variantCount < expectedCombinations) {
+          missingStates.push(variantCount + '/' + expectedCombinations + ' axis combinations present');
         }
       }
 
@@ -4552,6 +4781,9 @@ figma.ui.onmessage = async (msg) => {
       }
 
       // 4. Target size analysis
+      // WCAG 2.5.8 applies to interactive targets — presentational components
+      // (badges, avatars, progress bars) are not tap targets by definition.
+      // Skip target size checking for presentational components to avoid false positives.
       var targetSizeAnalysis = { minWidth: Infinity, minHeight: Infinity, variants: [], issues: [] };
       var minTarget = msg.targetSize || 24; // Default WCAG 2.5.8 minimum
       for (var tvi = 0; tvi < variants.length; tvi++) {
@@ -4562,7 +4794,8 @@ figma.ui.onmessage = async (msg) => {
             targetSizeAnalysis.variants.push({ name: variants[tvi].name, width: tw, height: th });
             if (tw < targetSizeAnalysis.minWidth) targetSizeAnalysis.minWidth = tw;
             if (th < targetSizeAnalysis.minHeight) targetSizeAnalysis.minHeight = th;
-            if (tw < minTarget || th < minTarget) {
+            // Only flag target size issues for interactive components
+            if (isInteractive && (tw < minTarget || th < minTarget)) {
               targetSizeAnalysis.issues.push({
                 variant: variants[tvi].name,
                 width: tw,
@@ -4658,14 +4891,15 @@ figma.ui.onmessage = async (msg) => {
 
       // ---- Compute overall score ----
       var scores = {};
-      // State coverage: percentage of states found
-      scores.stateCoverage = Math.round((coveredCount / totalStates) * 100);
+      // Coverage: percentage of states (interactive) or axis combinations (presentational)
+      scores.variantCoverage = totalStates > 0 ? Math.round((coveredCount / totalStates) * 100) : 100;
       // Focus indicator: 0 (missing), 50 (exists but no indicator), 100 (good indicator)
-      scores.focusIndicator = !focusAnalysis.hasVariant ? 0 : (!focusAnalysis.hasVisibleIndicator ? 50 : 100);
+      // For presentational: N/A → score 100 (don't penalize)
+      scores.focusIndicator = isPresentational ? 100 : (!focusAnalysis.hasVariant ? 0 : (!focusAnalysis.hasVisibleIndicator ? 50 : 100));
       // Color differentiation: 100 if no issues, decremented per issue
       scores.colorDifferentiation = colorDifferentiation.checked === 0 ? 100 : Math.max(0, Math.round(((colorDifferentiation.checked - colorDifferentiation.issues.length) / colorDifferentiation.checked) * 100));
-      // Target size: 100 if all pass, 0 if any fail
-      scores.targetSize = targetSizeAnalysis.issues.length === 0 ? 100 : Math.max(0, Math.round(((targetSizeAnalysis.variants.length - targetSizeAnalysis.issues.length) / Math.max(1, targetSizeAnalysis.variants.length)) * 100));
+      // Target size: N/A for presentational (not tap targets), scored for interactive
+      scores.targetSize = isPresentational ? 100 : (targetSizeAnalysis.issues.length === 0 ? 100 : Math.max(0, Math.round(((targetSizeAnalysis.variants.length - targetSizeAnalysis.issues.length) / Math.max(1, targetSizeAnalysis.variants.length)) * 100)));
       // Annotations: 0 (nothing), 50 (description only), 100 (has a11y notes)
       scores.annotations = annotations.hasA11yNotes ? 100 : (annotations.hasDescription ? 50 : 0);
       // Color blind: percentage of simulations with no issues
@@ -4675,48 +4909,76 @@ figma.ui.onmessage = async (msg) => {
       }
       scores.colorBlindSafety = colorBlindAnalysis.simulations.length > 0 ? Math.round((cbPassCount / colorBlindAnalysis.simulations.length) * 100) : 100;
 
-      // Overall weighted score
-      var overall = Math.round(
-        scores.stateCoverage * 0.20 +
-        scores.focusIndicator * 0.20 +
-        scores.colorDifferentiation * 0.15 +
-        scores.targetSize * 0.15 +
-        scores.annotations * 0.10 +
-        scores.colorBlindSafety * 0.20
-      );
+      // Overall weighted score — weights differ by component classification
+      var overall;
+      if (isInteractive) {
+        // Interactive: focus and states matter most
+        overall = Math.round(
+          scores.variantCoverage * 0.20 +
+          scores.focusIndicator * 0.20 +
+          scores.colorDifferentiation * 0.15 +
+          scores.targetSize * 0.15 +
+          scores.annotations * 0.10 +
+          scores.colorBlindSafety * 0.20
+        );
+      } else {
+        // Presentational: variant completeness and color safety matter most, focus is N/A
+        overall = Math.round(
+          scores.variantCoverage * 0.25 +
+          scores.colorDifferentiation * 0.25 +
+          scores.annotations * 0.15 +
+          scores.colorBlindSafety * 0.25 +
+          scores.targetSize * 0.10
+        );
+      }
 
       // ---- Build response ----
+      var coverageSection;
+      if (isInteractive) {
+        coverageSection = {
+          mode: 'interactive-states',
+          found: statesFound,
+          missing: missingStates,
+          coverage: coveredCount + '/' + totalStates
+        };
+      } else {
+        coverageSection = {
+          mode: 'variant-axes',
+          axes: variantAxisCoverage,
+          coverage: coveredCount + '/' + totalStates
+        };
+      }
+
       var auditResult = {
         component: {
           id: componentSet.id,
           name: componentSet.name,
           type: componentSet.type,
-          variantCount: variantCount
+          variantCount: variantCount,
+          classification: isInteractive ? 'interactive' : 'presentational'
         },
         overallScore: overall,
         scores: scores,
-        stateCoverage: {
-          found: statesFound,
-          missing: missingStates,
-          coverage: coveredCount + '/' + totalStates
-        },
-        focusIndicator: focusAnalysis,
+        variantCoverage: coverageSection,
+        focusIndicator: isInteractive ? focusAnalysis : { notApplicable: true, details: 'Focus indicators are not expected for presentational components' },
         colorDifferentiation: colorDifferentiation,
-        targetSize: {
+        targetSize: isInteractive ? {
           minimum: minTarget + 'x' + minTarget,
           smallest: targetSizeAnalysis.minWidth + 'x' + targetSizeAnalysis.minHeight,
           issues: targetSizeAnalysis.issues
-        },
+        } : { notApplicable: true, details: 'Target size checks apply to interactive components (WCAG 2.5.8 is about tap targets)', smallest: targetSizeAnalysis.minWidth + 'x' + targetSizeAnalysis.minHeight },
         annotations: annotations,
         colorBlindSimulation: colorBlindAnalysis,
         recommendations: []
       };
 
-      // Generate recommendations
-      if (!focusAnalysis.hasVariant) {
-        auditResult.recommendations.push({ priority: 'high', area: 'focus', message: 'Add a focus/focused variant with a visible focus ring (WCAG 2.4.7)' });
-      } else if (!focusAnalysis.hasVisibleIndicator) {
-        auditResult.recommendations.push({ priority: 'medium', area: 'focus', message: 'Focus variant exists but lacks visible indicator — add a border or shadow' });
+      // Generate recommendations — classification-aware
+      if (isInteractive) {
+        if (!focusAnalysis.hasVariant) {
+          auditResult.recommendations.push({ priority: 'high', area: 'focus', message: 'Add a focus/focused variant with a visible focus ring (WCAG 2.4.7)' });
+        } else if (!focusAnalysis.hasVisibleIndicator) {
+          auditResult.recommendations.push({ priority: 'medium', area: 'focus', message: 'Focus variant exists but lacks visible indicator — add a border or shadow' });
+        }
       }
       if (colorDifferentiation.issues.length > 0) {
         auditResult.recommendations.push({ priority: 'high', area: 'color', message: 'Add non-color indicators (icons, borders, text) to ' + colorDifferentiation.issues.length + ' state variant(s) (WCAG 1.4.1)' });
@@ -4728,16 +4990,23 @@ figma.ui.onmessage = async (msg) => {
         auditResult.recommendations.push({ priority: 'medium', area: 'documentation', message: 'Add a component description with usage guidelines' });
       }
       if (!annotations.hasA11yNotes) {
-        auditResult.recommendations.push({ priority: 'medium', area: 'documentation', message: 'Add accessibility notes (ARIA role, keyboard interactions, screen reader behavior)' });
+        var a11yHint = isInteractive
+          ? 'Add accessibility notes (ARIA role, keyboard interactions, screen reader behavior)'
+          : 'Add accessibility notes (ARIA role, live region behavior, semantic usage)';
+        auditResult.recommendations.push({ priority: 'medium', area: 'documentation', message: a11yHint });
       }
       if (colorBlindAnalysis.issues.length > 0) {
         auditResult.recommendations.push({ priority: 'medium', area: 'color-blind', message: colorBlindAnalysis.issues.join('; ') });
       }
-      for (var msi = 0; msi < missingStates.length; msi++) {
-        var ms = missingStates[msi];
-        if (ms === 'focus' || ms === 'disabled') {
-          auditResult.recommendations.push({ priority: 'medium', area: 'states', message: 'Consider adding a "' + ms + '" variant for complete interactive state coverage' });
+      if (isInteractive) {
+        for (var msi = 0; msi < missingStates.length; msi++) {
+          var ms = missingStates[msi];
+          if (ms === 'focus' || ms === 'disabled') {
+            auditResult.recommendations.push({ priority: 'medium', area: 'states', message: 'Consider adding a "' + ms + '" variant for complete interactive state coverage' });
+          }
         }
+      } else if (variantAxisCoverage && variantCount < variantAxisCoverage.expectedCombinations) {
+        auditResult.recommendations.push({ priority: 'low', area: 'coverage', message: variantCount + ' of ' + variantAxisCoverage.expectedCombinations + ' axis combinations present — consider adding missing variants for completeness' });
       }
 
       console.log('🌉 [Desktop Bridge] Component audit complete: score ' + overall + '/100 for "' + componentSet.name + '"');