@safe-ugc-ui/validator 0.5.1 → 1.0.0

package/dist/index.js

@@ -100,74 +100,252 @@ function parseCard(input) {
   return result.success ? result.data : null;
 }
 
-// src/node-validator.ts
-import { ALL_COMPONENT_TYPES } from "@safe-ugc-ui/types";
-
 // src/traverse.ts
 function isForLoop(children) {
   return typeof children === "object" && children !== null && "for" in children && "in" in children && "template" in children;
 }
+function isTraversableNode(value) {
+  return typeof value === "object" && value !== null && "type" in value && typeof value.type === "string";
+}
+function isFragmentUseLike(value) {
+  return typeof value === "object" && value !== null && "$use" in value && typeof value.$use === "string";
+}
+function getEmbeddedRenderables(node) {
+  const entries = [];
+  const interactiveField = node.type === "Accordion" ? "items" : node.type === "Tabs" ? "tabs" : null;
+  if (interactiveField) {
+    const items = node[interactiveField];
+    if (!Array.isArray(items)) {
+      return entries;
+    }
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item == null || typeof item !== "object" || Array.isArray(item)) {
+        continue;
+      }
+      const content = item.content;
+      if (isTraversableNode(content) || isFragmentUseLike(content)) {
+        entries.push({
+          pathSuffix: `${interactiveField}[${i}].content`,
+          renderable: content
+        });
+      }
+    }
+  }
+  return entries;
+}
+function resolveRenderableNode(node, fragments, fragmentStack = []) {
+  if (isTraversableNode(node)) {
+    return node;
+  }
+  if (!isFragmentUseLike(node) || !fragments) {
+    return null;
+  }
+  if (fragmentStack.length > 0 || fragmentStack.includes(node.$use)) {
+    return null;
+  }
+  const target = fragments[node.$use];
+  return isTraversableNode(target) ? target : null;
+}
 function hasOverflowAuto(style) {
   return style?.overflow === "auto";
 }
