content.json

{
  "sections": {
    "overview": {
      "title": "Overview",
      "type": "regular",
      "pages": {
        "overview": {
          "title": "Construct 3 Flexbox Layout Engine",
          "addonCards": [
            {
              "title": "UI Element",
              "description": "The core plugin that provides flexbox layout capabilities for individual UI objects with CSS-like styling",
              "icon": "Flexbox.png",
              "storeUrl": "https://www.construct.net/en/make-games/addons/1450/ui-element",
              "sourceUrl": "https://github.com/skymen/flexbox",
              "price": "Free"
            },
            {
              "title": "UI Controller",
              "description": "The management system that orchestrates layouts across multiple UI elements and handles style inheritance",
              "icon": "FlexboxController.png",
              "storeUrl": "https://www.construct.net/en/make-games/addons/1451/ui-controller",
              "sourceUrl": "https://github.com/skymen/flexboxController",
              "price": "Free"
            }
          ],
          "content": [
            "A powerful layout engine for Construct 3 that brings CSS Flexbox-like functionality to game object positioning and sizing. Style your UI elements using familiar CSS syntax.",
            {
              "type": "heading",
              "level": 2,
              "text": "Two Essential Free Addons"
            },
            "This layout system consists of two complementary addons available for free on the Construct 3 addon exchange:",
            {
              "type": "note",
              "text": "<strong>Important:</strong> Both addons are required to use the complete flexbox layout system. The UI Element handles individual object styling, while the UI Controller manages the overall layout coordination."
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Features"
            },
            {
              "type": "list",
              "items": [
                "CSS-like property syntax with kebab-case and camelCase support",
                "Complete flexbox implementation (flex-grow, flex-shrink, flex-basis)",
                "Multiple layout modes: vertical, horizontal, and grid",
                "Box model support: margin, padding, border",
                "Positioning: relative, absolute, and anchor-based",
                "Percentage-based sizing and constraints",
                "Style inheritance and cascading with !important support",
                "Real-time layout updates and responsive design",
                "Integration with Construct 3's native object system"
              ]
            },
            {
              "type": "heading",
              "level": 2,
              "text": "How it works"
            },
            "The layout engine processes objects in the following order:",
            {
              "type": "list",
              "ordered": true,
              "items": [
                "Parse CSS-like styles from registered classes and inline styles",
                "Apply sizing properties and constraints",
                "Recursively process child objects to establish base sizes",
                "Apply layout algorithms (flexbox, grid) to in-flow children",
                "Handle fit-content sizing and reflow as needed",
                "Position out-of-flow elements (absolute, anchor)"
              ]
            },
            {
              "type": "note",
              "text": "<strong>Note:</strong> This engine is designed specifically for Construct 3 and operates on WorldInstance objects with getBoundingBox() and positioning APIs."
            }
          ]
        },
        "basic-concepts": {
          "title": "Basic Concepts",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Layout Flow"
            },
            "Elements participate in different types of layout flow:",
            {
              "type": "list",
              "items": [
                "<strong>Normal Flow:</strong> Elements are laid out according to their display property (vertical, horizontal, grid)",
                "<strong>Out-of-Flow:</strong> Absolutely or anchor-positioned elements that don't affect other elements"
              ]
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Container vs Items"
            },
            "In flexbox layouts:",
            {
              "type": "list",
              "items": [
                "<strong>Container:</strong> The parent element with <code class=\"inline-code\">display: horizontal</code> or <code class=\"inline-code\">display: vertical</code>",
                "<strong>Items:</strong> Direct children of the container that are positioned by the layout algorithm"
              ]
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Main and Cross Axis"
            },
            {
              "type": "list",
              "items": [
                "<strong>Horizontal layout:</strong> Main axis is horizontal (left to right), cross axis is vertical",
                "<strong>Vertical layout:</strong> Main axis is vertical (top to bottom), cross axis is horizontal"
              ]
            }
          ]
        }
      }
    },
    "css": {
      "title": "CSS Syntax",
      "type": "regular",
      "pages": {
        "syntax-basics": {
          "title": "Basic Syntax",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Property Format"
            },
            "Styles are written using CSS-like syntax. Properties are separated by line breaks or semicolons:",
            {
              "type": "code",
              "text": "display: horizontal;\ngap: 10;\nalign-items: center;\njustify-content: space-between;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Property Names"
            },
            "Properties can be written in either kebab-case or camelCase:",
            {
              "type": "code",
              "text": "/* Both formats are equivalent */\nalign-items: center;\nalignItems: center;\n\nflex-grow: 1;\nflexGrow: 1;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Value Types"
            },
            {
              "type": "list",
              "items": [
                "<strong>Numbers:</strong> <code class=\"inline-code\">10</code>, <code class=\"inline-code\">3.5</code>, <code class=\"inline-code\">0</code>",
                "<strong>Strings:</strong> <code class=\"inline-code\">center</code>, <code class=\"inline-code\">auto</code>, <code class=\"inline-code\">100px</code>",
                "<strong>Percentages:</strong> <code class=\"inline-code\">50%</code>, <code class=\"inline-code\">100%</code>",
                "<strong>Keywords:</strong> <code class=\"inline-code\">auto</code>, <code class=\"inline-code\">none</code>, <code class=\"inline-code\">initial</code>"
              ]
            }
          ]
        },
        "property-formats": {
          "title": "Property Formats",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Important Declarations"
            },
            "Use <code class=\"inline-code\">!important</code> to override other styles:",
            {
              "type": "code",
              "text": "width: 200 !important;\nheight: 100 !important;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Shorthand Properties"
            },
            "Some properties support shorthand notation:",
            {
              "type": "code",
              "text": "/* Margin shorthand: top right bottom left */\nmargin: 10 20 10 20;\n\n/* Individual margin properties */\nmargin-top: 10;\nmargin-right: 20;\nmargin-bottom: 10;\nmargin-left: 20;"
            },
            {
              "type": "warning",
              "text": "<strong>Syntax Notes:</strong><br><ul><li>Semicolons are optional; line breaks separate properties</li><li>Zero values with units (0px, 0%) are converted to 0</li><li>Pure numbers become numeric types, values with units remain strings</li><li>Whitespace around colons and values is ignored</li></ul>"
            }
          ]
        },
        "flex-shorthand": {
          "title": "Flex Shorthand",
          "content": [
            "The <code class=\"inline-code\">flex</code> property is shorthand for flex-grow, flex-shrink, and flex-basis:",
            {
              "type": "heading",
              "level": 2,
              "text": "Single Value Syntax"
            },
            {
              "type": "code",
              "text": "/* Number: sets flex-grow, defaults others */\nflex: 1;         /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */\n\n/* Keywords */\nflex: auto;      /* flex-grow: 1, flex-shrink: 1, flex-basis: auto */\nflex: none;      /* flex-grow: 0, flex-shrink: 0, flex-basis: auto */\nflex: initial;   /* flex-grow: 0, flex-shrink: 1, flex-basis: auto */"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Two Value Syntax"
            },
            {
              "type": "code",
              "text": "/* flex-grow and flex-shrink */\nflex: 1 2;       /* flex-grow: 1, flex-shrink: 2, flex-basis: 0 */\n\n/* flex-grow and flex-basis */\nflex: 1 100px;   /* flex-grow: 1, flex-shrink: 1, flex-basis: 100px */"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Three Value Syntax"
            },
            {
              "type": "code",
              "text": "/* flex-grow, flex-shrink, and flex-basis */\nflex: 1 2 100px; /* flex-grow: 1, flex-shrink: 2, flex-basis: 100px */"
            }
          ]
        }
      }
    },
    "guides": {
      "title": "Guides",
      "type": "regular",
      "pages": {
        "layout-basics": {
          "title": "Layout Basics Guide",
          "content": [
            {
              "type": "step",
              "number": 1,
              "title": "Choose a Display Mode",
              "content": [
                "Start by setting the <code class=\"inline-code\">display</code> property on your container:",
                {
                  "type": "code",
                  "text": "/* For stacking elements vertically */\ndisplay: vertical;\n\n/* For arranging elements horizontally */\ndisplay: horizontal;\n\n/* For grid-based layouts */\ndisplay: grid;"
                }
              ]
            },
            {
              "type": "step",
              "number": 2,
              "title": "Add Spacing",
              "content": [
                "Control spacing between child elements:",
                {
                  "type": "code",
                  "text": "/* Add 10 pixels between each child */\ngap: 10;"
                }
              ]
            },
            {
              "type": "step",
              "number": 3,
              "title": "Control Alignment",
              "content": [
                "Align children within the container:",
                {
                  "type": "code",
                  "text": "/* Align children on the cross-axis */\nalign-items: center;  /* start, center, end */\n\n/* Distribute children on the main axis */\njustify-content: space-between;  /* start, center, end, space-between, space-around */"
                }
              ]
            }
          ]
        },
        "flexbox-guide": {
          "title": "Using Flexbox Guide",
          "content": [
            {
              "type": "step",
              "number": 1,
              "title": "Understanding Flex Items",
              "content": [
                "By default, children in a flex container maintain their natural size. Use flex properties to make them flexible:",
                {
                  "type": "code",
                  "text": "/* Make an item grow to fill available space */\nflex-grow: 1;\n\n/* Make an item shrink when space is limited */\nflex-shrink: 2;\n\n/* Set the initial size before growing/shrinking */\nflex-basis: 200;"
                }
              ]
            },
            {
              "type": "step",
              "number": 2,
              "title": "Common Flex Patterns",
              "content": [
                "Here are common flex patterns:",
                {
                  "type": "code",
                  "text": "/* Equal width columns */\nflex: 1;\n\n/* Fixed sidebar, flexible content */\n/* Sidebar: */ flex-shrink: 0; width: 200;\n/* Content: */ flex-grow: 1;\n\n/* Flexible with minimum size */\nflex: 1; min-width: 150;"
                }
              ]
            },
            {
              "type": "step",
              "number": 3,
              "title": "Individual Item Alignment",
              "content": [
                "Override container alignment for specific items:",
                {
                  "type": "code",
                  "text": "/* Override align-items for this item only */\nalign-self: end;"
                }
              ]
            }
          ]
        },
        "positioning-guide": {
          "title": "Positioning Elements Guide",
          "content": [
            {
              "type": "step",
              "number": 1,
              "title": "Relative Positioning",
              "content": [
                "Default positioning mode. Elements participate in normal layout flow:",
                {
                  "type": "code",
                  "text": "position: relative;  /* Default, can be omitted */"
                }
              ]
            },
            {
              "type": "step",
              "number": 2,
              "title": "Absolute Positioning",
              "content": [
                "Remove element from normal flow and position relative to parent:",
                {
                  "type": "code",
                  "text": "position: absolute;\ntop: 20;      /* 20 pixels from parent's top */\nright: 20;    /* 20 pixels from parent's right */"
                }
              ]
            },
            {
              "type": "step",
              "number": 3,
              "title": "Anchor Positioning",
              "content": [
                "Position relative to another element:",
                {
                  "type": "code",
                  "text": "position: anchor;\nanchor-target: button1;        /* Target element tag */\nanchor-point: bottom-center;   /* Point on target */\nself-anchor: top-center;       /* Point on this element */\nanchor-offset-y: 10;           /* Additional offset */"
                }
              ]
            }
          ]
        },
        "anchor-positioning-guide": {
          "title": "Anchor Positioning Guide",
          "content": [
            "Anchor positioning is one of the most powerful features of the Construct 3 Flexbox Layout Engine. It allows you to position elements relative to other elements anywhere in your game world, making it perfect for tooltips, health bars, UI overlays, and contextual menus.",
            {
              "type": "warning",
              "text": "<strong>Key Concept:</strong> Anchor positioning removes the element from normal layout flow, so it won't affect the positioning of other elements. Think of it as a floating layer that can follow other objects."
            },
            {
              "type": "step",
              "number": 1,
              "title": "Basic Anchor Setup",
              "content": [
                "To enable anchor positioning, you need three essential properties:",
                {
                  "type": "code",
                  "text": "/* Enable anchor positioning */\nposition: anchor;\n\n/* Choose what to anchor to */\nanchor-target: button1;\n\n/* Choose where to attach */\nanchor-point: bottom;"
                },
                "This basic setup will position your element at the bottom edge of 'button1'. The element's center will align with the target's bottom edge."
              ]
            },
            {
              "type": "step",
              "number": 2,
              "title": "Understanding Anchor Points",
              "content": [
                "Both the target element and your anchored element have 9 possible anchor points:",
                {
                  "type": "code",
                  "text": "/* Corner points */\ntop-left     top-right\nleft         center        right\nbottom-left  bottom        bottom-right\n\n/* Visual layout */\n┌─────────┬─────────┐\n│top-left │   top   │top-right\n├─────────┼─────────┤\n│  left   │ center  │  right\n├─────────┼─────────┤\n│bottom-  │ bottom  │bottom-\n│left     │         │right\n└─────────┴─────────┘"
                },
                {
                  "type": "note",
                  "text": "<strong>Tip:</strong> Use corner and edge points for precise alignment. The center point is perfect for overlays and centered tooltips."
                }
              ]
            },
            {
              "type": "step",
              "number": 3,
              "title": "Controlling Your Element's Attachment Point",
              "content": [
                "By default, your element attaches using its center point. Use <code class=\"inline-code\">self-anchor</code> to change this:",
                {
                  "type": "code",
                  "text": "/* Tooltip above a button */\nposition: anchor;\nanchor-target: helpButton;\nanchor-point: top;          /* Target's top edge */\nself-anchor: bottom;        /* This element's bottom edge */\n\n/* Result: Tooltip appears above button with no overlap */"
                },
                "Common self-anchor patterns:",
                {
                  "type": "code",
                  "text": "/* Dropdown menu */\nanchor-point: bottom;\nself-anchor: top;\n\n/* Side panel */\nanchor-point: right;\nself-anchor: left;\n\n/* Centered overlay */\nanchor-point: center;\nself-anchor: center;"
                }
              ]
            },
            {
              "type": "step",
              "number": 4,
              "title": "Fine-tuning with Offsets",
              "content": [
                "Use anchor offsets to add spacing or make micro-adjustments:",
                {
                  "type": "code",
                  "text": "/* Tooltip with spacing */\nposition: anchor;\nanchor-target: button;\nanchor-point: top;\nself-anchor: bottom;\nanchor-offset-y: -10;       /* 10px gap above button */\n\n/* Notification badge */\nposition: anchor;\nanchor-target: avatar;\nanchor-point: top-right;\nself-anchor: center;\nanchor-offset-x: 8;         /* Slight offset to the right */\nanchor-offset-y: -8;        /* Slight offset upward */"
                },
                {
                  "type": "note",
                  "text": "<strong>Coordinate System:</strong> Positive X moves right, negative X moves left. Positive Y moves down, negative Y moves up."
                }
              ]
            },
            {
              "type": "step",
              "number": 5,
              "title": "Choosing Anchor Targets",
              "content": [
                "You can anchor to different types of targets:",
                {
                  "type": "code",
                  "text": "/* Anchor to parent element */\nanchor-target: parent;\n\n/* Anchor to any game object by tag */\nanchor-target: player;\nanchor-target: healthBar;\nanchor-target: inventoryButton;\n\n/* Anchor to UI elements */\nanchor-target: menuButton;\nanchor-target: scoreDisplay;"
                },
                {
                  "type": "warning",
                  "text": "<strong>Important:</strong> Make sure your target objects have the correct tags in Construct 3. The anchor system searches for objects with matching tag names."
                }
              ]
            },
            {
              "type": "example",
              "title": "Practical Example: Game UI Tooltip",
              "content": [
                "Let's create a tooltip that appears above a skill button when the player hovers over it:",
                {
                  "type": "code",
                  "text": "/* Tooltip container */\nposition: anchor;\nanchor-target: skillButton;     /* Target the skill button */\nanchor-point: top;              /* Attach to button's top edge */\nself-anchor: bottom;            /* Using tooltip's bottom edge */\nanchor-offset-y: -15;           /* 15px spacing above button */\nwidth: 200;\npadding: 10;\nbackground-color: #2c3e50;\ncolor: white;\nborder-radius: 4px;\n\n/* Optional: Add arrow/tail effect with another anchored element */\n/* Arrow */\nposition: anchor;\nanchor-target: skillButton;\nanchor-point: top;\nself-anchor: top;\nanchor-offset-y: -5;\nwidth: 10;\nheight: 10;\nbackground-color: #2c3e50;\n/* Note: You'd style the arrow shape in Construct 3 */"
                }
              ]
            },
            {
              "type": "example",
              "title": "Practical Example: Health Bar Above Character",
              "content": [
                "Create a health bar that follows a character:",
                {
                  "type": "code",
                  "text": "/* Health bar background */\nposition: anchor;\nanchor-target: player;          /* Follows the player object */\nanchor-point: top;              /* Above the player */\nself-anchor: bottom;\nanchor-offset-y: -20;           /* 20px above player */\nwidth: 60;\nheight: 8;\nbackground-color: #e74c3c;\n\n/* Health bar fill (child of background) */\nposition: relative;             /* Normal flow within health bar */\nheight: 100%;\nwidth: 75%;                     /* 75% health */\nbackground-color: #27ae60;"
                }
              ]
            },
            {
              "type": "example",
              "title": "Practical Example: Contextual Menu",
              "content": [
                "A menu that appears next to an inventory item:",
                {
                  "type": "code",
                  "text": "/* Context menu container */\nposition: anchor;\nanchor-target: inventorySlot;\nanchor-point: right;            /* To the right of the slot */\nself-anchor: left;              /* Menu's left edge */\nanchor-offset-x: 10;            /* Small gap */\ndisplay: vertical;\nwidth: 120;\npadding: 5;\nbackground-color: #34495e;\nborder-radius: 4px;\n\n/* Menu items (children of container) */\nposition: relative;\nheight: 30;\npadding: 5 10;\ncolor: white;\nborder-radius: 2px;\n\n/* Menu items can have hover effects, spacing, etc. */"
                }
              ]
            },
            {
              "type": "step",
              "number": 6,
              "title": "Common Patterns and Best Practices",
              "content": [
                {
                  "type": "heading",
                  "level": 3,
                  "text": "Tooltip Pattern"
                },
                {
                  "type": "code",
                  "text": "/* Above target */\nanchor-point: top; self-anchor: bottom; anchor-offset-y: -gap;\n\n/* Below target */\nanchor-point: bottom; self-anchor: top; anchor-offset-y: gap;\n\n/* Left of target */\nanchor-point: left; self-anchor: right; anchor-offset-x: -gap;\n\n/* Right of target */\nanchor-point: right; self-anchor: left; anchor-offset-x: gap;"
                },
                {
                  "type": "heading",
                  "level": 3,
                  "text": "Overlay Pattern"
                },
                {
                  "type": "code",
                  "text": "/* Centered overlay */\nanchor-point: center;\nself-anchor: center;\n\n/* Corner badge */\nanchor-point: top-right;\nself-anchor: center;\nanchor-offset-x: 5;\nanchor-offset-y: -5;"
                },
                {
                  "type": "heading",
                  "level": 3,
                  "text": "Following Elements"
                },
                {
                  "type": "code",
                  "text": "/* Health/status bars */\nanchor-point: top;\nself-anchor: bottom;\nanchor-offset-y: -distance;\n\n/* Name tags */\nanchor-point: bottom;\nself-anchor: top;\nanchor-offset-y: distance;"
                }
              ]
            },
            {
              "type": "step",
              "number": 7,
              "title": "Troubleshooting Common Issues",
              "content": [
                {
                  "type": "heading",
                  "level": 3,
                  "text": "Element Not Appearing"
                },
                {
                  "type": "list",
                  "items": [
                    "Check that the anchor-target object exists and has the correct tag",
                    "Verify that position is set to 'anchor'",
                    "Make sure the anchored element has a size (width/height)"
                  ]
                },
                {
                  "type": "heading",
                  "level": 3,
                  "text": "Wrong Position"
                },
                {
                  "type": "list",
                  "items": [
                    "Check anchor-point and self-anchor combination",
                    "Verify anchor-offset-x and anchor-offset-y signs (positive/negative)",
                    "Remember that the target might be moving or changing size"
                  ]
                },
                {
                  "type": "heading",
                  "level": 3,
                  "text": "Performance Considerations"
                },
                {
                  "type": "list",
                  "items": [
                    "Anchor positioning updates automatically when targets move",
                    "Use sparingly for many dynamic elements",
                    "Consider disabling/enabling anchored elements when not needed"
                  ]
                }
              ]
            },
            {
              "type": "note",
              "text": "<strong>Remember:</strong> Anchor positioning is perfect for UI elements that need to follow game objects or appear contextually. It's ideal for tooltips, health bars, menus, and overlays, but use it thoughtfully for performance in complex scenes."
            }
          ]
        },
        "responsive-guide": {
          "title": "Responsive Layouts Guide",
          "content": [
            {
              "type": "step",
              "number": 1,
              "title": "Percentage-based Sizing",
              "content": [
                "Make elements resize based on their parent:",
                {
                  "type": "code",
                  "text": "/* 50% of parent width */\npercent-width: 50;\n\n/* 100% of parent height */\npercent-height: 100;\n\n/* Or using string percentages */\nwidth: 50%;\nheight: 100%;"
                }
              ]
            },
            {
              "type": "step",
              "number": 2,
              "title": "Constraints",
              "content": [
                "Set minimum and maximum sizes to prevent elements from becoming too small or large:",
                {
                  "type": "code",
                  "text": "percent-width: 50;\nmin-width: 200;   /* Never smaller than 200 pixels */\nmax-width: 800;   /* Never larger than 800 pixels */"
                }
              ]
            },
            {
              "type": "step",
              "number": 3,
              "title": "Flexible Containers",
              "content": [
                "Use fit-content to make containers size to their children:",
                {
                  "type": "code",
                  "text": "fit-content: true;  /* Container sizes to fit its children */"
                }
              ]
            }
          ]
        },
        "common-patterns": {
          "title": "Common Layout Patterns",
          "content": [
            {
              "type": "example",
              "title": "Navigation Bar",
              "content": [
                {
                  "type": "code",
                  "text": "/* Container */\ndisplay: horizontal;\ngap: 20;\nalign-items: center;\njustify-content: space-between;\npadding: 10;"
                }
              ]
            },
            {
              "type": "example",
              "title": "Sidebar Layout",
              "content": [
                {
                  "type": "code",
                  "text": "/* Main Container */\ndisplay: horizontal;\ngap: 20;\n\n/* Sidebar */\nwidth: 250;\nflex-shrink: 0;\n\n/* Content Area */\nflex-grow: 1;"
                }
              ]
            },
            {
              "type": "example",
              "title": "Card Layout",
              "content": [
                {
                  "type": "code",
                  "text": "/* Card Container */\ndisplay: vertical;\nheight: 400;\n\n/* Header */\nheight: 60;\nflex-shrink: 0;\n\n/* Content */\nflex-grow: 1;\npadding: 20;\n\n/* Footer */\nheight: 40;\nflex-shrink: 0;"
                }
              ]
            },
            {
              "type": "example",
              "title": "Centered Modal",
              "content": [
                {
                  "type": "code",
                  "text": "position: anchor;\nanchor-target: parent;\nanchor-point: center;\nself-anchor: center;\nwidth: 400;\nheight: 300;"
                }
              ]
            }
          ]
        }
      }
    },
    "properties": {
      "title": "Properties",
      "type": "property",
      "pages": {
        "prop-display": {
          "name": "display",
          "description": "Sets the layout algorithm for child elements",
          "values": "vertical | horizontal | grid",
          "default": "vertical",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "The <code class=\"inline-code\">display</code> property determines how child elements are laid out within their container. This is the primary property that controls the layout algorithm.",
            {
              "type": "heading",
              "level": 2,
              "text": "Values"
            },
            {
              "type": "list",
              "items": [
                "<strong>vertical:</strong> Children are stacked vertically (top to bottom)",
                "<strong>horizontal:</strong> Children are arranged horizontally (left to right)",
                "<strong>grid:</strong> Children are arranged in a grid pattern"
              ]
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Examples"
            },
            {
              "type": "code",
              "text": "/* Stack buttons vertically */\ndisplay: vertical;\ngap: 10;\n\n/* Arrange menu items horizontally */\ndisplay: horizontal;\ngap: 20;\n\n/* Create a grid of thumbnails */\ndisplay: grid;\ncolumns: 3;\ngap: 15;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Notes"
            },
            {
              "type": "list",
              "items": [
                "Only affects direct children of the element",
                "Out-of-flow positioned children (absolute, anchor) are not affected",
                "Default behavior is vertical stacking if not specified"
              ]
            }
          ]
        },
        "prop-position": {
          "name": "position",
          "description": "Sets how the element is positioned",
          "values": "relative | absolute | anchor",
          "default": "relative",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Controls how an element is positioned within its parent and whether it participates in normal layout flow.",
            {
              "type": "heading",
              "level": 2,
              "text": "Values"
            },
            {
              "type": "list",
              "items": [
                "<strong>relative:</strong> Element participates in normal layout flow",
                "<strong>absolute:</strong> Element is positioned relative to its parent's content area",
                "<strong>anchor:</strong> Element is positioned relative to another element"
              ]
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Examples"
            },
            {
              "type": "code",
              "text": "/* Normal layout flow */\nposition: relative;\n\n/* Position in corner of parent */\nposition: absolute;\ntop: 10;\nright: 10;\n\n/* Position relative to another element */\nposition: anchor;\nanchor-target: button1;"
            }
          ]
        },
        "prop-gap": {
          "name": "gap",
          "description": "Sets space between child elements",
          "values": "number",
          "default": "0",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Adds consistent spacing between child elements in flex and grid layouts. The gap is applied between elements, not around them.",
            {
              "type": "heading",
              "level": 2,
              "text": "Examples"
            },
            {
              "type": "code",
              "text": "/* 10 pixel gap between children */\ngap: 10;\n\n/* No gap (default) */\ngap: 0;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Notes"
            },
            {
              "type": "list",
              "items": [
                "Gap is added between elements, not before the first or after the last",
                "Works with all display modes (vertical, horizontal, grid)",
                "Does not affect absolutely or anchor-positioned children"
              ]
            }
          ]
        },
        "prop-flex": {
          "name": "flex",
          "description": "Shorthand for flex-grow, flex-shrink, and flex-basis",
          "values": "number | auto | none | initial | \"grow shrink basis\"",
          "default": "0 1 auto",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "A shorthand property that sets flex-grow, flex-shrink, and flex-basis in a single declaration. This is the most common way to make elements flexible.",
            {
              "type": "heading",
              "level": 2,
              "text": "Syntax Variations"
            },
            {
              "type": "code",
              "text": "/* Single number: flex-grow */\nflex: 1;  /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */\n\n/* Keywords */\nflex: auto;     /* 1 1 auto */\nflex: none;     /* 0 0 auto */\nflex: initial;  /* 0 1 auto */\n\n/* Two values */\nflex: 1 2;      /* grow: 1, shrink: 2, basis: 0 */\nflex: 1 100px;  /* grow: 1, shrink: 1, basis: 100px */\n\n/* Three values */\nflex: 1 2 100px;  /* grow: 1, shrink: 2, basis: 100px */"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Common Patterns"
            },
            {
              "type": "code",
              "text": "/* Equal width flexible items */\nflex: 1;\n\n/* Fixed size, won't grow or shrink */\nflex: none;\n\n/* Flexible but with minimum size */\nflex: 1;\nmin-width: 200;"
            }
          ]
        },
        "prop-flex-grow": {
          "name": "flex-grow",
          "description": "How much the item should grow relative to other flex items",
          "values": "number ≥ 0",
          "default": "0",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Defines how much an item should grow when there is extra space available in the flex container. The value is a ratio relative to other flex items.",
            {
              "type": "heading",
              "level": 2,
              "text": "Examples"
            },
            {
              "type": "code",
              "text": "/* Item won't grow (default) */\nflex-grow: 0;\n\n/* Item will grow to fill available space */\nflex-grow: 1;\n\n/* Item will grow twice as much as items with flex-grow: 1 */\nflex-grow: 2;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "How it works"
            },
            "If multiple items have flex-grow values, the available space is distributed proportionally:",
            {
              "type": "list",
              "items": [
                "Item A: <code class=\"inline-code\">flex-grow: 1</code> gets 1/3 of extra space",
                "Item B: <code class=\"inline-code\">flex-grow: 2</code> gets 2/3 of extra space"
              ]
            }
          ]
        },
        "prop-flex-shrink": {
          "name": "flex-shrink",
          "description": "How much the item should shrink relative to other flex items",
          "values": "number ≥ 0",
          "default": "1",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Defines how much an item should shrink when there isn't enough space in the flex container. Higher values shrink more.",
            {
              "type": "heading",
              "level": 2,
              "text": "Examples"
            },
            {
              "type": "code",
              "text": "/* Item won't shrink */\nflex-shrink: 0;\n\n/* Item will shrink normally (default) */\nflex-shrink: 1;\n\n/* Item will shrink twice as much as normal */\nflex-shrink: 2;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Common Use Cases"
            },
            {
              "type": "code",
              "text": "/* Fixed sidebar that won't shrink */\nwidth: 250;\nflex-shrink: 0;\n\n/* Flexible content that can shrink */\nflex-grow: 1;\nflex-shrink: 1;"
            }
          ]
        },
        "prop-flex-basis": {
          "name": "flex-basis",
          "description": "Initial main size before free space is distributed",
          "values": "number | percentage | auto",
          "default": "auto",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Sets the initial size of the item before any growing or shrinking occurs. This is the starting point for flex calculations.",
            {
              "type": "heading",
              "level": 2,
              "text": "Examples"
            },
            {
              "type": "code",
              "text": "/* Use the item's natural size */\nflex-basis: auto;\n\n/* Start with 200 pixels */\nflex-basis: 200;\n\n/* Start with 50% of container */\nflex-basis: 50%;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Interaction with width/height"
            },
            "In horizontal layouts, flex-basis overrides width. In vertical layouts, it overrides height.",
            {
              "type": "code",
              "text": "/* In horizontal layout */\nwidth: 100;        /* This is ignored */\nflex-basis: 200;   /* Item starts at 200px wide */"
            }
          ]
        },
        "prop-align-items": {
          "name": "align-items",
          "description": "Aligns children along the cross-axis",
          "values": "start | center | end",
          "default": "start",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Controls how children are aligned perpendicular to the main layout direction. Also available as <code class=\"inline-code\">alignment</code> for shorter syntax.",
            {
              "type": "heading",
              "level": 2,
              "text": "Cross-axis direction"
            },
            {
              "type": "list",
              "items": [
                "<strong>Horizontal layout:</strong> Cross-axis is vertical (top to bottom)",
                "<strong>Vertical layout:</strong> Cross-axis is horizontal (left to right)"
              ]
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Examples"
            },
            {
              "type": "code",
              "text": "/* Align to start of cross-axis (default) */\nalign-items: start;\n\n/* Center on cross-axis */\nalign-items: center;\n\n/* Align to end of cross-axis */\nalign-items: end;\n\n/* Shorter syntax */\nalignment: center;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Visual Examples"
            },
            {
              "type": "code",
              "text": "/* Horizontal layout with vertical centering */\ndisplay: horizontal;\nalign-items: center;  /* Centers vertically */\n\n/* Vertical layout with horizontal centering */\ndisplay: vertical;\nalign-items: center;  /* Centers horizontally */"
            }
          ]
        },
        "prop-justify-content": {
          "name": "justify-content",
          "description": "Aligns children along the main axis",
          "values": "start | center | end | space-between | space-around",
          "default": "start",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Controls how children are distributed along the main layout direction when there is extra space available.",
            {
              "type": "heading",
              "level": 2,
              "text": "Values"
            },
            {
              "type": "list",
              "items": [
                "<strong>start:</strong> Items packed at start",
                "<strong>center:</strong> Items centered",
                "<strong>end:</strong> Items packed at end",
                "<strong>space-between:</strong> Equal space between items",
                "<strong>space-around:</strong> Equal space around items"
              ]
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Examples"
            },
            {
              "type": "code",
              "text": "/* Center navigation items */\ndisplay: horizontal;\njustify-content: center;\n\n/* Spread items across full width */\ndisplay: horizontal;\njustify-content: space-between;\n\n/* Equal spacing around each item */\ndisplay: horizontal;\njustify-content: space-around;"
            }
          ]
        },
        "prop-align-self": {
          "name": "align-self",
          "description": "Overrides align-items for individual child",
          "values": "start | center | end",
          "default": "Inherits from parent's align-items",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Allows individual flex items to override the container's align-items setting for their own alignment.",
            {
              "type": "heading",
              "level": 2,
              "text": "Examples"
            },
            {
              "type": "code",
              "text": "/* Container centers all children */\ndisplay: horizontal;\nalign-items: center;\n\n/* But one child aligns differently */\nalign-self: end;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Use Cases"
            },
            "Common scenarios where align-self is useful:",
            {
              "type": "list",
              "items": [
                "Making one button larger and aligning it differently",
                "Creating mixed alignment within a single container",
                "Overriding default alignment for special items"
              ]
            }
          ]
        },
        "prop-justify-self": {
          "name": "justify-self",
          "description": "Self-alignment for grid items on main axis",
          "values": "start | center | end",
          "default": "start",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Controls how an individual grid item aligns within its grid cell on the main axis. This property only affects items in grid layouts.",
            {
              "type": "heading",
              "level": 2,
              "text": "Examples"
            },
            {
              "type": "code",
              "text": "/* Grid container */\ndisplay: grid;\ncolumns: 3;\n\n/* Individual grid item alignment */\njustify-self: center;  /* Center this item in its cell */"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Grid Cell Alignment"
            },
            "In grid layouts, each item gets its own cell. justify-self controls how the item is positioned within that cell horizontally."
          ]
        },
        "prop-width-height": {
          "name": "width / height",
          "description": "Sets explicit dimensions",
          "values": "number | percentage",
          "default": "Natural size of element",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Sets the explicit width and height of an element. These override the element's natural dimensions.",
            {
              "type": "heading",
              "level": 2,
              "text": "Examples"
            },
            {
              "type": "code",
              "text": "/* Fixed dimensions */\nwidth: 300;\nheight: 200;\n\n/* Percentage of parent */\nwidth: 50%;\nheight: 100%;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Interaction with Flexbox"
            },
            "In flex layouts, these properties can be overridden by flex-basis and flex-grow/shrink:",
            {
              "type": "code",
              "text": "/* This width may be overridden by flex properties */\nwidth: 200;\nflex-grow: 1;  /* Width becomes flexible */"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Notes"
            },
            {
              "type": "list",
              "items": [
                "Width and height set the content area size",
                "Margin, padding, and border are added to these dimensions",
                "Percentage values are relative to the parent's dimensions"
              ]
            }
          ]
        },
        "prop-percent-size": {
          "name": "percent-width / percent-height",
          "description": "Sets dimensions as percentage of parent",
          "values": "number (0-100)",
          "default": "None",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Alternative syntax for percentage-based sizing. These properties provide a numeric way to set percentages without string parsing.",
            {
              "type": "heading",
              "level": 2,
              "text": "Examples"
            },
            {
              "type": "code",
              "text": "/* 50% of parent width */\npercent-width: 50;\n\n/* 100% of parent height */\npercent-height: 100;\n\n/* Equivalent to */\nwidth: 50%;\nheight: 100%;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Responsive Design"
            },
            {
              "type": "code",
              "text": "/* Responsive card that adapts to parent */\npercent-width: 90;\nmax-width: 600;\nmin-width: 300;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Notes"
            },
            {
              "type": "list",
              "items": [
                "Values are numbers from 0 to 100, representing percentages",
                "Functionally equivalent to string percentage values",
                "Useful when working with numeric properties only"
              ]
            }
          ]
        },
        "prop-min-max": {
          "name": "min-width / max-width / min-height / max-height",
          "description": "Sets size constraints",
          "values": "number",
          "default": "None",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Set constraints on element dimensions to prevent them from becoming too small or too large. These properties override other sizing when constraints are violated.",
            {
              "type": "heading",
              "level": 2,
              "text": "Examples"
            },
            {
              "type": "code",
              "text": "/* Flexible width with constraints */\nflex: 1;\nmin-width: 200;  /* Never smaller than 200px */\nmax-width: 800;  /* Never larger than 800px */\n\n/* Percentage sizing with constraints */\npercent-width: 50;\nmin-width: 300;\nmax-width: 600;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Constraint Priority"
            },
            "Constraints override other sizing properties:",
            {
              "type": "list",
              "ordered": true,
              "items": [
                "<strong>min-width/min-height:</strong> Highest priority",
                "<strong>max-width/max-height:</strong> Second priority",
                "<strong>width/height/flex:</strong> Lowest priority"
              ]
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Responsive Patterns"
            },
            {
              "type": "code",
              "text": "/* Sidebar that collapses gracefully */\nwidth: 300;\nmin-width: 200;  /* Don't get too narrow */\n\n/* Content area with reasonable limits */\nflex: 1;\nmin-width: 400;   /* Always readable */\nmax-width: 1200;  /* Don't get too wide */"
            }
          ]
        },
        "prop-fit-content": {
          "name": "fit-content",
          "description": "Sizes container to fit its children",
          "values": "\"true\" | \"false\"",
          "default": "\"false\"",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Makes a container automatically size to fit its children. The container will expand or shrink to the minimum size needed to contain all its children.",
            {
              "type": "heading",
              "level": 2,
              "text": "Examples"
            },
            {
              "type": "code",
              "text": "/* Container sizes to fit children */\nfit-content: true;\n\n/* Explicit sizing (default) */\nfit-content: false;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Layout-specific behavior"
            },
            {
              "type": "list",
              "items": [
                "<strong>Vertical layout:</strong> Height fits children, width fits widest child",
                "<strong>Horizontal layout:</strong> Width fits children, height fits tallest child",
                "<strong>Grid layout:</strong> Sizes to fit the calculated grid dimensions"
              ]
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Use Cases"
            },
            {
              "type": "code",
              "text": "/* Auto-sizing button group */\ndisplay: horizontal;\nfit-content: true;\ngap: 10;\n\n/* Dialog that sizes to content */\ndisplay: vertical;\nfit-content: true;\npadding: 20;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Notes"
            },
            {
              "type": "list",
              "items": [
                "Value must be a string: \"true\" or \"false\"",
                "Triggers reflow when children change size",
                "Works with percentage-based children by sizing them first"
              ]
            }
          ]
        },
        "prop-margin": {
          "name": "margin",
          "description": "Space outside the element border",
          "values": "number | \"top right bottom left\"",
          "default": "0",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Creates space around the outside of an element. Margin is transparent and pushes other elements away.",
            {
              "type": "heading",
              "level": 2,
              "text": "Shorthand Syntax"
            },
            {
              "type": "code",
              "text": "/* All sides */\nmargin: 10;\n\n/* Individual sides */\nmargin-top: 10;\nmargin-right: 20;\nmargin-bottom: 10;\nmargin-left: 20;\n\n/* Four-value shorthand: top right bottom left */\nmargin: 10 20 10 20;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Examples"
            },
            {
              "type": "code",
              "text": "/* Equal margin on all sides */\nmargin: 15;\n\n/* Different margins per side */\nmargin: 10 20 5 15;  /* top right bottom left */\n\n/* Only top and bottom margins */\nmargin-top: 20;\nmargin-bottom: 20;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Layout Impact"
            },
            "Margin affects how elements are positioned in layout:",
            {
              "type": "list",
              "items": [
                "In flex layouts, margin is added to element size for spacing calculations",
                "Margin creates space between adjacent elements",
                "Margin is included in the element's total size for fit-content calculations"
              ]
            }
          ]
        },
        "prop-padding": {
          "name": "padding",
          "description": "Space inside the element border",
          "values": "number | \"top right bottom left\"",
          "default": "0",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Creates space inside an element, between the element's content and its border. Padding expands the element's visible area.",
            {
              "type": "heading",
              "level": 2,
              "text": "Shorthand Syntax"
            },
            {
              "type": "code",
              "text": "/* All sides */\npadding: 15;\n\n/* Individual sides */\npadding-top: 10;\npadding-right: 20;\npadding-bottom: 10;\npadding-left: 20;\n\n/* Four-value shorthand: top right bottom left */\npadding: 10 20 10 20;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Container Usage"
            },
            {
              "type": "code",
              "text": "/* Container with inner spacing */\ndisplay: vertical;\npadding: 20;  /* Space inside the container */\ngap: 10;      /* Space between children */"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Layout Impact"
            },
            {
              "type": "list",
              "items": [
                "Padding creates space inside the element where children are positioned",
                "Children are positioned within the padded area",
                "Padding is added to the element's total size"
              ]
            }
          ]
        },
        "prop-border": {
          "name": "border / border-width",
          "description": "Border thickness",
          "values": "number",
          "default": "0",
          "content": [
            {
              "type": "warning",
              "text": "<strong>⚠️ Work in Progress:</strong> The border property is a work-in-progress feature and doesn't actually add a visual border yet. Use margin or padding instead for spacing."
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Sets the thickness of the element's border. While the visual border styling is handled by Construct 3, the layout engine accounts for border width in positioning calculations.",
            {
              "type": "heading",
              "level": 2,
              "text": "Shorthand Syntax"
            },
            {
              "type": "code",
              "text": "/* All sides */\nborder: 2;\nborder-width: 2;  /* Same as above */\n\n/* Individual sides */\nborder-top-width: 1;\nborder-right-width: 2;\nborder-bottom-width: 1;\nborder-left-width: 2;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Layout Impact"
            },
            "Border width affects element positioning:",
            {
              "type": "list",
              "items": [
                "Border is added to the element's total size",
                "Content and children are positioned inside the border",
                "Border width is included in box model calculations"
              ]
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Box Model"
            },
            {
              "type": "code",
              "text": "/* Total element size calculation */\n/* Total Width = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right */\n\nwidth: 200;\npadding: 10;\nborder: 2;\nmargin: 5;\n/* Total width = 200 + 20 + 4 + 10 = 234 */"
            }
          ]
        },
        "prop-positioning": {
          "name": "top / right / bottom / left",
          "description": "Offset for absolutely positioned elements",
          "values": "number",
          "default": "auto",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Sets the position offset for absolutely positioned elements. These properties only apply when <code class=\"inline-code\">position: absolute</code> is set.",
            {
              "type": "heading",
              "level": 2,
              "text": "Usage"
            },
            {
              "type": "code",
              "text": "/* Position in top-right corner */\nposition: absolute;\ntop: 10;\nright: 10;\n\n/* Position in bottom-left corner */\nposition: absolute;\nbottom: 20;\nleft: 20;\n\n/* Center horizontally */\nposition: absolute;\nleft: 50%;\n/* Note: You'll need to adjust for element width */"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Positioning Reference"
            },
            "Offsets are calculated from the parent's content area (inside padding and border):",
            {
              "type": "list",
              "items": [
                "<strong>top:</strong> Distance from parent's top edge",
                "<strong>right:</strong> Distance from parent's right edge",
                "<strong>bottom:</strong> Distance from parent's bottom edge",
                "<strong>left:</strong> Distance from parent's left edge"
              ]
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Precedence"
            },
            "When conflicting properties are set:",
            {
              "type": "list",
              "items": [
                "<strong>Horizontal:</strong> <code class=\"inline-code\">left</code> takes precedence over <code class=\"inline-code\">right</code>",
                "<strong>Vertical:</strong> <code class=\"inline-code\">top</code> takes precedence over <code class=\"inline-code\">bottom</code>"
              ]
            }
          ]
        },
        "prop-anchor-target": {
          "name": "anchor-target",
          "description": "Target element to anchor to",
          "values": "string (tag name or \"parent\")",
          "default": "\"parent\"",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Specifies which element to use as the anchor reference when using <code class=\"inline-code\">position: anchor</code>. The target can be identified by tag name or the special value \"parent\".",
            {
              "type": "heading",
              "level": 2,
              "text": "Examples"
            },
            {
              "type": "code",
              "text": "/* Anchor to parent element */\nposition: anchor;\nanchor-target: parent;\n\n/* Anchor to element with specific tag */\nposition: anchor;\nanchor-target: button1;\n\n/* Anchor to first element found with tag */\nposition: anchor;\nanchor-target: healthbar;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Target Resolution"
            },
            "The engine searches for targets in this order:",
            {
              "type": "list",
              "ordered": true,
              "items": [
                "If \"parent\", uses the element's parent",
                "Searches all game objects for ones with the specified tag",
                "Uses the first matching object found"
              ]
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Use Cases"
            },
            {
              "type": "code",
              "text": "/* Tooltip that follows a button */\nposition: anchor;\nanchor-target: helpButton;\nanchor-point: bottom;\nself-anchor: top;\n\n/* Health bar that follows the player */\nposition: anchor;\nanchor-target: player;\nanchor-point: top;\nanchor-offset-y: -30;"
            }
          ]
        },
        "prop-anchor-point": {
          "name": "anchor-point",
          "description": "Anchor point on target element",
          "values": "center | top-left | top | top-right | left | right | bottom-left | bottom | bottom-right",
          "default": "center",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Specifies which point on the target element to use as the anchor reference. This is the point that the anchored element will position itself relative to.",
            {
              "type": "heading",
              "level": 2,
              "text": "Anchor Points"
            },
            {
              "type": "code",
              "text": "/* Corner points */\nanchor-point: top-left;\nanchor-point: top-right;\nanchor-point: bottom-left;\nanchor-point: bottom-right;\n\n/* Edge midpoints */\nanchor-point: top;      /* top-center */\nanchor-point: bottom;   /* bottom-center */\nanchor-point: left;     /* center-left */\nanchor-point: right;    /* center-right */\n\n/* Center */\nanchor-point: center;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Visual Reference"
            },
            "Anchor points correspond to positions on the target element:",
            {
              "type": "code",
              "text": "top-left    top      top-right\n    +--------+--------+\n    |                 |\nleft+      center     +right\n    |                 |\n    +--------+--------+\nbottom-left bottom  bottom-right"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Common Patterns"
            },
            {
              "type": "code",
              "text": "/* Dropdown menu below button */\nanchor-point: bottom;\nself-anchor: top;\n\n/* Tooltip above element */\nanchor-point: top;\nself-anchor: bottom;\n\n/* Side panel next to element */\nanchor-point: right;\nself-anchor: left;"
            }
          ]
        },
        "prop-self-anchor": {
          "name": "self-anchor",
          "description": "Anchor point on this element",
          "values": "center | top-left | top | top-right | left | right | bottom-left | bottom | bottom-right",
          "default": "center",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Specifies which point on this element should be aligned with the target's anchor point. This determines how the element positions itself relative to the target.",
            {
              "type": "heading",
              "level": 2,
              "text": "Alignment Logic"
            },
            "The element is positioned so that its self-anchor point aligns with the target's anchor-point:",
            {
              "type": "code",
              "text": "/* Element's top-left aligns with target's bottom-right */\nanchor-point: bottom-right;\nself-anchor: top-left;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Common Combinations"
            },
            {
              "type": "code",
              "text": "/* Tooltip above target */\nanchor-point: top;         /* Target's top edge */\nself-anchor: bottom;       /* This element's bottom edge */\n\n/* Dropdown below target */\nanchor-point: bottom;      /* Target's bottom edge */\nself-anchor: top;          /* This element's top edge */\n\n/* Sidebar to the right */\nanchor-point: right;       /* Target's right edge */\nself-anchor: left;         /* This element's left edge */\n\n/* Centered overlay */\nanchor-point: center;      /* Target's center */\nself-anchor: center;       /* This element's center */"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Fine-tuning Position"
            },
            "Use anchor offsets for precise positioning:",
            {
              "type": "code",
              "text": "/* Tooltip with small gap */\nanchor-point: top;\nself-anchor: bottom;\nanchor-offset-y: -5;  /* 5px gap above target */"
            }
          ]
        },
        "prop-anchor-offset": {
          "name": "anchor-offset-x / anchor-offset-y",
          "description": "Additional offset from anchor position",
          "values": "number",
          "default": "0",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Adds additional offset to the final anchor position. These offsets are applied after the anchor points are aligned, allowing for fine-tuning of the position.",
            {
              "type": "heading",
              "level": 2,
              "text": "Examples"
            },
            {
              "type": "code",
              "text": "/* Tooltip with spacing */\nposition: anchor;\nanchor-target: button;\nanchor-point: top;\nself-anchor: bottom;\nanchor-offset-y: -10;  /* 10px gap above button */\n\n/* Offset dialog to the side */\nposition: anchor;\nanchor-target: parent;\nanchor-point: center;\nself-anchor: center;\nanchor-offset-x: 50;   /* 50px to the right */\nanchor-offset-y: -20;  /* 20px up */"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Coordinate System"
            },
            {
              "type": "list",
              "items": [
                "<strong>anchor-offset-x:</strong> Positive values move right, negative values move left",
                "<strong>anchor-offset-y:</strong> Positive values move down, negative values move up"
              ]
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Use Cases"
            },
            {
              "type": "code",
              "text": "/* Speech bubble with tail spacing */\nanchor-point: top;\nself-anchor: bottom;\nanchor-offset-y: -15;  /* Account for tail height */\n\n/* Drop shadow effect */\nanchor-point: center;\nself-anchor: center;\nanchor-offset-x: 2;\nanchor-offset-y: 2;\n\n/* Notification badge on corner */\nanchor-point: top-right;\nself-anchor: center;\nanchor-offset-x: 5;\nanchor-offset-y: -5;"
            }
          ]
        },
        "prop-columns": {
          "name": "columns",
          "description": "Number of columns in grid layout",
          "values": "number",
          "default": "2",
          "content": [
            {
              "type": "heading",
              "level": 2,
              "text": "Description"
            },
            "Sets the number of columns in a grid layout. Only applies when <code class=\"inline-code\">display: grid</code> is set. The grid automatically calculates the number of rows based on the number of children.",
            {
              "type": "heading",
              "level": 2,
              "text": "Examples"
            },
            {
              "type": "code",
              "text": "/* 3-column grid */\ndisplay: grid;\ncolumns: 3;\ngap: 15;\n\n/* 4-column grid */\ndisplay: grid;\ncolumns: 4;\ngap: 10;"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Grid Behavior"
            },
            "Grid layout behavior:",
            {
              "type": "list",
              "items": [
                "Children are placed left-to-right, top-to-bottom",
                "Each cell has the same size (based on largest child)",
                "Number of rows is calculated as: Math.ceil(children.length / columns)"
              ]
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Grid Alignment"
            },
            {
              "type": "code",
              "text": "/* Centered grid with custom alignment */\ndisplay: grid;\ncolumns: 3;\ngap: 20;\njustify-content: center;  /* Center entire grid */\nalign-items: start;       /* Align items in cells */"
            },
            {
              "type": "heading",
              "level": 2,
              "text": "Individual Cell Control"
            },
            "Children in grid cells can override alignment:",
            {
              "type": "code",
              "text": "/* Grid container */\ndisplay: grid;\ncolumns: 2;\n\n/* Individual grid item */\njustify-self: center;  /* Center this item in its cell */\nalign-self: end;       /* Align to bottom of cell */"
            }
          ]
        }
      }
    },
    "tools": {
      "title": "Tools",
      "type": "regular",
      "pages": {
        "validator": {
          "title": "Style Validator",
          "redirect": "validate.html",
          "content": [
            "This will redirect you to the enhanced CSS validator page."
          ]
        },
        "ui-builder": {
          "title": "UI Builder",
          "redirect": "hierarchy-builder.html",
          "content": [
            "This will redirect you to the UI Builder page where you can visually design your UI."
          ]
        }
      }
    }
  }
}