@safe-ugc-ui/validator 0.5.1 → 0.6.0

package/dist/index.d.ts

@@ -101,6 +101,7 @@ interface TraversableNode {
     type: string;
     children?: TraversableNode[] | ForLoopLike;
     style?: Record<string, unknown>;
+    responsive?: Record<string, unknown>;
     [key: string]: unknown;
 }
 interface ForLoopLike {
@@ -113,17 +114,18 @@ interface ForLoopLike {
  * Return `false` to skip traversing into this node's children.
  */
 type NodeVisitor = (node: TraversableNode, context: TraversalContext) => void | false;
+type StyleResolver = (node: TraversableNode) => Record<string, unknown> | undefined;
 /**
  * Recursively traverse a single node and its descendants.
  */
-declare function traverseNode(node: TraversableNode, context: TraversalContext, visitor: NodeVisitor): void;
+declare function traverseNode(node: TraversableNode, context: TraversalContext, visitor: NodeVisitor, styleResolver?: StyleResolver): void;
 /**
  * Traverse all nodes in every view of a card.
  *
  * @param views - The `views` object from a UGCCard (mapping view names to root nodes).
  * @param visitor - Called for every node in every view.
  */
-declare function traverseCard(views: Record<string, unknown>, visitor: NodeVisitor): void;
+declare function traverseCard(views: Record<string, unknown>, visitor: NodeVisitor, styleResolver?: StyleResolver): void;
 
 /**
  * @safe-ugc-ui/validator — Schema (Structural) Validation
@@ -360,4 +362,4 @@ declare function validate(input: unknown): ValidationResult;
  */
 declare function validateRaw(rawJson: string): ValidationResult;
 
-export { type NodeVisitor, type TraversableNode, type TraversalContext, type ValidationError, type ValidationErrorCode, type ValidationResult, createError, invalidResult, merge, parseCard, toResult, traverseCard, traverseNode, validResult, validate, validateLimits, validateNodes, validateRaw, validateSchema, validateSecurity, validateStyles, validateValueTypes };
+export { type NodeVisitor, type StyleResolver, type TraversableNode, type TraversalContext, type ValidationError, type ValidationErrorCode, type ValidationResult, createError, invalidResult, merge, parseCard, toResult, traverseCard, traverseNode, validResult, validate, validateLimits, validateNodes, validateRaw, validateSchema, validateSecurity, validateStyles, validateValueTypes };

package/dist/index.js

@@ -110,7 +110,7 @@ function isForLoop(children) {
 function hasOverflowAuto(style) {
   return style?.overflow === "auto";
 }
-function traverseNode(node, context, visitor) {
+function traverseNode(node, context, visitor, styleResolver) {
   const result = visitor(node, context);
   if (result === false) {
     return;
@@ -120,7 +120,7 @@ function traverseNode(node, context, visitor) {
     return;
   }
   const nextStackDepth = node.type === "Stack" ? context.stackDepth + 1 : context.stackDepth;
-  const nextOverflowAuto = context.overflowAutoAncestor || hasOverflowAuto(node.style);
+  const nextOverflowAuto = context.overflowAutoAncestor || hasOverflowAuto(styleResolver ? styleResolver(node) : node.style);
   if (isForLoop(children)) {
     const childCtx = {
       path: `${context.path}.children.template`,
@@ -130,7 +130,7 @@ function traverseNode(node, context, visitor) {
       overflowAutoAncestor: nextOverflowAuto,
       stackDepth: nextStackDepth
     };
-    traverseNode(children.template, childCtx, visitor);
+    traverseNode(children.template, childCtx, visitor, styleResolver);
   } else if (Array.isArray(children)) {
     for (let i = 0; i < children.length; i++) {
       const child = children[i];
@@ -143,12 +143,12 @@ function traverseNode(node, context, visitor) {
           overflowAutoAncestor: nextOverflowAuto,
           stackDepth: nextStackDepth
         };
-        traverseNode(child, childCtx, visitor);
+        traverseNode(child, childCtx, visitor, styleResolver);
       }
     }
   }
 }
-function traverseCard(views, visitor) {
+function traverseCard(views, visitor, styleResolver) {
   for (const [viewName, rootNode] of Object.entries(views)) {
     if (rootNode == null || typeof rootNode !== "object" || !("type" in rootNode)) {
       continue;
@@ -161,7 +161,7 @@ function traverseCard(views, visitor) {
       overflowAutoAncestor: false,
       stackDepth: 0
     };
-    traverseNode(rootNode, context, visitor);
+    traverseNode(rootNode, context, visitor, styleResolver);
   }
 }
 
@@ -287,8 +287,7 @@ var STRUCTURED_OBJECT_STYLE_PROPERTIES = /* @__PURE__ */ new Set([
   "boxShadow",
   "textShadow"
 ]);
-function validateNodeStyle(node, ctx, errors) {
-  const style = node.style;
+function validateNodeStyle(style, path, errors) {
   if (!style) {
     return;
   }
@@ -302,7 +301,7 @@ function validateNodeStyle(node, ctx, errors) {
           createError(
             "DYNAMIC_NOT_ALLOWED",
             `Style property "${prop}" must be a static literal; $ref is not allowed.`,
-            `${ctx.path}.style.${prop}`
+            `${path}.${prop}`
           )
         );
       }
@@ -311,7 +310,7 @@ function validateNodeStyle(node, ctx, errors) {
           createError(
             "DYNAMIC_NOT_ALLOWED",
             `Style property "${prop}" must be an object literal; use $ref only inside its nested fields.`,
-            `${ctx.path}.style.${prop}`
+            `${path}.${prop}`
           )
         );
       }
@@ -321,7 +320,18 @@ function validateNodeStyle(node, ctx, errors) {
 function validateValueTypes(views) {
   const errors = [];
   traverseCard(views, (node, ctx) => {
-    validateNodeStyle(node, ctx, errors);
+    validateNodeStyle(node.style, `${ctx.path}.style`, errors);
+    const responsive = node.responsive;
+    if (responsive != null && typeof responsive === "object" && !Array.isArray(responsive)) {
+      const compact = responsive.compact;
+      if (compact != null && typeof compact === "object" && !Array.isArray(compact)) {
+        validateNodeStyle(
+          compact,
+          `${ctx.path}.responsive.compact`,
+          errors
+        );
+      }
+    }
   });
   return errors;
 }
@@ -578,8 +588,15 @@ function collectNestedStyleRefErrors(value, path, errors) {
     collectNestedStyleRefErrors(child, childPath, errors);
   }
 }
-function validateSingleStyle(style, stylePath, errors, cardStyles, allowHoverStyleRefs = true) {
-  const STRUCTURED_FIELDS = /* @__PURE__ */ new Set(["transition", "hoverStyle"]);
+function validateSingleStyle(style, stylePath, errors, cardStyles, options = {}) {
+  const {
+    allowHoverStyle = true,
+    allowTransition = true,
+    allowHoverStyleRefs = true
+  } = options;
+  const STRUCTURED_FIELDS = /* @__PURE__ */ new Set();
+  if (allowTransition) STRUCTURED_FIELDS.add("transition");
+  if (allowHoverStyle) STRUCTURED_FIELDS.add("hoverStyle");
   for (const key of Object.keys(style)) {
     if (!STRUCTURED_FIELDS.has(key) && FORBIDDEN_STYLE_PROPERTIES.includes(key)) {
       errors.push(
@@ -591,6 +608,24 @@ function validateSingleStyle(style, stylePath, errors, cardStyles, allowHoverSty
       );
     }
   }
+  if (!allowHoverStyle && "hoverStyle" in style) {
+    errors.push(
+      createError(
+        "INVALID_VALUE",
+        `hoverStyle is not allowed inside responsive overrides at "${stylePath}.hoverStyle"`,
+        `${stylePath}.hoverStyle`
+      )
+    );
+  }
+  if (!allowTransition && "transition" in style) {
+    errors.push(
+      createError(
+        "INVALID_VALUE",
+        `transition is not allowed inside responsive overrides at "${stylePath}.transition"`,
+        `${stylePath}.transition`
+      )
+    );
+  }
   if ("zIndex" in style && isLiteralNumber(style.zIndex)) {
     const v = style.zIndex;
     if (v < ZINDEX_MIN || v > ZINDEX_MAX) {
@@ -872,7 +907,7 @@ function validateSingleStyle(style, stylePath, errors, cardStyles, allowHoverSty
       }
     }
   }
-  if ("hoverStyle" in style && style.hoverStyle != null) {
+  if (allowHoverStyle && "hoverStyle" in style && style.hoverStyle != null) {
     const hoverStyle = style.hoverStyle;
     const hoverPath = `${stylePath}.hoverStyle`;
     if (typeof hoverStyle !== "object" || Array.isArray(hoverStyle)) {
@@ -901,12 +936,16 @@ function validateSingleStyle(style, stylePath, errors, cardStyles, allowHoverSty
           hoverPath,
           errors,
           cardStyles,
-          allowHoverStyleRefs
+          {
+            allowHoverStyle,
+            allowTransition,
+            allowHoverStyleRefs
+          }
         );
       }
     }
   }
-  if ("transition" in style && style.transition != null) {
+  if (allowTransition && "transition" in style && style.transition != null) {
     const transition = style.transition;
     const transPath = `${stylePath}.transition`;
     if (typeof transition === "string") {
@@ -992,18 +1031,41 @@ function validateStyles(views, cardStyles) {
         );
       }
       collectNestedStyleRefErrors(styleEntry, entryPath, errors);
-      validateSingleStyle(styleEntry, entryPath, errors, void 0, false);
+      validateSingleStyle(styleEntry, entryPath, errors, void 0, {
+        allowHoverStyleRefs: false
+      });
     }
   }
   traverseCard(views, (node, ctx) => {
     const style = node.style;
-    if (style == null || typeof style !== "object") {
+    if (style != null && typeof style === "object") {
+      const stylePath = `${ctx.path}.style`;
+      const mergedStyle = resolveStyleRef(style, stylePath, cardStyles, errors);
+      if (mergedStyle) {
+        validateSingleStyle(mergedStyle, stylePath, errors, cardStyles);
+      }
+    }
+    const responsive = node.responsive;
+    if (responsive == null || typeof responsive !== "object" || Array.isArray(responsive)) {
+      return;
+    }
+    const compact = responsive.compact;
+    if (compact == null || typeof compact !== "object" || Array.isArray(compact)) {
       return;
     }
-    const stylePath = `${ctx.path}.style`;
-    const mergedStyle = resolveStyleRef(style, stylePath, cardStyles, errors);
-    if (mergedStyle) {
-      validateSingleStyle(mergedStyle, stylePath, errors, cardStyles);
+    const compactPath = `${ctx.path}.responsive.compact`;
+    const mergedCompact = resolveStyleRef(
+      compact,
+      compactPath,
+      cardStyles,
+      errors
+    );
+    if (mergedCompact) {
+      validateSingleStyle(mergedCompact, compactPath, errors, cardStyles, {
+        allowHoverStyle: false,
+        allowTransition: false,
+        allowHoverStyleRefs: false
+      });
     }
   });
   return errors;
@@ -1014,6 +1076,72 @@ import {
   PROTOTYPE_POLLUTION_SEGMENTS,
   isRef as isRef2
 } from "@safe-ugc-ui/types";
+
+// src/responsive-utils.ts
+var RESPONSIVE_MODES = [
+  "default",
+  "compact"
+];
+function mergeNamedStyle(style, cardStyles) {
+  if (!style) return void 0;
+  const rawStyleName = style.$style;
+  const styleName = typeof rawStyleName === "string" ? rawStyleName.trim() : rawStyleName;
+  if (!styleName || typeof styleName !== "string" || !cardStyles) {
+    if (style.$style !== void 0) {
+      const { $style: _2, ...rest } = style;
+      return rest;
+    }
+    return style;
+  }
+  const baseStyle = cardStyles[styleName];
+  if (!baseStyle) {
+    const { $style: _2, ...rest } = style;
+    return rest;
+  }
+  const { $style: _, ...inlineWithoutStyleRef } = style;
+  return { ...baseStyle, ...inlineWithoutStyleRef };
+}
+function getCompactResponsiveStyle(node) {
+  const responsive = node.responsive;
+  if (responsive == null || typeof responsive !== "object" || Array.isArray(responsive)) {
+    return void 0;
+  }
+  const compact = responsive.compact;
+  if (compact == null || typeof compact !== "object" || Array.isArray(compact)) {
+    return void 0;
+  }
+  return compact;
+}
+function stripResponsiveOnlyUnsupportedFields(style) {
+  if (!style) return void 0;
+  const {
+    hoverStyle: _hoverStyle,
+    transition: _transition,
+    ...rest
+  } = style;
+  return rest;
+}
+function getEffectiveStyleForMode(node, cardStyles, mode) {
+  const baseStyle = mergeNamedStyle(node.style, cardStyles);
+  if (mode === "default") {
+    return baseStyle;
+  }
+  const compactStyle = stripResponsiveOnlyUnsupportedFields(
+    mergeNamedStyle(getCompactResponsiveStyle(node), cardStyles)
+  );
+  if (!compactStyle) {
+    return baseStyle;
+  }
+  return {
+    ...baseStyle ?? {},
+    ...compactStyle
+  };
+}
+function getMergedCompactResponsiveStyle(node, cardStyles) {
+  return mergeNamedStyle(getCompactResponsiveStyle(node), cardStyles);
+}
+
+// src/security.ts
 var FORBIDDEN_URL_PREFIXES = [
   "http://",
   "https://",
@@ -1130,8 +1258,84 @@ function checkSrcValue(resolved, type, errorPath, errors) {
     }
   }
 }
+function pushUniqueError(errors, seen, error) {
+  const key = `${error.code}|${error.path}|${error.message}`;
+  if (seen.has(key)) {
+    return;
+  }
+  seen.add(key);
+  errors.push(error);
+}
+function scanStyleStringsForUrl(style, path, errors) {
+  if (!style) {
+    return;
+  }
+  for (const [prop, value] of Object.entries(style)) {
+    if (typeof value === "string" && value.toLowerCase().includes("url(")) {
+      errors.push(
+        createError(
+          "FORBIDDEN_CSS_FUNCTION",
+          `CSS url() function is forbidden in style values. Found in "${prop}".`,
+          `${path}.${prop}`
+        )
+      );
+    }
+  }
+}
+function validateEffectiveStylesForMode(mode, views, cardStyles, errors, seen) {
+  const styleResolver = (node) => getEffectiveStyleForMode(node, cardStyles, mode);
+  traverseCard(views, (node, context) => {
+    const effectiveStyle = styleResolver(node);
+    if (effectiveStyle && typeof effectiveStyle.position === "string") {
+      const position = effectiveStyle.position;
+      if (position === "fixed") {
+        pushUniqueError(
+          errors,
+          seen,
+          createError(
+            "POSITION_FIXED_FORBIDDEN",
+            'CSS position "fixed" is not allowed.',
+            `${context.path}.style.position`
+          )
+        );
+      } else if (position === "sticky") {
+        pushUniqueError(
+          errors,
+          seen,
+          createError(
+            "POSITION_STICKY_FORBIDDEN",
+            'CSS position "sticky" is not allowed.',
+            `${context.path}.style.position`
+          )
+        );
+      } else if (position === "absolute" && context.parentType !== "Stack") {
+        pushUniqueError(
+          errors,
+          seen,
+          createError(
+            "POSITION_ABSOLUTE_NOT_IN_STACK",
+            'CSS position "absolute" is only allowed inside a Stack component.',
+            `${context.path}.style.position`
+          )
+        );
+      }
+    }
+    if (effectiveStyle && effectiveStyle.overflow === "auto" && context.overflowAutoAncestor) {
+      pushUniqueError(
+        errors,
+        seen,
+        createError(
+          "OVERFLOW_AUTO_NESTED",
+          "Nested overflow:auto is not allowed. An ancestor already has overflow:auto.",
+          `${context.path}.style.overflow`
+        )
+      );
+    }
+  }, styleResolver);
+}
 function validateSecurity(card) {
   const errors = [];
+  const seen = /* @__PURE__ */ new Set();
   const { views, state, cardAssets, cardStyles } = card;
   if (cardAssets) {
     for (const [key, value] of Object.entries(cardAssets)) {
@@ -1178,74 +1382,29 @@ function validateSecurity(card) {
         }
       }
     }
-    if (style) {
-      for (const [prop, value] of Object.entries(style)) {
-        if (typeof value === "string" && value.toLowerCase().includes("url(")) {
-          errors.push(
-            createError(
-              "FORBIDDEN_CSS_FUNCTION",
-              `CSS url() function is forbidden in style values. Found in "${prop}".`,
-              `${path}.style.${prop}`
-            )
-          );
-        }
-      }
-    }
-    let effectiveStyle = style;
-    if (style && typeof style.$style === "string" && cardStyles && style.$style.trim() in cardStyles) {
-      const refName = style.$style.trim();
-      const merged = { ...cardStyles[refName] };
-      for (const [key, value] of Object.entries(style)) {
-        if (key !== "$style") {
-          merged[key] = value;
-        }
-      }
-      effectiveStyle = merged;
-    }
-    if (effectiveStyle && typeof effectiveStyle.position === "string") {
-      const position = effectiveStyle.position;
-      if (position === "fixed") {
-        errors.push(
-          createError(
-            "POSITION_FIXED_FORBIDDEN",
-            'CSS position "fixed" is not allowed.',
-            `${path}.style.position`
-          )
-        );
-      } else if (position === "sticky") {
-        errors.push(
-          createError(
-            "POSITION_STICKY_FORBIDDEN",
-            'CSS position "sticky" is not allowed.',
-            `${path}.style.position`
-          )
+    scanStyleStringsForUrl(style, `${path}.style`, errors);
+    const responsive = node.responsive;
+    if (responsive != null && typeof responsive === "object" && !Array.isArray(responsive)) {
+      const compact = responsive.compact;
+      if (compact != null && typeof compact === "object" && !Array.isArray(compact)) {
+        scanStyleStringsForUrl(
+          compact,
+          `${path}.responsive.compact`,
+          errors
         );
-      } else if (position === "absolute") {
-        if (context.parentType !== "Stack") {
-          errors.push(
-            createError(
-              "POSITION_ABSOLUTE_NOT_IN_STACK",
-              'CSS position "absolute" is only allowed inside a Stack component.',
-              `${path}.style.position`
-            )
-          );
-        }
       }
     }
-    if (effectiveStyle && effectiveStyle.overflow === "auto" && context.overflowAutoAncestor) {
-      errors.push(
-        createError(
-          "OVERFLOW_AUTO_NESTED",
-          "Nested overflow:auto is not allowed. An ancestor already has overflow:auto.",
-          `${path}.style.overflow`
-        )
-      );
-    }
     scanForRefs(nodeFields, path, errors);
     if (style) {
       scanForRefs(style, `${path}.style`, errors);
     }
+    if (node.responsive != null && typeof node.responsive === "object" && !Array.isArray(node.responsive)) {
+      scanForRefs(node.responsive, `${path}.responsive`, errors);
+    }
   });
+  for (const mode of RESPONSIVE_MODES) {
+    validateEffectiveStylesForMode(mode, views, cardStyles, errors, seen);
+  }
   return errors;
 }
 
@@ -1313,7 +1472,15 @@ function resolveRefFromState2(refPath, state) {
   return current;
 }
 function countTemplateMetrics(template, cardStyles) {
-  const result = { nodes: 0, textBytes: 0, styleBytes: 0, overflowAutoCount: 0 };
+  const result = {
+    nodes: 0,
+    textBytes: 0,
+    styleBytes: 0,
+    overflowAutoCount: {
+      default: 0,
+      compact: 0
+    }
+  };
   if (template == null || typeof template !== "object") return result;
   const node = template;
   if (!node.type) return result;
@@ -1324,27 +1491,31 @@ function countTemplateMetrics(template, cardStyles) {
       result.textBytes = utf8ByteLength(content);
     }
   }
-  if (node.style != null && typeof node.style === "object") {
-    const style = node.style;
-    let styleForBytes = style;
-    if (typeof style.$style === "string" && cardStyles && style.$style.trim() in cardStyles) {
-      const refName = style.$style.trim();
-      const merged = { ...cardStyles[refName] };
-      for (const [key, value] of Object.entries(style)) {
-        if (key !== "$style") merged[key] = value;
-      }
-      styleForBytes = merged;
-    }
-    result.styleBytes = utf8ByteLength(JSON.stringify(styleForBytes));
-    let effectiveOverflow = style.overflow;
-    if (typeof style.$style === "string" && cardStyles && style.$style.trim() in cardStyles) {
-      const refName = style.$style.trim();
-      if (!("overflow" in style) || style.overflow === void 0) {
-        effectiveOverflow = cardStyles[refName].overflow;
-      }
+  {
+    const baseStyleForBytes = getEffectiveStyleForMode(
+      node,
+      cardStyles,
+      "default"
+    );
+    if (baseStyleForBytes) {
+      result.styleBytes += utf8ByteLength(JSON.stringify(baseStyleForBytes));
     }
-    if (effectiveOverflow === "auto") {
-      result.overflowAutoCount = 1;
+    const compactStyleForBytes = getMergedCompactResponsiveStyle(
+      node,
+      cardStyles
+    );
+    if (compactStyleForBytes) {
+      result.styleBytes += utf8ByteLength(JSON.stringify(compactStyleForBytes));
+    }
+    for (const mode of RESPONSIVE_MODES) {
+      const effectiveStyle = getEffectiveStyleForMode(
+        node,
+        cardStyles,
+        mode
+      );
+      if (effectiveStyle?.overflow === "auto") {
+        result.overflowAutoCount[mode]++;
+      }
     }
   }
   const children = node.children;
@@ -1354,7 +1525,9 @@ function countTemplateMetrics(template, cardStyles) {
       result.nodes += childMetrics.nodes;
       result.textBytes += childMetrics.textBytes;
       result.styleBytes += childMetrics.styleBytes;
-      result.overflowAutoCount += childMetrics.overflowAutoCount;
+      for (const mode of RESPONSIVE_MODES) {
+        result.overflowAutoCount[mode] += childMetrics.overflowAutoCount[mode];
+      }
     }
   } else if (children != null && typeof children === "object" && !Array.isArray(children) && "template" in children) {
     const innerTemplate = children.template;
@@ -1362,7 +1535,9 @@ function countTemplateMetrics(template, cardStyles) {
     result.nodes += innerMetrics.nodes;
     result.textBytes += innerMetrics.textBytes;
     result.styleBytes += innerMetrics.styleBytes;
-    result.overflowAutoCount += innerMetrics.overflowAutoCount;
+    for (const mode of RESPONSIVE_MODES) {
+      result.overflowAutoCount[mode] += innerMetrics.overflowAutoCount[mode];
+    }
   }
   return result;
 }
@@ -1371,7 +1546,10 @@ function validateLimits(card) {
   let nodeCount = 0;
   let textContentBytes = 0;
   let styleObjectsBytes = 0;
-  let overflowAutoCount = 0;
+  const overflowAutoCount = {
+    default: 0,
+    compact: 0
+  };
   traverseCard(card.views, (node, context) => {
     nodeCount++;
     if (node.type === "Text") {
@@ -1380,20 +1558,22 @@ function validateLimits(card) {
         textContentBytes += utf8ByteLength(content);
       }
     }
-    if (node.style != null && typeof node.style === "object") {
-      let styleForBytes = node.style;
-      if (typeof node.style.$style === "string" && card.cardStyles && node.style.$style.trim() in card.cardStyles) {
-        const refName = node.style.$style.trim();
-        const merged = { ...card.cardStyles[refName] };
-        for (const [key, value] of Object.entries(node.style)) {
-          if (key !== "$style") {
-            merged[key] = value;
-          }
-        }
-        styleForBytes = merged;
+    {
+      const baseStyleForBytes = getEffectiveStyleForMode(
+        node,
+        card.cardStyles,
+        "default"
+      );
+      if (baseStyleForBytes) {
+        styleObjectsBytes += utf8ByteLength(JSON.stringify(baseStyleForBytes));
+      }
+      const compactStyleForBytes = getMergedCompactResponsiveStyle(
+        node,
+        card.cardStyles
+      );
+      if (compactStyleForBytes) {
+        styleObjectsBytes += utf8ByteLength(JSON.stringify(compactStyleForBytes));
       }
-      const serialized = JSON.stringify(styleForBytes);
-      styleObjectsBytes += utf8ByteLength(serialized);
     }
     const children = node.children;
     if (children != null && typeof children === "object" && !Array.isArray(children) && "for" in children && "in" in children && "template" in children) {
@@ -1436,7 +1616,9 @@ function validateLimits(card) {
             nodeCount += tplMetrics.nodes * multiplier;
             textContentBytes += tplMetrics.textBytes * multiplier;
             styleObjectsBytes += tplMetrics.styleBytes * multiplier;
-            overflowAutoCount += tplMetrics.overflowAutoCount * multiplier;
+            for (const mode of RESPONSIVE_MODES) {
+              overflowAutoCount[mode] += tplMetrics.overflowAutoCount[mode] * multiplier;
+            }
           }
         }
       }
@@ -1450,16 +1632,10 @@ function validateLimits(card) {
         );
       }
     }
-    {
-      let effectiveOverflow = node.style?.overflow;
-      if (node.style && typeof node.style.$style === "string" && card.cardStyles && node.style.$style.trim() in card.cardStyles) {
-        const refName = node.style.$style.trim();
-        if (!("overflow" in node.style) || node.style.overflow === void 0) {
-          effectiveOverflow = card.cardStyles[refName].overflow;
-        }
-      }
-      if (effectiveOverflow === "auto") {
-        overflowAutoCount++;
+    for (const mode of RESPONSIVE_MODES) {
+      const effectiveStyle = getEffectiveStyleForMode(node, card.cardStyles, mode);
+      if (effectiveStyle?.overflow === "auto") {
+        overflowAutoCount[mode]++;
       }
     }
     if (node.type === "Stack" && context.stackDepth >= MAX_STACK_NESTING) {
@@ -1499,11 +1675,15 @@ function validateLimits(card) {
       )
     );
   }
-  if (overflowAutoCount > MAX_OVERFLOW_AUTO_COUNT) {
+  const maxOverflowAutoCount = Math.max(
+    overflowAutoCount.default,
+    overflowAutoCount.compact
+  );
+  if (maxOverflowAutoCount > MAX_OVERFLOW_AUTO_COUNT) {
     errors.push(
       createError(
         "OVERFLOW_AUTO_COUNT_EXCEEDED",
-        `Card has ${overflowAutoCount} elements with overflow:auto, max is ${MAX_OVERFLOW_AUTO_COUNT}`,
+        `Card has ${maxOverflowAutoCount} elements with overflow:auto in at least one responsive mode, max is ${MAX_OVERFLOW_AUTO_COUNT}`,
         "views"
       )
     );