-function traverseNode(node, context, visitor) {
-  const result = visitor(node, context);
-  if (result === false) {
+function traverseNode(node, context, visitor, styleResolver, fragments, fragmentStack = []) {
+  const resolvedNode = resolveRenderableNode(node, fragments, fragmentStack);
+  if (!resolvedNode) {
     return;
   }
-  const children = node.children;
-  if (children == null) {
+  const nextFragmentStack = isFragmentUseLike(node) ? [...fragmentStack, node.$use] : fragmentStack;
+  const result = visitor(resolvedNode, context);
+  if (result === false) {
     return;
   }
-  const nextStackDepth = node.type === "Stack" ? context.stackDepth + 1 : context.stackDepth;
-  const nextOverflowAuto = context.overflowAutoAncestor || hasOverflowAuto(node.style);
-  if (isForLoop(children)) {
-    const childCtx = {
-      path: `${context.path}.children.template`,
+  const nextStackDepth = resolvedNode.type === "Stack" ? context.stackDepth + 1 : context.stackDepth;
+  const nextOverflowAuto = context.overflowAutoAncestor || hasOverflowAuto(styleResolver ? styleResolver(resolvedNode) : resolvedNode.style);
+  const children = resolvedNode.children;
+  if (children != null) {
+    if (isForLoop(children)) {
+      const childCtx = {
+        path: `${context.path}.children.template`,
+        depth: context.depth + 1,
+        parentType: resolvedNode.type,
+        loopDepth: context.loopDepth + 1,
+        overflowAutoAncestor: nextOverflowAuto,
+        stackDepth: nextStackDepth
+      };
+      traverseNode(children.template, childCtx, visitor, styleResolver, fragments, nextFragmentStack);
+    } else if (Array.isArray(children)) {
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        if (isTraversableNode(child) || isFragmentUseLike(child)) {
+          const childCtx = {
+            path: `${context.path}.children[${i}]`,
+            depth: context.depth + 1,
+            parentType: resolvedNode.type,
+            loopDepth: context.loopDepth,
+            overflowAutoAncestor: nextOverflowAuto,
+            stackDepth: nextStackDepth
+          };
+          traverseNode(child, childCtx, visitor, styleResolver, fragments, nextFragmentStack);
+        }
+      }
+    }
+  }
+  for (const entry of getEmbeddedRenderables(resolvedNode)) {
+    const embeddedCtx = {
+      path: `${context.path}.${entry.pathSuffix}`,
       depth: context.depth + 1,
-      parentType: node.type,
-      loopDepth: context.loopDepth + 1,
+      parentType: resolvedNode.type,
+      loopDepth: context.loopDepth,
       overflowAutoAncestor: nextOverflowAuto,
       stackDepth: nextStackDepth
     };
-    traverseNode(children.template, childCtx, visitor);
-  } else if (Array.isArray(children)) {
-    for (let i = 0; i < children.length; i++) {
-      const child = children[i];
-      if (child && typeof child === "object" && "type" in child) {
-        const childCtx = {
-          path: `${context.path}.children[${i}]`,
-          depth: context.depth + 1,
-          parentType: node.type,
-          loopDepth: context.loopDepth,
-          overflowAutoAncestor: nextOverflowAuto,
-          stackDepth: nextStackDepth
-        };
-        traverseNode(child, childCtx, visitor);
-      }
-    }
+    traverseNode(
+      entry.renderable,
+      embeddedCtx,
+      visitor,
+      styleResolver,
+      fragments,
+      nextFragmentStack
+    );
   }
 }
-function traverseCard(views, visitor) {
+function traverseCard(views, visitor, styleResolver, fragments, pathPrefix = "views") {
   for (const [viewName, rootNode] of Object.entries(views)) {
-    if (rootNode == null || typeof rootNode !== "object" || !("type" in rootNode)) {
+    if (!isTraversableNode(rootNode) && !isFragmentUseLike(rootNode)) {
       continue;
     }
     const context = {
-      path: `views.${viewName}`,
+      path: `${pathPrefix}.${viewName}`,
       depth: 0,
       parentType: null,
       loopDepth: 0,
       overflowAutoAncestor: false,
       stackDepth: 0
     };
-    traverseNode(rootNode, context, visitor);
+    traverseNode(rootNode, context, visitor, styleResolver, fragments);
   }
 }
 
+// src/renderable-walk.ts
+function isForLoopLike(value) {
+  return typeof value === "object" && value !== null && "for" in value && "in" in value && "template" in value;
+}
+function walkRenderableNode(node, path, inFragments, visitor) {
+  visitor(node, { path, inFragments });
+  if (!isTraversableNode(node)) {
+    return;
+  }
+  const children = node.children;
+  if (Array.isArray(children)) {
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (!isTraversableNode(child) && !isFragmentUseLike(child)) {
+        continue;
+      }
+      walkRenderableNode(
+        child,
+        `${path}.children[${i}]`,
+        inFragments,
+        visitor
+      );
+    }
+  }
+  if (isForLoopLike(children)) {
+    const template = children.template;
+    if (isTraversableNode(template) || isFragmentUseLike(template)) {
+      walkRenderableNode(
+        template,
+        `${path}.children.template`,
+        inFragments,
+        visitor
+      );
+    }
+  }
+  for (const entry of getEmbeddedRenderables(node)) {
+    walkRenderableNode(
+      entry.renderable,
+      `${path}.${entry.pathSuffix}`,
+      inFragments,
+      visitor
+    );
+  }
+}
+function walkRenderableCard(views, fragments, visitor) {
+  for (const [viewName, rootNode] of Object.entries(views)) {
+    if (!isTraversableNode(rootNode) && !isFragmentUseLike(rootNode)) {
+      continue;
+    }
+    walkRenderableNode(
+      rootNode,
+      `views.${viewName}`,
+      false,
+      visitor
+    );
+  }
+  if (!fragments) {
+    return;
+  }
+  for (const [fragmentName, fragmentRoot] of Object.entries(fragments)) {
+    if (!isTraversableNode(fragmentRoot) && !isFragmentUseLike(fragmentRoot)) {
+      continue;
+    }
+    walkRenderableNode(
+      fragmentRoot,
+      `fragments.${fragmentName}`,
+      true,
+      visitor
+    );
+  }
+}
+
+// src/fragment-validator.ts
+var FRAGMENT_NAME_PATTERN = /^[A-Za-z][A-Za-z0-9_-]*$/;
+function validateFragments(views, fragments) {
+  const errors = [];
+  if (fragments) {
+    for (const fragmentName of Object.keys(fragments)) {
+      if (!FRAGMENT_NAME_PATTERN.test(fragmentName)) {
+        errors.push(
+          createError(
+            "INVALID_FRAGMENT_NAME",
+            `Fragment name "${fragmentName}" is invalid; must match /^[A-Za-z][A-Za-z0-9_-]*$/.`,
+            `fragments.${fragmentName}`
+          )
+        );
+      }
+    }
+  }
+  walkRenderableCard(views, fragments, (node, context) => {
+    if (!isFragmentUseLike(node)) {
+      return;
+    }
+    if (context.inFragments) {
+      errors.push(
+        createError(
+          "FRAGMENT_NESTED_USE",
+          `Fragments may not contain "$use" references. Found at "${context.path}".`,
+          context.path
+        )
+      );
+      return;
+    }
+    if (!fragments || !(node.$use in fragments)) {
+      errors.push(
+        createError(
+          "FRAGMENT_REF_NOT_FOUND",
+          `Fragment "${node.$use}" was not found.`,
+          context.path
+        )
+      );
+    }
+  });
+  return errors;
+}
+
 // src/node-validator.ts
+import { ALL_COMPONENT_TYPES, MAX_INTERACTIVE_ITEMS } from "@safe-ugc-ui/types";
 var REQUIRED_FIELDS = {
-  Text: ["content"],
   Image: ["src"],
   ProgressBar: ["value", "max"],
   Avatar: ["src"],
@@ -175,7 +353,9 @@ var REQUIRED_FIELDS = {
   Badge: ["label"],
   Chip: ["label"],
   Button: ["label", "action"],
-  Toggle: ["value", "onToggle"]
+  Toggle: ["value", "onToggle"],
+  Accordion: ["items"],
+  Tabs: ["tabs"]
 };
 var KNOWN_TYPES = new Set(ALL_COMPONENT_TYPES);
 function looksLikeForLoop(value) {
@@ -203,17 +383,42 @@ function validateForLoop(children, path) {
     );
   }
   const template = children["template"];
-  if (typeof template !== "object" || template === null || !("type" in template)) {
+  if (typeof template !== "object" || template === null || !("type" in template) && !isFragmentUseLike(template)) {
     errors.push(
       createError(
         "INVALID_VALUE",
-        'ForLoop "template" must be an object with a "type" property.',
+        'ForLoop "template" must be an object with a "type" property or "$use" reference.',
         `${path}.children.template`
       )
     );
   }
   return errors;
 }
+function collectUniqueInteractiveItemIds(items, nodeType, path, errors) {
+  const itemIds = /* @__PURE__ */ new Set();
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    if (item == null || typeof item !== "object" || Array.isArray(item)) {
+      continue;
+    }
+    const itemId = item.id;
+    if (typeof itemId !== "string" || itemId.length === 0) {
+      continue;
+    }
+    if (itemIds.has(itemId)) {
+      errors.push(
+        createError(
+          "INVALID_VALUE",
+          `"${nodeType}" item ids must be unique. Duplicate id "${itemId}".`,
+          `${path}[${i}].id`
+        )
+      );
+      continue;
+    }
+    itemIds.add(itemId);
+  }
+  return itemIds;
+}
 function validateNode(node, context) {
   const errors = [];
   const { path } = context;
@@ -227,6 +432,28 @@ function validateNode(node, context) {
     );
     return errors;
   }
+  if (node.type === "Text") {
+    const hasContent = "content" in node && node.content !== void 0;
+    const hasSpans = "spans" in node && node.spans !== void 0;
+    if (!hasContent && !hasSpans) {
+      errors.push(
+        createError(
+          "MISSING_FIELD",
+          '"Text" node must define either "content" or "spans".',
+          `${path}.content`
+        )
+      );
+    }
+    if (hasContent && hasSpans) {
+      errors.push(
+        createError(
+          "INVALID_VALUE",
+          '"Text" node cannot define both "content" and "spans".',
+          path
+        )
+      );
+    }
+  }
   const requiredFields = REQUIRED_FIELDS[node.type];
   if (requiredFields && requiredFields.length > 0) {
     for (const field of requiredFields) {
@@ -249,12 +476,148 @@ function validateNode(node, context) {
       )
     );
   }
+  if (node.type === "Accordion") {
+    const items = Array.isArray(node.items) ? node.items : void 0;
+    if (items) {
+      if (items.length > MAX_INTERACTIVE_ITEMS) {
+        errors.push(
+          createError(
+            "INVALID_VALUE",
+            `"Accordion" node may define at most ${MAX_INTERACTIVE_ITEMS} items.`,
+            `${path}.items`
+          )
+        );
+      }
+      const itemIds = collectUniqueInteractiveItemIds(
+        items,
+        "Accordion",
+        `${path}.items`,
+        errors
+      );
+      if (Array.isArray(node.defaultExpanded)) {
+        if (node.allowMultiple !== true && node.defaultExpanded.length > 1) {
+          errors.push(
+            createError(
+              "INVALID_VALUE",
+              '"Accordion" cannot define multiple defaultExpanded ids unless "allowMultiple" is true.',
+              `${path}.defaultExpanded`
+            )
+          );
+        }
+        for (let i = 0; i < node.defaultExpanded.length; i++) {
+          const itemId = node.defaultExpanded[i];
+          if (typeof itemId !== "string" || !itemIds.has(itemId)) {
+            errors.push(
+              createError(
+                "INVALID_VALUE",
+                `"Accordion" defaultExpanded id "${String(itemId)}" was not found in items.`,
+                `${path}.defaultExpanded[${i}]`
+              )
+            );
+          }
+        }
+      }
+    }
+  }
+  if (node.type === "Tabs") {
+    const tabs = Array.isArray(node.tabs) ? node.tabs : void 0;
+    if (tabs) {
+      if (tabs.length > MAX_INTERACTIVE_ITEMS) {
+        errors.push(
+          createError(
+            "INVALID_VALUE",
+            `"Tabs" node may define at most ${MAX_INTERACTIVE_ITEMS} tabs.`,
+            `${path}.tabs`
+          )
+        );
+      }
+      const tabIds = collectUniqueInteractiveItemIds(
+        tabs,
+        "Tabs",
+        `${path}.tabs`,
+        errors
+      );
+      if ("defaultTab" in node) {
+        const defaultTab = node.defaultTab;
+        if (typeof defaultTab !== "string" || !tabIds.has(defaultTab)) {
+          errors.push(
+            createError(
+              "INVALID_VALUE",
+              `"Tabs" defaultTab "${String(defaultTab)}" was not found in tabs.`,
+              `${path}.defaultTab`
+            )
+          );
+        }
+      }
+    }
+  }
   return errors;
 }
-function validateNodes(views) {
+function validateNodes(views, fragments) {
   const errors = [];
-  traverseCard(views, (node, context) => {
-    errors.push(...validateNode(node, context));
+  walkRenderableCard(views, fragments, (node, context) => {
+    if (!("type" in node) || typeof node.type !== "string") {
+      return;
+    }
+    errors.push(
+      ...validateNode(
+        node,
+        {
+          path: context.path,
+          depth: 0,
+          parentType: null,
+          loopDepth: 0,
+          overflowAutoAncestor: false,
+          stackDepth: 0
+        }
+      )
+    );
+  });
+  return errors;
+}
+
+// src/condition-validator.ts
+import { MAX_CONDITION_DEPTH, isRef } from "@safe-ugc-ui/types";
+function validateConditionDepth(condition, path, errors, depth = 1) {
+  if (depth > MAX_CONDITION_DEPTH) {
+    errors.push(
+      createError(
+        "CONDITION_DEPTH_EXCEEDED",
+        `$if condition exceeds maximum depth of ${MAX_CONDITION_DEPTH} at "${path}"`,
+        path
+      )
+    );
+    return;
+  }
+  if (typeof condition === "boolean" || isRef(condition)) {
+    return;
+  }
+  if (typeof condition !== "object" || condition === null || Array.isArray(condition)) {
+    return;
+  }
+  const conditionObj = condition;
+  const op = conditionObj.op;
+  if (op === "not") {
+    validateConditionDepth(conditionObj.value, `${path}.value`, errors, depth + 1);
+    return;
+  }
+  if ((op === "and" || op === "or") && Array.isArray(conditionObj.values)) {
+    for (let i = 0; i < conditionObj.values.length; i++) {
+      validateConditionDepth(
+        conditionObj.values[i],
+        `${path}.values[${i}]`,
+        errors,
+        depth + 1
+      );
+    }
+  }
+}
+function validateConditions(views, fragments) {
+  const errors = [];
+  walkRenderableCard(views, fragments, (node, ctx) => {
+    if ("$if" in node) {
+      validateConditionDepth(node.$if, `${ctx.path}.$if`, errors);
+    }
   });
   return errors;
 }
@@ -287,8 +650,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 +664,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,23 +673,39 @@ 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}`
           )
         );
       }
     }
   }
 }
-function validateValueTypes(views) {
+function validateValueTypes(views, fragments) {
   const errors = [];
-  traverseCard(views, (node, ctx) => {
-    validateNodeStyle(node, ctx, errors);
+  walkRenderableCard(views, fragments, (node, ctx) => {
+    if (!("type" in node) || typeof node.type !== "string") {
+      return;
+    }
+    const style = node.style != null && typeof node.style === "object" && !Array.isArray(node.style) ? node.style : void 0;
+    validateNodeStyle(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;
 }
 
 // src/style-validator.ts
 import {
+  ASPECT_RATIO_PATTERN,
   FORBIDDEN_STYLE_PROPERTIES,
   DANGEROUS_CSS_FUNCTIONS,
   ZINDEX_MIN,
@@ -353,7 +731,7 @@ import {
   TRANSITION_DELAY_MAX,
   TRANSITION_MAX_COUNT,
   ALLOWED_TRANSITION_PROPERTIES,
-  isRef
+  isRef as isRef2
 } from "@safe-ugc-ui/types";
 var COLOR_PROPERTIES = /* @__PURE__ */ new Set(["backgroundColor", "color"]);
 var LENGTH_PROPERTIES = /* @__PURE__ */ new Set([
@@ -409,7 +787,7 @@ function isLiteralString(value) {
   return typeof value === "string";
 }
 function isDynamic(value) {
-  return isRef(value);
+  return isRef2(value);
 }
 function isValidColor(value) {
   const lower = value.toLowerCase();
@@ -437,6 +815,22 @@ function parseLengthValue(value) {
   }
   return Number(match[1]);
 }
+function isValidAspectRatioLiteral(value) {
+  if (typeof value === "number") {
+    return Number.isFinite(value) && value > 0;
+  }
+  const match = value.match(ASPECT_RATIO_PATTERN);
+  if (!match) {
+    return false;
+  }
+  const parts = value.split("/");
+  if (parts.length !== 2) {
+    return false;
+  }
+  const width = Number(parts[0].trim());
+  const height = Number(parts[1].trim());
+  return Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0;
+}
 function collectDangerousCssErrors(value, path, errors) {
   if (typeof value === "string") {
     const lower = value.toLowerCase();
@@ -454,7 +848,7 @@ function collectDangerousCssErrors(value, path, errors) {
     }
     return;
   }
-  if (isRef(value)) {
+  if (isRef2(value)) {
     return;
   }
   if (Array.isArray(value)) {
@@ -578,8 +972,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 +992,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) {
@@ -819,6 +1238,18 @@ function validateSingleStyle(style, stylePath, errors, cardStyles, allowHoverSty
       }
     }
   }
+  if ("aspectRatio" in style && style.aspectRatio != null && !isDynamic(style.aspectRatio)) {
+    const aspectRatio = style.aspectRatio;
+    if (typeof aspectRatio !== "number" && typeof aspectRatio !== "string" || !isValidAspectRatioLiteral(aspectRatio)) {
+      errors.push(
+        createError(
+          "INVALID_VALUE",
+          `Invalid aspectRatio "${String(aspectRatio)}" at "${stylePath}.aspectRatio"`,
+          `${stylePath}.aspectRatio`
+        )
+      );
+    }
+  }
   for (const [prop, range] of Object.entries(RANGE_LENGTH_PROPERTIES)) {
     if (prop in style && isLiteralString(style[prop]) && !isDynamic(style[prop])) {
       const numericValue = parseLengthValue(style[prop]);
@@ -872,7 +1303,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 +1332,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") {
@@ -977,7 +1412,7 @@ function mergeStyleWithRef(cardStyleEntry, inlineStyle) {
   }
   return merged;
 }
-function validateStyles(views, cardStyles) {
+function validateStyles(views, cardStyles, fragments) {
   const errors = [];
   if (cardStyles) {
     for (const [styleName, styleEntry] of Object.entries(cardStyles)) {
@@ -992,18 +1427,66 @@ 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") {
+  walkRenderableCard(views, fragments, (node, ctx) => {
+    if (!("type" in node) || typeof node.type !== "string") {
       return;
     }
-    const stylePath = `${ctx.path}.style`;
-    const mergedStyle = resolveStyleRef(style, stylePath, cardStyles, errors);
-    if (mergedStyle) {
-      validateSingleStyle(mergedStyle, stylePath, errors, cardStyles);
+    const style = node.style != null && typeof node.style === "object" && !Array.isArray(node.style) ? node.style : void 0;
+    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)) {
+      const compact = responsive.compact;
+      if (compact != null && typeof compact === "object" && !Array.isArray(compact)) {
+        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
+          });
+        }
+      }
+    }
+    const spans = Array.isArray(node.spans) ? node.spans : void 0;
+    if (node.type === "Text" && spans) {
+      for (let i = 0; i < spans.length; i++) {
+        const span = spans[i];
+        if (span == null || typeof span !== "object" || Array.isArray(span)) {
+          continue;
+        }
+        const spanStyle = span.style;
+        if (spanStyle == null || typeof spanStyle !== "object" || Array.isArray(spanStyle)) {
+          continue;
+        }
+        validateSingleStyle(
+          spanStyle,
+          `${ctx.path}.spans[${i}].style`,
+          errors,
+          void 0,
+          {
+            allowHoverStyle: false,
+            allowTransition: false,
+            allowHoverStyleRefs: false
+          }
+        );
+      }
     }
   });
   return errors;
@@ -1012,8 +1495,74 @@ function validateStyles(views, cardStyles) {
 // src/security.ts
 import {
   PROTOTYPE_POLLUTION_SEGMENTS,
-  isRef as isRef2
+  isRef as isRef3
 } 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://",
@@ -1025,7 +1574,7 @@ function scanForRefs(obj, path, errors) {
   if (obj === null || obj === void 0 || typeof obj !== "object") {
     return;
   }
-  if (isRef2(obj)) {
+  if (isRef3(obj)) {
     const refStr = obj.$ref;
     const segments = refStr.split(/[.\[]/);
     for (const segment of segments) {
@@ -1130,9 +1679,102 @@ 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 getScannableNodeFields(node) {
+  const nodeFields = { ...node };
+  delete nodeFields.type;
+  delete nodeFields.style;
+  delete nodeFields.children;
+  const interactiveField = node.type === "Accordion" ? "items" : node.type === "Tabs" ? "tabs" : null;
+  if (interactiveField && Array.isArray(node[interactiveField])) {
+    nodeFields[interactiveField] = node[interactiveField].map((item) => {
+      if (item == null || typeof item !== "object" || Array.isArray(item)) {
+        return item;
+      }
+      const { content: _content, ...rest } = item;
+      return rest;
+    });
+  }
+  return nodeFields;
+}
+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, fragments, 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, fragments);
+}
 function validateSecurity(card) {
   const errors = [];
-  const { views, state, cardAssets, cardStyles } = card;
+  const seen = /* @__PURE__ */ new Set();
+  const { views, state, cardAssets, cardStyles, fragments } = card;
   if (cardAssets) {
     for (const [key, value] of Object.entries(cardAssets)) {
       const assetError = validateAssetPath(value);
@@ -1155,18 +1797,20 @@ function validateSecurity(card) {
       }
     }
   }
-  traverseCard(views, (node, context) => {
+  walkRenderableCard(views, fragments, (node, context) => {
+    if (!("type" in node) || typeof node.type !== "string") {
+      return;
+    }
+    const traversableNode = node;
     const { path } = context;
-    const { style, type } = node;
-    const nodeFields = { ...node };
-    delete nodeFields.type;
-    delete nodeFields.style;
-    delete nodeFields.children;
+    const style = traversableNode.style != null && typeof traversableNode.style === "object" && !Array.isArray(traversableNode.style) ? traversableNode.style : void 0;
+    const type = traversableNode.type;
+    const nodeFields = getScannableNodeFields(traversableNode);
     if (type === "Image" || type === "Avatar") {
       const src = node.src;
       if (typeof src === "string") {
         checkSrcValue(src, type, `${path}.src`, errors);
-      } else if (isRef2(src)) {
+      } else if (isRef3(src)) {
         if (state) {
           const resolved = resolveRefFromState(
             src.$ref,
@@ -1178,74 +1822,46 @@ 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}`
-            )
-          );
-        }
+    scanStyleStringsForUrl(style, `${path}.style`, errors);
+    const responsive = traversableNode.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
+        );
       }
     }
