================================================================================
Root attribute
================================================================================
direction: value

shape: oval
label: 'one two'
constraint: utehu
icon: ./test.svg
opacity: 0.5
fill: red
stroke: red
stroke-width: 5
stroke-dash: 4
border-radius: 1
font: mono
font-size: 20
font-color: red
shadow: false
multiple: true
animated: true
link: https://to
near: abc

--------------------------------------------------------------------------------

(source_file
  (attribute (attr_key) (colon) (attr_value))

  (attribute (attr_key (reserved)) (colon) (attr_value))
  (attribute (attr_key (reserved)) (colon) (attr_value (string (string_fragment))))
  (attribute (attr_key (reserved)) (colon) (attr_value))
  (attribute (attr_key (reserved)) (colon) (attr_value))
  (attribute (attr_key (reserved)) (colon) (attr_value (float)))
  (attribute (attr_key (reserved)) (colon) (attr_value))
  (attribute (attr_key (reserved)) (colon) (attr_value))
  (attribute (attr_key (reserved)) (colon) (attr_value (integer)))
  (attribute (attr_key (reserved)) (colon) (attr_value (integer)))
  (attribute (attr_key (reserved)) (colon) (attr_value (integer)))
  (attribute (attr_key (reserved)) (colon) (attr_value))
  (attribute (attr_key (reserved)) (colon) (attr_value (integer)))
  (attribute (attr_key (reserved)) (colon) (attr_value))
  (attribute (attr_key (reserved)) (colon) (attr_value (boolean)))
  (attribute (attr_key (reserved)) (colon) (attr_value (boolean)))
  (attribute (attr_key (reserved)) (colon) (attr_value (boolean)))
  (attribute (attr_key (reserved)) (colon) (attr_value))
  (attribute (attr_key (reserved)) (colon) (attr_value))
)

================================================================================
Style attribute
================================================================================
foo.style.opacity: 0.5
foo.style.fill: red
foo.style.stroke: red
foo.style.stroke-width: 5
foo.style.stroke-dash: 4
foo.style.border-radius: 1
foo.style.font-color: red
foo.style.shadow: false
foo.style.multiple: true
foo.style.animated: true
foo.style.link: https://to
foo.style.text-transform: uppercase

--------------------------------------------------------------------------------

(source_file
  (shape (shape_key) (dot) (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value (float)))))
  (shape (shape_key) (dot) (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value))))
  (shape (shape_key) (dot) (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value))))
  (shape (shape_key) (dot) (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value (integer)))))
  (shape (shape_key) (dot) (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value (integer)))))
  (shape (shape_key) (dot) (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value (integer)))))
  (shape (shape_key) (dot) (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value))))
  (shape (shape_key) (dot) (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value (boolean)))))
  (shape (shape_key) (dot) (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value (boolean)))))
  (shape (shape_key) (dot) (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value (boolean)))))
  (shape (shape_key) (dot) (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value))))
  (shape (shape_key) (dot) (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value))))
)

================================================================================
Block style attributes
================================================================================
foo.style: {
  opacity: 0.5
  fill: red
  stroke: red
  stroke-width: 5
  stroke-dash: 4
  border-radius: 1
  font-color: red
  shadow: false
  multiple: true
  animated: true
  link: https://to
  text-transform: uppercase
}

--------------------------------------------------------------------------------

(source_file
  (shape
    (shape_key) (dot)
    (attribute
      (keyword_style)
      (colon)
      (block
        (attribute (attr_key) (colon) (attr_value (float)))
        (attribute (attr_key) (colon) (attr_value))
        (attribute (attr_key) (colon) (attr_value))
        (attribute (attr_key) (colon) (attr_value (integer)))
        (attribute (attr_key) (colon) (attr_value (integer)))
        (attribute (attr_key) (colon) (attr_value (integer)))
        (attribute (attr_key) (colon) (attr_value))
        (attribute (attr_key) (colon) (attr_value (boolean)))
        (attribute (attr_key) (colon) (attr_value (boolean)))
        (attribute (attr_key) (colon) (attr_value (boolean)))
        (attribute (attr_key) (colon) (attr_value))
        (attribute (attr_key) (colon) (attr_value))
      )
    )
  )
)

================================================================================
Container attributes
================================================================================
foo: {
  shape: oval
  label: 'Baz'
  constraint: primary-key
  icon: pathto
  width: 100
  height: 200
  link: https://microsoft.com
  tooltip: Gee, I feel kind of LIGHT in the head now,\nknowing I can't make my satellite dish PAYMENTS!
}

