{
  "name": "TextBox",
  "description": "Flexible text composition component with animated title and description.",
  "constraints": {
    "textRules": {
      "title": {
        "required": true,
        "example": "Welcome to Our Platform",
        "minChars": 2,
        "maxChars": 100
      },
      "description": {
        "required": true,
        "example": "Discover amazing features and capabilities",
        "minChars": 5,
        "maxChars": 500
      },
      "tag": {
        "required": false,
        "example": "New",
        "minChars": 2,
        "maxChars": 30
      }
    }
  },
  "propsSchema": {
    "title": "string",
    "description": "string",
    "type?": "'entrance-slide' | 'reveal-blur' | 'background-highlight'",
    "textboxLayout?": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (default: 'default')",
    "center?": "boolean (default: false)",
    "tag?": "string",
    "tagIcon?": "LucideIcon",
    "titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }>",
    "useInvertedBackground?": "'noInvert' | 'invertDefault'",
    "titleImageWrapperClassName?": "string",
    "titleImageClassName?": "string",
    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
    "duration?": "number (default: 1)",
    "start?": "string (default: 'top 80%')",
    "end?": "string (default: 'top 20%')",
    "gradientColors?": "{ from: string, to: string }",
    "children?": "React.ReactNode",
    "className?": "string",
    "avatars?": "Array<{ src: string, alt?: string }> - User avatar images",
    "avatarText?": "string"
  },
  "usageExample": "<TextBox title=\"Welcome\" description=\"Get started with our platform today\" buttons={[{ text: 'Learn More', href: 'about' }]} center={true} />",
  "do": [
    "Use for general use",
    "Requires buttons?[]",
    "Requires avatars?[]"
  ],
  "dont": [],
  "editRules": {
    "textOnly": true,
    "layoutLocked": true,
    "styleLocked": true
  }
}