-    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;
+    if (type === "Text" && Array.isArray(traversableNode.spans)) {
+      const spans = traversableNode.spans;
+      for (let i = 0; i < spans.length; i++) {
+        const span = spans[i];
+        if (span == null || typeof span !== "object" || Array.isArray(span)) {
+          continue;
         }
-      }
-      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`
-          )
-        );
-      } 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`
-            )
+        const spanStyle = span.style;
+        if (spanStyle != null && typeof spanStyle === "object" && !Array.isArray(spanStyle)) {
+          scanStyleStringsForUrl(
+            spanStyle,
+            `${path}.spans[${i}].style`,
+            errors
           );
         }
       }
     }
-    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 (responsive != null && typeof responsive === "object" && !Array.isArray(responsive)) {
+      scanForRefs(responsive, `${path}.responsive`, errors);
+    }
   });
+  for (const mode of RESPONSIVE_MODES) {
+    validateEffectiveStylesForMode(mode, views, cardStyles, fragments, errors, seen);
+  }
   return errors;
 }
 
@@ -1258,8 +1874,7 @@ import {
   MAX_NESTED_LOOPS,
   MAX_OVERFLOW_AUTO_COUNT,
   MAX_STACK_NESTING,
-  PROTOTYPE_POLLUTION_SEGMENTS as PROTOTYPE_POLLUTION_SEGMENTS2,
-  isRef as isRef3
+  PROTOTYPE_POLLUTION_SEGMENTS as PROTOTYPE_POLLUTION_SEGMENTS2
 } from "@safe-ugc-ui/types";
 function utf8ByteLength(str) {
   let bytes = 0;
@@ -1278,6 +1893,54 @@ function utf8ByteLength(str) {
   }
   return bytes;
 }
