@safe-ugc-ui/validator 0.6.0 → 1.1.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, styleResolver) {
-  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(styleResolver ? styleResolver(node) : 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, styleResolver);
-  } 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, styleResolver);
-      }
-    }
+    traverseNode(
+      entry.renderable,
+      embeddedCtx,
+      visitor,
+      styleResolver,
+      fragments,
+      nextFragmentStack
+    );
   }
 }
-function traverseCard(views, visitor, styleResolver) {
+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, styleResolver);
+    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;
 }
@@ -285,8 +648,10 @@ var STRUCTURED_OBJECT_STYLE_PROPERTIES = /* @__PURE__ */ new Set([
   "borderLeft",
   // Shadow
   "boxShadow",
-  "textShadow"
+  "textShadow",
+  "clipPath"
 ]);
+var RESPONSIVE_OVERRIDE_KEYS = ["medium", "compact"];
 function validateNodeStyle(style, path, errors) {
   if (!style) {
     return;
@@ -317,19 +682,25 @@ function validateNodeStyle(style, path, errors) {
     }
   }
 }
-function validateValueTypes(views) {
+function validateValueTypes(views, fragments) {
   const errors = [];
-  traverseCard(views, (node, ctx) => {
-    validateNodeStyle(node.style, `${ctx.path}.style`, 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
-        );
+      for (const mode of RESPONSIVE_OVERRIDE_KEYS) {
+        const override = responsive[mode];
+        if (override != null && typeof override === "object" && !Array.isArray(override)) {
+          validateNodeStyle(
+            override,
+            `${ctx.path}.responsive.${mode}`,
+            errors
+          );
+        }
       }
     }
   });
@@ -338,6 +709,7 @@ function validateValueTypes(views) {
 
 // src/style-validator.ts
 import {
+  ASPECT_RATIO_PATTERN,
   FORBIDDEN_STYLE_PROPERTIES,
   DANGEROUS_CSS_FUNCTIONS,
   ZINDEX_MIN,
@@ -358,12 +730,13 @@ import {
   LETTER_SPACING_MAX,
   OPACITY_MIN,
   OPACITY_MAX,
+  BACKDROP_BLUR_MAX,
   CSS_NAMED_COLORS,
   TRANSITION_DURATION_MAX,
   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([
@@ -403,6 +776,7 @@ var LENGTH_AUTO_ALLOWED = /* @__PURE__ */ new Set([
   "marginBottom",
   "marginLeft"
 ]);
+var RESPONSIVE_OVERRIDE_KEYS2 = ["medium", "compact"];
 var RANGE_LENGTH_PROPERTIES = {
   fontSize: { min: FONT_SIZE_MIN, max: FONT_SIZE_MAX },
   letterSpacing: { min: LETTER_SPACING_MIN, max: LETTER_SPACING_MAX },
@@ -419,7 +793,7 @@ function isLiteralString(value) {
   return typeof value === "string";
 }
 function isDynamic(value) {
-  return isRef(value);
+  return isRef2(value);
 }
 function isValidColor(value) {
   const lower = value.toLowerCase();
@@ -447,6 +821,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();
@@ -464,7 +854,7 @@ function collectDangerousCssErrors(value, path, errors) {
     }
     return;
   }
-  if (isRef(value)) {
+  if (isRef2(value)) {
     return;
   }
   if (Array.isArray(value)) {
@@ -528,6 +918,44 @@ function validateTextShadowObject(shadow, path, errors) {
     );
   }
 }
+function validateClipPathLength(value, path, errors) {
+  if (value == null || isDynamic(value)) {
+    return;
+  }
+  if (typeof value === "number") {
+    return;
+  }
+  if (typeof value === "string" && isValidLength(value)) {
+    return;
+  }
+  errors.push(
+    createError(
+      "INVALID_LENGTH",
+      `Invalid length "${String(value)}" at "${path}"`,
+      path
+    )
+  );
+}
+function validateClipPathObject(clipPath, path, errors) {
+  switch (clipPath.type) {
+    case "circle":
+      validateClipPathLength(clipPath.radius, `${path}.radius`, errors);
+      return;
+    case "ellipse":
+      validateClipPathLength(clipPath.rx, `${path}.rx`, errors);
+      validateClipPathLength(clipPath.ry, `${path}.ry`, errors);
+      return;
+    case "inset":
+      validateClipPathLength(clipPath.top, `${path}.top`, errors);
+      validateClipPathLength(clipPath.right, `${path}.right`, errors);
+      validateClipPathLength(clipPath.bottom, `${path}.bottom`, errors);
+      validateClipPathLength(clipPath.left, `${path}.left`, errors);
+      validateClipPathLength(clipPath.round, `${path}.round`, errors);
+      return;
+    default:
+      return;
+  }
+}
 var STYLE_NAME_PATTERN = /^[A-Za-z][A-Za-z0-9_-]*$/;
 function reportStyleRefError(rawRef, stylePath, cardStyles, errors) {
   const trimmedRef = rawRef.trim();
@@ -662,6 +1090,18 @@ function validateSingleStyle(style, stylePath, errors, cardStyles, options = {})
       );
     }
   }
+  if ("backdropBlur" in style && isLiteralNumber(style.backdropBlur)) {
+    const v = style.backdropBlur;
+    if (v < 0 || v > BACKDROP_BLUR_MAX) {
+      errors.push(
+        createError(
+          "STYLE_VALUE_OUT_OF_RANGE",
+          `backdropBlur (${v}) must be between 0 and ${BACKDROP_BLUR_MAX} at "${stylePath}.backdropBlur"`,
+          `${stylePath}.backdropBlur`
+        )
+      );
+    }
+  }
   if ("letterSpacing" in style && isLiteralNumber(style.letterSpacing)) {
     const v = style.letterSpacing;
     if (v < LETTER_SPACING_MIN || v > LETTER_SPACING_MAX) {
@@ -854,6 +1294,25 @@ function validateSingleStyle(style, stylePath, errors, cardStyles, options = {})
       }
     }
   }
+  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`
+        )
+      );
+    }
+  }
+  if ("clipPath" in style && style.clipPath != null && typeof style.clipPath === "object" && !Array.isArray(style.clipPath) && !isDynamic(style.clipPath)) {
+    validateClipPathObject(
+      style.clipPath,
+      `${stylePath}.clipPath`,
+      errors
+    );
+  }
   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]);
@@ -1016,7 +1475,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)) {
@@ -1036,8 +1495,11 @@ function validateStyles(views, cardStyles) {
       });
     }
   }
-  traverseCard(views, (node, ctx) => {
-    const style = node.style;
+  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;
     if (style != null && typeof style === "object") {
       const stylePath = `${ctx.path}.style`;
       const mergedStyle = resolveStyleRef(style, stylePath, cardStyles, errors);
@@ -1046,26 +1508,50 @@ function validateStyles(views, 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;
+    if (responsive != null && typeof responsive === "object" && !Array.isArray(responsive)) {
+      for (const mode of RESPONSIVE_OVERRIDE_KEYS2) {
+        const override = responsive[mode];
+        if (override != null && typeof override === "object" && !Array.isArray(override)) {
+          const overridePath = `${ctx.path}.responsive.${mode}`;
+          const mergedOverride = resolveStyleRef(
+            override,
+            overridePath,
+            cardStyles,
+            errors
+          );
+          if (mergedOverride) {
+            validateSingleStyle(mergedOverride, overridePath, errors, cardStyles, {
+              allowHoverStyle: false,
+              allowTransition: false,
+              allowHoverStyleRefs: false
+            });
+          }
+        }
+      }
     }
-    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;
@@ -1074,12 +1560,13 @@ 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",
+  "medium",
   "compact"
 ];
 function mergeNamedStyle(style, cardStyles) {
@@ -1101,16 +1588,16 @@ function mergeNamedStyle(style, cardStyles) {
   const { $style: _, ...inlineWithoutStyleRef } = style;
   return { ...baseStyle, ...inlineWithoutStyleRef };
 }
-function getCompactResponsiveStyle(node) {
+function getResponsiveStyle(node, mode) {
   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)) {
+  const override = responsive[mode];
+  if (override == null || typeof override !== "object" || Array.isArray(override)) {
     return void 0;
   }
-  return compact;
+  return override;
 }
 function stripResponsiveOnlyUnsupportedFields(style) {
   if (!style) return void 0;
@@ -1126,22 +1613,36 @@ function getEffectiveStyleForMode(node, cardStyles, mode) {
   if (mode === "default") {
     return baseStyle;
   }
+  const mediumStyle = stripResponsiveOnlyUnsupportedFields(
+    mergeNamedStyle(getResponsiveStyle(node, "medium"), cardStyles)
+  );
+  if (mode === "medium") {
+    if (!mediumStyle) {
+      return baseStyle;
+    }
+    return {
+      ...baseStyle ?? {},
+      ...mediumStyle
+    };
+  }
   const compactStyle = stripResponsiveOnlyUnsupportedFields(
-    mergeNamedStyle(getCompactResponsiveStyle(node), cardStyles)
+    mergeNamedStyle(getResponsiveStyle(node, "compact"), cardStyles)
   );
-  if (!compactStyle) {
+  if (!mediumStyle && !compactStyle) {
     return baseStyle;
   }
   return {
     ...baseStyle ?? {},
+    ...mediumStyle ?? {},
     ...compactStyle
   };
 }
-function getMergedCompactResponsiveStyle(node, cardStyles) {
-  return mergeNamedStyle(getCompactResponsiveStyle(node), cardStyles);
+function getMergedResponsiveStyleOverride(node, cardStyles, mode) {
+  return mergeNamedStyle(getResponsiveStyle(node, mode), cardStyles);
 }
 
 // src/security.ts
+var RESPONSIVE_OVERRIDE_KEYS3 = ["medium", "compact"];
 var FORBIDDEN_URL_PREFIXES = [
   "http://",
   "https://",
@@ -1153,7 +1654,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) {
@@ -1266,6 +1767,23 @@ function pushUniqueError(errors, seen, error) {
   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;
@@ -1282,7 +1800,7 @@ function scanStyleStringsForUrl(style, path, errors) {
     }
   }
 }
-function validateEffectiveStylesForMode(mode, views, cardStyles, errors, seen) {
+function validateEffectiveStylesForMode(mode, views, cardStyles, fragments, errors, seen) {
   const styleResolver = (node) => getEffectiveStyleForMode(node, cardStyles, mode);
   traverseCard(views, (node, context) => {
     const effectiveStyle = styleResolver(node);
@@ -1331,12 +1849,12 @@ function validateEffectiveStylesForMode(mode, views, cardStyles, errors, seen) {
         )
       );
     }
-  }, styleResolver);
+  }, styleResolver, fragments);
 }
 function validateSecurity(card) {
   const errors = [];
   const seen = /* @__PURE__ */ new Set();
-  const { views, state, cardAssets, cardStyles } = card;
+  const { views, state, cardAssets, cardStyles, fragments } = card;
   if (cardAssets) {
     for (const [key, value] of Object.entries(cardAssets)) {
       const assetError = validateAssetPath(value);
@@ -1359,18 +1877,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,
@@ -1383,27 +1903,46 @@ function validateSecurity(card) {
       }
     }
     scanStyleStringsForUrl(style, `${path}.style`, errors);
-    const responsive = node.responsive;
+    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
-        );
+      for (const mode of RESPONSIVE_OVERRIDE_KEYS3) {
+        const override = responsive[mode];
+        if (override != null && typeof override === "object" && !Array.isArray(override)) {
+          scanStyleStringsForUrl(
+            override,
+            `${path}.responsive.${mode}`,
+            errors
+          );
+        }
+      }
+    }
+    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;
+        }
+        const spanStyle = span.style;
+        if (spanStyle != null && typeof spanStyle === "object" && !Array.isArray(spanStyle)) {
+          scanStyleStringsForUrl(
+            spanStyle,
+            `${path}.spans[${i}].style`,
+            errors
+          );
+        }
       }
     }
     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);
+    if (responsive != null && typeof responsive === "object" && !Array.isArray(responsive)) {
+      scanForRefs(responsive, `${path}.responsive`, errors);
     }
   });
   for (const mode of RESPONSIVE_MODES) {
-    validateEffectiveStylesForMode(mode, views, cardStyles, errors, seen);
+    validateEffectiveStylesForMode(mode, views, cardStyles, fragments, errors, seen);
   }
   return errors;
 }
@@ -1417,8 +1956,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;
@@ -1437,6 +1975,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(".");
@@ -1471,74 +2057,53 @@ function resolveRefFromState2(refPath, state) {
   }
   return current;
 }
-function countTemplateMetrics(template, cardStyles) {
+function countTemplateMetrics(template, cardStyles, fragments) {
   const result = {
     nodes: 0,
     textBytes: 0,
     styleBytes: 0,
     overflowAutoCount: {
       default: 0,
+      medium: 0,
       compact: 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);
-    }
-  }
-  {
-    const baseStyleForBytes = getEffectiveStyleForMode(
-      node,
-      cardStyles,
-      "default"
-    );
-    if (baseStyleForBytes) {
-      result.styleBytes += utf8ByteLength(JSON.stringify(baseStyleForBytes));
-    }
-    const compactStyleForBytes = getMergedCompactResponsiveStyle(
-      node,
-      cardStyles
-    );
-    if (compactStyleForBytes) {
-      result.styleBytes += utf8ByteLength(JSON.stringify(compactStyleForBytes));
-    }
-    for (const mode of RESPONSIVE_MODES) {
-      const effectiveStyle = getEffectiveStyleForMode(
+  traverseCard(
+    { __template: template },
+    (node) => {
+      result.nodes += 1;
+      if (node.type === "Text") {
+        result.textBytes += countTextNodeLiteralBytes(node);
+        result.styleBytes += countTextSpanStyleBytes(node);
+      }
+      const baseStyleForBytes = getEffectiveStyleForMode(
         node,
         cardStyles,
-        mode
+        "default"
       );
-      if (effectiveStyle?.overflow === "auto") {
-        result.overflowAutoCount[mode]++;
+      if (baseStyleForBytes) {
+        result.styleBytes += utf8ByteLength(JSON.stringify(baseStyleForBytes));
+      }
+      for (const mode of ["medium", "compact"]) {
+        const responsiveStyleForBytes = getMergedResponsiveStyleOverride(
+          node,
+          cardStyles,
+          mode
+        );
+        if (responsiveStyleForBytes) {
+          result.styleBytes += utf8ByteLength(JSON.stringify(responsiveStyleForBytes));
+        }
       }
-    }
-  }
-  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;
       for (const mode of RESPONSIVE_MODES) {
-        result.overflowAutoCount[mode] += childMetrics.overflowAutoCount[mode];
+        const effectiveStyle = getEffectiveStyleForMode(node, cardStyles, mode);
+        if (effectiveStyle?.overflow === "auto") {
+          result.overflowAutoCount[mode]++;
+        }
       }
-    }
-  } 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;
-    for (const mode of RESPONSIVE_MODES) {
-      result.overflowAutoCount[mode] += innerMetrics.overflowAutoCount[mode];
-    }
-  }
+    },
+    void 0,
+    fragments
+  );
   return result;
 }
 function validateLimits(card) {
@@ -1548,15 +2113,14 @@ function validateLimits(card) {
   let styleObjectsBytes = 0;
   const overflowAutoCount = {
     default: 0,
+    medium: 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);
     }
     {
       const baseStyleForBytes = getEffectiveStyleForMode(
@@ -1567,12 +2131,15 @@ function validateLimits(card) {
       if (baseStyleForBytes) {
         styleObjectsBytes += utf8ByteLength(JSON.stringify(baseStyleForBytes));
       }
-      const compactStyleForBytes = getMergedCompactResponsiveStyle(
-        node,
-        card.cardStyles
-      );
-      if (compactStyleForBytes) {
-        styleObjectsBytes += utf8ByteLength(JSON.stringify(compactStyleForBytes));
+      for (const mode of ["medium", "compact"]) {
+        const responsiveStyleForBytes = getMergedResponsiveStyleOverride(
+          node,
+          card.cardStyles,
+          mode
+        );
+        if (responsiveStyleForBytes) {
+          styleObjectsBytes += utf8ByteLength(JSON.stringify(responsiveStyleForBytes));
+        }
       }
     }
     const children = node.children;
@@ -1611,7 +2178,7 @@ 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;
@@ -1647,7 +2214,7 @@ function validateLimits(card) {
         )
       );
     }
-  });
+  }, void 0, card.fragments);
   if (nodeCount > MAX_NODE_COUNT) {
     errors.push(
       createError(
@@ -1713,17 +2280,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) {
@@ -1766,6 +2342,8 @@ export {
   traverseNode,
   validResult,
   validate,
+  validateConditions,
+  validateFragments,
   validateLimits,
   validateNodes,
   validateRaw,