@safe-ugc-ui/types 0.6.0 → 1.1.0

package/dist/index.js

@@ -3,6 +3,21 @@ import { z } from "zod";
 var refSchema = z.object({
   $ref: z.string()
 });
+var templatePartSchema = z.union([
+  z.string(),
+  z.number(),
+  z.boolean(),
+  z.null(),
+  refSchema
+]);
+var templateValueSchema = z.object({
+  $template: z.array(templatePartSchema).min(1)
+}).strict();
+var templatedStringSchema = z.union([
+  z.string(),
+  refSchema,
+  templateValueSchema
+]);
 var assetPathSchema = z.string().startsWith("@assets/");
 var colorSchema = z.string();
 var lengthSchema = z.union([z.number(), z.string()]);
@@ -20,12 +35,58 @@ function isRef(value) {
 function isDynamic(value) {
   return isRef(value);
 }
+function isTemplateValue(value) {
+  return typeof value === "object" && value !== null && "$template" in value && Array.isArray(value.$template);
+}
 function isAssetPath(value) {
   return typeof value === "string" && value.startsWith("@assets/");
 }
 
-// src/styles.ts
+// src/conditions.ts
 import { z as z2 } from "zod";
+var conditionOperandLiteralSchema = z2.union([
+  z2.string(),
+  z2.number(),
+  z2.boolean(),
+  z2.null()
+]);
+var conditionOperandSchema = z2.union([
+  conditionOperandLiteralSchema,
+  refSchema
+]);
+var comparisonConditionOpSchema = z2.enum([
+  "eq",
+  "ne",
+  "gt",
+  "gte",
+  "lt",
+  "lte"
+]);
+var comparisonConditionSchema = z2.object({
+  op: comparisonConditionOpSchema,
+  left: conditionOperandSchema,
+  right: conditionOperandSchema
+});
+var conditionSchema = z2.lazy(() => z2.union([
+  z2.boolean(),
+  refSchema,
+  z2.object({
+    op: z2.literal("not"),
+    value: conditionSchema
+  }),
+  z2.object({
+    op: z2.literal("and"),
+    values: z2.array(conditionSchema).min(1)
+  }),
+  z2.object({
+    op: z2.literal("or"),
+    values: z2.array(conditionSchema).min(1)
+  }),
+  comparisonConditionSchema
+]));
+
+// src/styles.ts
+import { z as z3 } from "zod";
 
 // src/constants.ts
 var CARD_JSON_MAX_BYTES = 1e6;
@@ -34,11 +95,14 @@ var STYLE_OBJECTS_TOTAL_MAX_BYTES = 1e5;
 var ASSET_INDIVIDUAL_MAX_BYTES = 5e6;
 var ASSET_TOTAL_MAX_BYTES = 5e7;
 var MAX_NODE_COUNT = 1e4;
+var MAX_INTERACTIVE_ITEMS = 16;
 var MAX_LOOP_ITERATIONS = 1e3;
 var MAX_NESTED_LOOPS = 2;
+var MAX_CONDITION_DEPTH = 5;
 var MAX_OVERFLOW_AUTO_COUNT = 2;
 var MAX_STACK_NESTING = 3;
 var COMPACT_BREAKPOINT_MAX_WIDTH = 480;
+var MEDIUM_BREAKPOINT_MAX_WIDTH = 768;
 var ZINDEX_MIN = 0;
 var ZINDEX_MAX = 100;
 var TRANSFORM_SCALE_MIN = 0.1;
@@ -55,6 +119,7 @@ var ALLOWED_FONT_FAMILIES = [
   "display",
   "handwriting"
 ];
+var ASPECT_RATIO_PATTERN = /^\s*[0-9]+(\.[0-9]+)?\s*\/\s*[0-9]+(\.[0-9]+)?\s*$/;
 var TEXT_SHADOW_MAX_COUNT = 5;
 var TEXT_SHADOW_BLUR_MAX = 100;
 var BOX_SHADOW_MAX_COUNT = 5;
@@ -65,6 +130,7 @@ var LETTER_SPACING_MIN = -10;
 var LETTER_SPACING_MAX = 50;
 var OPACITY_MIN = 0;
 var OPACITY_MAX = 1;
+var BACKDROP_BLUR_MAX = 40;
 var TRANSITION_DURATION_MAX = 2e3;
 var TRANSITION_DELAY_MAX = 1e3;
 var TRANSITION_MAX_COUNT = 10;
@@ -150,7 +216,9 @@ var ALL_COMPONENT_TYPES = [
   "Chip",
   // 2.4 Interaction (optional)
   "Button",
-  "Toggle"
+  "Toggle",
+  "Accordion",
+  "Tabs"
 ];
 var FORBIDDEN_STYLE_PROPERTIES = [
   "backgroundImage",
@@ -162,7 +230,6 @@ var FORBIDDEN_STYLE_PROPERTIES = [
   "mixBlendMode",
   "animation",
   "transition",
-  "clipPath",
   "mask"
 ];
 var FORBIDDEN_POSITION_VALUES = ["fixed", "sticky"];
@@ -331,71 +398,93 @@ var CSS_NAMED_COLORS = /* @__PURE__ */ new Set([
 ]);
 
 // src/styles.ts
-var gradientStopSchema = z2.object({
-  color: dynamicSchema(z2.string()),
-  position: dynamicSchema(z2.string())
+var gradientStopSchema = z3.object({
+  color: dynamicSchema(z3.string()),
+  position: dynamicSchema(z3.string())
   // e.g. "0%", "100%"
 });
-var linearGradientSchema = z2.object({
-  type: z2.literal("linear"),
-  direction: dynamicSchema(z2.string()),
+var linearGradientSchema = z3.object({
+  type: z3.literal("linear"),
+  direction: dynamicSchema(z3.string()),
   // e.g. "135deg", "to right"
-  stops: z2.array(gradientStopSchema)
+  stops: z3.array(gradientStopSchema)
 });
-var radialGradientSchema = z2.object({
-  type: z2.literal("radial"),
-  stops: z2.array(gradientStopSchema)
+var radialGradientSchema = z3.object({
+  type: z3.literal("radial"),
+  stops: z3.array(gradientStopSchema)
 });
-var repeatingLinearGradientSchema = z2.object({
-  type: z2.literal("repeating-linear"),
-  direction: dynamicSchema(z2.string()),
+var repeatingLinearGradientSchema = z3.object({
+  type: z3.literal("repeating-linear"),
+  direction: dynamicSchema(z3.string()),
   // e.g. "180deg"
-  stops: z2.array(gradientStopSchema)
+  stops: z3.array(gradientStopSchema)
 });
-var gradientObjectSchema = z2.union([
+var gradientObjectSchema = z3.union([
   linearGradientSchema,
   radialGradientSchema,
   repeatingLinearGradientSchema
 ]);
-var shadowObjectSchema = z2.object({
-  offsetX: dynamicSchema(z2.number()),
-  offsetY: dynamicSchema(z2.number()),
-  blur: dynamicSchema(z2.number()).optional(),
-  spread: dynamicSchema(z2.number()).optional(),
-  color: dynamicSchema(z2.string())
-});
-var textShadowObjectSchema = z2.object({
-  offsetX: dynamicSchema(z2.number()),
-  offsetY: dynamicSchema(z2.number()),
-  blur: dynamicSchema(z2.number()).optional(),
-  color: dynamicSchema(z2.string())
-});
-var borderStyleValueSchema = z2.enum(["solid", "dashed", "dotted", "none"]);
-var borderObjectSchema = z2.object({
-  width: dynamicSchema(z2.number()),
+var shadowObjectSchema = z3.object({
+  offsetX: dynamicSchema(z3.number()),
+  offsetY: dynamicSchema(z3.number()),
+  blur: dynamicSchema(z3.number()).optional(),
+  spread: dynamicSchema(z3.number()).optional(),
+  color: dynamicSchema(z3.string())
+});
+var textShadowObjectSchema = z3.object({
+  offsetX: dynamicSchema(z3.number()),
+  offsetY: dynamicSchema(z3.number()),
+  blur: dynamicSchema(z3.number()).optional(),
+  color: dynamicSchema(z3.string())
+});
+var borderStyleValueSchema = z3.enum(["solid", "dashed", "dotted", "none"]);
+var borderObjectSchema = z3.object({
+  width: dynamicSchema(z3.number()),
   style: dynamicSchema(borderStyleValueSchema),
-  color: dynamicSchema(z2.string())
+  color: dynamicSchema(z3.string())
 });
-var transformObjectSchema = z2.object({
-  rotate: dynamicSchema(z2.string()).optional(),
+var transformObjectSchema = z3.object({
+  rotate: dynamicSchema(z3.string()).optional(),
   // e.g. "45deg"
-  scale: dynamicSchema(z2.number()).optional(),
+  scale: dynamicSchema(z3.number()).optional(),
   // 0.1 ~ 1.5
-  translateX: dynamicSchema(z2.number()).optional(),
+  translateX: dynamicSchema(z3.number()).optional(),
   // -500 ~ 500
-  translateY: dynamicSchema(z2.number()).optional()
+  translateY: dynamicSchema(z3.number()).optional()
   // -500 ~ 500
 });
-var positionValueSchema = z2.enum(["static", "relative", "absolute"]);
-var overflowValueSchema = z2.enum(["visible", "hidden", "auto"]);
-var displayValueSchema = z2.enum(["flex", "block", "none"]);
-var flexDirectionValueSchema = z2.enum([
+var clipPathCircleSchema = z3.object({
+  type: z3.literal("circle"),
+  radius: dynamicSchema(lengthSchema)
+}).strict();
+var clipPathEllipseSchema = z3.object({
+  type: z3.literal("ellipse"),
+  rx: dynamicSchema(lengthSchema),
+  ry: dynamicSchema(lengthSchema)
+}).strict();
+var clipPathInsetSchema = z3.object({
+  type: z3.literal("inset"),
+  top: dynamicSchema(lengthSchema),
+  right: dynamicSchema(lengthSchema),
+  bottom: dynamicSchema(lengthSchema),
+  left: dynamicSchema(lengthSchema),
+  round: dynamicSchema(lengthSchema).optional()
+}).strict();
+var clipPathObjectSchema = z3.union([
+  clipPathCircleSchema,
+  clipPathEllipseSchema,
+  clipPathInsetSchema
+]);
+var positionValueSchema = z3.enum(["static", "relative", "absolute"]);
+var overflowValueSchema = z3.enum(["visible", "hidden", "auto"]);
+var displayValueSchema = z3.enum(["flex", "block", "none"]);
+var flexDirectionValueSchema = z3.enum([
   "row",
   "column",
   "row-reverse",
   "column-reverse"
 ]);
-var justifyContentValueSchema = z2.enum([
+var justifyContentValueSchema = z3.enum([
   "start",
   "flex-start",
   "center",
@@ -405,7 +494,7 @@ var justifyContentValueSchema = z2.enum([
   "space-around",
   "space-evenly"
 ]);
-var alignItemsValueSchema = z2.enum([
+var alignItemsValueSchema = z3.enum([
   "start",
   "flex-start",
   "center",
@@ -414,7 +503,7 @@ var alignItemsValueSchema = z2.enum([
   "stretch",
   "baseline"
 ]);
-var alignSelfValueSchema = z2.enum([
+var alignSelfValueSchema = z3.enum([
   "auto",
   "start",
   "flex-start",
@@ -423,57 +512,68 @@ var alignSelfValueSchema = z2.enum([
   "flex-end",
   "stretch"
 ]);
-var flexWrapValueSchema = z2.enum(["nowrap", "wrap", "wrap-reverse"]);
-var textAlignValueSchema = z2.enum([
+var flexWrapValueSchema = z3.enum(["nowrap", "wrap", "wrap-reverse"]);
+var textAlignValueSchema = z3.enum([
   "left",
   "center",
   "right",
   "justify"
 ]);
-var textDecorationValueSchema = z2.enum([
+var textDecorationValueSchema = z3.enum([
   "none",
   "underline",
   "line-through"
 ]);
-var fontStyleValueSchema = z2.enum(["normal", "italic"]);
-var fontFamilyValueSchema = z2.enum(ALLOWED_FONT_FAMILIES);
-var fontWeightValueSchema = z2.union([
-  z2.enum(["normal", "bold"]),
-  z2.literal("100"),
-  z2.literal("200"),
-  z2.literal("300"),
-  z2.literal("400"),
-  z2.literal("500"),
-  z2.literal("600"),
-  z2.literal("700"),
-  z2.literal("800"),
-  z2.literal("900"),
-  z2.literal(100),
-  z2.literal(200),
-  z2.literal(300),
-  z2.literal(400),
-  z2.literal(500),
-  z2.literal(600),
-  z2.literal(700),
-  z2.literal(800),
-  z2.literal(900)
+var fontStyleValueSchema = z3.enum(["normal", "italic"]);
+var fontFamilyValueSchema = z3.enum(ALLOWED_FONT_FAMILIES);
+var fontWeightValueSchema = z3.union([
+  z3.enum(["normal", "bold"]),
+  z3.literal("100"),
+  z3.literal("200"),
+  z3.literal("300"),
+  z3.literal("400"),
+  z3.literal("500"),
+  z3.literal("600"),
+  z3.literal("700"),
+  z3.literal("800"),
+  z3.literal("900"),
+  z3.literal(100),
+  z3.literal(200),
+  z3.literal(300),
+  z3.literal(400),
+  z3.literal(500),
+  z3.literal(600),
+  z3.literal(700),
+  z3.literal(800),
+  z3.literal(900)
 ]);
-var easingValueSchema = z2.enum([
+var easingValueSchema = z3.enum([
   "ease",
   "linear",
   "ease-in",
   "ease-out",
   "ease-in-out"
 ]);
-var transitionDefSchema = z2.object({
-  property: z2.string(),
-  duration: z2.number(),
+var transitionDefSchema = z3.object({
+  property: z3.string(),
+  duration: z3.number(),
   easing: easingValueSchema.optional(),
-  delay: z2.number().optional()
+  delay: z3.number().optional()
 });
-var transitionFieldSchema = z2.union([transitionDefSchema, z2.array(transitionDefSchema)]).optional();
-var sizeValueSchema = z2.union([lengthSchema, percentageSchema, z2.literal("auto")]);
-var lineHeightValueSchema = z2.union([z2.number(), lengthSchema]);
+var transitionFieldSchema = z3.union([transitionDefSchema, z3.array(transitionDefSchema)]).optional();
+var textSpanStyleSchema = z3.object({
+  backgroundColor: dynamicSchema(colorSchema).optional(),
+  color: dynamicSchema(colorSchema).optional(),
+  fontFamily: dynamicSchema(fontFamilyValueSchema).optional(),
+  fontSize: dynamicSchema(lengthSchema).optional(),
+  fontWeight: dynamicSchema(fontWeightValueSchema).optional(),
+  fontStyle: dynamicSchema(fontStyleValueSchema).optional(),
+  textDecoration: dynamicSchema(textDecorationValueSchema).optional(),
+  letterSpacing: dynamicSchema(lengthSchema).optional(),
+  textShadow: z3.union([textShadowObjectSchema, z3.array(textShadowObjectSchema)]).optional()
+}).strict();
+var sizeValueSchema = z3.union([lengthSchema, percentageSchema, z3.literal("auto")]);
+var lineHeightValueSchema = z3.union([z3.number(), lengthSchema]);
 var coreStyleShape = {
   // -----------------------------------------------------------------------
   // Layout — Dynamic
@@ -484,17 +584,21 @@ var coreStyleShape = {
   alignItems: dynamicSchema(alignItemsValueSchema).optional(),
   alignSelf: dynamicSchema(alignSelfValueSchema).optional(),
   flexWrap: dynamicSchema(flexWrapValueSchema).optional(),
-  flex: dynamicSchema(z2.number()).optional(),
+  flex: dynamicSchema(z3.number()).optional(),
   gap: dynamicSchema(lengthSchema).optional(),
   // -----------------------------------------------------------------------
   // Sizing — Dynamic
   // -----------------------------------------------------------------------
   width: dynamicSchema(sizeValueSchema).optional(),
   height: dynamicSchema(sizeValueSchema).optional(),
-  minWidth: dynamicSchema(z2.union([lengthSchema, percentageSchema])).optional(),
-  maxWidth: dynamicSchema(z2.union([lengthSchema, percentageSchema])).optional(),
-  minHeight: dynamicSchema(z2.union([lengthSchema, percentageSchema])).optional(),
-  maxHeight: dynamicSchema(z2.union([lengthSchema, percentageSchema])).optional(),
+  aspectRatio: dynamicSchema(z3.union([
+    z3.number().positive(),
+    z3.string().regex(ASPECT_RATIO_PATTERN)
+  ])).optional(),
+  minWidth: dynamicSchema(z3.union([lengthSchema, percentageSchema])).optional(),
+  maxWidth: dynamicSchema(z3.union([lengthSchema, percentageSchema])).optional(),
+  minHeight: dynamicSchema(z3.union([lengthSchema, percentageSchema])).optional(),
+  maxHeight: dynamicSchema(z3.union([lengthSchema, percentageSchema])).optional(),
   // -----------------------------------------------------------------------
   // Spacing — Dynamic
   // -----------------------------------------------------------------------
@@ -535,7 +639,8 @@ var coreStyleShape = {
   // -----------------------------------------------------------------------
   // Opacity — Dynamic
   // -----------------------------------------------------------------------
-  opacity: dynamicSchema(z2.number()).optional(),
+  opacity: dynamicSchema(z3.number()).optional(),
+  backdropBlur: dynamicSchema(z3.number()).optional(),
   // -----------------------------------------------------------------------
   // Gradient — Static only
   // -----------------------------------------------------------------------
@@ -543,11 +648,11 @@ var coreStyleShape = {
   // -----------------------------------------------------------------------
   // Shadow — Static only (single or array of shadows)
   // -----------------------------------------------------------------------
-  boxShadow: z2.union([shadowObjectSchema, z2.array(shadowObjectSchema)]).optional(),
+  boxShadow: z3.union([shadowObjectSchema, z3.array(shadowObjectSchema)]).optional(),
   // -----------------------------------------------------------------------
   // Text shadow — Static only (single or array of shadows)
   // -----------------------------------------------------------------------
-  textShadow: z2.union([textShadowObjectSchema, z2.array(textShadowObjectSchema)]).optional(),
+  textShadow: z3.union([textShadowObjectSchema, z3.array(textShadowObjectSchema)]).optional(),
   // -----------------------------------------------------------------------
   // Borders — Static only
   // -----------------------------------------------------------------------
@@ -560,6 +665,7 @@ var coreStyleShape = {
   // Transform — Static only (skew excluded)
   // -----------------------------------------------------------------------
   transform: transformObjectSchema.optional(),
+  clipPath: clipPathObjectSchema.optional(),
   // -----------------------------------------------------------------------
   // Overflow — Static only
   // -----------------------------------------------------------------------
@@ -575,184 +681,225 @@ var coreStyleShape = {
   // -----------------------------------------------------------------------
   // Object-fit — Dynamic (for Image nodes)
   // -----------------------------------------------------------------------
-  objectFit: dynamicSchema(z2.enum(["cover", "contain", "fill", "none", "scale-down"])).optional(),
-  objectPosition: dynamicSchema(z2.string()).optional(),
+  objectFit: dynamicSchema(z3.enum(["cover", "contain", "fill", "none", "scale-down"])).optional(),
+  objectPosition: dynamicSchema(z3.string()).optional(),
   // -----------------------------------------------------------------------
   // Grid — Dynamic
   // -----------------------------------------------------------------------
-  gridTemplateColumns: dynamicSchema(z2.string()).optional(),
-  gridTemplateRows: dynamicSchema(z2.string()).optional(),
-  gridColumn: dynamicSchema(z2.string()).optional(),
-  gridRow: dynamicSchema(z2.string()).optional(),
+  gridTemplateColumns: dynamicSchema(z3.string()).optional(),
+  gridTemplateRows: dynamicSchema(z3.string()).optional(),
+  gridColumn: dynamicSchema(z3.string()).optional(),
+  gridRow: dynamicSchema(z3.string()).optional(),
   // -----------------------------------------------------------------------
   // z-index — Static only (0-100 enforced at validation layer)
   // -----------------------------------------------------------------------
-  zIndex: z2.number().optional(),
+  zIndex: z3.number().optional(),
   // -----------------------------------------------------------------------
   // $style — reference to a named style in card.styles
   // -----------------------------------------------------------------------
-  $style: z2.string().optional()
+  $style: z3.string().optional()
 };
-var hoverStylePropsSchema = z2.object({
+var hoverStylePropsSchema = z3.object({
   ...coreStyleShape,
   transition: transitionFieldSchema
 });
-var responsiveStylePropsSchema = z2.object({
+var responsiveStylePropsSchema = z3.object({
   ...coreStyleShape
 });
-var responsivePropsSchema = z2.object({
+var responsivePropsSchema = z3.object({
+  medium: responsiveStylePropsSchema.optional(),
   compact: responsiveStylePropsSchema.optional()
 }).strict();
-var stylePropsSchema = z2.object({
+var stylePropsSchema = z3.object({
   ...coreStyleShape,
   hoverStyle: hoverStylePropsSchema.optional(),
   transition: transitionFieldSchema
 });
 
 // src/props.ts
-import { z as z3 } from "zod";
-var textPropsSchema = z3.object({
-  content: dynamicSchema(z3.string())
+import { z as z4 } from "zod";
+var textSpanSchema = z4.object({
+  text: templatedStringSchema,
+  style: textSpanStyleSchema.optional()
+}).strict();
+var textPropsSchema = z4.object({
+  content: templatedStringSchema.optional(),
+  spans: z4.array(textSpanSchema).min(1).max(32).optional(),
+  maxLines: z4.number().int().min(1).max(10).optional(),
+  truncate: z4.enum(["ellipsis", "clip"]).optional()
 });
-var imagePropsSchema = z3.object({
+var imagePropsSchema = z4.object({
   src: refOnlySchema(assetPathSchema),
-  alt: dynamicSchema(z3.string()).optional()
+  alt: dynamicSchema(z4.string()).optional()
 });
-var progressBarPropsSchema = z3.object({
-  value: dynamicSchema(z3.number()),
-  max: dynamicSchema(z3.number()),
+var progressBarPropsSchema = z4.object({
+  value: dynamicSchema(z4.number()),
+  max: dynamicSchema(z4.number()),
   color: dynamicSchema(colorSchema).optional()
 });
-var avatarPropsSchema = z3.object({
+var avatarPropsSchema = z4.object({
   src: refOnlySchema(assetPathSchema),
   size: dynamicSchema(lengthSchema).optional()
 });
-var iconPropsSchema = z3.object({
+var iconPropsSchema = z4.object({
   name: dynamicSchema(iconNameSchema),
   size: dynamicSchema(lengthSchema).optional(),
   color: dynamicSchema(colorSchema).optional()
 });
-var badgePropsSchema = z3.object({
-  label: dynamicSchema(z3.string()),
+var badgePropsSchema = z4.object({
+  label: templatedStringSchema,
   color: dynamicSchema(colorSchema).optional()
 });
-var chipPropsSchema = z3.object({
-  label: dynamicSchema(z3.string()),
+var chipPropsSchema = z4.object({
+  label: templatedStringSchema,
   color: dynamicSchema(colorSchema).optional()
 });
-var dividerPropsSchema = z3.object({
+var dividerPropsSchema = z4.object({
   color: dynamicSchema(colorSchema).optional(),
   thickness: dynamicSchema(lengthSchema).optional()
 });
-var spacerPropsSchema = z3.object({
+var spacerPropsSchema = z4.object({
   size: dynamicSchema(lengthSchema).optional()
 });
-var buttonPropsSchema = z3.object({
-  label: dynamicSchema(z3.string()),
-  action: z3.string()
+var buttonPropsSchema = z4.object({
+  label: templatedStringSchema,
+  action: z4.string(),
+  disabled: z4.union([z4.boolean(), refSchema]).optional()
 });
-var togglePropsSchema = z3.object({
-  value: dynamicSchema(z3.boolean()),
-  onToggle: z3.string()
+var togglePropsSchema = z4.object({
+  value: dynamicSchema(z4.boolean()),
+  onToggle: z4.string(),
+  disabled: dynamicSchema(z4.boolean()).optional()
 });
 
 // src/primitives.ts
-import { z as z4 } from "zod";
-var forLoopSchema = z4.object({
-  for: z4.string(),
-  in: z4.string(),
-  template: z4.lazy(() => ugcNodeSchema)
+import { z as z5 } from "zod";
+var fragmentUseNodeSchema = z5.object({
+  $use: z5.string(),
+  $if: conditionSchema.optional()
+}).strict();
+var forLoopSchema = z5.object({
+  for: z5.string(),
+  in: z5.string(),
+  template: z5.lazy(() => renderableNodeSchema)
 });
-var childrenSchema = z4.union([
-  z4.array(z4.lazy(() => ugcNodeSchema)),
+var childrenSchema = z5.union([
+  z5.array(z5.lazy(() => renderableNodeSchema)),
   forLoopSchema
 ]);
 var baseFields = {
+  $if: conditionSchema.optional(),
   style: stylePropsSchema.optional(),
   responsive: responsivePropsSchema.optional()
 };
-var boxNodeSchema = z4.object({
-  type: z4.literal("Box"),
+var boxNodeSchema = z5.object({
+  type: z5.literal("Box"),
   children: childrenSchema.optional(),
   ...baseFields
 });
-var rowNodeSchema = z4.object({
-  type: z4.literal("Row"),
+var rowNodeSchema = z5.object({
+  type: z5.literal("Row"),
   children: childrenSchema.optional(),
   ...baseFields
 });
-var columnNodeSchema = z4.object({
-  type: z4.literal("Column"),
+var columnNodeSchema = z5.object({
+  type: z5.literal("Column"),
   children: childrenSchema.optional(),
   ...baseFields
 });
-var stackNodeSchema = z4.object({
-  type: z4.literal("Stack"),
+var stackNodeSchema = z5.object({
+  type: z5.literal("Stack"),
   children: childrenSchema.optional(),
   ...baseFields
 });
-var gridNodeSchema = z4.object({
-  type: z4.literal("Grid"),
+var gridNodeSchema = z5.object({
+  type: z5.literal("Grid"),
   children: childrenSchema.optional(),
   ...baseFields
 });
-var textNodeSchema = z4.object({
-  type: z4.literal("Text"),
+var textNodeSchema = z5.object({
+  type: z5.literal("Text"),
   ...textPropsSchema.shape,
   ...baseFields
 });
-var imageNodeSchema = z4.object({
-  type: z4.literal("Image"),
+var imageNodeSchema = z5.object({
+  type: z5.literal("Image"),
   ...imagePropsSchema.shape,
   ...baseFields
 });
-var progressBarNodeSchema = z4.object({
-  type: z4.literal("ProgressBar"),
+var progressBarNodeSchema = z5.object({
+  type: z5.literal("ProgressBar"),
   ...progressBarPropsSchema.shape,
   ...baseFields
 });
-var avatarNodeSchema = z4.object({
-  type: z4.literal("Avatar"),
+var avatarNodeSchema = z5.object({
+  type: z5.literal("Avatar"),
   ...avatarPropsSchema.shape,
   ...baseFields
 });
-var iconNodeSchema = z4.object({
-  type: z4.literal("Icon"),
+var iconNodeSchema = z5.object({
+  type: z5.literal("Icon"),
   ...iconPropsSchema.shape,
   ...baseFields
 });
-var badgeNodeSchema = z4.object({
-  type: z4.literal("Badge"),
+var badgeNodeSchema = z5.object({
+  type: z5.literal("Badge"),
   ...badgePropsSchema.shape,
   ...baseFields
 });
-var chipNodeSchema = z4.object({
-  type: z4.literal("Chip"),
+var chipNodeSchema = z5.object({
+  type: z5.literal("Chip"),
   ...chipPropsSchema.shape,
   ...baseFields
 });
-var dividerNodeSchema = z4.object({
-  type: z4.literal("Divider"),
+var dividerNodeSchema = z5.object({
+  type: z5.literal("Divider"),
   ...dividerPropsSchema.shape,
   ...baseFields
 });
-var spacerNodeSchema = z4.object({
-  type: z4.literal("Spacer"),
+var spacerNodeSchema = z5.object({
+  type: z5.literal("Spacer"),
   ...spacerPropsSchema.shape,
   ...baseFields
 });
-var buttonNodeSchema = z4.object({
-  type: z4.literal("Button"),
+var buttonNodeSchema = z5.object({
+  type: z5.literal("Button"),
   ...buttonPropsSchema.shape,
   ...baseFields
 });
-var toggleNodeSchema = z4.object({
-  type: z4.literal("Toggle"),
+var toggleNodeSchema = z5.object({
+  type: z5.literal("Toggle"),
   ...togglePropsSchema.shape,
   ...baseFields
 });
-var ugcNodeSchema = z4.lazy(
-  () => z4.discriminatedUnion("type", [
+var interactiveItemIdSchema = z5.string().min(1).max(64);
+var accordionItemSchema = z5.object({
+  id: interactiveItemIdSchema,
+  label: templatedStringSchema,
+  content: z5.lazy(() => renderableNodeSchema),
+  disabled: dynamicSchema(z5.boolean()).optional()
+}).strict();
+var tabsItemSchema = z5.object({
+  id: interactiveItemIdSchema,
+  label: templatedStringSchema,
+  content: z5.lazy(() => renderableNodeSchema),
+  disabled: dynamicSchema(z5.boolean()).optional()
+}).strict();
+var accordionNodeSchema = z5.object({
+  type: z5.literal("Accordion"),
+  items: z5.array(accordionItemSchema).min(1).max(MAX_INTERACTIVE_ITEMS),
+  allowMultiple: z5.boolean().optional(),
+  defaultExpanded: z5.array(interactiveItemIdSchema).max(MAX_INTERACTIVE_ITEMS).optional(),
+  ...baseFields
+});
+var tabsNodeSchema = z5.object({
+  type: z5.literal("Tabs"),
+  tabs: z5.array(tabsItemSchema).min(1).max(MAX_INTERACTIVE_ITEMS),
+  defaultTab: interactiveItemIdSchema.optional(),
+  ...baseFields
+});
+var ugcNodeSchema = z5.lazy(
+  () => z5.discriminatedUnion("type", [
     boxNodeSchema,
     rowNodeSchema,
     columnNodeSchema,
@@ -768,11 +915,19 @@ var ugcNodeSchema = z4.lazy(
     dividerNodeSchema,
     spacerNodeSchema,
     buttonNodeSchema,
-    toggleNodeSchema
+    toggleNodeSchema,
+    accordionNodeSchema,
+    tabsNodeSchema
   ])
 );
-var phase1NodeSchema = z4.lazy(
-  () => z4.discriminatedUnion("type", [
+var renderableNodeSchema = z5.lazy(
+  () => z5.union([
+    ugcNodeSchema,
+    fragmentUseNodeSchema
+  ])
+);
+var phase1NodeSchema = z5.lazy(
+  () => z5.discriminatedUnion("type", [
     boxNodeSchema,
     rowNodeSchema,
     columnNodeSchema,
@@ -782,26 +937,29 @@ var phase1NodeSchema = z4.lazy(
 );
 
 // src/card.ts
-import { z as z5 } from "zod";
-var cardMetaSchema = z5.object({
-  name: z5.string(),
-  version: z5.string()
+import { z as z6 } from "zod";
+var cardMetaSchema = z6.object({
+  name: z6.string(),
+  version: z6.string()
 });
 var styleNamePattern = /^[A-Za-z][A-Za-z0-9_-]*$/;
-var ugcCardSchema = z5.object({
+var ugcCardSchema = z6.object({
   meta: cardMetaSchema,
-  assets: z5.record(z5.string(), z5.string()).optional(),
-  state: z5.record(z5.string(), z5.unknown()).optional(),
-  styles: z5.record(z5.string().regex(styleNamePattern), stylePropsSchema).optional(),
-  views: z5.record(z5.string(), ugcNodeSchema)
+  assets: z6.record(z6.string(), z6.string()).optional(),
+  state: z6.record(z6.string(), z6.unknown()).optional(),
+  styles: z6.record(z6.string().regex(styleNamePattern), stylePropsSchema).optional(),
+  fragments: z6.record(z6.string().regex(styleNamePattern), ugcNodeSchema).optional(),
+  views: z6.record(z6.string(), renderableNodeSchema)
 });
 export {
   ALLOWED_FONT_FAMILIES,
   ALLOWED_OVERFLOW_VALUES,
   ALLOWED_TRANSITION_PROPERTIES,
   ALL_COMPONENT_TYPES,
+  ASPECT_RATIO_PATTERN,
   ASSET_INDIVIDUAL_MAX_BYTES,
   ASSET_TOTAL_MAX_BYTES,
+  BACKDROP_BLUR_MAX,
   BORDER_RADIUS_MAX,
   BOX_SHADOW_BLUR_MAX,
   BOX_SHADOW_MAX_COUNT,
@@ -816,11 +974,14 @@ export {
   FORBIDDEN_STYLE_PROPERTIES,
   LETTER_SPACING_MAX,
   LETTER_SPACING_MIN,
+  MAX_CONDITION_DEPTH,
+  MAX_INTERACTIVE_ITEMS,
   MAX_LOOP_ITERATIONS,
   MAX_NESTED_LOOPS,
   MAX_NODE_COUNT,
   MAX_OVERFLOW_AUTO_COUNT,
   MAX_STACK_NESTING,
+  MEDIUM_BREAKPOINT_MAX_WIDTH,
   OPACITY_MAX,
   OPACITY_MIN,
   PHASE1_COMPONENT_TYPES,
@@ -838,6 +999,8 @@ export {
   TRANSITION_MAX_COUNT,
   ZINDEX_MAX,
   ZINDEX_MIN,
+  accordionItemSchema,
+  accordionNodeSchema,
   alignItemsValueSchema,
   alignSelfValueSchema,
   assetPathSchema,
@@ -853,8 +1016,17 @@ export {
   cardMetaSchema,
   chipNodeSchema,
   chipPropsSchema,
+  clipPathCircleSchema,
+  clipPathEllipseSchema,
+  clipPathInsetSchema,
+  clipPathObjectSchema,
   colorSchema,
   columnNodeSchema,
+  comparisonConditionOpSchema,
+  comparisonConditionSchema,
+  conditionOperandLiteralSchema,
+  conditionOperandSchema,
+  conditionSchema,
   displayValueSchema,
   dividerNodeSchema,
   dividerPropsSchema,
@@ -866,6 +1038,7 @@ export {
   fontStyleValueSchema,
   fontWeightValueSchema,
   forLoopSchema,
+  fragmentUseNodeSchema,
   gradientObjectSchema,
   gradientStopSchema,
   gridNodeSchema,
@@ -878,6 +1051,7 @@ export {
   isAssetPath,
   isDynamic,
   isRef,
+  isTemplateValue,
   justifyContentValueSchema,
   lengthSchema,
   linearGradientSchema,
@@ -890,6 +1064,7 @@ export {
   radialGradientSchema,
   refOnlySchema,
   refSchema,
+  renderableNodeSchema,
   repeatingLinearGradientSchema,
   responsivePropsSchema,
   responsiveStylePropsSchema,
@@ -899,11 +1074,18 @@ export {
   spacerPropsSchema,
   stackNodeSchema,
   stylePropsSchema,
+  tabsItemSchema,
+  tabsNodeSchema,
+  templatePartSchema,
+  templateValueSchema,
+  templatedStringSchema,
   textAlignValueSchema,
   textDecorationValueSchema,
   textNodeSchema,
   textPropsSchema,
   textShadowObjectSchema,
+  textSpanSchema,
+  textSpanStyleSchema,
   toggleNodeSchema,
   togglePropsSchema,
   transformObjectSchema,