+function isTemplateObject(value) {
+  return typeof value === "object" && value !== null && "$template" in value && Array.isArray(value.$template);
+}
+function countLiteralTemplatedStringBytes(value) {
+  if (typeof value === "string") {
+    return utf8ByteLength(value);
+  }
+  if (!isTemplateObject(value)) {
+    return 0;
+  }
+  return value.$template.reduce((total, part) => {
+    if (typeof part === "string") {
+      return total + utf8ByteLength(part);
+    }
+    if (typeof part === "number" || typeof part === "boolean" || part === null) {
+      return total + utf8ByteLength(String(part));
+    }
+    return total;
+  }, 0);
+}
+function countTextNodeLiteralBytes(node) {
+  if (Array.isArray(node.spans)) {
+    return node.spans.reduce((total, span) => {
+      if (span == null || typeof span !== "object" || Array.isArray(span)) {
+        return total;
+      }
+      return total + countLiteralTemplatedStringBytes(
+        span.text
+      );
+    }, 0);
+  }
+  return countLiteralTemplatedStringBytes(node.content);
+}
+function countTextSpanStyleBytes(node) {
+  if (!Array.isArray(node.spans)) {
+    return 0;
+  }
+  return node.spans.reduce((total, span) => {
+    if (span == null || typeof span !== "object" || Array.isArray(span)) {
+      return total;
+    }
+    const style = span.style;
+    if (style == null || typeof style !== "object" || Array.isArray(style)) {
+      return total;
+    }
+    return total + utf8ByteLength(JSON.stringify(style));
+  }, 0);
+}
 function resolveRefFromState2(refPath, state) {
   const path = refPath.startsWith("$") ? refPath.slice(1) : refPath;
   const dotSegments = path.split(".");
@@ -1312,58 +1975,49 @@ function resolveRefFromState2(refPath, state) {
   }
   return current;
 }