--------------------------------------------------------------------------------

(source_file
  (container
    (container_key)
    (colon)
    (block
      (attribute (attr_key) (colon) (attr_value))
      (attribute (attr_key) (colon) (attr_value (string (string_fragment))))
      (attribute (attr_key) (colon) (attr_value))
      (attribute (attr_key) (colon) (attr_value))
      (attribute (attr_key) (colon) (attr_value (integer)))
      (attribute (attr_key) (colon) (attr_value (integer)))
      (attribute (attr_key) (colon) (attr_value))
      (attribute (attr_key) (colon) (attr_value (escape_sequence)))
    )
  )
)

================================================================================
Container style attributes
================================================================================
foo: {
  style.opacity: 0.5
  style.fill: red
  style.stroke: red
  style.stroke-width: 5
  style.stroke-dash: 4
  style.border-radius: 1
  style.font-color: red
  style.shadow: true
  style.multiple: true
  style.animated: true
  style.link: https://to
}

--------------------------------------------------------------------------------

(source_file
  (container
    (container_key)
    (colon)
    (block
      (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value (float))))
      (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value)))
      (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value)))
      (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value (integer))))
      (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value (integer))))
      (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value (integer))))
      (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value)))
      (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value (boolean))))
      (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value (boolean))))
      (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value (boolean))))
      (attribute (keyword_style) (dot) (attribute (attr_key) (colon) (attr_value)))
    )
  )
)

================================================================================
Block style attributes inside a container
================================================================================
foo: {
  style: {
    opacity: 0.5
    fill: red
    stroke: red
    stroke-width: 5
    stroke-dash: 4
    border-radius: 1
    font-color: red
    shadow: true
    multiple: true
    animated: true
    link: https://to
  }
}

--------------------------------------------------------------------------------

(source_file
  (container
    (container_key)
    (colon)
    (block
      (attribute
        (keyword_style)
        (colon)
        (block
          (attribute (attr_key) (colon) (attr_value (float)))
          (attribute (attr_key) (colon) (attr_value))
          (attribute (attr_key) (colon) (attr_value))
          (attribute (attr_key) (colon) (attr_value (integer)))
          (attribute (attr_key) (colon) (attr_value (integer)))
          (attribute (attr_key) (colon) (attr_value (integer)))
          (attribute (attr_key) (colon) (attr_value))
          (attribute (attr_key) (colon) (attr_value (boolean)))
          (attribute (attr_key) (colon) (attr_value (boolean)))
          (attribute (attr_key) (colon) (attr_value (boolean)))
          (attribute (attr_key) (colon) (attr_value))
        )
      )
    )
  )
)

================================================================================
Block style attributes inside a connection
================================================================================
foo -> bar: {
  style: {
    opacity: 0.5
    fill: red
    stroke: red
    stroke-width: 5
    stroke-dash: 4
    border-radius: 1
    font-color: red
    shadow: false
    multiple: true
    animated: true
    link: https://to
  }
}

--------------------------------------------------------------------------------

(source_file
  (connection
    (shape_key)
    (arrow)
    (shape_key)
    (colon)
    (block
      (attribute
        (keyword_style)
        (colon)
        (block
          (attribute (attr_key) (colon) (attr_value (float)))
          (attribute (attr_key) (colon) (attr_value))
          (attribute (attr_key) (colon) (attr_value))
          (attribute (attr_key) (colon) (attr_value (integer)))
          (attribute (attr_key) (colon) (attr_value (integer)))
          (attribute (attr_key) (colon) (attr_value (integer)))
          (attribute (attr_key) (colon) (attr_value))
          (attribute (attr_key) (colon) (attr_value (boolean)))
          (attribute (attr_key) (colon) (attr_value (boolean)))
          (attribute (attr_key) (colon) (attr_value (boolean)))
          (attribute (attr_key) (colon) (attr_value))
        )
      )
    )
  )
)

================================================================================
Labels for connection arrowheads
================================================================================
foo -> bar: {
  source-arrowhead: 0
  target-arrowhead: 1
}

--------------------------------------------------------------------------------

(source_file
  (connection
    (shape_key)
    (arrow)
    (shape_key)
    (colon)
    (block
      (attribute (attr_key) (colon) (label))
      (attribute (attr_key) (colon) (label))
    )
  )
)

================================================================================
Define attributes for connection in single-line
================================================================================
foo -> bar: {source-arrowhead: 0; target-arrowhead: 1}

