Add template and for-div

## Brief Description
Introduce `template` and `for-div` loops to reduce repetitive code.

## Introduction
Using `template` to define reusable code blocks and `for-div` to loop-render elements instead of writing each one manually.
The following shows the syntax (not the final version):

```ui
div #exmpl_for {
background-color: #40FFFFFF
border-radius: 5
size: 420 240
center: both
padding: 10

child-align: grid

template #blockTemplate {
args: i
tag-name: div
class-name: "block_${i}"
background-image: textures/block/ice.png
draggable: true
children {
div {
inner-text: "Block $ctx{i}"
}
}
}

for-div #forId {
range: "0..=20"
index-name: i
body {
use: blockTemplate
}
}

// or

for-div #forId {
range: "0..=20"
index-name: i
body {
create {
name: div
class: "block_${i}"
background-image: textures/block/ice.png
draggable: true
hovered => { border-thickness: 1; border-color: white; }
}
}
}

// or

for-div #forId {
range-use: "$rangeUse{0..=20, blockTemplate}"
}
}
```

---

Below are step‑by‑step optimizations to address the repetition and poor readability of writing each element manually, followed by a refined final example.

## 1. Extract a reusable Block template
- **Issue**: Every block requires rewriting the same properties, leading to redundancy.
- **Optimization**: Use a `template` to encapsulate common logic (CSS/class, background, draggable, hover), leaving only the variable part (`index`) as a parameter.

```ui
template #blockTemplate {
args: index
tag-name: div
class-name: "block_${index}"
background-image: textures/block/ice.png
draggable: true
hovered => {
border-thickness: 1
border-color: white
}
children {
div { inner-text: "Block ${index}" }
}
}
```

---

## 2. Loop-render with for-div
- **Issue**: Writing 20+ `