{
  "schemaVersion": "10.0",
  "name": "Kitchen Sink Demo",
  "description": "Comprehensive reference template demonstrating all field types, validation rules, config options, repeatable groups, AST conditional visibility (rules and rulesets), link and text field helpers with {{ expression }} syntax, and the location field.",
  "title": {
    "label": "Demo Title",
    "description": "Main title — demonstrates title config with color and validation",
    "placeholder": "Enter a demonstration title...",
    "color": "#607D8B",
    "constraints": {
      "required": {
        "value": true,
        "message": "Title is required"
      },
      "minLength": {
        "value": 3,
        "message": "Title must be at least 3 characters"
      },
      "maxLength": {
        "value": 256,
        "message": "Title must be 256 characters or less"
      }
    }
  },
  "sections": [
    {
      "id": "textFields",
      "label": "Text Fields",
      "description": "text, multiline, richText, and contentJson field types",
      "fields": [
        {
          "id": "textRequired",
          "label": "Text (required, pattern)",
          "type": "text",
          "description": "Required text field with regex pattern validation (letters and spaces only)",
          "placeholder": "Jane Doe",
          "constraints": {
            "required": {
              "value": true,
              "message": "This field is required"
            },
            "pattern": {
              "value": "^[a-zA-Z\\s]+$",
              "message": "Letters and spaces only"
            },
            "maxLength": {
              "value": 100,
              "message": "Must be 100 characters or less"
            }
          }
        },
        {
          "id": "textWithDefault",
          "label": "Text (default value)",
          "type": "text",
          "description": "Text field with a default value pre-filled",
          "props": {
            "defaultValue": "Default text"
          },
          "constraints": {}
        },
        {
          "id": "multilineField",
          "label": "Multiline (minLength + maxLength)",
          "type": "multiline",
          "description": "Multi-line text with both min and max length constraints",
          "placeholder": "Enter multiple lines of text...",
          "constraints": {
            "minLength": {
              "value": 10,
              "message": "Must be at least 10 characters"
            },
            "maxLength": {
              "value": 500,
              "message": "Must be 500 characters or less"
            }
          }
        },
        {
          "id": "htmlContent",
          "label": "HTML Content (required)",
          "type": "richText",
          "description": "Rich text editor with HTML formatting",
          "props": {
            "outputFormat": "html"
          },
          "constraints": {
            "required": {
              "value": true,
              "message": "HTML content is required"
            }
          }
        },
        {
          "id": "jsonContent",
          "label": "JSON Content",
          "type": "contentJson",
          "description": "Structured JSON data editor",
          "placeholder": "{ \"key\": \"value\" }",
          "constraints": {}
        }
      ],
      "color": "#2196F3"
    },
    {
      "id": "numericFields",
      "label": "Numeric Fields",
      "description": "integer and decimal field types with min/max/precision validation",
      "fields": [
        {
          "id": "integerField",
          "label": "Integer (min/max)",
          "type": "integer",
          "description": "Integer constrained to 1-100 range",
          "placeholder": "50",
          "constraints": {
            "required": {
              "value": true,
              "message": "Integer is required"
            },
            "min": {
              "value": 1,
              "message": "Must be at least 1"
            },
            "max": {
              "value": 100,
              "message": "Cannot exceed 100"
            }
          }
        },
        {
          "id": "integerWithDefault",
          "label": "Integer (default value)",
          "type": "integer",
          "description": "Integer with default value of 10",
          "props": {
            "defaultValue": 10
          },
          "constraints": {
            "min": {
              "value": 0,
              "message": "Cannot be negative"
            }
          }
        },
        {
          "id": "decimalField",
          "label": "Decimal (precision)",
          "type": "decimal",
          "description": "Decimal with 2-digit precision and range constraint",
          "placeholder": "19.99",
          "constraints": {
            "required": {
              "value": true,
              "message": "Decimal is required"
            },
            "min": {
              "value": 0,
              "message": "Must be zero or greater"
            },
            "max": {
              "value": 9999.99,
              "message": "Cannot exceed 9999.99"
            },
            "precision": {
              "value": 2,
              "message": "Maximum 2 decimal places"
            }
          }
        }
      ],
      "color": "#4CAF50"
    },
    {
      "id": "selectionFields",
      "label": "Selection & Boolean Fields",
      "description": "select dropdown and boolean toggle field types",
      "fields": [
        {
          "id": "selectRequired",
          "label": "Select (required)",
          "type": "select",
          "description": "Required dropdown — controls visibility of conditional groups below",
          "props": {
            "options": [
              "Option A",
              "Option B",
              "Option C"
            ]
          },
          "constraints": {
            "required": {
              "value": true,
              "message": "You must select an option"
            }
          }
        },
        {
          "id": "selectWithDefault",
          "label": "Select (default value)",
          "type": "select",
          "description": "Dropdown with pre-selected default",
          "props": {
            "defaultValue": "Medium",
            "options": [
              "Low",
              "Medium",
              "High",
              "Critical"
            ]
          },
          "constraints": {}
        },
        {
          "id": "booleanField",
          "label": "Boolean (toggle)",
          "type": "boolean",
          "description": "Simple toggle switch",
          "constraints": {}
        },
        {
          "id": "booleanDefaultTrue",
          "label": "Boolean (default true)",
          "type": "boolean",
          "description": "Toggle defaulting to on",
          "props": {
            "defaultValue": true
          },
          "constraints": {}
        }
      ],
      "color": "#FF9800"
    },
    {
      "id": "datetimeFields",
      "label": "Date & Time Fields",
      "description": "datetime field type — required and optional",
      "fields": [
        {
          "id": "datetimeRequired",
          "label": "DateTime (required)",
          "type": "datetime",
          "description": "Required date and time picker",
          "constraints": {
            "required": {
              "value": true,
              "message": "Date and time are required"
            }
          }
        },
        {
          "id": "datetimeOptional",
          "label": "DateTime (optional)",
          "type": "datetime",
          "description": "Optional date and time picker",
          "constraints": {}
        }
      ],
      "color": "#9C27B0"
    },
    {
      "id": "linkFields",
      "label": "Link Fields & Helpers",
      "description": "link and text field helpers using {{ $field | @transform | 'default' }} syntax — demonstrates @encode, @slug, @uuid, cross-section field references, defaults, and multi-expression templates",
      "fields": [
        {
          "id": "linkRequired",
          "label": "Link (required)",
          "type": "link",
          "description": "Required URL field",
          "placeholder": "https://example.com",
          "constraints": {
            "required": {
              "value": true,
              "message": "URL is required"
            }
          }
        },
        {
          "id": "videoLink",
          "label": "YouTube Search (link helper, cross-section $title)",
          "type": "link",
          "description": "Demonstrates referencing $title from another section and a default — button stays active even when title is empty",
          "placeholder": "https://youtube.com/...",
          "helper": {
            "label": "Search YouTube",
            "template": "https://www.youtube.com/results?search_query={{ $title | @encode | 'flarebuilder' }}"
          },
          "constraints": {}
        },
        {
          "id": "placeName",
          "label": "Place Name",
          "type": "text",
          "description": "Location name used by the mapLink helper below — button is disabled until this field has a value",
          "placeholder": "Eiffel Tower, Paris",
          "constraints": {}
        },
        {
          "id": "mapLink",
          "label": "Map Link (link helper, @encode)",
          "type": "link",
          "description": "Google Maps URL built from placeName — demonstrates @encode and a required field token (no default)",
          "helper": {
            "label": "Google Maps",
            "template": "https://www.google.com/maps/search/?api=1&query={{ $placeName | @encode }}"
          },
          "constraints": {}
        },
        {
          "id": "slug",
          "label": "URL Slug (text helper, @slug + default)",
          "type": "text",
          "description": "Text field with a helper — demonstrates @slug transform and a default value ('untitled'). Button is always active.",
          "helper": {
            "label": "Generate from title",
            "template": "{{ $title | @slug | 'untitled' }}"
          },
          "constraints": {}
        },
        {
          "id": "externalId",
          "label": "External ID (text helper, @slug + @uuid)",
          "type": "text",
          "description": "Multi-expression template combining a slugified title with a fresh UUID — demonstrates chaining and function-only tokens",
          "helper": {
            "label": "Generate ID",
            "template": "{{ $title | @slug | 'item' }}-{{ @uuid }}"
          },
          "constraints": {}
        }
      ],
      "color": "#00BCD4"
    },
    {
      "id": "mediaFields",
      "label": "Media Fields",
      "description": "image (single) and media (multi-upload) field types with allowedTypes and maxItems",
      "fields": [
        {
          "id": "imageRequired",
          "label": "Image (required)",
          "type": "image",
          "description": "Required single image upload",
          "constraints": {
            "required": {
              "value": true,
              "message": "Image is required"
            }
          }
        },
        {
          "id": "imageOptional",
          "label": "Image (optional)",
          "type": "image",
          "description": "Optional single image",
          "constraints": {}
        },
        {
          "id": "mediaGallery",
          "label": "Media Gallery (validated)",
          "type": "media",
          "description": "Multi-upload with minItems, maxItems, and file type constraints",
          "constraints": {
            "minItems": {
              "value": 1,
              "message": "At least 1 file required"
            },
            "maxItems": {
              "value": 5,
              "message": "Maximum 5 files"
            },
            "allowedTypes": {
              "value": [
                "jpg",
                "jpeg",
                "png",
                "webp"
              ],
              "message": "Only JPG, PNG, and WebP allowed"
            }
          }
        },
        {
          "id": "mediaOpen",
          "label": "Media Gallery (no validation)",
          "type": "media",
          "description": "Open multi-upload without restrictions",
          "constraints": {}
        }
      ],
      "color": "#E91E63"
    },
    {
      "id": "locationField",
      "label": "Location Field",
      "description": "Dedicated location field type with latitude, longitude, and optional altitude",
      "fields": [
        {
          "id": "locationBasic",
          "label": "Location (lat/lon only)",
          "type": "location",
          "description": "Location field without altitude — default config",
          "constraints": {}
        },
        {
          "id": "locationWithAltitude",
          "label": "Location (with altitude)",
          "type": "location",
          "description": "Location field with altitude enabled via props.includeAltitude",
          "props": {
            "includeAltitude": true
          },
          "constraints": {
            "altMin": {
              "value": -500,
              "message": "Altitude must be above -500m"
            },
            "altMax": {
              "value": 9000,
              "message": "Altitude must be below 9000m"
            }
          }
        }
      ],
      "color": "#8D6E63"
    },
    {
      "id": "fieldGroups",
      "label": "Field Groups",
      "description": "Field groups semantically collect related fields under a single ID. They are always a single instance and support `props.inline` for side-by-side layout.",
      "fields": [
        {
          "id": "dimensions",
          "label": "Dimensions (inline group)",
          "type": "group",
          "description": "Three related fields displayed side-by-side using `props.inline: true`",
          "props": {
            "inline": true
          },
          "fields": [
            {
              "id": "width",
              "label": "Width (cm)",
              "type": "decimal",
              "placeholder": "10.0",
              "constraints": {
                "min": {
                  "value": 0,
                  "message": "Width must be positive"
                }
              }
            },
            {
              "id": "height",
              "label": "Height (cm)",
              "type": "decimal",
              "placeholder": "10.0",
              "constraints": {
                "min": {
                  "value": 0,
                  "message": "Height must be positive"
                }
              }
            },
            {
              "id": "depth",
              "label": "Depth (cm)",
              "type": "decimal",
              "placeholder": "10.0",
              "constraints": {
                "min": {
                  "value": 0,
                  "message": "Depth must be positive"
                }
              }
            }
          ]
        },
        {
          "id": "contact",
          "label": "Contact Details (stacked group)",
          "type": "group",
          "description": "A group without inline — fields stack vertically (the default)",
          "fields": [
            {
              "id": "email",
              "label": "Email",
              "type": "text",
              "placeholder": "contact@example.com",
              "constraints": {}
            },
            {
              "id": "phone",
              "label": "Phone",
              "type": "text",
              "placeholder": "+1 555-555-5555",
              "constraints": {}
            }
          ]
        }
      ],
      "color": "#546E7A"
    },
    {
      "id": "blocks",
      "label": "Repeatable Groups",
      "description": "Non-repeatable and repeatable groups with min/max validation",
      "fields": [
        {
          "id": "address",
          "label": "Address (non-repeatable group)",
          "type": "group",
          "description": "A simple non-repeatable group — no min/max",
          "fields": [
            {
              "id": "street",
              "label": "Street",
              "type": "text",
              "placeholder": "123 Main St",
              "constraints": {}
            },
            {
              "id": "city",
              "label": "City",
              "type": "text",
              "placeholder": "San Francisco",
              "constraints": {}
            },
            {
              "id": "zip",
              "label": "Postal Code",
              "type": "text",
              "placeholder": "94103",
              "constraints": {}
            }
          ]
        },
        {
          "id": "teamMembers",
          "label": "Team Members (repeatable, 1-5)",
          "type": "group",
          "description": "Repeatable group — validations.minItems/maxItems control allowed item count",
          "fields": [
            {
              "id": "name",
              "label": "Name",
              "type": "text",
              "placeholder": "Jane Doe",
              "constraints": {
                "required": {
                  "value": true,
                  "message": "Name is required"
                }
              }
            },
            {
              "id": "role",
              "label": "Role",
              "type": "select",
              "props": {
                "options": [
                  "Developer",
                  "Designer",
                  "Product Manager",
                  "Marketing"
                ]
              },
              "constraints": {}
            },
            {
              "id": "bio",
              "label": "Bio",
              "type": "multiline",
              "placeholder": "Short bio...",
              "constraints": {
                "maxLength": {
                  "value": 200,
                  "message": "Bio must be 200 characters or less"
                }
              }
            }
          ],
          "constraints": {
            "minItems": {
              "value": 1,
              "message": "At least one team member required"
            },
            "maxItems": {
              "value": 5,
              "message": "Maximum 5 team members"
            }
          },
          "repeatable": true
        },
        {
          "id": "links",
          "label": "Links (repeatable, 0-10)",
          "type": "group",
          "description": "Repeatable group with no minimum — validations.maxItems only",
          "fields": [
            {
              "id": "label",
              "label": "Label",
              "type": "text",
              "placeholder": "GitHub",
              "constraints": {
                "required": {
                  "value": true,
                  "message": "Label is required"
                }
              }
            },
            {
              "id": "url",
              "label": "URL",
              "type": "link",
              "placeholder": "https://...",
              "constraints": {
                "required": {
                  "value": true,
                  "message": "URL is required"
                }
              }
            }
          ],
          "constraints": {
            "maxItems": {
              "value": 10,
              "message": "Maximum 10 links"
            }
          },
          "repeatable": true
        }
      ],
      "color": "#795548"
    },
    {
      "id": "conditionalSection",
      "label": "Conditional Section",
      "description": "This entire section is only visible when selectRequired has a value (section-level conditionals.visibility with 'exists' operator)",
      "conditionals": {
        "visibility": {
          "type": "rule",
          "field": "selectRequired",
          "operator": "exists"
        }
      },
      "fields": [
        {
          "id": "conditionalNote",
          "label": "Note",
          "type": "text",
          "description": "This field only appears because you selected an option above",
          "constraints": {}
        },
        {
          "id": "optionADetails",
          "label": "Option A Details",
          "type": "group",
          "description": "Shown only when selectRequired contains 'Option A' (group-level conditionals.visibility, 'contains' operator)",
          "conditionals": {
            "visibility": {
              "type": "rule",
              "field": "selectRequired",
              "operator": "contains",
              "value": "Option A"
            }
          },
          "fields": [
            {
              "id": "detailA",
              "label": "Details for A",
              "type": "multiline",
              "description": "Additional context for Option A",
              "constraints": {}
            }
          ]
        },
        {
          "id": "optionBcDetails",
          "label": "Option B/C Details",
          "type": "group",
          "description": "Shown when selectRequired equals 'Option B' or 'Option C' (ruleset with || combinator)",
          "conditionals": {
            "visibility": {
              "type": "ruleset",
              "combinator": "||",
              "children": [
                {
                  "type": "rule",
                  "field": "selectRequired",
                  "operator": "equals",
                  "value": "Option B"
                },
                {
                  "type": "rule",
                  "field": "selectRequired",
                  "operator": "equals",
                  "value": "Option C"
                }
              ]
            }
          },
          "fields": [
            {
              "id": "detailBc",
              "label": "Details for B or C",
              "type": "multiline",
              "description": "Additional context for Option B or C",
              "constraints": {}
            }
          ]
        },
        {
          "id": "numericThreshold",
          "label": "Score",
          "type": "integer",
          "description": "Enter a score — conditional groups below use lessThan/greaterThan operators",
          "placeholder": "50",
          "constraints": {
            "min": {
              "value": 0,
              "message": "Score cannot be negative"
            },
            "max": {
              "value": 100,
              "message": "Score cannot exceed 100"
            }
          }
        },
        {
          "id": "lowScoreGroup",
          "label": "Low Score Feedback",
          "type": "group",
          "description": "Shown when score < 50 ('lessThan' operator)",
          "conditionals": {
            "visibility": {
              "type": "rule",
              "field": "numericThreshold",
              "operator": "lessThan",
              "value": 50
            }
          },
          "fields": [
            {
              "id": "improvement",
              "label": "Areas for Improvement",
              "type": "multiline",
              "constraints": {}
            }
          ]
        },
        {
          "id": "highScoreGroup",
          "label": "High Score Recognition",
          "type": "group",
          "description": "Shown when score > 80 ('greaterThan' operator)",
          "conditionals": {
            "visibility": {
              "type": "rule",
              "field": "numericThreshold",
              "operator": "greaterThan",
              "value": 80
            }
          },
          "fields": [
            {
              "id": "achievement",
              "label": "Achievement Note",
              "type": "text",
              "constraints": {}
            }
          ]
        }
      ],
      "color": "#9E9E9E"
    },
    {
      "id": "collapsibleSection",
      "label": "Collapsible Section",
      "description": "Demonstrates config.collapsible — this section starts collapsed in the content editor",
      "fields": [
        {
          "id": "notes",
          "label": "Internal Notes",
          "type": "multiline",
          "description": "Notes that are tucked away in a collapsible section",
          "placeholder": "Internal notes, not shown publicly...",
          "constraints": {}
        }
      ],
      "color": "#8BC34A",
      "collapsible": true
    }
  ]
}