--------------------------------------------------------------------------------

(source_file
  (connection
    (shape_key)
    (arrow)
    (shape_key)
    (colon)
    (block
      (attribute (attr_key) (colon) (label))
      (attribute (attr_key) (colon) (label))
    )
  )
)

================================================================================
Block style attributes inside a connection arrowhead
================================================================================
foo -> bar: {
  target-arrowhead: {
    style: {
      opacity: 0.5
      fill: red
      stroke: red
      stroke-width: 5
      stroke-dash: 4
      border-radius: 1
      font-color: red
      shadow: false
      multiple: true
      animated: true
      link: https://to
    }
  }
}

--------------------------------------------------------------------------------

(source_file
  (connection
    (shape_key)
    (arrow)
    (shape_key)
    (colon)
    (block
      (attribute
        (attr_key)
        (colon)
        (block
          (attribute
            (keyword_style)
            (colon)
            (block
              (attribute (attr_key) (colon) (attr_value (float)))
              (attribute (attr_key) (colon) (attr_value))
              (attribute (attr_key) (colon) (attr_value))
              (attribute (attr_key) (colon) (attr_value (integer)))
              (attribute (attr_key) (colon) (attr_value (integer)))
              (attribute (attr_key) (colon) (attr_value (integer)))
              (attribute (attr_key) (colon) (attr_value))
              (attribute (attr_key) (colon) (attr_value (boolean)))
              (attribute (attr_key) (colon) (attr_value (boolean)))
              (attribute (attr_key) (colon) (attr_value (boolean)))
              (attribute (attr_key) (colon) (attr_value))
            )
          )
        )
      )
    )
  )
)

================================================================================
Container attributes inside a connection arrowhead
================================================================================
foo -> bar: {
  target-arrowhead: {
    shape: oval
    label: 'Baz'
    constraint: primary-key
    icon: pathto
    width: 100
    height: 200
  }
}

--------------------------------------------------------------------------------

(source_file
  (connection
    (shape_key)
    (arrow)
    (shape_key)
    (colon)
    (block
      (attribute
        (attr_key)
        (colon)
        (block
          (attribute (attr_key) (colon) (attr_value))
          (attribute (attr_key) (colon) (attr_value (string (string_fragment))))
          (attribute (attr_key) (colon) (attr_value))
          (attribute (attr_key) (colon) (attr_value))
          (attribute (attr_key) (colon) (attr_value (integer)))
          (attribute (attr_key) (colon) (attr_value (integer)))
        )
      )
    )
  )
)

================================================================================
Declare style attributes in single-line
================================================================================
foo.style: {opacity: 0.5; fill: red}

--------------------------------------------------------------------------------

(source_file
  (shape
    (shape_key) (dot)
    (attribute
      (keyword_style)
      (colon)
      (block
        (attribute (attr_key) (colon) (attr_value (float)))
        (attribute (attr_key) (colon) (attr_value))
      )
    )
  )
)

================================================================================
Declare grid attributes
================================================================================
grid-gap: 0
grid-columns: 1

header

body: "" {
  vertical-gap: 0
  horizontal-gap: 0
  grid-columns: 2

  content
  sidebar
}

footer

--------------------------------------------------------------------------------

(source_file
  (attribute (attr_key) (colon) (attr_value (integer)))
  (attribute (attr_key) (colon) (attr_value (integer)))
  (shape (shape_key))
  (container
    (container_key)
    (colon)
    (label (string))
    (block
      (attribute (attr_key) (colon) (attr_value (integer)))
      (attribute (attr_key) (colon) (attr_value (integer)))
      (attribute (attr_key) (colon) (attr_value (integer)))
      (shape (shape_key))
      (shape (shape_key))
    )
  )
  (shape (shape_key))
)

================================================================================
Declare a attribute with many values
================================================================================
block: {
  constraint: primary_key
  constraint: [primary_key]
  constraint: [primary_key; unique]
  constraint: [
    primary_key
    unique
  ]
}

--------------------------------------------------------------------------------

(source_file
  (container
    (container_key)
    (colon)
    (block
      (attribute (attr_key) (colon) (attr_value))
      (attribute (attr_key) (colon) (attr_value_list (attr_value)))
      (attribute (attr_key) (colon) (attr_value_list (attr_value) (attr_value)))
      (attribute (attr_key) (colon) (attr_value_list (attr_value) (attr_value)))
    )
  )
)