-function countTemplateMetrics(template, cardStyles) {
-  const result = { nodes: 0, textBytes: 0, styleBytes: 0, overflowAutoCount: 0 };
-  if (template == null || typeof template !== "object") return result;
-  const node = template;
-  if (!node.type) return result;
-  result.nodes = 1;
-  if (node.type === "Text") {
-    const content = node.content;
-    if (typeof content === "string" && !isRef3(content)) {
-      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;
+function countTemplateMetrics(template, cardStyles, fragments) {
+  const result = {
+    nodes: 0,
+    textBytes: 0,
+    styleBytes: 0,
+    overflowAutoCount: {
+      default: 0,
+      compact: 0
+    }
+  };
+  traverseCard(
+    { __template: template },
+    (node) => {
+      result.nodes += 1;
+      if (node.type === "Text") {
+        result.textBytes += countTextNodeLiteralBytes(node);
+        result.styleBytes += countTextSpanStyleBytes(node);
       }
-      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 children = node.children;
-  if (Array.isArray(children)) {
-    for (const child of children) {
-      const childMetrics = countTemplateMetrics(child, cardStyles);
-      result.nodes += childMetrics.nodes;
-      result.textBytes += childMetrics.textBytes;
-      result.styleBytes += childMetrics.styleBytes;
-      result.overflowAutoCount += childMetrics.overflowAutoCount;
-    }
-  } else if (children != null && typeof children === "object" && !Array.isArray(children) && "template" in children) {
-    const innerTemplate = children.template;
-    const innerMetrics = countTemplateMetrics(innerTemplate, cardStyles);
-    result.nodes += innerMetrics.nodes;
-    result.textBytes += innerMetrics.textBytes;
-    result.styleBytes += innerMetrics.styleBytes;
-    result.overflowAutoCount += innerMetrics.overflowAutoCount;
-  }
+      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]++;
+        }
+      }
+    },
+    void 0,
+    fragments
+  );
   return result;
 }
 function validateLimits(card) {
@@ -1371,29 +2025,32 @@ 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") {
-      const content = node.content;
-      if (typeof content === "string" && !isRef3(content)) {
-        textContentBytes += utf8ByteLength(content);
-      }
+      textContentBytes += countTextNodeLiteralBytes(node);
+      styleObjectsBytes += countTextSpanStyleBytes(node);
     }
