More widgets stuff, cleaning code

druid/widget/properties_panel/properties/property_button.gui

@@ -23,11 +23,11 @@ nodes {
     x: -200.0
   }
   scale {
-    x: 0.65
-    y: 0.65
+    x: 0.5
+    y: 0.5
   }
   size {
-    x: 200.0
+    x: 350.0
     y: 40.0
   }
   color {
@@ -50,6 +50,7 @@ nodes {
     y: 1.0
     z: 1.0
   }
+  adjust_mode: ADJUST_MODE_STRETCH
   parent: "root"
   inherit_alpha: true
   outline_alpha: 0.0
@@ -119,12 +120,12 @@ nodes {
 }
 nodes {
   scale {
-    x: 0.65
-    y: 0.65
+    x: 0.5
+    y: 0.5
   }
   size {
-    x: 250.0
-    y: 30.0
+    x: 380.0
+    y: 50.0
   }
   color {
     x: 0.722

druid/widget/properties_panel/properties/property_button.lua

@@ -1,3 +1,5 @@
+local color = require("druid.color")
+
 ---@class property_button: druid.widget
 ---@field root node
 ---@field container druid.container
@@ -7,11 +9,7 @@
 ---@field druid druid_instance
 local M = {}
 
----@param template string
----@param nodes table<hash, node>
-function M:init(template, nodes)
-	self.druid = self:get_druid(template, nodes)
-
+function M:init()
 	self.root = self:get_node("root")
 	self.text_name = self.druid:new_text("text_name")
 	self.selected = self:get_node("selected")
@@ -21,7 +19,9 @@ function M:init(template, nodes)
 	self.text_button = self.druid:new_text("text_button")
 
 	self.container = self.druid:new_container(self.root)
-	self.container:add_container("text_name")
+	self.container:add_container("text_name", nil, function(_, size)
+		self.text_button:set_size(size)
+	end)
 	self.container:add_container("E_Anchor")
 end
 
@@ -32,4 +32,17 @@ function M:on_click()
 end
 
 
+---@param text string
+---@return property_button
+function M:set_text_button(text)
+	self.text_button:set_text(text)
+	return self
+end
+
+
+function M:set_color(color_value)
+	color.set_color(self:get_node("button"), color_value)
+end
+
+
 return M

druid/widget/properties_panel/properties/property_checkbox.gui

@@ -23,11 +23,11 @@ nodes {
     x: -200.0
   }
   scale {
-    x: 0.65
-    y: 0.65
+    x: 0.5
+    y: 0.5
   }
   size {
-    x: 200.0
+    x: 360.0
     y: 40.0
   }
   color {

druid/widget/properties_panel/properties/property_checkbox.lua

@@ -1,16 +1,13 @@
 ---@class property_checkbox: druid.widget
 ---@field root node
 ---@field druid druid_instance
----@field text_name druid.lang_text
+---@field text_name druid.text
 ---@field button druid.button
 ---@field selected node
 local M = {}
 
 
----@param template string
----@param nodes table<hash, node>
-function M:init(template, nodes)
-	self.druid = self:get_druid(template, nodes)
+function M:init()
 	self.root = self:get_node("root")
 
 	self.icon = self:get_node("icon")
@@ -19,7 +16,7 @@ function M:init(template, nodes)
 	self.selected = self:get_node("selected")
 	gui.set_alpha(self.selected, 0)
 
-	self.text_name = self.druid:new_lang_text("text_name")
+	self.text_name = self.druid:new_text("text_name")
 
 	self.button = self.druid:new_button("button", self.on_click)
 

druid/widget/properties_panel/properties/property_input.gui

@@ -0,0 +1,143 @@
+fonts {
+  name: "text_bold"
+  font: "/druid/fonts/text_bold.font"
+}
+textures {
+  name: "druid"
+  texture: "/druid/druid.atlas"
+}
+nodes {
+  size {
+    x: 400.0
+    y: 40.0
+  }
+  type: TYPE_BOX
+  texture: "druid/empty"
+  id: "root"
+  adjust_mode: ADJUST_MODE_STRETCH
+  inherit_alpha: true
+  visible: false
+}
+nodes {
+  position {
+    x: -200.0
+  }
+  scale {
+    x: 0.5
+    y: 0.5
+  }
+  size {
+    x: 350.0
+    y: 50.0
+  }
+  color {
+    x: 0.463
+    y: 0.475
+    z: 0.49
+  }
+  type: TYPE_TEXT
+  text: "Button"
+  font: "text_bold"
+  id: "text_name"
+  pivot: PIVOT_W
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+  parent: "root"
+  inherit_alpha: true
+  outline_alpha: 0.0
+  shadow_alpha: 0.0
+}
+nodes {
+  position {
+    x: 200.0
+  }
+  size {
+    x: 200.0
+    y: 40.0
+  }
+  type: TYPE_BOX
+  id: "E_Anchor"
+  pivot: PIVOT_E
+  parent: "root"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+  visible: false
+}
+nodes {
+  position {
+    x: -100.0
+  }
+  type: TYPE_TEMPLATE
+  id: "rich_input"
+  parent: "E_Anchor"
+  inherit_alpha: true
+  template: "/druid/custom/rich_input/rich_input.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "rich_input/root"
+  parent: "rich_input"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "rich_input/button"
+  parent: "rich_input/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "rich_input/placeholder_text"
+  parent: "rich_input/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "rich_input/input_text"
+  parent: "rich_input/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "rich_input/cursor_node"
+  parent: "rich_input/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "rich_input/cursor_text"
+  parent: "rich_input/cursor_node"
+  template_node_child: true
+}
+nodes {
+  position {
+    x: -100.0
+    y: -20.0
+  }
+  size {
+    x: 200.0
+    y: 4.0
+  }
+  color {
+    x: 0.894
+    y: 0.506
+    z: 0.333
+  }
+  type: TYPE_BOX
+  texture: "druid/pixel"
+  id: "selected"
+  pivot: PIVOT_S
+  adjust_mode: ADJUST_MODE_STRETCH
+  parent: "E_Anchor"
+  inherit_alpha: true
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT

druid/widget/properties_panel/properties/property_input.lua

@@ -0,0 +1,38 @@
+---@class property_input: druid.widget
+---@field root node
+---@field container druid.container
+---@field text_name druid.text
+---@field button druid.button
+---@field text_button druid.text
+---@field druid druid_instance
+local M = {}
+
+function M:init()
+	self.root = self:get_node("root")
+	self.text_name = self.druid:new_text("text_name")
+	self.selected = self:get_node("selected")
+	gui.set_alpha(self.selected, 0)
+
+	self.rich_input = self.druid:new_rich_input("rich_input")
+
+	self.container = self.druid:new_container(self.root)
+	self.container:add_container("text_name")
+	self.container:add_container("E_Anchor")
+end
+
+
+function M:on_click()
+	gui.set_alpha(self.selected, 1)
+	gui.animate(self.selected, "color.w", 0, gui.EASING_INSINE, 0.16)
+end
+
+
+---@param text string
+---@return property_input
+function M:set_text_button(text)
+	self.text_button:set_text(text)
+	return self
+end
+
+
+return M

druid/widget/properties_panel/properties/property_slider.gui

@@ -23,11 +23,11 @@ nodes {
     x: -200.0
   }
   scale {
-    x: 0.65
-    y: 0.65
+    x: 0.5
+    y: 0.5
   }
   size {
-    x: 200.0
+    x: 380.0
     y: 40.0
   }
   color {

druid/widget/properties_panel/properties/property_slider.lua

@@ -2,23 +2,19 @@
 ---@field root node
 ---@field container druid.container
 ---@field druid druid_instance
----@field text_name druid.lang_text
+---@field text_name druid.text
 ---@field text_value druid.text
 ---@field slider druid.slider
 local M = {}
 
 
----@param template string
----@param nodes table<hash, node>
-function M:init(template, nodes)
-	self.druid = self:get_druid(template, nodes)
-
+function M:init()
 	self.root = self:get_node("root")
 	self.selected = self:get_node("selected")
 	gui.set_alpha(self.selected, 0)
 	self._value = 0
 
-	self.text_name = self.druid:new_lang_text("text_name") --[[@as druid.lang_text]]
+	self.text_name = self.druid:new_text("text_name")
 	self.text_value = self.druid:new_text("text_value")
 	self.slider = self.druid:new_slider("slider_pin", vmath.vector3(55, 0, 0), self._on_slider_change_by_user) --[[@as druid.slider]]
 	self.slider:set_input_node("slider")
@@ -36,7 +32,7 @@ end
 ---@param callback fun(value:number):string
 function M:set_text_function(callback)
 	self._text_function = callback
-	self.text_value:set_to(self._text_function(self._value))
+	self.text_value:set_text(self._text_function(self._value))
 end
 
 

druid/widget/properties_panel/properties/property_text.gui

@@ -0,0 +1,96 @@
+fonts {
+  name: "text_bold"
+  font: "/druid/fonts/text_bold.font"
+}
+textures {
+  name: "druid"
+  texture: "/druid/druid.atlas"
+}
+nodes {
+  size {
+    x: 400.0
+    y: 40.0
+  }
+  type: TYPE_BOX
+  texture: "druid/empty"
+  id: "root"
+  adjust_mode: ADJUST_MODE_STRETCH
+  inherit_alpha: true
+  visible: false
+}
+nodes {
+  position {
+    x: -200.0
+  }
+  scale {
+    x: 0.5
+    y: 0.5
+  }
+  size {
+    x: 400.0
+    y: 50.0
+  }
+  color {
+    x: 0.463
+    y: 0.475
+    z: 0.49
+  }
+  type: TYPE_TEXT
+  text: "Text"
+  font: "text_bold"
+  id: "text_name"
+  pivot: PIVOT_W
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+  parent: "root"
+  inherit_alpha: true
+  outline_alpha: 0.0
+  shadow_alpha: 0.0
+}
+nodes {
+  position {
+    x: 200.0
+  }
+  scale {
+    x: 0.5
+    y: 0.5
+  }
+  size {
+    x: 350.0
+    y: 50.0
+  }
+  color {
+    x: 0.722
+    y: 0.741
+    z: 0.761
+  }
+  type: TYPE_TEXT
+  text: "Text"
+  font: "text_bold"
+  id: "text_right"
+  pivot: PIVOT_E
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+  parent: "root"
+  inherit_alpha: true
+  outline_alpha: 0.0
+  shadow_alpha: 0.0
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT

druid/widget/properties_panel/properties/property_text.lua

@@ -0,0 +1,39 @@
+---@class property_text: druid.widget
+---@field root node
+---@field container druid.container
+---@field text_name druid.text
+---@field text_right druid.text
+local M = {}
+
+function M:init()
+	self.root = self:get_node("root")
+	self.text_name = self.druid:new_text("text_name")
+	self.text_right = self.druid:new_text("text_right", "")
+
+	self.container = self.druid:new_container(self.root)
+	self.container:add_container("text_name", nil, function(_, size)
+		self.text_name:set_size(size)
+	end)
+	self.container:add_container("text_right", nil, function(_, size)
+		self.text_right:set_size(size)
+	end)
+end
+
+
+---@param text string
+---@return property_text
+function M:set_text(text)
+	self.text_name:set_text(text)
+	return self
+end
+
+
+---@param text string
+---@return property_text
+function M:set_right_text(text)
+	self.text_right:set_text(text or "")
+	return self
+end
+
+
+return M

druid/widget/properties_panel/properties_panel.gui

@@ -33,15 +33,31 @@ nodes {
 }
 nodes {
   position {
-    x: -192.0
-    y: 116.0
-  }
-  scale {
-    x: 0.8
-    y: 0.8
+    y: 120.0
   }
   size {
-    x: 245.0
+    x: 400.0
+    y: 40.0
+  }
+  type: TYPE_BOX
+  id: "header"
+  pivot: PIVOT_N
+  parent: "root"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+  visible: false
+}
+nodes {
+  position {
+    x: -192.0
+    y: -8.0
+  }
+  scale {
+    x: 0.5
+    y: 0.5
+  }
+  size {
+    x: 500.0
     y: 50.0
   }
   color {
@@ -64,15 +80,49 @@ nodes {
     y: 1.0
     z: 1.0
   }
-  parent: "root"
+  parent: "header"
   inherit_alpha: true
   outline_alpha: 0.0
   shadow_alpha: 0.0
 }
+nodes {
+  position {
+    x: 192.0
+    y: -4.0
+  }
+  color {
+    x: 0.306
+    y: 0.31
+    z: 0.314
+  }
+  type: TYPE_BOX
+  texture: "druid/icon_drag"
+  id: "icon_drag"
+  pivot: PIVOT_NE
+  parent: "header"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    y: -120.0
+  }
+  size {
+    x: 400.0
+    y: 190.0
+  }
+  type: TYPE_BOX
+  id: "content"
+  pivot: PIVOT_S
+  parent: "root"
+  inherit_alpha: true
+  size_mode: SIZE_MODE_AUTO
+  visible: false
+}
 nodes {
   position {
     x: -200.0
-    y: 70.0
+    y: 190.0
   }
   size {
     x: 400.0
@@ -84,7 +134,7 @@ nodes {
   xanchor: XANCHOR_LEFT
   pivot: PIVOT_NW
   adjust_mode: ADJUST_MODE_STRETCH
-  parent: "root"
+  parent: "content"
   inherit_alpha: true
   clipping_mode: CLIPPING_MODE_STENCIL
 }
@@ -109,51 +159,12 @@ nodes {
 }
 nodes {
   position {
-    x: -200.0
-    y: 115.0
-  }
-  scale {
-    x: 0.7
-    y: 0.7
-  }
-  size {
-    x: 570.0
-    y: 50.0
-  }
-  color {
-    x: 0.31
-    y: 0.318
-    z: 0.322
-  }
-  type: TYPE_TEXT
-  text: "No properties for this example"
-  font: "text_regular"
-  id: "text_no_properties"
-  pivot: PIVOT_NW
-  outline {
-    x: 1.0
-    y: 1.0
-    z: 1.0
-  }
-  shadow {
-    x: 1.0
-    y: 1.0
-    z: 1.0
-  }
-  parent: "root"
-  inherit_alpha: true
-  outline_alpha: 0.0
-  shadow_alpha: 0.0
-  enabled: false
-}
-nodes {
-  position {
-    y: 50.0
+    y: 170.0
   }
   type: TYPE_BOX
   texture: "druid/empty"
   id: "propeties"
-  parent: "root"
+  parent: "content"
   inherit_alpha: true
   size_mode: SIZE_MODE_AUTO
   visible: false
@@ -313,21 +324,107 @@ nodes {
 }
 nodes {
   position {
-    x: 192.0
-    y: 112.0
+    y: -150.0
   }
-  color {
-    x: 0.129
-    y: 0.141
-    z: 0.157
-  }
-  type: TYPE_BOX
-  texture: "druid/ui_circle_32"
-  id: "icon_drag"
-  pivot: PIVOT_NE
-  parent: "root"
+  type: TYPE_TEMPLATE
+  id: "property_input"
+  parent: "propeties"
   inherit_alpha: true
-  size_mode: SIZE_MODE_AUTO
+  template: "/druid/widget/properties_panel/properties/property_input.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "property_input/root"
+  parent: "property_input"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "property_input/text_name"
+  parent: "property_input/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "property_input/E_Anchor"
+  parent: "property_input/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEMPLATE
+  id: "property_input/rich_input"
+  parent: "property_input/E_Anchor"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "property_input/rich_input/root"
+  parent: "property_input/rich_input"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "property_input/rich_input/button"
+  parent: "property_input/rich_input/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "property_input/rich_input/placeholder_text"
+  parent: "property_input/rich_input/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "property_input/rich_input/input_text"
+  parent: "property_input/rich_input/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "property_input/rich_input/cursor_node"
+  parent: "property_input/rich_input/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "property_input/rich_input/cursor_text"
+  parent: "property_input/rich_input/cursor_node"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_BOX
+  id: "property_input/selected"
+  parent: "property_input/E_Anchor"
+  template_node_child: true
+}
+nodes {
+  position {
+    y: -200.0
+  }
+  type: TYPE_TEMPLATE
+  id: "property_text"
+  parent: "propeties"
+  inherit_alpha: true
+  template: "/druid/widget/properties_panel/properties/property_text.gui"
+}
+nodes {
+  type: TYPE_BOX
+  id: "property_text/root"
+  parent: "property_text"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "property_text/text_name"
+  parent: "property_text/root"
+  template_node_child: true
+}
+nodes {
+  type: TYPE_TEXT
+  id: "property_text/text_right"
+  parent: "property_text/root"
+  template_node_child: true
 }
 material: "/builtins/materials/gui.material"
 adjust_reference: ADJUST_REFERENCE_PARENT

druid/widget/properties_panel/properties_panel.lua

@@ -1,32 +1,41 @@
 local property_checkbox = require("druid.widget.properties_panel.properties.property_checkbox")
 local property_slider = require("druid.widget.properties_panel.properties.property_slider")
 local property_button = require("druid.widget.properties_panel.properties.property_button")
+local property_input = require("druid.widget.properties_panel.properties.property_input")
+local property_text = require("druid.widget.properties_panel.properties.property_text")
 
 ---@class properties_panel: druid.widget
 ---@field root node
----@field text_no_properties node
 ---@field scroll druid.scroll
 ---@field druid druid_instance
 local M = {}
 
----@param template string
----@param nodes table<hash, node>
-function M:init(template, nodes)
-	self.druid = self:get_druid(template, nodes)
 
-	--self.root = self.druid:new_container("root")
+function M:init()
 	self.root = self:get_node("root")
-	self.text_no_properties = self:get_node("text_no_properties")
+	self.content = self:get_node("content")
+
+	self.container = self.druid:new_container(self.root)
+	self.container:add_container("header")
+	self.container_content = self.container:add_container("content")
+	self.container_scroll_view = self.container_content:add_container("scroll_view")
+	self.contaienr_scroll_content = self.container_scroll_view:add_container("scroll_content")
+
+	self.default_size = self.container:get_size()
 
 	self.properties = {}
 
+	self.text_header = self.druid:new_text("text_header")
 	self.scroll = self.druid:new_scroll("scroll_view", "scroll_content")
 	self.layout = self.druid:new_layout("scroll_content", "vertical")
 		:set_hug_content(false, true)
+		:set_padding(nil, 0)
 
 	self.layout.on_size_changed:subscribe(self.on_size_changed, self)
 
-	self.drag_corner = self.druid:new_drag("icon_drag", self.on_drag_corner)
+	self.druid:new_drag("header", self.on_drag_widget)
+	self.druid:new_button("icon_drag", self.toggle_hide)
+		:set_style(nil)
 
 	self.property_checkbox_prefab = self:get_node("property_checkbox/root")
 	gui.set_enabled(self.property_checkbox_prefab, false)
@@ -37,17 +46,15 @@ function M:init(template, nodes)
 	self.property_button_prefab = self:get_node("property_button/root")
 	gui.set_enabled(self.property_button_prefab, false)
 
-	self.container = self.druid:new_container(self.root)
-	self.container:add_container("text_header")
-	self.container:add_container("icon_drag")
-	--self.container:create_draggable_corners()
+	self.property_input_prefab = self:get_node("property_input/root")
+	gui.set_enabled(self.property_input_prefab, false)
 
-	self.container_scroll_view = self.container:add_container("scroll_view")
-	self.contaienr_scroll_content = self.container_scroll_view:add_container("scroll_content")
+	self.property_text_prefab = self:get_node("property_text/root")
+	gui.set_enabled(self.property_text_prefab, false)
 end
 
 
-function M:on_drag_corner(dx, dy)
+function M:on_drag_widget(dx, dy)
 	local position = self.container:get_position()
 	self.container:set_position(position.x + dx, position.y + dy)
 end
@@ -55,15 +62,21 @@ end
 
 function M:clear()
 	for index = 1, #self.properties do
+		gui.delete_node(self.properties[index].root)
 		self.druid:remove(self.properties[index])
 	end
+	self.layout:clear_layout()
 	self.properties = {}
-	gui.set_enabled(self.text_no_properties, true)
 end
 
 
 function M:on_size_changed(new_size)
-	self.container:set_size(new_size.x, new_size.y + 50, gui.PIVOT_N)
+	self.container_content:set_size(new_size.x, new_size.y, gui.PIVOT_N)
+
+	self.default_size = vmath.vector3(new_size.x, new_size.y + 50, 0)
+	if not self.is_hidden then
+		self.container:set_size(self.default_size.x, self.default_size.y, gui.PIVOT_N)
+	end
 
 	local width = self.layout:get_size().x - self.layout.padding.x - self.layout.padding.z
 	for index = 1, #self.properties do
@@ -72,51 +85,39 @@ function M:on_size_changed(new_size)
 end
 
 
----@param text_id string
+---@param text string
 ---@param initial_value boolean
 ---@param on_change_callback function
 ---@return property_checkbox
-function M:add_checkbox(text_id, initial_value, on_change_callback)
+function M:add_checkbox(text, initial_value, on_change_callback)
+	text = tostring(text)
+
 	local nodes = gui.clone_tree(self.property_checkbox_prefab)
 	local instance = self.druid:new_widget(property_checkbox, "property_checkbox", nodes)
-	instance.text_name:set_to(text_id)
+	self:add_property(instance)
+
+	instance.text_name:set_to(text)
 	instance:set_value(initial_value, true)
 	instance.button.on_click:subscribe(function()
 		on_change_callback(instance:get_value())
 	end)
 
-	gui.set_enabled(instance.root, true)
-	self.layout:add(instance.root)
-	table.insert(self.properties, instance)
-
-	local width = self.layout:get_size().x - self.layout.padding.x - self.layout.padding.z
-	instance.container:set_size(width)
-
-	gui.set_enabled(self.text_no_properties, false)
-
 	return instance
 end
 
 
----@param text_id string
+---@param text string
 ---@param initial_value number
 ---@param on_change_callback function
 ---@return property_slider
-function M:add_slider(text_id, initial_value, on_change_callback)
+function M:add_slider(text, initial_value, on_change_callback)
+	text = tostring(text)
 	local nodes = gui.clone_tree(self.property_slider_prefab)
 	local instance = self.druid:new_widget(property_slider, "property_slider", nodes)
-	instance.text_name:set_to(text_id)
+	self:add_property(instance)
+
+	instance.text_name:set_text(text)
 	instance:set_value(initial_value, true)
-
-	gui.set_enabled(instance.root, true)
-	self.layout:add(instance.root)
-	table.insert(self.properties, instance)
-
-	local width = self.layout:get_size().x - self.layout.padding.x - self.layout.padding.z
-	instance.container:set_size(width)
-
-	gui.set_enabled(self.text_no_properties, false)
-
 	instance.slider.on_change_value:subscribe(function(_, value)
 		on_change_callback(value)
 	end)
@@ -125,23 +126,15 @@ function M:add_slider(text_id, initial_value, on_change_callback)
 end
 
 
----@param text_id string
+---@param text string
 ---@param on_click_callback function|nil
 ---@param callback_context any|nil
-function M:add_button(text_id, on_click_callback, callback_context)
+function M:add_button(text, on_click_callback, callback_context)
 	local nodes = gui.clone_tree(self.property_button_prefab)
 	local instance = self.druid:new_widget(property_button, "property_button", nodes)
-	instance.text_name:set_to(text_id)
-
-	gui.set_enabled(instance.root, true)
-	self.layout:add(instance.root)
-	table.insert(self.properties, instance)
-
-	local width = self.layout:get_size().x - self.layout.padding.x - self.layout.padding.z
-	instance.container:set_size(width)
-
-	gui.set_enabled(self.text_no_properties, false)
+	self:add_property(instance)
 
+	instance.text_name:set_text(text)
 	if on_click_callback then
 		instance.button.on_click:subscribe(on_click_callback, callback_context)
 	end
@@ -150,6 +143,48 @@ function M:add_button(text_id, on_click_callback, callback_context)
 end
 
 
+function M:add_input(text, initial_value, on_change_callback)
+	text = tostring(text)
+	local nodes = gui.clone_tree(self.property_input_prefab)
+	local instance = self.druid:new_widget(property_input, "property_input", nodes)
+	self:add_property(instance)
+
+	instance.text_name:set_text(text)
+	instance.rich_input:set_text(initial_value)
+	instance.rich_input:set_placeholder("")
+	instance.rich_input.input.on_input_unselect:subscribe(function(_, value)
+		on_change_callback(value)
+	end)
+end
+
+
+---@param text string
+---@param right_text string|nil
+---@return property_text
+function M:add_text(text, right_text)
+	text = tostring(text)
+	local nodes = gui.clone_tree(self.property_text_prefab)
+	local instance = self.druid:new_widget(property_text, "property_text", nodes)
+	self:add_property(instance)
+
+	instance:set_text(text)
+	instance:set_right_text(right_text)
+	return instance
+end
+
+
+---@private
+function M:add_property(widget)
+	gui.set_enabled(widget.root, true)
+	self.layout:add(widget.root)
+	table.insert(self.properties, widget)
+	local width = self.layout:get_size().x - self.layout.padding.x - self.layout.padding.z
+	widget.container:set_size(width)
+
+	return widget
+end
+
+
 function M:remove(widget)
 	for index = 1, #self.properties do
 		if self.properties[index] == widget then
@@ -160,10 +195,19 @@ function M:remove(widget)
 			break
 		end
 	end
+end
 
-	if #self.properties == 0 then
-		gui.set_enabled(self.text_no_properties, true)
-	end
+
+function M:toggle_hide()
+	self.is_hidden = not self.is_hidden
+	local hidden_size = gui.get_size(self:get_node("header"))
+
+	local new_size = self.is_hidden and hidden_size or self.default_size
+	self.container:set_size(new_size.x, new_size.y, gui.PIVOT_N)
+
+	gui.set_enabled(self.content, not self.is_hidden)
+
+	return self
 end