{
  "schema_version": "1.0",
  "generated": "2026-05-05T04:37:40.652Z",
  "note": "Layout primitives are plain CSS classes (not component selectors). Override via CSS custom properties on the element.",
  "primitives": {
    "stack": {
      "selector": "stack",
      "description": "Vertical flex column. Children separated by gap.",
      "layout": "flex",
      "direction": "column",
      "align": "stretch",
      "default_gap": "var(--space-4)",
      "css_properties": [
        {
          "prop": "--stack-gap",
          "description": "Override gap between children",
          "default": "var(--space-4)"
        }
      ],
      "data_attrs": [
        {
          "attr": "data-stack-split-after",
          "value": "<n>",
          "description": "Push the last child to the end of the stack (useful for push footer pattern)."
        }
      ],
      "example": "<div class=\"stack\"><!-- children --></div>"
    },
    "cluster": {
      "selector": "cluster",
      "description": "Horizontal flex wrap. Items flow left-to-right and wrap.",
      "layout": "flex",
      "direction": "row",
      "wrap": "wrap",
      "align": "center",
      "justify": "flex-start",
      "default_gap": "var(--space-2)",
      "css_properties": [
        {
          "prop": "--cluster-gap",
          "description": "Override gap between items",
          "default": "var(--space-2)"
        }
      ],
      "data_attrs": [
        {
          "attr": "data-cluster-justify",
          "values": [
            "between"
          ],
          "description": "justify-content: space-between between items."
        },
        {
          "attr": "data-cluster-nowrap",
          "values": [
            "true"
          ],
          "description": "Disable flex-wrap. Items overflow-x: auto."
        }
      ],
      "example": "<div class=\"cluster\"><!-- inline items --></div>"
    },
    "center": {
      "selector": "center",
      "description": "Horizontally centered content with max-width and gutters.",
      "layout": "block",
      "default_max_width": "var(--container-md)",
      "default_gutter": "var(--space-4)",
      "css_properties": [
        {
          "prop": "--center-max",
          "description": "Max inline size",
          "default": "var(--container-md)"
        },
        {
          "prop": "--center-gutter",
          "description": "Horizontal gutters",
          "default": "var(--space-4)"
        }
      ],
      "data_attrs": [
        {
          "attr": "data-center-intrinsic",
          "values": [
            "true"
          ],
          "description": "Also center children intrinsically (CSS grid place-items: center)."
        }
      ],
      "example": "<div class=\"center\"><!-- centered content --></div>"
    },
    "container": {
      "selector": "container",
      "description": "Simple centered max-width wrapper.",
      "layout": "block",
      "default_max_width": "var(--container-md)",
      "default_gutter": "var(--space-4)",
      "css_properties": [
        {
          "prop": "--container-max",
          "description": "Max inline size",
          "default": "var(--container-md)"
        },
        {
          "prop": "--container-gutter",
          "description": "Horizontal gutters",
          "default": "var(--space-4)"
        }
      ],
      "data_attrs": [],
      "example": "<div class=\"container\"><!-- page content --></div>"
    },
    "grid": {
      "selector": "grid",
      "description": "Auto-fit responsive grid. Items flow into columns automatically.",
      "layout": "grid",
      "default_gap": "var(--space-3)",
      "default_min_column_width": "14rem",
      "css_properties": [
        {
          "prop": "--grid-gap",
          "description": "Gap between grid cells",
          "default": "var(--space-3)"
        },
        {
          "prop": "--grid-min",
          "description": "Minimum column width before wrapping",
          "default": "14rem"
        }
      ],
      "data_attrs": [],
      "example": "<div class=\"grid\"><!-- grid items --></div>"
    },
    "switcher": {
      "selector": "switcher",
      "description": "Flex layout that switches from horizontal to vertical when items reach minimum width.",
      "layout": "flex",
      "direction": "row (switches to column when items are too narrow)",
      "default_gap": "var(--space-4)",
      "default_min_item_width": "16rem",
      "css_properties": [
        {
          "prop": "--switcher-gap",
          "description": "Gap between items",
          "default": "var(--space-4)"
        },
        {
          "prop": "--switcher-min",
          "description": "Min item width before wrapping",
          "default": "16rem"
        }
      ],
      "data_attrs": [
        {
          "attr": "data-switcher-fixed",
          "values": [
            "true"
          ],
          "description": "Prevent items from growing beyond their min width."
        }
      ],
      "example": "<div class=\"switcher\"><!-- items --></div>"
    },
    "sidebar": {
      "selector": "sidebar",
      "description": "Two-column grid: narrow sidebar + wide main content. Collapses to single column below 56rem.",
      "layout": "grid",
      "default_sidebar_width": "18rem",
      "default_gap": "var(--space-6)",
      "breakpoint": "56rem",
      "css_properties": [
        {
          "prop": "--sidebar-width",
          "description": "Sidebar column width",
          "default": "18rem"
        },
        {
          "prop": "--sidebar-gap",
          "description": "Gap between sidebar and content",
          "default": "var(--space-6)"
        },
        {
          "prop": "--sidebar-min",
          "description": "Minimum sidebar width",
          "default": "14rem"
        }
      ],
      "data_attrs": [
        {
          "attr": "data-sidebar-side",
          "values": [
            "end"
          ],
          "description": "Place sidebar on the inline-end (right in LTR)."
        }
      ],
      "example": "<div class=\"sidebar\">\n  <nav><!-- sidebar --></nav>\n  <main><!-- content --></main>\n</div>"
    }
  }
}