Animation changes

docs/guides/animations.md

@@ -16,7 +16,7 @@ Animations in Basalt work with:
 element:animate()
     :move(x, y, duration)                       -- Animate move
     :moveOffset(x, y, duration)                 -- Animate offset
-    :size(w, h, duration)                       -- Animate size
+    :resize(w, h, duration)                     -- Animate size
     :morphText(property, targetText, duration)  -- Animate text
     :typewrite(property, targetText, duration)  -- Animate text
     :fadeText(property, targetText, duration)   -- Animate text
@@ -42,16 +42,16 @@ Sequences allow you to create complex animations by controlling when each animat
 ```lua
 -- Without sequences (animations play at the same time):
 element:animate()
-    :move(10, 5, 1)     -- These three animations
-    :size(5, 5, 1)         -- all start and play
+    :move(10, 5, 1)                  -- These three animations
+    :resize(5, 5, 1)                 -- all start and play
     :morphText("text", "newText" 1)  -- simultaneously
     :start()
 
 -- With sequences (animations play one after another):
 element:animate()
-    :move(10, 5, 1)     -- Plays first
+    :move(10, 5, 1)                  -- Plays first
     :sequence()
-    :size(5, 5, 1)         -- Starts after position completes
+    :resize(5, 5, 1)                 -- Starts after position completes
     :sequence()
     :morphText("text", "newText" 1)  -- simultaneously
     :start()

docs/guides/reactive.md

@@ -0,0 +1,76 @@
+# Reactive System
+
+The reactive system in Basalt allows you to create dynamic property values using expressions. These expressions automatically update when related values change.
+
+## Basic Usage
+
+```lua
+local basalt = require("basalt")
+
+-- Create a simple label and center it horizontally
+local main = basalt.getMainFrame()
+    :addLabel()
+    :setText("Hello World")
+    :setX("{parent.width / 2 - self.width / 2}")  -- Centers the label horizontally
+
+-- Create a progress bar that takes 80% of parent width
+main:addProgressbar()
+    :setWidth("{parent.width * 0.8}")
+    :setX("{parent.width * 0.1}")  -- 10% margin on both sides
+```
+
+## Available Variables
+
+In reactive expressions, you have access to:
+
+- `self` - The current element
+- `parent` - The parent element
+- `elementName` - A given name of a element
+- Any property of these elements (width, height, value, text, etc.)
+
+## Common Use Cases
+
+### Responsive Layout
+
+```lua
+local frame = basalt.getMainFrame()
+    :addFrame()
+    :setSize("{parent.width * 0.5}", "{parent.height * 0.5}")  -- Takes half of parent size
+    :setPosition("{parent.width / 2 - self.width / 2}",        -- Centers the frame
+                 "{parent.height / 2 - self.height / 2}")
+```
+
+### Dynamic Sizing
+
+```lua
+local label = frame:addLabel()
+    :setText("Dynamic width based on text")
+    :setWidth("{#self.text}")  -- Width equals text length
+```
+
+### Linked Properties
+
+```lua
+local slider = frame:addSlider()
+    :setPosition(2, 2)
+    :setSize(10, 1)
+
+local progress = frame:addProgressbar()
+    :setPosition(2, 4)
+    :setSize(10, 1)
+    :setProgress("{slider.value}")  -- Progress syncs with slider value
+```
+
+## Syntax
+
+- Use curly braces `{}` to define a reactive expression
+- Basic math operators are supported (+, -, *, /, %)
+- Access properties using dot notation (element.property)
+- Can use basic functions and comparisons
+
+## Best Practices
+
+1. Keep expressions simple and readable
+2. Use meaningful variable names in complex calculations
+3. Test expressions with different parent sizes
+4. Consider edge cases (minimum/maximum sizes)