Fixed a bug in reactive not calling the observers

Fixed a layout issue (not updating properly)
added the flow layout

src/elements/Container.lua

@@ -103,10 +103,12 @@ function Container:init(props, basalt)
     self:observe("width", function()
         self.set("childrenSorted", false)
         self.set("childrenEventsSorted", false)
+        self:updateRender()
     end)
     self:observe("height", function()
         self.set("childrenSorted", false)
         self.set("childrenEventsSorted", false)
+        self:updateRender()
     end)
 end
 
@@ -203,11 +205,12 @@ end
 --- @shortDescription Updates child element ordering
 --- @return Container self For method chaining
 function Container:sortChildren()
-    self.set("visibleChildren", sortAndFilterChildren(self, self._values.children))
     self.set("childrenSorted", true)
     if self._layoutInstance then
         self:updateLayout()
     end
+
+    self.set("visibleChildren", sortAndFilterChildren(self, self._values.children))
     return self
 end
 
@@ -546,7 +549,7 @@ end
 --- @protected
 function Container:multiBlit(x, y, width, height, text, fg, bg)
     local w, h = self.get("width"), self.get("height")
-    
+
     width = x < 1 and math.min(width + x - 1, w) or math.min(width, math.max(0, w - x + 1))
     height = y < 1 and math.min(height + y - 1, h) or math.min(height, math.max(0, h - y + 1))
 

src/plugins/reactive.lua

@@ -191,9 +191,17 @@ local observerCache = setmetatable({}, {
     end
 })
 
+local valueCache = setmetatable({}, {
+    __mode = "k",
+    __index = function(t, k)
+        t[k] = {}
+        return t[k]
+    end
+})
+
 local function setupObservers(element, expr, propertyName)
     local deps = analyzeDependencies(expr)
-    
+
     if observerCache[element][propertyName] then
         for _, observer in ipairs(observerCache[element][propertyName]) do
             observer.target:removeObserver(observer.property, observer.callback)
@@ -229,7 +237,20 @@ local function setupObservers(element, expr, propertyName)
                     target = target,
                     property = isState and "states" or prop,
                     callback = function()
-                        element:updateRender()
+                        local oldValue = valueCache[element][propertyName]
+                        local newValue = element.get(propertyName)
+
+                        if oldValue ~= newValue then
+                            valueCache[element][propertyName] = newValue
+
+                            if element._observers and element._observers[propertyName] then
+                                for _, obs in ipairs(element._observers[propertyName]) do
+                                    obs()
+                                end
+                            end
+
+                            element:updateRender()
+                        end
                     end
                 }
                 target:observe(observer.property, observer.callback)
@@ -281,6 +302,8 @@ PropertySystem.addSetterHook(function(element, propertyName, value, config)
                 end
                 return config.default
             end
+
+            valueCache[element][propertyName] = result
             return result
         end
     end
@@ -304,6 +327,7 @@ BaseElement.hooks = {
                 end
             end
             observerCache[self] = nil
+            valueCache[self] = nil
             functionCache[self] = nil
         end
     end