add stripe, start changelog, clean

databasedav · databasedav · commit 1aa8716fff5b · 2025-12-27T03:58:42.000-08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,28 @@ the format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
 
 ## unreleased
 
+### changed
+
+- [jonmo](https://github.com/databasedav/jonmo) is now the default signals backend for haalka, the deprecated futures-signals backend is still available via feature flags
+    - to migrate seamlessly:
+        - update your haalka installation by disabling default features and adding the appropriate futures-signals feature, likely either `futures_signals_ui` or `futures_signals_text_input`
+        - replace `HaalkaPlugin` with `HaalkaFuturesSignalsPlugin`
+        - replace your haalka imports with `haalka::futures_signals`, e.g. `use haalka::prelude::*` should become `use haalka::futures_signals::prelude::*`
+        - once your application is functional again with the bevy 0.16 to 0.17 changes, re-add `HaalkaPlugin` and migrate your application logic to jonmo signals, which are semantically identical to futures-signals but use ECS components and systems as data sources; for example, all of your `Mutable`s will become `Component`s or `Resource`s; see the examples' diffs for reference migrations and feel free to ask questions in the [discord](https://discord.com/channels/691052431525675048/1343672205233360999)
+        - remove the futures-signals features and re-enable default features if desired
+- component and system based alignment management instead of baking it into alignable structs at compile time, high level API unchanged, see `align.rs`
+- `NodeBuilder` and `RawHaalkaEl` consolidated into jonmo's `JonmoBuilder`, `.update_raw_el` becomes `.with_builder`
+- `PointerEventAware`, `CursorOnHover`, and `UiRootable` methods no longer insert `Pickable::default()` into the element, it must now be managed by the user
+
+
+### added
+
+- warnings that cloning base element structs is a bug
+
+### removed
+
+- `impl_haalka_methods!` call for `Button` node type
+
 # 0.5.1 (2025-07-05)
 
 ### fixed
diff --git a/README.md b/README.md
@@ -133,11 +133,11 @@ All examples are compiled to wasm for both webgl2 and webgpu (check [compatibili
 
 - [**`button`**](https://github.com/databasedav/haalka/blob/main/examples/button.rs) [webgl2](https://databasedav.github.io/haalka/examples/webgl2/button/) [webgpu](https://databasedav.github.io/haalka/examples/webgpu/button/)
 
-    a basic button, port of <https://github.com/bevyengine/bevy/blob/main/examples/ui/button.rs>
+    a basic button, port of <https://github.com/bevyengine/bevy/blob/b176e1888c04b6c37035b85c115ad3a1266c22dd/examples/ui/button.rs>
 
 - [**`align`**](https://github.com/databasedav/haalka/blob/main/examples/align.rs) [webgl2](https://databasedav.github.io/haalka/examples/webgl2/align/) [webgpu](https://databasedav.github.io/haalka/examples/webgpu/align/)
 
-    alignment API demo, port of <https://github.com/MoonZoon/MoonZoon/tree/main/examples/align> and <https://github.com/MoonZoon/MoonZoon/tree/main/examples/align_content>
+    alignment API demo, port of <https://github.com/MoonZoon/MoonZoon/tree/19c6cf6b4d07cd27bee7758977ef1ea4d5b9933d/examples/align> and <https://github.com/MoonZoon/MoonZoon/tree/19c6cf6b4d07cd27bee7758977ef1ea4d5b9933d/examples/align_content>
 
 - [**`scroll`**](https://github.com/databasedav/haalka/blob/main/examples/scroll.rs) [webgl2](https://databasedav.github.io/haalka/examples/webgl2/scroll/) [webgpu](https://databasedav.github.io/haalka/examples/webgpu/scroll/)
 
diff --git a/examples/button.rs b/examples/button.rs
@@ -1,10 +1,9 @@
 //! Simple button, port of <https://github.com/bevyengine/bevy/blob/main/examples/ui/button.rs>.
 
 mod utils;
-use bevy_ui::Pressed;
 use utils::*;
 
-use bevy::prelude::*;
+use bevy::{prelude::*, ui::Pressed};
 use haalka::prelude::*;
 
 fn main() {
diff --git a/examples/character_editor.rs b/examples/character_editor.rs
@@ -8,12 +8,10 @@
 //! - On the top of the UI is a text field for the character name.
 
 mod utils;
-use bevy_input_focus::InputFocus;
-use bevy_ui::Pressed;
-use bevy_ui_text_input::{TextInputMode, TextInputPrompt};
 use utils::*;
 
-use bevy::prelude::*;
+use bevy::{input_focus::InputFocus, prelude::*, ui::Pressed};
+use bevy_ui_text_input::{TextInputMode, TextInputPrompt};
 use haalka::prelude::*;
 use strum::{self, IntoEnumIterator};
 
diff --git a/examples/dragging.rs b/examples/dragging.rs
@@ -1,10 +1,9 @@
 //! Dragging with z-index stacking
 
 mod utils;
-use bevy_ui::Pressed;
 use utils::*;
 
-use bevy::prelude::*;
+use bevy::{prelude::*, ui::Pressed};
 use haalka::prelude::*;
 
 fn main() {
diff --git a/examples/key_values_sorted.rs b/examples/key_values_sorted.rs
@@ -4,13 +4,12 @@
 //! (yes i take requests)
 
 mod utils;
-use bevy_input_focus::InputFocus;
 use bevy_ui_text_input::{TextInputContents, TextInputMode};
 use utils::*;
 
 use std::{cmp::Ordering, collections::HashMap};
 
-use bevy::prelude::*;
+use bevy::{input_focus::InputFocus, prelude::*};
 use haalka::{
     prelude::*,
     viewport_mutable::{LogicalRect, MutableViewport},
diff --git a/examples/main_menu.rs b/examples/main_menu.rs
@@ -7,11 +7,10 @@
 //!   - Keyboard/Controller: Separate styles for currently focused element.
 
 mod utils;
-use bevy_ui::Pressed;
 use haalka::impl_haalka_methods;
 use utils::*;
 
-use bevy::prelude::*;
+use bevy::{prelude::*, ui::Pressed};
 use haalka::prelude::*;
 use strum::{Display, EnumIter, IntoEnumIterator};
 
diff --git a/examples/many_buttons.rs b/examples/many_buttons.rs
@@ -1,11 +1,9 @@
 //! Experimental port of <https://github.com/aevyrie/bevy_mod_picking/blob/main/examples/many_buttons.rs>.
 
 mod utils;
-use bevy_ui::Pressed;
-use jonmo::builder::JonmoBuilder;
 use utils::*;
 
-use bevy::{diagnostic::LogDiagnosticsPlugin, prelude::*};
+use bevy::{diagnostic::LogDiagnosticsPlugin, prelude::*, ui::Pressed};
 use haalka::prelude::*;
 
 fn main() {
diff --git a/examples/nested_lists.rs b/examples/nested_lists.rs
@@ -1,11 +1,9 @@
 //! Nested dynamic lists, arbitrarily deeply nested retained reactivity, spurred by <https://discord.com/channels/691052431525675048/885021580353237032/1356769984474517617>
 
 mod utils;
-use bevy_color::palettes::css::DARK_GRAY;
-use bevy_ui::Overflow;
 use utils::*;
 
-use bevy::prelude::*;
+use bevy::{color::palettes::css::DARK_GRAY, prelude::*, ui::Overflow};
 use haalka::prelude::*;
 
 fn main() {
diff --git a/examples/responsive_menu.rs b/examples/responsive_menu.rs
@@ -5,12 +5,15 @@
 //!   buttons.
 
 mod utils;
-use bevy_ui::{Pressed, widget::NodeImageMode};
 use utils::*;
 
 use std::sync::OnceLock;
 
-use bevy::{prelude::*, window::WindowResized};
+use bevy::{
+    prelude::*,
+    ui::{Pressed, widget::NodeImageMode},
+    window::WindowResized,
+};
 use haalka::prelude::*;
 
 fn main() {
@@ -111,67 +114,58 @@ fn nine_slice_button() -> impl Element {
     .cursor(CursorIcon::System(SystemCursorIcon::Pointer))
 }
 
-fn horizontal() -> impl Element {
-    Row::<Node>::new()
-        .with_node(|mut node| {
-            node.width = Val::Percent(100.);
-            node.height = Val::Percent(100.);
-            node.column_gap = Val::Px(GAP);
-        })
-        .item(
-            Column::<Node>::new()
-                .with_node(|mut node| {
-                    node.width = Val::Percent(50.);
-                    node.height = Val::Percent(100.);
-                    node.row_gap = Val::Px(GAP);
-                })
-                .align_content(Align::center())
-                .items((0..8).map(|_| nine_slice_button())),
-        )
-        .item(El::<ImageNode>::new().image_node(ImageNode::new(image().clone())))
-}
-
-fn vertical() -> impl Element {
-    Column::<Node>::new()
-        .with_node(|mut node| {
-            node.width = Val::Percent(100.);
-            node.height = Val::Percent(100.);
-            node.row_gap = Val::Px(GAP);
-        })
-        .item(El::<ImageNode>::new().image_node(ImageNode::new(image().clone())))
-        .item(
-            Row::<Node>::new()
-                .multiline()
-                .align_content(Align::center())
-                .with_node(|mut node| {
-                    node.width = Val::Percent(100.);
-                    node.height = Val::Percent(50.);
-                    node.column_gap = Val::Px(GAP);
-                })
-                .items((0..8).map(|_| nine_slice_button())),
-        )
-}
-
 fn menu() -> impl Element {
-    let width = SignalBuilder::from_resource::<Width>().map_in(deref_copied);
+    let width = SignalBuilder::from_resource::<Width>().dedupe().map_in(deref_copied);
+    let is_wide = width.clone().map_in(|width| width > 400.).dedupe();
+    let image_el = || El::<ImageNode>::new().image_node(ImageNode::new(image().clone()));
     nine_slice_el(SignalBuilder::always(3))
         .with_node(|mut node| {
             node.height = Val::Px(BASE_SIZE);
             node.padding = UiRect::all(Val::Px(GAP));
         })
         .on_signal_with_node(
-            width
-                .clone()
-                .map_in(|width| BASE_SIZE.min(width))
-                .dedupe()
-                .map_in(Val::Px),
+            width.map_in(|width| BASE_SIZE.min(width)).dedupe().map_in(Val::Px),
             |mut node, width| node.width = width,
         )
-        .child_signal(
-            width
-                .map_in(|width| width > 400.)
-                .dedupe()
-                .map_bool_in(|| horizontal().type_erase(), || vertical().type_erase()),
+        .child(
+            Stripe::<Node>::new()
+                .direction_signal(
+                    is_wide
+                        .clone()
+                        .map_bool_in(|| stripe::Direction::Row, || stripe::Direction::Column),
+                )
+                .with_node(|mut node| {
+                    node.width = Val::Percent(100.);
+                    node.height = Val::Percent(100.);
+                    node.column_gap = Val::Px(GAP);
+                    node.row_gap = Val::Px(GAP);
+                })
+                .item_signal(is_wide.clone().not().map_true_in(image_el))
+                .item(
+                    Stripe::<Node>::new()
+                        .direction_signal(
+                            is_wide
+                                .clone()
+                                .map_bool_in(|| stripe::Direction::Column, || stripe::Direction::Row),
+                        )
+                        .multiline_row_signal(is_wide.clone().not())
+                        .align_content(Align::center())
+                        .on_signal_with_node(is_wide.clone().dedupe(), |mut node, wide| {
+                            if wide {
+                                node.width = Val::Percent(50.);
+                                node.height = Val::Percent(100.);
+                                node.row_gap = Val::Px(GAP);
+                                node.column_gap = Val::Px(0.);
+                            } else {
+                                node.width = Val::Percent(100.);
+                                node.height = Val::Percent(50.);
+                                node.column_gap = Val::Px(GAP);
+                                node.row_gap = Val::Px(0.);
+                            }
+                        })
+                        .items((0..8).map(|_| nine_slice_button())),
+                )
+                .item_signal(is_wide.clone().map_true_in(image_el)),
         )
 }
 
diff --git a/examples/utils.rs b/examples/utils.rs
@@ -13,9 +13,8 @@ use bevy::{
     text::prelude::*,
     ui::prelude::*,
     utils::prelude::*,
-    window::prelude::*,
+    window::{WindowResolution, prelude::*},
 };
-use bevy_window::WindowResolution;
 use haalka::prelude::*;
 
 // TODO: port https://github.com/mintlu8/bevy-rectray/blob/main/examples/accordion.rs
diff --git a/src/column.rs b/src/column.rs
@@ -17,8 +17,9 @@ use super::{
 };
 use crate::{clone_semantics_doc, impl_element_clone};
 
-/// [`Element`](super::element::Element) with vertically stacked children. Port of [MoonZoon](https://github.com/MoonZoon/MoonZoon)'s [`Column`](https://github.com/MoonZoon/MoonZoon/blob/main/crates/zoon/src/element/column.rs).
+/// [`Element`](super::element::Element) with vertically stacked children.
 ///
+/// Port of [MoonZoon](https://github.com/MoonZoon/MoonZoon)'s [`Column`](https://github.com/MoonZoon/MoonZoon/blob/19c6cf6b4d07cd27bee7758977ef1ea4d5b9933d/crates/zoon/src/element/column.rs).
 #[doc = clone_semantics_doc!("Column")]
 #[derive(Default)]
 pub struct Column<NodeType> {
diff --git a/src/derive.rs b/src/derive.rs
@@ -6,7 +6,7 @@ use bevy_ui::{prelude::*, widget::*, *};
 use jonmo::signal::Signal;
 use paste::paste;
 
-use super::{column::Column, el::El, element::BuilderWrapper, grid::Grid, row::Row, stack::Stack};
+use super::{column::Column, el::El, element::BuilderWrapper, grid::Grid, row::Row, stack::Stack, stripe::Stripe};
 
 // TODO: add link to usage in example challenge 4
 /// Implement [haalka](crate)-esque methods for any [`BuilderWrapper`] over the named components,
@@ -40,7 +40,7 @@ use super::{column::Column, el::El, element::BuilderWrapper, grid::Grid, row::Ro
 ///         &mut self.0
 ///     }
 /// }
-/// 
+///
 /// impl_haalka_methods! {
 ///     MyEl {
 ///        my_component_a: MyComponentA,
@@ -80,7 +80,7 @@ use super::{column::Column, el::El, element::BuilderWrapper, grid::Grid, row::Ro
 /// #     type EL = El<MyBundle>;
 /// #     fn element_mut(&mut self) -> &mut Self::EL { &mut self.0 }
 /// # }
-/// 
+///
 /// impl_haalka_methods! {
 ///     MyEl {
 ///        my_component_a: MyComponentA,
@@ -229,6 +229,7 @@ impl_haalka_methods_for_aligners_and_node_bundles! {
     Row,
     Stack,
     Grid,
+    Stripe,
 }
 
 // TODO: macro doesn't play nice with generics and chatgpt can't figure it out
diff --git a/src/el.rs b/src/el.rs
@@ -18,12 +18,13 @@ use crate::{clone_semantics_doc, impl_element_clone};
 
 // TODO: add the extra flag machinery that MoonZoon has to ensure that El's have exactly one child
 // (or child signal)
-/// Singleton [`Element`](super::element::Element) with exactly one child (not yet enforced). Port of [MoonZoon](https://github.com/MoonZoon/MoonZoon)'s [`El`](https://github.com/MoonZoon/MoonZoon/blob/main/crates/zoon/src/element/el.rs).
+/// Singleton [`Element`](super::element::Element) with exactly one child (not yet enforced).
 ///
 /// While multiple children can still be declared with repeated calls to [`.child`](`El::child`) or
 /// [`.child_signal`](`El::child_signal`), their relative alignment was arbitrarily chosen to match
 /// [MoonZoon's implementation](https://github.com/MoonZoon/MoonZoon/blob/fc73b0d90bf39be72e70fdcab4f319ea5b8e6cfc/crates/zoon/src/element/el.rs#L41-L69) and should not be relied on.
 ///
+/// Port of [MoonZoon](https://github.com/MoonZoon/MoonZoon)'s [`El`](https://github.com/MoonZoon/MoonZoon/blob/19c6cf6b4d07cd27bee7758977ef1ea4d5b9933d/crates/zoon/src/element/el.rs).
 #[doc = clone_semantics_doc!("El")]
 #[derive(Default)]
 pub struct El<NodeType> {
diff --git a/src/element.rs b/src/element.rs
diff --git a/src/grid.rs b/src/grid.rs
diff --git a/src/lib.rs b/src/lib.rs
diff --git a/src/pointer_event_aware.rs b/src/pointer_event_aware.rs
diff --git a/src/row.rs b/src/row.rs
diff --git a/src/stack.rs b/src/stack.rs
diff --git a/src/stripe.rs b/src/stripe.rs