-    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) {
@@ -1431,12 +2088,14 @@ function validateLimits(card) {
               )
             );
           } else if (source.length > 1) {
-            const tplMetrics = countTemplateMetrics(forLoop.template, card.cardStyles);
+            const tplMetrics = countTemplateMetrics(forLoop.template, card.cardStyles, card.fragments);
             const multiplier = source.length - 1;
             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 +2109,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) {
@@ -1471,7 +2124,7 @@ function validateLimits(card) {
         )
       );
     }
-  });
+  }, void 0, card.fragments);
   if (nodeCount > MAX_NODE_COUNT) {
     errors.push(
       createError(
@@ -1499,11 +2152,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"
       )
     );
@@ -1533,17 +2190,26 @@ function runAllChecks(input) {
   const obj = input;
   const views = obj.views;
   const cardStyles = obj.styles;
+  const fragments = obj.fragments;
   const errors = [];
-  errors.push(...validateNodes(views));
-  errors.push(...validateValueTypes(views));
-  errors.push(...validateStyles(views, cardStyles));
+  errors.push(...validateFragments(views, fragments));
+  errors.push(...validateNodes(views, fragments));
+  errors.push(...validateConditions(views, fragments));
+  errors.push(...validateValueTypes(views, fragments));
+  errors.push(...validateStyles(views, cardStyles, fragments));
   errors.push(...validateSecurity({
     views,
     state: obj.state,
     cardAssets: obj.assets,
-    cardStyles
+    cardStyles,
+    fragments
+  }));
+  errors.push(...validateLimits({
+    state: obj.state,
+    views,
+    cardStyles,
+    fragments
   }));
-  errors.push(...validateLimits({ state: obj.state, views, cardStyles }));
   return errors;
 }
 function validate(input) {
@@ -1586,6 +2252,8 @@ export {
   traverseNode,
   validResult,
   validate,
+  validateConditions,
+  validateFragments,
   validateLimits,
   validateNodes,
   validateRaw,