Animation changes

docs/.vitepress/config.mts

@@ -60,19 +60,15 @@ export default defineConfig({
 
     sidebar: {
       '/guides/': [
-        { text: 'General', link: '/guides/getting-started', items: [
+        { text: 'Getting started', link: '/guides/getting-started' },
-          { text: 'Getting started', link: '/guides/getting-started' },
+        { text: 'Download', link: '/guides/download' },
-          { text: 'Download', link: '/guides/download' },
+        { text: 'Annotations', link: '/guides/annotations' },
-          { text: 'Annotations', link: '/guides/annotations' },          
+        { text: 'Animations', link: '/guides/animations' },
-          { text: 'FAQ', link: '/guides/faq' },
+        { text: 'Benchmark', link: '/guides/benchmarks' },
-        ]},
+        { text: 'Properties', link: '/guides/properties' },
-        { text: 'Plugins', link: '/guides/animations', items: [
+        { text: 'States', link: '/guides/states' },
-          { text: 'Animations', link: '/guides/animations' },
+        { text: 'XML', link: '/guides/xml' },
-          { text: 'Benchmark', link: '/guides/benchmarks' },
+        { text: 'FAQ', link: '/guides/faq' },
-          { text: 'Properties', link: '/guides/properties' },
-          { text: 'States', link: '/guides/states' },
-          { text: 'XML', link: '/guides/xml' },
-        ]},
       ],
 
       '/references/':[
@@ -92,33 +88,25 @@ export default defineConfig({
           collapsed: false,
           items: [
               {text: 'VisualElement', link: 'references/elements/VisualElement', collapsed: false, items: [
-                {text: 'BigFont', link: 'references/elements/BigFont'},
-                {text: 'Button', link: 'references/elements/Button'},
-                {text: 'Checkbox', link: 'references/elements/Checkbox'},
                 {text: 'Container', link: 'references/elements/Container', collapsed: true, items: [
                   {text: 'BaseFrame', link: 'references/elements/BaseFrame'},
-                  {text: 'Flexbox', link: 'references/elements/Flexbox'},
                   {text: 'Frame', link: 'references/elements/Frame'},
                 ]},
-                {text: 'Display', link: 'references/elements/Display'},
+                {text: 'Button', link: 'references/elements/Button'},
-                {text: 'Graph', link: 'references/elements/Graph', collapsed: true, items: [
+                {text: 'Label', link: 'references/elements/Label'},  
-                  {text: 'BarChart', link: 'references/elements/BarChart'},
-                  {text: 'LineChart', link: 'references/elements/LineChart'},
-                ]},
-                {text: 'Image', link: 'references/elements/Image'},
                 {text: 'Input', link: 'references/elements/Input'},
-                {text: 'Label', link: 'references/elements/Label'},
+                {text: 'Checkbox', link: 'references/elements/Checkbox'},
-                {text: 'List', link: 'references/elements/List', collapsed: true, items: [
+                {text: 'List', link: 'references/elements/List', collapsed: true,
-                  {text: 'Dropdown', link: 'references/elements/Dropdown'},
+                  items: [
-                  {text: 'Menu', link: 'references/elements/Menu'},
+                    {text: 'Dropdown', link: 'references/elements/Dropdown'},
-                ]},
+                    {text: 'Menu', link: 'references/elements/Menu'},
+                  ]
+                },
+                {text: 'Table', link: 'references/elements/Table'},
+                {text: 'Tree', link: 'references/elements/Tree'},
+                {text: 'Slider', link: 'references/elements/Slider'},
                 {text: 'ProgressBar', link: 'references/elements/ProgressBar'},
                 {text: 'Program', link: 'references/elements/Program'},
-                {text: 'Scrollbar', link: 'references/elements/Scrollbar'},
-                {text: 'Slider', link: 'references/elements/Slider'},
-                {text: 'Table', link: 'references/elements/Table'},
-                {text: 'TextBox', link: 'references/elements/TextBox'},
-                {text: 'Tree', link: 'references/elements/Tree'},
               ]},
           ]
         },

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
+    :move(10, 5, 1)                  -- These three animations
-    :size(5, 5, 1)         -- all start and play
+    :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)