Added Sandbox, fixed ScrollArea tag

Author: ZhukMax

Cargo.toml

@@ -1,4 +1,4 @@
 [workspace]
-members = ["efx", "efx-core", "efx-attrnames"]
+members = ["efx", "efx-core", "efx-attrnames", "efx-sandbox"]
 resolver = "2"
 rust-version = "1.85"

efx-sandbox/Cargo.toml

@@ -0,0 +1,11 @@
+[package]
+name = "efx-sandbox"
+version = "0.1.0"
+edition = "2024"
+rust-version = "1.85"
+publish = false
+
+[dependencies]
+eframe = "0.32"
+efx       = { path = "../efx" }
+efx-core  = { path = "../efx-core" }

efx-sandbox/src/main.rs

@@ -0,0 +1,65 @@
+use eframe::{egui, NativeOptions};
+use efx::efx;
+
+fn main() -> eframe::Result<()> {
+    let native = NativeOptions::default();
+    eframe::run_native(
+        "EFx Sandbox",
+        native,
+        Box::new(|_cc| Ok(Box::new(App::default()))),
+    )
+}
+
+#[derive(Default)]
+struct App {
+    counter: i32,
+    input: String,
+}
+
+impl eframe::App for App {
+    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
+        egui::CentralPanel::default().show(ctx, |ui| {
+            // Header
+            let _ = efx!(ui, r#"
+                <Column gap="8">
+                    <Label size="20" bold="true">EFx sandbox</Label>
+                    <Separator/>
+                </Column>
+            "#);
+
+            // Increment/decrement buttons - catch Response
+            ui.horizontal(|ui| {
+                let inc = efx!(ui, r#"<Button tooltip="Increment">+1</Button>"#);
+                if inc.clicked() { self.counter += 1; }
+
+                let dec = efx!(ui, r#"<Button tooltip="Decrement">-1</Button>"#);
+                if dec.clicked() { self.counter -= 1; }
+            });
+
+            // Dynamic text via {expr}
+            let _ = efx!(ui, r#"<Label>Counter: {self.counter}</Label>"#);
+
+            // Input field (binding directly to the state field)
+            let _ = efx!(ui, r#"<TextField value="self.input" hint="type here…"/>"#);
+
+            // Scrolling + different tags
+            let _ = efx!(ui, r##"
+                <ScrollArea axis="vertical" max-height="160" always-show="true" id="demo-log">
+                  <Column gap="6">
+                    <Label monospace="true">You typed: {self.input.clone()}</Label>
+                    <Row gap="8">
+                      <Hyperlink url="https://efxui.com" tooltip="Project site"/>
+                      <Hyperlink url="help:about" open_external="false">About</Hyperlink>
+                    </Row>
+                    <Separator/>
+                    <Row gap="10" wrap="true">
+                      <Button fill="#333333" rounding="8">A</Button>
+                      <Button frame="false">B</Button>
+                      <Button min_width="100" tooltip="Wide">Wide</Button>
+                    </Row>
+                  </Column>
+                </ScrollArea>
+            "##);
+        });
+    }
+}

efx/src/tags/scroll_area.rs

@@ -28,22 +28,34 @@ impl Tag for ScrollArea {
         let mut build = quote!( let mut __efx_sa = #axis; );
 
         if let Some(b) = self.attributes.always_show {
-            build.extend(quote!( __efx_sa = __efx_sa.always_show_scroll(#b); ));
+            if b {
+                build.extend(quote!(
+                    __efx_sa = __efx_sa.scroll_bar_visibility(
+                        egui::containers::scroll_area::ScrollBarVisibility::AlwaysVisible
+                    );
+                ));
+            } else {
+                build.extend(quote!(
+                    __efx_sa = __efx_sa.scroll_bar_visibility(
+                        egui::containers::scroll_area::ScrollBarVisibility::VisibleWhenNeeded
+                    );
+                ));
+            }
         }
         if let Some(b) = self.attributes.bottom {
-            build.extend(quote!( __efx_sa = __efx_sa.stick_to_bottom(#b);   ));
+            build.extend(quote!( __efx_sa = __efx_sa.stick_to_bottom(#b); ));
         }
         if let Some(b) = self.attributes.right {
-            build.extend(quote!( __efx_sa = __efx_sa.stick_to_right(#b);    ));
+            build.extend(quote!( __efx_sa = __efx_sa.stick_to_right(#b); ));
         }
         if let Some(h) = self.attributes.max_height {
-            build.extend(quote!( __efx_sa = __efx_sa.max_height(#h as _);   ));
+            build.extend(quote!( __efx_sa = __efx_sa.max_height(#h as _); ));
         }
         if let Some(w) = self.attributes.max_width {
-            build.extend(quote!( __efx_sa = __efx_sa.max_width(#w as _);    ));
+            build.extend(quote!( __efx_sa = __efx_sa.max_width(#w as _); ));
         }
         if let Some(id) = self.attributes.id.clone() {
-            build.extend(quote!( __efx_sa = __efx_sa.id_source(#id);        ));
+            build.extend(quote!( __efx_sa = __efx_sa.id_salt(#id); ));
         }
 
         build