diff --git a/.claude/worktrees/agent-a7ed3fe3 b/.claude/worktrees/agent-a7ed3fe3
new file mode 160000
index 000000000..ab7e53c2f
--- /dev/null
+++ b/.claude/worktrees/agent-a7ed3fe3
@@ -0,0 +1 @@
+Subproject commit ab7e53c2f16a17943fe3cebbd434fee632c2109a
diff --git a/.claude/worktrees/agent-a869dcda b/.claude/worktrees/agent-a869dcda
new file mode 160000
index 000000000..3b693c45d
--- /dev/null
+++ b/.claude/worktrees/agent-a869dcda
@@ -0,0 +1 @@
+Subproject commit 3b693c45d3145171f9c62c2b1aa00bdad979b9c5
diff --git a/.gitignore b/.gitignore
index 180410f1c..d8595af7c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@
 /.lapce
 /.idea
 /.zed
+/.claude
 .DS_Store
 rustc-ice*
 *.orig
diff --git a/Cargo.lock b/Cargo.lock
index 9d1e6e522..861c122e2 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1551,6 +1551,7 @@ dependencies = [
  "floem_reactive",
  "floem_renderer",
  "floem_skia_renderer",
+ "floem_style",
  "floem_tiny_skia_renderer",
  "floem_vello_renderer",
  "floem_vger_renderer",
@@ -1601,6 +1602,7 @@ name = "floem-editor-core"
 version = "0.2.0"
 dependencies = [
  "bitflags 2.11.0",
+ "floem_style",
  "itertools 0.14.0",
  "lapce-xi-rope",
  "memchr",
@@ -1862,6 +1864,7 @@ version = "0.2.0"
 dependencies = [
  "crossbeam",
  "floem-winit",
+ "floem_style",
  "fontique",
  "futures",
  "parking_lot",
@@ -1888,6 +1891,23 @@ dependencies = [
  "resvg",
 ]
 
+[[package]]
+name = "floem_style"
+version = "0.2.0"
+dependencies = [
+ "bitflags 2.11.0",
+ "imbl",
+ "parley",
+ "paste",
+ "peniko",
+ "rustc-hash 2.1.1",
+ "slotmap",
+ "smallvec",
+ "taffy",
+ "unic-langid",
+ "web-time",
+]
+
 [[package]]
 name = "floem_tiny_skia_renderer"
 version = "0.2.0"
diff --git a/Cargo.toml b/Cargo.toml
index 5b03934fb..ef0b3b3ee 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -8,6 +8,7 @@ members = [
   "tiny_skia",
   "reactive",
   "editor-core",
+  "style",
   "examples/*",
   "ui-events-winit",
   "test",
@@ -21,6 +22,7 @@ default-members = [
   "tiny_skia",
   "reactive",
   "editor-core",
+  "style",
   "ui-events-winit",
   "test",
 ]
@@ -96,6 +98,7 @@ floem_vello_renderer = { path = "vello", version = "0.2.0", optional = true }
 floem_vger_renderer = { path = "vger", version = "0.2.0", optional = true }
 floem_tiny_skia_renderer = { path = "tiny_skia", version = "0.2.0" }
 floem_reactive = { path = "reactive", version = "0.2.0" }
+floem_style = { path = "style", version = "0.2.0" }
 floem-editor-core = { path = "editor-core", version = "0.2.0", optional = true }
 copypasta = { version = "0.10", default-features = false, features = [
   "wayland",
@@ -185,7 +188,7 @@ image-webp = ["image/webp"]
 tokio = ["dep:tokio"]
 # rfd (file dialog) async runtime
 crossbeam = ["dep:crossbeam", "floem_renderer/crossbeam"]
-localization = ["dep:fluent-bundle", "dep:unic-langid", "dep:sys-locale", "dep:ouroboros"]
+localization = ["dep:fluent-bundle", "dep:unic-langid", "dep:sys-locale", "dep:ouroboros", "floem_style/localization"]
 
 [dev-dependencies]
 criterion = { version = "0.8.1", features = ["html_reports"] }
diff --git a/editor-core/Cargo.toml b/editor-core/Cargo.toml
index cb9444a37..bab119bd3 100644
--- a/editor-core/Cargo.toml
+++ b/editor-core/Cargo.toml
@@ -11,6 +11,7 @@ serde = { workspace = true, optional = true }
 strum = { workspace = true }
 strum_macros = { workspace = true }
 ui-events.workspace = true
+floem_style = { path = "../style", version = "0.2.0" }
 
 lapce-xi-rope = { workspace = true }
 
diff --git a/editor-core/src/indent.rs b/editor-core/src/indent.rs
index c2518dd14..7ea37e6fa 100644
--- a/editor-core/src/indent.rs
+++ b/editor-core/src/indent.rs
@@ -25,6 +25,17 @@ impl std::fmt::Display for IndentStyle {
     }
 }
 
+impl floem_style::StylePropValue for IndentStyle {}
+
+impl floem_style::PropDebugView for IndentStyle {
+    fn debug_view(
+        &self,
+        r: &dyn floem_style::InspectorRender,
+    ) -> Option<Box<dyn std::any::Any>> {
+        Some(r.text(&self.to_string()))
+    }
+}
+
 impl IndentStyle {
     pub const LONGEST_INDENT: &'static str = "        "; // 8 spaces
     pub const DEFAULT_INDENT: IndentStyle = IndentStyle::Spaces(4);
diff --git a/renderer/Cargo.toml b/renderer/Cargo.toml
index 4bd8c0c8b..08bdfc11b 100644
--- a/renderer/Cargo.toml
+++ b/renderer/Cargo.toml
@@ -16,6 +16,7 @@ winit = { workspace = true }
 wgpu = { workspace = true }
 crossbeam = { version = "0.8", optional = true }
 futures = "0.3.32"
+floem_style = { path = "../style", version = "0.2.0" }
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 wasm-bindgen-futures = { version = "0.4" }
diff --git a/renderer/src/text/attrs.rs b/renderer/src/text/attrs.rs
index 3096964ca..406f06ed0 100644
--- a/renderer/src/text/attrs.rs
+++ b/renderer/src/text/attrs.rs
@@ -106,52 +106,7 @@ impl FamilyOwned {
     }
 }
 
-/// Specifies how line height is computed for text layout.
-///
-/// # Example
-///
-/// ```
-/// use floem_renderer::text::{Attrs, LineHeightValue};
-///
-/// // 1.5x the font size (e.g. 24px for a 16px font).
-/// let attrs = Attrs::new().line_height(LineHeightValue::Normal(1.5));
-///
-/// // Fixed 20-point line height regardless of font size.
-/// let attrs = Attrs::new().line_height(LineHeightValue::Pt(20.0));
-/// ```
-#[derive(Debug, Clone, Copy, PartialEq)]
-pub enum LineHeightValue {
-    /// A multiplier of the font size (e.g. `1.0` means line height equals font size).
-    Normal(f32),
-    /// An absolute line height in points.
-    Pt(f32),
-}
-impl LineHeightValue {
-    pub fn resolve(&self, font_size: f32) -> f32 {
-        match self {
-            LineHeightValue::Pt(value) => *value,
-            LineHeightValue::Normal(multiplier) => font_size * multiplier,
-        }
-    }
-}
-
-impl From<f32> for LineHeightValue {
-    fn from(value: f32) -> Self {
-        LineHeightValue::Normal(value)
-    }
-}
-
-impl From<f64> for LineHeightValue {
-    fn from(value: f64) -> Self {
-        LineHeightValue::Normal(value as f32)
-    }
-}
-
-impl From<i32> for LineHeightValue {
-    fn from(value: i32) -> Self {
-        LineHeightValue::Normal(value as f32)
-    }
-}
+pub use floem_style::LineHeightValue;
 
 /// Text styling attributes used to configure font properties, color, and layout.
 ///
diff --git a/src/animate/mod.rs b/src/animate/mod.rs
index c013f2622..d02968a9b 100644
--- a/src/animate/mod.rs
+++ b/src/animate/mod.rs
@@ -1,672 +1,246 @@
 #![deny(missing_docs)]
 
 //! Animations
-
-pub mod easing;
-
+//!
+//! This module is a thin reactive wrapper around the engine animation
+//! types that live in [`floem_style::animation`]. The engine owns
+//! keyframes, the state machine, interpolation math, and easings; this
+//! wrapper adds floem-specific pieces the engine can't depend on —
+//! reactive triggers for lifecycle callbacks, `RwSignal`-backed command
+//! wiring, and `ViewId` routing for imperative `.start()` / `.pause()` /
+//! `.state()` controls.
+
+pub use floem_style::easing;
 pub use easing::{Bezier, Easing, Linear, Spring, Step, StepPosition};
 
-use crate::{
-    ViewId,
-    style::{Style, StylePropRef},
-    unit::UnitExt,
-    view::StackOffset,
+pub use floem_style::{
+    AnimStateCommand, AnimStateKind, AnimationEvents, KeyFrame, KeyFrameStyle, PropCache,
+    RepeatMode, ReverseOnce,
 };
 
-use std::any::Any;
-use std::rc::Rc;
+use crate::{ViewId, view::StackOffset};
 
-use crate::platform::{Duration, Instant};
 use floem_reactive::{RwSignal, SignalGet, Trigger, UpdaterEffect};
-use smallvec::{SmallVec, smallvec};
-
-/// Holds a resolved prop, along with the associated frame id and easing function
-#[derive(Clone, Debug)]
-pub struct KeyFrameProp {
-    // the style prop value. This will either come from an animation frameor it will be pulled from the computed style
-    val: Rc<dyn Any>,
-    // the frame id
-    id: u16,
-    /// This easing will be used while animating towards this keyframe. while this prop is the lower one this easing function will not be used.
-    easing: Rc<dyn Easing>,
-}
-
-/// Defines whether the style in a key frame should be stored in the frame or it it should be pulled from the computed style
-#[derive(Clone, Debug)]
-pub enum KeyFrameStyle {
-    /// when computed style, props will be pulled from the computed style
-    Computed,
-    /// When using style, the props will be stored in the key frame
-    Style(Style),
-}
-impl From<Style> for KeyFrameStyle {
-    fn from(value: Style) -> Self {
-        Self::Style(value)
-    }
-}
-
-/// Holds the style properties for a keyframe as well as the easing function that should be used when animating towards this frame
-#[derive(Clone, Debug)]
-pub struct KeyFrame {
-    #[allow(unused)]
-    /// the key frame id. should be less than the maximum key frame number for a given animation
-    id: u16,
-    style: KeyFrameStyle,
-    /// This easing will be used while animating towards this keyframe.
-    easing: Rc<dyn Easing>,
-}
-impl KeyFrame {
-    /// Create a new keyframe with the given id
-    pub fn new(id: u16) -> Self {
-        Self {
-            id,
-            style: Style::default().into(),
-            easing: Rc::new(Spring::default()),
-        }
-    }
-
-    /// Apply a style to this keyframe.
-    pub fn style(mut self, style: impl Fn(Style) -> Style) -> Self {
-        let style = style(Style::new());
-        match &mut self.style {
-            cs @ KeyFrameStyle::Computed => *cs = style.into(),
-            KeyFrameStyle::Style(s) => s.apply_mut(&style),
-        }
-        self
-    }
-
-    /// Set this keyframe to pull its props from the computed style. The will completely overwrite any previously applied styles to this keyframe.
-    pub fn computed_style(mut self) -> Self {
-        self.style = KeyFrameStyle::Computed;
-        self
-    }
-
-    /// This easing function will be used while animating towards this keyframe
-    pub fn ease(mut self, easing: impl Easing + 'static) -> Self {
-        self.easing = Rc::new(easing);
-        self
-    }
-
-    /// Sets the easing function to the bezier ease in and out
-    pub fn ease_in_out(self) -> Self {
-        self.ease(Bezier::ease_in_out())
-    }
-
-    /// Sets the easing function to the default spring
-    pub fn ease_spring(self) -> Self {
-        self.ease(Spring::default())
-    }
-
-    /// Sets the easing function to a linear easing
-    pub fn ease_linear(self) -> Self {
-        self.ease(Linear)
-    }
-
-    /// Sets the easing function to the bezier ease in
-    pub fn ease_in(self) -> Self {
-        self.ease(Bezier::ease_in())
-    }
-
-    /// Sets the easing function to the bezier ease out
-    pub fn ease_out(self) -> Self {
-        self.ease(Bezier::ease_out())
-    }
-}
-
-/// Holds frame ids and marks if the frame is supposed to pull its props from a style or from the computed style
-#[derive(Debug, Clone, Copy, Eq)]
-enum PropFrameKind {
-    Normal(u16),
-    Computed(u16),
-}
-impl PropFrameKind {
-    const fn inner(self) -> u16 {
-        match self {
-            Self::Normal(val) => val,
-            Self::Computed(val) => val,
-        }
-    }
-}
-impl PartialOrd for PropFrameKind {
-    fn partial_cmp(&self, other: &Self) -> Option<std::cmp::Ordering> {
-        Some(self.cmp(other))
-    }
-}
-impl Ord for PropFrameKind {
-    fn cmp(&self, other: &Self) -> std::cmp::Ordering {
-        self.inner().cmp(&other.inner())
-    }
-}
-impl PartialEq for PropFrameKind {
-    fn eq(&self, other: &Self) -> bool {
-        self.inner() == other.inner()
-    }
-}
-
-/// Holds the pair of frame ids that a single prop is animating between
-#[derive(Debug, Clone, Copy)]
-struct PropFrames {
-    // the closeset frame to the target idx that is less than or equal to current
-    lower_idx: Option<PropFrameKind>,
-    // the closeset frame to the target idx that is greater than current
-    upper_idx: Option<PropFrameKind>,
-}
-
-/// This cache enables looking up which keyframes contain a given prop, enabling animation of individual props,
-/// even if they are sparsely located in the keyframes, with multiple keyframes between each instance of the prop
-#[derive(Debug, Clone, Default)]
-pub(crate) struct PropCache {
-    /// A map of style properties to a list of all frame ids containing that prop
-    prop_map: imbl::HashMap<StylePropRef, SmallVec<[PropFrameKind; 5]>>,
-    /// a cached list of all keyframes that use the computed style instead of a separate style
-    computed_idxs: SmallVec<[u16; 2]>,
-}
-impl PropCache {
-    /// Find the pair of frames for a given prop at some given target index.
-    /// This will find the pair of frames with one lower than the target and one higher than the target.
-    /// If it cannot find both, it returns none.
-    fn get_prop_frames(&self, prop: StylePropRef, target_idx: u16) -> Option<PropFrames> {
-        self.prop_map.get(&prop).map(|frames| {
-            match frames.binary_search(&PropFrameKind::Normal(target_idx)) {
-                Ok(exact_idx) => {
-                    // Exact match found: lower is the exact match, upper is the next frame if it exists
-                    let lower = Some(frames[exact_idx]);
-                    let upper = frames.get(exact_idx + 1).copied();
-                    PropFrames {
-                        lower_idx: lower,
-                        upper_idx: upper,
-                    }
-                }
-                Err(pos) => {
-                    // No exact match found
-                    let lower = if pos > 0 {
-                        Some(frames[pos - 1]) // Largest smaller frame
-                    } else {
-                        None
-                    };
-                    let upper = frames.get(pos).copied(); // Smallest larger frame, if it exists
-                    PropFrames {
-                        lower_idx: lower,
-                        upper_idx: upper,
-                    }
-                }
-            }
-        })
-    }
-
-    fn insert_prop(&mut self, prop: StylePropRef, idx: PropFrameKind) {
-        match self.prop_map.entry(prop) {
-            imbl::hashmap::Entry::Occupied(mut oe) => {
-                if let Err(pos) = oe.get().binary_search(&idx) {
-                    oe.get_mut().insert(pos, idx)
-                }
-            }
-            imbl::hashmap::Entry::Vacant(ve) => {
-                ve.insert(smallvec![idx]);
-            }
-        }
-    }
+use smallvec::SmallVec;
 
-    fn insert_computed_prop(&mut self, prop: StylePropRef, idx: PropFrameKind) {
-        // computed props are inserted at the start of each call of `animate_into`.
-        // Therefore, if the cache does not already contain references to a prop, there will be nothing to animate between and we just don't insert anything.
-        if let imbl::hashmap::Entry::Occupied(mut oe) = self.prop_map.entry(prop) {
-            if let Err(pos) = oe.get().binary_search(&idx) {
-                oe.get_mut().insert(pos, idx)
-            } else {
-                unreachable!(
-                    "this should err because a computed prop shouldn't be inserted more than once. "
-                )
-            }
-        }
-    }
-
-    fn remove_prop(&mut self, prop: StylePropRef, idx: u16) {
-        if let imbl::hashmap::Entry::Occupied(mut oe) = self.prop_map.entry(prop)
-            && let Ok(pos) = oe.get().binary_search(&PropFrameKind::Normal(idx))
-        {
-            oe.get_mut().remove(pos);
-        }
-    }
-
-    // mark a frame id as for a computed style
-    fn insert_computed(&mut self, idx: u16) {
-        if let Err(pos) = self.computed_idxs.binary_search(&idx) {
-            self.computed_idxs.insert(pos, idx)
-        }
-    }
-
-    // removed a frame id from being marked as for a computed style
-    fn remove_computed(&mut self, idx: u16) {
-        if let Ok(pos) = self.computed_idxs.binary_search(&idx) {
-            self.computed_idxs.remove(pos);
-        }
-    }
-}
-
-/// Holds the allowance and state of the reverse once property of an animation.
-/// Reversing an animation is attempted when animation is being removed or hidden.
-#[derive(Debug, Clone, Copy)]
-pub enum ReverseOnce {
-    /// When `Never`, the animation will not be allowed to be set to be in reverse mode
-    Never,
-    /// When `Val`, the animation is allowed to be set to reverse until finished.
-    /// When `Val(true)` the animation will actually reverse
-    Val(bool),
-}
-impl ReverseOnce {
-    /// If the reverse once is not `Never` this will set the animation to start or end reversing until finished
-    pub fn set(&mut self, val: bool) {
-        if let Self::Val(v) = self {
-            *v = val;
-        }
-    }
-
-    /// return true if the animation should be reversing
-    pub const fn is_rev(self) -> bool {
-        match self {
-            Self::Never => false,
-            Self::Val(v) => v,
-        }
-    }
-}
-
-/// The mode to specify how the animation should repeat. See also [`Animation::advance`]
-#[derive(Clone, Debug)]
-pub enum RepeatMode {
-    // Once started, the animation will juggle between [`AnimState::PassInProgress`] and [`AnimState::PassFinished`],
-    // but will never reach [`AnimState::Completed`]
-    /// Repeat the animation forever
-    LoopForever,
-    // On every pass, we animate until `elapsed >= duration`, then we reset elapsed time to 0 and increment `repeat_count` is
-    // increased by 1. This process is repeated until `repeat_count >= times`, and then the animation is set
-    // to [`AnimState::Completed`].
-    /// Repeat the animation the specified number of times before the animation enters a Complete state
-    Times(usize),
-}
-
-#[derive(Debug, Clone)]
-pub(crate) enum AnimState {
-    Idle,
-    Stopped,
-    Paused {
-        elapsed: Option<Duration>,
-    },
-    /// How many passes(loops) there will be is controlled by the [`RepeatMode`] of the animation.
-    /// By default, the animation will only have a single pass,
-    /// but it can be set to [`RepeatMode::LoopForever`] to loop indefinitely.
-    PassInProgress {
-        started_on: Instant,
-        elapsed: Duration,
-    },
-    ExtMode {
-        started_on: Instant,
-        elapsed: Duration,
-    },
-    /// Depending on the [`RepeatMode`] of the animation, we either go back to `PassInProgress`
-    /// or advance to `Completed`.
-    PassFinished {
-        elapsed: Duration,
-        was_in_ext: bool,
-    },
-    // NOTE: If animation has `RepeatMode::LoopForever`, this state will never be reached.
-    Completed {
-        elapsed: Option<Duration>,
-        was_reversing: bool,
-    },
-}
-
-#[derive(Debug, PartialEq, Eq, Clone, Copy)]
-/// Represents the different states an animation can be in.
-pub enum AnimStateKind {
-    /// The animation is idle and has not started yet.
-    Idle,
-    /// The animation is paused and can be resumed.
-    Paused,
-    /// The animation is stopped and cannot be resumed.
-    Stopped,
-    /// The animation is currently in progress.
-    ///
-    /// In this state the animation is actively animating the properties of the view.
-    PassInProgress,
-    /// The animation has finished a pass but may repeat based on the repeat mode.
-    PassFinished,
-    /// The animation has completed all its passes and will not run again until started.
-    Completed,
-}
-
-#[derive(Debug, PartialEq, Eq, Clone, Copy)]
-/// Commands to control the state of an animation
-pub enum AnimStateCommand {
-    /// Pause the animation
-    Pause,
-    /// Resume the animation
-    Resume,
-    /// Start the animation
-    Start,
-    /// Stop the animation
-    Stop,
-    /// Start the animation in reverse
-    Reverse,
-}
+use crate::platform::Duration;
 
 type EffectStateVec = SmallVec<[RwSignal<SmallVec<[(ViewId, StackOffset<Animation>); 1]>>; 1]>;
 
-/// The main animation struct
+/// The main animation struct.
 ///
-/// Use [`Animation::new`] or the [`Decorators::animation`](crate::views::Decorators::animation) method to build an animation.
+/// Wraps [`floem_style::Animation`] with floem's reactive lifecycle
+/// triggers and signal-based imperative control. Most configuration
+/// builders forward directly to the engine; `.start()` / `.pause()` /
+/// `.state()` etc. wire reactive command routing that the engine
+/// knows nothing about.
 #[derive(Debug, Clone)]
 pub struct Animation {
-    pub(crate) state: AnimState,
+    pub(crate) engine: floem_style::Animation,
     pub(crate) effect_states: EffectStateVec,
-    pub(crate) auto_reverse: bool,
-    pub(crate) delay: Duration,
-    pub(crate) delay_on_reverse: bool,
-    pub(crate) duration: Duration,
-    pub(crate) repeat_mode: RepeatMode,
-    /// How many times the animation has been repeated so far
-    pub(crate) repeat_count: usize,
-    /// run on remove and run on create should be checked for and respected by any view that dynamically creates sub views
-    pub(crate) run_on_remove: bool,
-    pub(crate) run_on_create: bool,
-    pub(crate) reverse_once: ReverseOnce,
-    pub(crate) max_key_frame_num: u16,
-    pub(crate) apply_when_finished: bool,
-    pub(crate) folded_style: Style,
-    pub(crate) key_frames: imbl::HashMap<u16, KeyFrame>,
-    // frames should be added to this if when they are the lower frame, they return not done. check/run them before other frames
-    pub(crate) props_in_ext_progress: imbl::HashMap<StylePropRef, (KeyFrameProp, KeyFrameProp)>,
-    pub(crate) cache: PropCache,
-    /// This will fire at the start of each cycle of an animation.
+    /// Fires at the start of each cycle.
     pub(crate) on_start: Trigger,
-    /// This trigger will fire at the completion of an animations duration.
-    /// Animations are allowed to go on for longer than their duration, until the easing reports finished.
-    /// When waiting for the completion of an animation (such as to remove a view), this trigger should be preferred.
+    /// Fires at the end of the animation's duration (ext-mode may still
+    /// be settling spring interpolations after this).
     pub(crate) on_visual_complete: Trigger,
-    /// This trigger will fire at the total completion of an animation when the easing function of all props report finished.
+    /// Fires once every repeat is done — prefer [`Self::on_visual_complete`]
+    /// for UI gating (e.g. removing a view once the exit animation's
+    /// visible phase finishes).
     pub(crate) on_complete: Trigger,
-    pub(crate) debug_description: Option<String>,
 }
+
 impl Default for Animation {
     fn default() -> Self {
         Self {
-            state: AnimState::Idle,
+            engine: floem_style::Animation::default(),
             effect_states: SmallVec::new(),
-            auto_reverse: false,
-            delay: Duration::ZERO,
-            delay_on_reverse: false,
-            duration: Duration::from_millis(200),
-            repeat_mode: RepeatMode::Times(1),
-            repeat_count: 0,
-            run_on_remove: false,
-            run_on_create: false,
-            reverse_once: ReverseOnce::Val(false),
-            max_key_frame_num: 100,
-            apply_when_finished: false,
-            folded_style: Style::new(),
-            cache: Default::default(),
-            key_frames: imbl::HashMap::new(),
-            props_in_ext_progress: imbl::HashMap::new(),
             on_start: Trigger::new(),
             on_complete: Trigger::new(),
             on_visual_complete: Trigger::new(),
-            debug_description: None,
         }
     }
 }
 
-/// # Methods for creating an animation, including methods that quickly initialize the animation for specific uses
+/// # Constructors and quick-setup helpers.
 impl Animation {
-    /// Create a new animation
+    /// Create a new animation.
     pub fn new() -> Self {
         Self::default()
     }
 
-    /// Quickly set a few properties on an animation to set up an animation to be used as a view transition (on creation and removal).
-    /// (Sets keyframes 0 and 100 to use the computed style until overridden)
-    pub fn view_transition(self) -> Self {
-        self.run_on_create(true)
-            .run_on_remove(true)
-            .initial_state(AnimStateCommand::Stop)
-            .keyframe(0, |f| f.computed_style().ease(Spring::gentle()))
-            .keyframe(100, |f| f.computed_style().ease(Spring::gentle()))
+    /// Quick setup for a view transition (runs on create + remove with
+    /// computed-style keyframes at 0 and 100).
+    pub fn view_transition(mut self) -> Self {
+        self.engine = self.engine.view_transition();
+        self
     }
 
-    /// Quickly set an animation to be a view transition and override the default easing function on keyframes 0 and 100.
-    pub fn view_transition_with_ease(self, ease: impl Easing + 'static + Clone) -> Self {
-        self.view_transition()
-            .keyframe(0, |f| f.computed_style().ease(ease.clone()))
-            .keyframe(100, |f| f.computed_style().ease(ease.clone()))
+    /// View transition with a custom easing on both endpoints.
+    pub fn view_transition_with_ease(mut self, ease: impl Easing + 'static + Clone) -> Self {
+        self.engine = self.engine.view_transition_with_ease(ease);
+        self
     }
 
-    /// Quickly set an animation to be a view transition and set the animation to animate from scale 0% to the "normal" computed style of a view (the view with no animations applied).
-    pub fn scale_effect(self) -> Self {
-        self.view_transition()
-            .keyframe(0, |f| f.style(|s| s.scale(0.pct())))
-            .debug_name("Scale the width and height from zero to the default")
+    /// View transition animating scale 0% → 100%.
+    pub fn scale_effect(mut self) -> Self {
+        self.engine = self.engine.scale_effect();
+        self
     }
 
-    /// Quickly set an animation to be a view transition and set the animation to animate from size(0, 0) to the "normal" computed style of a view (the view with no animations applied).
-    pub fn scale_size_effect(self) -> Self {
-        self.view_transition()
-            .keyframe(0, |f| f.style(|s| s.size(0, 0)))
-            .debug_name("Scale the width and height from zero to the default")
+    /// View transition animating size 0×0 → computed.
+    pub fn scale_size_effect(mut self) -> Self {
+        self.engine = self.engine.scale_size_effect();
+        self
     }
 }
 
-/// # Methods for setting properties on an `Animation`
+/// # Builder methods that forward to the engine.
 impl Animation {
-    /// Build a [`KeyFrame`]
-    ///
-    /// If there is a matching keyframe id, the style in this keyframe will only override the style values in the new style.
-    /// If you want the style to completely override style see [`Animation::keyframe_override`].
+    /// Build a keyframe (merge into an existing one at the same id).
     pub fn keyframe(mut self, frame_id: u16, key_frame: impl Fn(KeyFrame) -> KeyFrame) -> Self {
-        let frame = key_frame(KeyFrame::new(frame_id));
-        if let KeyFrameStyle::Style(ref style) = frame.style {
-            // this frame id now contains a style, so remove this frame id from being marked as computed (if it was).
-            self.cache.remove_computed(frame_id);
-            for prop in style.style_props() {
-                // mark that this frame contains the referenced props
-                self.cache
-                    .insert_prop(prop, PropFrameKind::Normal(frame_id));
-            }
-        } else {
-            self.cache.insert_computed(frame_id);
-        }
-
-        // mutate this keyframe's style to be updated with the new style
-        match self.key_frames.entry(frame_id) {
-            imbl::hashmap::Entry::Occupied(mut oe) => {
-                let e_frame = oe.get_mut();
-                match (&mut e_frame.style, frame.style) {
-                    (KeyFrameStyle::Computed, KeyFrameStyle::Computed) => {}
-                    (s @ KeyFrameStyle::Computed, KeyFrameStyle::Style(ns)) => {
-                        *s = KeyFrameStyle::Style(ns);
-                    }
-                    (s @ KeyFrameStyle::Style(_), KeyFrameStyle::Computed) => {
-                        *s = KeyFrameStyle::Computed;
-                    }
-                    (KeyFrameStyle::Style(s), KeyFrameStyle::Style(ns)) => {
-                        s.apply_mut(&ns);
-                    }
-                }
-                e_frame.easing = frame.easing;
-            }
-            imbl::hashmap::Entry::Vacant(ve) => {
-                ve.insert(frame);
-            }
-        }
+        self.engine = self.engine.keyframe(frame_id, key_frame);
         self
     }
 
-    /// Build and overwrite a [`KeyFrame`]
-    ///
-    /// If there is a matching keyframe id, the style in this keyframe will completely override the style in the frame that already exists.
-    /// If you want the style to only override the new values see [`Animation::keyframe`].
+    /// Build a keyframe, replacing any existing one at the same id.
     pub fn keyframe_override(
         mut self,
         frame_id: u16,
         key_frame: impl Fn(KeyFrame) -> KeyFrame,
     ) -> Self {
-        let frame = key_frame(KeyFrame::new(frame_id));
-        let frame_style = frame.style.clone();
-        if let Some(f) = self.key_frames.insert(frame_id, frame)
-            && let KeyFrameStyle::Style(style) = f.style
-        {
-            for prop in style.style_props() {
-                self.cache.remove_prop(prop, frame_id);
-            }
-        }
-        if let KeyFrameStyle::Style(style) = frame_style {
-            self.cache.insert_computed(frame_id);
-            for prop in style.style_props() {
-                self.cache
-                    .insert_prop(prop, PropFrameKind::Normal(frame_id));
-            }
-        } else {
-            self.cache.remove_computed(frame_id);
-        }
+        self.engine = self.engine.keyframe_override(frame_id, key_frame);
         self
     }
 
-    /// Sets the perceived duration of the animation.
-    ///
-    /// The total duration of an animation will run until all animating props return `finished`.
-    /// This is useful for spring animations which don't conform well to strict ending times.
-    pub const fn duration(mut self, duration: Duration) -> Self {
-        self.duration = duration;
+    /// Perceived animation duration.
+    pub fn duration(mut self, duration: Duration) -> Self {
+        self.engine = self.engine.duration(duration);
         self
     }
 
-    /// Set properties on the animation while having access to the current duration.
+    /// Access the current duration while setting further properties.
     pub fn with_duration(self, duration: impl FnOnce(Self, Duration) -> Self) -> Self {
-        let d = self.duration;
+        let d = self.engine.get_duration();
         duration(self, d)
     }
 
-    /// Conditionally apply properties to this animation if the condition is `true`.
+    /// Conditionally apply `f`.
     pub fn apply_if(self, cond: bool, f: impl FnOnce(Self) -> Self) -> Self {
         if cond { f(self) } else { self }
     }
 
-    /// Provides access to the on create trigger by calling the closure in once and then returning self.
-    pub fn on_create(self, on_create: impl FnOnce(Trigger) + 'static) -> Self {
-        on_create(self.on_start);
+    /// Run on view create (via dyn container, post-hide).
+    pub fn run_on_create(mut self, run_on_create: bool) -> Self {
+        self.engine = self.engine.run_on_create(run_on_create);
         self
     }
 
-    /// Provides access to the on visual complete trigger by calling the closure once and then returning self.
-    pub fn on_visual_complete(self, on_visual_complete: impl FnOnce(Trigger) + 'static) -> Self {
-        on_visual_complete(self.on_visual_complete);
+    /// Run on create and NOT on remove.
+    pub fn only_on_create(mut self) -> Self {
+        self.engine = self.engine.only_on_create();
         self
     }
 
-    /// Provides access to the on complete trigger by calling the closure once and then returning self.
-    pub fn on_complete(self, on_complete: impl FnOnce(Trigger) + 'static) -> Self {
-        on_complete(self.on_complete);
+    /// Run on view remove.
+    pub fn run_on_remove(mut self, run_on_remove: bool) -> Self {
+        self.engine = self.engine.run_on_remove(run_on_remove);
         self
     }
 
-    /// Set whether this animation should run when being created.
-    ///
-    /// I.e when being created by a dyn container or when being shown after being hidden.
-    pub const fn run_on_create(mut self, run_on_create: bool) -> Self {
-        self.run_on_create = run_on_create;
+    /// Run on remove and NOT on create.
+    pub fn only_on_remove(mut self) -> Self {
+        self.engine = self.engine.only_on_remove();
         self
     }
 
-    /// Set whether this animation should run when being created and not when being removed.
-    pub const fn only_on_create(mut self) -> Self {
-        self.run_on_remove = false;
-        self.run_on_create = true;
+    /// Apply the final keyframe even once the animation is finished.
+    pub fn apply_when_finished(mut self, apply: bool) -> Self {
+        self.engine = self.engine.apply_when_finished(apply);
         self
     }
 
-    /// Set whether this animation should run when being removed.
-    /// I.e when being removed by a dyn container or when being hidden.
-    pub const fn run_on_remove(mut self, run_on_remove: bool) -> Self {
-        self.run_on_remove = run_on_remove;
+    /// Enable auto-reverse.
+    pub fn auto_reverse(mut self, auto_rev: bool) -> Self {
+        self.engine = self.engine.auto_reverse(auto_rev);
         self
     }
 
-    /// Set whether this animation should run when being removed and not when being created.
-    pub const fn only_on_remove(mut self) -> Self {
-        self.run_on_remove = true;
-        self.run_on_create = false;
+    /// Allow reversing on view remove / hide.
+    pub fn reverse_on_exit(mut self, allow: bool) -> Self {
+        self.engine = self.engine.reverse_on_exit(allow);
         self
     }
 
-    /// Set whether the properties from the final keyframe of this animation should be applied even when the animation is finished.
-    pub const fn apply_when_finished(mut self, apply: bool) -> Self {
-        self.apply_when_finished = apply;
+    /// Delay before starting.
+    pub fn delay(mut self, delay: Duration) -> Self {
+        self.engine = self.engine.delay(delay);
         self
     }
 
-    /// Sets if this animation should auto reverse.
-    /// If true, the animation will reach the final key frame twice as fast and then animate backwards
-    pub const fn auto_reverse(mut self, auto_rev: bool) -> Self {
-        self.auto_reverse = auto_rev;
+    /// Also delay when reversing.
+    pub fn delay_on_reverse(mut self, on_reverse: bool) -> Self {
+        self.engine = self.engine.delay_on_reverse(on_reverse);
         self
     }
 
-    /// Sets if this animation should be allowed to be reversed when the view is being removed or hidden.
-    pub const fn reverse_on_exit(mut self, allow: bool) -> Self {
-        if allow {
-            self.reverse_once = ReverseOnce::Val(false);
-        } else {
-            self.reverse_once = ReverseOnce::Never;
-        }
+    /// Loop forever (`true`) or play once (`false`).
+    pub fn repeat(mut self, repeat: bool) -> Self {
+        self.engine = self.engine.repeat(repeat);
         self
     }
 
-    /// Sets a delay for how long the animation should wait before starting.
-    pub const fn delay(mut self, delay: Duration) -> Self {
-        self.delay = delay;
+    /// Play exactly `times` times.
+    pub fn repeat_times(mut self, times: usize) -> Self {
+        self.engine = self.engine.repeat_times(times);
         self
     }
 
-    /// Sets whether the animation should delay when reversing.
-    pub const fn delay_on_reverse(mut self, on_reverse: bool) -> Self {
-        self.delay_on_reverse = on_reverse;
+    /// Keyframe number representing 100% completion (default 100).
+    pub fn max_key_frame(mut self, max: u16) -> Self {
+        self.engine = self.engine.max_key_frame(max);
+        self
+    }
+
+    /// Apply an initial state command at build time.
+    pub fn initial_state(mut self, command: AnimStateCommand) -> Self {
+        self.engine = self.engine.initial_state(command);
         self
     }
 
-    /// Sets if the animation should the repeat forever.
-    pub const fn repeat(mut self, repeat: bool) -> Self {
-        self.repeat_mode = if repeat {
-            RepeatMode::LoopForever
-        } else {
-            RepeatMode::Times(1)
-        };
+    /// Human-readable debug description.
+    pub fn debug_name(mut self, description: impl Into<String>) -> Self {
+        self.engine = self.engine.debug_name(description);
         self
     }
+}
 
-    /// Sets the number of times the animation should repeat.
-    pub const fn repeat_times(mut self, times: usize) -> Self {
-        self.repeat_mode = RepeatMode::Times(times);
+/// # Reactive lifecycle callbacks (floem-only).
+impl Animation {
+    /// Provides access to the on-create [`Trigger`].
+    pub fn on_create(self, on_create: impl FnOnce(Trigger) + 'static) -> Self {
+        on_create(self.on_start);
         self
     }
 
-    /// This is used to determine which keyframe is at 100% completion.
-    ///
-    /// The default is 100.
-    ///
-    /// If you need more than 100 keyframes, increase this number, but be aware, the keyframe numbers will then be as a percentage of the maximum.
-    ///
-    /// *This does not move existing keyframes.*
-    pub const fn max_key_frame(mut self, max: u16) -> Self {
-        self.max_key_frame_num = max;
+    /// Provides access to the on-visual-complete [`Trigger`].
+    pub fn on_visual_complete(self, on_visual_complete: impl FnOnce(Trigger) + 'static) -> Self {
+        on_visual_complete(self.on_visual_complete);
         self
     }
 
-    /// Mutably sets the initial state of the animation
-    pub fn initial_state(mut self, command: AnimStateCommand) -> Self {
-        self.transition(command);
+    /// Provides access to the on-complete [`Trigger`].
+    pub fn on_complete(self, on_complete: impl FnOnce(Trigger) + 'static) -> Self {
+        on_complete(self.on_complete);
         self
     }
+}
 
-    /// If `apply_initial` is false the initial command will not be applied to the animation.
-    /// This is useful if you want the effect to be subscribed to changes but not run the first time.
+/// # Reactive state control (floem-only).
+impl Animation {
+    /// Route state commands through a reactive effect. The animation
+    /// receives `command()` each time any reactive value it touches
+    /// changes. `apply_initial` controls whether the initial call is
+    /// executed at build time.
     pub fn state(
         mut self,
         command: impl Fn() -> AnimStateCommand + 'static,
@@ -680,12 +254,12 @@ impl Animation {
             }
         });
         if apply_initial {
-            self.transition(initial_command);
+            self.engine.transition(initial_command);
         }
         self
     }
 
-    /// The animation will receive a pause command any time the trigger function tracks any reactive updates.
+    /// Pause when the trigger tracks a reactive update.
     pub fn pause(self, trigger: impl Fn() + 'static) -> Self {
         self.state(
             move || {
@@ -696,7 +270,7 @@ impl Animation {
         )
     }
 
-    /// The animation will receive a resume command any time the trigger function tracks any reactive updates.
+    /// Resume when the trigger tracks a reactive update.
     pub fn resume(self, trigger: impl Fn() + 'static) -> Self {
         self.state(
             move || {
@@ -707,7 +281,7 @@ impl Animation {
         )
     }
 
-    /// The animation will receive a start command any time the trigger function tracks any reactive updates.
+    /// Start when the trigger tracks a reactive update.
     pub fn start(self, trigger: impl Fn() + 'static) -> Self {
         self.state(
             move || {
@@ -718,9 +292,7 @@ impl Animation {
         )
     }
 
-    /// The animation will receive a reverse command any time the trigger function tracks any reactive updates.
-    ///
-    /// This will start the animation in reverse
+    /// Start reversing when the trigger tracks a reactive update.
     pub fn reverse(self, trigger: impl Fn() + 'static) -> Self {
         self.state(
             move || {
@@ -731,7 +303,7 @@ impl Animation {
         )
     }
 
-    /// The animation will receive a stop command any time the trigger function tracks any reactive updates.
+    /// Stop when the trigger tracks a reactive update.
     pub fn stop(self, trigger: impl Fn() + 'static) -> Self {
         self.state(
             move || {
@@ -741,499 +313,110 @@ impl Animation {
             false,
         )
     }
+}
 
-    /// Add a debug description to the animation
-    pub fn debug_name(mut self, description: impl Into<String>) -> Self {
-        match &mut self.debug_description {
-            Some(inner_desc) => {
-                inner_desc.push_str("; ");
-                inner_desc.push_str(&description.into())
-            }
-            val @ None => *val = Some(description.into()),
-        }
-        self
-    }
-
-    #[allow(unused)]
-    pub(crate) fn pause_mut(mut self) {
-        self.transition(AnimStateCommand::Pause)
-    }
-
-    #[allow(unused)]
-    pub(crate) fn resume_mut(mut self) {
-        self.transition(AnimStateCommand::Resume)
-    }
-
-    pub(crate) fn start_mut(&mut self) {
-        self.transition(AnimStateCommand::Start)
-    }
-
-    pub(crate) fn reverse_mut(&mut self) {
-        self.transition(AnimStateCommand::Reverse)
-    }
-
-    #[allow(unused)]
-    pub(crate) fn stop_mut(&mut self) {
-        self.transition(AnimStateCommand::Stop)
-    }
-
-    /// Matches the current state of the animation and returns the kind of state it is in.
-    pub const fn state_kind(&self) -> AnimStateKind {
-        match self.state {
-            AnimState::Idle => AnimStateKind::Idle,
-            AnimState::Stopped => AnimStateKind::Stopped,
-            AnimState::PassInProgress { .. } => AnimStateKind::PassInProgress,
-            AnimState::ExtMode { .. } => AnimStateKind::PassInProgress,
-            AnimState::PassFinished { .. } => AnimStateKind::PassFinished,
-            AnimState::Completed { .. } => AnimStateKind::Completed,
-            AnimState::Paused { .. } => AnimStateKind::Paused,
-        }
-    }
-
-    /// Returns the current amount of time that has elapsed since the animation started.
-    pub fn elapsed(&self) -> Option<Duration> {
-        match &self.state {
-            AnimState::Idle => None,
-            AnimState::Stopped => None,
-            AnimState::PassInProgress {
-                started_on,
-                elapsed,
-            }
-            | AnimState::ExtMode {
-                started_on,
-                elapsed,
-            } => {
-                let duration = Instant::now() - *started_on;
-                Some(*elapsed + duration)
-            }
-            AnimState::PassFinished { elapsed, .. } => Some(*elapsed),
-            AnimState::Completed { elapsed, .. } => *elapsed,
-            AnimState::Paused { elapsed } => *elapsed,
-        }
-    }
-
-    /// Advance the animation.
+/// # Engine tick — advance the animation and route lifecycle events to
+/// the reactive [`Trigger`]s.
+impl Animation {
+    /// Advance the animation one frame, routing engine events through
+    /// the reactive triggers.
     pub fn advance(&mut self) {
-        let use_delay = self.use_delay();
-        match &mut self.state {
-            AnimState::Idle => {
-                self.start_mut();
-                self.on_start.notify();
-            }
-            AnimState::PassInProgress {
-                started_on,
-                elapsed,
-            } => {
-                let now = Instant::now();
-                let duration = now - *started_on;
-                let og_elapsed = *elapsed;
-                *elapsed = duration;
-
-                let temp_elapsed = if *elapsed <= self.delay && use_delay {
-                    // The animation hasn't started yet
-                    Duration::ZERO
-                } else if use_delay {
-                    *elapsed - self.delay
-                } else {
-                    *elapsed
-                };
-
-                if temp_elapsed >= self.duration {
-                    if self.props_in_ext_progress.is_empty() {
-                        self.state = AnimState::PassFinished {
-                            elapsed: *elapsed,
-                            was_in_ext: false,
-                        };
-                    } else {
-                        self.on_visual_complete.notify();
-                        self.state = AnimState::ExtMode {
-                            started_on: *started_on,
-                            elapsed: og_elapsed,
-                        };
-                    }
-                }
-            }
-            AnimState::ExtMode {
-                started_on,
-                elapsed,
-            } => {
-                let now = Instant::now();
-                let duration = now - *started_on;
-                *elapsed = duration;
-
-                if self.props_in_ext_progress.is_empty() {
-                    self.state = AnimState::PassFinished {
-                        elapsed: *elapsed,
-                        was_in_ext: true,
-                    };
-                }
-            }
-            AnimState::PassFinished {
-                elapsed,
-                was_in_ext,
-            } => match self.repeat_mode {
-                RepeatMode::LoopForever => {
-                    if self.reverse_once.is_rev() {
-                        self.reverse_once.set(false);
-                    } else if self.auto_reverse {
-                        self.reverse_once.set(true);
-                    }
-                    self.state = AnimState::PassInProgress {
-                        started_on: Instant::now(),
-                        elapsed: Duration::ZERO,
-                    }
-                }
-                RepeatMode::Times(times) => {
-                    self.repeat_count += 1;
-                    if self.repeat_count >= times {
-                        let was_reversing = self.reverse_once.is_rev();
-                        self.reverse_once.set(false);
-                        self.on_complete.notify();
-                        if !*was_in_ext {
-                            self.on_visual_complete.notify();
-                        }
-                        self.state = AnimState::Completed {
-                            elapsed: Some(*elapsed),
-                            was_reversing,
-                        }
-                    } else {
-                        self.state = AnimState::PassInProgress {
-                            started_on: Instant::now(),
-                            elapsed: Duration::ZERO,
-                        }
-                    }
-                }
-            },
-            AnimState::Paused { .. } => {
-                debug_assert!(false, "Tried to advance a paused animation")
-            }
-            AnimState::Stopped => {
-                debug_assert!(false, "Tried to advance a stopped animation")
-            }
-            AnimState::Completed { was_reversing, .. } => {
-                if self.auto_reverse && !*was_reversing {
-                    self.reverse_mut();
-                } else {
-                    self.state = AnimState::Stopped;
-                }
-            }
-        }
-    }
-
-    pub(crate) fn transition(&mut self, command: AnimStateCommand) {
-        match command {
-            AnimStateCommand::Pause => {
-                self.state = AnimState::Paused {
-                    elapsed: self.elapsed(),
-                }
-            }
-            AnimStateCommand::Resume => {
-                if let AnimState::Paused { elapsed } = &self.state {
-                    self.state = AnimState::PassInProgress {
-                        started_on: Instant::now(),
-                        elapsed: elapsed.unwrap_or(Duration::ZERO),
-                    }
-                }
-            }
-            AnimStateCommand::Start => {
-                self.reverse_once.set(false);
-                Rc::make_mut(&mut self.folded_style.map).clear();
-                self.repeat_count = 0;
-                self.state = AnimState::PassInProgress {
-                    started_on: Instant::now(),
-                    elapsed: Duration::ZERO,
-                }
-            }
-            AnimStateCommand::Reverse => {
-                self.reverse_once.set(true);
-                Rc::make_mut(&mut self.folded_style.map).clear();
-                self.repeat_count = 0;
-                self.state = AnimState::PassInProgress {
-                    started_on: Instant::now(),
-                    elapsed: Duration::ZERO,
-                }
-            }
-            AnimStateCommand::Stop => {
-                self.repeat_count = 0;
-                self.state = AnimState::Stopped;
-            }
-        }
-    }
-
-    /// Get the total time the animation has been running as a percent (0. - 1.)
-    pub(crate) fn total_time_percent(&self) -> f64 {
-        if self.duration == Duration::ZERO {
-            return 0.;
+        let events = self.engine.advance();
+        if events.started {
+            self.on_start.notify();
         }
-        let mut elapsed = self.elapsed().unwrap_or(Duration::ZERO);
-        if self.use_delay() {
-            elapsed = elapsed.saturating_sub(self.delay);
+        if events.visual_completed {
+            self.on_visual_complete.notify();
         }
-        let percent = elapsed.as_secs_f64() / self.duration.as_secs_f64();
-
-        if self.reverse_once.is_rev() {
-            1. - percent
-        } else {
-            percent
+        if events.completed {
+            self.on_complete.notify();
         }
     }
 
-    fn is_reversing(&self) -> bool {
-        self.reverse_once.is_rev()
+    /// Apply an imperative state-machine transition.
+    pub(crate) fn transition(&mut self, command: AnimStateCommand) {
+        self.engine.transition(command);
     }
 
-    fn use_delay(&self) -> bool {
-        // going forward or if we are still supposed to delay on reverse
-        !self.is_reversing() || self.delay_on_reverse
+    /// Interpolate animated props into `computed_style`.
+    pub fn animate_into(&mut self, computed_style: &mut crate::style::Style) {
+        self.engine.animate_into(computed_style);
     }
 
-    /// Get the lower and upper keyframe ids from the cache for a prop and then resolve those id's into a pair of `KeyFrameProp`s that contain the prop value and easing function
-    pub(crate) fn get_current_kf_props(
-        &self,
-        prop: StylePropRef,
-        frame_target: u16,
-        computed_style: &Style,
-    ) -> Option<(KeyFrameProp, KeyFrameProp)> {
-        let PropFrames {
-            lower_idx,
-            upper_idx,
-        } = self.cache.get_prop_frames(prop, frame_target)?;
-
-        let mut upper_computed = false;
-
-        let upper = {
-            let upper = upper_idx?;
-            let frame = self
-                .key_frames
-                .get(&upper.inner())
-                .expect("If the value is in the cache, it should also be in the key frames");
-
-            let prop = match &frame.style {
-                KeyFrameStyle::Computed => {
-                    debug_assert!(
-                        matches!(upper, PropFrameKind::Computed(_)),
-                        "computed frame should have come from matching computed idx"
-                    );
-                    upper_computed = true;
-                    computed_style
-                        .map
-                        .get(&prop.key)
-                        .expect("was in the cache as a computed frame")
-                        .clone()
-                }
-                KeyFrameStyle::Style(s) => s.map.get(&prop.key).expect("same as above").clone(),
-            };
-
-            KeyFrameProp {
-                id: upper.inner(),
-                val: prop,
-                easing: frame.easing.clone(),
-            }
-        };
-
-        let lower = {
-            let lower = lower_idx?;
-            let frame = self
-                .key_frames
-                .get(&lower.inner())
-                .expect("If the value is in the cache, it should also be in the key frames");
-
-            let prop = match &frame.style {
-                KeyFrameStyle::Computed => {
-                    debug_assert!(
-                        matches!(lower, PropFrameKind::Computed(_)),
-                        "computed frame should have come from matching computed idx"
-                    );
-                    if upper_computed {
-                        // both computed. nothing to animate
-                        return None;
-                    }
-                    computed_style
-                        .map
-                        .get(&prop.key)
-                        .expect("was in the cache as a computed frame")
-                        .clone()
-                }
-                KeyFrameStyle::Style(s) => s.map.get(&prop.key).expect("same as above").clone(),
-            };
-
-            KeyFrameProp {
-                id: lower.inner(),
-                val: prop,
-                easing: frame.easing.clone(),
-            }
-        };
-
-        if self.is_reversing() {
-            Some((upper, lower))
-        } else {
-            Some((lower, upper))
-        }
+    /// Apply the last-computed folded style.
+    pub fn apply_folded(&self, computed_style: &mut crate::style::Style) {
+        self.engine.apply_folded(computed_style);
     }
 
-    /// While advancing, this function can mutably apply it's animated props to a style.
-    pub fn animate_into(&mut self, computed_style: &mut Style) {
-        // TODO: OPTIMIZE. I've tried to make this efficient, but it would be good to work this over for eficiency because it is called on every frame during an animation.
-        // Some work is repeated and could be improved.
-
-        let computed_idxs = self.cache.computed_idxs.clone();
-        for computed_idx in &computed_idxs {
-            // we add all of the props from the computed style to the cache because the computed style could change inbetween every frame.
-            for prop in computed_style.style_props() {
-                self.cache
-                    .insert_computed_prop(prop, PropFrameKind::Computed(*computed_idx));
-            }
-        }
-        let local_percents: Vec<_> = self
-            .props_in_ext_progress
-            .iter()
-            .map(|(p, (l, u))| (*p, self.get_local_percent(l.id, u.id)))
-            .collect();
-
-        self.props_in_ext_progress.retain(|p, (_l, u)| {
-            let local_percent = local_percents
-                .iter()
-                .find(|&&(prop, _)| prop == *p)
-                .map(|&(_, percent)| percent)
-                .unwrap_or_default();
-            !u.easing.finished(local_percent)
-        });
-        for (ext_prop, (l, u)) in &self.props_in_ext_progress {
-            let local_percent = local_percents
-                .iter()
-                .find(|&&(prop, _)| prop == *ext_prop)
-                .map(|&(_, percent)| percent)
-                .unwrap_or_default();
-
-            let eased_time = u.easing.eval(local_percent);
-            if let Some(interpolated) =
-                (ext_prop.info().interpolate)(&*l.val.clone(), &*u.val.clone(), eased_time)
-            {
-                Rc::make_mut(&mut self.folded_style.map).insert(ext_prop.key, interpolated);
-            }
-        }
-
-        let percent = self.total_time_percent();
-        let frame_target = (self.max_key_frame_num as f64 * percent).round() as u16;
-
-        let props = self.cache.prop_map.keys();
-
-        for prop in props {
-            if self.props_in_ext_progress.contains_key(prop) {
-                continue;
-            }
-            let Some((prev, target)) =
-                self.get_current_kf_props(*prop, frame_target, computed_style)
-            else {
-                continue;
-            };
-            let local_percent = self.get_local_percent(prev.id, target.id);
-            let easing = target.easing.clone();
-            // TODO: Find a better way to find when an animation should enter ext mode rather than just starting to check after 97%.
-            // this could miss getting a prop into ext mode
-            if (local_percent > 0.97) && !easing.finished(local_percent) {
-                self.props_in_ext_progress
-                    .insert(*prop, (prev.clone(), target.clone()));
-            } else {
-                self.props_in_ext_progress.remove(prop);
-            }
-            let eased_time = easing.eval(local_percent);
-            if let Some(interpolated) =
-                (prop.info().interpolate)(&*prev.val.clone(), &*target.val.clone(), eased_time)
-            {
-                Rc::make_mut(&mut self.folded_style.map).insert(prop.key, interpolated);
-            }
-        }
-
-        computed_style.apply_mut(&self.folded_style);
-
-        // we remove all of the props in the computed style from the cache because the computed style could change inbetween every frame.
-        for computed_idx in computed_idxs {
-            for prop in computed_style.style_props() {
-                self.cache.remove_prop(prop, computed_idx);
-            }
-        }
+    /// Current state discriminant.
+    pub const fn state_kind(&self) -> AnimStateKind {
+        self.engine.state_kind()
     }
 
-    /// For a given pair of frame ids, find where the full animation progress is within the subrange of the frame id pair.
-    pub(crate) fn get_local_percent(&self, prev_frame: u16, target_frame: u16) -> f64 {
-        // undo the frame change that get current key_frame props does so that low is actually lower
-        let (low_frame, high_frame) = if self.is_reversing() {
-            (target_frame as f64, prev_frame as f64)
-        } else {
-            (prev_frame as f64, target_frame as f64)
-        };
-        let total_num_frames = self.max_key_frame_num as f64;
-        let low_frame_percent = low_frame / total_num_frames;
-        let high_frame_percent = high_frame / total_num_frames;
-        let keyframe_range = (high_frame_percent.max(0.001) - low_frame_percent.max(0.001)).abs();
-        let total_time_percent = self.total_time_percent();
-        let local = (total_time_percent - low_frame_percent) / keyframe_range;
-
-        if self.is_reversing() {
-            1. - local
-        } else {
-            local
-        }
+    /// Elapsed time since (first) start.
+    pub fn elapsed(&self) -> Option<Duration> {
+        self.engine.elapsed()
     }
 
-    /// returns `true` if the animation is in the idle state
+    /// `true` when state is [`AnimStateKind::Idle`].
     pub fn is_idle(&self) -> bool {
-        self.state_kind() == AnimStateKind::Idle
+        self.engine.is_idle()
     }
 
-    /// returns `true` if the animation is in the pass in progress state
+    /// `true` when a pass is in progress.
     pub fn is_in_progress(&self) -> bool {
-        self.state_kind() == AnimStateKind::PassInProgress
+        self.engine.is_in_progress()
     }
 
-    /// returns `true` if the animation is in the completed state
+    /// `true` when the animation has fully completed.
     pub fn is_completed(&self) -> bool {
-        self.state_kind() == AnimStateKind::Completed
+        self.engine.is_completed()
     }
 
-    /// returns `true` if the animation is in the stopped state
+    /// `true` when the animation is stopped.
     pub fn is_stopped(&self) -> bool {
-        self.state_kind() == AnimStateKind::Stopped
+        self.engine.is_stopped()
     }
 
-    /// returns true if the animation can advance, which either means the animation will transition states, or properties can be animated and updated
+    /// `true` when calling [`Self::advance`] will make progress.
     pub const fn can_advance(&self) -> bool {
-        match self.state_kind() {
-            AnimStateKind::PassFinished
-            | AnimStateKind::PassInProgress
-            | AnimStateKind::Idle
-            | AnimStateKind::Completed => true,
-            AnimStateKind::Paused | AnimStateKind::Stopped => false,
-        }
+        self.engine.can_advance()
     }
 
-    /// returns true if the animation should auto reverse
+    /// `true` when [`Animation::auto_reverse`] is enabled.
     pub const fn is_auto_reverse(&self) -> bool {
-        self.auto_reverse
+        self.engine.is_auto_reverse()
     }
 
-    /// Returns true if the internal folded style of the animation should be applied.
-    ///
-    /// This is used when the animation cannot advance but the folded style should still be applied.
-    /// For example, when the animation is paused or when `apply_when_finished` is set.
+    /// `true` when the folded style should be re-applied even though
+    /// [`Self::advance`] won't progress (paused state, or
+    /// `apply_when_finished`).
     pub fn should_apply_folded(&self) -> bool {
-        self.apply_when_finished
-            || match self.state_kind() {
-                AnimStateKind::Paused => true,
-                AnimStateKind::Idle
-                | AnimStateKind::Stopped
-                | AnimStateKind::PassInProgress
-                | AnimStateKind::PassFinished
-                | AnimStateKind::Completed => false,
-            }
+        self.engine.should_apply_folded()
+    }
+
+    /// Whether `run_on_create` is enabled.
+    pub const fn runs_on_create(&self) -> bool {
+        self.engine.runs_on_create()
+    }
+
+    /// Whether `run_on_remove` is enabled.
+    pub const fn runs_on_remove(&self) -> bool {
+        self.engine.runs_on_remove()
+    }
+
+    /// The configured repeat mode.
+    pub fn repeat_mode(&self) -> &RepeatMode {
+        self.engine.get_repeat_mode()
     }
 
-    /// Apply the folded (last computed) style values to the given computed style.
-    ///
-    /// This is used when the animation is paused or completed but should still
-    /// apply its last interpolated values.
-    pub fn apply_folded(&self, computed_style: &mut Style) {
-        computed_style.apply_mut(&self.folded_style);
+    /// Imperatively transition the animation to a running state.
+    pub(crate) fn start_mut(&mut self) {
+        self.engine.transition(AnimStateCommand::Start);
+    }
+
+    /// Imperatively transition the animation into reverse playback.
+    pub(crate) fn reverse_mut(&mut self) {
+        self.engine.transition(AnimStateCommand::Reverse);
     }
 }
diff --git a/src/box_tree.rs b/src/box_tree.rs
index beb9e8506..3bea88d40 100644
--- a/src/box_tree.rs
+++ b/src/box_tree.rs
@@ -1,6 +1,7 @@
 use std::ops::{Deref, DerefMut};
 
 use rustc_hash::FxHashMap;
+use understory_box_tree::NodeId;
 
 use crate::ViewId;
 
@@ -44,20 +45,18 @@ use crate::ViewId;
 /// // But hit testing can distinguish which specific rectangle was hit
 /// ```
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
-pub struct ElementId(
-    pub(crate) understory_box_tree::NodeId,
-    pub(crate) ViewId,
-    pub(crate) bool,
-);
+pub struct ElementId(pub NodeId, pub u64, pub bool);
 
 impl ElementId {
-    pub fn owning_id(&self) -> crate::ViewId {
-        self.1
+    /// Returns `true` when this is the primary element for its owning view.
+    #[inline]
+    pub const fn is_view(&self) -> bool {
+        self.2
     }
 
-    /// Returns true if the element id is the primary element for a view.
-    pub fn is_view(&self) -> bool {
-        self.2
+    /// The owning view for this element id.
+    pub fn owning_id(&self) -> ViewId {
+        ViewId::from(slotmap::KeyData::from_ffi(self.1))
     }
 }
 
diff --git a/src/headless.rs b/src/headless.rs
index a757d067f..befacd4eb 100644
--- a/src/headless.rs
+++ b/src/headless.rs
@@ -398,7 +398,7 @@ impl HeadlessHarness {
     /// assert!(bg.is_some(), "Background should be set when :active");
     /// ```
     pub fn get_computed_style(&self, id: ViewId) -> Style {
-        id.state().borrow().computed_style.clone()
+        id.state().borrow().style_storage.computed_style.clone()
     }
 
     /// Trigger a style recalculation pass.
diff --git a/src/inspector/mod.rs b/src/inspector/mod.rs
index 0e652a000..53b581616 100644
--- a/src/inspector/mod.rs
+++ b/src/inspector/mod.rs
@@ -19,7 +19,7 @@ use crate::{
     prelude::*,
     style::{
         BorderRadius, FontSizeCx, Length, LengthAuto, OverflowX, OverflowY, StrokeWrap, Style,
-        StyleCx, StyleThemeExt, TextColor,
+        StyleDebugViewExt, StyleThemeExt, TextColor,
     },
 };
 
@@ -515,8 +515,8 @@ impl CapturedView {
         let taffy = id.get_layout().unwrap_or_default();
         let view_state = id.state();
         let view_state = view_state.borrow();
-        let combined_style = view_state.combined_style.clone();
-        let focus = view_state.combined_style.builtin().set_focus();
+        let combined_style = view_state.style_storage.combined_style.clone();
+        let focus = view_state.style_storage.combined_style.builtin().set_focus();
         let focused = window_state.focus_state.current_path().last() == Some(&id.get_element_id());
         let custom_name = &view_state.debug_name;
         let view = id.view();
@@ -585,10 +585,8 @@ pub struct CaptureState {
 }
 
 impl CaptureState {
-    pub(crate) fn capture_style(id: ViewId, cx: &mut StyleCx, computed_style: Style) {
-        if let Some(capture) = cx.window_state.capture.as_mut() {
-            capture.computed_styles.insert(id, computed_style);
-        }
+    pub(crate) fn record_computed_style(&mut self, id: ViewId, style: Style) {
+        self.computed_styles.insert(id, style);
     }
 }
 
diff --git a/src/inspector/view.rs b/src/inspector/view.rs
index ff67bc6e2..b575e17c8 100644
--- a/src/inspector/view.rs
+++ b/src/inspector/view.rs
@@ -680,7 +680,9 @@ fn register_capture_elements(
             bt.set_element_meta(
                 element.0,
                 Some(crate::ElementMeta::new(ElementId(
-                    element.0, owner_id, false,
+                    element.0,
+                    owner_id.as_raw(),
+                    false,
                 ))),
             );
             drop(bt);
diff --git a/src/layout/mod.rs b/src/layout/mod.rs
index ace910602..93b929031 100644
--- a/src/layout/mod.rs
+++ b/src/layout/mod.rs
@@ -6,8 +6,12 @@
 //! - [`LayoutCx`] - Context for computing Taffy layout nodes
 //! - [`ComputeLayoutCx`] - Context for computing view positions after Taffy layout
 
-pub mod responsive;
 mod screen;
 
-pub use responsive::{GridBreakpoints, ScreenSize, range};
+/// Responsive design breakpoints and size flags.
+///
+/// Re-exported from the `floem_style` crate so `floem::layout::responsive`
+/// stays a valid import path for downstream users.
+pub use floem_style::responsive;
+pub use floem_style::responsive::{GridBreakpoints, ScreenSize, range};
 pub use screen::{ScreenLayout, screen_layout_for_window, try_create_screen_layout};
diff --git a/src/lib.rs b/src/lib.rs
index 87cd5c435..3637e2e8a 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -221,6 +221,8 @@ pub mod receiver_signal {
 }
 
 pub use box_tree::{BoxTree, ElementId, ElementMeta, FocusNavMeta};
+#[doc(inline)]
+pub use floem_style::{no_debug_view, prop, prop_extractor, style_class, style_debug_group};
 pub(crate) use box_tree::{bump_focus_nav_meta_revision, focus_nav_meta_revision};
 
 pub use app::{AppConfig, AppEvent, Application, launch, quit_app, reopen};
@@ -261,6 +263,7 @@ pub mod prelude {
     pub use crate::event::listener as el;
     pub use crate::event::listener;
     pub use crate::event::listener::EventListenerTrait;
+    pub use crate::style::StyleCustomExt;
     pub use crate::unit::{DurationUnitExt, UnitExt};
     pub use crate::view::IntoViewIter;
     pub use crate::view::ViewTuple;
diff --git a/src/paint/mod.rs b/src/paint/mod.rs
index d70ae9037..c0971d125 100644
--- a/src/paint/mod.rs
+++ b/src/paint/mod.rs
@@ -300,17 +300,17 @@ impl GlobalPaintCx<'_> {
             world_transform,
             layout_rect_local,
             clip,
-            font_size_cx: view_state.borrow().layout_props.font_size_cx(),
+            font_size_cx: view_state.borrow().style_storage.layout_props.font_size_cx(),
         };
 
         if !is_post {
             if element_id.is_view() {
                 let state = view_state.borrow();
-                paint_bg(&mut cx, &state.view_style_props, layout_rect);
+                paint_bg(&mut cx, &state.style_storage.view_style_props, layout_rect);
                 paint_border(
                     &mut cx,
-                    &state.layout_props,
-                    &state.view_style_props,
+                    &state.style_storage.layout_props,
+                    &state.style_storage.view_style_props,
                     layout_rect,
                 );
                 drop(state);
@@ -327,7 +327,7 @@ impl GlobalPaintCx<'_> {
             view.borrow_mut().post_paint(&mut cx);
             if element_id.is_view() {
                 let state = view_state.borrow();
-                paint_outline(&mut cx, &state.view_style_props, layout_rect);
+                paint_outline(&mut cx, &state.style_storage.view_style_props, layout_rect);
             }
         }
     }
diff --git a/src/style/custom.rs b/src/style/custom.rs
index 2d4b0ed60..bc0d6cef9 100644
--- a/src/style/custom.rs
+++ b/src/style/custom.rs
@@ -5,6 +5,10 @@
 //!
 //! - [`CustomStyle`] - Base trait for defining custom style types
 //! - [`CustomStylable`] - Trait for views that can accept custom styling
+//! - [`StyleCustomExt`] - Extension trait adding `custom`, `apply_custom`, and
+//!   `custom_style_class` to [`Style`]. These methods used to be inherent on
+//!   `Style` but were moved once `Style` itself migrated to `floem_style` (the
+//!   `CustomStyle` bound references a floem-only trait).
 
 use std::rc::Rc;
 
@@ -407,3 +411,63 @@ pub trait CustomStylable<S: CustomStyle + 'static>: IntoView<V = Self::DV> + Siz
         view
     }
 }
+
+/// Extension trait adding `CustomStyle`-aware builders onto [`Style`].
+///
+/// Lives in `floem` (not `floem_style`) because the `CustomStyle` bound is a
+/// floem-only trait. Call `use floem::style::StyleCustomExt;` at the call
+/// site to bring the methods into scope.
+pub trait StyleCustomExt: Sized {
+    /// Applies a `CustomStyle` type into this style.
+    ///
+    /// # Examples
+    /// ```
+    /// use floem::prelude::*;
+    /// text("test").style(|s| s.custom(|s: LabelCustomStyle| s.selectable(false)));
+    /// ```
+    ///
+    /// See also: [`apply_custom`](Self::apply_custom),
+    /// [`custom_style_class`](Self::custom_style_class)
+    fn custom<CS: CustomStyle>(self, custom: impl FnOnce(CS) -> CS) -> Self;
+
+    /// Applies a `CustomStyle` type into this style.
+    ///
+    /// # Examples
+    /// ```
+    /// use floem::prelude::*;
+    /// use floem::style::StyleCustomExt;
+    /// text("test").style(|s| s.apply_custom(LabelCustomStyle::new().selectable(false)));
+    /// ```
+    ///
+    /// See also: [`custom`](Self::custom), [`custom_style_class`](Self::custom_style_class)
+    fn apply_custom<CS: Into<Style>>(self, custom_style: CS) -> Self;
+
+    /// Applies a `CustomStyle` type to the `CustomStyle`'s associated style class.
+    ///
+    /// For example: if the `CustomStyle` you use is `DropdownCustomStyle` then it
+    /// will apply the custom style to that custom style type's associated style class
+    /// which, in this example, is `DropdownClass`.
+    ///
+    /// This is especially useful when building a stylesheet or targeting a child view.
+    ///
+    /// See also: [`custom`](Self::custom) and [`apply_custom`](Self::apply_custom).
+    fn custom_style_class<CS: CustomStyle>(self, style: impl FnOnce(CS) -> CS) -> Self;
+}
+
+impl StyleCustomExt for Style {
+    fn custom<CS: CustomStyle>(self, custom: impl FnOnce(CS) -> CS) -> Self {
+        self.apply(custom(CS::default()).into())
+    }
+
+    fn apply_custom<CS: Into<Style>>(self, custom_style: CS) -> Self {
+        self.apply(custom_style.into())
+    }
+
+    fn custom_style_class<CS: CustomStyle>(self, style: impl FnOnce(CS) -> CS) -> Self {
+        // We need access to Style's `set_class`, which is private to floem_style.
+        // Equivalent behavior using the public API: merge into the class slot via
+        // the public `class` builder.
+        let over = style(CS::default());
+        self.class(CS::StyleClass::default(), |_| over.into())
+    }
+}
diff --git a/src/style/cx.rs b/src/style/cx.rs
index 859fd4820..6c4a89c47 100644
--- a/src/style/cx.rs
+++ b/src/style/cx.rs
@@ -17,7 +17,6 @@ use web_time::Instant;
 use crate::{
     ElementId,
     animate::{AnimStateKind, RepeatMode},
-    inspector::CaptureState,
     style::{
         StyleClassRef,
         recalc::{StyleReason, StyleReasonFlags},
@@ -29,59 +28,7 @@ use crate::{
 
 use super::{Style, StyleProp};
 
-/// The interaction state of a view, used to determine which style selectors apply.
-///
-/// This struct captures the current state of user interaction with a view,
-/// such as whether it's hovered, focused, being clicked, etc. This state is
-/// used during style computation to apply conditional styles like `:hover`,
-/// `:active`, `:focus`, etc.
-#[derive(Default, Debug, Clone, Copy)]
-pub struct InteractionState {
-    /// Whether the pointer is currently over this element.
-    pub is_hovered: bool,
-    /// Whether this element is in a selected state.
-    pub is_selected: bool,
-    /// Whether this element is disabled.
-    pub is_disabled: bool,
-    /// Whether this element has keyboard focus.
-    pub is_focused: bool,
-    /// Whether this element or a descendant currently has keyboard focus.
-    pub is_focus_within: bool,
-    /// Whether the element has been hidden
-    pub is_hidden: bool,
-    /// Whether an element is currently in the "active" state
-    /// active: pointer down and not up with the pointer in the element either by
-    ///   1: remaining in or
-    ///   2: returning into the element
-    /// or keyboard trigger is down.
-    pub is_active: bool,
-    /// Whether dark mode is enabled.
-    pub is_dark_mode: bool,
-    /// Whether a file is being dragged over this element.
-    pub is_file_hover: bool,
-    /// Whether keyboard navigation is active.
-    pub using_keyboard_navigation: bool,
-    /// 1-based child index within parent, if this view has a parent.
-    pub child_index: Option<usize>,
-    /// Number of siblings under this view's parent.
-    pub sibling_count: usize,
-    /// Current window width in px for responsive selector matching.
-    pub window_width: f64,
-}
-
-/// Inherited interaction context that is propagated from parent to children.
-///
-/// These states can be set by parent views and are inherited by children,
-/// allowing parents to control the disabled or selected state of entire subtrees.
-#[derive(Default, Debug, Clone, Copy)]
-pub struct InheritedInteractionCx {
-    /// Whether this view (or an ancestor) is disabled.
-    pub disabled: bool,
-    /// Whether this view (or an ancestor) is selected.
-    pub selected: bool,
-    /// Whether this view (or an ancestor) is hidden.
-    pub hidden: bool,
-}
+pub use floem_style::{InheritedInteractionCx, InteractionState};
 
 pub struct StyleCx<'a> {
     pub window_state: &'a mut WindowState,
@@ -120,43 +67,39 @@ pub struct StyleCx<'a> {
     pub(crate) reason: StyleReason,
 
     /// Targeted sub-element invalidations. Populated when one or more specific
-    /// `ElementId`s owned by this view need updating without a full view restyle.
-    /// Empty means the full view is being restyled.
+    /// sub-element `StyleNodeId`s owned by this view need updating without a
+    /// full view restyle. Empty means the full view is being restyled.
     ///
-    /// `style_pass` implementations should walk this list and update only the
-    /// affected elements when non-empty, skipping the full cascade for untouched
-    /// sub-elements.
-    pub(crate) targeted_elements: SmallVec<[(ElementId, StyleReason); 2]>,
+    /// `style_pass` implementations walk this list, compare each entry to
+    /// their sub-elements' cached `StyleNodeId`s (see
+    /// [`WindowState::ensure_style_node_for_element`]), and restyle only
+    /// the affected sub-elements.
+    pub(crate) targeted_elements: SmallVec<[(floem_style::StyleNodeId, StyleReason); 2]>,
 }
 
 impl<'a> StyleCx<'a> {
-    pub fn new(window_state: &'a mut WindowState, view_id: ViewId, reason: StyleReason) -> Self {
-        // Get the style parent: either custom style_cx_parent or DOM parent
-        let style_parent = view_id
-            .state()
-            .borrow()
-            .style_cx_parent
-            .or_else(|| view_id.parent());
-
-        // Initialize inherited and class contexts separately
-        let (inherited, class_context) = if let Some(parent_id) = style_parent {
-            let parent_state = parent_id.state();
-            let parent_state = parent_state.borrow();
-
-            let inherited_style = parent_state.style_cx.clone();
-            let class_ctx = parent_state.class_cx.clone();
-
-            (inherited_style, class_ctx)
-        } else {
+    pub fn new(
+        window_state: &'a mut WindowState,
+        view_id: ViewId,
+        reason: StyleReason,
+    ) -> Self {
+        // By the time `StyleCx::new` runs, `WindowHandle::style` has
+        // already driven `run_style_cascade` Pass 3, which mirrored the
+        // tree's outputs (combined / inherited / class context) into
+        // this view's `style_storage`. Read them here so `style_view`
+        // doesn't need a separate plumbing block later and
+        // `view.style_pass` callbacks (`cx.direct_style()`,
+        // `cx.resolve_nested_maps(..)`) see the right values.
+        let (direct, inherited, class_context) = {
+            let state = view_id.state();
+            let vs = state.borrow();
             (
-                window_state.default_theme_inherited.clone(),
-                window_state.default_theme.clone(),
+                vs.style_storage.combined_style.clone(),
+                vs.style_storage.style_cx.clone(),
+                vs.style_storage.class_cx.clone(),
             )
         };
 
-        let view = view_id.view();
-        let view_state = view_id.state();
-
         let mut reason_for_children = reason.for_children();
         if let Some(selectors) = reason_for_children.selectors {
             if selectors.has_responsive() {
@@ -197,19 +140,13 @@ impl<'a> StyleCx<'a> {
             .collect();
 
         // ─────────────────────────────────────────────────────────────────────
-        // Phase 1: Clear dirty flags, update view style, propagate to children
+        // Phase 1: Clear dirty flags, propagate to children
+        //
+        // `view_style()` is applied before this by the window's style loop
+        // (see `WindowHandle::style`) so the engine's `StyleTree` cascade
+        // sees the freshest view_style.
         // ─────────────────────────────────────────────────────────────────────
 
-        {
-            if reason.flags.contains(StyleReasonFlags::VIEW_STYLE)
-                && let Some(view_style) = view.borrow().view_style()
-            {
-                let mut vs = view_state.borrow_mut();
-                let offset = vs.view_style_offset;
-                vs.style.set(offset, view_style);
-            }
-        }
-
         // ─────────────────────────────────────────────────────────────────────
         // Phase 2: Build interaction state for selector matching
         // ─────────────────────────────────────────────────────────────────────
@@ -221,7 +158,7 @@ impl<'a> StyleCx<'a> {
             current_view: view_id,
             inherited,
             class_context,
-            direct: Default::default(),
+            direct,
             now,
             view_interact_state,
             reason,
@@ -246,7 +183,7 @@ impl<'a> StyleCx<'a> {
 
         let (active_selectors, classes) = {
             let vs = view_state.borrow();
-            let selectors = vs.has_style_selectors;
+            let selectors = vs.style_storage.has_style_selectors;
 
             // Build the full class list: view's classes + view type class
             let mut all_classes =
@@ -278,176 +215,23 @@ impl<'a> StyleCx<'a> {
         }
 
         // ─────────────────────────────────────────────────────────────────────
-        // Phase 4: Resolve combined style
+        // Phase 4: Absorb cascade outputs
         // ─────────────────────────────────────────────────────────────────────
+        // `WindowHandle::style` ran `StyleTree::compute_style` (which also
+        // applies this view's animations on top of the resolved style) and
+        // copied the tree's outputs into this view's `style_storage`. We
+        // just need to OR the view-local interaction flags (disabled /
+        // selected / hidden) into `self.view_interact_state` so the rest
+        // of `style_view` observes them.
         let did_refresh_style =
             self.reason.needs_resolve_nested_maps() || self.reason.needs_animation();
 
-        if self.reason.needs_resolve_nested_maps() {
-            use super::cache::StyleCacheKey;
-
-            // Get metadata without cloning the full style
-            let (style_hash, cacheable) = {
-                let mut vs = view_state.borrow_mut();
-                let style_hash = vs.style_content_hash();
-                let cacheable =
-                    vs.style_is_cacheable() && !self.class_context.has_structural_selectors();
-                (style_hash, cacheable)
-            };
-
-            let cache_key = if cacheable {
-                Some(StyleCacheKey::new_from_hash(
-                    style_hash,
-                    &self.view_interact_state,
-                    self.window_state.screen_size_bp,
-                    &classes,
-                    &self.class_context,
-                ))
-            } else {
-                None
-            };
-
-            let cache_hit = cache_key
-                .as_ref()
-                .and_then(|key| self.window_state.style_cache.get(key, &self.inherited));
-
-            if let Some(hit) = cache_hit {
-                // Cache hit — restore all compute_combined() outputs, no Style clone needed
-                let mut vs = view_state.borrow_mut();
-                vs.combined_pre_animation_style = hit.combined_style.clone();
-                vs.combined_style = hit.combined_style;
-                vs.has_style_selectors = hit.has_style_selectors;
-                vs.post_compute_combined_interaction = hit.post_interact;
-                self.view_interact_state.is_hidden |= hit.post_interact.hidden;
-                self.view_interact_state.is_selected |= hit.post_interact.selected;
-                self.view_interact_state.is_disabled |= hit.post_interact.disabled;
-            } else {
-                // Cache miss — compute normally (style() clone happens inside compute_combined)
-                view_state.borrow_mut().compute_combined(
-                    &mut self.view_interact_state,
-                    self.window_state.screen_size_bp,
-                    view_class,
-                    &self.inherited,
-                    &self.class_context,
-                );
-
-                // Insert into cache
-                if let Some(key) = cache_key {
-                    let vs = view_state.borrow();
-                    self.window_state.style_cache.insert(
-                        key,
-                        &vs.combined_style,
-                        vs.has_style_selectors,
-                        vs.post_compute_combined_interaction,
-                        &self.inherited,
-                    );
-                }
-            }
-        } else {
-            // Fast path: nested-map resolution was skipped, so reapply the view-local
-            // interaction state saved from the last combined-style computation.
-            let cached = view_state.borrow().post_compute_combined_interaction;
-            self.view_interact_state.is_hidden |= cached.hidden;
-            self.view_interact_state.is_selected |= cached.selected;
-            self.view_interact_state.is_disabled |= cached.disabled;
-        }
-
-        if self.reason.needs_animation() {
-            let has_active_animation = view_state
-                .borrow_mut()
-                .apply_animations(&mut self.view_interact_state);
-            if has_active_animation {
-                self.window_state
-                    .schedule_style(view_id, StyleReason::animation());
-            }
-        }
-
-        self.window_state
-            .update_selector_interest(view_id, view_state.borrow().has_style_selectors);
-
-        let old_interact_state = {
-            let vs = view_state.borrow();
-            vs.style_interaction_cx
-        };
+        let cached = view_state.borrow().style_storage.style_interaction_cx;
+        self.view_interact_state.is_hidden |= cached.hidden;
+        self.view_interact_state.is_selected |= cached.selected;
+        self.view_interact_state.is_disabled |= cached.disabled;
 
         let mut need_paint = false;
-        // ─────────────────────────────────────────────────────────────────────
-        // Phase 5: Compute final style and propagate contexts to children
-        // ─────────────────────────────────────────────────────────────────────
-        if did_refresh_style {
-            self.direct = view_state.borrow().combined_style.clone();
-
-            // Capture the inner map pointer before updating so we can detect whether
-            // inherited properties actually changed.
-            let old_inherited_map = view_state.borrow().style_cx.clone();
-            // Propagate inherited properties to children (separate from class context)
-            Style::apply_only_inherited(&mut self.inherited, &self.direct);
-            let inherited_changed = self.inherited.merge_id() != old_inherited_map.merge_id();
-
-            let old_class_context = view_state.borrow().class_cx.clone();
-            Style::apply_only_class_maps(&mut self.class_context, &self.direct);
-            let changed_classes = self.class_context.class_maps_eq(&old_class_context);
-            let class_context_changed = !changed_classes.is_empty();
-
-            // ─────────────────────────────────────────────────────────────────────
-            // Phase 5.5: Propagate changes to children if needed
-            // ─────────────────────────────────────────────────────────────────────
-            if inherited_changed || class_context_changed {
-                for child in view_id.children() {
-                    let element_id = child.get_element_id();
-                    if inherited_changed {
-                        self.window_state
-                            .mark_style_dirty_with(element_id, StyleReason::inherited());
-                    }
-                    if class_context_changed {
-                        self.window_state.mark_style_dirty_with(
-                            element_id,
-                            StyleReason::class_cx(changed_classes.clone()),
-                        );
-                    }
-                }
-            }
-
-            // Compute the final style by merging inherited context with direct style
-            let mut computed_style = self.inherited.clone();
-            computed_style.apply_mut(&self.direct);
-            computed_style = computed_style.with_inherited_context(&self.inherited);
-
-            // ─────────────────────────────────────────────────────────────────────
-            // Phase 6: Update window and view state.
-            // ─────────────────────────────────────────────────────────────────────
-
-            let new_is_fixed = computed_style.builtin().is_fixed();
-            if new_is_fixed {
-                self.window_state.register_fixed_element(view_id);
-            } else {
-                self.window_state.unregister_fixed_element(view_id);
-            }
-
-            {
-                let mut vs = view_state.borrow_mut();
-
-                vs.style_cx = self.inherited.clone();
-                vs.class_cx = self.class_context.clone();
-                vs.computed_style = computed_style;
-
-                vs.style_interaction_cx = InheritedInteractionCx {
-                    disabled: self.view_interact_state.is_disabled,
-                    selected: self.view_interact_state.is_selected,
-                    hidden: self.view_interact_state.is_hidden,
-                };
-            }
-        } else {
-            let mut vs = view_state.borrow_mut();
-            self.direct = vs.combined_style.clone();
-            self.inherited = vs.style_cx.clone();
-            self.class_context = vs.class_cx.clone();
-            vs.style_interaction_cx = InheritedInteractionCx {
-                disabled: self.view_interact_state.is_disabled,
-                selected: self.view_interact_state.is_selected,
-                hidden: self.view_interact_state.is_hidden,
-            };
-        }
 
         if self.reason.needs_property_extraction() {
             // ─────────────────────────────────────────────────────────────────────
@@ -461,31 +245,25 @@ impl<'a> StyleCx<'a> {
 
                 // Clone the computed style to avoid borrow conflicts with the mutable
                 // borrow needed for the extractors. This includes animated values.
-                let computed = vs.computed_style.clone();
+                let computed = vs.style_storage.computed_style.clone();
 
                 // Layout properties (padding, margin, size, etc.)
-                vs.layout_props
+                vs.style_storage.layout_props
                     .read_explicit(&computed, &self.now, &mut transitioning);
 
                 // View style properties (background, border, etc.)
                 need_paint |=
-                    vs.view_style_props
+                    vs.style_storage.view_style_props
                         .read_explicit(&computed, &self.now, &mut transitioning);
 
                 // Transform properties (translate, scale, rotation)
                 let mut box_tree_changed = false;
                 box_tree_changed |=
-                    vs.view_transform_props
+                    vs.style_storage.view_transform_props
                         .read_explicit(&computed, &self.now, &mut transitioning);
                 if box_tree_changed {
                     view_id.request_box_tree_update_for_view();
                 }
-
-                let old_cursor = vs.style_cursor;
-                if old_cursor != computed.builtin().cursor() {
-                    vs.style_cursor = computed.builtin().cursor();
-                    self.window_state.needs_cursor_resolution = true;
-                }
             }
 
             if transitioning {
@@ -494,34 +272,6 @@ impl<'a> StyleCx<'a> {
             }
         }
 
-        if old_interact_state.hidden != self.view_interact_state.is_hidden {
-            for child in view_id.children() {
-                self.window_state
-                    .mark_style_dirty_with(child.get_element_id(), StyleReason::visibility());
-            }
-            view_id.request_layout();
-        }
-        if old_interact_state.selected != self.view_interact_state.is_selected
-            && !self
-                .reason
-                .selectors
-                .is_some_and(|s| s.has(super::StyleSelector::Selected))
-        {
-            self.window_state
-                .mark_descendants_with_selector_dirty(view_id, super::StyleSelector::Selected);
-        }
-        if old_interact_state.disabled != self.view_interact_state.is_disabled
-            && !self
-                .reason
-                .selectors
-                .is_some_and(|s| s.has(super::StyleSelector::Disabled))
-        {
-            self.window_state
-                .mark_descendants_with_selector_dirty(view_id, super::StyleSelector::Disabled);
-        }
-
-        CaptureState::capture_style(view_id, self, view_state.borrow().computed_style.clone());
-
         if did_refresh_style || self.reason.has_transition() || self.reason.has_visiblity() {
             // ─────────────────────────────────────────────────────────────────────
             // Phase 8: visibility transitions and set taffy style
@@ -530,12 +280,12 @@ impl<'a> StyleCx<'a> {
             let parent_set_hidden = {
                 let view_state = view_id.state();
                 let view_state = view_state.borrow();
-                view_state.parent_set_style_interaction.hidden
+                view_state.style_storage.parent_set_style_interaction.hidden
             };
             let display_override = if !parent_set_hidden {
                 let (old_phase, computed_display) = {
                     let vs = view_state.borrow();
-                    (vs.visibility.phase, vs.combined_style.builtin().display())
+                    (vs.style_storage.visibility.phase, vs.style_storage.combined_style.builtin().display())
                 };
                 let mut phase = old_phase;
 
@@ -543,16 +293,16 @@ impl<'a> StyleCx<'a> {
                     computed_display,
                     || {
                         let count = animations_on_remove(view_id, Scope::current());
-                        view_state.borrow_mut().num_waiting_animations = count;
+                        view_state.borrow_mut().style_storage.num_waiting_animations = count;
                         count > 0
                     },
                     || animations_on_create(view_id),
                     || stop_reset_remove_animations(view_id),
-                    || view_state.borrow().num_waiting_animations,
+                    || view_state.borrow().style_storage.num_waiting_animations,
                 );
 
                 if old_phase != phase {
-                    view_state.borrow_mut().visibility.phase = phase;
+                    view_state.borrow_mut().style_storage.visibility.phase = phase;
                 }
                 phase.get_display_override()
             } else {
@@ -566,10 +316,11 @@ impl<'a> StyleCx<'a> {
                 // Update taffy style if layout properties changed (must happen after visibility phase override)
                 // ─────────────────────────────────────────────────────────────────────
                 let mut vs = view_state.borrow_mut();
+                let element_id = vs.element_id;
                 let is_hidden_final = self.view_interact_state.is_hidden
                     || display_override.is_some_and(|d| d == taffy::Display::None);
-                let mut taffy_style = vs.combined_style.to_taffy_style();
-                vs.layout_props.apply_to_taffy_style(&mut taffy_style);
+                let mut taffy_style = vs.style_storage.combined_style.to_taffy_style();
+                vs.style_storage.layout_props.apply_to_taffy_style(&mut taffy_style);
                 if let Some(display_override) = display_override {
                     taffy_style.display = display_override;
                 }
@@ -592,13 +343,12 @@ impl<'a> StyleCx<'a> {
                 let focus_nav_changed;
                 {
                     let box_tree = view_id.box_tree();
-                    let element_id = vs.element_id;
                     let box_tree = &mut box_tree.borrow_mut();
                     let old_flags = box_tree.flags(element_id.0).unwrap_or(NodeFlags::empty());
                     let old_focus = box_tree.focus_nav_meta(element_id.0).unwrap_or_default();
                     let mut flags = NodeFlags::empty();
                     // need to update this after visibility.
-                    if (vs.computed_style.builtin().pointer_events()
+                    if (vs.style_storage.computed_style.builtin().pointer_events()
                         != Some(crate::style::PointerEvents::None))
                         && !is_hidden_final
                     {
@@ -610,7 +360,7 @@ impl<'a> StyleCx<'a> {
                     if old_flags != flags {
                         box_tree.set_flags(element_id.0, flags);
                     }
-                    let effective_focus = vs.computed_style.builtin().set_focus();
+                    let effective_focus = vs.style_storage.computed_style.builtin().set_focus();
                     let focusable = effective_focus.is_focusable()
                         && !is_hidden_final
                         && !self.view_interact_state.is_disabled;
@@ -625,7 +375,7 @@ impl<'a> StyleCx<'a> {
                         box_tree.set_focus_nav_meta(element_id.0, new_focus);
                     }
 
-                    let new_z_index = vs.combined_style.builtin().z_index().unwrap_or(0);
+                    let new_z_index = vs.style_storage.combined_style.builtin().z_index().unwrap_or(0);
 
                     // Get old z-index from box tree
                     let old_z_index = box_tree.z_index(element_id.0).unwrap_or(0);
@@ -640,7 +390,7 @@ impl<'a> StyleCx<'a> {
                 // Phase 8.3: request paint for view style changes if not hidden
                 // ─────────────────────────────────────────────────────────────────────
                 if !is_hidden_final && need_paint {
-                    self.window_state.request_paint(view_id);
+                    self.window_state.request_paint(element_id);
                 }
             }
         }
@@ -724,17 +474,18 @@ impl<'a> StyleCx<'a> {
     }
 
     pub fn request_transition(&mut self) {
-        self.request_transition_for(self.current_view.get_element_id());
+        let node = self
+            .window_state
+            .ensure_style_node(self.current_view);
+        self.request_transition_for(node);
     }
 
     /// Request a transition-driven style update for a specific style target.
-    ///
-    /// This allows transition requests to target sub-elements instead of always
-    /// assuming the owning view element.
-    pub fn request_transition_for(&mut self, target: impl Into<ElementId>) {
+    pub fn request_transition_for(&mut self, target: floem_style::StyleNodeId) {
         if !self.view_interact_state.is_hidden {
             self.window_state
-                .schedule_style_with_target(target.into(), StyleReason::transition());
+                .style_tree
+                .schedule(target, StyleReason::transition());
         }
     }
 
@@ -752,10 +503,10 @@ impl<'a> StyleCx<'a> {
         let parent_override = {
             let view_state = view_id.state();
             let view_state = view_state.borrow();
-            view_state.parent_set_style_interaction
+            view_state.style_storage.parent_set_style_interaction
         };
         let parent_cx = style_parent
-            .map(|p| p.state().borrow().style_interaction_cx)
+            .map(|p| p.state().borrow().style_storage.style_interaction_cx)
             .unwrap_or_default();
         // TODO: use box tree child order instead
         let (child_index, sibling_count) = if let Some(parent) = style_parent {
@@ -797,7 +548,7 @@ impl<'a> StyleCx<'a> {
             is_focused: window_state.is_focused(id),
             is_focus_within: window_state.is_focus_within(id),
             is_active: window_state.is_active(id),
-            is_dark_mode: window_state.is_dark_mode(),
+            is_dark_mode: WindowState::is_dark_mode(window_state),
             is_file_hover: window_state.is_file_hover(id),
             using_keyboard_navigation: window_state.keyboard_navigation,
             child_index,
@@ -807,17 +558,26 @@ impl<'a> StyleCx<'a> {
     }
 }
 
+impl floem_style::PropExtractorCx for StyleCx<'_> {
+    fn now(&self) -> Instant {
+        self.now
+    }
+    fn direct_style(&self) -> &Style {
+        &self.direct
+    }
+}
+
 // Animation helper functions used by StyleCx::style_view
 
 fn animations_on_remove(id: ViewId, scope: Scope) -> u16 {
     let mut wait_for = 0;
     let state = id.state();
     let mut state = state.borrow_mut();
-    state.num_waiting_animations = 0;
+    state.style_storage.num_waiting_animations = 0;
     let animations = &mut state.animations.stack;
     let mut request_style = false;
     for anim in animations {
-        if anim.run_on_remove && !matches!(anim.repeat_mode, RepeatMode::LoopForever) {
+        if anim.runs_on_remove() && !matches!(anim.repeat_mode(), RepeatMode::LoopForever) {
             anim.reverse_mut();
             request_style = true;
             wait_for += 1;
@@ -846,9 +606,9 @@ fn stop_reset_remove_animations(id: ViewId) {
     let animations = &mut state.animations.stack;
     let mut request_style = false;
     for anim in animations {
-        if anim.run_on_remove
+        if anim.runs_on_remove()
             && anim.state_kind() == AnimStateKind::PassInProgress
-            && !matches!(anim.repeat_mode, RepeatMode::LoopForever)
+            && !matches!(anim.repeat_mode(), RepeatMode::LoopForever)
         {
             anim.start_mut();
             request_style = true;
@@ -867,11 +627,11 @@ fn stop_reset_remove_animations(id: ViewId) {
 fn animations_on_create(id: ViewId) {
     let state = id.state();
     let mut state = state.borrow_mut();
-    state.num_waiting_animations = 0;
+    state.style_storage.num_waiting_animations = 0;
     let animations = &mut state.animations.stack;
     let mut request_style = false;
     for anim in animations {
-        if anim.run_on_create && !matches!(anim.repeat_mode, RepeatMode::LoopForever) {
+        if anim.runs_on_create() && !matches!(anim.repeat_mode(), RepeatMode::LoopForever) {
             anim.start_mut();
             request_style = true;
         }
diff --git a/src/style/debug_view_impl.rs b/src/style/debug_view_impl.rs
new file mode 100644
index 000000000..77271184a
--- /dev/null
+++ b/src/style/debug_view_impl.rs
@@ -0,0 +1,632 @@
+//! Inspector debug-view implementation for [`Style`].
+//!
+//! Builds the tabbed properties/selectors/classes tree shown in the Floem
+//! inspector. Counterpart to [`super::inspector_render_impl`] — that file
+//! implements per-prop previews via the `InspectorRender` trait, while this
+//! file assembles those previews into the top-level style debug view.
+
+use floem_reactive::{RwSignal, SignalGet, SignalUpdate as _};
+use std::collections::HashSet;
+use std::rc::Rc;
+use taffy::style::FlexDirection;
+
+use crate::AnyView;
+use crate::prelude::ViewTuple;
+use crate::style::CursorStyle;
+use crate::theme::StyleThemeExt;
+use crate::view::{IntoView, View};
+use crate::views::{
+    ButtonClass, ContainerExt, Decorators, Empty, Label, Stack, TabSelectorClass, dyn_view, svg,
+    tab,
+};
+
+use super::{
+    FontSize, ResponsiveSelectors, StructuralSelectors, Style, StyleDebugGroupInfo, StyleKey,
+    StyleKeyInfo, StylePropRef, Transition, TransitionDebugViewExt,
+};
+
+// Primitive, taffy, collection, peniko, text, and unit `StylePropValue` impls
+// live in `floem_style::value_impls` (moved there to satisfy the orphan rule).
+// `PropDebugView` impls for types owned by external crates
+// (Option, Vec, SmallVec, MinMax, Line, FontWeight, FontStyle, primitives via
+// `no_debug_view!`) likewise live in `floem_style::value_impls`.
+
+pub(crate) fn views(views: impl ViewTuple) -> Vec<AnyView> {
+    views.into_views()
+}
+
+fn short_style_name(name: &str) -> String {
+    name.strip_prefix("floem::style::")
+        .unwrap_or(name)
+        .to_string()
+}
+
+struct StyleDebugRow {
+    render: Rc<dyn Fn(bool) -> AnyView>,
+    is_empty: bool,
+}
+
+fn effective_inherited_debug_groups(
+    style: &Style,
+    parent_groups: &HashSet<StyleKey>,
+) -> HashSet<StyleKey> {
+    let mut groups = parent_groups.clone();
+    for key in style.map.keys() {
+        if let StyleKeyInfo::DebugGroup(info) = key.info {
+            if style.debug_group_enabled(*key) {
+                if info.inherited {
+                    groups.insert(*key);
+                }
+            } else {
+                groups.remove(key);
+            }
+        }
+    }
+    groups
+}
+
+fn style_debug_active_groups(
+    style: &Style,
+    inherited_groups: &HashSet<StyleKey>,
+) -> Vec<&'static StyleDebugGroupInfo> {
+    let mut groups = style
+        .map
+        .keys()
+        .filter_map(|key| match key.info {
+            StyleKeyInfo::DebugGroup(info) if style.debug_group_enabled(*key) => Some(info),
+            _ => None,
+        })
+        .collect::<Vec<_>>();
+
+    for key in inherited_groups {
+        if let StyleKeyInfo::DebugGroup(info) = key.info
+            && !style.map.contains_key(key)
+        {
+            groups.push(info);
+        }
+    }
+
+    groups.sort_unstable_by_key(|info| short_style_name((info.name)()));
+    groups.dedup_by_key(|info| (info.name)());
+    groups
+}
+
+fn style_debug_is_empty(style: &Style, inherited_groups: &HashSet<StyleKey>) -> bool {
+    let mut hidden_props = HashSet::new();
+
+    for info in style_debug_active_groups(style, inherited_groups) {
+        let members = (info.member_props)();
+        let present = members
+            .iter()
+            .copied()
+            .filter(|key| style.map.contains_key(key) && !hidden_props.contains(key))
+            .collect::<Vec<_>>();
+        if !present.is_empty() {
+            hidden_props.extend(present);
+        }
+    }
+
+    if style
+        .map
+        .iter()
+        .any(|(key, _)| matches!(key.info, StyleKeyInfo::Prop(..)) && !hidden_props.contains(key))
+    {
+        return false;
+    }
+
+    if style.map.iter().any(|(key, value)| match key.info {
+        StyleKeyInfo::Selector(..) | StyleKeyInfo::Class(..) => {
+            value.downcast_ref::<Style>().is_some_and(|nested| {
+                !style_debug_is_empty(
+                    nested,
+                    &effective_inherited_debug_groups(nested, inherited_groups),
+                )
+            })
+        }
+        _ => false,
+    }) {
+        return false;
+    }
+
+    for value in style.map.values() {
+        if let Some(rules) = value.downcast_ref::<StructuralSelectors>()
+            && rules.0.iter().any(|(_, nested)| {
+                !style_debug_is_empty(
+                    nested,
+                    &effective_inherited_debug_groups(nested, inherited_groups),
+                )
+            })
+        {
+            return false;
+        }
+        if let Some(rules) = value.downcast_ref::<ResponsiveSelectors>()
+            && rules.0.iter().any(|(_, nested)| {
+                !style_debug_is_empty(
+                    nested,
+                    &effective_inherited_debug_groups(nested, inherited_groups),
+                )
+            })
+        {
+            return false;
+        }
+    }
+
+    true
+}
+
+fn debug_name_cell(name: String, is_direct: bool, indent: usize) -> AnyView {
+    let indent = (indent as f64) * 16.0;
+    let name = if is_direct {
+        Label::new(name).into_any()
+    } else {
+        Stack::new((
+            "Inherited".style(|s| {
+                s.margin_right(5.0)
+                    .border(1.)
+                    .border_radius(5.0)
+                    .with_theme(|s, t| s.color(t.text_muted()).border_color(t.border()))
+                    .padding_horiz(4.0)
+                    .with::<FontSize>(|s, fs| s.font_size(fs.def(|fs| fs * 0.8)))
+            }),
+            Label::new(name),
+        ))
+        .style(|s| s.items_center().gap(6.0))
+        .into_any()
+    };
+
+    name.container()
+        .style(move |s| {
+            s.padding_left(indent)
+                .min_width(170.)
+                .padding_right(5.0)
+                .flex_direction(FlexDirection::RowReverse)
+        })
+        .into_any()
+}
+
+fn style_debug_prop_row(
+    style: &Style,
+    prop: StylePropRef,
+    value: &Rc<dyn std::any::Any>,
+    is_direct: bool,
+    indent: usize,
+) -> StyleDebugRow {
+    let style = style.clone();
+    let value = value.clone();
+    let name = short_style_name(&format!("{:?}", prop.key));
+    StyleDebugRow {
+        render: Rc::new(move |_| {
+            let mut value_view = (prop.info().debug_view)(
+                &*value,
+                &crate::style::FloemInspectorRender,
+            )
+            .and_then(|any| any.downcast::<Box<dyn View>>().ok().map(|b| *b))
+            .unwrap_or_else(|| Label::new((prop.info().debug_any)(&*value)).into_any());
+
+            if let Some(transition) = style
+                .map
+                .get(&prop.info().transition_key)
+                .and_then(|v| v.downcast_ref::<Transition>())
+            {
+                value_view = Stack::vertical((
+                    value_view,
+                    Stack::new((
+                        "Transition".style(|s| {
+                            s.margin_top(4.0)
+                                .margin_right(5.0)
+                                .border(1.)
+                                .border_radius(5.0)
+                                .padding_horiz(4.0)
+                                .with_theme(|s, t| s.color(t.text_muted()).border_color(t.border()))
+                                .with::<FontSize>(|s, fs| s.font_size(fs.def(|fs| fs * 0.8)))
+                        }),
+                        transition.debug_view(),
+                    ))
+                    .style(|s| s.items_center().gap(6.0)),
+                ))
+                .into_any();
+            }
+
+            Stack::new((debug_name_cell(name.clone(), is_direct, indent), value_view))
+                .style(|s| s.items_center().width_full().padding_vert(4.0).gap(8.0))
+                .into_any()
+        }),
+        is_empty: false,
+    }
+}
+
+fn style_debug_group_row<V>(
+    name: String,
+    value_view: V,
+    is_direct: bool,
+    indent: usize,
+) -> StyleDebugRow
+where
+    V: Fn() -> AnyView + 'static,
+{
+    StyleDebugRow {
+        render: Rc::new(move |_| {
+            Stack::new((
+                debug_name_cell(name.clone(), is_direct, indent),
+                value_view(),
+            ))
+            .style(|s| s.items_center().width_full().padding_vert(4.0).gap(8.0))
+            .into_any()
+        }),
+        is_empty: false,
+    }
+}
+
+fn style_debug_section(title: String, child: StyleDebugRow, indent: usize) -> StyleDebugRow {
+    let expanded = RwSignal::new(false);
+    let title_text = title.clone();
+    let child_is_empty = child.is_empty;
+    let chevron = move || {
+        if expanded.get() {
+            svg(
+                r#"<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M4.427 6.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 6H4.604a.25.25 0 00-.177.427z"/></svg>"#,
+            )
+        } else {
+            svg(
+                r#"<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M6.427 4.427l3.396 3.396a.25.25 0 010 .354l-3.396 3.396A.25.25 0 016 11.396V4.604a.25.25 0 01.427-.177z"/></svg>"#,
+            )
+        }
+        .style(|s| s.size_full().with_theme(|s, t| s.color(t.text())))
+    };
+
+    StyleDebugRow {
+        render: Rc::new(move |row_is_base| {
+            let child_render = child.render.clone();
+            Stack::vertical((
+                Stack::new((
+                    dyn_view(chevron)
+                        .class(ButtonClass)
+                        .style(|s| s.size(16.0, 16.0).padding(0.)),
+                    Label::new(title_text.clone()).style(|s| {
+                        s.font_bold()
+                            .cursor(CursorStyle::Pointer)
+                            .with_theme(|s, t| s.color(t.primary()))
+                    }),
+                    Label::new("empty")
+                        .style(|s| {
+                            s.padding_horiz(6.0)
+                                .border(1.)
+                                .border_radius(999.0)
+                                .with_theme(|s, t| s.color(t.text_muted()).border_color(t.border()))
+                                .with::<FontSize>(|s, fs| s.font_size(fs.def(|fs| fs * 0.75)))
+                        })
+                        .style(move |s| s.apply_if(!child_is_empty, |s| s.hide())),
+                ))
+                .style(move |s| {
+                    s.items_center()
+                        .gap(6.0)
+                        .padding_left((indent as f64) * 16.0)
+                        .cursor(super::CursorStyle::Pointer)
+                })
+                .on_event_stop(crate::event::listener::Click, move |_cx, _event| {
+                    expanded.update(|value| *value = !*value)
+                }),
+                dyn_view(move || {
+                    if expanded.get() {
+                        child_render(!row_is_base)
+                            .style(|s| s.padding_left(12.0))
+                            .into_any()
+                    } else {
+                        Empty::new().into_any()
+                    }
+                })
+                .into_any(),
+            ))
+            .style(|s| s.gap(6.0).width_full().padding_vert(4.0))
+            .into_any()
+        }),
+        is_empty: false,
+    }
+}
+
+fn style_debug_sections(
+    title: &str,
+    children: Vec<StyleDebugRow>,
+    indent: usize,
+) -> Option<StyleDebugRow> {
+    if children.is_empty() {
+        return None;
+    }
+
+    Some(style_debug_section(
+        title.to_string(),
+        StyleDebugRow {
+            render: Rc::new(move |start_with_base| style_debug_rows(&children, start_with_base)),
+            is_empty: false,
+        },
+        indent,
+    ))
+}
+
+fn style_debug_style_section(
+    title: String,
+    style: &Style,
+    inherited_groups: &HashSet<StyleKey>,
+    indent: usize,
+) -> StyleDebugRow {
+    let nested_inherited = effective_inherited_debug_groups(style, inherited_groups);
+    style_debug_section(
+        title,
+        style_debug_body(style, None, &nested_inherited, indent + 1),
+        indent,
+    )
+}
+
+fn style_debug_prop_rows(
+    style: &Style,
+    direct_keys: Option<&HashSet<StyleKey>>,
+    inherited_groups: &HashSet<StyleKey>,
+    indent: usize,
+) -> Vec<StyleDebugRow> {
+    let mut rows: Vec<StyleDebugRow> = Vec::new();
+    let mut hidden_props = HashSet::new();
+
+    for info in style_debug_active_groups(style, inherited_groups) {
+        let members = (info.member_props)();
+        let present = members
+            .iter()
+            .copied()
+            .filter(|key| style.map.contains_key(key) && !hidden_props.contains(key))
+            .collect::<Vec<_>>();
+        if present.is_empty() {
+            continue;
+        }
+        hidden_props.extend(present);
+        if (info.debug_view)(style as &dyn std::any::Any).is_some() {
+            let info = info.clone();
+            let style = style.clone();
+            rows.push(style_debug_group_row(
+                short_style_name((info.name)()),
+                move || {
+                    (info.debug_view)(&style as &dyn std::any::Any)
+                        .and_then(|any| any.downcast::<Box<dyn View>>().ok().map(|b| *b))
+                        .unwrap_or_else(|| Label::new("empty").into_any())
+                        .into_any()
+                },
+                true,
+                indent,
+            ));
+        }
+    }
+
+    let mut props = style
+        .map
+        .iter()
+        .filter_map(|(key, value)| match key.info {
+            StyleKeyInfo::Prop(..) if !hidden_props.contains(key) => {
+                Some((StylePropRef { key: *key }, value))
+            }
+            _ => None,
+        })
+        .collect::<Vec<_>>();
+    props.sort_unstable_by_key(|(prop, _)| short_style_name(&format!("{:?}", prop.key)));
+
+    for (prop, value) in props {
+        let is_direct = direct_keys
+            .as_ref()
+            .is_none_or(|keys| keys.contains(&prop.key));
+        rows.push(style_debug_prop_row(style, prop, value, is_direct, indent));
+    }
+
+    rows
+}
+
+fn style_debug_selector_rows(
+    style: &Style,
+    inherited_groups: &HashSet<StyleKey>,
+    indent: usize,
+) -> Vec<StyleDebugRow> {
+    let mut selector_rows: Vec<StyleDebugRow> = Vec::new();
+    let mut selectors = style
+        .map
+        .iter()
+        .filter_map(|(key, value)| match key.info {
+            StyleKeyInfo::Selector(selector) => Some((selector.debug_string(), value)),
+            _ => None,
+        })
+        .collect::<Vec<_>>();
+    selectors.sort_unstable_by(|a, b| a.0.cmp(&b.0));
+    for (name, value) in selectors {
+        if let Some(nested_style) = value.downcast_ref::<Style>() {
+            selector_rows.push(style_debug_style_section(
+                name,
+                nested_style,
+                inherited_groups,
+                indent,
+            ));
+        }
+    }
+
+    for value in style.map.values() {
+        if let Some(rules) = value.downcast_ref::<StructuralSelectors>() {
+            for (selector, nested_style) in &rules.0 {
+                selector_rows.push(style_debug_style_section(
+                    format!("Structural: {selector:?}"),
+                    nested_style,
+                    inherited_groups,
+                    indent,
+                ));
+            }
+        }
+        if let Some(rules) = value.downcast_ref::<ResponsiveSelectors>() {
+            for (selector, nested_style) in &rules.0 {
+                selector_rows.push(style_debug_style_section(
+                    format!("Responsive: {selector:?}"),
+                    nested_style,
+                    inherited_groups,
+                    indent,
+                ));
+            }
+        }
+    }
+
+    selector_rows
+}
+
+fn style_debug_class_rows(
+    style: &Style,
+    inherited_groups: &HashSet<StyleKey>,
+    indent: usize,
+) -> Vec<StyleDebugRow> {
+    let mut class_rows: Vec<StyleDebugRow> = Vec::new();
+    let mut classes = style
+        .map
+        .iter()
+        .filter_map(|(key, value)| match key.info {
+            StyleKeyInfo::Class(info) => Some((short_style_name((info.name)()), value)),
+            _ => None,
+        })
+        .collect::<Vec<_>>();
+    classes.sort_unstable_by(|a, b| a.0.cmp(&b.0));
+    for (name, value) in classes {
+        if let Some(nested_style) = value.downcast_ref::<Style>() {
+            class_rows.push(style_debug_style_section(
+                name,
+                nested_style,
+                inherited_groups,
+                indent,
+            ));
+        }
+    }
+    class_rows
+}
+
+fn style_debug_body(
+    style: &Style,
+    direct_keys: Option<&HashSet<StyleKey>>,
+    inherited_groups: &HashSet<StyleKey>,
+    indent: usize,
+) -> StyleDebugRow {
+    let style = style.clone();
+    let inherited_groups = inherited_groups.clone();
+    let is_empty = style_debug_is_empty(&style, &inherited_groups);
+    let direct_keys = direct_keys.cloned();
+    StyleDebugRow {
+        render: Rc::new(move |start_with_base| {
+            let mut rows =
+                style_debug_prop_rows(&style, direct_keys.as_ref(), &inherited_groups, indent);
+            if let Some(selectors_section) = style_debug_sections(
+                "Selectors",
+                style_debug_selector_rows(&style, &inherited_groups, indent),
+                indent,
+            ) {
+                rows.push(selectors_section);
+            }
+            if let Some(classes_section) = style_debug_sections(
+                "Classes",
+                style_debug_class_rows(&style, &inherited_groups, indent),
+                indent,
+            ) {
+                rows.push(classes_section);
+            }
+
+            if rows.is_empty() {
+                return Label::new("empty")
+                    .style(|s| s.with_theme(|s, t| s.color(t.text_muted())))
+                    .into_any();
+            }
+
+            style_debug_rows(&rows, start_with_base)
+        }),
+        is_empty,
+    }
+}
+
+fn style_debug_rows(rows: &[StyleDebugRow], start_with_base: bool) -> AnyView {
+    Stack::vertical_from_iter(rows.iter().enumerate().map(|(idx, row)| {
+        let is_base = if start_with_base {
+            idx.is_multiple_of(2)
+        } else {
+            !idx.is_multiple_of(2)
+        };
+        (row.render)(is_base).style(move |s| {
+            s.width_full().padding_horiz(4.0).with_theme(move |s, t| {
+                s.apply_if(is_base, |s| s.background(t.bg_base()))
+                    .apply_if(!is_base, |s| s.background(t.bg_elevated()))
+            })
+        })
+    }))
+    .style(|s| s.gap(4.0).width_full())
+    .into_any()
+}
+
+impl super::StyleDebugViewExt for Style {
+    fn debug_view(&self, direct_style: Option<&Style>) -> Box<dyn View> {
+        let direct_keys =
+            direct_style.map(|style| style.map.keys().copied().collect::<HashSet<_>>());
+        let style = self.clone();
+        let inherited_groups = effective_inherited_debug_groups(&style, &HashSet::new());
+        let selected_tab = RwSignal::new(0);
+        let tab_item = move |name, index| {
+            Label::new(name)
+                .class(TabSelectorClass)
+                .action(move || selected_tab.set(index))
+                .style(move |s| s.set_selected(selected_tab.get() == index))
+        };
+        let tabs = (
+            tab_item("View Style", 0),
+            tab_item("Selectors", 1),
+            tab_item("Classes", 2),
+        )
+            .h_stack()
+            .style(|s| s.with_theme(|s, t| s.background(t.bg_base())));
+        let direct_keys_for_body = direct_keys.clone();
+        let style_for_body = style.clone();
+        let style_for_selectors = style.clone();
+        let style_for_classes = style.clone();
+        Stack::vertical((
+            tabs,
+            tab(
+                move || Some(selected_tab.get()),
+                move || [0, 1, 2],
+                |it| *it,
+                move |it| match it {
+                    0 => {
+                        let rows = style_debug_prop_rows(
+                            &style_for_body,
+                            direct_keys_for_body.as_ref(),
+                            &inherited_groups,
+                            0,
+                        );
+                        if rows.is_empty() {
+                            Label::new("empty")
+                                .style(|s| s.with_theme(|s, t| s.color(t.text_muted())))
+                                .into_any()
+                        } else {
+                            style_debug_rows(&rows, true)
+                        }
+                    }
+                    1 => {
+                        let rows =
+                            style_debug_selector_rows(&style_for_selectors, &inherited_groups, 0);
+                        if rows.is_empty() {
+                            Label::new("empty")
+                                .style(|s| s.with_theme(|s, t| s.color(t.text_muted())))
+                                .into_any()
+                        } else {
+                            style_debug_rows(&rows, true)
+                        }
+                    }
+                    2 => {
+                        let rows = style_debug_class_rows(&style_for_classes, &inherited_groups, 0);
+                        if rows.is_empty() {
+                            Label::new("empty")
+                                .style(|s| s.with_theme(|s, t| s.color(t.text_muted())))
+                                .into_any()
+                        } else {
+                            style_debug_rows(&rows, true)
+                        }
+                    }
+                    _ => Label::new("empty").into_any(),
+                },
+            ),
+        ))
+        .style(|s| s.width_full().gap(6.0))
+        .into_any()
+    }
+}
diff --git a/src/style/inspector_render_impl.rs b/src/style/inspector_render_impl.rs
new file mode 100644
index 000000000..97a4450e3
--- /dev/null
+++ b/src/style/inspector_render_impl.rs
@@ -0,0 +1,1290 @@
+//! Concrete `InspectorRender` implementation that builds `floem` view
+//! widgets. The `PropDebugView` impls for types owned by `floem_style`
+//! (Color, Gradient, Brush, Stroke, Rect, Affine, ObjectFit,
+//! ObjectPosition, Transition) delegate their widget-building to the
+//! methods on this struct; the bodies here are the same view code that
+//! previously lived inline on each `PropDebugView` impl.
+
+use std::any::Any;
+use std::time::Duration;
+
+use floem_reactive::{RwSignal, SignalGet, SignalUpdate as _};
+use floem_renderer::Renderer;
+use floem_renderer::text::FontWeight;
+use floem_style::{
+    AffineLerp, Border, BorderColor, BorderRadius, BoxShadow, DesignSystem, InspectorRender,
+    Margin, Padding, PropDebugView, Transition,
+};
+use parley::FontStyle;
+use peniko::color::palette;
+use peniko::kurbo::{self, Affine, Point, Rect, Stroke};
+use peniko::{Brush, Color, Gradient, GradientKind, LinearGradientPosition};
+use taffy::prelude::{auto, fr};
+
+use crate::prelude::ViewTuple;
+use crate::style::debug_view_impl::views;
+use crate::style::{CursorStyle, FontSizeCx, ObjectFit, ObjectPosition};
+use crate::theme::{StyleThemeExt, Theme};
+use crate::view::{IntoView, View};
+use crate::views::{ContainerExt, Decorators, Empty, Label, Stack, StackExt, TooltipExt, canvas};
+
+/// The concrete renderer used inside the `floem` crate. All methods
+/// produce a `Box<dyn View>` wrapped inside a `Box<dyn Any>` so inspector
+/// call sites can downcast back to `Box<dyn View>`.
+pub struct FloemInspectorRender;
+
+fn erase_view(view: impl View + 'static) -> Box<dyn Any> {
+    let view: Box<dyn View> = view.into_any();
+    Box::new(view)
+}
+
+fn view_from_any(any: Box<dyn Any>) -> Box<dyn View> {
+    any.downcast::<Box<dyn View>>()
+        .ok()
+        .map(|b| *b)
+        .unwrap_or_else(|| Empty::new().into_any())
+}
+
+impl InspectorRender for FloemInspectorRender {
+    fn empty(&self) -> Box<dyn Any> {
+        erase_view(Empty::new())
+    }
+
+    fn text(&self, s: &str) -> Box<dyn Any> {
+        erase_view(Label::new(s))
+    }
+
+    fn sequence(&self, items: Vec<Box<dyn Any>>) -> Box<dyn Any> {
+        let views: Vec<Box<dyn View>> = items
+            .into_iter()
+            .filter_map(|any| any.downcast::<Box<dyn View>>().ok().map(|b| *b))
+            .collect();
+        erase_view(Stack::vertical_from_iter(views).style(|s| s.gap(4.0)))
+    }
+
+    fn color(&self, c: Color) -> Box<dyn Any> {
+        let color = c;
+        let swatch = ()
+            .style(move |s| {
+                s.background(color)
+                    .width(22.0)
+                    .height(14.0)
+                    .border(1.)
+                    .border_color(palette::css::WHITE.with_alpha(0.5))
+                    .border_radius(5.0)
+            })
+            .container()
+            .style(|s| {
+                s.border(1.)
+                    .border_color(palette::css::BLACK.with_alpha(0.5))
+                    .border_radius(5.0)
+            });
+
+        let tooltip_view = move || {
+            // Convert to RGBA8 for standard representations
+            let c = color.to_rgba8();
+            let (r, g, b, a) = (c.r, c.g, c.b, c.a);
+
+            // Hex representation
+            let hex = if a == 255 {
+                format!("#{:02X}{:02X}{:02X}", r, g, b)
+            } else {
+                format!("#{:02X}{:02X}{:02X}{:02X}", r, g, b, a)
+            };
+
+            // RGBA string
+            let rgba_str = format!("rgba({}, {}, {}, {:.3})", r, g, b, a as f32 / 255.0);
+
+            // Alpha percentage
+            let alpha_str = format!(
+                "{:.1}% ({:.3})",
+                (a as f32 / 255.0) * 100.0,
+                a as f32 / 255.0
+            );
+
+            let components = color.components;
+            let color_space_str = format!("{:?}", color.cs);
+
+            let hex = views((
+                "Hex:".style(|s| s.font_bold().min_width(80.0).justify_end()),
+                Label::derived(move || hex.clone()),
+            ));
+            let rgba = views((
+                "RGBA:".style(|s| s.font_bold().min_width(80.0).justify_end()),
+                Label::derived(move || rgba_str.clone()),
+            ));
+            let components = views((
+                "Components:".style(|s| s.font_bold().min_width(80.0).justify_end()),
+                (
+                    Label::derived(move || format!("[0]: {:.3}", components[0])),
+                    Label::derived(move || format!("[1]: {:.3}", components[1])),
+                    Label::derived(move || format!("[2]: {:.3}", components[2])),
+                    Label::derived(move || format!("[3]: {:.3}", components[3])),
+                )
+                    .v_stack()
+                    .style(|s| s.gap(2.0)),
+            ));
+            let color_space = views((
+                "Color Space:".style(|s| s.font_bold().min_width(80.0).justify_end()),
+                Label::derived(move || color_space_str.clone()),
+            ));
+            let alpha = views((
+                "Alpha:".style(|s| s.font_bold().min_width(80.0).justify_end()),
+                Label::derived(move || alpha_str.clone()),
+            ));
+            use crate::view::ViewTupleFlat;
+            (hex, rgba, components, color_space, alpha)
+                .flatten()
+                .style(|s| {
+                    s.grid()
+                        .grid_template_columns([auto(), fr(1.)])
+                        .justify_center()
+                        .items_center()
+                        .row_gap(20)
+                        .col_gap(10)
+                        .padding(30)
+                })
+        };
+
+        erase_view(
+            swatch
+                .tooltip(tooltip_view)
+                .style(|s| s.items_center()),
+        )
+    }
+
+    fn gradient(&self, g: &Gradient) -> Box<dyn Any> {
+        let box_width = 22.;
+        let box_height = 14.;
+        let mut grad = g.clone();
+        let raw = g.clone();
+        grad.kind = match grad.kind {
+            GradientKind::Linear(LinearGradientPosition { start, end }) => {
+                let dx = end.x - start.x;
+                let dy = end.y - start.y;
+
+                let scale_x = box_width / dx.abs();
+                let scale_y = box_height / dy.abs();
+                let scale = scale_x.min(scale_y);
+
+                let new_dx = dx * scale;
+                let new_dy = dy * scale;
+
+                let new_start = Point {
+                    x: if dx > 0.0 { 0.0 } else { box_width },
+                    y: if dy > 0.0 { 0.0 } else { box_height },
+                };
+
+                let new_end = Point {
+                    x: new_start.x + new_dx,
+                    y: new_start.y + new_dy,
+                };
+
+                GradientKind::Linear(LinearGradientPosition {
+                    start: new_start,
+                    end: new_end,
+                })
+            }
+            _ => grad.kind,
+        };
+        let color = ().style(move |s| {
+            s.background(grad.clone())
+                .width(box_width)
+                .height(box_height)
+                .border(1.)
+                .border_color(palette::css::WHITE.with_alpha(0.5))
+                .border_radius(5.0)
+        });
+        let color = color.container().style(|s| {
+            s.border(1.)
+                .border_color(palette::css::BLACK.with_alpha(0.5))
+                .border_radius(5.0)
+                .margin_left(6.0)
+        });
+        erase_view(
+            Stack::new((Label::new(format!("{raw:?}")), color)).style(|s| s.items_center()),
+        )
+    }
+
+    fn brush(&self, b: &Brush) -> Box<dyn Any> {
+        match b {
+            Brush::Solid(color) => self.color(*color),
+            Brush::Gradient(grad) => self.gradient(grad),
+            Brush::Image(_) => erase_view(Empty::new()),
+        }
+    }
+
+    fn stroke(&self, s: &Stroke) -> Box<dyn Any> {
+        let stroke = s.clone();
+        let clone = stroke.clone();
+
+        let color = RwSignal::new(palette::css::RED);
+
+        // Visual preview of the stroke
+        let preview = canvas(move |cx, size| {
+            cx.stroke(
+                &kurbo::Line::new(
+                    Point::new(0., size.height / 2.),
+                    Point::new(size.width, size.height / 2.),
+                ),
+                color.get(),
+                &clone,
+            );
+        })
+        .style(move |s| s.width(80.0).height(20.0))
+        .container()
+        .style(move |s| {
+            s.with_theme(move |s, t| s.border_color(t.border()))
+                .defer::<Theme>(move |t| color.set(t.primary()))
+                .padding(4.0)
+        });
+
+        let tooltip_view = move || {
+            let stroke = stroke.clone();
+
+            let width_row = views((
+                "Width:".style(|s| s.font_bold().min_width(100.0).justify_end()),
+                Label::derived(move || format!("{:.1}px", stroke.width)),
+            ));
+
+            let join_row = views((
+                "Join:".style(|s| s.font_bold().min_width(100.0).justify_end()),
+                Label::derived(move || format!("{:?}", stroke.join)),
+            ));
+
+            let miter_row = views((
+                "Miter Limit:".style(|s| s.font_bold().min_width(100.0).justify_end()),
+                Label::derived(move || format!("{:.2}", stroke.miter_limit)),
+            ));
+
+            let start_cap_row = views((
+                "Start Cap:".style(|s| s.font_bold().min_width(100.0).justify_end()),
+                Label::derived(move || format!("{:?}", stroke.start_cap)),
+            ));
+
+            let end_cap_row = views((
+                "End Cap:".style(|s| s.font_bold().min_width(100.0).justify_end()),
+                Label::derived(move || format!("{:?}", stroke.end_cap)),
+            ));
+
+            let pattern_clone = stroke.dash_pattern.clone();
+
+            let dash_pattern_row = views((
+                "Dash Pattern:".style(|s| s.font_bold().min_width(100.0).justify_end()),
+                Label::derived(move || {
+                    if pattern_clone.is_empty() {
+                        "Solid".to_string()
+                    } else {
+                        format!("{:?}", pattern_clone.as_slice())
+                    }
+                }),
+            ));
+
+            let dash_offset_row = if !stroke.dash_pattern.is_empty() {
+                Some(views((
+                    "Dash Offset:".style(|s| s.font_bold().min_width(100.0).justify_end()),
+                    Label::derived(move || format!("{:.1}", stroke.dash_offset)),
+                )))
+            } else {
+                None
+            };
+
+            let mut rows = vec![
+                width_row.into_any(),
+                join_row.into_any(),
+                miter_row.into_any(),
+                start_cap_row.into_any(),
+                end_cap_row.into_any(),
+                dash_pattern_row.into_any(),
+            ];
+
+            if let Some(offset_row) = dash_offset_row {
+                rows.push(offset_row.into_any());
+            }
+
+            Stack::vertical_from_iter(rows).style(|s| {
+                s.grid()
+                    .grid_template_columns([auto(), fr(1.)])
+                    .justify_center()
+                    .items_center()
+                    .row_gap(12)
+                    .col_gap(10)
+                    .padding(20)
+            })
+        };
+
+        erase_view(
+            preview
+                .tooltip(tooltip_view)
+                .style(|s| s.items_center()),
+        )
+    }
+
+    fn rect(&self, r: &Rect) -> Box<dyn Any> {
+        let r = *r;
+
+        let w = r.x1 - r.x0;
+        let h = r.y1 - r.y0;
+
+        let coords = [
+            format!("x0: {:.2}", r.x0),
+            format!("y0: {:.2}", r.y0),
+            format!("x1: {:.2}", r.x1),
+            format!("y1: {:.2}", r.y1),
+        ]
+        .v_stack();
+
+        let wh = [format!("w: {:.2}", w), format!("h: {:.2}", h)].h_stack();
+
+        let preview = Empty::new().style(move |s| {
+            let max = w.abs().max(h.abs()).max(1.0);
+            let scale = 60.0 / max;
+
+            s.width(w.abs() * scale)
+                .height(h.abs() * scale)
+                .border(1.0)
+                .with_theme(|s, t| {
+                    s.border_color(t.border())
+                        .background(t.primary_muted())
+                        .border_radius(t.border_radius())
+                })
+        });
+
+        erase_view(
+            (
+                "Rect",
+                preview,
+                coords.style(|s| s.gap(2)),
+                wh.style(|s| s.gap(8)),
+            )
+                .v_stack(),
+        )
+    }
+
+    fn affine(&self, a: &Affine) -> Box<dyn Any> {
+        let affine = *a;
+        let coeffs = affine.as_coeffs();
+
+        // Decompose to show meaningful transform components
+        let (scale, rotation) = affine.svd();
+        let translation = affine.translation();
+
+        // Create a visual preview showing the transform effect
+        let preview = canvas(move |cx, size| {
+            let center = Point::new(size.width / 2., size.height / 2.);
+            let box_size = 20.0;
+
+            // Draw original position (dashed outline)
+            let original_rect =
+                kurbo::Rect::from_center_size(center, kurbo::Size::new(box_size, box_size));
+            cx.stroke(
+                &original_rect,
+                palette::css::GRAY.with_alpha(0.5),
+                &kurbo::Stroke::new(1.0).with_dashes(0., [3., 3.]),
+            );
+
+            // Draw transformed position
+            let transform_offset =
+                Affine::translate((center.x - box_size / 2., center.y - box_size / 2.));
+            let display_transform = transform_offset * affine * transform_offset.inverse();
+
+            let transformed_rect = kurbo::Rect::new(0., 0., box_size, box_size);
+            cx.fill(
+                &display_transform.transform_rect_bbox(transformed_rect),
+                palette::css::BLUE.with_alpha(0.7),
+                0.,
+            );
+            cx.stroke(
+                &(display_transform.transform_rect_bbox(transformed_rect)),
+                palette::css::BLUE,
+                &kurbo::Stroke::new(2.0),
+            );
+
+            // Draw origin point
+            let origin_marker = kurbo::Circle::new(display_transform * Point::ZERO, 3.0);
+            cx.fill(&origin_marker, palette::css::RED, 0.);
+        })
+        .style(|s| s.width(80.0).height(60.0))
+        .container()
+        .style(|s| {
+            s.padding(4.0)
+                .border(1.)
+                .border_radius(5.0)
+                .with_theme(|s, t| s.border_color(t.border()))
+        });
+
+        let tooltip_view = move || {
+            // Matrix coefficients in a grid
+            let matrix_label = Label::new("Matrix:").style(|s| s.font_bold().margin_bottom(8.0));
+
+            let matrix_grid = (
+                views((
+                    Label::new(format!("{:.3}", coeffs[0])),
+                    Label::new(format!("{:.3}", coeffs[2])),
+                    Label::new(format!("{:.3}", coeffs[4])),
+                )),
+                views((
+                    Label::new(format!("{:.3}", coeffs[1])),
+                    Label::new(format!("{:.3}", coeffs[3])),
+                    Label::new(format!("{:.3}", coeffs[5])),
+                )),
+                views((Label::new("0"), Label::new("0"), Label::new("1"))),
+            )
+                .v_stack()
+                .style(|s| {
+                    s.gap(4.0)
+                        .padding(8.0)
+                        .border(1.)
+                        .border_radius(4.0)
+                        .with_theme(|s, t| {
+                            s.background(t.def(|t| t.primary().with_alpha(0.5)))
+                                .border_color(t.border())
+                        })
+                });
+
+            // Decomposed components
+            let components_label = Label::new("Components:")
+                .style(|s| s.font_bold().margin_top(16.0).margin_bottom(8.0));
+
+            let translate_row = views((
+                "Translate:".style(|s| s.font_bold().min_width(100.0).justify_end()),
+                Label::derived(move || format!("({:.2}, {:.2})", translation.x, translation.y)),
+            ));
+
+            let rotate_row = views((
+                "Rotate:".style(|s| s.font_bold().min_width(100.0).justify_end()),
+                Label::derived(move || format!("{:.1}°", rotation.to_degrees())),
+            ));
+
+            let scale_row = views((
+                "Scale:".style(|s| s.font_bold().min_width(100.0).justify_end()),
+                Label::derived(move || format!("({:.2}, {:.2})", scale.x, scale.y)),
+            ));
+
+            // Check for special properties
+            let is_identity = affine == Affine::IDENTITY;
+            let determinant = coeffs[0] * coeffs[3] - coeffs[1] * coeffs[2];
+            let has_reflection = determinant < 0.0;
+
+            let properties = if is_identity {
+                Some(
+                    Label::new("Identity (no transform)")
+                        .style(|s| s.with_theme(|s, t| s.color(t.text_muted()))),
+                )
+            } else if has_reflection {
+                Some(
+                    Label::new("⚠ Contains reflection")
+                        .style(|s| s.with_theme(|s, t| s.color(t.warning()))),
+                )
+            } else {
+                None
+            };
+
+            use crate::view::ViewTupleFlat;
+            let components_grid = (translate_row, rotate_row, scale_row).flatten().style(|s| {
+                s.grid()
+                    .grid_template_columns([auto(), fr(1.)])
+                    .justify_center()
+                    .items_center()
+                    .row_gap(8)
+                    .col_gap(10)
+            });
+
+            let mut content = vec![
+                matrix_label.into_any(),
+                matrix_grid.into_any(),
+                components_label.into_any(),
+                components_grid.into_any(),
+            ];
+
+            if let Some(props) = properties {
+                content.push(props.into_any());
+            }
+
+            Stack::vertical_from_iter(content).style(|s| s.padding(20))
+        };
+
+        erase_view(
+            preview
+                .tooltip(tooltip_view)
+                .style(|s| s.items_center()),
+        )
+    }
+
+    fn object_fit(&self, f: ObjectFit) -> Box<dyn Any> {
+        use peniko::kurbo::RoundedRect;
+
+        let object_fit = f;
+        let container_color = RwSignal::new(palette::css::GRAY);
+        let image_color = RwSignal::new(palette::css::BLUE);
+
+        // Visual preview showing how an image with 2:1 aspect ratio fits in a square container
+        let preview = canvas(move |cx, size| {
+            let width = size.width;
+            let height = size.height;
+            let padding = 4.0;
+            let container_size = width.min(height) - padding * 2.0;
+
+            // Draw container box (square)
+            let container_x = (width - container_size) / 2.0;
+            let container_y = (height - container_size) / 2.0;
+            let container_rect = RoundedRect::from_rect(
+                kurbo::Rect::new(
+                    container_x,
+                    container_y,
+                    container_x + container_size,
+                    container_y + container_size,
+                ),
+                2.0,
+            );
+            cx.stroke(
+                &container_rect,
+                container_color.get(),
+                &Stroke {
+                    width: 1.5,
+                    ..Default::default()
+                },
+            );
+
+            // Simulate an image with 2:1 aspect ratio (wider than tall)
+            let image_aspect = 2.0;
+            let (img_width, img_height) = match object_fit {
+                ObjectFit::Fill => {
+                    // Stretch to fill container
+                    (container_size, container_size)
+                }
+                ObjectFit::Contain => {
+                    // Fit inside while maintaining aspect ratio
+                    // Image is 2:1, container is 1:1, so width is the constraint
+                    let w = container_size;
+                    let h = w / image_aspect;
+                    (w, h)
+                }
+                ObjectFit::Cover => {
+                    // Cover entire container while maintaining aspect ratio
+                    // Height is the constraint
+                    let h = container_size;
+                    let w = h * image_aspect;
+                    (w, h)
+                }
+                ObjectFit::ScaleDown => {
+                    // Like contain but don't scale up
+                    // Assume natural image size is smaller than container
+                    let natural_w = container_size * 0.6;
+                    let natural_h = natural_w / image_aspect;
+                    (natural_w, natural_h)
+                }
+                ObjectFit::None => {
+                    // Natural size (simulated as 60% of container)
+                    let natural_w = container_size * 0.6;
+                    let natural_h = natural_w / image_aspect;
+                    (natural_w, natural_h)
+                }
+            };
+
+            // Center the image in the container
+            let img_x = container_x + (container_size - img_width) / 2.0;
+            let img_y = container_y + (container_size - img_height) / 2.0;
+
+            // Clip to container bounds for Cover mode
+            if matches!(object_fit, ObjectFit::Cover) {
+                // Draw the image rect (it will extend beyond container)
+                let img_rect = RoundedRect::from_rect(
+                    kurbo::Rect::new(img_x, img_y, img_x + img_width, img_y + img_height),
+                    2.0,
+                );
+                // Show it as semi-transparent to indicate it's clipped
+                let clipped_color = image_color.get().with_alpha(0.7);
+                cx.fill(&img_rect, clipped_color, 0.0);
+            } else {
+                // Draw the image rect normally
+                let img_rect = RoundedRect::from_rect(
+                    kurbo::Rect::new(img_x, img_y, img_x + img_width, img_y + img_height),
+                    2.0,
+                );
+                cx.fill(&img_rect, image_color.get(), 0.0);
+            }
+        })
+        .style(|s| s.width(70.0).height(70.0))
+        .container()
+        .style(move |s| {
+            s.padding(4.0)
+                .border(1.)
+                .border_radius(5.0)
+                .with_theme(move |s, t| s.border_color(t.border()))
+        });
+
+        let label_text = match object_fit {
+            ObjectFit::Fill => "Fill",
+            ObjectFit::Contain => "Contain",
+            ObjectFit::Cover => "Cover",
+            ObjectFit::ScaleDown => "ScaleDown",
+            ObjectFit::None => "None",
+        };
+
+        let tooltip_view = move || {
+            let description = match object_fit {
+                ObjectFit::Fill => "Stretches content to fill the box.\nMay distort aspect ratio.",
+                ObjectFit::Contain => {
+                    "Scales content to fit inside the box.\nPreserves aspect ratio (letterboxed)."
+                }
+                ObjectFit::Cover => {
+                    "Scales content to cover the box.\nPreserves aspect ratio (may clip)."
+                }
+                ObjectFit::ScaleDown => {
+                    "Like 'contain' but won't scale up.\nNever larger than natural size."
+                }
+                ObjectFit::None => {
+                    "Content keeps its natural size.\nMay overflow or be smaller than box."
+                }
+            };
+
+            Stack::vertical((
+                Label::new(label_text).style(|s| s.font_bold()),
+                Label::new(description).style(|s| s.with_theme(|s, t| s.color(t.text_muted()))),
+            ))
+            .style(|s| s.gap(8.0).padding(12.0).max_width(220.0))
+        };
+
+        erase_view(
+            preview
+                .tooltip(tooltip_view)
+                .style(|s| s.items_center()),
+        )
+    }
+
+    fn object_position(&self, p: &ObjectPosition) -> Box<dyn Any> {
+        use peniko::kurbo::{Circle, RoundedRect};
+
+        let object_position = *p;
+        let container_color = RwSignal::new(palette::css::GRAY);
+        let image_color = RwSignal::new(palette::css::BLUE);
+        let marker_color = RwSignal::new(palette::css::RED);
+
+        let preview = canvas(move |cx, size| {
+            let width = size.width;
+            let height = size.height;
+            let padding = 6.0;
+            let container_size = width.min(height) - padding * 2.0;
+            let container_x = (width - container_size) / 2.0;
+            let container_y = (height - container_size) / 2.0;
+            let container_rect = RoundedRect::from_rect(
+                kurbo::Rect::new(
+                    container_x,
+                    container_y,
+                    container_x + container_size,
+                    container_y + container_size,
+                ),
+                2.0,
+            );
+            cx.stroke(
+                &container_rect,
+                container_color.get(),
+                &Stroke {
+                    width: 1.5,
+                    ..Default::default()
+                },
+            );
+
+            let image_w = container_size * 0.55;
+            let image_h = container_size * 0.35;
+            let free_x = container_size - image_w;
+            let free_y = container_size - image_h;
+            let font_size_cx = FontSizeCx::new(16.0, 16.0);
+
+            let (offset_x, offset_y) = match object_position {
+                ObjectPosition::TopLeft => (0.0, 0.0),
+                ObjectPosition::Top => (free_x * 0.5, 0.0),
+                ObjectPosition::TopRight => (free_x, 0.0),
+                ObjectPosition::Left => (0.0, free_y * 0.5),
+                ObjectPosition::Center => (free_x * 0.5, free_y * 0.5),
+                ObjectPosition::Right => (free_x, free_y * 0.5),
+                ObjectPosition::BottomLeft => (0.0, free_y),
+                ObjectPosition::Bottom => (free_x * 0.5, free_y),
+                ObjectPosition::BottomRight => (free_x, free_y),
+                ObjectPosition::Custom(x, y) => (
+                    x.resolve(free_x, &font_size_cx),
+                    y.resolve(free_y, &font_size_cx),
+                ),
+            };
+
+            let img_x = container_x + offset_x;
+            let img_y = container_y + offset_y;
+            let img_rect = RoundedRect::from_rect(
+                kurbo::Rect::new(img_x, img_y, img_x + image_w, img_y + image_h),
+                2.0,
+            );
+            cx.fill(&img_rect, image_color.get(), 0.0);
+
+            let marker = Circle::new(
+                kurbo::Point::new(img_x + image_w / 2.0, img_y + image_h / 2.0),
+                2.5,
+            );
+            cx.fill(&marker, marker_color.get(), 0.0);
+        })
+        .style(|s| s.width(70.0).height(70.0))
+        .container()
+        .style(move |s| {
+            s.padding(4.0)
+                .border(1.)
+                .border_radius(5.0)
+                .with_theme(move |s, t| s.border_color(t.border()))
+        });
+
+        let (label_text, description) = match object_position {
+            ObjectPosition::TopLeft => ("TopLeft", "Anchors content to the top-left corner."),
+            ObjectPosition::Top => (
+                "Top",
+                "Anchors content to the top edge, centered horizontally.",
+            ),
+            ObjectPosition::TopRight => ("TopRight", "Anchors content to the top-right corner."),
+            ObjectPosition::Left => (
+                "Left",
+                "Anchors content to the left edge, centered vertically.",
+            ),
+            ObjectPosition::Center => ("Center", "Centers content on both axes."),
+            ObjectPosition::Right => (
+                "Right",
+                "Anchors content to the right edge, centered vertically.",
+            ),
+            ObjectPosition::BottomLeft => {
+                ("BottomLeft", "Anchors content to the bottom-left corner.")
+            }
+            ObjectPosition::Bottom => (
+                "Bottom",
+                "Anchors content to the bottom edge, centered horizontally.",
+            ),
+            ObjectPosition::BottomRight => {
+                ("BottomRight", "Anchors content to the bottom-right corner.")
+            }
+            ObjectPosition::Custom(x, y) => {
+                let label = format!("Custom({x:?}, {y:?})");
+                let description = "Uses explicit horizontal and vertical offsets. Percentages resolve against remaining free space.";
+                return erase_view(
+                    preview
+                        .tooltip(move || {
+                            Stack::vertical((
+                                Label::new(label.clone()).style(|s| s.font_bold()),
+                                Label::new(description)
+                                    .style(|s| s.with_theme(|s, t| s.color(t.text_muted()))),
+                            ))
+                            .style(|s| s.gap(8.0).padding(12.0).max_width(240.0))
+                        })
+                        .style(|s| s.items_center()),
+                );
+            }
+        };
+
+        erase_view(
+            preview
+                .tooltip(move || {
+                    Stack::vertical((
+                        Label::new(label_text).style(|s| s.font_bold()),
+                        Label::new(description)
+                            .style(|s| s.with_theme(|s, t| s.color(t.text_muted()))),
+                    ))
+                    .style(|s| s.gap(8.0).padding(12.0).max_width(240.0))
+                })
+                .style(|s| s.items_center()),
+        )
+    }
+
+    fn transition(&self, t: &Transition) -> Box<dyn Any> {
+        let transition = t.clone();
+        let easing_clone = transition.easing.clone();
+
+        let curve_color = RwSignal::new(palette::css::BLUE);
+        let axis_color = RwSignal::new(palette::css::GRAY);
+
+        // Visual preview of the easing curve
+        let preview = canvas(move |cx, size| {
+            let width = size.width;
+            let height = size.height;
+            let padding = 4.0;
+            let graph_width = width - padding * 2.0;
+            let graph_height = height - padding * 2.0;
+
+            // Sample the easing function
+            let sample_count = 50;
+            let mut path = kurbo::BezPath::new();
+
+            for i in 0..=sample_count {
+                let t = i as f64 / sample_count as f64;
+                let eased = easing_clone.eval(t);
+                let x = padding + t * graph_width;
+                let y = padding + (1.0 - eased) * graph_height;
+
+                if i == 0 {
+                    path.move_to(Point::new(x, y));
+                } else {
+                    path.line_to(Point::new(x, y));
+                }
+            }
+
+            // Draw the curve
+            cx.stroke(
+                &path,
+                curve_color.get(),
+                &Stroke {
+                    width: 2.0,
+                    ..Default::default()
+                },
+            );
+
+            // Draw axes
+            let axis_stroke = Stroke {
+                width: 1.0,
+                ..Default::default()
+            };
+
+            // X axis
+            cx.stroke(
+                &kurbo::Line::new(
+                    Point::new(padding, height - padding),
+                    Point::new(width - padding, height - padding),
+                ),
+                axis_color.get(),
+                &axis_stroke,
+            );
+
+            // Y axis
+            cx.stroke(
+                &kurbo::Line::new(
+                    Point::new(padding, padding),
+                    Point::new(padding, height - padding),
+                ),
+                axis_color.get(),
+                &axis_stroke,
+            );
+        })
+        .style(|s| s.width(80.0).height(60.0))
+        .container()
+        .style(move |s| {
+            s.padding(4.0)
+                .border(1.)
+                .border_radius(5.0)
+                .with_theme(move |s, t| s.border_color(t.border()))
+        });
+
+        let tooltip_view = move || {
+            let transition = transition.clone();
+
+            let duration_row = views((
+                "Duration:".style(|s| s.font_bold().min_width(80.0).justify_end()),
+                Label::derived(move || format!("{:.0}ms", transition.duration.as_millis())),
+            ));
+
+            let easing_name = format!("{:?}", transition.easing);
+            let easing_row = views((
+                "Easing:".style(|s| s.font_bold().min_width(80.0).justify_end()),
+                Label::derived(move || easing_name.clone()),
+            ));
+
+            // Show velocity at key points if available
+            let velocity_samples = if transition.easing.velocity(0.0).is_some() {
+                let samples = vec![0.0, 0.25, 0.5, 0.75, 1.0]
+                    .into_iter()
+                    .filter_map(|t| {
+                        transition
+                            .easing
+                            .velocity(t)
+                            .map(|v| Label::new(format!("t={:.2}: {:.3}", t, v)))
+                    })
+                    .collect::<Vec<_>>();
+
+                if !samples.is_empty() {
+                    Some(views((
+                        "Velocity:".style(|s| s.font_bold().min_width(80.0).justify_end()),
+                        Stack::vertical_from_iter(samples).style(|s| s.gap(2.0)),
+                    )))
+                } else {
+                    None
+                }
+            } else {
+                None
+            };
+
+            let mut rows = vec![duration_row.into_any(), easing_row.into_any()];
+
+            if let Some(velocity_row) = velocity_samples {
+                rows.push(velocity_row.into_any());
+            }
+
+            Stack::vertical_from_iter(rows).style(|s| {
+                s.grid()
+                    .grid_template_columns([auto(), fr(1.)])
+                    .justify_center()
+                    .items_center()
+                    .row_gap(12)
+                    .col_gap(10)
+                    .padding(20)
+            })
+        };
+
+        erase_view(
+            preview
+                .tooltip(tooltip_view)
+                .style(|s| s.items_center()),
+        )
+    }
+
+    fn muted_text(&self, s: &str) -> Box<dyn Any> {
+        erase_view(
+            Label::new(s.to_string()).style(|s| s.with_theme(|s, t| s.color(t.text_muted()))),
+        )
+    }
+
+    fn labelled(&self, label: &str, content: Box<dyn Any>) -> Box<dyn Any> {
+        let index_label = Label::new(label.to_string())
+            .style(|s| s.with_theme(|s, t| s.color(t.text_muted())));
+        let content_view = view_from_any(content);
+        erase_view(
+            Stack::new((index_label, content_view))
+                .style(|s| s.items_center().gap(8.0).padding(4.0)),
+        )
+    }
+
+    fn vertical_list(&self, items: Vec<Box<dyn Any>>) -> Box<dyn Any> {
+        let views: Vec<Box<dyn View>> = items.into_iter().map(view_from_any).collect();
+        erase_view(Stack::vertical_from_iter(views).style(|s| s.gap(4.0)))
+    }
+
+    fn horizontal_pair(&self, first: Box<dyn Any>, second: Box<dyn Any>) -> Box<dyn Any> {
+        let first = view_from_any(first);
+        let second = view_from_any(second);
+        erase_view(Stack::new((first, second)).style(|s| s.gap(8.0)))
+    }
+
+    fn font_weight(&self, weight: FontWeight, label: &str) -> Box<dyn Any> {
+        let w = weight;
+        erase_view(Label::new(label.to_string()).style(move |s| s.font_weight(w)))
+    }
+
+    fn font_style(&self, style: FontStyle, label: &str) -> Box<dyn Any> {
+        let fs = style;
+        erase_view(Label::new(label.to_string()).style(move |s| s.font_style(fs)))
+    }
+
+    fn border(&self, b: &Border) -> Box<dyn Any> {
+        let border = b.clone();
+        let sides = [
+            ("Left:", border.left),
+            ("Top:", border.top),
+            ("Right:", border.right),
+            ("Bottom:", border.bottom),
+        ];
+
+        let rows: Vec<Box<dyn View>> = sides
+            .into_iter()
+            .filter_map(|(l, v)| v.map(|v| (l, v)))
+            .map(|(label, value)| {
+                let child: Box<dyn View> = value
+                    .debug_view(self)
+                    .and_then(|any| any.downcast::<Box<dyn View>>().ok().map(|b| *b))
+                    .unwrap();
+                Stack::horizontal((
+                    label.style(|s| s.font_weight(FontWeight::BOLD).width(80.0)),
+                    child,
+                ))
+                .style(|s| s.items_center().gap(4.0))
+                .into_any()
+            })
+            .collect();
+
+        let view: Box<dyn View> = Stack::vertical_from_iter(rows)
+            .style(|s| s.gap(4.0).padding(8.0))
+            .into_any();
+        Box::new(view)
+    }
+
+    fn border_color(&self, bc: &BorderColor) -> Box<dyn Any> {
+        let border_color = bc.clone();
+        let sides = [
+            ("Left:", border_color.left),
+            ("Top:", border_color.top),
+            ("Right:", border_color.right),
+            ("Bottom:", border_color.bottom),
+        ];
+
+        let rows: Vec<Box<dyn View>> = sides
+            .into_iter()
+            .filter_map(|(l, v)| v.map(|v| (l, v)))
+            .map(|(label, color)| {
+                let child: Box<dyn View> = color
+                    .debug_view(self)
+                    .and_then(|any| any.downcast::<Box<dyn View>>().ok().map(|b| *b))
+                    .unwrap();
+                Stack::horizontal((
+                    label.style(|s| s.font_weight(FontWeight::BOLD).width(80.0)),
+                    child,
+                ))
+                .style(|s| s.items_center().gap(4.0))
+                .into_any()
+            })
+            .collect();
+
+        let view: Box<dyn View> = Stack::vertical_from_iter(rows)
+            .style(|s| s.gap(4.0).padding(8.0))
+            .into_any();
+        Box::new(view)
+    }
+
+    fn border_radius(&self, br: &BorderRadius) -> Box<dyn Any> {
+        let border_radius = *br;
+        let corners = [
+            ("Top Left:", border_radius.top_left),
+            ("Top Right:", border_radius.top_right),
+            ("Bottom Left:", border_radius.bottom_left),
+            ("Bottom Right:", border_radius.bottom_right),
+        ];
+
+        let rows: Vec<Box<dyn View>> = corners
+            .into_iter()
+            .filter_map(|(l, v)| v.map(|v| (l, v)))
+            .map(|(label, radius)| {
+                let child: Box<dyn View> = radius
+                    .debug_view(self)
+                    .and_then(|any| any.downcast::<Box<dyn View>>().ok().map(|b| *b))
+                    .unwrap();
+                Stack::horizontal((
+                    label.style(|s| s.font_weight(FontWeight::BOLD).width(80.0)),
+                    child,
+                ))
+                .style(|s| s.items_center().gap(4.0))
+                .into_any()
+            })
+            .collect();
+
+        let view: Box<dyn View> = Stack::vertical_from_iter(rows)
+            .style(|s| s.gap(4.0).padding(8.0))
+            .into_any();
+        Box::new(view)
+    }
+
+    fn padding(&self, p: &Padding) -> Box<dyn Any> {
+        let padding = *p;
+        let sides = [
+            ("Left:", padding.left),
+            ("Top:", padding.top),
+            ("Right:", padding.right),
+            ("Bottom:", padding.bottom),
+        ];
+
+        let rows: Vec<Box<dyn View>> = sides
+            .into_iter()
+            .filter_map(|(l, v)| v.map(|v| (l, v)))
+            .map(|(label, padding)| {
+                let child: Box<dyn View> = padding
+                    .debug_view(self)
+                    .and_then(|any| any.downcast::<Box<dyn View>>().ok().map(|b| *b))
+                    .unwrap();
+                Stack::horizontal((
+                    label.style(|s| s.font_weight(FontWeight::BOLD).width(80.0)),
+                    child,
+                ))
+                .style(|s| s.items_center().gap(4.0))
+                .into_any()
+            })
+            .collect();
+
+        let view: Box<dyn View> = Stack::vertical_from_iter(rows)
+            .style(|s| s.gap(4.0).padding(8.0))
+            .into_any();
+        Box::new(view)
+    }
+
+    fn margin(&self, m: &Margin) -> Box<dyn Any> {
+        let margin = *m;
+        let sides = [
+            ("Left:", margin.left),
+            ("Top:", margin.top),
+            ("Right:", margin.right),
+            ("Bottom:", margin.bottom),
+        ];
+
+        let rows: Vec<Box<dyn View>> = sides
+            .into_iter()
+            .filter_map(|(l, v)| v.map(|v| (l, v)))
+            .map(|(label, margin)| {
+                let child: Box<dyn View> = margin
+                    .debug_view(self)
+                    .and_then(|any| any.downcast::<Box<dyn View>>().ok().map(|b| *b))
+                    .unwrap();
+                Stack::horizontal((
+                    label.style(|s| s.font_weight(FontWeight::BOLD).width(80.0)),
+                    child,
+                ))
+                .style(|s| s.items_center().gap(4.0))
+                .into_any()
+            })
+            .collect();
+
+        let view: Box<dyn View> = Stack::vertical_from_iter(rows)
+            .style(|s| s.gap(4.0).padding(8.0))
+            .into_any();
+        Box::new(view)
+    }
+
+    fn box_shadow(&self, s: &BoxShadow) -> Box<dyn Any> {
+        // Create a preview container that shows a visual representation of the shadow
+        let shadow = *s;
+
+        // Shadow preview box
+        let shadow_preview =
+            ().style(move |s| s.width(50.0).height(50.0))
+                .container()
+                .style(move |s| {
+                    s.background(Color::TRANSPARENT)
+                        .border(1.)
+                        .apply_box_shadows(vec![shadow])
+                        .margin(10.0)
+                        .with_theme(|s, t| {
+                            s.border_color(t.border()).border_radius(t.border_radius())
+                        })
+                });
+
+        // Rebuild the color preview each time the tooltip is shown. We
+        // can't hold `&dyn InspectorRender` inside a 'static closure, so
+        // reach for the concrete floem renderer.
+        let details_view = move || {
+            let color_view: Box<dyn View> = shadow
+                .color
+                .debug_view(&FloemInspectorRender)
+                .and_then(|any| any.downcast::<Box<dyn View>>().ok().map(|b| *b))
+                .unwrap();
+            Stack::vertical((
+                Stack::horizontal((
+                    "Color:".style(|s| s.font_weight(FontWeight::BOLD).width(80.0)),
+                    color_view,
+                ))
+                .style(|s| s.items_center().gap(4.0)),
+                Stack::horizontal((
+                    "Blur:".style(|s| s.font_weight(FontWeight::BOLD).width(80.0)),
+                    format!("{:?}", shadow.blur_radius),
+                ))
+                .style(|s| s.items_center().gap(4.0)),
+                Stack::horizontal((
+                    "Spread:".style(|s| s.font_weight(FontWeight::BOLD).width(80.0)),
+                    format!("{:?}", shadow.spread),
+                ))
+                .style(|s| s.items_center().gap(4.0)),
+                Stack::horizontal((
+                    "Offset:".style(|s| s.font_weight(FontWeight::BOLD).width(80.0)),
+                    format!(
+                        "L: {:?}, R: {:?}, T: {:?}, B: {:?}",
+                        shadow.left_offset,
+                        shadow.right_offset,
+                        shadow.top_offset,
+                        shadow.bottom_offset
+                    ),
+                ))
+                .style(|s| s.items_center().gap(4.0)),
+            ))
+            .style(|s| s.gap(4.0).padding(8.0))
+        };
+
+        // Combine preview and details
+        let view: Box<dyn View> = shadow_preview.tooltip(details_view).into_any();
+
+        Box::new(view)
+    }
+
+    fn design_system(&self, ds: &DesignSystem) -> Box<dyn Any> {
+        use crate::prelude::*;
+        use crate::views::Stack;
+
+        let design_system = ds.clone();
+        let is_expanded = RwSignal::new(false);
+
+        let color_swatch = |label: &str, color: Color| {
+            let swatch: Box<dyn View> = color
+                .debug_view(self)
+                .and_then(|any| any.downcast::<Box<dyn View>>().ok().map(|b| *b))
+                .unwrap();
+            Stack::new((
+                label.to_string().style(|s| s.width(120.0).font_size(12.0)),
+                swatch,
+            ))
+            .style(|s| s.flex_row().items_center().gap(8.0).padding_vert(2.0))
+        };
+
+        let scalar_field = |label: &str, value: f64| {
+            Stack::new((
+                label.to_string().style(|s| s.width(120.0).font_size(12.0)),
+                format!("{:.2}", value).style(|s| s.font_size(12.0)),
+            ))
+            .style(|s| s.flex_row().items_center().gap(8.0).padding_vert(2.0))
+        };
+
+        let chevron = move || {
+            if is_expanded.get() {
+                svg(
+                    r#"<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M4.427 6.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 6H4.604a.25.25 0 00-.177.427z"/></svg>"#,
+                )
+            } else {
+                svg(
+                    r#"<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M6.427 4.427l3.396 3.396a.25.25 0 010 .354l-3.396 3.396A.25.25 0 016 11.396V4.604a.25.25 0 01.427-.177z"/></svg>"#,
+                )
+            }.style(|s| s.size_full().with_theme(|s, t| s.color(t.text())))
+        };
+
+        let header = Stack::new((
+            dyn_view(chevron)
+                .class(ButtonClass)
+                .style(|s| s.size(16.0, 16.0).padding(0.)),
+            "Design System"
+                .to_string()
+                .style(|s| s.font_size(14.0).font_weight(FontWeight::SEMI_BOLD)),
+        ))
+        .action(move || {
+            is_expanded.update(|v| *v = !*v);
+        })
+        .style(|s| {
+            s.flex_row()
+                .items_center()
+                .gap(8.0)
+                .cursor(CursorStyle::Pointer)
+        });
+
+        let content = Stack::new((
+            header,
+            Stack::new((
+                color_swatch("bg_base", design_system.bg_base),
+                color_swatch("text_base", design_system.text_base),
+                color_swatch("primary_base", design_system.primary_base),
+                color_swatch("success_base", design_system.success_base),
+                color_swatch("warning_base", design_system.warning_base),
+                color_swatch("danger_base", design_system.danger_base),
+                scalar_field("text_lightness", f64::from(design_system.text_lightness)),
+                scalar_field("padding", f64::from(design_system.padding)),
+                scalar_field("border_radius", f64::from(design_system.border_radius)),
+                scalar_field("font_size", design_system.font_size),
+                format!("is_dark: {}", design_system.is_dark).style(|s| s.font_size(12.0)),
+            ))
+            .style(move |s| s.flex_col().gap(4.0))
+            .clip()
+            .style(move |s| {
+                s.height_pct(100.)
+                    .apply_if(!is_expanded.get(), |s| s.height_pct(0.))
+                    .transition_height(Transition::ease_in_out(Duration::from_millis(200)))
+            }),
+        ))
+        .style(|s| {
+            // this view here should be getting set to have a height of just the two children combined
+            // I think this is a bug in taffy
+            s.flex_col()
+                .padding(8.0)
+                .border(1.)
+                .border_color(palette::css::WHITE.with_alpha(0.3))
+                .border_radius(6.0)
+                .min_width(280.0)
+                .min_height_pct(0.)
+                .flex_grow(0.)
+                .flex_shrink(1.)
+        });
+
+        let view: Box<dyn View> = content.into_any();
+        Box::new(view)
+    }
+}
+
diff --git a/src/style/mod.rs b/src/style/mod.rs
index e7989fda2..0c02fc72c 100644
--- a/src/style/mod.rs
+++ b/src/style/mod.rs
@@ -127,2306 +127,87 @@
 //!
 //! You can create custom extractors and embed them in your custom views so that you can get out any built in prop, or any of your custom props from the final combined style that is applied to your `View`.
 
-use floem_renderer::text::FontWeight as FontWeightProp;
-use peniko::color::palette;
-use peniko::kurbo::{self, Affine, RoundedRect, Stroke, Vec2};
-use peniko::{Brush, Color};
-use rustc_hash::FxHashMap;
-use smallvec::SmallVec;
-use std::any::Any;
-use std::collections::HashMap;
-use std::fmt::{self, Debug};
-use std::marker::PhantomData;
-use std::rc::Rc;
-use std::sync::atomic::{AtomicU64, Ordering};
-use taffy::GridTemplateComponent;
-
 pub use taffy::style::{
     AlignContent, AlignItems, BoxSizing, Dimension, Display, FlexDirection, FlexWrap,
     JustifyContent, JustifyItems, Position,
 };
-use taffy::{
-    geometry::{MinMax, Size},
-    prelude::{GridPlacement, Line, Rect},
-    style::{
-        LengthPercentage, MaxTrackSizingFunction, MinTrackSizingFunction, Overflow,
-        Style as TaffyStyle,
-    },
-};
 
-use crate::layout::responsive::{GridBreakpoints, ScreenSize, ScreenSizeBp};
-
-use crate::style::components::Focus;
-use crate::text::{OverflowWrap, WordBreakStrength};
-use crate::views::editor::SelectionColor;
-// Import macros from crate root (they are #[macro_export] in props.rs)
-use crate::{prop, prop_extractor};
+// Import macros used by the prop_extractor blocks below.
+use crate::prop_extractor;
 
-mod cache;
-mod components;
 mod custom;
 mod cx;
-mod props;
-pub mod recalc;
-mod selectors;
-#[cfg(test)]
-mod tests;
+mod inspector_render_impl;
+pub(crate) mod sink;
+mod storage;
+mod style_debug_ext;
 pub mod theme;
-mod transition;
-pub mod unit;
-mod values;
+mod debug_view_impl;
+mod transition_ext;
 
-pub use components::{
-    Border, BorderColor, BorderRadius, BoxShadow, CursorStyle, Margin, NoWrapOverflow, Padding,
-    PointerEvents, TextOverflow,
-};
-pub use custom::{CustomStylable, CustomStyle};
+// Re-export modules moved to the `floem_style` crate so the `floem::style::*`
+// API surface remains stable for downstream users.
+pub use floem_style::{recalc, selectors, unit};
+
+pub use floem_style::{CursorStyle, Focus, NoWrapOverflow, PointerEvents, TextOverflow};
+pub use floem_style::{Border, BorderColor, BorderRadius, BoxShadow, Margin, Padding};
+pub use custom::{CustomStylable, CustomStyle, StyleCustomExt};
 pub use cx::{InheritedInteractionCx, InteractionState, StyleCx};
-pub use props::{
+pub use floem_style::{InspectorRender, PropDebugView};
+pub use inspector_render_impl::FloemInspectorRender;
+pub use floem_style::{
     ExtractorField, StyleClass, StyleClassInfo, StyleClassRef, StyleDebugGroup,
     StyleDebugGroupInfo, StyleDebugGroupRef, StyleKey, StyleKeyInfo, StyleProp, StylePropInfo,
-    StylePropReader, StylePropRef,
+    StylePropRef,
 };
-pub use selectors::{NthChild, StructuralSelector, StyleSelector, StyleSelectors};
+pub use floem_style::selectors::{NthChild, StructuralSelector, StyleSelector, StyleSelectors};
 pub use theme::{DesignSystem, StyleThemeExt};
-pub use transition::{DirectTransition, Transition, TransitionState};
-pub use unit::{
+pub use floem_style::{DirectTransition, Transition, TransitionState};
+pub use style_debug_ext::StyleDebugViewExt;
+pub use transition_ext::TransitionDebugViewExt;
+pub use floem_style::unit::{
     AnchorAbout, Angle, Auto, DurationUnitExt, Em, FontSizeCx, Length, LengthAuto, Lh,
     LineHeightValue, Pct, Pt, UnitExt,
 };
-pub use values::{
+pub use floem_style::{
     ContextValue, ObjectFit, ObjectPosition, StrokeWrap, StyleMapValue, StylePropValue, StyleValue,
 };
 
-pub use cache::{StyleCache, StyleCacheKey};
-
-pub(crate) use props::{RESPONSIVE_SELECTORS_INFO, STRUCTURAL_SELECTORS_INFO, style_key_selector};
-
-static NEXT_STYLE_MERGE_ID: AtomicU64 = AtomicU64::new(1);
-const MERGE_MIX_CONST: u64 = 0x9E3779B97F4A7C15;
-static DEFERRED_EFFECTS_INFO: StyleKeyInfo = StyleKeyInfo::DeferredEffects;
-const DEFERRED_EFFECTS_KEY: StyleKey = StyleKey {
-    info: &DEFERRED_EFFECTS_INFO,
-};
-
-fn next_style_merge_id() -> u64 {
-    NEXT_STYLE_MERGE_ID.fetch_add(1, Ordering::Relaxed)
-}
-
-fn combine_merge_ids(a: u64, b: u64) -> u64 {
-    a.rotate_left(13) ^ b.wrapping_mul(MERGE_MIX_CONST)
-}
-
-type StructuralSelectorRules = SmallVec<[(StructuralSelector, Rc<Style>); 2]>;
-type ResponsiveSelectorRules = SmallVec<[(ResponsiveSelector, Rc<Style>); 2]>;
-
-#[derive(Clone)]
-pub(crate) struct DeferredStyleEffect {
-    run: Rc<dyn Fn(&Style)>,
-}
-
-impl DeferredStyleEffect {
-    fn new(run: impl Fn(&Style) + 'static) -> Self {
-        Self { run: Rc::new(run) }
-    }
-
-    fn run(&self, style: &Style) {
-        (self.run)(style);
-    }
-}
-
-#[derive(Clone, Default, Debug)]
-pub struct ExprStyle {
-    style: Style,
-}
-
-impl From<Style> for ExprStyle {
-    fn from(style: Style) -> Self {
-        Self { style }
-    }
-}
-
-impl From<ExprStyle> for Style {
-    fn from(style: ExprStyle) -> Self {
-        style.style
-    }
-}
-
-#[derive(Debug, Clone, Copy, Default)]
-pub struct ContextRef<P: StyleProp> {
-    _marker: PhantomData<P>,
-}
-
-impl<P: StyleProp> ContextRef<P> {
-    /// Create a deferred value from the current context prop.
-    ///
-    /// This is for producing another style value from context, such as
-    /// `font_size(fs.def(|fs| fs * 0.85))` or `background(t.def(|t| t.bg_base()))`.
-    ///
-    /// You can read `def` either as "function definition" or as shorthand for
-    /// "defer": it packages a closure that will be evaluated later when the
-    /// resulting value is needed.
-    ///
-    /// The closure is evaluated only if the property using the returned [`ContextValue`]
-    /// is actually read later. It does not run eagerly during `resolve_nested_maps`, so
-    /// it should not be used for side effects that must always happen during style
-    /// resolution. Use [`Style::defer`] for that.
-    pub fn def<T>(self, f: impl Fn(P::Type) -> T + 'static) -> ContextValue<T>
-    where
-        P::Type: 'static,
-        T: 'static,
-    {
-        ContextValue::new(move |style| {
-            let value = style.get_prop::<P>().unwrap_or_else(P::default_value);
-            f(value)
-        })
-    }
-
-    pub fn map<T>(self, f: impl Fn(P::Type) -> T + 'static) -> ContextValue<T>
-    where
-        P::Type: 'static,
-        T: 'static,
-    {
-        self.def(f)
-    }
-
-    pub(crate) fn into_deferred(self, f: impl Fn(P::Type) + 'static) -> DeferredStyleEffect
-    where
-        P::Type: 'static,
-    {
-        let effect = self.def(move |value| {
-            f(value);
-        });
-        DeferredStyleEffect::new(move |style| {
-            effect.resolve(style);
-        })
-    }
-}
-
-impl ExprStyle {
-    pub fn new() -> Self {
-        Self {
-            style: Style::new(),
-        }
-    }
-
-    pub fn build(self) -> Style {
-        self.style
-    }
-
-    pub fn map(self, over: impl FnOnce(Self) -> Self) -> Self {
-        over(self)
-    }
-
-    fn merge(mut self, over: Style) -> Self {
-        self.style.apply_mut(&over);
-        self
-    }
-
-    pub fn apply_if(self, cond: bool, f: impl FnOnce(Self) -> Self) -> Self {
-        if cond { f(self) } else { self }
-    }
-
-    pub fn set<P: StyleProp>(mut self, prop: P, value: impl Into<StyleValue<P::Type>>) -> Self {
-        self.style = self.style.set_style_value(prop, value.into());
-        self
-    }
-
-    pub fn set_context<P: StyleProp>(mut self, prop: P, value: ContextValue<P::Type>) -> Self {
-        self.style = self.style.set_context(prop, value);
-        self
-    }
-
-    pub fn set_from_context<C: StyleProp, P: StyleProp>(
-        mut self,
-        prop: P,
-        context: ContextRef<C>,
-        f: impl Fn(C::Type) -> P::Type + 'static,
-    ) -> Self
-    where
-        C::Type: 'static,
-        P::Type: 'static,
-    {
-        self.style = self.style.set_from_context(prop, context, f);
-        self
-    }
-
-    pub fn set_context_opt<P: StyleProp<Type = Option<T>>, T: 'static>(
-        mut self,
-        prop: P,
-        value: ContextValue<Option<T>>,
-    ) -> Self {
-        self.style = self.style.set_context_opt(prop, value);
-        self
-    }
-
-    pub fn set_from_context_opt<C: StyleProp, P: StyleProp<Type = Option<T>>, T: 'static>(
-        mut self,
-        prop: P,
-        context: ContextRef<C>,
-        f: impl Fn(C::Type) -> Option<T> + 'static,
-    ) -> Self
-    where
-        C::Type: 'static,
-    {
-        self.style = self.style.set_from_context_opt(prop, context, f);
-        self
-    }
-
-    pub fn with<P: StyleProp>(self, f: impl FnOnce(ExprStyle, ContextRef<P>) -> ExprStyle) -> Self {
-        f(self, ContextRef::default())
-    }
-
-    pub fn hover(self, style: impl FnOnce(ExprStyle) -> ExprStyle) -> Self {
-        self.merge(Style::default().hover(|s| style(s.into()).into()))
-    }
-
-    pub fn focus(self, style: impl FnOnce(ExprStyle) -> ExprStyle) -> Self {
-        self.merge(Style::default().focus(|s| style(s.into()).into()))
-    }
-
-    pub fn focus_visible(self, style: impl FnOnce(ExprStyle) -> ExprStyle) -> Self {
-        self.merge(Style::default().focus_visible(|s| style(s.into()).into()))
-    }
-
-    pub fn focus_within(self, style: impl FnOnce(ExprStyle) -> ExprStyle) -> Self {
-        self.merge(Style::default().focus_within(|s| style(s.into()).into()))
-    }
-
-    pub fn active(self, style: impl FnOnce(ExprStyle) -> ExprStyle) -> Self {
-        self.merge(Style::default().active(|s| style(s.into()).into()))
-    }
-
-    pub fn disabled(self, style: impl FnOnce(ExprStyle) -> ExprStyle) -> Self {
-        self.merge(Style::default().disabled(|s| style(s.into()).into()))
-    }
-
-    pub fn class<C: StyleClass>(
-        self,
-        class: C,
-        style: impl FnOnce(ExprStyle) -> ExprStyle,
-    ) -> Self {
-        self.merge(Style::default().class(class, |s| style(s.into()).into()))
-    }
-
-    /// Sets the font size for text content.
-    pub fn font_size<T>(self, size: ContextValue<T>) -> Self
-    where
-        T: Into<Pt> + 'static,
-    {
-        let px = size.map(|s| s.into().0);
-        self.set_context(FontSize, px)
-    }
-
-    pub fn size<W, H>(self, width: ContextValue<W>, height: ContextValue<H>) -> Self
-    where
-        W: Into<LengthAuto> + 'static,
-        H: Into<LengthAuto> + 'static,
-    {
-        self.width(width).height(height)
-    }
-
-    pub fn absolute(self) -> Self {
-        self.set(PositionProp, Position::Absolute)
-    }
-
-    pub fn flex_row(self) -> Self {
-        self.set(FlexDirectionProp, FlexDirection::Row)
-    }
-
-    pub fn margin<T>(self, margin: ContextValue<T>) -> Self
-    where
-        T: Into<LengthAuto> + 'static,
-    {
-        let margin = margin.map(Into::into);
-        self.set(MarginLeft, margin.clone())
-            .set(MarginTop, margin.clone())
-            .set(MarginRight, margin.clone())
-            .set(MarginBottom, margin)
-    }
-
-    pub fn border_color<T>(self, color: ContextValue<T>) -> Self
-    where
-        T: Into<Brush> + 'static,
-    {
-        let color = color.map(|color| Some(color.into()));
-        self.set(BorderLeftColor, color.clone())
-            .set(BorderTopColor, color.clone())
-            .set(BorderRightColor, color.clone())
-            .set(BorderBottomColor, color)
-    }
-
-    pub fn border_radius<T>(self, radius: ContextValue<T>) -> Self
-    where
-        T: Into<Length> + 'static,
-    {
-        let radius = radius.map(Into::into);
-        self.set(BorderTopLeftRadius, radius.clone())
-            .set(BorderTopRightRadius, radius.clone())
-            .set(BorderBottomLeftRadius, radius.clone())
-            .set(BorderBottomRightRadius, radius)
-    }
-
-    pub fn border<T>(self, width: ContextValue<T>) -> Self
-    where
-        T: Into<Pt> + 'static,
-    {
-        let stroke = width.map(|width| Stroke::new(width.into().0));
-        self.set(BorderLeft, stroke.clone())
-            .set(BorderTop, stroke.clone())
-            .set(BorderRight, stroke.clone())
-            .set(BorderBottom, stroke)
-    }
-
-    pub fn border_top<T>(self, width: ContextValue<T>) -> Self
-    where
-        T: Into<Pt> + 'static,
-    {
-        self.set(BorderTop, width.map(|width| Stroke::new(width.into().0)))
-    }
-
-    pub fn items_center(self) -> Self {
-        self.set(AlignItemsProp, Some(AlignItems::Center))
-    }
-
-    pub fn justify_center(self) -> Self {
-        self.set(
-            JustifyContentProp,
-            Some(taffy::style::JustifyContent::Center),
-        )
-    }
-
-    pub fn selected(self, style: impl FnOnce(ExprStyle) -> ExprStyle) -> Self {
-        self.merge(Style::default().selected(|s| style(s.into()).into()))
-    }
-
-    pub fn drag(self, style: impl FnOnce(ExprStyle) -> ExprStyle) -> Self {
-        self.merge(Style::default().drag(|s| style(s.into()).into()))
-    }
-
-    pub fn file_hover(self, style: impl FnOnce(ExprStyle) -> ExprStyle) -> Self {
-        self.merge(Style::default().file_hover(|s| style(s.into()).into()))
-    }
-
-    pub fn padding<T>(self, padding: ContextValue<T>) -> Self
-    where
-        T: Into<Length> + 'static,
-    {
-        let padding = padding.map(Into::into);
-        self.set(PaddingLeft, padding.clone())
-            .set(PaddingTop, padding.clone())
-            .set(PaddingRight, padding.clone())
-            .set(PaddingBottom, padding)
-    }
-
-    pub fn padding_horiz<T>(self, padding: ContextValue<T>) -> Self
-    where
-        T: Into<Length> + 'static,
-    {
-        let padding = padding.map(Into::into);
-        self.set(PaddingLeft, padding.clone())
-            .set(PaddingRight, padding)
-    }
-
-    pub fn padding_vert<T>(self, padding: ContextValue<T>) -> Self
-    where
-        T: Into<Length> + 'static,
-    {
-        let padding = padding.map(Into::into);
-        self.set(PaddingTop, padding.clone())
-            .set(PaddingBottom, padding)
-    }
-
-    pub fn gap<T>(self, gap: ContextValue<T>) -> Self
-    where
-        T: Into<Length> + 'static,
-    {
-        let gap = gap.map(Into::into);
-        self.set(ColGap, gap.clone()).set(RowGap, gap)
-    }
-
-    pub fn custom<CS>(self, custom: impl FnOnce(CS) -> CS) -> Self
-    where
-        CS: Default + Clone + Into<Style> + From<Style>,
-    {
-        self.merge(custom(CS::default()).into())
-    }
-
-    pub fn apply_border_radius(self, border_radius: BorderRadius) -> Self {
-        self.merge(Style::new().apply_border_radius(border_radius))
-    }
-
-    pub fn apply_box_shadows(self, shadow: impl Into<SmallVec<[BoxShadow; 3]>>) -> Self {
-        self.set(BoxShadowProp, shadow.into())
-    }
-
-    pub fn transition_background(self, transition: Transition) -> Self {
-        self.merge(Style::new().transition_background(transition))
-    }
-
-    pub fn border_bottom(self, width: impl Into<Pt>) -> Self {
-        self.set(BorderBottom, Stroke::new(width.into().0))
-    }
-
-    pub fn outline(self, width: impl Into<Pt>) -> Self {
-        self.set(Outline, Stroke::new(width.into().0))
-    }
-}
-
-fn fx_hash_map_with_capacity<K, V>(capacity: usize) -> FxHashMap<K, V> {
-    FxHashMap::with_capacity_and_hasher(capacity, Default::default())
-}
-
-fn take_any<T: Any + Clone>(value: Rc<dyn Any>) -> T {
-    Rc::downcast::<T>(value)
-        .map(|rc| Rc::try_unwrap(rc).unwrap_or_else(|rc| (*rc).clone()))
-        .unwrap_or_else(|_| panic!("unexpected style map payload type"))
-}
-
-#[derive(Clone)]
-struct StructuralSelectors(StructuralSelectorRules);
+pub use floem_style::{CacheHit, CacheStats, StyleCache, StyleCacheKey};
 
-#[derive(Clone)]
-struct ResponsiveSelectors(ResponsiveSelectorRules);
+pub(crate) use storage::StyleStorage;
 
-#[derive(Clone, Copy, Debug, PartialEq)]
-enum ResponsiveSelector {
-    ScreenSize(ScreenSize),
-    MinWidth(Pt),
-    MaxWidth(Pt),
-    WidthRange { min: Pt, max: Pt },
-}
-
-impl ResponsiveSelector {
-    fn matches(&self, width: f64) -> bool {
-        match self {
-            ResponsiveSelector::ScreenSize(size) => {
-                let bp = GridBreakpoints::default().get_width_bp(width);
-                size.breakpoints().contains(&bp)
-            }
-            ResponsiveSelector::MinWidth(min) => width >= min.0,
-            ResponsiveSelector::MaxWidth(max) => width <= max.0,
-            ResponsiveSelector::WidthRange { min, max } => width >= min.0 && width <= max.0,
-        }
-    }
-}
-
-style_key_selector!(selector_xs, StyleSelectors::empty().responsive());
-style_key_selector!(selector_sm, StyleSelectors::empty().responsive());
-style_key_selector!(selector_md, StyleSelectors::empty().responsive());
-style_key_selector!(selector_lg, StyleSelectors::empty().responsive());
-style_key_selector!(selector_xl, StyleSelectors::empty().responsive());
-style_key_selector!(selector_xxl, StyleSelectors::empty().responsive());
-
-pub(crate) fn screen_size_bp_to_key(breakpoint: ScreenSizeBp) -> StyleKey {
-    match breakpoint {
-        ScreenSizeBp::Xs => selector_xs(),
-        ScreenSizeBp::Sm => selector_sm(),
-        ScreenSizeBp::Md => selector_md(),
-        ScreenSizeBp::Lg => selector_lg(),
-        ScreenSizeBp::Xl => selector_xl(),
-        ScreenSizeBp::Xxl => selector_xxl(),
-    }
-}
-
-fn structural_selectors_key() -> StyleKey {
-    StyleKey {
-        info: &STRUCTURAL_SELECTORS_INFO,
-    }
-}
-
-fn responsive_selectors_key() -> StyleKey {
-    StyleKey {
-        info: &RESPONSIVE_SELECTORS_INFO,
-    }
-}
-
-/// the bool in the return is a classes_applied flag. if a new class has been applied, we need to do a request_style_recursive
-pub fn resolve_nested_maps(
-    style: Style,
-    interact_state: &mut InteractionState,
-    screen_size_bp: ScreenSizeBp,
-    classes: &[StyleClassRef],
-    inherited_context: &Style,
-    class_context: &Style,
-) -> (Style, StyleSelectors) {
-    // TODO: update interact state as each map is resolved
-
-    let mut selectors = StyleSelectors::empty();
-
-    let effect_context = style.effect_context.clone();
-
-    let class_style = resolve_classes(
-        classes,
-        interact_state,
-        screen_size_bp,
-        class_context,
-        &mut selectors,
-    );
-    selectors |= class_style.selectors();
-    let view_style = resolve_style(style, interact_state, screen_size_bp, &mut selectors);
-    let result = class_style
-        .apply(view_style)
-        .with_inherited_context(inherited_context);
-    result.run_deferred_effects();
-    let _ = effect_context;
-    (result, selectors)
-}
-
-fn resolve_classes(
-    classes: &[StyleClassRef],
-    interact_state: &InteractionState,
-    screen_size_bp: ScreenSizeBp,
-    class_context: &Style,
-    selectors: &mut StyleSelectors,
-) -> Style {
-    let mut result = Style::with_capacity(classes.len());
-
-    for class in classes {
-        if let Some(map) = class_context.get_nested_map(class.key) {
-            let resolved = resolve_style(map.clone(), interact_state, screen_size_bp, selectors);
-            result.apply_mut(&resolved);
-        }
-    }
-
-    result
-}
-
-fn resolve_style(
-    style: Style,
-    interact_state: &InteractionState,
-    screen_size_bp: ScreenSizeBp,
-    selectors: &mut StyleSelectors,
-) -> Style {
-    resolve_selectors(style, interact_state, screen_size_bp, selectors)
-}
-
-fn resolve_selectors(
-    mut style: Style,
-    interact_state: &InteractionState,
-    screen_size_bp: ScreenSizeBp,
-    selectors: &mut StyleSelectors,
-) -> Style {
-    *selectors |= style.selectors();
-
-    // Validate cached selectors in debug builds
-    #[cfg(debug_assertions)]
-    debug_assert!(
-        style
-            .cached_selectors
-            .contains(style.compute_selectors_slow()),
-        "cached_selectors {:?} missing bits from computed {:?}",
-        style.cached_selectors,
-        style.compute_selectors_slow()
-    );
-
-    const MAX_DEPTH: u32 = 20;
-    let mut depth = 0;
-
-    loop {
-        if depth >= MAX_DEPTH {
-            break;
-        }
-        depth += 1;
-
-        let mut changed = false;
-
-        // Apply structural selectors (:first-child, :last-child, :nth-child(...))
-        // before state selectors so nested :hover/:focus inside structural maps can
-        // be discovered and applied in the same resolution loop.
-        if let Some(structural_rules) = extract_structural_selectors(&mut style) {
-            for (selector, map) in structural_rules {
-                if selector.matches(interact_state.child_index, interact_state.sibling_count) {
-                    style.apply_mut(map.as_ref());
-                    changed = true;
-                }
-            }
-        }
-
-        // Apply responsive selectors (parameterized)
-        if let Some(responsive_rules) = extract_responsive_selectors(&mut style) {
-            for (selector, map) in responsive_rules {
-                if selector.matches(interact_state.window_width) {
-                    style.apply_mut(map.as_ref());
-                    changed = true;
-                }
-            }
-        }
-
-        // Helper to apply a nested map and collect any context mappings from it
-        let apply_nested = |style: &mut Style, key: StyleKey| -> bool {
-            if let Some(map) = style.get_nested_map(key) {
-                style.apply_mut(&map);
-                style.remove_nested_map(key);
-                true
-            } else {
-                false
-            }
-        };
-
-        // Apply screen size breakpoints
-        if apply_nested(&mut style, screen_size_bp_to_key(screen_size_bp)) {
-            changed = true;
-        }
-
-        // DarkMode
-        if interact_state.is_dark_mode && apply_nested(&mut style, StyleSelector::DarkMode.to_key())
-        {
-            changed = true;
-        }
-
-        // Disabled state
-        if interact_state.is_disabled || style.get(Disabled) {
-            if apply_nested(&mut style, StyleSelector::Disabled.to_key()) {
-                changed = true;
-            }
-        } else {
-            // Selected
-            if (interact_state.is_selected || style.get(Selected))
-                && apply_nested(&mut style, StyleSelector::Selected.to_key())
-            {
-                changed = true;
-            }
-
-            // Hover
-            if interact_state.is_hovered && apply_nested(&mut style, StyleSelector::Hover.to_key())
-            {
-                changed = true;
-            }
-
-            // File Hover
-            if interact_state.is_file_hover
-                && apply_nested(&mut style, StyleSelector::FileHover.to_key())
-            {
-                changed = true;
-            }
-
-            // Focus states
-            if interact_state.is_focused && apply_nested(&mut style, StyleSelector::Focus.to_key())
-            {
-                changed = true;
-            }
-
-            if interact_state.is_focus_within
-                && apply_nested(&mut style, StyleSelector::FocusWithin.to_key())
-            {
-                changed = true;
-            }
-
-            if interact_state.is_focused && interact_state.using_keyboard_navigation {
-                if apply_nested(&mut style, StyleSelector::FocusVisible.to_key()) {
-                    changed = true;
-                }
-
-                if interact_state.is_active
-                    && apply_nested(&mut style, StyleSelector::Active.to_key())
-                {
-                    changed = true;
-                }
-            }
-
-            // Active (mouse)
-            if interact_state.is_active
-                && !interact_state.using_keyboard_navigation
-                && apply_nested(&mut style, StyleSelector::Active.to_key())
-            {
-                changed = true;
-            }
-        }
-
-        if !changed {
-            break;
-        }
-    }
-
-    style
-}
-
-fn extract_structural_selectors(style: &mut Style) -> Option<StructuralSelectorRules> {
-    let key = structural_selectors_key();
-    style
-        .map_mut()
-        .remove(&key)
-        .map(|rc| take_any::<StructuralSelectors>(rc).0)
-}
-
-fn extract_responsive_selectors(style: &mut Style) -> Option<ResponsiveSelectorRules> {
-    let key = responsive_selectors_key();
-    style
-        .map_mut()
-        .remove(&key)
-        .map(|rc| take_any::<ResponsiveSelectors>(rc).0)
-}
-
-#[derive(Clone)]
-pub struct Style {
-    pub(crate) map: Rc<FxHashMap<StyleKey, Rc<dyn Any>>>,
-    inherited_context: Option<Rc<FxHashMap<StyleKey, Rc<dyn Any>>>>,
-    /// Deterministic identity for style merges.
-    merge_id: u64,
-    /// Cached flag indicating whether this style contains any class maps.
-    /// This enables O(1) early-exit in `apply_only_class_maps` for the common case
-    /// where a view's style has no class definitions.
-    has_class_maps: bool,
-    /// Cached flag indicating whether this style contains any inherited properties.
-    /// This enables O(1) early-exit in `apply_only_inherited` for the common case
-    /// where a view's style has no inherited properties.
-    has_inherited: bool,
-    /// Cached bitmask of which selectors are present in this style (including nested).
-    /// Updated incrementally when selectors are added via `apply_iter`, `set_selector`, etc.
-    /// Enables O(1) checks in `resolve_selectors` to skip absent selectors.
-    cached_selectors: StyleSelectors,
-    /// Cached flag indicating whether this style contains any context-dependent values.
-    /// Styles with context values cannot be reliably cached because their content_hash()
-    /// is constant (all context values hash to 1), so different context values produce
-    /// the same cache key despite resolving to different output.
-    has_context_values: bool,
-    /// The effect context that was active when this style was created.
-    /// This is restored when evaluating context mappings and selectors to ensure
-    /// reactive dependencies are tracked correctly.
-    effect_context: Option<Rc<dyn floem_reactive::EffectTrait>>,
-}
-impl Default for Style {
-    fn default() -> Self {
-        Self::with_capacity(0)
-    }
-}
-
-impl Style {
-    fn with_capacity(capacity: usize) -> Self {
-        let effect_context = floem_reactive::Runtime::get_current_effect();
-        let map = Rc::new(fx_hash_map_with_capacity(capacity));
-        Self {
-            merge_id: next_style_merge_id(),
-            map,
-            inherited_context: None,
-            has_class_maps: false,
-            has_inherited: false,
-            cached_selectors: StyleSelectors::empty(),
-            has_context_values: false,
-            effect_context,
-        }
-    }
-
-    fn map_mut(&mut self) -> &mut FxHashMap<StyleKey, Rc<dyn Any>> {
-        Rc::make_mut(&mut self.map)
-    }
-
-    pub fn new() -> Self {
-        Self::with_capacity(0)
-    }
-
-    pub(crate) fn with_inherited_context(mut self, inherited: &Style) -> Self {
-        self.inherited_context = Some(inherited.map.clone());
-        self
-    }
 
-    /// Apply only inherited properties from `from` style to `to` style.
-    /// This is used during style propagation to pass inherited values to children.
-    ///
-    /// Only properties marked as `inherited: true` in their `StylePropInfo` are applied.
-    /// This is more efficient than `apply_mut` when we only need to propagate
-    /// inherited properties like font-size, color, etc.
-    pub fn apply_only_inherited(to: &mut Style, from: &Style) {
-        if from.any_inherited() {
-            for (k, v) in from.map.iter().filter(|(p, _)| p.inherited()) {
-                let StyleKeyInfo::Prop(info) = k.info else {
-                    continue;
-                };
-                to.map_mut()
-                    .insert(*k, (info.resolve_inherited_any)(&**v, from));
-                to.has_inherited = true;
-            }
-            to.merge_id = combine_merge_ids(to.merge_id, from.merge_id);
-        }
-    }
-
-    /// Apply inherited properties and class nested maps from `from` style to `to` style.
-    ///
-    /// This is used during style propagation to pass both inherited values and
-    /// class definitions to children. Class nested maps (like `.class(ListItemClass, ...)`)
-    /// need to flow to descendants so they can apply the styling when they have matching classes.
-    pub fn apply_inherited_and_class_maps(to: &mut Rc<Style>, from: &Style) {
-        let has_inherited = from.any_inherited();
-        // O(1) check using cached flag
-        let has_class_maps = from.has_class_maps;
-
-        if has_inherited || has_class_maps {
-            let mut new_style = (**to).clone();
-
-            // Apply inherited properties
-            if has_inherited {
-                for (k, v) in from.map.iter().filter(|(p, _)| p.inherited()) {
-                    let StyleKeyInfo::Prop(info) = k.info else {
-                        continue;
-                    };
-                    new_style
-                        .map_mut()
-                        .insert(*k, (info.resolve_inherited_any)(&**v, from));
-                    new_style.has_inherited = true;
-                }
-                new_style.merge_id = combine_merge_ids(new_style.merge_id, from.merge_id);
-            }
-
-            // Apply class nested maps so they flow to descendants
-            if has_class_maps {
-                let class_maps = from
-                    .map
-                    .iter()
-                    .filter(|(k, _)| matches!(k.info, StyleKeyInfo::Class(..)));
-                new_style.apply_iter(class_maps, None);
-                new_style.merge_id = combine_merge_ids(new_style.merge_id, from.merge_id);
-            }
-
-            *to = Rc::new(new_style);
-        }
-    }
-
-    /// Apply only class nested maps from `from` style to `to` style.
-    /// This is used during style propagation to pass class definitions to children.
-    ///
-    /// Only class nested maps (`.class(SomeClass, ...)`) are applied, not inherited props.
-    pub fn apply_only_class_maps(to: &mut Style, from: &Style) {
-        if !from.has_class_maps {
-            return;
-        }
-        let class_maps = from
-            .map
-            .iter()
-            .filter(|(k, _)| matches!(k.info, StyleKeyInfo::Class(..)));
-        to.apply_iter(class_maps, None);
-        to.merge_id = combine_merge_ids(to.merge_id, from.merge_id);
-    }
-
-    pub(crate) fn merge_id(&self) -> u64 {
-        self.merge_id
-    }
-
-    /// Returns the raw pointer of the inner `Rc<FxHashMap>` as a `usize`.
-    /// Used by the style cache for O(1) identity comparison.
-    pub(crate) fn map_ptr(&self) -> usize {
-        Rc::as_ptr(&self.map) as usize
-    }
-
-    /// Whether this style contains any context-dependent values.
-    pub(crate) fn has_context_values(&self) -> bool {
-        self.has_context_values
-    }
-
-    /// Whether this style contains structural selectors (`:first-child`, `:nth-child`, etc.).
-    /// Styles with structural selectors depend on `child_index`/`sibling_count` which are
-    /// per-position values not captured in the cache key, so they must be excluded from caching.
-    pub(crate) fn has_structural_selectors(&self) -> bool {
-        self.map.contains_key(&structural_selectors_key())
-    }
-
-    pub fn class_maps_eq(&self, other: &Style) -> SmallVec<[StyleClassRef; 4]> {
-        // Pass 1: every Class entry in self must exist in other
-        let mut changed = SmallVec::new();
-        for (k, v) in self.map.iter() {
-            let StyleKeyInfo::Class(_) = k.info else {
-                continue;
-            };
-
-            match other.map.get(k) {
-                Some(other_v) => {
-                    let v_style = v.downcast_ref::<Style>().unwrap();
-                    let other_v_style = other_v.downcast_ref::<Style>().unwrap();
-
-                    if v_style.merge_id != other_v_style.merge_id {
-                        changed.push(StyleClassRef { key: *k });
-                    }
-                }
-                None => {
-                    changed.push(StyleClassRef { key: *k });
-                }
-            }
-        }
-
-        // Pass 2: ensure other does not contain extra Class entries
-        for k in other.map.keys() {
-            if !matches!(k.info, StyleKeyInfo::Class(..)) {
-                continue;
-            }
-
-            if !self.map.contains_key(k) {
-                changed.push(StyleClassRef { key: *k });
-            }
-        }
-
-        changed
-    }
-
-    pub(crate) fn get_transition<P: StyleProp>(&self) -> Option<Transition> {
-        self.map
-            .get(&P::prop_ref().info().transition_key)
-            .map(|v| v.downcast_ref::<Transition>().unwrap().clone())
-    }
-
-    fn get_prop_from_map<P: StyleProp>(
-        map: &FxHashMap<StyleKey, Rc<dyn Any>>,
-        context_style: &Style,
-    ) -> Option<P::Type> {
-        map.get(&P::key()).and_then(
-            |v| match v.downcast_ref::<StyleMapValue<P::Type>>().unwrap() {
-                StyleMapValue::Animated(v) | StyleMapValue::Val(v) => Some(v.clone()),
-                StyleMapValue::Context(context_value) => Some(context_value.resolve(context_style)),
-                StyleMapValue::Unset => None,
-            },
-        )
-    }
-
-    fn get_style_value_from_map<P: StyleProp>(
-        map: &FxHashMap<StyleKey, Rc<dyn Any>>,
-        context_style: &Style,
-    ) -> Option<StyleValue<P::Type>> {
-        map.get(&P::key()).map(
-            |v| match v.downcast_ref::<StyleMapValue<P::Type>>().unwrap() {
-                StyleMapValue::Val(v) => StyleValue::Val(v.clone()),
-                StyleMapValue::Animated(v) => StyleValue::Animated(v.clone()),
-                StyleMapValue::Context(v) => StyleValue::Val(v.resolve(context_style)),
-                StyleMapValue::Unset => StyleValue::Unset,
-            },
-        )
-    }
-
-    pub(crate) fn get_prop_or_default<P: StyleProp>(&self) -> P::Type {
-        self.get_prop::<P>().unwrap_or_else(|| P::default_value())
-    }
+// ============================================================================
+// Style struct, cascade, built-in props — all moved to the `floem_style` crate
+// ============================================================================
 
-    pub(crate) fn get_prop<P: StyleProp>(&self) -> Option<P::Type> {
-        Self::get_prop_from_map::<P>(&self.map, self).or_else(|| {
-            self.inherited_context
-                .as_ref()
-                .and_then(|map| Self::get_prop_from_map::<P>(map, self))
-        })
-    }
-
-    pub(crate) fn get_prop_style_value<P: StyleProp>(&self) -> StyleValue<P::Type> {
-        Self::get_style_value_from_map::<P>(&self.map, self)
-            .or_else(|| {
-                self.inherited_context
-                    .as_ref()
-                    .and_then(|map| Self::get_style_value_from_map::<P>(map, self))
-            })
-            .unwrap_or(StyleValue::Base)
-    }
-
-    pub(crate) fn style_props(&self) -> impl Iterator<Item = StylePropRef> + '_ {
-        self.map.keys().filter_map(|p| match p.info {
-            StyleKeyInfo::Prop(..) => Some(StylePropRef { key: *p }),
-            _ => None,
-        })
-    }
-
-    pub(crate) fn selectors(&self) -> StyleSelectors {
-        self.cached_selectors
-    }
-
-    /// Recompute selectors by traversing the map. Used for debug assertions.
-    #[cfg(debug_assertions)]
-    fn compute_selectors_slow(&self) -> StyleSelectors {
-        let mut result = StyleSelectors::empty();
-
-        for (k, v) in self.map.iter() {
-            match k.info {
-                StyleKeyInfo::Selector(selector) => {
-                    result = result
-                        .union(*selector)
-                        .union(v.downcast_ref::<Style>().unwrap().selectors());
-                }
-                StyleKeyInfo::StructuralSelectors => {
-                    let rules = &v.downcast_ref::<StructuralSelectors>().unwrap().0;
-                    for (_, nested_style) in rules {
-                        result = result.union(nested_style.as_ref().selectors());
-                    }
-                }
-                StyleKeyInfo::ResponsiveSelectors => {
-                    result = result.responsive();
-                    let rules = &v.downcast_ref::<ResponsiveSelectors>().unwrap().0;
-                    for (_, nested_style) in rules {
-                        result = result.union(nested_style.as_ref().selectors());
-                    }
-                }
-                StyleKeyInfo::DebugGroup(..) => {}
-                _ => {}
-            }
-        }
-
-        result
-    }
-
-    pub fn apply_class<C: StyleClass>(mut self, _class: C) -> Style {
-        if let Some(map) = self.map.get(&C::key()).cloned() {
-            self.apply_mut(map.downcast_ref::<Style>().unwrap());
-        }
-        self
-    }
-
-    pub fn apply_selectors(mut self, selectors: &[StyleSelector]) -> Style {
-        for selector in selectors {
-            if let Some(map) = self.get_nested_map(selector.to_key()) {
-                let resolved = map.apply_selectors(selectors);
-                self.apply_mut(&resolved);
-            }
-        }
-        if self.get(Selected)
-            && let Some(map) = self.get_nested_map(StyleSelector::Selected.to_key())
-        {
-            let resolved = map.apply_selectors(&[StyleSelector::Selected]);
-            self.apply_mut(&resolved);
-        }
-        self
-    }
-
-    /// Build style values from a context prop without introducing a deferred style map pass.
-    ///
-    /// The closure runs immediately and must produce an ordinary style map. Any deferred
-    /// context work is captured at the individual property-value level through
-    /// [`ContextRef::map`].
-    pub fn with<P: StyleProp>(self, f: impl FnOnce(ExprStyle, ContextRef<P>) -> ExprStyle) -> Self {
-        f(ExprStyle { style: self }, ContextRef::default()).style
-    }
-
-    pub(crate) fn get_nested_map(&self, key: StyleKey) -> Option<Style> {
-        self.map
-            .get(&key)
-            .map(|map| map.downcast_ref::<Style>().unwrap().clone())
-    }
-
-    pub(crate) fn debug_group_enabled(&self, key: StyleKey) -> bool {
-        self.map
-            .get(&key)
-            .and_then(|value| value.downcast_ref::<bool>().copied())
-            .unwrap_or(false)
-    }
-
-    pub(crate) fn remove_nested_map(&mut self, key: StyleKey) -> Option<Style> {
-        let removed = self.map_mut().remove(&key).map(take_any::<Style>);
-        if removed.is_some() {
-            self.merge_id = next_style_merge_id();
-        }
-        removed
-    }
-
-    /// Check if this style has any inherited properties.
-    /// Used to determine if children should be re-styled when this view's style changes.
-    /// O(1) using cached flag.
-    pub(crate) fn any_inherited(&self) -> bool {
-        self.has_inherited
-    }
-
-    pub(crate) fn inherited(&self) -> Style {
-        let mut new = Style::new();
-        if self.any_inherited() {
-            let inherited = self.map.iter().filter(|(p, _)| p.inherited());
+pub use floem_style::{
+    resolve_nested_maps, BuiltinStyle, ContextRef, DeferredStyleEffect, ExprStyle, Style,
+};
+pub(crate) use floem_style::cascade::{ResponsiveSelectors, StructuralSelectors};
+
+pub use floem_style::{
+    AlignContentProp, AlignItemsProp, AlignSelf, AspectRatio, Background, BorderBottom,
+    BorderBottomColor, BorderBottomLeftRadius, BorderBottomRightRadius, BorderLeft,
+    BorderLeftColor, BorderProgress, BorderRight, BorderRightColor, BorderTop, BorderTopColor,
+    BorderTopLeftRadius, BorderTopRightRadius, BoxShadowProp, BoxSizingProp, ColGap, Cursor,
+    CursorColor, Disabled, DisplayProp, FlexBasis, FlexDirectionProp, FlexGrow, FlexShrink,
+    FlexWrapProp, Focusable, FontFamily, FontSize, FontStyle, FontWeight, Foreground,
+    GridAutoColumns, GridAutoFlow, GridAutoRows, GridColumn, GridRow, GridTemplateColumns,
+    GridTemplateRows, Height, InsetBottom, InsetLeft, InsetRight, InsetTop, IsFixed,
+    JustifyContentProp, JustifyItemsProp, JustifySelf, LineHeight, MarginBottom, MarginLeft,
+    MarginRight, MarginTop, MaxHeight, MaxWidth, MinHeight, MinWidth, ObjectFitProp,
+    ObjectPositionProp, Opacity, Outline, OutlineColor, OutlineProgress, OverflowX, OverflowY,
+    PaddingBottom, PaddingLeft, PaddingRight, PaddingTop, PointerEventsProp, PositionProp,
+    RotateAbout, Rotation, RowGap, ScaleAbout, ScaleX, ScaleY, ScrollbarWidth, Selectable,
+    Selected, SelectionCornerRadius, TextAlignProp, TextColor, TextOverflowProp, Transform,
+    TranslateX, TranslateY, Width, ZIndex,
+};
 
-            new.apply_iter(inherited, None);
-            new.merge_id = combine_merge_ids(new.merge_id, self.merge_id);
-        }
-        new
-    }
+use crate::views::editor::SelectionColor;
 
-    fn set_selector(&mut self, selector: StyleSelector, map: Style) {
-        self.set_map_selector(selector.to_key(), map)
-    }
-
-    fn set_structural_selector(&mut self, selector: StructuralSelector, map: Style) {
-        self.cached_selectors |= map.cached_selectors;
-        let key = structural_selectors_key();
-        let mut rules = self
-            .map_mut()
-            .remove(&key)
-            .map(|current| take_any::<StructuralSelectors>(current).0)
-            .unwrap_or_default();
-        rules.push((selector, Rc::new(map)));
-        self.map_mut()
-            .insert(key, Rc::new(StructuralSelectors(rules)));
-        self.merge_id = next_style_merge_id();
-    }
-
-    fn set_responsive_selector(&mut self, selector: ResponsiveSelector, map: Style) {
-        self.cached_selectors |= StyleSelectors::RESPONSIVE;
-        self.cached_selectors |= map.cached_selectors;
-        let key = responsive_selectors_key();
-        let mut rules = self
-            .map_mut()
-            .remove(&key)
-            .map(|current| take_any::<ResponsiveSelectors>(current).0)
-            .unwrap_or_default();
-        rules.push((selector, Rc::new(map)));
-        self.map_mut()
-            .insert(key, Rc::new(ResponsiveSelectors(rules)));
-        self.merge_id = next_style_merge_id();
-    }
-
-    fn set_map_selector(&mut self, key: StyleKey, map: Style) {
-        // Track selector presence
-        if let StyleKeyInfo::Selector(sel) = key.info {
-            self.cached_selectors |= *sel;
-            self.cached_selectors |= map.cached_selectors;
-        }
-        let value = if let Some(current) = self.map_mut().remove(&key) {
-            let mut current: Style = take_any(current);
-            current.apply_mut(&map);
-            Rc::new(current)
-        } else {
-            Rc::new(map)
-        };
-        self.map_mut().insert(key, value);
-        self.merge_id = next_style_merge_id();
-    }
-
-    fn set_class(&mut self, class: StyleClassRef, map: Style) {
-        self.has_class_maps = true;
-        self.set_map_selector(class.key, map)
-    }
-
-    pub fn debug_group<G: StyleDebugGroup>(mut self, _group: G) -> Self {
-        self.map_mut().insert(G::key(), Rc::new(true));
-        self.merge_id = next_style_merge_id();
-        self
-    }
-
-    pub fn unset_debug_group<G: StyleDebugGroup>(mut self, _group: G) -> Self {
-        self.map_mut().insert(G::key(), Rc::new(false));
-        self.merge_id = next_style_merge_id();
-        self
-    }
-
-    pub fn builtin(&self) -> BuiltinStyle<'_> {
-        BuiltinStyle { style: self }
-    }
-
-    pub(crate) fn apply_iter<'a>(
-        &mut self,
-        iter: impl Iterator<Item = (&'a StyleKey, &'a Rc<dyn Any>)>,
-        source_effect_context: Option<Rc<dyn floem_reactive::EffectTrait>>,
-    ) {
-        if self.effect_context.is_none() && source_effect_context.is_some() {
-            self.effect_context = source_effect_context;
-        }
-        for (k, v) in iter {
-            match k.info {
-                StyleKeyInfo::Class(..) | StyleKeyInfo::Selector(..) => {
-                    // Track class maps for O(1) early-exit in apply_only_class_maps
-                    if matches!(k.info, StyleKeyInfo::Class(..)) {
-                        self.has_class_maps = true;
-                    }
-                    // Track selectors for O(1) selector presence checks
-                    if let StyleKeyInfo::Selector(sel) = k.info {
-                        self.cached_selectors |= *sel;
-                        if let Some(nested) = v.downcast_ref::<Style>() {
-                            self.cached_selectors |= nested.cached_selectors;
-                        }
-                    }
-                    if let Some(existing_rc) = self.map_mut().remove(k) {
-                        if Rc::ptr_eq(&existing_rc, v) {
-                            self.map_mut().insert(*k, existing_rc);
-                            continue;
-                        }
-
-                        let mut current: Style = take_any(existing_rc);
-                        current.apply_mut(v.downcast_ref::<Style>().unwrap());
-                        self.map_mut().insert(*k, Rc::new(current));
-                    } else {
-                        self.map_mut().insert(*k, v.clone());
-                    }
-                }
-                StyleKeyInfo::StructuralSelectors => {
-                    // Propagate nested selectors from structural rules
-                    let rules = &v.downcast_ref::<StructuralSelectors>().unwrap().0;
-                    for (_, nested) in rules {
-                        self.cached_selectors |= nested.cached_selectors;
-                    }
-                    let merged = if let Some(current) = self.map_mut().remove(k) {
-                        let new_rules = &v.downcast_ref::<StructuralSelectors>().unwrap().0;
-                        let current: StructuralSelectors = take_any(current);
-                        let mut merged: StructuralSelectorRules = current.0;
-                        merged.extend(new_rules.iter().cloned());
-                        Rc::new(StructuralSelectors(merged))
-                    } else {
-                        v.clone()
-                    };
-                    self.map_mut().insert(*k, merged);
-                }
-                StyleKeyInfo::ResponsiveSelectors => {
-                    self.cached_selectors |= StyleSelectors::RESPONSIVE;
-                    // Propagate nested selectors from responsive rules
-                    let rules = &v.downcast_ref::<ResponsiveSelectors>().unwrap().0;
-                    for (_, nested) in rules {
-                        self.cached_selectors |= nested.cached_selectors;
-                    }
-                    let merged = if let Some(current) = self.map_mut().remove(k) {
-                        let new_rules = &v.downcast_ref::<ResponsiveSelectors>().unwrap().0;
-                        let current: ResponsiveSelectors = take_any(current);
-                        let mut merged: ResponsiveSelectorRules = current.0;
-                        merged.extend(new_rules.iter().cloned());
-                        Rc::new(ResponsiveSelectors(merged))
-                    } else {
-                        v.clone()
-                    };
-                    self.map_mut().insert(*k, merged);
-                }
-                StyleKeyInfo::DeferredEffects => {
-                    let merged = if let Some(current) = self.map_mut().remove(k) {
-                        let mut current: Vec<DeferredStyleEffect> = take_any(current);
-                        current.extend(
-                            v.downcast_ref::<Vec<DeferredStyleEffect>>()
-                                .unwrap()
-                                .iter()
-                                .cloned(),
-                        );
-                        Rc::new(current)
-                    } else {
-                        v.clone()
-                    };
-                    self.map_mut().insert(*k, merged);
-                }
-                StyleKeyInfo::Transition | StyleKeyInfo::DebugGroup(..) => {
-                    self.map_mut().insert(*k, v.clone());
-                }
-                StyleKeyInfo::Prop(info) => {
-                    // Track inherited props for O(1) early-exit in apply_only_inherited
-                    if info.inherited {
-                        self.has_inherited = true;
-                    }
-                    self.map_mut().insert(*k, v.clone());
-                }
-            }
-        }
-    }
-
-    pub(crate) fn apply_mut(&mut self, over: &Style) {
-        // FAST PATH: identical semantic payload identity
-        if self.merge_id == over.merge_id {
-            return;
-        }
-        let over_merge_id = over.merge_id;
-        let effect_context = over.effect_context.clone();
-        self.apply_iter(over.map.iter(), effect_context);
-        self.has_context_values |= over.has_context_values;
-        self.merge_id = combine_merge_ids(self.merge_id, over_merge_id);
-    }
-
-    /// Apply another `Style` to this style, returning a new `Style` with the overrides
-    ///
-    /// `StyleValue::Val` will override the value with the given value
-    /// `StyleValue::Unset` will unset the value, causing it to fall back to the default.
-    /// `StyleValue::Base` will leave the value as-is, whether falling back to the default
-    /// or using the value in the `Style`.
-    pub fn apply(mut self, over: Style) -> Style {
-        self.apply_mut(&over);
-        self
-    }
-
-    pub fn map(self, over: impl FnOnce(Self) -> Self) -> Self {
-        over(self)
-    }
-
-    /// Apply multiple `Style`s to this style, returning a new `Style` with the overrides.
-    /// Later styles take precedence over earlier styles.
-    pub fn apply_overriding_styles(self, overrides: impl Iterator<Item = Style>) -> Style {
-        overrides.fold(self, |acc, x| acc.apply(x))
-    }
-}
-
-impl Debug for Style {
-    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
-        f.debug_struct("Style")
-            .field(
-                "map",
-                &self
-                    .map
-                    .iter()
-                    .map(|(p, v)| (*p, (p.debug_any(&**v))))
-                    .collect::<HashMap<StyleKey, String>>(),
-            )
-            .finish()
-    }
-}
-
-style_key_selector!(
-    hover,
-    StyleSelectors::empty().set_selector(StyleSelector::Hover, true)
-);
-style_key_selector!(
-    file_hover,
-    StyleSelectors::empty().set_selector(StyleSelector::FileHover, true)
-);
-style_key_selector!(
-    focus,
-    StyleSelectors::empty().set_selector(StyleSelector::Focus, true)
-);
-style_key_selector!(
-    focus_visible,
-    StyleSelectors::empty().set_selector(StyleSelector::FocusVisible, true)
-);
-style_key_selector!(
-    focus_within,
-    StyleSelectors::empty().set_selector(StyleSelector::FocusWithin, true)
-);
-style_key_selector!(
-    disabled,
-    StyleSelectors::empty().set_selector(StyleSelector::Disabled, true)
-);
-style_key_selector!(
-    active,
-    StyleSelectors::empty().set_selector(StyleSelector::Active, true)
-);
-style_key_selector!(
-    dragging,
-    StyleSelectors::empty().set_selector(StyleSelector::Dragging, true)
-);
-style_key_selector!(
-    selected,
-    StyleSelectors::empty().set_selector(StyleSelector::Selected, true)
-);
-style_key_selector!(
-    darkmode,
-    StyleSelectors::empty().set_selector(StyleSelector::DarkMode, true)
-);
-
-impl StyleSelector {
-    fn to_key(self) -> StyleKey {
-        match self {
-            StyleSelector::Hover => hover(),
-            StyleSelector::Focus => focus(),
-            StyleSelector::FocusVisible => focus_visible(),
-            StyleSelector::FocusWithin => focus_within(),
-            StyleSelector::Disabled => disabled(),
-            StyleSelector::Active => active(),
-            StyleSelector::Dragging => dragging(),
-            StyleSelector::Selected => selected(),
-            StyleSelector::DarkMode => darkmode(),
-            StyleSelector::FileHover => file_hover(),
-        }
-    }
-}
-
-/// Defines built-in style properties with optional builder methods.
-///
-/// Properties can be marked with flags in braces:
-/// - `nocb` (no callback/no chain builder) - no fluent builder method generated
-/// - `tr` (transition) - generates a `transition_property_name()` method
-///
-/// For `Option<T>` properties, specify the inner type in brackets after the full type:
-///
-/// ```text
-/// Color color { tr }: Option<Color> [Color] { inherited } = None,
-/// ```
-///
-/// This generates a setter that accepts `impl Into<Color>` and wraps in `Some`,
-/// rather than the confusing `impl Into<Option<Color>>`. Use `unset_*()` to clear.
-///
-/// Examples:
-/// - `name: Type {}`                           plain prop, setter takes Into<Type>
-/// - `name {nocb}: Type {}`                    no setter generated
-/// - `name {tr}: Type {}`                      setter + transition_name() generated
-/// - `name {nocb, tr}: Type {}`                no setter, but transition_name() generated
-/// - `name {tr}: Option<Type> [Type] {}`       setter takes Into<Type>, wraps in Some
-/// - `name {nocb}: Option<Type> [Type] {}`     no setter generated
-///
-/// All properties get:
-/// - A getter method in `BuiltinStyle`
-/// - An `unset_property_name()` method
-macro_rules! define_builtin_props {
-    (
-        $(
-            $(#[$meta:meta])*
-            $type_name:ident $name:ident $({ $($flags:ident),* })? :
-            $typ:ty $( [$inner:ty] )? { $($options:tt)* } = $val:expr
-        ),*
-        $(,)?
-    ) => {
-        $(
-            prop!($(#[$meta])* pub $type_name: $typ { $($options)* } = $val);
-        )*
-        impl Style {
-            $(
-                define_builtin_props!(decl: $(#[$meta])* $type_name $name $({ $($flags),* })? : $typ $( [$inner] )? = $val);
-            )*
-            $(
-                define_builtin_props!(unset: $(#[$meta])* $type_name $name);
-            )*
-            $(
-                define_builtin_props!(transition: $(#[$meta])* $type_name $name $({ $($flags),* })?);
-            )*
-        }
-        impl BuiltinStyle<'_> {
-            $(
-                $(#[$meta])*
-                pub fn $name(&self) -> $typ {
-                    self.style.get($type_name)
-                }
-            )*
-        }
-        impl ExprStyle {
-            $(
-                define_builtin_props!(expr_decl: $(#[$meta])* $type_name $name $({ $($flags),* })? : $typ $( [$inner] )? = $val);
-            )*
-            $(
-                define_builtin_props!(expr_unset: $(#[$meta])* $type_name $name);
-            )*
-        }
-    };
-
-    // Built-in setters for `Option<T> [T]` take `Into<T>` and wrap in `Some`.
-    (decl: $(#[$meta:meta])* $type_name:ident $name:ident { $($flags:ident),* } : $typ:ty [$inner:ty] = $val:expr) => {
-        define_builtin_props!(@opt_check_nocb $(#[$meta])* $type_name $name [$($flags)*]: $inner);
-    };
-    (decl: $(#[$meta:meta])* $type_name:ident $name:ident : $typ:ty [$inner:ty] = $val:expr) => {
-        $(#[$meta])*
-        pub fn $name(self, v: impl Into<$inner>) -> Self {
-            self.set($type_name, Some(v.into()))
-        }
-    };
-    (decl: $(#[$meta:meta])* $type_name:ident $name:ident { $($flags:ident),* } : $typ:ty = $val:expr) => {
-        define_builtin_props!(@check_nocb $(#[$meta])* $type_name $name [$($flags)*]: $typ);
-    };
-    (decl: $(#[$meta:meta])* $type_name:ident $name:ident : $typ:ty = $val:expr) => {
-        $(#[$meta])*
-        pub fn $name(self, v: impl Into<$typ>) -> Self {
-            self.set($type_name, v.into())
-        }
-    };
-
-    (expr_decl: $(#[$meta:meta])* $type_name:ident $name:ident { $($flags:ident),* } : $typ:ty [$inner:ty] = $val:expr) => {
-        define_builtin_props!(@opt_check_nocb_expr $(#[$meta])* $type_name $name [$($flags)*]: $inner);
-    };
-    (expr_decl: $(#[$meta:meta])* $type_name:ident $name:ident : $typ:ty [$inner:ty] = $val:expr) => {
-        $(#[$meta])*
-        pub fn $name<T>(self, v: $crate::style::ContextValue<T>) -> Self
-        where
-            T: Into<$inner> + 'static,
-        {
-            self.set($type_name, v.map(|x| Some(x.into())))
-        }
-    };
-    (expr_decl: $(#[$meta:meta])* $type_name:ident $name:ident { $($flags:ident),* } : $typ:ty = $val:expr) => {
-        define_builtin_props!(@check_nocb_expr $(#[$meta])* $type_name $name [$($flags)*]: $typ);
-    };
-    (expr_decl: $(#[$meta:meta])* $type_name:ident $name:ident : $typ:ty = $val:expr) => {
-        $(#[$meta])*
-        pub fn $name<T>(self, v: $crate::style::ContextValue<T>) -> Self
-        where
-            T: Into<$typ> + 'static,
-        {
-            self.set($type_name, v.map(Into::into))
-        }
-    };
-
-    (@opt_check_nocb $(#[$meta:meta])* $type_name:ident $name:ident [nocb $($rest:ident)*]: $inner:ty) => {};
-    (@opt_check_nocb $(#[$meta:meta])* $type_name:ident $name:ident [$first:ident $($rest:ident)*]: $inner:ty) => {
-        define_builtin_props!(@opt_check_nocb $(#[$meta])* $type_name $name [$($rest)*]: $inner);
-    };
-    (@opt_check_nocb $(#[$meta:meta])* $type_name:ident $name:ident []: $inner:ty) => {
-        $(#[$meta])*
-        pub fn $name(self, v: impl Into<$inner>) -> Self {
-            self.set($type_name, Some(v.into()))
-        }
-    };
-
-    (@opt_check_nocb_expr $(#[$meta:meta])* $type_name:ident $name:ident [nocb $($rest:ident)*]: $inner:ty) => {};
-    (@opt_check_nocb_expr $(#[$meta:meta])* $type_name:ident $name:ident [$first:ident $($rest:ident)*]: $inner:ty) => {
-        define_builtin_props!(@opt_check_nocb_expr $(#[$meta])* $type_name $name [$($rest)*]: $inner);
-    };
-    (@opt_check_nocb_expr $(#[$meta:meta])* $type_name:ident $name:ident []: $inner:ty) => {
-        $(#[$meta])*
-        pub fn $name<T>(self, v: $crate::style::ContextValue<T>) -> Self
-        where
-            T: Into<$inner> + 'static,
-        {
-            self.set($type_name, v.map(|x| Some(x.into())))
-        }
-    };
-
-    // -------------------------------------------------------------------------
-    // @check_nocb — plain (non-Option) setter, respects nocb flag
-    // -------------------------------------------------------------------------
-
-    (@check_nocb $(#[$meta:meta])* $type_name:ident $name:ident [nocb $($rest:ident)*]: $typ:ty) => {};
-    (@check_nocb $(#[$meta:meta])* $type_name:ident $name:ident [$first:ident $($rest:ident)*]: $typ:ty) => {
-        define_builtin_props!(@check_nocb $(#[$meta])* $type_name $name [$($rest)*]: $typ);
-    };
-    (@check_nocb $(#[$meta:meta])* $type_name:ident $name:ident []: $typ:ty) => {
-        $(#[$meta])*
-        pub fn $name(self, v: impl Into<$typ>) -> Self {
-            self.set($type_name, v.into())
-        }
-    };
-
-    (@check_nocb_expr $(#[$meta:meta])* $type_name:ident $name:ident [nocb $($rest:ident)*]: $typ:ty) => {};
-    (@check_nocb_expr $(#[$meta:meta])* $type_name:ident $name:ident [$first:ident $($rest:ident)*]: $typ:ty) => {
-        define_builtin_props!(@check_nocb_expr $(#[$meta])* $type_name $name [$($rest)*]: $typ);
-    };
-    (@check_nocb_expr $(#[$meta:meta])* $type_name:ident $name:ident []: $typ:ty) => {
-        $(#[$meta])*
-        pub fn $name<T>(self, v: $crate::style::ContextValue<T>) -> Self
-        where
-            T: Into<$typ> + 'static,
-        {
-            self.set($type_name, v.map(Into::into))
-        }
-    };
-
-    // -------------------------------------------------------------------------
-    // unset — generated for all properties
-    // -------------------------------------------------------------------------
-
-    (unset: $(#[$meta:meta])* $type_name:ident $name:ident) => {
-        paste::paste! {
-            #[doc = "Unsets the `" $name "` property."]
-            pub fn [<unset_ $name>](self) -> Self {
-                self.set_style_value($type_name, $crate::style::StyleValue::Unset)
-            }
-        }
-    };
-
-    (expr_unset: $(#[$meta:meta])* $type_name:ident $name:ident) => {
-        paste::paste! {
-            #[doc = "Unsets the `" $name "` property."]
-            pub fn [<unset_ $name>](self) -> Self {
-                self.set($type_name, $crate::style::StyleValue::Unset)
-            }
-        }
-    };
-
-    // -------------------------------------------------------------------------
-    // transition — generated when `tr` flag is present
-    // -------------------------------------------------------------------------
-
-    // With flags — check for tr
-    (transition: $(#[$meta:meta])* $type_name:ident $name:ident { $($flags:ident),* }) => {
-        define_builtin_props!(@check_tr $(#[$meta])* $type_name $name [$($flags)*]);
-    };
-    // Without flags — never generate
-    (transition: $(#[$meta:meta])* $type_name:ident $name:ident) => {};
-
-    (@check_tr $(#[$meta:meta])* $type_name:ident $name:ident [tr $($rest:ident)*]) => {
-        paste::paste! {
-            #[doc = "Sets a transition for the `" $name "` property."]
-            $(#[$meta])*
-            pub fn [<transition_ $name>](self, transition: impl Into<Transition>) -> Self {
-                self.transition($type_name, transition.into())
-            }
-        }
-    };
-    (@check_tr $(#[$meta:meta])* $type_name:ident $name:ident [$first:ident $($rest:ident)*]) => {
-        define_builtin_props!(@check_tr $(#[$meta])* $type_name $name [$($rest)*]);
-    };
-    (@check_tr $(#[$meta:meta])* $type_name:ident $name:ident []) => {};
-}
-
-pub struct BuiltinStyle<'a> {
-    style: &'a Style,
-}
-
-define_builtin_props!(
-    /// Controls the display type of the view.
-    ///
-    /// This determines how the view participates in layout.
-    DisplayProp display {}: Display {} = Display::Flex,
-
-    /// Sets the positioning scheme for the view.
-    ///
-    /// This affects how the view is positioned relative to its normal position in the document flow.
-    PositionProp position {}: Position {} = Position::Relative,
-
-    /// Enables fixed positioning relative to the viewport.
-    ///
-    /// When true, the view is positioned relative to the window viewport rather than
-    /// its parent. This is similar to CSS `position: fixed`. The view will:
-    /// - Use `inset` properties relative to the viewport
-    /// - Have percentage sizes relative to the viewport
-    /// - Be painted above all other content (like overlays)
-    ///
-    /// Note: This works in conjunction with `position: absolute` internally.
-    IsFixed is_fixed {}: bool {} = false,
-
-    /// Sets the width of the view.
-    ///
-    /// Can be specified in pixels, percentages, or auto.
-    Width width {tr}: LengthAuto {} = LengthAuto::Auto,
-
-    /// Sets the height of the view.
-    ///
-    /// Can be specified in pixels, percentages, or auto.
-    Height height {tr}: LengthAuto {} = LengthAuto::Auto,
-
-    /// Sets the minimum width of the view.
-    ///
-    /// The view will not shrink below this width.
-    MinWidth min_width {tr}: LengthAuto {} = LengthAuto::Auto,
-
-    /// Sets the minimum height of the view.
-    ///
-    /// The view will not shrink below this height.
-    MinHeight min_height {tr}: LengthAuto {} = LengthAuto::Auto,
-
-    /// Sets the maximum width of the view.
-    ///
-    /// The view will not grow beyond this width.
-    MaxWidth max_width {tr}: LengthAuto {} = LengthAuto::Auto,
-
-    /// Sets the maximum height of the view.
-    ///
-    /// The view will not grow beyond this height.
-    MaxHeight max_height {tr}: LengthAuto {} = LengthAuto::Auto,
-
-    /// Sets the direction of the main axis for flex items.
-    ///
-    /// Determines whether flex items are laid out in rows or columns.
-    FlexDirectionProp flex_direction {}: FlexDirection {} = FlexDirection::Row,
-
-    /// Controls whether flex items wrap to new lines.
-    ///
-    /// When enabled, items that don't fit will wrap to the next line.
-    FlexWrapProp flex_wrap {}: FlexWrap {} = FlexWrap::NoWrap,
-
-    /// Sets the flex grow factor for the flex item.
-    ///
-    /// Determines how much the item should grow relative to other items.
-    FlexGrow flex_grow {}: f32 {} = 0.0,
-
-    /// Sets the flex shrink factor for the flex item.
-    ///
-    /// Determines how much the item should shrink relative to other items.
-    FlexShrink flex_shrink {}: f32 {} = 1.0,
-
-    /// Sets the initial main size of a flex item.
-    ///
-    /// This is the size of the item before free space is distributed.
-    FlexBasis flex_basis {tr}: LengthAuto {} = LengthAuto::Auto,
-
-    /// Controls alignment of flex items along the main axis.
-    ///
-    /// Determines how extra space is distributed between and around items.
-    JustifyContentProp justify_content {}: Option<JustifyContent> [JustifyContent] {} = None,
-
-    /// Controls default alignment of grid items along the inline axis.
-    ///
-    /// Sets the default justify-self value for all items in the container.
-    JustifyItemsProp justify_items {}: Option<JustifyItems> [JustifyItems] {} = None,
-
-    /// Controls how the total width and height are calculated.
-    ///
-    /// Determines whether borders and padding are included in the view's size.
-    BoxSizingProp box_sizing {}: Option<BoxSizing> [BoxSizing] {} = None,
-
-    /// Controls individual alignment along the inline axis.
-    ///
-    /// Overrides the container's justify-items value for this specific item.
-    JustifySelf justify_self {}: Option<AlignItems> [AlignItems] {} = None,
-
-    /// Controls alignment of flex items along the cross axis.
-    ///
-    /// Determines how items are aligned when they don't fill the container's cross axis.
-    AlignItemsProp align_items {}: Option<AlignItems> [AlignItems] {} = None,
-
-    /// Controls alignment of wrapped flex lines.
-    ///
-    /// Only has an effect when flex-wrap is enabled and there are multiple lines.
-    AlignContentProp align_content {}: Option<AlignContent> [AlignContent] {} = None,
-
-    /// Defines the line names and track sizing functions of the grid rows.
-    ///
-    /// Specifies the size and names of the rows in a grid layout.
-    GridTemplateRows grid_template_rows {}: Vec<GridTemplateComponent<String>> {} = Vec::new(),
-
-    /// Defines the line names and track sizing functions of the grid columns.
-    ///
-    /// Specifies the size and names of the columns in a grid layout.
-    GridTemplateColumns grid_template_columns {}: Vec<GridTemplateComponent<String>> {} = Vec::new(),
-
-    /// Specifies the size of implicitly-created grid rows.
-    ///
-    /// Sets the default size for rows that are created automatically.
-    GridAutoRows grid_auto_rows {}: Vec<MinMax<MinTrackSizingFunction, MaxTrackSizingFunction>> {} = Vec::new(),
-
-    /// Specifies the size of implicitly-created grid columns.
-    ///
-    /// Sets the default size for columns that are created automatically.
-    GridAutoColumns grid_auto_columns {}: Vec<MinMax<MinTrackSizingFunction, MaxTrackSizingFunction>> {} = Vec::new(),
-
-    /// Controls how auto-placed items get flowed into the grid.
-    ///
-    /// Determines the direction that grid items are placed when not explicitly positioned.
-    GridAutoFlow grid_auto_flow {}: taffy::GridAutoFlow {} = taffy::GridAutoFlow::Row,
-
-    /// Specifies a grid item's location within the grid row.
-    ///
-    /// Determines which grid rows the item spans.
-    GridRow grid_row {}: Line<GridPlacement> {} = Line::default(),
-
-    /// Specifies a grid item's location within the grid column.
-    ///
-    /// Determines which grid columns the item spans.
-    GridColumn grid_column {}: Line<GridPlacement> {} = Line::default(),
-
-    /// Controls individual alignment along the cross axis.
-    ///
-    /// Overrides the container's align-items value for this specific item.
-    AlignSelf align_self {}: Option<AlignItems> [AlignItems] {} = None,
-
-    /// Sets the color of the view's outline.
-    ///
-    /// The outline is drawn outside the border and doesn't affect layout.
-    OutlineColor outline_color {tr}: Brush {} = Brush::Solid(palette::css::TRANSPARENT),
-
-    /// Sets the outline stroke properties.
-    ///
-    /// Defines the width, style, and other properties of the outline.
-    Outline outline {nocb, tr}: Stroke {} = Stroke::new(0.),
-
-    /// Controls the progress/completion of the outline animation.
-    ///
-    /// Useful for creating animated outline effects.
-    OutlineProgress outline_progress {tr}: Pct {} = Pct(100.),
-
-    /// Controls the progress/completion of the border animation.
-    ///
-    /// Useful for creating animated border effects.
-    BorderProgress border_progress {tr}: Pct {} = Pct(100.),
-
-    /// Sets the left border.
-    BorderLeft border_left {nocb, tr}: Stroke {} = Stroke::new(0.),
-    /// Sets the top border.
-    BorderTop border_top {nocb, tr}: Stroke {} = Stroke::new(0.),
-    /// Sets the right border.
-    BorderRight border_right {nocb, tr}: Stroke {} = Stroke::new(0.),
-    /// Sets the bottom border.
-    BorderBottom border_bottom {nocb, tr}: Stroke {} = Stroke::new(0.),
-
-    /// Sets the left border color.
-    BorderLeftColor border_left_color { tr }: Option<Brush> [Brush] {} = None,
-    /// Sets the top border color.
-    BorderTopColor border_top_color {  tr }: Option<Brush> [Brush] {} = None,
-    /// Sets the right border color.
-    BorderRightColor border_right_color { tr }: Option<Brush> [Brush] {} = None,
-    /// Sets the bottom border color.
-    BorderBottomColor border_bottom_color { tr }: Option<Brush> [Brush] {} = None,
-
-    /// Sets the top-left border radius.
-    BorderTopLeftRadius border_top_left_radius { tr }: Length {} = Length::Pt(0.),
-    /// Sets the top-right border radius.
-    BorderTopRightRadius border_top_right_radius { tr }: Length {} = Length::Pt(0.),
-    /// Sets the bottom-left border radius.
-    BorderBottomLeftRadius border_bottom_left_radius { tr }: Length {} = Length::Pt(0.),
-    /// Sets the bottom-right border radius.
-    BorderBottomRightRadius border_bottom_right_radius { tr }: Length {} = Length::Pt(0.),
-
-    /// Sets the left padding.
-    PaddingLeft padding_left { tr }: Length {} = Length::Pt(0.),
-    /// Sets the top padding.
-    PaddingTop padding_top { tr }: Length {} = Length::Pt(0.),
-    /// Sets the right padding.
-    PaddingRight padding_right { tr }: Length {} = Length::Pt(0.),
-    /// Sets the bottom padding.
-    PaddingBottom padding_bottom { tr }: Length {} = Length::Pt(0.),
-
-    /// Sets the left margin.
-    MarginLeft margin_left { tr }: LengthAuto {} = LengthAuto::Pt(0.),
-    /// Sets the top margin.
-    MarginTop margin_top { tr }: LengthAuto {} = LengthAuto::Pt(0.),
-    /// Sets the right margin.
-    MarginRight margin_right { tr }: LengthAuto {} = LengthAuto::Pt(0.),
-    /// Sets the bottom margin.
-    MarginBottom margin_bottom { tr }: LengthAuto {} = LengthAuto::Pt(0.),
-
-    /// Sets the left offset for positioned views.
-    InsetLeft inset_left {tr}: LengthAuto {} = LengthAuto::Auto,
-
-    /// Sets the top offset for positioned views.
-    InsetTop inset_top {tr}: LengthAuto {} = LengthAuto::Auto,
-
-    /// Sets the right offset for positioned views.
-    InsetRight inset_right {tr}: LengthAuto {} = LengthAuto::Auto,
-
-    /// Sets the bottom offset for positioned views.
-    InsetBottom inset_bottom {tr}: LengthAuto {} = LengthAuto::Auto,
-
-    /// Controls whether the view can be the target of mouse events.
-    ///
-    /// When disabled, mouse events pass through to views behind.
-    PointerEventsProp pointer_events {}: Option<PointerEvents> [PointerEvents] { inherited } = None,
-
-    /// Controls the stack order of positioned views.
-    ///
-    /// This is not a global z-index and will only be used as an override to the sorted order of sibling elements.
-    /// If you want a view positioned above others, use an overlay.
-    ///
-    /// Higher values appear in front of lower values.
-    ZIndex z_index {  tr }: Option<i32> [i32] {} = None,
-
-    /// Sets the cursor style when hovering over the view.
-    ///
-    /// Changes the appearance of the mouse cursor.
-    Cursor cursor { }: Option<CursorStyle> [CursorStyle] {} = None,
-
-    /// Sets the text color.
-    ///
-    /// This property is inherited by child views.
-    TextColor color { tr }: Option<Color> [Color] { inherited } = None,
-
-    /// Sets the background color or image.
-    ///
-    /// Can be a solid color, gradient, or image.
-    Background background { tr }: Option<Brush> [Brush] {} = None,
-
-    /// Sets the foreground color or pattern.
-    ///
-    /// Used for drawing content like icons or shapes.
-    Foreground foreground { tr }: Option<Brush> [Brush] {} = None,
-
-    /// Adds one or more drop shadows to the view.
-    ///
-    /// Can create depth and visual separation effects.
-    BoxShadowProp box_shadow {  tr }: SmallVec<[BoxShadow; 3]> {} = SmallVec::new(),
-
-    /// Sets the font size for text content.
-    ///
-    /// This property is inherited by child views.
-    FontSize font_size { nocb, tr }: f64 { inherited } = 14.,
-
-    /// Sets the font family for text content.
-    ///
-    /// This property is inherited by child views.
-    FontFamily font_family { }: Option<String> [String] { inherited } = None,
-
-    /// Sets the font weight (boldness) for text content.
-    ///
-    /// This property is inherited by child views.
-    FontWeight font_weight { }: Option<FontWeightProp> [FontWeightProp] { inherited } = None,
-
-    /// Sets the font style (italic, normal) for text content.
-    ///
-    /// This property is inherited by child views.
-    FontStyle font_style { }: Option<crate::text::FontStyle> [crate::text::FontStyle] { inherited } = None,
-
-    /// Sets the color of the text cursor.
-    ///
-    /// Visible when text input views have focus.
-    CursorColor cursor_color { tr }: Brush {} = Brush::Solid(palette::css::BLACK.with_alpha(0.3)),
-
-    /// Sets the corner radius of text selections.
-    ///
-    /// Controls how rounded the corners of selected text appear.
-    SelectionCornerRadius selection_corer_radius { nocb, tr }: f64 {} = 1.,
-
-    /// Controls whether the view's text can be selected.
-    ///
-    /// This property is inherited by child views.
-    // TODO: rename this TextSelectable
-    Selectable selectable {}: bool { inherited } = true,
-
-    /// Controls how overflowed text content is handled.
-    ///
-    /// Determines whether text wraps or gets clipped.
-    TextOverflowProp text_overflow {}: TextOverflow { inherited } = TextOverflow::NoWrap(NoWrapOverflow::Clip),
-
-    /// Sets text alignment within the view.
-    ///
-    /// Controls horizontal alignment of text content.
-    TextAlignProp text_align {}: Option<crate::text::Alignment> [crate::text::Alignment] {} = None,
-
-    /// Sets the line height for text content.
-    ///
-    /// This property is inherited by child views.
-    LineHeight line_height { tr }: LineHeightValue { inherited } = LineHeightValue::Normal(1.),
-
-    /// Sets the preferred aspect ratio for the view.
-    ///
-    /// Maintains width-to-height proportions during layout.
-    AspectRatio aspect_ratio {tr}: Option<f32> [f32] {} = None,
-
-    /// Controls how replaced content (like images) should be resized to fit its container.
-    ///
-    /// This property specifies how an image or other replaced element should be resized
-    /// to fit within its container while potentially preserving its aspect ratio.
-    /// Corresponds to the CSS `object-fit` property.
-    ObjectFitProp object_fit {}: ObjectFit {} = ObjectFit::Fill,
-
-    /// Controls where replaced content is anchored inside its content box.
-    ///
-    /// This property affects paint-time placement for images and other replaced content.
-    /// Corresponds to common CSS `object-position` keyword combinations.
-    ObjectPositionProp object_position {}: ObjectPosition {} = ObjectPosition::Center,
-
-    /// Sets the gap between columns in grid or flex layouts.
-    ///
-    /// Creates space between items in the horizontal direction.
-    ColGap col_gap { tr }: Length {} = Length::Pt(0.),
-
-    /// Sets the gap between rows in grid or flex layouts.
-    ///
-    /// Creates space between items in the vertical direction.
-    RowGap row_gap { tr }: Length {} = Length::Pt(0.),
-
-    /// Width of the scrollbar track in pixels.
-    ///
-    /// This property reserves space for scrollbars when `overflow_x` or `overflow_y` is set to `Scroll`.
-    /// The reserved space reduces the available content area but ensures content doesn't flow under the scrollbar.
-    ///
-    /// **Layout behavior:**
-    /// - When `overflow_y: Scroll`, reserves `scrollbar_width` from the right side of the container
-    /// - When `overflow_x: Scroll`, reserves `scrollbar_width` from the bottom of the container
-    /// - Space is reserved inside the container's bounds, reducing the content rect size
-    /// - No space is reserved for `overflow: Hidden`, `Visible`, or `Clip`
-    ///
-    /// **Example:**
-    /// ```rust,ignore
-    /// // Reserve 10px for scrollbar
-    /// .scrollbar_width(10.0)
-    ///
-    /// // Thinner scrollbar for compact UI
-    /// .scrollbar_width(6.0)
-    /// ```
-    ///
-    /// **Default:** `8px`
-    ScrollbarWidth scrollbar_width {tr}: Pt {} = Pt(8.),
-
-    /// How children overflowing their container in X axis should affect layout
-    OverflowX overflow_x {}: Overflow {} = Overflow::default(),
-
-    /// How children overflowing their container in Y axis should affect layout
-    OverflowY overflow_y {}: Overflow {} = Overflow::default(),
-
-    /// Sets the horizontal scale transform.
-    ///
-    /// Values less than 100% shrink the view, greater than 100% enlarge it.
-    /// Scale is applied last in the transform sequence, after translation and rotation.
-    /// The scaling occurs around the anchor point specified by `scale_about`.
-    /// Transform order: translate → rotate → scale (matches CSS individual transform properties).
-    ScaleX scale_x {tr}: Pct {} = Pct(100.),
-
-    /// Sets the vertical scale transform.
-    ///
-    /// Values less than 100% shrink the view, greater than 100% enlarge it.
-    /// Scale is applied last in the transform sequence, after translation and rotation.
-    /// The scaling occurs around the anchor point specified by `scale_about`.
-    /// Transform order: translate → rotate → scale (matches CSS individual transform properties).
-    ScaleY scale_y {tr}: Pct {} = Pct(100.),
-
-    /// Sets the horizontal translation transform.
-    ///
-    /// Moves the view left (negative) or right (positive).
-    /// Translation is applied first in the transform sequence, in the element's local coordinate space.
-    /// This matches CSS individual transform properties behavior.
-    /// Transform order: translate → rotate → scale.
-    TranslateX translate_x {tr}: Length {} = Length::Pt(0.),
-
-    /// Sets the vertical translation transform.
-    ///
-    /// Moves the view up (negative) or down (positive).
-    /// Translation is applied first in the transform sequence, in the element's local coordinate space.
-    /// This matches CSS individual transform properties behavior.
-    /// Transform order: translate → rotate → scale.
-    TranslateY translate_y {tr}: Length {} = Length::Pt(0.),
-
-    /// Sets the rotation transform angle.
-    ///
-    /// Positive values rotate clockwise, negative values rotate counter-clockwise.
-    /// Use `.deg()` or `.rad()` methods to specify the angle unit.
-    /// Rotation is applied after translation but before scaling, around the anchor point
-    /// specified by `rotate_about`.
-    /// Transform order: translate → rotate → scale (matches CSS individual transform properties).
-    Rotation rotate {tr}: Angle {} = Angle::Rad(0.0),
-
-    /// Sets the anchor point for rotation transformations.
-    ///
-    /// Determines the point around which the view rotates. Use predefined constants
-    /// like `AnchorAbout::CENTER` or create custom anchor points with pixel or percentage values.
-    /// The anchor point is specified in the element's local coordinate space (before any transforms).
-    RotateAbout rotate_about {}: AnchorAbout {} = AnchorAbout::CENTER,
-
-    /// Sets the anchor point for scaling transformations.
-    ///
-    /// Determines the point around which the view scales. Use predefined constants
-    /// like `AnchorAbout::CENTER` or create custom anchor points with pixel or percentage values.
-    /// The anchor point is specified in the element's local coordinate space (before any transforms).
-    /// Transform order: translate → rotate → scale (matches CSS individual transform properties).
-    ScaleAbout scale_about {tr}: AnchorAbout {} = AnchorAbout::CENTER,
-
-    /// Sets a custom affine transformation matrix.
-    ///
-    /// This property allows you to specify an arbitrary 2D affine transformation that will be
-    /// applied in addition to the individual transform properties (translate_x, translate_y,
-    /// scale_x, scale_y, rotate).
-    ///
-    /// **Transform application order:**
-    /// 1. Individual `translate_x` and `translate_y` properties
-    /// 2. Individual `rotate` property
-    /// 3. Individual `scale_x` and `scale_y` properties
-    /// 4. **This `transform` property (applied last)**
-    ///
-    /// This matches CSS behavior where individual transform properties are applied before
-    /// the `transform` property. The `transform` matrix is applied in the final coordinate
-    /// space after all individual transforms.
-    ///
-    /// **Example:**
-    /// ```rust
-    /// # use floem::peniko::kurbo::Affine;
-    /// # use floem::style::Style;
-    /// let _style = Style::new()
-    ///     .translate_x(10.0) // Applied first
-    ///     .scale(1.5) // Applied second
-    ///     .transform(Affine::rotate(0.5)); // Applied last
-    /// ```
-    Transform transform {tr}: Affine {} = Affine::IDENTITY,
-
-    /// Sets the opacity of the view.
-    ///
-    /// Values range from 0.0 (fully transparent) to 1.0 (fully opaque).
-    /// This affects the entire view including its children.
-    Opacity opacity {tr}: f32 {} = 1.0,
-
-    /// Sets the selected state of the view.
-    ///
-    /// This property is inherited by child views.
-    Selected set_selected {}: bool { inherited } = false,
-
-    /// Controls the disabled state of the view.
-    ///
-    /// This property is inherited by child views.
-    Disabled set_disabled {}: bool { inherited } = false,
-
-    /// Controls whether the view can receive focus during navigation such as tab or arrow navigation.
-    Focusable set_focus {}: Focus { } = Focus::None,
-);
-
-prop_extractor! {
-    pub FontProps {
-        pub size: FontSize,
-        pub family: FontFamily,
-        pub weight: FontWeight,
-        pub style: FontStyle,
-    }
-}
-
-prop_extractor! {
-    pub(crate) LayoutProps {
-        // display is used here to just to properly trigger transitions on layout change. it is not transitioned here
-        pub border_left: BorderLeft,
-        pub border_top: BorderTop,
-        pub border_right: BorderRight,
-        pub border_bottom: BorderBottom,
-
-        pub padding_left: PaddingLeft,
-        pub padding_top: PaddingTop,
-        pub padding_right: PaddingRight,
-        pub padding_bottom: PaddingBottom,
-
-        pub margin_left: MarginLeft,
-        pub margin_top: MarginTop,
-        pub margin_right: MarginRight,
-        pub margin_bottom: MarginBottom,
-
-        pub width: Width,
-        pub height: Height,
-
-        pub min_width: MinWidth,
-        pub min_height: MinHeight,
-
-        pub max_width: MaxWidth,
-        pub max_height: MaxHeight,
-
-        pub flex_grow: FlexGrow,
-        pub flex_shrink: FlexShrink,
-        pub flex_basis: FlexBasis ,
-
-        pub inset_left: InsetLeft,
-        pub inset_top: InsetTop,
-        pub inset_right: InsetRight,
-        pub inset_bottom: InsetBottom,
-
-        pub row_gap: RowGap,
-        pub col_gap: ColGap,
-
-        // these are part of layout props because of em/lh units
-        pub font_size: FontSize,
-        pub line_height: LineHeight,
-    }
-}
-
-prop_extractor! {
-    /// These are properties that when changed the box tree needs committed.
-    pub TransformProps {
-        pub scale_x: ScaleX,
-        pub scale_y: ScaleY,
-
-        pub translate_x: TranslateX,
-        pub translate_y: TranslateY,
-
-        pub rotation: Rotation,
-        pub rotate_about: RotateAbout,
-        pub scale_about: ScaleAbout,
-
-        pub transform: Transform,
-
-        pub overflow_x: OverflowX,
-        pub overflow_y: OverflowY,
-        pub border_top_left_radius: BorderTopLeftRadius,
-        pub border_top_right_radius: BorderTopRightRadius,
-        pub border_bottom_left_radius: BorderBottomLeftRadius,
-        pub border_bottom_right_radius: BorderBottomRightRadius,
-    }
-}
-impl TransformProps {
-    pub fn border_radius(&self) -> BorderRadius {
-        BorderRadius {
-            top_left: Some(self.border_top_left_radius()),
-            top_right: Some(self.border_top_right_radius()),
-            bottom_left: Some(self.border_bottom_left_radius()),
-            bottom_right: Some(self.border_bottom_right_radius()),
-        }
-    }
-
-    pub fn affine(&self, size: kurbo::Size, resolve_cx: &FontSizeCx) -> Affine {
-        let mut result = Affine::IDENTITY;
-        // CANONICAL ORDER (matches CSS individual properties):
-        // 1. translate → 2. rotate → 3. scale → 4. transform property
-
-        // 1. Translate
-        let transform_x = self.translate_x().resolve(size.width, resolve_cx);
-        let transform_y = self.translate_y().resolve(size.height, resolve_cx);
-        result *= Affine::translate(Vec2 {
-            x: transform_x,
-            y: transform_y,
-        });
-
-        // 2. Rotate (around rotate_about anchor)
-        let rotation = self.rotation().to_radians();
-        if rotation != 0.0 {
-            let rotate_about = self.rotate_about();
-            let (rotate_x_frac, rotate_y_frac) = rotate_about.as_fractions();
-            let rotate_point = Vec2 {
-                x: rotate_x_frac * size.width,
-                y: rotate_y_frac * size.height,
-            };
-            result *= Affine::translate(rotate_point)
-                * Affine::rotate(rotation)
-                * Affine::translate(-rotate_point);
-        }
-
-        // 3. Scale (around scale_about anchor)
-        let scale_x = self.scale_x().0 / 100.;
-        let scale_y = self.scale_y().0 / 100.;
-        if scale_x != 1.0 || scale_y != 1.0 {
-            let scale_about = self.scale_about();
-            let (scale_x_frac, scale_y_frac) = scale_about.as_fractions();
-            let scale_point = Vec2 {
-                x: scale_x_frac * size.width,
-                y: scale_y_frac * size.height,
-            };
-            result *= Affine::translate(scale_point)
-                * Affine::scale_non_uniform(scale_x, scale_y)
-                * Affine::translate(-scale_point);
-        }
-
-        // 4. Apply custom transform property last
-        result *= self.transform();
-        result
-    }
-
-    pub fn clip_rect(
-        &self,
-        mut local_rect: kurbo::Rect,
-        resolve_cx: &FontSizeCx,
-    ) -> Option<RoundedRect> {
-        use Overflow::*;
-
-        let (overflow_x, overflow_y) = (self.overflow_x(), self.overflow_y());
-
-        // No clipping if both are visible
-        if overflow_x == Visible && overflow_y == Visible {
-            return None;
-        }
-
-        let border_radius = self
-            .border_radius()
-            .resolve_border_radii(local_rect.size().min_side(), resolve_cx);
-
-        // Extend to infinity on visible axes
-        if overflow_x == Visible {
-            local_rect.x0 = f64::NEG_INFINITY;
-            local_rect.x1 = f64::INFINITY;
-        }
-        if overflow_y == Visible {
-            local_rect.y0 = f64::NEG_INFINITY;
-            local_rect.y1 = f64::INFINITY;
-        }
-
-        Some(RoundedRect::from_rect(local_rect, border_radius))
-    }
-}
-
-impl LayoutProps {
-    pub fn border(&self) -> Border {
-        Border {
-            left: Some(self.border_left()),
-            top: Some(self.border_top()),
-            right: Some(self.border_right()),
-            bottom: Some(self.border_bottom()),
-        }
-    }
-
-    pub fn font_size_cx(&self) -> FontSizeCx {
-        {
-            let font_size = self.font_size();
-            let line_height = self.line_height();
-            let line_height = line_height.resolve(font_size as f32);
-            FontSizeCx::new(font_size, line_height as f64)
-        }
-    }
-
-    pub fn apply_to_taffy_style(&self, style: &mut TaffyStyle) {
-        let resolve_cx = &self.font_size_cx();
-        style.size = taffy::prelude::Size {
-            width: self.width().to_taffy_dim(resolve_cx),
-            height: self.height().to_taffy_dim(resolve_cx),
-        };
-        style.min_size = taffy::prelude::Size {
-            width: self.min_width().to_taffy_dim(resolve_cx),
-            height: self.min_height().to_taffy_dim(resolve_cx),
-        };
-        style.max_size = taffy::prelude::Size {
-            width: self.max_width().to_taffy_dim(resolve_cx),
-            height: self.max_height().to_taffy_dim(resolve_cx),
-        };
-        style.flex_grow = self.flex_grow();
-        style.flex_shrink = self.flex_shrink();
-        style.flex_basis = self.flex_basis().to_taffy_dim(resolve_cx);
-        style.border = Rect {
-            left: LengthPercentage::length(self.border_left().width as f32),
-            top: LengthPercentage::length(self.border_top().width as f32),
-            right: LengthPercentage::length(self.border_right().width as f32),
-            bottom: LengthPercentage::length(self.border_bottom().width as f32),
-        };
-        style.padding = Rect {
-            left: self.padding_left().to_taffy(resolve_cx),
-            top: self.padding_top().to_taffy(resolve_cx),
-            right: self.padding_right().to_taffy(resolve_cx),
-            bottom: self.padding_bottom().to_taffy(resolve_cx),
-        };
-        style.margin = Rect {
-            left: self.margin_left().to_taffy_len_perc_auto(resolve_cx),
-            top: self.margin_top().to_taffy_len_perc_auto(resolve_cx),
-            right: self.margin_right().to_taffy_len_perc_auto(resolve_cx),
-            bottom: self.margin_bottom().to_taffy_len_perc_auto(resolve_cx),
-        };
-        style.inset = Rect {
-            left: self.inset_left().to_taffy_len_perc_auto(resolve_cx),
-            top: self.inset_top().to_taffy_len_perc_auto(resolve_cx),
-            right: self.inset_right().to_taffy_len_perc_auto(resolve_cx),
-            bottom: self.inset_bottom().to_taffy_len_perc_auto(resolve_cx),
-        };
-        style.gap = Size {
-            width: self.col_gap().to_taffy(resolve_cx),
-            height: self.row_gap().to_taffy(resolve_cx),
-        };
-    }
-}
+pub use floem_style::{FontProps, LayoutProps, TransformProps};
 
 prop_extractor! {
     pub SelectionStyle {
@@ -2434,1274 +215,3 @@ prop_extractor! {
         pub selection_color: SelectionColor,
     }
 }
-
-impl Style {
-    fn deferred_effects(&self) -> impl Iterator<Item = &DeferredStyleEffect> {
-        self.map
-            .get(&DEFERRED_EFFECTS_KEY)
-            .into_iter()
-            .flat_map(|effects| {
-                effects
-                    .downcast_ref::<Vec<DeferredStyleEffect>>()
-                    .into_iter()
-                    .flat_map(|effects| effects.iter())
-            })
-    }
-
-    fn run_deferred_effects(&self) {
-        for effect in self.deferred_effects() {
-            effect.run(self);
-        }
-    }
-
-    fn push_deferred_effect(mut self, effect: DeferredStyleEffect) -> Self {
-        let mut effects = self
-            .map
-            .get(&DEFERRED_EFFECTS_KEY)
-            .and_then(|effects| effects.downcast_ref::<Vec<DeferredStyleEffect>>())
-            .cloned()
-            .unwrap_or_default();
-        effects.push(effect);
-        self.map_mut()
-            .insert(DEFERRED_EFFECTS_KEY, Rc::new(effects));
-        self.merge_id = next_style_merge_id();
-        self
-    }
-
-    /// Gets the value of a style property, returning the default if not set.
-    pub fn get<P: StyleProp>(&self, _prop: P) -> P::Type {
-        self.get_prop_or_default::<P>()
-    }
-
-    /// Gets the raw style value of a property, including unset and base states.
-    pub fn get_style_value<P: StyleProp>(&self, _prop: P) -> StyleValue<P::Type> {
-        self.get_prop_style_value::<P>()
-    }
-
-    /// Sets a style property to a specific value.
-    pub fn set<P: StyleProp>(self, prop: P, value: impl Into<P::Type>) -> Self {
-        self.set_style_value(prop, StyleValue::Val(value.into()))
-    }
-
-    /// Sets a property to a deferred context-derived value.
-    pub fn set_context<P: StyleProp>(self, prop: P, value: ContextValue<P::Type>) -> Self {
-        self.set_style_value(prop, StyleValue::Context(value))
-    }
-
-    /// Register a deferred side effect for a context prop.
-    ///
-    /// Unlike [`ContextRef::def`], this does not produce a property value. The closure is
-    /// guaranteed to run during nested-style resolution after inherited context has been
-    /// attached, even if no property later reads the context value.
-    ///
-    /// Use this for debug-view setup and similar side effects:
-    /// `Style::new().defer::<Theme>(|t| color.set(t.primary()))`.
-    pub fn defer<P: StyleProp>(self, f: impl Fn(P::Type) + 'static) -> Self
-    where
-        P::Type: 'static,
-    {
-        self.push_deferred_effect(ContextRef::<P>::default().into_deferred(f))
-    }
-
-    pub fn set_from_context<C: StyleProp, P: StyleProp>(
-        self,
-        prop: P,
-        context: ContextRef<C>,
-        f: impl Fn(C::Type) -> P::Type + 'static,
-    ) -> Self
-    where
-        C::Type: 'static,
-        P::Type: 'static,
-    {
-        self.set_context(prop, context.def(f))
-    }
-
-    /// Sets a property to a deferred optional context-derived value.
-    ///
-    /// `None` resolves to an unset property, allowing the base/fallback style to win.
-    pub fn set_context_opt<P: StyleProp<Type = Option<T>>, T: 'static>(
-        self,
-        prop: P,
-        value: ContextValue<Option<T>>,
-    ) -> Self {
-        self.set_style_value(prop, StyleValue::Context(value))
-    }
-
-    pub fn set_from_context_opt<C: StyleProp, P: StyleProp<Type = Option<T>>, T: 'static>(
-        self,
-        prop: P,
-        context: ContextRef<C>,
-        f: impl Fn(C::Type) -> Option<T> + 'static,
-    ) -> Self
-    where
-        C::Type: 'static,
-    {
-        self.set_context_opt(prop, context.def(f))
-    }
-
-    pub fn set_style_value<P: StyleProp>(mut self, _prop: P, value: StyleValue<P::Type>) -> Self {
-        let previous_value = self.map.get(&P::key()).cloned();
-        let insert = match value {
-            StyleValue::Val(value) => StyleMapValue::Val(value),
-            StyleValue::Animated(value) => StyleMapValue::Animated(value),
-            StyleValue::Context(value) => {
-                self.has_context_values = true;
-                let previous_value = previous_value.clone();
-                StyleMapValue::Context(ContextValue::new(move |style| {
-                    let mut base_style = style.clone();
-                    base_style.map_mut().remove(&P::key());
-                    // A deferred value for property `P` is allowed to read `P` from context,
-                    // e.g. `FontSize := FontSize * 0.8`. If we resolved against the current
-                    // style as-is, that lookup would see the context expression we are
-                    // installing right now and recurse forever.
-                    //
-                    // Instead, same-prop context reads resolve against the previous effective
-                    // value for `P`: the previous local value if there was one, otherwise the
-                    // inherited fallback carried by `Style`.
-                    if let Some(previous_value) = previous_value.clone() {
-                        let previous_value = match previous_value
-                            .downcast_ref::<StyleMapValue<P::Type>>()
-                            .unwrap()
-                        {
-                            StyleMapValue::Val(value) | StyleMapValue::Animated(value) => {
-                                Some(value.clone())
-                            }
-                            StyleMapValue::Context(context_value) => {
-                                Some(context_value.resolve(&base_style))
-                            }
-                            StyleMapValue::Unset => None,
-                        };
-
-                        if let Some(previous_value) = previous_value {
-                            base_style
-                                .map_mut()
-                                .insert(P::key(), Rc::new(StyleMapValue::Val(previous_value)));
-                        }
-                    }
-                    value.resolve(&base_style)
-                }))
-            }
-            StyleValue::Unset => StyleMapValue::Unset,
-            StyleValue::Base => {
-                if self.map_mut().remove(&P::key()).is_some() {
-                    self.merge_id = next_style_merge_id();
-                }
-                return self;
-            }
-        };
-        // Track inherited props for O(1) early-exit in apply_only_inherited
-        if P::prop_ref().info().inherited {
-            self.has_inherited = true;
-        }
-        self.map_mut().insert(P::key(), Rc::new(insert));
-        self.merge_id = next_style_merge_id();
-        self
-    }
-
-    /// Sets a transition animation for a specific style property.
-    pub fn transition<P: StyleProp>(mut self, _prop: P, transition: Transition) -> Self {
-        self.map_mut()
-            .insert(P::prop_ref().info().transition_key, Rc::new(transition));
-        self.merge_id = next_style_merge_id();
-        self
-    }
-
-    fn selector(mut self, selector: StyleSelector, style: impl FnOnce(Style) -> Style) -> Self {
-        let over = style(Style::default());
-        self.set_selector(selector, over);
-        self
-    }
-
-    pub(crate) fn structural_selector(
-        mut self,
-        selector: StructuralSelector,
-        style: impl FnOnce(Style) -> Style,
-    ) -> Self {
-        let over = style(Style::default());
-        self.set_structural_selector(selector, over);
-        self
-    }
-
-    /// The visual style to apply when the mouse hovers over the view
-    pub fn hover(self, style: impl FnOnce(Style) -> Style) -> Self {
-        self.selector(StyleSelector::Hover, style)
-    }
-
-    /// The visual style to apply when the view has keyboard focus.
-    pub fn focus(self, style: impl FnOnce(Style) -> Style) -> Self {
-        self.selector(StyleSelector::Focus, style)
-    }
-
-    /// Similar to the `:focus-visible` css selector, this style only activates when the view was focused via tab or arrow navigation.
-    pub fn focus_visible(self, style: impl FnOnce(Style) -> Style) -> Self {
-        self.selector(StyleSelector::FocusVisible, style)
-    }
-
-    /// Similar to the `:focus-within` css selector, this style activates when this
-    /// view or any descendant is in the focus path.
-    pub fn focus_within(self, style: impl FnOnce(Style) -> Style) -> Self {
-        self.selector(StyleSelector::FocusWithin, style)
-    }
-
-    /// Similar to the `:first-child` css selector.
-    pub fn first_child(self, style: impl FnOnce(Style) -> Style) -> Self {
-        self.structural_selector(StructuralSelector::FirstChild, style)
-    }
-
-    /// Similar to the `:last-child` css selector.
-    pub fn last_child(self, style: impl FnOnce(Style) -> Style) -> Self {
-        self.structural_selector(StructuralSelector::LastChild, style)
-    }
-
-    /// Similar to the `:nth-child(...)` css selector.
-    pub fn nth_child(self, nth: NthChild, style: impl FnOnce(Style) -> Style) -> Self {
-        self.structural_selector(StructuralSelector::NthChild(nth), style)
-    }
-
-    /// Convenience for `:nth-child(odd)`.
-    pub fn odd(self, style: impl FnOnce(Style) -> Style) -> Self {
-        self.nth_child(NthChild::odd(), style)
-    }
-
-    /// Convenience for `:nth-child(even)`.
-    pub fn even(self, style: impl FnOnce(Style) -> Style) -> Self {
-        self.nth_child(NthChild::even(), style)
-    }
-
-    /// The visual style to apply when the view is in a selected state.
-    pub fn selected(self, style: impl FnOnce(Style) -> Style) -> Self {
-        self.selector(StyleSelector::Selected, style)
-    }
-
-    /// The visual style to apply when the view is being dragged
-    pub fn drag(self, style: impl FnOnce(Style) -> Style) -> Self {
-        self.selector(StyleSelector::Dragging, style)
-    }
-
-    /// The visual style to apply when the view is disabled.
-    pub fn disabled(self, style: impl FnOnce(Style) -> Style) -> Self {
-        self.selector(StyleSelector::Disabled, style)
-    }
-
-    /// The visual style to apply when the application is in dark mode.
-    pub fn dark_mode(self, style: impl FnOnce(Style) -> Style) -> Self {
-        self.selector(StyleSelector::DarkMode, style)
-    }
-
-    /// The visual style to apply when a file is being dragged over the view.
-    pub fn file_hover(self, style: impl FnOnce(Style) -> Style) -> Self {
-        self.selector(StyleSelector::FileHover, style)
-    }
-
-    /// The visual style to apply when the view is being actively pressed.
-    pub fn active(self, style: impl FnOnce(Style) -> Style) -> Self {
-        self.selector(StyleSelector::Active, style)
-    }
-
-    /// Applies styles that activate at specific screen sizes (responsive design).
-    pub fn responsive(mut self, size: ScreenSize, style: impl FnOnce(Style) -> Style) -> Self {
-        let over = style(Style::default());
-        self.set_responsive_selector(ResponsiveSelector::ScreenSize(size), over);
-        self
-    }
-
-    /// Applies styles when window width is at least `min`.
-    pub fn min_window_width(
-        mut self,
-        min: impl Into<Pt>,
-        style: impl FnOnce(Style) -> Style,
-    ) -> Self {
-        let over = style(Style::default());
-        self.set_responsive_selector(ResponsiveSelector::MinWidth(min.into()), over);
-        self
-    }
-
-    /// Applies styles when window width is at most `max`.
-    pub fn max_window_width(
-        mut self,
-        max: impl Into<Pt>,
-        style: impl FnOnce(Style) -> Style,
-    ) -> Self {
-        let over = style(Style::default());
-        self.set_responsive_selector(ResponsiveSelector::MaxWidth(max.into()), over);
-        self
-    }
-
-    /// Applies styles when window width is within `[min, max]` (inclusive).
-    pub fn window_width_range(
-        mut self,
-        min: impl Into<Pt>,
-        max: impl Into<Pt>,
-        style: impl FnOnce(Style) -> Style,
-    ) -> Self {
-        let over = style(Style::default());
-        self.set_responsive_selector(
-            ResponsiveSelector::WidthRange {
-                min: min.into(),
-                max: max.into(),
-            },
-            over,
-        );
-        self
-    }
-
-    /// Applies styles to views with a specific CSS class.
-    pub fn class<C: StyleClass>(mut self, _class: C, style: impl FnOnce(Style) -> Style) -> Self {
-        let over = style(Style::default());
-        self.set_class(C::class_ref(), over);
-        self
-    }
-
-    /// Applies a `CustomStyle` type to the `CustomStyle`'s associated style class.
-    ///
-    /// For example: if the `CustomStyle` you use is `DropdownCustomStyle` then it
-    /// will apply the custom style to that custom style type's associated style class
-    /// which, in this example, is `DropdownClass`.
-    ///
-    /// This is especially useful when building a stylesheet or targeting a child view.
-    ///
-    /// # Examples
-    /// ```
-    /// // In a style sheet or on a parent view
-    /// use floem::prelude::*;
-    /// use floem::style::Style;
-    /// Style::new().custom_style_class(|s: dropdown::DropdownCustomStyle| s.close_on_accept(false));
-    /// // This property is now set on the `DropdownClass` class and will be applied to any dropdowns that are children of this view.
-    /// ```
-    ///
-    /// See also: [`Style::custom`](Self::custom) and [`Style::apply_custom`](Self::apply_custom).
-    pub fn custom_style_class<CS: CustomStyle>(mut self, style: impl FnOnce(CS) -> CS) -> Self {
-        let over = style(CS::default());
-        self.set_class(CS::StyleClass::class_ref(), over.into());
-        self
-    }
-
-    /// Sets the width to 100% of the parent container.
-    pub fn width_full(self) -> Self {
-        self.width_pct(100.0)
-    }
-
-    /// Sets the width as a percentage of the parent container.
-    pub fn width_pct(self, width: f64) -> Self {
-        self.width(width.pct())
-    }
-
-    /// Sets the height to 100% of the parent container.
-    pub fn height_full(self) -> Self {
-        self.height_pct(100.0)
-    }
-
-    /// Sets the height as a percentage of the parent container.
-    pub fn height_pct(self, height: f64) -> Self {
-        self.height(height.pct())
-    }
-
-    /// Makes the view fully keyboard navigable.
-    ///
-    /// The view can receive focus via Tab/Shift+Tab navigation, arrow keys,
-    /// pointer clicks, and programmatic focus calls. This is the recommended
-    /// setting for interactive controls like buttons, inputs, and links.
-    /// Keyboard navigable is a strict superset of focusable.
-    ///
-    /// Equivalent to `focus(Focus::Keyboard)`.
-    pub fn keyboard_navigable(self) -> Self {
-        self.set(Focusable, Focus::Keyboard)
-    }
-
-    /// Makes the view focusable by pointer and programmatically, but excludes it
-    /// from keyboard navigation. For many elements (especially buttons) you should
-    /// probably use [Self::keyboard_navigable].
-    ///
-    /// The view can be clicked to receive focus or focused via `request_focus()`,
-    /// but will not be included in Tab order or arrow key navigation. Useful for
-    /// scroll containers, modal backdrops, or roving tabindex patterns.
-    /// If you need keyboard traversal, use [Self::keyboard_navigable], which
-    /// also enables focusability automatically.
-    ///
-    /// Equivalent to `focus(Focus::PointerAndProgrammatic)`.
-    pub fn focusable(self) -> Self {
-        self.set(Focusable, Focus::PointerAndProgrammatic)
-    }
-
-    /// Sets the font size for text content.
-    pub fn font_size(self, size: impl Into<Pt>) -> Self {
-        let px = size.into();
-        self.set_style_value(FontSize, StyleValue::Val(px.0))
-    }
-
-    /// Makes the view non-focusable through any means.
-    ///
-    /// The view cannot receive focus via keyboard, pointer, or programmatic calls.
-    /// Use this for decorative elements or containers that should never be interactive.
-    ///
-    /// Equivalent to `focus(Focus::None)`.
-    pub fn focus_none(self) -> Self {
-        self.set(Focusable, Focus::None)
-    }
-
-    /// Sets different gaps for rows and columns in grid or flex layouts.
-    pub fn row_col_gap(self, width: impl Into<Length>, height: impl Into<Length>) -> Self {
-        self.col_gap(width).row_gap(height)
-    }
-
-    /// Sets the same gap for both rows and columns in grid or flex layouts.
-    pub fn gap(self, gap: impl Into<Length>) -> Self {
-        let gap = gap.into();
-        self.col_gap(gap).row_gap(gap)
-    }
-
-    /// Sets both width and height of the view.
-    pub fn size(self, width: impl Into<LengthAuto>, height: impl Into<LengthAuto>) -> Self {
-        self.width(width).height(height)
-    }
-
-    /// Sets both width and height to 100% of the parent container.
-    pub fn size_full(self) -> Self {
-        self.size_pct(100.0, 100.0)
-    }
-
-    /// Sets both width and height as percentages of the parent container.
-    pub fn size_pct(self, width: f64, height: f64) -> Self {
-        self.width(width.pct()).height(height.pct())
-    }
-
-    /// Sets the minimum width to 100% of the parent container.
-    pub fn min_width_full(self) -> Self {
-        self.min_width_pct(100.0)
-    }
-
-    /// Sets the minimum width as a percentage of the parent container.
-    pub fn min_width_pct(self, min_width: f64) -> Self {
-        self.min_width(min_width.pct())
-    }
-
-    /// Sets the minimum height to 100% of the parent container.
-    pub fn min_height_full(self) -> Self {
-        self.min_height_pct(100.0)
-    }
-
-    /// Sets the minimum height as a percentage of the parent container.
-    pub fn min_height_pct(self, min_height: f64) -> Self {
-        self.min_height(min_height.pct())
-    }
-
-    /// Sets both minimum width and height to 100% of the parent container.
-    pub fn min_size_full(self) -> Self {
-        self.min_size_pct(100.0, 100.0)
-    }
-
-    /// Sets both minimum width and height of the view.
-    pub fn min_size(
-        self,
-        min_width: impl Into<LengthAuto>,
-        min_height: impl Into<LengthAuto>,
-    ) -> Self {
-        self.min_width(min_width).min_height(min_height)
-    }
-
-    /// Sets both minimum width and height as percentages of the parent container.
-    pub fn min_size_pct(self, min_width: f64, min_height: f64) -> Self {
-        self.min_size(min_width.pct(), min_height.pct())
-    }
-
-    /// Sets the maximum width to 100% of the parent container.
-    pub fn max_width_full(self) -> Self {
-        self.max_width_pct(100.0)
-    }
-
-    /// Sets the maximum width as a percentage of the parent container.
-    pub fn max_width_pct(self, max_width: f64) -> Self {
-        self.max_width(max_width.pct())
-    }
-
-    /// Sets the maximum height to 100% of the parent container.
-    pub fn max_height_full(self) -> Self {
-        self.max_height_pct(100.0)
-    }
-
-    /// Sets the maximum height as a percentage of the parent container.
-    pub fn max_height_pct(self, max_height: f64) -> Self {
-        self.max_height(max_height.pct())
-    }
-
-    /// Sets both maximum width and height of the view.
-    pub fn max_size(
-        self,
-        max_width: impl Into<LengthAuto>,
-        max_height: impl Into<LengthAuto>,
-    ) -> Self {
-        self.max_width(max_width).max_height(max_height)
-    }
-
-    /// Sets both maximum width and height to 100% of the parent container.
-    pub fn max_size_full(self) -> Self {
-        self.max_size_pct(100.0, 100.0)
-    }
-
-    /// Sets both maximum width and height as percentages of the parent container.
-    pub fn max_size_pct(self, max_width: f64, max_height: f64) -> Self {
-        self.max_size(max_width.pct(), max_height.pct())
-    }
-
-    /// Sets the border color for all sides of the view.
-    pub fn border_color(self, color: impl Into<Brush>) -> Self {
-        let color = color.into();
-        self.set(BorderLeftColor, Some(color.clone()))
-            .set(BorderTopColor, Some(color.clone()))
-            .set(BorderRightColor, Some(color.clone()))
-            .set(BorderBottomColor, Some(color))
-    }
-
-    /// Sets the border properties for all sides of the view.
-    pub fn border(self, border: impl Into<StrokeWrap>) -> Self {
-        let border = border.into();
-        self.set(BorderLeft, border.0.clone())
-            .set(BorderTop, border.0.clone())
-            .set(BorderRight, border.0.clone())
-            .set(BorderBottom, border.0)
-    }
-
-    /// Sets the outline properties of the view.
-    pub fn outline(self, outline: impl Into<StrokeWrap>) -> Self {
-        self.set_style_value(Outline, StyleValue::Val(outline.into().0))
-    }
-
-    /// Sets the left border.
-    pub fn border_left(self, border: impl Into<StrokeWrap>) -> Self {
-        self.set(BorderLeft, border.into().0)
-    }
-
-    /// Sets the top border.
-    pub fn border_top(self, border: impl Into<StrokeWrap>) -> Self {
-        self.set(BorderTop, border.into().0)
-    }
-
-    /// Sets the right border.
-    pub fn border_right(self, border: impl Into<StrokeWrap>) -> Self {
-        self.set(BorderRight, border.into().0)
-    }
-
-    /// Sets the bottom border.
-    pub fn border_bottom(self, border: impl Into<StrokeWrap>) -> Self {
-        self.set(BorderBottom, border.into().0)
-    }
-
-    /// Sets `border_left` and `border_right` to `border`
-    pub fn border_horiz(self, border: impl Into<StrokeWrap>) -> Self {
-        let border = border.into();
-        self.set(BorderLeft, border.0.clone())
-            .set(BorderRight, border.0)
-    }
-
-    /// Sets `border_top` and `border_bottom` to `border`
-    pub fn border_vert(self, border: impl Into<StrokeWrap>) -> Self {
-        let border = border.into();
-        self.set(BorderTop, border.0.clone())
-            .set(BorderBottom, border.0)
-    }
-
-    /// Sets the left padding as a percentage of the parent container width.
-    pub fn padding_left_pct(self, padding: f64) -> Self {
-        self.padding_left(padding.pct())
-    }
-
-    /// Sets the right padding as a percentage of the parent container width.
-    pub fn padding_right_pct(self, padding: f64) -> Self {
-        self.padding_right(padding.pct())
-    }
-
-    /// Sets the top padding as a percentage of the parent container width.
-    pub fn padding_top_pct(self, padding: f64) -> Self {
-        self.padding_top(padding.pct())
-    }
-
-    /// Sets the bottom padding as a percentage of the parent container width.
-    pub fn padding_bottom_pct(self, padding: f64) -> Self {
-        self.padding_bottom(padding.pct())
-    }
-
-    /// Set padding on all directions
-    pub fn padding(self, padding: impl Into<Length>) -> Self {
-        let padding = padding.into();
-        self.set(PaddingLeft, padding)
-            .set(PaddingTop, padding)
-            .set(PaddingRight, padding)
-            .set(PaddingBottom, padding)
-    }
-
-    /// Sets padding on all sides as a percentage of the parent container width.
-    pub fn padding_pct(self, padding: f64) -> Self {
-        self.padding(padding.pct())
-    }
-
-    /// Sets `padding_left` and `padding_right` to `padding`
-    pub fn padding_horiz(self, padding: impl Into<Length>) -> Self {
-        let padding = padding.into();
-        self.set(PaddingLeft, padding).set(PaddingRight, padding)
-    }
-
-    /// Sets horizontal padding as a percentage of the parent container width.
-    pub fn padding_horiz_pct(self, padding: f64) -> Self {
-        self.padding_horiz(padding.pct())
-    }
-
-    /// Sets `padding_top` and `padding_bottom` to `padding`
-    pub fn padding_vert(self, padding: impl Into<Length>) -> Self {
-        let padding = padding.into();
-        self.set(PaddingTop, padding).set(PaddingBottom, padding)
-    }
-
-    /// Sets vertical padding as a percentage of the parent container width.
-    pub fn padding_vert_pct(self, padding: f64) -> Self {
-        self.padding_vert(padding.pct())
-    }
-
-    /// Sets the left margin as a percentage of the parent container width.
-    pub fn margin_left_pct(self, margin: f64) -> Self {
-        self.margin_left(margin.pct())
-    }
-
-    /// Sets the right margin as a percentage of the parent container width.
-    pub fn margin_right_pct(self, margin: f64) -> Self {
-        self.margin_right(margin.pct())
-    }
-
-    /// Sets the top margin as a percentage of the parent container width.
-    pub fn margin_top_pct(self, margin: f64) -> Self {
-        self.margin_top(margin.pct())
-    }
-
-    /// Sets the bottom margin as a percentage of the parent container width.
-    pub fn margin_bottom_pct(self, margin: f64) -> Self {
-        self.margin_bottom(margin.pct())
-    }
-
-    /// Sets margin on all sides of the view.
-    pub fn margin(self, margin: impl Into<LengthAuto>) -> Self {
-        let margin = margin.into();
-        self.set(MarginLeft, margin)
-            .set(MarginTop, margin)
-            .set(MarginRight, margin)
-            .set(MarginBottom, margin)
-    }
-
-    /// Sets margin on all sides as a percentage of the parent container width.
-    pub fn margin_pct(self, margin: f64) -> Self {
-        self.margin(margin.pct())
-    }
-
-    /// Sets `margin_left` and `margin_right` to `margin`
-    pub fn margin_horiz(self, margin: impl Into<LengthAuto>) -> Self {
-        let margin = margin.into();
-        self.set(MarginLeft, margin).set(MarginRight, margin)
-    }
-
-    /// Sets horizontal margin as a percentage of the parent container width.
-    pub fn margin_horiz_pct(self, margin: f64) -> Self {
-        self.margin_horiz(margin.pct())
-    }
-
-    /// Sets `margin_top` and `margin_bottom` to `margin`
-    pub fn margin_vert(self, margin: impl Into<LengthAuto>) -> Self {
-        let margin = margin.into();
-        self.set(MarginTop, margin).set(MarginBottom, margin)
-    }
-
-    /// Sets vertical margin as a percentage of the parent container width.
-    pub fn margin_vert_pct(self, margin: f64) -> Self {
-        self.margin_vert(margin.pct())
-    }
-
-    /// Applies a complete padding configuration to the view.
-    pub fn apply_padding(self, padding: Padding) -> Self {
-        let mut style = self;
-        if let Some(left) = padding.left {
-            style = style.set(PaddingLeft, left);
-        }
-        if let Some(top) = padding.top {
-            style = style.set(PaddingTop, top);
-        }
-        if let Some(right) = padding.right {
-            style = style.set(PaddingRight, right);
-        }
-        if let Some(bottom) = padding.bottom {
-            style = style.set(PaddingBottom, bottom);
-        }
-        style
-    }
-    /// Applies a complete margin configuration to the view.
-    pub fn apply_margin(self, margin: Margin) -> Self {
-        let mut style = self;
-        if let Some(left) = margin.left {
-            style = style.set(MarginLeft, left);
-        }
-        if let Some(top) = margin.top {
-            style = style.set(MarginTop, top);
-        }
-        if let Some(right) = margin.right {
-            style = style.set(MarginRight, right);
-        }
-        if let Some(bottom) = margin.bottom {
-            style = style.set(MarginBottom, bottom);
-        }
-        style
-    }
-
-    /// Sets the border radius for all corners of the view.
-    pub fn border_radius(self, radius: impl Into<Length>) -> Self {
-        let radius = radius.into();
-        self.set(BorderTopLeftRadius, radius)
-            .set(BorderTopRightRadius, radius)
-            .set(BorderBottomLeftRadius, radius)
-            .set(BorderBottomRightRadius, radius)
-    }
-
-    /// Applies a complete border configuration to the view.
-    pub fn apply_border(self, border: Border) -> Self {
-        let mut style = self;
-        if let Some(left) = border.left {
-            style = style.set(BorderLeft, left);
-        }
-        if let Some(top) = border.top {
-            style = style.set(BorderTop, top);
-        }
-        if let Some(right) = border.right {
-            style = style.set(BorderRight, right);
-        }
-        if let Some(bottom) = border.bottom {
-            style = style.set(BorderBottom, bottom);
-        }
-        style
-    }
-    /// Applies a complete border color configuration to the view.
-    pub fn apply_border_color(self, border_color: BorderColor) -> Self {
-        let mut style = self;
-        if let Some(left) = border_color.left {
-            style = style.set(BorderLeftColor, Some(left));
-        }
-        if let Some(top) = border_color.top {
-            style = style.set(BorderTopColor, Some(top));
-        }
-        if let Some(right) = border_color.right {
-            style = style.set(BorderRightColor, Some(right));
-        }
-        if let Some(bottom) = border_color.bottom {
-            style = style.set(BorderBottomColor, Some(bottom));
-        }
-        style
-    }
-    /// Applies a complete border radius configuration to the view.
-    pub fn apply_border_radius(self, border_radius: BorderRadius) -> Self {
-        let mut style = self;
-        if let Some(top_left) = border_radius.top_left {
-            style = style.set(BorderTopLeftRadius, top_left);
-        }
-        if let Some(top_right) = border_radius.top_right {
-            style = style.set(BorderTopRightRadius, top_right);
-        }
-        if let Some(bottom_left) = border_radius.bottom_left {
-            style = style.set(BorderBottomLeftRadius, bottom_left);
-        }
-        if let Some(bottom_right) = border_radius.bottom_right {
-            style = style.set(BorderBottomRightRadius, bottom_right);
-        }
-        style
-    }
-
-    /// Sets the left inset as a percentage of the parent container width.
-    pub fn inset_left_pct(self, inset: f64) -> Self {
-        self.inset_left(inset.pct())
-    }
-
-    /// Sets the right inset as a percentage of the parent container width.
-    pub fn inset_right_pct(self, inset: f64) -> Self {
-        self.inset_right(inset.pct())
-    }
-
-    /// Sets the top inset as a percentage of the parent container height.
-    pub fn inset_top_pct(self, inset: f64) -> Self {
-        self.inset_top(inset.pct())
-    }
-
-    /// Sets the bottom inset as a percentage of the parent container height.
-    pub fn inset_bottom_pct(self, inset: f64) -> Self {
-        self.inset_bottom(inset.pct())
-    }
-
-    /// Sets all insets (left, top, right, bottom) to the same value.
-    pub fn inset(self, inset: impl Into<LengthAuto>) -> Self {
-        let inset = inset.into();
-        self.inset_left(inset)
-            .inset_top(inset)
-            .inset_right(inset)
-            .inset_bottom(inset)
-    }
-
-    /// Sets all insets as percentages of the parent container.
-    pub fn inset_pct(self, inset: f64) -> Self {
-        let inset = inset.pct();
-        self.inset_left(inset)
-            .inset_top(inset)
-            .inset_right(inset)
-            .inset_bottom(inset)
-    }
-
-    /// Specifies shadow blur. The larger this value, the bigger the blur,
-    /// so the shadow becomes bigger and lighter.
-    pub fn box_shadow_blur(self, blur_radius: impl Into<Length>) -> Self {
-        let mut value = self.get(BoxShadowProp);
-        if let Some(v) = value.first_mut() {
-            v.blur_radius = blur_radius.into();
-        } else {
-            value.push(BoxShadow {
-                blur_radius: blur_radius.into(),
-                ..Default::default()
-            });
-        }
-        self.set(BoxShadowProp, value)
-    }
-
-    /// Specifies color for the shadow.
-    pub fn box_shadow_color(self, color: Color) -> Self {
-        let mut value = self.get(BoxShadowProp);
-        if let Some(v) = value.first_mut() {
-            v.color = color;
-        } else {
-            value.push(BoxShadow {
-                color,
-                ..Default::default()
-            });
-        }
-        self.set(BoxShadowProp, value)
-    }
-
-    /// Specifies shadow blur spread. Positive values will cause the shadow
-    /// to expand and grow bigger, negative values will cause the shadow to shrink.
-    pub fn box_shadow_spread(self, spread: impl Into<Length>) -> Self {
-        let mut value = self.get(BoxShadowProp);
-        if let Some(v) = value.first_mut() {
-            v.spread = spread.into();
-        } else {
-            value.push(BoxShadow {
-                spread: spread.into(),
-                ..Default::default()
-            });
-        }
-        self.set(BoxShadowProp, value)
-    }
-
-    /// Applies a shadow for the stylized view. Use [BoxShadow] builder
-    /// to construct each shadow.
-    /// ```rust
-    /// use floem::prelude::*;
-    /// use floem::prelude::palette::css;
-    /// use floem::style::BoxShadow;
-    ///
-    /// empty().style(|s| s.apply_box_shadows(vec![
-    ///    BoxShadow::new()
-    ///        .color(css::BLACK)
-    ///        .top_offset(5.)
-    ///        .bottom_offset(-30.)
-    ///        .right_offset(-20.)
-    ///        .left_offset(10.)
-    ///        .blur_radius(5.)
-    ///        .spread(10.)
-    /// ]));
-    /// ```
-    /// ### Info
-    /// If you only specify one shadow on the view, use standard style methods directly
-    /// on [Style] struct:
-    /// ```rust
-    /// use floem::prelude::*;
-    /// empty().style(|s| s
-    ///     .box_shadow_top_offset(-5.)
-    ///     .box_shadow_bottom_offset(30.)
-    ///     .box_shadow_right_offset(20.)
-    ///     .box_shadow_left_offset(-10.)
-    ///     .box_shadow_spread(1.)
-    ///     .box_shadow_blur(3.)
-    /// );
-    /// ```
-    pub fn apply_box_shadows(self, shadow: impl Into<SmallVec<[BoxShadow; 3]>>) -> Self {
-        self.set(BoxShadowProp, shadow.into())
-    }
-
-    /// Specifies the offset on horizontal axis.
-    /// Negative offset value places the shadow to the left of the view.
-    pub fn box_shadow_h_offset(self, h_offset: impl Into<Length>) -> Self {
-        let mut value = self.get(BoxShadowProp);
-        let offset = h_offset.into();
-        if let Some(v) = value.first_mut() {
-            v.left_offset = -offset;
-            v.right_offset = offset;
-        } else {
-            value.push(BoxShadow {
-                left_offset: -offset,
-                right_offset: offset,
-                ..Default::default()
-            });
-        }
-        self.set(BoxShadowProp, value)
-    }
-
-    /// Specifies the offset on vertical axis.
-    /// Negative offset value places the shadow above the view.
-    pub fn box_shadow_v_offset(self, v_offset: impl Into<Length>) -> Self {
-        let mut value = self.get(BoxShadowProp);
-        let offset = v_offset.into();
-        if let Some(v) = value.first_mut() {
-            v.top_offset = -offset;
-            v.bottom_offset = offset;
-        } else {
-            value.push(BoxShadow {
-                top_offset: -offset,
-                bottom_offset: offset,
-                ..Default::default()
-            });
-        }
-        self.set(BoxShadowProp, value)
-    }
-
-    /// Specifies the offset of the left edge.
-    pub fn box_shadow_left_offset(self, left_offset: impl Into<Length>) -> Self {
-        let mut value = self.get(BoxShadowProp);
-        if let Some(v) = value.first_mut() {
-            v.left_offset = left_offset.into();
-        } else {
-            value.push(BoxShadow {
-                left_offset: left_offset.into(),
-                ..Default::default()
-            });
-        }
-        self.set(BoxShadowProp, value)
-    }
-
-    /// Specifies the offset of the right edge.
-    pub fn box_shadow_right_offset(self, right_offset: impl Into<Length>) -> Self {
-        let mut value = self.get(BoxShadowProp);
-        if let Some(v) = value.first_mut() {
-            v.right_offset = right_offset.into();
-        } else {
-            value.push(BoxShadow {
-                right_offset: right_offset.into(),
-                ..Default::default()
-            });
-        }
-        self.set(BoxShadowProp, value)
-    }
-
-    /// Specifies the offset of the top edge.
-    pub fn box_shadow_top_offset(self, top_offset: impl Into<Length>) -> Self {
-        let mut value = self.get(BoxShadowProp);
-        if let Some(v) = value.first_mut() {
-            v.top_offset = top_offset.into();
-        } else {
-            value.push(BoxShadow {
-                top_offset: top_offset.into(),
-                ..Default::default()
-            });
-        }
-        self.set(BoxShadowProp, value)
-    }
-
-    /// Specifies the offset of the bottom edge.
-    pub fn box_shadow_bottom_offset(self, bottom_offset: impl Into<Length>) -> Self {
-        let mut value = self.get(BoxShadowProp);
-        if let Some(v) = value.first_mut() {
-            v.bottom_offset = bottom_offset.into();
-        } else {
-            value.push(BoxShadow {
-                bottom_offset: bottom_offset.into(),
-                ..Default::default()
-            });
-        }
-        self.set(BoxShadowProp, value)
-    }
-
-    /// Sets the font weight to bold.
-    pub fn font_bold(self) -> Self {
-        self.font_weight(FontWeightProp::BOLD)
-    }
-
-    /// Enables pointer events for the view (allows mouse interaction).
-    pub fn pointer_events_auto(self) -> Self {
-        self.pointer_events(PointerEvents::Auto)
-    }
-
-    /// Disables pointer events for the view (mouse events pass through).
-    pub fn pointer_events_none(self) -> Self {
-        self.pointer_events(PointerEvents::None)
-    }
-
-    /// Sets text overflow to show ellipsis (...) when text is clipped.
-    pub fn text_ellipsis(self) -> Self {
-        self.text_overflow(TextOverflow::NoWrap(NoWrapOverflow::Ellipsis))
-    }
-
-    /// Sets text overflow to clip text without showing ellipsis.
-    pub fn text_clip(self) -> Self {
-        self.text_overflow(TextOverflow::NoWrap(NoWrapOverflow::Clip))
-    }
-
-    /// Sets text to wrap using Parley's normal overflow-wrap behavior.
-    pub fn text_wrap(self) -> Self {
-        self.text_overflow(TextOverflow::Wrap {
-            overflow_wrap: OverflowWrap::Normal,
-            word_break: WordBreakStrength::Normal,
-        })
-    }
-
-    /// Sets the view to absolute positioning.
-    pub fn absolute(self) -> Self {
-        self.position(taffy::style::Position::Absolute)
-    }
-
-    /// Sets the view to fixed positioning relative to the viewport.
-    ///
-    /// This is similar to CSS `position: fixed`. The view will:
-    /// - Be positioned relative to the window viewport
-    /// - Use `inset` properties relative to the viewport
-    /// - Have percentage sizes relative to the viewport
-    /// - Be painted above all other content
-    ///
-    /// # Example
-    /// ```rust
-    /// use floem::style::Style;
-    ///
-    /// // Create a full-screen overlay
-    /// Style::new().fixed().inset(0.0);
-    /// ```
-    pub fn fixed(self) -> Self {
-        self.position(taffy::style::Position::Absolute)
-            .is_fixed(true)
-    }
-
-    /// Aligns flex items to stretch and fill the cross axis.
-    pub fn items_stretch(self) -> Self {
-        self.align_items(taffy::style::AlignItems::Stretch)
-    }
-
-    /// Aligns flex items to the start of the cross axis.
-    pub fn items_start(self) -> Self {
-        self.align_items(taffy::style::AlignItems::FlexStart)
-    }
-
-    /// Defines the alignment along the cross axis as Centered
-    pub fn items_center(self) -> Self {
-        self.align_items(taffy::style::AlignItems::Center)
-    }
-
-    /// Aligns flex items to the end of the cross axis.
-    pub fn items_end(self) -> Self {
-        self.align_items(taffy::style::AlignItems::FlexEnd)
-    }
-
-    /// Aligns flex items along their baselines.
-    pub fn items_baseline(self) -> Self {
-        self.align_items(taffy::style::AlignItems::Baseline)
-    }
-
-    /// Aligns flex items to the start of the main axis.
-    pub fn justify_start(self) -> Self {
-        self.justify_content(taffy::style::JustifyContent::FlexStart)
-    }
-
-    /// Aligns flex items to the end of the main axis.
-    pub fn justify_end(self) -> Self {
-        self.justify_content(taffy::style::JustifyContent::FlexEnd)
-    }
-
-    /// Defines the alignment along the main axis as Centered
-    pub fn justify_center(self) -> Self {
-        self.justify_content(taffy::style::JustifyContent::Center)
-    }
-
-    /// Distributes flex items with space between them.
-    pub fn justify_between(self) -> Self {
-        self.justify_content(taffy::style::JustifyContent::SpaceBetween)
-    }
-
-    /// Distributes flex items with space around them.
-    pub fn justify_around(self) -> Self {
-        self.justify_content(taffy::style::JustifyContent::SpaceAround)
-    }
-
-    /// Distributes flex items with equal space around them.
-    pub fn justify_evenly(self) -> Self {
-        self.justify_content(taffy::style::JustifyContent::SpaceEvenly)
-    }
-
-    /// Hides the view from view and layout.
-    pub fn hide(self) -> Self {
-        self.set(DisplayProp, Display::None)
-    }
-
-    /// Sets the view to use flexbox layout.
-    pub fn flex(self) -> Self {
-        self.display(taffy::style::Display::Flex)
-    }
-
-    /// Sets the view to use grid layout.
-    pub fn grid(self) -> Self {
-        self.display(taffy::style::Display::Grid)
-    }
-
-    /// Sets flex direction to row (horizontal).
-    pub fn flex_row(self) -> Self {
-        self.flex_direction(taffy::style::FlexDirection::Row)
-    }
-
-    /// Sets flex direction to column (vertical).
-    pub fn flex_col(self) -> Self {
-        self.flex_direction(taffy::style::FlexDirection::Column)
-    }
-
-    /// Sets uniform scaling for both X and Y axes.
-    pub fn scale(self, scale: impl Into<Pct>) -> Self {
-        let val = scale.into();
-        self.scale_x(val).scale_y(val)
-    }
-
-    /// Allow the application of a function if the option exists.
-    /// This is useful for chaining together a bunch of optional style changes.
-    /// ```rust
-    /// use floem::style::Style;
-    /// let maybe_none: Option<i32> = None;
-    /// let style = Style::default()
-    ///     .apply_opt(Some(5.0), Style::padding) // ran
-    ///     .apply_opt(maybe_none, Style::margin) // not ran
-    ///     .apply_opt(Some(5.0), |s, v| s.border_right(v * 2.0))
-    ///     .border_left(5.0); // ran, obviously
-    /// ```
-    pub fn apply_opt<T>(self, opt: Option<T>, f: impl FnOnce(Self, T) -> Self) -> Self {
-        if let Some(t) = opt { f(self, t) } else { self }
-    }
-
-    /// Allow the application of a function if the condition holds.
-    /// This is useful for chaining together optional style changes.
-    /// ```rust
-    /// use floem::style::Style;
-    /// let style = Style::default()
-    ///     .apply_if(true, |s| s.padding(5.0)) // ran
-    ///     .apply_if(false, |s| s.margin(5.0)); // not ran
-    /// ```
-    pub fn apply_if(self, cond: bool, f: impl FnOnce(Self) -> Self) -> Self {
-        if cond { f(self) } else { self }
-    }
-
-    /// Applies a `CustomStyle` type into this style.
-    ///
-    /// # Examples
-    /// ```
-    /// use floem::prelude::*;
-    /// text("test").style(|s| s.custom(|s: LabelCustomStyle| s.selectable(false)));
-    /// ```
-    ///
-    /// See also: [`apply_custom`](Self::apply_custom), [`custom_style_class`](Self::custom_style_class)
-    pub fn custom<CS: CustomStyle>(self, custom: impl FnOnce(CS) -> CS) -> Self {
-        self.apply(custom(CS::default()).into())
-    }
-
-    /// Applies a `CustomStyle` type into this style.
-    ///
-    /// # Examples
-    /// ```
-    /// use floem::prelude::*;
-    /// text("test").style(|s| s.apply_custom(LabelCustomStyle::new().selectable(false)));
-    /// ```
-    ///
-    /// See also: [`custom`](Self::custom), [`custom_style_class`](Self::custom_style_class)
-    pub fn apply_custom<CS: Into<Style>>(self, custom_style: CS) -> Self {
-        self.apply(custom_style.into())
-    }
-}
-
-impl Style {
-    pub(crate) fn font_size_cx(&self) -> FontSizeCx {
-        let builtin = self.builtin();
-        let font_size = builtin.font_size();
-        let line_height = builtin.line_height();
-        let line_height = line_height.resolve(font_size as f32);
-        FontSizeCx::new(font_size, line_height as f64)
-    }
-
-    pub fn to_taffy_style(&self) -> TaffyStyle {
-        let style = self.builtin();
-        let font_size_cx = self.font_size_cx();
-        TaffyStyle {
-            display: style.display(),
-            overflow: taffy::Point {
-                x: self.get(OverflowX),
-                y: self.get(OverflowY),
-            },
-            position: style.position(),
-            size: taffy::prelude::Size {
-                width: style.width().to_taffy_dim(&font_size_cx),
-                height: style.height().to_taffy_dim(&font_size_cx),
-            },
-            min_size: taffy::prelude::Size {
-                width: style.min_width().to_taffy_dim(&font_size_cx),
-                height: style.min_height().to_taffy_dim(&font_size_cx),
-            },
-            max_size: taffy::prelude::Size {
-                width: style.max_width().to_taffy_dim(&font_size_cx),
-                height: style.max_height().to_taffy_dim(&font_size_cx),
-            },
-            flex_direction: style.flex_direction(),
-            flex_grow: style.flex_grow(),
-            flex_shrink: style.flex_shrink(),
-            flex_basis: style.flex_basis().to_taffy_dim(&font_size_cx),
-            flex_wrap: style.flex_wrap(),
-            justify_content: style.justify_content(),
-            justify_self: style.justify_self(),
-            justify_items: style.justify_items(),
-            align_items: style.align_items(),
-            align_content: style.align_content(),
-            align_self: style.align_self(),
-            aspect_ratio: style.aspect_ratio(),
-            border: {
-                Rect {
-                    left: LengthPercentage::length(style.border_left().width as f32),
-                    top: LengthPercentage::length(style.border_top().width as f32),
-                    right: LengthPercentage::length(style.border_right().width as f32),
-                    bottom: LengthPercentage::length(style.border_bottom().width as f32),
-                }
-            },
-            padding: {
-                Rect {
-                    left: style.padding_left().to_taffy(&font_size_cx),
-                    top: style.padding_top().to_taffy(&font_size_cx),
-                    right: style.padding_right().to_taffy(&font_size_cx),
-                    bottom: style.padding_bottom().to_taffy(&font_size_cx),
-                }
-            },
-            margin: {
-                Rect {
-                    left: style.margin_left().to_taffy_len_perc_auto(&font_size_cx),
-                    top: style.margin_top().to_taffy_len_perc_auto(&font_size_cx),
-                    right: style.margin_right().to_taffy_len_perc_auto(&font_size_cx),
-                    bottom: style.margin_bottom().to_taffy_len_perc_auto(&font_size_cx),
-                }
-            },
-            inset: Rect {
-                left: style.inset_left().to_taffy_len_perc_auto(&font_size_cx),
-                top: style.inset_top().to_taffy_len_perc_auto(&font_size_cx),
-                right: style.inset_right().to_taffy_len_perc_auto(&font_size_cx),
-                bottom: style.inset_bottom().to_taffy_len_perc_auto(&font_size_cx),
-            },
-            gap: Size {
-                width: style.col_gap().to_taffy(&font_size_cx),
-                height: style.row_gap().to_taffy(&font_size_cx),
-            },
-            grid_template_rows: style.grid_template_rows(),
-            grid_template_columns: style.grid_template_columns(),
-            grid_row: style.grid_row(),
-            grid_column: style.grid_column(),
-            grid_auto_rows: style.grid_auto_rows(),
-            grid_auto_columns: style.grid_auto_columns(),
-            grid_auto_flow: style.grid_auto_flow(),
-            scrollbar_width: style.scrollbar_width().0 as f32,
-            ..Default::default()
-        }
-    }
-}
diff --git a/src/style/props.rs b/src/style/props.rs
deleted file mode 100644
index 1a089fc8f..000000000
--- a/src/style/props.rs
+++ /dev/null
@@ -1,697 +0,0 @@
-//! Style property traits, classes, and keys.
-//!
-//! This module provides the core traits and types for defining and working with
-//! style properties:
-//! - [`StyleClass`] - trait for defining style classes
-//! - [`StyleProp`] - trait for defining style properties
-//! - [`StylePropReader`] - trait for reading properties from styles
-//! - [`StyleKey`] - unique identifier for style entries
-//! - Macros: `style_class!`, `prop!`, `prop_extractor!`
-
-use std::any::{Any, type_name};
-use std::fmt::{self, Debug};
-use std::hash::{Hash, Hasher};
-use std::ptr;
-use std::rc::Rc;
-
-#[cfg(not(target_arch = "wasm32"))]
-use std::time::Instant;
-#[cfg(target_arch = "wasm32")]
-use web_time::Instant;
-
-use crate::view::{IntoView, View};
-use crate::views::Label;
-
-use super::Style;
-use super::selectors::StyleSelectors;
-use super::transition::TransitionState;
-use super::values::{StyleMapValue, StylePropValue, StyleValue};
-
-// ============================================================================
-// StyleClass
-// ============================================================================
-
-pub trait StyleClass: Default + Copy + 'static {
-    fn key() -> StyleKey;
-    fn class_ref() -> StyleClassRef {
-        StyleClassRef { key: Self::key() }
-    }
-}
-
-pub trait StyleDebugGroup: Default + Copy + 'static {
-    fn key() -> StyleKey;
-    fn group_ref() -> StyleDebugGroupRef {
-        StyleDebugGroupRef { key: Self::key() }
-    }
-    fn member_props() -> Vec<StyleKey>;
-    fn debug_view(style: &Style) -> Option<Box<dyn View>>;
-}
-
-#[derive(Debug, Clone)]
-pub struct StyleClassInfo {
-    pub(crate) name: fn() -> &'static str,
-}
-
-impl StyleClassInfo {
-    pub const fn new<Name>() -> Self {
-        StyleClassInfo {
-            name: || std::any::type_name::<Name>(),
-        }
-    }
-}
-
-#[derive(Copy, Clone, Debug, PartialEq)]
-pub struct StyleClassRef {
-    pub key: StyleKey,
-}
-
-#[derive(Debug, Clone)]
-pub struct StyleDebugGroupInfo {
-    pub(crate) name: fn() -> &'static str,
-    pub(crate) inherited: bool,
-    pub(crate) member_props: fn() -> Vec<StyleKey>,
-    pub(crate) debug_view: fn(style: &Style) -> Option<Box<dyn View>>,
-}
-
-impl StyleDebugGroupInfo {
-    pub const fn new<Name>(
-        inherited: bool,
-        member_props: fn() -> Vec<StyleKey>,
-        debug_view: fn(style: &Style) -> Option<Box<dyn View>>,
-    ) -> Self {
-        StyleDebugGroupInfo {
-            name: || std::any::type_name::<Name>(),
-            inherited,
-            member_props,
-            debug_view,
-        }
-    }
-}
-
-#[derive(Copy, Clone, Debug, Eq, PartialEq, Hash)]
-pub struct StyleDebugGroupRef {
-    pub key: StyleKey,
-}
-
-macro_rules! style_key_selector {
-    ($v:vis $name:ident, $sel:expr) => {
-        fn $name() -> $crate::style::StyleKey {
-            static INFO: $crate::style::StyleKeyInfo = $crate::style::StyleKeyInfo::Selector($sel);
-            $crate::style::StyleKey { info: &INFO }
-        }
-    };
-}
-
-pub(crate) use style_key_selector;
-
-#[macro_export]
-macro_rules! style_class {
-    ($(#[$meta:meta])* $v:vis $name:ident) => {
-        $(#[$meta])*
-        #[derive(Default, Copy, Clone)]
-        $v struct $name;
-
-        impl $crate::style::StyleClass for $name {
-            fn key() -> $crate::style::StyleKey {
-                static INFO: $crate::style::StyleKeyInfo = $crate::style::StyleKeyInfo::Class(
-                    $crate::style::StyleClassInfo::new::<$name>()
-                );
-                $crate::style::StyleKey { info: &INFO }
-            }
-        }
-    };
-}
-
-#[macro_export]
-macro_rules! style_debug_group {
-    ($(#[$meta:meta])* $v:vis $name:ident $(, inherited = $inherited:ident)?, members = [$($prop:ty),* $(,)?], view = $view:path) => {
-        $(#[$meta])*
-        #[derive(Default, Copy, Clone)]
-        $v struct $name;
-
-        impl $crate::style::StyleDebugGroup for $name {
-            fn key() -> $crate::style::StyleKey {
-                static INFO: $crate::style::StyleKeyInfo =
-                    $crate::style::StyleKeyInfo::DebugGroup(
-                        $crate::style::StyleDebugGroupInfo::new::<$name>(
-                            style_debug_group!(@inherited $($inherited)?),
-                            || vec![$(<$prop as $crate::style::StyleProp>::key()),*],
-                            $view,
-                        )
-                    );
-                $crate::style::StyleKey { info: &INFO }
-            }
-
-            fn member_props() -> Vec<$crate::style::StyleKey> {
-                vec![$(<$prop as $crate::style::StyleProp>::key()),*]
-            }
-
-            fn debug_view(style: &$crate::style::Style) -> Option<Box<dyn $crate::view::View>> {
-                $view(style)
-            }
-        }
-    };
-    (@inherited inherited) => {
-        true
-    };
-    (@inherited) => {
-        false
-    };
-}
-
-// ============================================================================
-// StyleProp
-// ============================================================================
-
-pub trait StyleProp: Default + Copy + 'static {
-    type Type: StylePropValue;
-    fn key() -> StyleKey;
-    fn prop_ref() -> StylePropRef {
-        StylePropRef { key: Self::key() }
-    }
-    fn default_value() -> Self::Type;
-}
-
-pub(crate) type InterpolateFn =
-    fn(val1: &dyn Any, val2: &dyn Any, time: f64) -> Option<Rc<dyn Any>>;
-
-/// Function pointer type for computing content hash of a style value.
-pub(crate) type HashAnyFn = fn(val: &dyn Any) -> u64;
-
-/// Function pointer type for comparing two style values for equality.
-pub(crate) type EqAnyFn = fn(val1: &dyn Any, val2: &dyn Any) -> bool;
-/// Function pointer type for resolving a stored inherited property into a concrete value.
-pub(crate) type ResolveInheritedAnyFn = fn(val: &dyn Any, style: &Style) -> Rc<dyn Any>;
-
-#[derive(Debug)]
-pub struct StylePropInfo {
-    pub(crate) name: fn() -> &'static str,
-    pub(crate) inherited: bool,
-    #[allow(unused)]
-    pub(crate) default_as_any: fn() -> Rc<dyn Any>,
-    pub(crate) interpolate: InterpolateFn,
-    pub(crate) debug_any: fn(val: &dyn Any) -> String,
-    pub(crate) debug_view: fn(val: &dyn Any) -> Option<Box<dyn View>>,
-    pub(crate) transition_key: StyleKey,
-    /// Computes a content-based hash for a style value.
-    pub(crate) hash_any: HashAnyFn,
-    /// Compares two style values for equality.
-    pub(crate) eq_any: EqAnyFn,
-    /// Resolves a stored property value for inheritance propagation.
-    pub(crate) resolve_inherited_any: ResolveInheritedAnyFn,
-}
-
-impl StylePropInfo {
-    pub const fn new<Name, T: StylePropValue + 'static>(
-        inherited: bool,
-        default_as_any: fn() -> Rc<dyn Any>,
-        transition_key: StyleKey,
-    ) -> Self {
-        StylePropInfo {
-            name: || std::any::type_name::<Name>(),
-            inherited,
-            default_as_any,
-            debug_any: |val| {
-                if let Some(v) = val.downcast_ref::<StyleMapValue<T>>() {
-                    match v {
-                        StyleMapValue::Val(v) | StyleMapValue::Animated(v) => format!("{v:?}"),
-                        StyleMapValue::Context(_) => "Context(..)".to_owned(),
-                        StyleMapValue::Unset => "Unset".to_owned(),
-                    }
-                } else {
-                    panic!(
-                        "expected type {} for property {}",
-                        type_name::<T>(),
-                        std::any::type_name::<Name>(),
-                    )
-                }
-            },
-            interpolate: |val1, val2, time| {
-                if let (Some(v1), Some(v2)) = (
-                    val1.downcast_ref::<StyleMapValue<T>>(),
-                    val2.downcast_ref::<StyleMapValue<T>>(),
-                ) {
-                    if let (
-                        StyleMapValue::Val(v1) | StyleMapValue::Animated(v1),
-                        StyleMapValue::Val(v2) | StyleMapValue::Animated(v2),
-                    ) = (v1, v2)
-                    {
-                        v1.interpolate(v2, time)
-                            .map(|val| Rc::new(StyleMapValue::Animated(val)) as Rc<dyn Any>)
-                    } else {
-                        None
-                    }
-                } else {
-                    panic!(
-                        "expected type {} for property {}. Got typeids {:?} and {:?}",
-                        type_name::<T>(),
-                        std::any::type_name::<Name>(),
-                        val1.type_id(),
-                        val2.type_id()
-                    )
-                }
-            },
-            debug_view: |val| {
-                if let Some(v) = val.downcast_ref::<StyleMapValue<T>>() {
-                    match v {
-                        StyleMapValue::Val(v) | StyleMapValue::Animated(v) => v.debug_view(),
-                        StyleMapValue::Context(_) => Some(Label::new("Context(..)").into_any()),
-                        StyleMapValue::Unset => Some(Label::new("Unset").into_any()),
-                    }
-                } else {
-                    panic!(
-                        "expected type {} for property {}",
-                        type_name::<T>(),
-                        std::any::type_name::<Name>(),
-                    )
-                }
-            },
-            transition_key,
-            hash_any: |val| {
-                if let Some(v) = val.downcast_ref::<StyleMapValue<T>>() {
-                    match v {
-                        StyleMapValue::Val(v) | StyleMapValue::Animated(v) => v.content_hash(),
-                        StyleMapValue::Context(_) => 1,
-                        StyleMapValue::Unset => 0, // Stable hash for unset
-                    }
-                } else {
-                    panic!(
-                        "expected type {} for property {}",
-                        type_name::<T>(),
-                        std::any::type_name::<Name>(),
-                    )
-                }
-            },
-            eq_any: |val1, val2| {
-                if let (Some(v1), Some(v2)) = (
-                    val1.downcast_ref::<StyleMapValue<T>>(),
-                    val2.downcast_ref::<StyleMapValue<T>>(),
-                ) {
-                    match (v1, v2) {
-                        (
-                            StyleMapValue::Val(a) | StyleMapValue::Animated(a),
-                            StyleMapValue::Val(b) | StyleMapValue::Animated(b),
-                        ) => a == b,
-                        (StyleMapValue::Unset, StyleMapValue::Unset) => true,
-                        _ => false,
-                    }
-                } else {
-                    panic!(
-                        "expected type {} for property {}. Got typeids {:?} and {:?}",
-                        type_name::<T>(),
-                        std::any::type_name::<Name>(),
-                        val1.type_id(),
-                        val2.type_id()
-                    )
-                }
-            },
-            resolve_inherited_any: |val, style| {
-                let resolved = match val.downcast_ref::<StyleMapValue<T>>().unwrap_or_else(|| {
-                    panic!(
-                        "expected type {} for property {}",
-                        type_name::<T>(),
-                        std::any::type_name::<Name>(),
-                    )
-                }) {
-                    StyleMapValue::Val(value) | StyleMapValue::Animated(value) => {
-                        StyleMapValue::Val(value.clone())
-                    }
-                    StyleMapValue::Context(context_value) => {
-                        StyleMapValue::Val(context_value.resolve(style))
-                    }
-                    StyleMapValue::Unset => StyleMapValue::Unset,
-                };
-                Rc::new(resolved)
-            },
-        }
-    }
-}
-
-#[derive(Copy, Clone, Debug, Eq, PartialEq, Hash)]
-pub struct StylePropRef {
-    pub key: StyleKey,
-}
-
-impl StylePropRef {
-    pub(crate) fn info(&self) -> &StylePropInfo {
-        if let StyleKeyInfo::Prop(prop) = self.key.info {
-            prop
-        } else {
-            panic!()
-        }
-    }
-}
-
-// ============================================================================
-// StylePropReader
-// ============================================================================
-
-pub trait StylePropReader {
-    type State: Debug;
-    type Type: Clone;
-
-    /// Reads the property from the style.
-    /// Returns true if the property changed.
-    fn read(
-        state: &mut Self::State,
-        style: &Style,
-        now: &Instant,
-        request_transition: &mut bool,
-    ) -> bool;
-
-    fn get(state: &Self::State) -> Self::Type;
-    fn new() -> Self::State;
-}
-
-impl<P: StyleProp> StylePropReader for P {
-    type State = (P::Type, TransitionState<P::Type>);
-    type Type = P::Type;
-
-    // returns true if the value has changed
-    fn read(
-        state: &mut Self::State,
-        style: &Style,
-        now: &Instant,
-        request_transition: &mut bool,
-    ) -> bool {
-        // get the style property
-        let style_value = style.get_prop_style_value::<P>();
-        let mut prop_animated = false;
-        let new = match style_value {
-            StyleValue::Context(_) => {
-                unreachable!("context values should resolve during property reads")
-            }
-            StyleValue::Animated(val) => {
-                *request_transition = true;
-                prop_animated = true;
-                val
-            }
-            StyleValue::Val(val) => val,
-            StyleValue::Unset | StyleValue::Base => P::default_value(),
-        };
-        // set the transition state to the transition if one is found
-        state.1.read(style.get_transition::<P>());
-
-        // there is a previously stored value in state.0. if the values are different, a transition should be started if there is one
-        let changed = new != state.0;
-        if changed && !prop_animated {
-            state.1.transition(&Self::get(state), &new);
-            state.0 = new;
-        } else if prop_animated {
-            state.0 = new;
-        }
-        changed | state.1.step(now, request_transition)
-    }
-
-    // get the current value from the transition state if one is active, else just return the value that was read from the style map
-    fn get(state: &Self::State) -> Self::Type {
-        state.1.get(&state.0)
-    }
-
-    fn new() -> Self::State {
-        (P::default_value(), TransitionState::default())
-    }
-}
-
-impl<P: StyleProp> StylePropReader for Option<P> {
-    type State = Option<P::Type>;
-    type Type = Option<P::Type>;
-    fn read(
-        state: &mut Self::State,
-        style: &Style,
-        _now: &Instant,
-        _transition: &mut bool,
-    ) -> bool {
-        let new = style.get_prop::<P>();
-        let changed = new != *state;
-        *state = new;
-        changed
-    }
-    fn get(state: &Self::State) -> Self::Type {
-        state.clone()
-    }
-    fn new() -> Self::State {
-        None
-    }
-}
-
-// ============================================================================
-// ExtractorField
-// ============================================================================
-
-#[derive(Clone)]
-pub struct ExtractorField<R: StylePropReader> {
-    state: R::State,
-}
-
-impl<R: StylePropReader> Debug for ExtractorField<R> {
-    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
-        self.state.fmt(f)
-    }
-}
-
-impl<R: StylePropReader> ExtractorField<R> {
-    pub fn read(&mut self, style: &Style, now: &Instant, request_transition: &mut bool) -> bool {
-        R::read(&mut self.state, style, now, request_transition)
-    }
-    pub fn get(&self) -> R::Type {
-        R::get(&self.state)
-    }
-    #[allow(clippy::new_without_default)]
-    pub fn new() -> Self {
-        Self { state: R::new() }
-    }
-}
-
-impl<R: StylePropReader> PartialEq for ExtractorField<R>
-where
-    R::Type: PartialEq,
-{
-    fn eq(&self, other: &Self) -> bool {
-        self.get() == other.get()
-    }
-}
-
-impl<R: StylePropReader> Eq for ExtractorField<R> where R::Type: Eq {}
-
-impl<R: StylePropReader> std::hash::Hash for ExtractorField<R>
-where
-    R::Type: std::hash::Hash,
-{
-    fn hash<H: Hasher>(&self, state: &mut H) {
-        self.get().hash(state)
-    }
-}
-
-// ============================================================================
-// Macros
-// ============================================================================
-
-#[macro_export]
-macro_rules! prop {
-    ($(#[$meta:meta])* $v:vis $name:ident: $ty:ty { $($options:tt)* } = $default:expr
-    ) => {
-        $(#[$meta])*
-        #[derive(Default, Copy, Clone)]
-        #[allow(missing_docs)]
-        $v struct $name;
-        impl $crate::style::StyleProp for $name {
-            type Type = $ty;
-            fn key() -> $crate::style::StyleKey {
-                static TRANSITION_INFO: $crate::style::StyleKeyInfo = $crate::style::StyleKeyInfo::Transition;
-                static INFO: $crate::style::StyleKeyInfo = $crate::style::StyleKeyInfo::Prop($crate::style::StylePropInfo::new::<$name, $ty>(
-                    prop!([impl inherited][$($options)*]),
-                    || std::rc::Rc::new($crate::style::StyleMapValue::Val($name::default_value())),
-                    $crate::style::StyleKey { info: &TRANSITION_INFO },
-                ));
-                $crate::style::StyleKey { info: &INFO }
-            }
-            fn default_value() -> Self::Type {
-                $default
-            }
-        }
-    };
-    ([impl inherited][inherited]) => {
-        true
-    };
-    ([impl inherited][]) => {
-        false
-    };
-}
-
-#[macro_export]
-macro_rules! prop_extractor {
-    (
-        $(#[$attrs:meta])* $vis:vis $name:ident {
-            $($prop_vis:vis $prop:ident: $reader:ty),*
-            $(,)?
-        }
-    ) => {
-        #[derive(Debug, Clone)]
-        $(#[$attrs])?
-        $vis struct $name {
-            $(
-                $prop_vis $prop: $crate::style::ExtractorField<$reader>,
-            )*
-        }
-
-        impl $name {
-            #[allow(dead_code)]
-            $vis fn read_style(&mut self, cx: &mut $crate::context::StyleCx, style: &$crate::style::Style) -> bool {
-                self.read_style_for(cx, style, cx.current_view().get_element_id())
-            }
-
-            #[allow(dead_code)]
-            $vis fn read_style_for(
-                &mut self,
-                cx: &mut $crate::context::StyleCx,
-                style: &$crate::style::Style,
-                target: impl Into<$crate::ElementId>,
-            ) -> bool {
-                let mut transition = false;
-                let changed = false $(
-                    | self.$prop.read(style, &cx.now(), &mut transition)
-                )*;
-                if transition {
-                    cx.request_transition_for(target);
-                }
-                changed
-            }
-
-           #[allow(dead_code)]
-            $vis fn read(&mut self, cx: &mut $crate::context::StyleCx) -> bool {
-                self.read_for(cx, cx.current_view().get_element_id())
-            }
-
-           #[allow(dead_code)]
-            $vis fn read_for(
-                &mut self,
-                cx: &mut $crate::context::StyleCx,
-                target: impl Into<$crate::ElementId>,
-            ) -> bool {
-                let mut transition = false;
-                let changed = self.read_explicit(
-                    &cx.direct_style(),
-                    &cx.now(),
-                    &mut transition,
-                );
-                if transition {
-                    cx.request_transition_for(target);
-                }
-                changed
-            }
-
-            #[allow(dead_code)]
-            $vis fn read_explicit(
-                &mut self,
-                style: &$crate::style::Style,
-                #[cfg(not(target_arch = "wasm32"))]
-                now: &std::time::Instant,
-                #[cfg(target_arch = "wasm32")]
-                now: &web_time::Instant,
-                request_transition: &mut bool
-            ) -> bool {
-                false $(| self.$prop.read(style, now, request_transition))*
-            }
-
-            $($prop_vis fn $prop(&self) -> <$reader as $crate::style::StylePropReader>::Type
-            {
-                self.$prop.get()
-            })*
-        }
-
-        impl Default for $name {
-            fn default() -> Self {
-                Self {
-                    $(
-                        $prop: $crate::style::ExtractorField::new(),
-                    )*
-                }
-            }
-        }
-    };
-}
-
-// ============================================================================
-// StyleKey
-// ============================================================================
-
-#[derive(Debug)]
-pub enum StyleKeyInfo {
-    Transition,
-    Prop(StylePropInfo),
-    Selector(StyleSelectors),
-    Class(StyleClassInfo),
-    DebugGroup(StyleDebugGroupInfo),
-    DeferredEffects,
-    /// Storage for parameterized structural selectors (`:first-child`, `:nth-child(...)`, etc.).
-    StructuralSelectors,
-    /// Storage for parameterized responsive selectors (`min/max/range` window width).
-    ResponsiveSelectors,
-}
-
-pub(crate) static STRUCTURAL_SELECTORS_INFO: StyleKeyInfo = StyleKeyInfo::StructuralSelectors;
-pub(crate) static RESPONSIVE_SELECTORS_INFO: StyleKeyInfo = StyleKeyInfo::ResponsiveSelectors;
-
-#[derive(Copy, Clone)]
-pub struct StyleKey {
-    pub info: &'static StyleKeyInfo,
-}
-
-impl StyleKey {
-    pub(crate) fn debug_any(&self, value: &dyn Any) -> String {
-        match self.info {
-            StyleKeyInfo::Selector(selectors) => selectors.debug_string(),
-            StyleKeyInfo::Transition
-            | StyleKeyInfo::DebugGroup(_)
-            | StyleKeyInfo::DeferredEffects
-            | StyleKeyInfo::StructuralSelectors
-            | StyleKeyInfo::ResponsiveSelectors => String::new(),
-            StyleKeyInfo::Class(info) => (info.name)().to_string(),
-            StyleKeyInfo::Prop(v) => (v.debug_any)(value),
-        }
-    }
-    pub(crate) fn inherited(&self) -> bool {
-        match self.info {
-            StyleKeyInfo::Selector(..)
-            | StyleKeyInfo::Transition
-            | StyleKeyInfo::DeferredEffects
-            | StyleKeyInfo::StructuralSelectors
-            | StyleKeyInfo::ResponsiveSelectors => false,
-            StyleKeyInfo::Class(..) => true,
-            StyleKeyInfo::DebugGroup(v) => v.inherited,
-            StyleKeyInfo::Prop(v) => v.inherited,
-        }
-    }
-}
-
-impl PartialEq for StyleKey {
-    fn eq(&self, other: &Self) -> bool {
-        ptr::eq(self.info, other.info)
-    }
-}
-
-impl Hash for StyleKey {
-    fn hash<H: Hasher>(&self, state: &mut H) {
-        state.write_usize(self.info as *const _ as usize)
-    }
-}
-
-impl Eq for StyleKey {}
-
-impl Debug for StyleKey {
-    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
-        match self.info {
-            StyleKeyInfo::Selector(selectors) => {
-                write!(f, "selectors: {}", selectors.debug_string())
-            }
-            StyleKeyInfo::Transition => write!(f, "transition"),
-            StyleKeyInfo::DeferredEffects => write!(f, "DeferredEffects"),
-            StyleKeyInfo::StructuralSelectors => write!(f, "StructuralSelectors"),
-            StyleKeyInfo::ResponsiveSelectors => write!(f, "ResponsiveSelectors"),
-            StyleKeyInfo::Class(v) => write!(f, "{}", (v.name)()),
-            StyleKeyInfo::DebugGroup(v) => write!(f, "{}", (v.name)()),
-            StyleKeyInfo::Prop(v) => write!(f, "{}", (v.name)()),
-        }
-    }
-}
diff --git a/src/style/sink.rs b/src/style/sink.rs
new file mode 100644
index 000000000..88f142792
--- /dev/null
+++ b/src/style/sink.rs
@@ -0,0 +1,43 @@
+//! Floem's `AnimationBackend` for the style engine's cascade.
+//!
+//! Engine-side, the cascade reads everything it needs from a
+//! [`floem_style::CascadeInputs`] struct and delegates the animation
+//! tick to an [`AnimationBackend`]. Floem keeps its animation state on
+//! per-view `ViewState.animations` stacks, so its backend is a small
+//! adapter that finds the owning `ViewId` for a `StyleNodeId` and
+//! forwards the tick into that view's stack.
+//!
+//! The closure `WindowState::run_style_cascade` uses to populate
+//! `CascadeInputs::interactions` lives inline at the call site —
+//! it's simpler than a trait impl and the short lifetime is exactly
+//! right for the duration of one `compute_style` call.
+
+use floem_style::{AnimationBackend, StyleNodeId};
+use rustc_hash::FxHashMap;
+
+use crate::style::{InteractionState, Style};
+use crate::view::ViewId;
+
+/// `AnimationBackend` wired to floem's per-view `ViewState.animations`
+/// stacks. Holds only a borrow of the `StyleNodeId → ViewId` reverse
+/// map so the method can find the right view to tick for each node.
+/// All mutation happens through `ViewState`'s `RefCell`, so the
+/// `&self` signature is honest.
+pub(crate) struct FloemAnimationBackend<'a> {
+    pub(crate) style_node_to_view: &'a FxHashMap<StyleNodeId, ViewId>,
+}
+
+impl AnimationBackend for FloemAnimationBackend<'_> {
+    fn apply(
+        &self,
+        node: StyleNodeId,
+        combined: &mut Style,
+        interact: &mut InteractionState,
+    ) -> bool {
+        let Some(view_id) = self.style_node_to_view.get(&node).copied() else {
+            return false;
+        };
+        let view_state = view_id.state();
+        view_state.borrow_mut().apply_animations(combined, interact)
+    }
+}
diff --git a/src/style/storage.rs b/src/style/storage.rs
new file mode 100644
index 000000000..1fc34393d
--- /dev/null
+++ b/src/style/storage.rs
@@ -0,0 +1,75 @@
+//! Per-node storage for the style engine.
+//!
+//! Fields the style engine reads and writes for each node live here, separate
+//! from `ViewState`'s view-layer concerns (event listeners, menus, layout-id
+//! bookkeeping, user cursor, etc.). In Phase 2 this becomes the state exposed
+//! by the `StyleNode` trait, letting a second consumer such as `floem-native`
+//! run the same engine over its own node type.
+
+use crate::style::{
+    CursorStyle, InheritedInteractionCx, LayoutProps, Style, StyleSelectors, TransformProps,
+};
+use crate::view::state::{ViewStyleProps, Visibility};
+
+/// Engine-owned per-node state produced and consumed by the style pass.
+#[derive(Default)]
+pub(crate) struct StyleStorage {
+    pub has_style_selectors: Option<StyleSelectors>,
+    pub layout_props: LayoutProps,
+    pub view_style_props: ViewStyleProps,
+    pub view_transform_props: TransformProps,
+    /// The resolved style for this view (base + selectors + classes).
+    /// Does NOT include inherited properties from ancestors.
+    ///
+    /// Use for style resolution logic (what did this view define?):
+    /// - Checking if a property is explicitly set on this view
+    /// - Computing class context propagation to children
+    /// - Building style cache keys
+    pub combined_style: Style,
+    /// The final computed style including inherited properties from ancestors.
+    /// This is combined_style merged with inherited context (font_size, color, etc.).
+    ///
+    /// Use for rendering and layout (what will the user see?):
+    /// - Layout calculations via prop extractors
+    /// - Visual properties (background, border, transform)
+    /// - Anything that affects what gets rendered
+    /// - Converting to taffy style for layout engine
+    ///
+    /// This DOES NOT have final interpolated values and it DOES NOT resolve properties into points.
+    pub computed_style: Style,
+    /// The inherited properties context for children.
+    /// Contains only properties marked as `inherited` (font-size, color, etc.).
+    ///
+    /// Derived from this view's computed_style (which includes inherited properties
+    /// from ancestors). Children will merge this with their combined_style to produce
+    /// their computed_style.
+    pub style_cx: Style,
+    /// The class context containing class definitions for descendants.
+    /// Contains `.class(SomeClass, ...)` nested maps that flow down the tree.
+    ///
+    /// Derived from this view's combined_style (only explicitly set class definitions).
+    /// Children will use this to resolve their class references when computing their
+    /// combined_style.
+    pub class_cx: Style,
+    /// Full post-cascade interaction state (ancestor-inherited OR'd with
+    /// this view's own direct/selector/animated bits), mirrored from the
+    /// [`floem_style::StyleTree`] cascade each pass by
+    /// [`WindowState::run_style_cascade`](crate::window::state::WindowState::run_style_cascade).
+    ///
+    /// Used by `style_view` to seed `view_interact_state`, by the public
+    /// [`ViewId::is_disabled`](crate::view::ViewId::is_disabled) query, and
+    /// as this view's inherited interaction when resolving a descendant's
+    /// style cx.
+    pub style_interaction_cx: InheritedInteractionCx,
+    /// Interaction cx set by a parent on this view; consumed when building the
+    /// StyleCx for this view.
+    pub parent_set_style_interaction: InheritedInteractionCx,
+    /// Controls view visibility for phase transitions.
+    pub visibility: Visibility,
+    /// The cursor style set by the style pass on the view.
+    /// There is also a user-set cursor (on `ViewState`) which takes precedence.
+    pub style_cursor: Option<CursorStyle>,
+    /// Number of enter/exit animations still running for this view; when this
+    /// hits zero the visibility phase can transition to its final state.
+    pub num_waiting_animations: u16,
+}
diff --git a/src/style/style_debug_ext.rs b/src/style/style_debug_ext.rs
new file mode 100644
index 000000000..f1fe65b58
--- /dev/null
+++ b/src/style/style_debug_ext.rs
@@ -0,0 +1,18 @@
+//! `StyleDebugViewExt` — the inspector entry point for rendering a `Style`
+//! as a tree of debug rows.
+//!
+//! This is an extension trait rather than an inherent method because [`Style`]
+//! lives in `floem_style` (which has no `View` or widget layer), so the orphan
+//! rule prevents inherent impls here. The implementation body lives in
+//! `src/style/values.rs` alongside the `style_debug_*` helper functions it
+//! drives.
+
+use crate::View;
+use crate::style::Style;
+
+pub trait StyleDebugViewExt {
+    /// Render this style as a tabbed inspector view (properties, selectors,
+    /// classes). `direct_style`, when provided, marks props that were set
+    /// directly on the view vs inherited from context.
+    fn debug_view(&self, direct_style: Option<&Style>) -> Box<dyn View>;
+}
diff --git a/src/style/tests.rs b/src/style/tests.rs
deleted file mode 100644
index 0e7e4ce87..000000000
--- a/src/style/tests.rs
+++ /dev/null
@@ -1,55 +0,0 @@
-//! Unit tests for the style system.
-
-use super::{Background, Padding, PaddingBottom, PaddingLeft, PaddingRight, Style, TextColor};
-use crate::unit::Length;
-use peniko::{Brush, color::palette::css};
-
-#[test]
-fn style_override() {
-    let style1 = Style::new().padding_left(32.0);
-    let style2 = Style::new().padding_left(64.0);
-
-    let style = style1.apply(style2);
-
-    // Check that the combined padding has the expected left value
-    assert_eq!(style.get(PaddingLeft), Length::Pt(64.0));
-
-    let style1 = Style::new().padding_left(32.0).padding_bottom(45.0);
-    let style2 = Style::new().padding_left(64.0);
-
-    let style = style1.apply(style2);
-
-    assert_eq!(style.get(PaddingLeft), Length::Pt(64.0));
-    assert_eq!(style.get(PaddingBottom), Length::Pt(45.0)); // Should be preserved from style1
-
-    // Test with explicit combined padding struct
-    let style1 = Style::new().apply_padding(Padding::new().left(32.0).bottom(45.0));
-    let style2 = Style::new().apply_padding(Padding::new().left(64.0));
-
-    let style = style1.apply(style2);
-
-    assert_eq!(style.get(PaddingLeft), Length::Pt(64.0));
-    assert_eq!(style.get(PaddingBottom), Length::Pt(45.));
-
-    // Test that individual methods work correctly within a single style
-    let style1 = Style::new().padding_left(32.0).padding_bottom(45.0);
-
-    assert_eq!(style1.get(PaddingLeft), Length::Pt(32.0));
-    assert_eq!(style1.get(PaddingBottom), Length::Pt(45.0)); // Both values are preserved in same style
-
-    // Test aggregate helper on top of split props
-    let custom_padding = Padding::new().left(100.0).right(200.0);
-    let style1 = Style::new().apply_padding(custom_padding);
-
-    assert_eq!(style1.get(PaddingLeft), Length::Pt(100.0));
-    assert_eq!(style1.get(PaddingRight), Length::Pt(200.0));
-}
-
-#[test]
-fn context_value_resolves_at_property_read() {
-    let style = Style::new()
-        .set(TextColor, Some(css::RED))
-        .with::<TextColor>(|s, t| s.set_context(Background, t.map(|tc| tc.map(Brush::Solid))));
-
-    assert_eq!(style.get(Background), Some(Brush::Solid(css::RED)));
-}
diff --git a/src/style/theme.rs b/src/style/theme.rs
index a94bbfcae..9b83b811d 100644
--- a/src/style/theme.rs
+++ b/src/style/theme.rs
@@ -7,7 +7,7 @@ use crate::view::View;
 use crate::views::editor::SelectionColor;
 use crate::views::resizable::{ResizableClass, ResizableHandleClass};
 use crate::{
-    AnyView, prop, style_class, style_debug_group,
+    prop, style_class, style_debug_group,
     views::{
         ButtonClass, CheckboxClass, LabelClass, LabelCustomExprStyle, LabelCustomStyle,
         LabeledCheckboxClass, LabeledRadioButtonClass, ListClass, ListItemClass,
@@ -19,60 +19,60 @@ use crate::{
         slider::{SliderClass, SliderCustomExprStyle, SliderCustomStyle},
     },
 };
-use floem_renderer::text::FontWeight;
 use peniko::{Brush, Color, color::palette::css};
 use smallvec::smallvec;
 
 style_class!(pub HoverTargetClass);
 
+fn debug_view_of<T: PropDebugView>(value: T) -> Option<Box<dyn View>> {
+    value
+        .debug_view(&FloemInspectorRender)
+        .and_then(|any| any.downcast::<Box<dyn View>>().ok().map(|b| *b))
+}
+
 fn border_debug_view(style: &Style) -> Option<Box<dyn View>> {
-    Border {
+    debug_view_of(Border {
         left: style.get_prop::<BorderLeft>(),
         top: style.get_prop::<BorderTop>(),
         right: style.get_prop::<BorderRight>(),
         bottom: style.get_prop::<BorderBottom>(),
-    }
-    .debug_view()
+    })
 }
 
 fn border_color_debug_view(style: &Style) -> Option<Box<dyn View>> {
-    BorderColor {
+    debug_view_of(BorderColor {
         left: style.get_prop::<BorderLeftColor>().flatten(),
         top: style.get_prop::<BorderTopColor>().flatten(),
         right: style.get_prop::<BorderRightColor>().flatten(),
         bottom: style.get_prop::<BorderBottomColor>().flatten(),
-    }
-    .debug_view()
+    })
 }
 
 fn border_radius_debug_view(style: &Style) -> Option<Box<dyn View>> {
-    BorderRadius {
+    debug_view_of(BorderRadius {
         top_left: style.get_prop::<BorderTopLeftRadius>(),
         top_right: style.get_prop::<BorderTopRightRadius>(),
         bottom_left: style.get_prop::<BorderBottomLeftRadius>(),
         bottom_right: style.get_prop::<BorderBottomRightRadius>(),
-    }
-    .debug_view()
+    })
 }
 
 fn padding_debug_view(style: &Style) -> Option<Box<dyn View>> {
-    Padding {
+    debug_view_of(Padding {
         left: style.get_prop::<PaddingLeft>(),
         top: style.get_prop::<PaddingTop>(),
         right: style.get_prop::<PaddingRight>(),
         bottom: style.get_prop::<PaddingBottom>(),
-    }
-    .debug_view()
+    })
 }
 
 fn margin_debug_view(style: &Style) -> Option<Box<dyn View>> {
-    Margin {
+    debug_view_of(Margin {
         left: style.get_prop::<MarginLeft>(),
         top: style.get_prop::<MarginTop>(),
         right: style.get_prop::<MarginRight>(),
         bottom: style.get_prop::<MarginBottom>(),
-    }
-    .debug_view()
+    })
 }
 
 style_debug_group!(
@@ -106,273 +106,7 @@ style_debug_group!(
     view = margin_debug_view
 );
 
-#[derive(Debug, Clone, PartialEq)]
-pub struct DesignSystem {
-    pub bg_base: Color,
-    pub text_base: Color,
-    pub text_lightness: f32,
-    pub primary_base: Color,
-    pub success_base: Color,
-    pub warning_base: Color,
-    pub danger_base: Color,
-    pub is_dark: bool,
-    pub padding: f32,
-    pub border_radius: f32,
-    pub font_size: f64,
-}
-// const BORDER_RADIUS: f32 = 5.0;
-// const FONT_SIZE: f32 = 12.0;
-
-impl DesignSystem {
-    /// Create a light mode design system.
-    pub fn light() -> Self {
-        Self {
-            bg_base: Color::from_rgb8(248, 248, 248),
-            text_base: Color::from_rgb8(0, 0, 0),
-            text_lightness: 0.05,
-            primary_base: Color::from_rgb8(0x18, 0x96, 0xC2),
-            success_base: Color::from_rgb8(0x2D, 0x9D, 0x67),
-            warning_base: Color::from_rgb8(0xE5, 0xA2, 0x23),
-            danger_base: Color::from_rgb8(0xD7, 0x37, 0x45),
-            padding: 5.,
-            border_radius: 5.,
-            font_size: 14.,
-            is_dark: false,
-        }
-    }
-
-    /// Create a dark mode design system.
-    pub fn dark() -> Self {
-        Self {
-            bg_base: Color::from_rgb8(0x24, 0x24, 0x24),
-            text_base: Color::from_rgb8(255, 255, 255),
-            text_lightness: 0.95,
-            primary_base: Color::from_rgb8(0x3A, 0xAA, 0xD8),
-            success_base: Color::from_rgb8(0x4A, 0xBE, 0x8A),
-            warning_base: Color::from_rgb8(0xF5, 0xB8, 0x4E),
-            danger_base: Color::from_rgb8(0xF0, 0x56, 0x54),
-            padding: 5.,
-            border_radius: 5.,
-            font_size: 14.,
-            is_dark: true,
-        }
-    }
-
-    // Background levels
-
-    pub fn bg_base(&self) -> Color {
-        self.bg_base
-    }
-
-    pub fn bg_elevated(&self) -> Color {
-        let adjustment = 0.05;
-        self.bg_base.map_lightness(|l| l + adjustment)
-    }
-
-    pub fn bg_overlay(&self) -> Color {
-        let adjustment = 0.10;
-        self.bg_base.map_lightness(|l| l + adjustment)
-    }
-
-    pub fn bg_disabled(&self) -> Color {
-        let adjustment = if self.is_dark { -0.05 } else { -0.1 };
-        self.bg_base.map_lightness(|l| l + adjustment)
-    }
-
-    // Border
-
-    pub fn border(&self) -> Color {
-        let adjustment = if self.is_dark { 0.25 } else { -0.25 };
-        self.bg_base.map_lightness(|l| l + adjustment)
-    }
-
-    pub fn border_muted(&self) -> Color {
-        let adjustment = if self.is_dark { 0.15 } else { -0.15 };
-        self.border()
-            .map_lightness(|l| l + adjustment)
-            .with_alpha(0.8)
-    }
-
-    // Text
-
-    pub fn text(&self) -> Color {
-        self.text_base.map_lightness(|_| self.text_lightness)
-    }
-
-    pub fn text_muted(&self) -> Color {
-        let adjustment = if self.is_dark { -0.25 } else { 0.25 };
-        self.text_base
-            .map_lightness(|l| l + adjustment)
-            .with_alpha(0.5)
-    }
-
-    // Primary
-
-    pub fn primary(&self) -> Color {
-        self.primary_base
-    }
-
-    pub fn primary_muted(&self) -> Color {
-        self.primary_base.map_lightness(|l| l - 0.05)
-    }
-
-    // Semantic colors
-
-    pub fn success(&self) -> Color {
-        self.success_base
-    }
-
-    pub fn warning(&self) -> Color {
-        self.warning_base
-    }
-
-    pub fn danger(&self) -> Color {
-        self.danger_base
-    }
-
-    pub fn info(&self) -> Color {
-        self.primary_base
-    }
-
-    pub fn padding(&self) -> f32 {
-        self.padding
-    }
-
-    pub fn border_radius(&self) -> f32 {
-        self.border_radius
-    }
-
-    pub fn font_size(&self) -> f64 {
-        self.font_size
-    }
-}
-
-impl StylePropValue for DesignSystem {
-    fn debug_view(&self) -> Option<AnyView> {
-        use crate::prelude::*;
-        use crate::views::Stack;
-
-        let design_system = self.clone();
-        let is_expanded = RwSignal::new(false);
-
-        let color_swatch = |label: &str, color: Color| {
-            Stack::new((
-                label.to_string().style(|s| s.width(120.0).font_size(12.0)),
-                color.debug_view().unwrap(),
-            ))
-            .style(|s| s.flex_row().items_center().gap(8.0).padding_vert(2.0))
-        };
-
-        let scalar_field = |label: &str, value: f64| {
-            Stack::new((
-                label.to_string().style(|s| s.width(120.0).font_size(12.0)),
-                format!("{:.2}", value).style(|s| s.font_size(12.0)),
-            ))
-            .style(|s| s.flex_row().items_center().gap(8.0).padding_vert(2.0))
-        };
-
-        let chevron = move || {
-            if is_expanded.get() {
-                svg(
-                    r#"<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M4.427 6.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 6H4.604a.25.25 0 00-.177.427z"/></svg>"#,
-                )
-            } else {
-                svg(
-                    r#"<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M6.427 4.427l3.396 3.396a.25.25 0 010 .354l-3.396 3.396A.25.25 0 016 11.396V4.604a.25.25 0 01.427-.177z"/></svg>"#,
-                )
-            }.style(|s| s.size_full().with_theme(|s, t| s.color(t.text())))
-        };
-
-        let header = Stack::new((
-            dyn_view(chevron)
-                .class(ButtonClass)
-                .style(|s| s.size(16.0, 16.0).padding(0.)),
-            "Design System"
-                .to_string()
-                .style(|s| s.font_size(14.0).font_weight(FontWeight::SEMI_BOLD)),
-        ))
-        .action(move || {
-            is_expanded.update(|v| *v = !*v);
-        })
-        .style(|s| {
-            s.flex_row()
-                .items_center()
-                .gap(8.0)
-                .cursor(CursorStyle::Pointer)
-        });
-
-        let content = Stack::new((
-            header,
-            Stack::new((
-                color_swatch("bg_base", design_system.bg_base),
-                color_swatch("text_base", design_system.text_base),
-                color_swatch("primary_base", design_system.primary_base),
-                color_swatch("success_base", design_system.success_base),
-                color_swatch("warning_base", design_system.warning_base),
-                color_swatch("danger_base", design_system.danger_base),
-                scalar_field("text_lightness", f64::from(design_system.text_lightness)),
-                scalar_field("padding", f64::from(design_system.padding)),
-                scalar_field("border_radius", f64::from(design_system.border_radius)),
-                scalar_field("font_size", design_system.font_size),
-                format!("is_dark: {}", design_system.is_dark).style(|s| s.font_size(12.0)),
-            ))
-            .style(move |s| s.flex_col().gap(4.0))
-            .clip()
-            .style(move |s| {
-                s.height_pct(100.)
-                    .apply_if(!is_expanded.get(), |s| s.height_pct(0.))
-                    .transition_height(Transition::ease_in_out(Duration::from_millis(200)))
-            }),
-        ))
-        .style(|s| {
-            // this view here should be getting set to have a height of just the two children combined
-            // I think this is a bug in taffy
-            s.flex_col()
-                .padding(8.0)
-                .border(1.)
-                .border_color(palette::css::WHITE.with_alpha(0.3))
-                .border_radius(6.0)
-                .min_width(280.0)
-                .min_height_pct(0.)
-                .flex_grow(0.)
-                .flex_shrink(1.)
-        });
-
-        Some(content.into_any())
-    }
-
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        use peniko::color::HueDirection;
-        let t = value as f32;
-        let inv_t = 1.0 - t;
-        let t64 = value;
-        let inv_t64 = 1.0 - t64;
-
-        Some(DesignSystem {
-            bg_base: self.bg_base.lerp(other.bg_base, t, HueDirection::default()),
-            text_base: self
-                .text_base
-                .lerp(other.text_base, t, HueDirection::default()),
-            text_lightness: self.text_lightness * inv_t + other.text_lightness * t,
-            primary_base: self
-                .primary_base
-                .lerp(other.primary_base, t, HueDirection::default()),
-            success_base: self
-                .success_base
-                .lerp(other.success_base, t, HueDirection::default()),
-            warning_base: self
-                .warning_base
-                .lerp(other.warning_base, t, HueDirection::default()),
-            danger_base: self
-                .danger_base
-                .lerp(other.danger_base, t, HueDirection::default()),
-            is_dark: if t < 0.5 { self.is_dark } else { other.is_dark },
-            padding: self.padding * inv_t + other.padding * t,
-            border_radius: self.border_radius * inv_t + other.border_radius * t,
-            font_size: self.font_size * inv_t64 + other.font_size * t64,
-        })
-    }
-}
+pub use floem_style::DesignSystem;
 
 prop!(
     pub Theme: DesignSystem { inherited } = DesignSystem::light()
diff --git a/src/style/transition_ext.rs b/src/style/transition_ext.rs
new file mode 100644
index 000000000..87dcf46ad
--- /dev/null
+++ b/src/style/transition_ext.rs
@@ -0,0 +1,161 @@
+//! Inspector-preview extension for `Transition`.
+//!
+//! `Transition` itself lives in `floem_style` so that the style engine can be
+//! reused by hosts that do not pull in the view layer. Its rich inspector
+//! preview (a canvas + tooltip) constructs `floem` views, so it's split out
+//! into this extension trait that lives in the `floem` crate alongside the
+//! view types it depends on.
+
+use floem_reactive::{RwSignal, SignalGet};
+use floem_renderer::Renderer;
+use peniko::color::palette;
+use peniko::kurbo::{self, Point, Stroke};
+use taffy::prelude::{auto, fr};
+
+use crate::theme::StyleThemeExt;
+use crate::view::{IntoView, View};
+use crate::views::{ContainerExt, Decorators, Label, Stack, TooltipExt, canvas};
+
+pub trait TransitionDebugViewExt {
+    fn debug_view(&self) -> Box<dyn View>;
+}
+
+impl TransitionDebugViewExt for floem_style::Transition {
+    fn debug_view(&self) -> Box<dyn View> {
+        let transition = self.clone();
+        let easing_clone = transition.easing.clone();
+
+        let curve_color = RwSignal::new(palette::css::BLUE);
+        let axis_color = RwSignal::new(palette::css::GRAY);
+
+        // Visual preview of the easing curve
+        let preview = canvas(move |cx, size| {
+            let width = size.width;
+            let height = size.height;
+            let padding = 4.0;
+            let graph_width = width - padding * 2.0;
+            let graph_height = height - padding * 2.0;
+
+            // Sample the easing function
+            let sample_count = 50;
+            let mut path = kurbo::BezPath::new();
+
+            for i in 0..=sample_count {
+                let t = i as f64 / sample_count as f64;
+                let eased = easing_clone.eval(t);
+                let x = padding + t * graph_width;
+                let y = padding + (1.0 - eased) * graph_height;
+
+                if i == 0 {
+                    path.move_to(Point::new(x, y));
+                } else {
+                    path.line_to(Point::new(x, y));
+                }
+            }
+
+            // Draw the curve
+            cx.stroke(
+                &path,
+                curve_color.get(),
+                &Stroke {
+                    width: 2.0,
+                    ..Default::default()
+                },
+            );
+
+            // Draw axes
+            let axis_stroke = Stroke {
+                width: 1.0,
+                ..Default::default()
+            };
+
+            // X axis
+            cx.stroke(
+                &kurbo::Line::new(
+                    Point::new(padding, height - padding),
+                    Point::new(width - padding, height - padding),
+                ),
+                axis_color.get(),
+                &axis_stroke,
+            );
+
+            // Y axis
+            cx.stroke(
+                &kurbo::Line::new(
+                    Point::new(padding, padding),
+                    Point::new(padding, height - padding),
+                ),
+                axis_color.get(),
+                &axis_stroke,
+            );
+        })
+        .style(|s| s.width(80.0).height(60.0))
+        .container()
+        .style(move |s| {
+            s.padding(4.0)
+                .border(1.)
+                .border_radius(5.0)
+                .with_theme(move |s, t| s.border_color(t.border()))
+        });
+
+        let tooltip_view = move || {
+            let transition = transition.clone();
+
+            let duration_row = super::debug_view_impl::views((
+                "Duration:".style(|s| s.font_bold().min_width(80.0).justify_end()),
+                Label::derived(move || format!("{:.0}ms", transition.duration.as_millis())),
+            ));
+
+            let easing_name = format!("{:?}", transition.easing);
+            let easing_row = super::debug_view_impl::views((
+                "Easing:".style(|s| s.font_bold().min_width(80.0).justify_end()),
+                Label::derived(move || easing_name.clone()),
+            ));
+
+            // Show velocity at key points if available
+            let velocity_samples = if transition.easing.velocity(0.0).is_some() {
+                let samples = vec![0.0, 0.25, 0.5, 0.75, 1.0]
+                    .into_iter()
+                    .filter_map(|t| {
+                        transition
+                            .easing
+                            .velocity(t)
+                            .map(|v| Label::new(format!("t={:.2}: {:.3}", t, v)))
+                    })
+                    .collect::<Vec<_>>();
+
+                if !samples.is_empty() {
+                    Some(super::debug_view_impl::views((
+                        "Velocity:".style(|s| s.font_bold().min_width(80.0).justify_end()),
+                        Stack::vertical_from_iter(samples).style(|s| s.gap(2.0)),
+                    )))
+                } else {
+                    None
+                }
+            } else {
+                None
+            };
+
+            let mut rows = vec![duration_row.into_any(), easing_row.into_any()];
+
+            if let Some(velocity_row) = velocity_samples {
+                rows.push(velocity_row.into_any());
+            }
+
+            Stack::vertical_from_iter(rows).style(|s| {
+                s.grid()
+                    .grid_template_columns([auto(), fr(1.)])
+                    .justify_center()
+                    .items_center()
+                    .row_gap(12)
+                    .col_gap(10)
+                    .padding(20)
+            })
+        };
+
+        preview
+            .tooltip(tooltip_view)
+            .style(|s| s.items_center())
+            .into_any()
+    }
+}
diff --git a/src/style/values.rs b/src/style/values.rs
deleted file mode 100644
index 99b9140ec..000000000
--- a/src/style/values.rs
+++ /dev/null
@@ -1,2503 +0,0 @@
-//! Core style property value trait and implementations.
-
-use floem_reactive::{RwSignal, SignalGet, SignalUpdate as _};
-use floem_renderer::Renderer;
-use floem_renderer::text::{FontWeight, LineHeightValue};
-use peniko::color::{HueDirection, palette};
-use peniko::kurbo::{self, Affine, Point, Stroke, Vec2};
-use peniko::{
-    Brush, Color, ColorStop, ColorStops, Gradient, GradientKind, InterpolationAlphaSpace,
-    LinearGradientPosition,
-};
-use smallvec::SmallVec;
-use std::collections::HashSet;
-use std::fmt::Debug;
-use std::rc::Rc;
-use taffy::GridTemplateComponent;
-use taffy::prelude::{auto, fr};
-
-#[cfg(not(target_arch = "wasm32"))]
-use std::time::Duration;
-#[cfg(target_arch = "wasm32")]
-use web_time::Duration;
-
-use taffy::style::{
-    AlignContent, AlignItems, BoxSizing, Display, FlexDirection, FlexWrap, Overflow, Position,
-};
-use taffy::{
-    geometry::{MinMax, Size},
-    prelude::{GridPlacement, Line},
-    style::{LengthPercentage, MaxTrackSizingFunction, MinTrackSizingFunction},
-};
-
-use crate::AnyView;
-use crate::prelude::ViewTuple;
-use crate::style::CursorStyle;
-use crate::theme::StyleThemeExt;
-use crate::theme::Theme;
-use crate::unit::{Length, LengthAuto, Pct, Pt};
-use crate::view::ViewTupleFlat;
-use crate::view::{IntoView, View};
-use crate::views::{
-    ButtonClass, ContainerExt, Decorators, Empty, Label, Stack, StackExt, TabSelectorClass,
-    TooltipExt, canvas, dyn_view, svg, tab,
-};
-
-use super::{
-    FontSize, ResponsiveSelectors, StructuralSelectors, Style, StyleDebugGroupInfo, StyleKey,
-    StyleKeyInfo, StylePropRef, Transition,
-};
-
-pub struct ContextValue<T> {
-    pub(crate) eval: Rc<dyn Fn(&Style) -> T>,
-}
-
-impl<T> Clone for ContextValue<T> {
-    fn clone(&self) -> Self {
-        Self {
-            eval: self.eval.clone(),
-        }
-    }
-}
-
-impl<T> std::fmt::Debug for ContextValue<T> {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        f.write_str("ContextValue(..)")
-    }
-}
-
-impl<T> PartialEq for ContextValue<T> {
-    fn eq(&self, other: &Self) -> bool {
-        Rc::ptr_eq(&self.eval, &other.eval)
-    }
-}
-
-impl<T> Eq for ContextValue<T> {}
-
-impl<T> ContextValue<T> {
-    pub(crate) fn new(eval: impl Fn(&Style) -> T + 'static) -> Self {
-        Self {
-            eval: Rc::new(eval),
-        }
-    }
-
-    pub fn resolve(&self, style: &Style) -> T {
-        floem_reactive::Runtime::with_effect(style.effect_context.clone(), || {
-            // todo use context
-            (self.eval)(style)
-        })
-    }
-
-    pub fn map<U>(self, f: impl Fn(T) -> U + 'static) -> ContextValue<U>
-    where
-        T: 'static,
-    {
-        let eval = self.eval;
-        ContextValue::new(move |style| f(eval(style)))
-    }
-}
-
-pub trait StylePropValue: Clone + PartialEq + Debug {
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        None
-    }
-
-    fn interpolate(&self, _other: &Self, _value: f64) -> Option<Self> {
-        None
-    }
-
-    /// Compute a content-based hash for this value.
-    ///
-    /// This hash is used for style caching - identical values should produce
-    /// identical hashes. The default implementation uses the Debug representation,
-    /// which works for most types but allocates. Types should override this
-    /// for better performance.
-    fn content_hash(&self) -> u64 {
-        use std::hash::{Hash, Hasher};
-        let mut hasher = rustc_hash::FxHasher::default();
-        let debug_str = format!("{:?}", self);
-        debug_str.hash(&mut hasher);
-        hasher.finish()
-    }
-}
-
-/// Hash a type that implements `Hash` using FxHasher.
-#[inline]
-fn hash_value<T: std::hash::Hash>(val: &T) -> u64 {
-    use std::hash::Hasher;
-    let mut h = rustc_hash::FxHasher::default();
-    val.hash(&mut h);
-    h.finish()
-}
-
-/// Hash an f64 by its bit representation.
-#[inline]
-fn hash_f64(val: f64) -> u64 {
-    use std::hash::{Hash, Hasher};
-    let mut h = rustc_hash::FxHasher::default();
-    val.to_bits().hash(&mut h);
-    h.finish()
-}
-
-/// Hash an f32 by its bit representation.
-#[inline]
-fn hash_f32(val: f32) -> u64 {
-    use std::hash::{Hash, Hasher};
-    let mut h = rustc_hash::FxHasher::default();
-    val.to_bits().hash(&mut h);
-    h.finish()
-}
-
-impl StylePropValue for i32 {
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        Some((*self as f64 + (*other as f64 - *self as f64) * value).round() as i32)
-    }
-    fn content_hash(&self) -> u64 {
-        hash_value(self)
-    }
-}
-impl StylePropValue for bool {
-    fn content_hash(&self) -> u64 {
-        hash_value(self)
-    }
-}
-impl StylePropValue for f32 {
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        Some(*self * (1.0 - value as f32) + *other * value as f32)
-    }
-    fn content_hash(&self) -> u64 {
-        hash_f32(*self)
-    }
-}
-impl StylePropValue for u16 {
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        Some((*self as f64 + (*other as f64 - *self as f64) * value).round() as u16)
-    }
-    fn content_hash(&self) -> u64 {
-        hash_value(self)
-    }
-}
-impl StylePropValue for usize {
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        Some((*self as f64 + (*other as f64 - *self as f64) * value).round() as usize)
-    }
-    fn content_hash(&self) -> u64 {
-        hash_value(self)
-    }
-}
-impl StylePropValue for f64 {
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        Some(*self * (1.0 - value) + *other * value)
-    }
-    fn content_hash(&self) -> u64 {
-        hash_f64(*self)
-    }
-}
-// Taffy enums — use discriminant-based hashing (no Hash derive available).
-// For simple enums with no data fields, discriminant alone is a perfect hash.
-// For enums with data, we combine discriminant with field hashes.
-
-impl StylePropValue for Overflow {
-    fn content_hash(&self) -> u64 {
-        hash_value(&std::mem::discriminant(self))
-    }
-}
-impl StylePropValue for Display {
-    fn content_hash(&self) -> u64 {
-        hash_value(&std::mem::discriminant(self))
-    }
-}
-impl StylePropValue for Position {
-    fn content_hash(&self) -> u64 {
-        hash_value(&std::mem::discriminant(self))
-    }
-}
-impl StylePropValue for FlexDirection {
-    fn content_hash(&self) -> u64 {
-        hash_value(&std::mem::discriminant(self))
-    }
-}
-impl StylePropValue for FlexWrap {
-    fn content_hash(&self) -> u64 {
-        hash_value(&std::mem::discriminant(self))
-    }
-}
-impl StylePropValue for AlignItems {
-    fn content_hash(&self) -> u64 {
-        hash_value(&std::mem::discriminant(self))
-    }
-}
-impl StylePropValue for BoxSizing {
-    fn content_hash(&self) -> u64 {
-        hash_value(&std::mem::discriminant(self))
-    }
-}
-impl StylePropValue for AlignContent {
-    fn content_hash(&self) -> u64 {
-        hash_value(&std::mem::discriminant(self))
-    }
-}
-impl StylePropValue for GridTemplateComponent<String> {}
-impl StylePropValue for MinTrackSizingFunction {}
-impl StylePropValue for MaxTrackSizingFunction {}
-impl<T: StylePropValue, M: StylePropValue> StylePropValue for MinMax<T, M> {
-    fn content_hash(&self) -> u64 {
-        hash_value(&(self.min.content_hash(), self.max.content_hash()))
-    }
-}
-impl<T: StylePropValue> StylePropValue for Line<T> {
-    fn content_hash(&self) -> u64 {
-        hash_value(&(self.start.content_hash(), self.end.content_hash()))
-    }
-}
-impl StylePropValue for taffy::GridAutoFlow {
-    fn content_hash(&self) -> u64 {
-        hash_value(&std::mem::discriminant(self))
-    }
-}
-impl StylePropValue for GridPlacement {}
-
-/// How the content of a replaced element, such as an img, should be resized to fit its container.
-/// Corresponds to the CSS `object-fit` property.
-/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit>.
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Default)]
-pub enum ObjectFit {
-    /// The replaced content is sized to fill the element's content box.
-    /// The entire object will completely fill the box.
-    /// If the object's aspect ratio does not match the aspect ratio of its box,
-    /// then the object will be stretched to fit.
-    #[default]
-    Fill,
-    /// The replaced content is scaled to maintain its aspect ratio while fitting
-    /// within the element's content box. The entire object is made to fill the box,
-    /// while preserving its aspect ratio, so the object will be "letterboxed"
-    /// if its aspect ratio does not match the aspect ratio of the box.
-    Contain,
-    /// The content is sized to maintain its aspect ratio while filling the element's
-    /// entire content box. If the object's aspect ratio does not match the aspect
-    /// ratio of its box, then the object will be clipped to fit.
-    Cover,
-    /// The content is sized as if none or contain were specified, whichever would
-    /// result in a smaller concrete object size.
-    ScaleDown,
-    /// The replaced content is not resized.
-    None,
-}
-
-/// Where the content of a replaced element should be positioned inside its container.
-/// Corresponds to common CSS `object-position` keyword combinations.
-#[derive(Debug, Clone, Copy, PartialEq, Default)]
-pub enum ObjectPosition {
-    /// Align content to the top-left corner.
-    TopLeft,
-    /// Align content to the top edge and center horizontally.
-    Top,
-    /// Align content to the top-right corner.
-    TopRight,
-    /// Align content to the left edge and center vertically.
-    Left,
-    /// Center content both horizontally and vertically.
-    #[default]
-    Center,
-    /// Align content to the right edge and center vertically.
-    Right,
-    /// Align content to the bottom-left corner.
-    BottomLeft,
-    /// Align content to the bottom edge and center horizontally.
-    Bottom,
-    /// Align content to the bottom-right corner.
-    BottomRight,
-    /// Position content using explicit horizontal and vertical offsets.
-    ///
-    /// Percentage values are resolved against the remaining free space on each axis,
-    /// matching CSS object-position behavior.
-    Custom(crate::style::Length, crate::style::Length),
-}
-
-impl StylePropValue for ObjectFit {
-    fn content_hash(&self) -> u64 {
-        hash_value(self)
-    }
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        use peniko::kurbo::RoundedRect;
-
-        let object_fit = *self;
-        let container_color = RwSignal::new(palette::css::GRAY);
-        let image_color = RwSignal::new(palette::css::BLUE);
-
-        // Visual preview showing how an image with 2:1 aspect ratio fits in a square container
-        let preview = canvas(move |cx, size| {
-            let width = size.width;
-            let height = size.height;
-            let padding = 4.0;
-            let container_size = width.min(height) - padding * 2.0;
-
-            // Draw container box (square)
-            let container_x = (width - container_size) / 2.0;
-            let container_y = (height - container_size) / 2.0;
-            let container_rect = RoundedRect::from_rect(
-                kurbo::Rect::new(
-                    container_x,
-                    container_y,
-                    container_x + container_size,
-                    container_y + container_size,
-                ),
-                2.0,
-            );
-            cx.stroke(
-                &container_rect,
-                container_color.get(),
-                &Stroke {
-                    width: 1.5,
-                    ..Default::default()
-                },
-            );
-
-            // Simulate an image with 2:1 aspect ratio (wider than tall)
-            let image_aspect = 2.0;
-            let (img_width, img_height) = match object_fit {
-                ObjectFit::Fill => {
-                    // Stretch to fill container
-                    (container_size, container_size)
-                }
-                ObjectFit::Contain => {
-                    // Fit inside while maintaining aspect ratio
-                    // Image is 2:1, container is 1:1, so width is the constraint
-                    let w = container_size;
-                    let h = w / image_aspect;
-                    (w, h)
-                }
-                ObjectFit::Cover => {
-                    // Cover entire container while maintaining aspect ratio
-                    // Height is the constraint
-                    let h = container_size;
-                    let w = h * image_aspect;
-                    (w, h)
-                }
-                ObjectFit::ScaleDown => {
-                    // Like contain but don't scale up
-                    // Assume natural image size is smaller than container
-                    let natural_w = container_size * 0.6;
-                    let natural_h = natural_w / image_aspect;
-                    (natural_w, natural_h)
-                }
-                ObjectFit::None => {
-                    // Natural size (simulated as 60% of container)
-                    let natural_w = container_size * 0.6;
-                    let natural_h = natural_w / image_aspect;
-                    (natural_w, natural_h)
-                }
-            };
-
-            // Center the image in the container
-            let img_x = container_x + (container_size - img_width) / 2.0;
-            let img_y = container_y + (container_size - img_height) / 2.0;
-
-            // Clip to container bounds for Cover mode
-            if matches!(object_fit, ObjectFit::Cover) {
-                // Draw the image rect (it will extend beyond container)
-                let img_rect = RoundedRect::from_rect(
-                    kurbo::Rect::new(img_x, img_y, img_x + img_width, img_y + img_height),
-                    2.0,
-                );
-                // Show it as semi-transparent to indicate it's clipped
-                let clipped_color = image_color.get().with_alpha(0.7);
-                cx.fill(&img_rect, clipped_color, 0.0);
-            } else {
-                // Draw the image rect normally
-                let img_rect = RoundedRect::from_rect(
-                    kurbo::Rect::new(img_x, img_y, img_x + img_width, img_y + img_height),
-                    2.0,
-                );
-                cx.fill(&img_rect, image_color.get(), 0.0);
-            }
-        })
-        .style(|s| s.width(70.0).height(70.0))
-        .container()
-        .style(move |s| {
-            s.padding(4.0)
-                .border(1.)
-                .border_radius(5.0)
-                .with_theme(move |s, t| s.border_color(t.border()))
-        });
-
-        let label_text = match object_fit {
-            ObjectFit::Fill => "Fill",
-            ObjectFit::Contain => "Contain",
-            ObjectFit::Cover => "Cover",
-            ObjectFit::ScaleDown => "ScaleDown",
-            ObjectFit::None => "None",
-        };
-
-        let tooltip_view = move || {
-            let description = match object_fit {
-                ObjectFit::Fill => "Stretches content to fill the box.\nMay distort aspect ratio.",
-                ObjectFit::Contain => {
-                    "Scales content to fit inside the box.\nPreserves aspect ratio (letterboxed)."
-                }
-                ObjectFit::Cover => {
-                    "Scales content to cover the box.\nPreserves aspect ratio (may clip)."
-                }
-                ObjectFit::ScaleDown => {
-                    "Like 'contain' but won't scale up.\nNever larger than natural size."
-                }
-                ObjectFit::None => {
-                    "Content keeps its natural size.\nMay overflow or be smaller than box."
-                }
-            };
-
-            Stack::vertical((
-                Label::new(label_text).style(|s| s.font_bold()),
-                Label::new(description).style(|s| s.with_theme(|s, t| s.color(t.text_muted()))),
-            ))
-            .style(|s| s.gap(8.0).padding(12.0).max_width(220.0))
-        };
-
-        Some(
-            preview
-                .tooltip(tooltip_view)
-                .style(|s| s.items_center())
-                .into_any(),
-        )
-    }
-}
-
-impl StylePropValue for ObjectPosition {
-    fn content_hash(&self) -> u64 {
-        hash_value(&std::mem::discriminant(self))
-    }
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        use peniko::kurbo::{Circle, RoundedRect};
-
-        let object_position = *self;
-        let container_color = RwSignal::new(palette::css::GRAY);
-        let image_color = RwSignal::new(palette::css::BLUE);
-        let marker_color = RwSignal::new(palette::css::RED);
-
-        let preview = canvas(move |cx, size| {
-            let width = size.width;
-            let height = size.height;
-            let padding = 6.0;
-            let container_size = width.min(height) - padding * 2.0;
-            let container_x = (width - container_size) / 2.0;
-            let container_y = (height - container_size) / 2.0;
-            let container_rect = RoundedRect::from_rect(
-                kurbo::Rect::new(
-                    container_x,
-                    container_y,
-                    container_x + container_size,
-                    container_y + container_size,
-                ),
-                2.0,
-            );
-            cx.stroke(
-                &container_rect,
-                container_color.get(),
-                &Stroke {
-                    width: 1.5,
-                    ..Default::default()
-                },
-            );
-
-            let image_w = container_size * 0.55;
-            let image_h = container_size * 0.35;
-            let free_x = container_size - image_w;
-            let free_y = container_size - image_h;
-            let font_size_cx = crate::style::FontSizeCx::new(16.0, 16.0);
-
-            let (offset_x, offset_y) = match object_position {
-                ObjectPosition::TopLeft => (0.0, 0.0),
-                ObjectPosition::Top => (free_x * 0.5, 0.0),
-                ObjectPosition::TopRight => (free_x, 0.0),
-                ObjectPosition::Left => (0.0, free_y * 0.5),
-                ObjectPosition::Center => (free_x * 0.5, free_y * 0.5),
-                ObjectPosition::Right => (free_x, free_y * 0.5),
-                ObjectPosition::BottomLeft => (0.0, free_y),
-                ObjectPosition::Bottom => (free_x * 0.5, free_y),
-                ObjectPosition::BottomRight => (free_x, free_y),
-                ObjectPosition::Custom(x, y) => (
-                    x.resolve(free_x, &font_size_cx),
-                    y.resolve(free_y, &font_size_cx),
-                ),
-            };
-
-            let img_x = container_x + offset_x;
-            let img_y = container_y + offset_y;
-            let img_rect = RoundedRect::from_rect(
-                kurbo::Rect::new(img_x, img_y, img_x + image_w, img_y + image_h),
-                2.0,
-            );
-            cx.fill(&img_rect, image_color.get(), 0.0);
-
-            let marker = Circle::new(
-                kurbo::Point::new(img_x + image_w / 2.0, img_y + image_h / 2.0),
-                2.5,
-            );
-            cx.fill(&marker, marker_color.get(), 0.0);
-        })
-        .style(|s| s.width(70.0).height(70.0))
-        .container()
-        .style(move |s| {
-            s.padding(4.0)
-                .border(1.)
-                .border_radius(5.0)
-                .with_theme(move |s, t| s.border_color(t.border()))
-        });
-
-        let (label_text, description) = match object_position {
-            ObjectPosition::TopLeft => ("TopLeft", "Anchors content to the top-left corner."),
-            ObjectPosition::Top => (
-                "Top",
-                "Anchors content to the top edge, centered horizontally.",
-            ),
-            ObjectPosition::TopRight => ("TopRight", "Anchors content to the top-right corner."),
-            ObjectPosition::Left => (
-                "Left",
-                "Anchors content to the left edge, centered vertically.",
-            ),
-            ObjectPosition::Center => ("Center", "Centers content on both axes."),
-            ObjectPosition::Right => (
-                "Right",
-                "Anchors content to the right edge, centered vertically.",
-            ),
-            ObjectPosition::BottomLeft => {
-                ("BottomLeft", "Anchors content to the bottom-left corner.")
-            }
-            ObjectPosition::Bottom => (
-                "Bottom",
-                "Anchors content to the bottom edge, centered horizontally.",
-            ),
-            ObjectPosition::BottomRight => {
-                ("BottomRight", "Anchors content to the bottom-right corner.")
-            }
-            ObjectPosition::Custom(x, y) => {
-                let label = format!("Custom({x:?}, {y:?})");
-                let description = "Uses explicit horizontal and vertical offsets. Percentages resolve against remaining free space.";
-                return Some(
-                    preview
-                        .tooltip(move || {
-                            Stack::vertical((
-                                Label::new(label.clone()).style(|s| s.font_bold()),
-                                Label::new(description)
-                                    .style(|s| s.with_theme(|s, t| s.color(t.text_muted()))),
-                            ))
-                            .style(|s| s.gap(8.0).padding(12.0).max_width(240.0))
-                        })
-                        .style(|s| s.items_center())
-                        .into_any(),
-                );
-            }
-        };
-
-        Some(
-            preview
-                .tooltip(move || {
-                    Stack::vertical((
-                        Label::new(label_text).style(|s| s.font_bold()),
-                        Label::new(description)
-                            .style(|s| s.with_theme(|s, t| s.color(t.text_muted()))),
-                    ))
-                    .style(|s| s.gap(8.0).padding(12.0).max_width(240.0))
-                })
-                .style(|s| s.items_center())
-                .into_any(),
-        )
-    }
-}
-
-impl<A: smallvec::Array> StylePropValue for SmallVec<A>
-where
-    <A as smallvec::Array>::Item: StylePropValue,
-{
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        if self.is_empty() {
-            return Some(
-                Label::new("smallvec\n[]")
-                    .style(|s| s.with_theme(|s, t| s.color(t.text_muted())))
-                    .into_any(),
-            );
-        }
-
-        let count = self.len();
-        let is_spilled = self.spilled();
-
-        // Create a preview that shows count and whether it has spilled to heap
-        let preview = Label::derived(move || {
-            if is_spilled {
-                format!("smallvec\n[{}] (heap)", count)
-            } else {
-                format!("smallvec\n[{}] (inline)", count)
-            }
-        })
-        .style(|s| {
-            s.padding(2.0)
-                .padding_horiz(6.0)
-                .items_center()
-                .justify_center()
-                .text_align(parley::Alignment::Center)
-                .border(1.)
-                .border_radius(5.0)
-                .margin_left(6.0)
-                .with_theme(|s, t| s.color(t.text()).border_color(t.border()))
-                .with::<FontSize>(|s, fs| s.font_size(fs.def(|fs| fs * 0.85)))
-        });
-
-        // Clone items for the tooltip view
-        let items = self.clone();
-
-        let tooltip_view = move || {
-            Stack::vertical_from_iter(items.iter().enumerate().map(|(i, item)| {
-                let index_label = Label::new(format!("[{}]", i))
-                    .style(|s| s.with_theme(|s, t| s.color(t.text_muted())));
-
-                let item_view = item.debug_view().unwrap_or_else(|| {
-                    Label::new(format!("{:?}", item))
-                        .style(|s| s.flex_grow(1.0))
-                        .into_any()
-                });
-
-                Stack::new((index_label, item_view))
-                    .style(|s| s.items_center().gap(8.0).padding(4.0))
-            }))
-            .style(|s| s.gap(4.0))
-        };
-
-        // Return the tooltip view wrapped in the preview
-        Some(
-            Stack::new((preview, tooltip_view()))
-                .style(|s| s.gap(8.0))
-                .into_any(),
-        )
-    }
-
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        self.iter().zip(other.iter()).try_fold(
-            SmallVec::with_capacity(self.len()),
-            |mut acc, (v1, v2)| {
-                if let Some(interpolated) = v1.interpolate(v2, value) {
-                    acc.push(interpolated);
-                    Some(acc)
-                } else {
-                    None
-                }
-            },
-        )
-    }
-
-    fn content_hash(&self) -> u64 {
-        use std::hash::{Hash, Hasher};
-        let mut h = rustc_hash::FxHasher::default();
-        self.len().hash(&mut h);
-        for item in self.iter() {
-            item.content_hash().hash(&mut h);
-        }
-        h.finish()
-    }
-}
-impl StylePropValue for String {
-    fn content_hash(&self) -> u64 {
-        hash_value(self)
-    }
-}
-impl StylePropValue for FontWeight {
-    fn content_hash(&self) -> u64 {
-        hash_f32(self.value())
-    }
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        let clone = *self;
-        Some(
-            format!("{clone:?}")
-                .style(move |s| s.font_weight(clone))
-                .into_any(),
-        )
-    }
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        self.value()
-            .interpolate(&other.value(), value)
-            .map(FontWeight::new)
-    }
-}
-impl StylePropValue for crate::text::FontStyle {
-    fn content_hash(&self) -> u64 {
-        hash_value(&std::mem::discriminant(self))
-    }
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        let clone = *self;
-        Some(
-            format!("{clone:?}")
-                .style(move |s| s.font_style(clone))
-                .into_any(),
-        )
-    }
-}
-impl StylePropValue for crate::text::Alignment {
-    fn content_hash(&self) -> u64 {
-        hash_value(&std::mem::discriminant(self))
-    }
-}
-impl StylePropValue for LineHeightValue {
-    fn content_hash(&self) -> u64 {
-        use std::hash::{Hash, Hasher};
-        let mut h = rustc_hash::FxHasher::default();
-        std::mem::discriminant(self).hash(&mut h);
-        match self {
-            LineHeightValue::Normal(v) => v.to_bits().hash(&mut h),
-            LineHeightValue::Pt(v) => v.to_bits().hash(&mut h),
-        }
-        h.finish()
-    }
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        match (self, other) {
-            (LineHeightValue::Normal(v1), LineHeightValue::Normal(v2)) => {
-                v1.interpolate(v2, value).map(LineHeightValue::Normal)
-            }
-            (LineHeightValue::Pt(v1), LineHeightValue::Pt(v2)) => {
-                v1.interpolate(v2, value).map(LineHeightValue::Pt)
-            }
-            _ => None,
-        }
-    }
-}
-impl StylePropValue for Size<LengthPercentage> {}
-
-impl<T: StylePropValue> StylePropValue for Option<T> {
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        self.as_ref().and_then(|v| v.debug_view())
-    }
-
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        self.as_ref().and_then(|this| {
-            other
-                .as_ref()
-                .and_then(|other| this.interpolate(other, value).map(Some))
-        })
-    }
-
-    fn content_hash(&self) -> u64 {
-        use std::hash::{Hash, Hasher};
-        let mut h = rustc_hash::FxHasher::default();
-        match self {
-            Some(v) => {
-                1u8.hash(&mut h);
-                v.content_hash().hash(&mut h);
-            }
-            None => 0u8.hash(&mut h),
-        }
-        h.finish()
-    }
-}
-impl<T: StylePropValue + 'static> StylePropValue for Vec<T> {
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        if self.is_empty() {
-            return Some(
-                Label::new("[]")
-                    .style(|s| s.with_theme(|s, t| s.color(t.text_muted())))
-                    .into_any(),
-            );
-        }
-
-        let count = self.len();
-        let _preview = Label::derived(move || format!("[{}]", count)).style(|s| {
-            s.padding(2.0)
-                .padding_horiz(6.0)
-                .border(1.)
-                .border_radius(5.0)
-                .margin_left(6.0)
-                .with_theme(|s, t| s.color(t.text()).border_color(t.border()))
-                .with::<FontSize>(|s, fs| s.font_size(fs.def(|fs| fs * 0.85)))
-        });
-
-        let items = self.clone();
-        let tooltip_view = move || {
-            Stack::vertical_from_iter(items.iter().enumerate().map(|(i, item)| {
-                let index_label = Label::new(format!("[{}]", i))
-                    .style(|s| s.with_theme(|s, t| s.color(t.text_muted())));
-
-                let item_view = item.debug_view().unwrap_or_else(|| {
-                    Label::new(format!("{:?}", item))
-                        .style(|s| s.flex_grow(1.0))
-                        .into_any()
-                });
-
-                Stack::new((index_label, item_view))
-                    .style(|s| s.items_center().gap(8.0).padding(4.0))
-            }))
-            .style(|s| s.gap(4.0))
-        };
-
-        Some(
-            // preview
-            tooltip_view().into_any(),
-        )
-    }
-
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        self.iter().zip(other.iter()).try_fold(
-            Vec::with_capacity(self.len()),
-            |mut acc, (v1, v2)| {
-                if let Some(interpolated) = v1.interpolate(v2, value) {
-                    acc.push(interpolated);
-                    Some(acc)
-                } else {
-                    None
-                }
-            },
-        )
-    }
-
-    fn content_hash(&self) -> u64 {
-        use std::hash::{Hash, Hasher};
-        let mut h = rustc_hash::FxHasher::default();
-        self.len().hash(&mut h);
-        for item in self {
-            item.content_hash().hash(&mut h);
-        }
-        h.finish()
-    }
-}
-impl StylePropValue for Pt {
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        Some(Label::new(format!("{} pt", self.0)).into_any())
-    }
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        self.0.interpolate(&other.0, value).map(Pt)
-    }
-    fn content_hash(&self) -> u64 {
-        hash_f64(self.0)
-    }
-}
-#[allow(deprecated)]
-impl StylePropValue for super::unit::Px {
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        Pt(self.0).debug_view()
-    }
-
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        self.0.interpolate(&other.0, value).map(super::unit::Px)
-    }
-    fn content_hash(&self) -> u64 {
-        hash_f64(self.0)
-    }
-}
-impl StylePropValue for Pct {
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        Some(Label::new(format!("{}%", self.0)).into_any())
-    }
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        self.0.interpolate(&other.0, value).map(Pct)
-    }
-    fn content_hash(&self) -> u64 {
-        hash_f64(self.0)
-    }
-}
-impl StylePropValue for LengthAuto {
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        let label = match self {
-            Self::Pt(v) => format!("{v} pt"),
-            Self::Pct(v) => format!("{v}%"),
-            Self::Em(v) => format!("{v} em"),
-            Self::Lh(v) => format!("{v} lh"),
-            Self::Auto => "auto".to_string(),
-        };
-        Some(Label::new(label).into_any())
-    }
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        match (self, other) {
-            (Self::Pt(v1), Self::Pt(v2)) => Some(Self::Pt(v1 + (v2 - v1) * value)),
-            (Self::Pct(v1), Self::Pct(v2)) => Some(Self::Pct(v1 + (v2 - v1) * value)),
-            (Self::Em(v1), Self::Em(v2)) => Some(Self::Em(v1 + (v2 - v1) * value)),
-            (Self::Lh(v1), Self::Lh(v2)) => Some(Self::Lh(v1 + (v2 - v1) * value)),
-            (Self::Auto, Self::Auto) => Some(Self::Auto),
-            // TODO: Figure out some way to get in the relevant layout information in order to interpolate between pixels and percent
-            _ => None,
-        }
-    }
-    fn content_hash(&self) -> u64 {
-        use std::hash::{Hash, Hasher};
-        let mut h = rustc_hash::FxHasher::default();
-        std::mem::discriminant(self).hash(&mut h);
-        match self {
-            Self::Pt(v) | Self::Pct(v) | Self::Em(v) | Self::Lh(v) => v.to_bits().hash(&mut h),
-            Self::Auto => {}
-        }
-        h.finish()
-    }
-}
-#[allow(deprecated)]
-impl StylePropValue for super::unit::PxPctAuto {
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        LengthAuto::from(*self).debug_view()
-    }
-
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        match (self, other) {
-            (Self::Px(v1), Self::Px(v2)) => Some(Self::Px(v1 + (v2 - v1) * value)),
-            (Self::Pct(v1), Self::Pct(v2)) => Some(Self::Pct(v1 + (v2 - v1) * value)),
-            (Self::Auto, Self::Auto) => Some(Self::Auto),
-            _ => None,
-        }
-    }
-    fn content_hash(&self) -> u64 {
-        use std::hash::{Hash, Hasher};
-        let mut h = rustc_hash::FxHasher::default();
-        std::mem::discriminant(self).hash(&mut h);
-        match self {
-            Self::Px(v) | Self::Pct(v) => v.to_bits().hash(&mut h),
-            Self::Auto => {}
-        }
-        h.finish()
-    }
-}
-impl StylePropValue for Length {
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        let label = match self {
-            Self::Pt(v) => format!("{v} pt"),
-            Self::Pct(v) => format!("{v}%"),
-            Self::Em(v) => format!("{v} em"),
-            Self::Lh(v) => format!("{v} lh"),
-        };
-        Some(Label::new(label).into_any())
-    }
-
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        match (self, other) {
-            (Self::Pt(v1), Self::Pt(v2)) => Some(Self::Pt(v1 + (v2 - v1) * value)),
-            (Self::Pct(v1), Self::Pct(v2)) => Some(Self::Pct(v1 + (v2 - v1) * value)),
-            (Self::Em(v1), Self::Em(v2)) => Some(Self::Em(v1 + (v2 - v1) * value)),
-            (Self::Lh(v1), Self::Lh(v2)) => Some(Self::Lh(v1 + (v2 - v1) * value)),
-            // TODO: Figure out some way to get in the relevant layout information in order to interpolate between pixels and percent
-            _ => None,
-        }
-    }
-    fn content_hash(&self) -> u64 {
-        use std::hash::{Hash, Hasher};
-        let mut h = rustc_hash::FxHasher::default();
-        std::mem::discriminant(self).hash(&mut h);
-        match self {
-            Self::Pt(v) | Self::Pct(v) | Self::Em(v) | Self::Lh(v) => v.to_bits().hash(&mut h),
-        }
-        h.finish()
-    }
-}
-#[allow(deprecated)]
-impl StylePropValue for super::unit::PxPct {
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        Length::from(*self).debug_view()
-    }
-
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        match (self, other) {
-            (Self::Px(v1), Self::Px(v2)) => Some(Self::Px(v1 + (v2 - v1) * value)),
-            (Self::Pct(v1), Self::Pct(v2)) => Some(Self::Pct(v1 + (v2 - v1) * value)),
-            _ => None,
-        }
-    }
-    fn content_hash(&self) -> u64 {
-        use std::hash::{Hash, Hasher};
-        let mut h = rustc_hash::FxHasher::default();
-        std::mem::discriminant(self).hash(&mut h);
-        match self {
-            Self::Px(v) | Self::Pct(v) => v.to_bits().hash(&mut h),
-        }
-        h.finish()
-    }
-}
-
-pub(crate) fn views(views: impl ViewTuple) -> Vec<AnyView> {
-    views.into_views()
-}
-
-impl StylePropValue for Color {
-    fn content_hash(&self) -> u64 {
-        use std::hash::{Hash, Hasher};
-        let mut h = rustc_hash::FxHasher::default();
-        for c in self.components {
-            c.to_bits().hash(&mut h);
-        }
-        h.finish()
-    }
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        let color = *self;
-        let swatch = ()
-            .style(move |s| {
-                s.background(color)
-                    .width(22.0)
-                    .height(14.0)
-                    .border(1.)
-                    .border_color(palette::css::WHITE.with_alpha(0.5))
-                    .border_radius(5.0)
-            })
-            .container()
-            .style(|s| {
-                s.border(1.)
-                    .border_color(palette::css::BLACK.with_alpha(0.5))
-                    .border_radius(5.0)
-            });
-
-        let tooltip_view = move || {
-            // Convert to RGBA8 for standard representations
-            let c = color.to_rgba8();
-            let (r, g, b, a) = (c.r, c.g, c.b, c.a);
-
-            // Hex representation
-            let hex = if a == 255 {
-                format!("#{:02X}{:02X}{:02X}", r, g, b)
-            } else {
-                format!("#{:02X}{:02X}{:02X}{:02X}", r, g, b, a)
-            };
-
-            // RGBA string
-            let rgba_str = format!("rgba({}, {}, {}, {:.3})", r, g, b, a as f32 / 255.0);
-
-            // Alpha percentage
-            let alpha_str = format!(
-                "{:.1}% ({:.3})",
-                (a as f32 / 255.0) * 100.0,
-                a as f32 / 255.0
-            );
-
-            let components = color.components;
-            let color_space_str = format!("{:?}", color.cs);
-
-            let hex = views((
-                "Hex:".style(|s| s.font_bold().min_width(80.0).justify_end()),
-                Label::derived(move || hex.clone()),
-            ));
-            let rgba = views((
-                "RGBA:".style(|s| s.font_bold().min_width(80.0).justify_end()),
-                Label::derived(move || rgba_str.clone()),
-            ));
-            let components = views((
-                "Components:".style(|s| s.font_bold().min_width(80.0).justify_end()),
-                (
-                    Label::derived(move || format!("[0]: {:.3}", components[0])),
-                    Label::derived(move || format!("[1]: {:.3}", components[1])),
-                    Label::derived(move || format!("[2]: {:.3}", components[2])),
-                    Label::derived(move || format!("[3]: {:.3}", components[3])),
-                )
-                    .v_stack()
-                    .style(|s| s.gap(2.0)),
-            ));
-            let color_space = views((
-                "Color Space:".style(|s| s.font_bold().min_width(80.0).justify_end()),
-                Label::derived(move || color_space_str.clone()),
-            ));
-            let alpha = views((
-                "Alpha:".style(|s| s.font_bold().min_width(80.0).justify_end()),
-                Label::derived(move || alpha_str.clone()),
-            ));
-            (hex, rgba, components, color_space, alpha)
-                .flatten()
-                .style(|s| {
-                    s.grid()
-                        .grid_template_columns([auto(), fr(1.)])
-                        .justify_center()
-                        .items_center()
-                        .row_gap(20)
-                        .col_gap(10)
-                        .padding(30)
-                })
-        };
-
-        Some(
-            swatch
-                .tooltip(tooltip_view)
-                .style(|s| s.items_center())
-                .into_any(),
-        )
-    }
-
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        Some(self.lerp(*other, value as f32, HueDirection::default()))
-    }
-}
-
-impl StylePropValue for Gradient {
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        let box_width = 22.;
-        let box_height = 14.;
-        let mut grad = self.clone();
-        grad.kind = match grad.kind {
-            GradientKind::Linear(LinearGradientPosition { start, end }) => {
-                let dx = end.x - start.x;
-                let dy = end.y - start.y;
-
-                let scale_x = box_width / dx.abs();
-                let scale_y = box_height / dy.abs();
-                let scale = scale_x.min(scale_y);
-
-                let new_dx = dx * scale;
-                let new_dy = dy * scale;
-
-                let new_start = Point {
-                    x: if dx > 0.0 { 0.0 } else { box_width },
-                    y: if dy > 0.0 { 0.0 } else { box_height },
-                };
-
-                let new_end = Point {
-                    x: new_start.x + new_dx,
-                    y: new_start.y + new_dy,
-                };
-
-                GradientKind::Linear(LinearGradientPosition {
-                    start: new_start,
-                    end: new_end,
-                })
-            }
-            _ => grad.kind,
-        };
-        let color = ().style(move |s| {
-            s.background(grad.clone())
-                .width(box_width)
-                .height(box_height)
-                .border(1.)
-                .border_color(palette::css::WHITE.with_alpha(0.5))
-                .border_radius(5.0)
-        });
-        let color = color.container().style(|s| {
-            s.border(1.)
-                .border_color(palette::css::BLACK.with_alpha(0.5))
-                .border_radius(5.0)
-                .margin_left(6.0)
-        });
-        Some(
-            Stack::new((Label::new(format!("{self:?}")), color))
-                .style(|s| s.items_center())
-                .into_any(),
-        )
-    }
-
-    fn interpolate(&self, _other: &Self, _value: f64) -> Option<Self> {
-        None
-    }
-
-    fn content_hash(&self) -> u64 {
-        use std::hash::{Hash, Hasher};
-        let mut h = rustc_hash::FxHasher::default();
-        std::mem::discriminant(&self.kind).hash(&mut h);
-        for stop in self.stops.iter() {
-            stop.offset.to_bits().hash(&mut h);
-            for c in stop.color.components {
-                c.to_bits().hash(&mut h);
-            }
-        }
-        h.finish()
-    }
-}
-
-// this is a convenience wrapper so border/outline setters can accept numeric widths.
-#[derive(Clone, Debug, Default)]
-pub struct StrokeWrap(pub Stroke);
-impl StrokeWrap {
-    pub fn new(width: f64) -> Self {
-        Self(Stroke::new(width))
-    }
-}
-
-impl From<Stroke> for StrokeWrap {
-    fn from(value: Stroke) -> Self {
-        Self(value)
-    }
-}
-impl From<f32> for StrokeWrap {
-    fn from(value: f32) -> Self {
-        Self(Stroke::new(value.into()))
-    }
-}
-impl From<f64> for StrokeWrap {
-    fn from(value: f64) -> Self {
-        Self(Stroke::new(value))
-    }
-}
-impl From<i32> for StrokeWrap {
-    fn from(value: i32) -> Self {
-        Self(Stroke::new(value.into()))
-    }
-}
-
-impl StylePropValue for Stroke {
-    fn content_hash(&self) -> u64 {
-        hash_f64(self.width)
-    }
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        let stroke = self.clone();
-        let clone = stroke.clone();
-
-        let color = RwSignal::new(palette::css::RED);
-
-        // Visual preview of the stroke
-        let preview = canvas(move |cx, size| {
-            cx.stroke(
-                &kurbo::Line::new(
-                    Point::new(0., size.height / 2.),
-                    Point::new(size.width, size.height / 2.),
-                ),
-                color.get(),
-                &clone,
-            );
-        })
-        .style(move |s| s.width(80.0).height(20.0))
-        .container()
-        .style(move |s| {
-            s.with_theme(move |s, t| s.border_color(t.border()))
-                .defer::<Theme>(move |t| color.set(t.primary()))
-                .padding(4.0)
-        });
-
-        let tooltip_view = move || {
-            let stroke = stroke.clone();
-
-            let width_row = views((
-                "Width:".style(|s| s.font_bold().min_width(100.0).justify_end()),
-                Label::derived(move || format!("{:.1}px", stroke.width)),
-            ));
-
-            let join_row = views((
-                "Join:".style(|s| s.font_bold().min_width(100.0).justify_end()),
-                Label::derived(move || format!("{:?}", stroke.join)),
-            ));
-
-            let miter_row = views((
-                "Miter Limit:".style(|s| s.font_bold().min_width(100.0).justify_end()),
-                Label::derived(move || format!("{:.2}", stroke.miter_limit)),
-            ));
-
-            let start_cap_row = views((
-                "Start Cap:".style(|s| s.font_bold().min_width(100.0).justify_end()),
-                Label::derived(move || format!("{:?}", stroke.start_cap)),
-            ));
-
-            let end_cap_row = views((
-                "End Cap:".style(|s| s.font_bold().min_width(100.0).justify_end()),
-                Label::derived(move || format!("{:?}", stroke.end_cap)),
-            ));
-
-            let pattern_clone = stroke.dash_pattern.clone();
-
-            let dash_pattern_row = views((
-                "Dash Pattern:".style(|s| s.font_bold().min_width(100.0).justify_end()),
-                Label::derived(move || {
-                    if pattern_clone.is_empty() {
-                        "Solid".to_string()
-                    } else {
-                        format!("{:?}", pattern_clone.as_slice())
-                    }
-                }),
-            ));
-
-            let dash_offset_row = if !stroke.dash_pattern.is_empty() {
-                Some(views((
-                    "Dash Offset:".style(|s| s.font_bold().min_width(100.0).justify_end()),
-                    Label::derived(move || format!("{:.1}", stroke.dash_offset)),
-                )))
-            } else {
-                None
-            };
-
-            let mut rows = vec![
-                width_row.into_any(),
-                join_row.into_any(),
-                miter_row.into_any(),
-                start_cap_row.into_any(),
-                end_cap_row.into_any(),
-                dash_pattern_row.into_any(),
-            ];
-
-            if let Some(offset_row) = dash_offset_row {
-                rows.push(offset_row.into_any());
-            }
-
-            Stack::vertical_from_iter(rows).style(|s| {
-                s.grid()
-                    .grid_template_columns([auto(), fr(1.)])
-                    .justify_center()
-                    .items_center()
-                    .row_gap(12)
-                    .col_gap(10)
-                    .padding(20)
-            })
-        };
-
-        Some(
-            preview
-                .tooltip(tooltip_view)
-                .style(|s| s.items_center())
-                .into_any(),
-        )
-    }
-}
-impl StylePropValue for Brush {
-    fn content_hash(&self) -> u64 {
-        use std::hash::{Hash, Hasher};
-        let mut h = rustc_hash::FxHasher::default();
-        std::mem::discriminant(self).hash(&mut h);
-        match self {
-            Brush::Solid(c) => {
-                for comp in c.components {
-                    comp.to_bits().hash(&mut h);
-                }
-            }
-            Brush::Gradient(g) => g.content_hash().hash(&mut h),
-            Brush::Image(_) => {}
-        }
-        h.finish()
-    }
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        match self {
-            Brush::Solid(color) => color.debug_view(),
-            Brush::Gradient(grad) => grad.debug_view(),
-            Brush::Image(_) => None,
-        }
-    }
-
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        match (self, other) {
-            (Brush::Solid(color), Brush::Solid(other)) => Some(Self::Solid(color.lerp(
-                *other,
-                value as f32,
-                HueDirection::default(),
-            ))),
-            (Brush::Gradient(gradient), Brush::Solid(solid)) => {
-                let interpolated_stops: Vec<ColorStop> = gradient
-                    .stops
-                    .iter()
-                    .map(|stop| {
-                        let interpolated_color = stop.color.to_alpha_color().lerp(
-                            *solid,
-                            value as f32,
-                            HueDirection::default(),
-                        );
-                        ColorStop::from((stop.offset, interpolated_color))
-                    })
-                    .collect();
-                Some(Brush::Gradient(Gradient {
-                    kind: gradient.kind,
-                    extend: gradient.extend,
-                    interpolation_cs: gradient.interpolation_cs,
-                    hue_direction: gradient.hue_direction,
-                    stops: ColorStops::from(&*interpolated_stops),
-                    interpolation_alpha_space: InterpolationAlphaSpace::Premultiplied,
-                }))
-            }
-            (Brush::Solid(solid), Brush::Gradient(gradient)) => {
-                let interpolated_stops: Vec<ColorStop> = gradient
-                    .stops
-                    .iter()
-                    .map(|stop| {
-                        let interpolated_color = solid.lerp(
-                            stop.color.to_alpha_color(),
-                            value as f32,
-                            HueDirection::default(),
-                        );
-                        ColorStop::from((stop.offset, interpolated_color))
-                    })
-                    .collect();
-                Some(Brush::Gradient(Gradient {
-                    kind: gradient.kind,
-                    extend: gradient.extend,
-                    interpolation_cs: gradient.interpolation_cs,
-                    hue_direction: gradient.hue_direction,
-                    stops: ColorStops::from(&*interpolated_stops),
-                    interpolation_alpha_space: InterpolationAlphaSpace::Premultiplied,
-                }))
-            }
-
-            (Brush::Gradient(gradient1), Brush::Gradient(gradient2)) => {
-                gradient1.interpolate(gradient2, value).map(Brush::Gradient)
-            }
-            _ => None,
-        }
-    }
-}
-impl StylePropValue for Duration {
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        None
-    }
-
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        self.as_secs_f64()
-            .interpolate(&other.as_secs_f64(), value)
-            .map(Duration::from_secs_f64)
-    }
-
-    fn content_hash(&self) -> u64 {
-        hash_value(self)
-    }
-}
-
-impl StylePropValue for super::Angle {
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        Some(self.lerp(other, value))
-    }
-    fn content_hash(&self) -> u64 {
-        use std::hash::{Hash, Hasher};
-        let mut h = rustc_hash::FxHasher::default();
-        std::mem::discriminant(self).hash(&mut h);
-        match self {
-            super::Angle::Deg(v) | super::Angle::Rad(v) => v.to_bits().hash(&mut h),
-        }
-        h.finish()
-    }
-}
-
-impl StylePropValue for super::AnchorAbout {
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        Some(Self {
-            x: self.x + (other.x - self.x) * value,
-            y: self.y + (other.y - self.y) * value,
-        })
-    }
-    fn content_hash(&self) -> u64 {
-        use std::hash::{Hash, Hasher};
-        let mut h = rustc_hash::FxHasher::default();
-        self.x.to_bits().hash(&mut h);
-        self.y.to_bits().hash(&mut h);
-        h.finish()
-    }
-}
-
-impl StylePropValue for kurbo::Rect {
-    fn content_hash(&self) -> u64 {
-        use std::hash::{Hash, Hasher};
-        let mut h = rustc_hash::FxHasher::default();
-        self.x0.to_bits().hash(&mut h);
-        self.y0.to_bits().hash(&mut h);
-        self.x1.to_bits().hash(&mut h);
-        self.y1.to_bits().hash(&mut h);
-        h.finish()
-    }
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        let r = *self;
-
-        let w = r.x1 - r.x0;
-        let h = r.y1 - r.y0;
-
-        let coords = [
-            format!("x0: {:.2}", r.x0),
-            format!("y0: {:.2}", r.y0),
-            format!("x1: {:.2}", r.x1),
-            format!("y1: {:.2}", r.y1),
-        ]
-        .v_stack();
-
-        let wh = [format!("w: {:.2}", w), format!("h: {:.2}", h)].h_stack();
-
-        let preview = Empty::new().style(move |s| {
-            let max = w.abs().max(h.abs()).max(1.0);
-            let scale = 60.0 / max;
-
-            s.width(w.abs() * scale)
-                .height(h.abs() * scale)
-                .border(1.0)
-                .with_theme(|s, t| {
-                    s.border_color(t.border())
-                        .background(t.primary_muted())
-                        .border_radius(t.border_radius())
-                })
-        });
-
-        Some(
-            (
-                "Rect",
-                preview,
-                coords.style(|s| s.gap(2)),
-                wh.style(|s| s.gap(8)),
-            )
-                .v_stack()
-                .into_any(),
-        )
-    }
-
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        let lerp = |a: f64, b: f64| a + (b - a) * value;
-
-        Some(Self {
-            x0: lerp(self.x0, other.x0),
-            y0: lerp(self.y0, other.y0),
-            x1: lerp(self.x1, other.x1),
-            y1: lerp(self.y1, other.y1),
-        })
-    }
-}
-
-impl StylePropValue for Affine {
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        let affine = *self;
-        let coeffs = affine.as_coeffs();
-
-        // Decompose to show meaningful transform components
-        let (scale, rotation) = affine.svd();
-        let translation = affine.translation();
-
-        // Create a visual preview showing the transform effect
-        let preview = canvas(move |cx, size| {
-            let center = Point::new(size.width / 2., size.height / 2.);
-            let box_size = 20.0;
-
-            // Draw original position (dashed outline)
-            let original_rect =
-                kurbo::Rect::from_center_size(center, kurbo::Size::new(box_size, box_size));
-            cx.stroke(
-                &original_rect,
-                palette::css::GRAY.with_alpha(0.5),
-                &kurbo::Stroke::new(1.0).with_dashes(0., [3., 3.]),
-            );
-
-            // Draw transformed position
-            let transform_offset =
-                Affine::translate((center.x - box_size / 2., center.y - box_size / 2.));
-            let display_transform = transform_offset * affine * transform_offset.inverse();
-
-            let transformed_rect = kurbo::Rect::new(0., 0., box_size, box_size);
-            cx.fill(
-                &display_transform.transform_rect_bbox(transformed_rect),
-                palette::css::BLUE.with_alpha(0.7),
-                0.,
-            );
-            cx.stroke(
-                &(display_transform.transform_rect_bbox(transformed_rect)),
-                palette::css::BLUE,
-                &kurbo::Stroke::new(2.0),
-            );
-
-            // Draw origin point
-            let origin_marker = kurbo::Circle::new(display_transform * Point::ZERO, 3.0);
-            cx.fill(&origin_marker, palette::css::RED, 0.);
-        })
-        .style(|s| s.width(80.0).height(60.0))
-        .container()
-        .style(|s| {
-            s.padding(4.0)
-                .border(1.)
-                .border_radius(5.0)
-                .with_theme(|s, t| s.border_color(t.border()))
-        });
-
-        let tooltip_view = move || {
-            // Matrix coefficients in a grid
-            let matrix_label = Label::new("Matrix:").style(|s| s.font_bold().margin_bottom(8.0));
-
-            let matrix_grid = (
-                views((
-                    Label::new(format!("{:.3}", coeffs[0])),
-                    Label::new(format!("{:.3}", coeffs[2])),
-                    Label::new(format!("{:.3}", coeffs[4])),
-                )),
-                views((
-                    Label::new(format!("{:.3}", coeffs[1])),
-                    Label::new(format!("{:.3}", coeffs[3])),
-                    Label::new(format!("{:.3}", coeffs[5])),
-                )),
-                views((Label::new("0"), Label::new("0"), Label::new("1"))),
-            )
-                .v_stack()
-                .style(|s| {
-                    s.gap(4.0)
-                        .padding(8.0)
-                        .border(1.)
-                        .border_radius(4.0)
-                        .with_theme(|s, t| {
-                            s.background(t.def(|t| t.primary().with_alpha(0.5)))
-                                .border_color(t.border())
-                        })
-                });
-
-            // Decomposed components
-            let components_label = Label::new("Components:")
-                .style(|s| s.font_bold().margin_top(16.0).margin_bottom(8.0));
-
-            let translate_row = views((
-                "Translate:".style(|s| s.font_bold().min_width(100.0).justify_end()),
-                Label::derived(move || format!("({:.2}, {:.2})", translation.x, translation.y)),
-            ));
-
-            let rotate_row = views((
-                "Rotate:".style(|s| s.font_bold().min_width(100.0).justify_end()),
-                Label::derived(move || format!("{:.1}°", rotation.to_degrees())),
-            ));
-
-            let scale_row = views((
-                "Scale:".style(|s| s.font_bold().min_width(100.0).justify_end()),
-                Label::derived(move || format!("({:.2}, {:.2})", scale.x, scale.y)),
-            ));
-
-            // Check for special properties
-            let is_identity = affine == Affine::IDENTITY;
-            let determinant = coeffs[0] * coeffs[3] - coeffs[1] * coeffs[2];
-            let has_reflection = determinant < 0.0;
-
-            let properties = if is_identity {
-                Some(
-                    Label::new("Identity (no transform)")
-                        .style(|s| s.with_theme(|s, t| s.color(t.text_muted()))),
-                )
-            } else if has_reflection {
-                Some(
-                    Label::new("⚠ Contains reflection")
-                        .style(|s| s.with_theme(|s, t| s.color(t.warning()))),
-                )
-            } else {
-                None
-            };
-
-            let components_grid = (translate_row, rotate_row, scale_row).flatten().style(|s| {
-                s.grid()
-                    .grid_template_columns([auto(), fr(1.)])
-                    .justify_center()
-                    .items_center()
-                    .row_gap(8)
-                    .col_gap(10)
-            });
-
-            let mut content = vec![
-                matrix_label.into_any(),
-                matrix_grid.into_any(),
-                components_label.into_any(),
-                components_grid.into_any(),
-            ];
-
-            if let Some(props) = properties {
-                content.push(props.into_any());
-            }
-
-            Stack::vertical_from_iter(content).style(|s| s.padding(20))
-        };
-
-        Some(
-            preview
-                .tooltip(tooltip_view)
-                .style(|s| s.items_center())
-                .into_any(),
-        )
-    }
-
-    fn interpolate(&self, other: &Self, t: f64) -> Option<Self> {
-        Some(self.lerp(other, t))
-    }
-
-    fn content_hash(&self) -> u64 {
-        use std::hash::{Hash, Hasher};
-        let mut hasher = rustc_hash::FxHasher::default();
-
-        let coeffs = self.as_coeffs();
-        for coeff in coeffs {
-            coeff.to_bits().hash(&mut hasher);
-        }
-
-        hasher.finish()
-    }
-}
-
-pub trait AffineLerp {
-    fn svd(self) -> (Vec2, f64);
-
-    /// Linearly interpolate between two affine transforms.
-    ///
-    /// This implements the CSS Transforms interpolation algorithm:
-    /// - Decompose both transforms into translation, rotation, and scale components
-    /// - Interpolate each component separately
-    /// - Recompose the result
-    ///
-    /// `t` should be in the range [0.0, 1.0] where:
-    /// - t = 0.0 returns `self`
-    /// - t = 1.0 returns `other`
-    /// - t = 0.5 returns the midpoint
-    fn lerp(&self, other: &Affine, t: f64) -> Affine;
-}
-
-impl AffineLerp for Affine {
-    fn svd(self) -> (Vec2, f64) {
-        let [a, b, c, d, _, _] = self.as_coeffs();
-        let a2 = a * a;
-        let b2 = b * b;
-        let c2 = c * c;
-        let d2 = d * d;
-        let ab = a * b;
-        let cd = c * d;
-        let angle = 0.5 * (2.0 * (ab + cd)).atan2(a2 - b2 + c2 - d2);
-        let s1 = a2 + b2 + c2 + d2;
-        let s2 = ((a2 - b2 + c2 - d2).powi(2) + 4.0 * (ab + cd).powi(2)).sqrt();
-        (
-            Vec2 {
-                x: (0.5 * (s1 + s2)).sqrt(),
-                y: (0.5 * (s1 - s2)).sqrt(),
-            },
-            angle,
-        )
-    }
-
-    fn lerp(&self, other: &Affine, t: f64) -> Affine {
-        // Extract translations
-        let trans_a = self.translation();
-        let trans_b = other.translation();
-
-        // Remove translations to get the linear parts
-        let linear_a = self.with_translation(Vec2::ZERO);
-        let linear_b = other.with_translation(Vec2::ZERO);
-
-        // Decompose into scale and rotation using SVD
-        let (scale_a, rotation_a) = linear_a.svd();
-        let (scale_b, rotation_b) = linear_b.svd();
-
-        // Interpolate translation
-        let trans = Vec2 {
-            x: trans_a.x + (trans_b.x - trans_a.x) * t,
-            y: trans_a.y + (trans_b.y - trans_a.y) * t,
-        };
-
-        // Interpolate scale
-        let scale = Vec2 {
-            x: scale_a.x + (scale_b.x - scale_a.x) * t,
-            y: scale_a.y + (scale_b.y - scale_a.y) * t,
-        };
-
-        // Interpolate rotation (taking the shorter path)
-        let mut angle_diff = rotation_b - rotation_a;
-        // Normalize to [-π, π] to take the shorter rotation path
-        while angle_diff > std::f64::consts::PI {
-            angle_diff -= 2.0 * std::f64::consts::PI;
-        }
-        while angle_diff < -std::f64::consts::PI {
-            angle_diff += 2.0 * std::f64::consts::PI;
-        }
-        let rotation = rotation_a + angle_diff * t;
-
-        // Recompose: rotate -> scale -> translate
-        Affine::rotate(rotation)
-            .then_scale_non_uniform(scale.x, scale.y)
-            .then_translate(trans)
-    }
-}
-
-#[cfg(test)]
-mod affine_lerp_tests {
-    use super::*;
-
-    #[test]
-    fn test_lerp_identity() {
-        let a = Affine::IDENTITY;
-        let b = Affine::translate(Vec2::new(100.0, 50.0));
-
-        let result = a.lerp(&b, 0.0);
-        assert_eq!(result.as_coeffs(), a.as_coeffs());
-
-        let result = a.lerp(&b, 1.0);
-        assert_eq!(result.as_coeffs(), b.as_coeffs());
-    }
-
-    #[test]
-    fn test_lerp_translation() {
-        let a = Affine::translate(Vec2::new(0.0, 0.0));
-        let b = Affine::translate(Vec2::new(100.0, 50.0));
-
-        let result = a.lerp(&b, 0.5);
-        let trans = result.translation();
-        assert!((trans.x - 50.0).abs() < 1e-10);
-        assert!((trans.y - 25.0).abs() < 1e-10);
-    }
-
-    #[test]
-    fn test_lerp_rotation() {
-        let a = Affine::rotate(0.0);
-        let b = Affine::rotate(std::f64::consts::PI / 2.0);
-
-        let result = a.lerp(&b, 0.5);
-        // Should be rotated by π/4
-        let point = result * Point::new(1.0, 0.0);
-        let expected_angle = std::f64::consts::PI / 4.0;
-        assert!((point.x - expected_angle.cos()).abs() < 1e-10);
-        assert!((point.y - expected_angle.sin()).abs() < 1e-10);
-    }
-
-    #[test]
-    fn test_lerp_scale() {
-        let a = Affine::scale(1.0);
-        let b = Affine::scale(2.0);
-
-        let result = a.lerp(&b, 0.5);
-        let point = result * Point::new(1.0, 1.0);
-        assert!((point.x - 1.5).abs() < 1e-10);
-        assert!((point.y - 1.5).abs() < 1e-10);
-    }
-}
-
-/// Internal storage for style property values in the style map.
-///
-/// Unlike `StyleValue<T>` which is used in the public API, `StyleMapValue<T>`
-/// is the internal representation stored in the style hashmap.
-#[derive(Debug, Clone, PartialEq, Eq)]
-pub enum StyleMapValue<T> {
-    /// Value inserted by animation interpolation
-    Animated(T),
-    /// Value set directly
-    Val(T),
-    /// Value resolved from inherited context when the property is read.
-    Context(ContextValue<T>),
-    /// Use the default value for the style, typically from the underlying `ComputedStyle`
-    Unset,
-}
-
-/// The value for a [`Style`] property in the public API.
-///
-/// This represents the result of reading a style property, with additional
-/// states like `Base` that indicate inheritance from parent styles.
-#[derive(Debug, Clone, PartialEq, Eq, Default)]
-pub enum StyleValue<T> {
-    /// Value resolved from inherited context when the property is read.
-    Context(ContextValue<T>),
-    /// Value inserted by animation interpolation
-    Animated(T),
-    /// Value set directly
-    Val(T),
-    /// Use the default value for the style, typically from the underlying `ComputedStyle`.
-    Unset,
-    /// Use whatever the base style is. For an overriding style like hover, this uses the base
-    /// style. For the base style, this is equivalent to `Unset`.
-    #[default]
-    Base,
-}
-
-impl<T: 'static> StyleValue<T> {
-    pub fn map<U>(self, f: impl Fn(T) -> U + 'static) -> StyleValue<U> {
-        match self {
-            Self::Context(x) => StyleValue::Context(x.map(f)),
-            Self::Val(x) => StyleValue::Val(f(x)),
-            Self::Animated(x) => StyleValue::Animated(f(x)),
-            Self::Unset => StyleValue::Unset,
-            Self::Base => StyleValue::Base,
-        }
-    }
-
-    pub fn unwrap_or(self, default: T) -> T {
-        match self {
-            Self::Context(_) => default,
-            Self::Val(x) => x,
-            Self::Animated(x) => x,
-            Self::Unset => default,
-            Self::Base => default,
-        }
-    }
-
-    pub fn unwrap_or_else(self, f: impl FnOnce() -> T) -> T {
-        match self {
-            Self::Context(_) => f(),
-            Self::Val(x) => x,
-            Self::Animated(x) => x,
-            Self::Unset => f(),
-            Self::Base => f(),
-        }
-    }
-
-    pub fn as_mut(&mut self) -> Option<&mut T> {
-        match self {
-            Self::Context(_) => None,
-            Self::Val(x) => Some(x),
-            Self::Animated(x) => Some(x),
-            Self::Unset => None,
-            Self::Base => None,
-        }
-    }
-}
-
-impl<T> From<T> for StyleValue<T> {
-    fn from(x: T) -> Self {
-        Self::Val(x)
-    }
-}
-
-impl<T> From<ContextValue<T>> for StyleValue<T> {
-    fn from(x: ContextValue<T>) -> Self {
-        Self::Context(x)
-    }
-}
-
-fn short_style_name(name: &str) -> String {
-    name.strip_prefix("floem::style::")
-        .unwrap_or(name)
-        .to_string()
-}
-
-struct StyleDebugRow {
-    render: Rc<dyn Fn(bool) -> AnyView>,
-    is_empty: bool,
-}
-
-fn effective_inherited_debug_groups(
-    style: &Style,
-    parent_groups: &HashSet<StyleKey>,
-) -> HashSet<StyleKey> {
-    let mut groups = parent_groups.clone();
-    for key in style.map.keys() {
-        if let StyleKeyInfo::DebugGroup(info) = key.info {
-            if style.debug_group_enabled(*key) {
-                if info.inherited {
-                    groups.insert(*key);
-                }
-            } else {
-                groups.remove(key);
-            }
-        }
-    }
-    groups
-}
-
-fn style_debug_active_groups(
-    style: &Style,
-    inherited_groups: &HashSet<StyleKey>,
-) -> Vec<&'static StyleDebugGroupInfo> {
-    let mut groups = style
-        .map
-        .keys()
-        .filter_map(|key| match key.info {
-            StyleKeyInfo::DebugGroup(info) if style.debug_group_enabled(*key) => Some(info),
-            _ => None,
-        })
-        .collect::<Vec<_>>();
-
-    for key in inherited_groups {
-        if let StyleKeyInfo::DebugGroup(info) = key.info
-            && !style.map.contains_key(key)
-        {
-            groups.push(info);
-        }
-    }
-
-    groups.sort_unstable_by_key(|info| short_style_name((info.name)()));
-    groups.dedup_by_key(|info| (info.name)());
-    groups
-}
-
-fn style_debug_is_empty(style: &Style, inherited_groups: &HashSet<StyleKey>) -> bool {
-    let mut hidden_props = HashSet::new();
-
-    for info in style_debug_active_groups(style, inherited_groups) {
-        let members = (info.member_props)();
-        let present = members
-            .iter()
-            .copied()
-            .filter(|key| style.map.contains_key(key) && !hidden_props.contains(key))
-            .collect::<Vec<_>>();
-        if !present.is_empty() {
-            hidden_props.extend(present);
-        }
-    }
-
-    if style
-        .map
-        .iter()
-        .any(|(key, _)| matches!(key.info, StyleKeyInfo::Prop(..)) && !hidden_props.contains(key))
-    {
-        return false;
-    }
-
-    if style.map.iter().any(|(key, value)| match key.info {
-        StyleKeyInfo::Selector(..) | StyleKeyInfo::Class(..) => {
-            value.downcast_ref::<Style>().is_some_and(|nested| {
-                !style_debug_is_empty(
-                    nested,
-                    &effective_inherited_debug_groups(nested, inherited_groups),
-                )
-            })
-        }
-        _ => false,
-    }) {
-        return false;
-    }
-
-    for value in style.map.values() {
-        if let Some(rules) = value.downcast_ref::<StructuralSelectors>()
-            && rules.0.iter().any(|(_, nested)| {
-                !style_debug_is_empty(
-                    nested,
-                    &effective_inherited_debug_groups(nested, inherited_groups),
-                )
-            })
-        {
-            return false;
-        }
-        if let Some(rules) = value.downcast_ref::<ResponsiveSelectors>()
-            && rules.0.iter().any(|(_, nested)| {
-                !style_debug_is_empty(
-                    nested,
-                    &effective_inherited_debug_groups(nested, inherited_groups),
-                )
-            })
-        {
-            return false;
-        }
-    }
-
-    true
-}
-
-fn debug_name_cell(name: String, is_direct: bool, indent: usize) -> AnyView {
-    let indent = (indent as f64) * 16.0;
-    let name = if is_direct {
-        Label::new(name).into_any()
-    } else {
-        Stack::new((
-            "Inherited".style(|s| {
-                s.margin_right(5.0)
-                    .border(1.)
-                    .border_radius(5.0)
-                    .with_theme(|s, t| s.color(t.text_muted()).border_color(t.border()))
-                    .padding_horiz(4.0)
-                    .with::<FontSize>(|s, fs| s.font_size(fs.def(|fs| fs * 0.8)))
-            }),
-            Label::new(name),
-        ))
-        .style(|s| s.items_center().gap(6.0))
-        .into_any()
-    };
-
-    name.container()
-        .style(move |s| {
-            s.padding_left(indent)
-                .min_width(170.)
-                .padding_right(5.0)
-                .flex_direction(FlexDirection::RowReverse)
-        })
-        .into_any()
-}
-
-fn style_debug_prop_row(
-    style: &Style,
-    prop: StylePropRef,
-    value: &Rc<dyn std::any::Any>,
-    is_direct: bool,
-    indent: usize,
-) -> StyleDebugRow {
-    let style = style.clone();
-    let value = value.clone();
-    let name = short_style_name(&format!("{:?}", prop.key));
-    StyleDebugRow {
-        render: Rc::new(move |_| {
-            let mut value_view = (prop.info().debug_view)(&*value)
-                .unwrap_or_else(|| Label::new((prop.info().debug_any)(&*value)).into_any());
-
-            if let Some(transition) = style
-                .map
-                .get(&prop.info().transition_key)
-                .and_then(|v| v.downcast_ref::<Transition>())
-            {
-                value_view = Stack::vertical((
-                    value_view,
-                    Stack::new((
-                        "Transition".style(|s| {
-                            s.margin_top(4.0)
-                                .margin_right(5.0)
-                                .border(1.)
-                                .border_radius(5.0)
-                                .padding_horiz(4.0)
-                                .with_theme(|s, t| s.color(t.text_muted()).border_color(t.border()))
-                                .with::<FontSize>(|s, fs| s.font_size(fs.def(|fs| fs * 0.8)))
-                        }),
-                        transition.debug_view(),
-                    ))
-                    .style(|s| s.items_center().gap(6.0)),
-                ))
-                .into_any();
-            }
-
-            Stack::new((debug_name_cell(name.clone(), is_direct, indent), value_view))
-                .style(|s| s.items_center().width_full().padding_vert(4.0).gap(8.0))
-                .into_any()
-        }),
-        is_empty: false,
-    }
-}
-
-fn style_debug_group_row<V>(
-    name: String,
-    value_view: V,
-    is_direct: bool,
-    indent: usize,
-) -> StyleDebugRow
-where
-    V: Fn() -> AnyView + 'static,
-{
-    StyleDebugRow {
-        render: Rc::new(move |_| {
-            Stack::new((
-                debug_name_cell(name.clone(), is_direct, indent),
-                value_view(),
-            ))
-            .style(|s| s.items_center().width_full().padding_vert(4.0).gap(8.0))
-            .into_any()
-        }),
-        is_empty: false,
-    }
-}
-
-fn style_debug_section(title: String, child: StyleDebugRow, indent: usize) -> StyleDebugRow {
-    let expanded = RwSignal::new(false);
-    let title_text = title.clone();
-    let child_is_empty = child.is_empty;
-    let chevron = move || {
-        if expanded.get() {
-            svg(
-                r#"<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M4.427 6.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 6H4.604a.25.25 0 00-.177.427z"/></svg>"#,
-            )
-        } else {
-            svg(
-                r#"<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M6.427 4.427l3.396 3.396a.25.25 0 010 .354l-3.396 3.396A.25.25 0 016 11.396V4.604a.25.25 0 01.427-.177z"/></svg>"#,
-            )
-        }
-        .style(|s| s.size_full().with_theme(|s, t| s.color(t.text())))
-    };
-
-    StyleDebugRow {
-        render: Rc::new(move |row_is_base| {
-            let child_render = child.render.clone();
-            Stack::vertical((
-                Stack::new((
-                    dyn_view(chevron)
-                        .class(ButtonClass)
-                        .style(|s| s.size(16.0, 16.0).padding(0.)),
-                    Label::new(title_text.clone()).style(|s| {
-                        s.font_bold()
-                            .cursor(CursorStyle::Pointer)
-                            .with_theme(|s, t| s.color(t.primary()))
-                    }),
-                    Label::new("empty")
-                        .style(|s| {
-                            s.padding_horiz(6.0)
-                                .border(1.)
-                                .border_radius(999.0)
-                                .with_theme(|s, t| s.color(t.text_muted()).border_color(t.border()))
-                                .with::<FontSize>(|s, fs| s.font_size(fs.def(|fs| fs * 0.75)))
-                        })
-                        .style(move |s| s.apply_if(!child_is_empty, |s| s.hide())),
-                ))
-                .style(move |s| {
-                    s.items_center()
-                        .gap(6.0)
-                        .padding_left((indent as f64) * 16.0)
-                        .cursor(super::CursorStyle::Pointer)
-                })
-                .on_event_stop(crate::event::listener::Click, move |_cx, _event| {
-                    expanded.update(|value| *value = !*value)
-                }),
-                dyn_view(move || {
-                    if expanded.get() {
-                        child_render(!row_is_base)
-                            .style(|s| s.padding_left(12.0))
-                            .into_any()
-                    } else {
-                        Empty::new().into_any()
-                    }
-                })
-                .into_any(),
-            ))
-            .style(|s| s.gap(6.0).width_full().padding_vert(4.0))
-            .into_any()
-        }),
-        is_empty: false,
-    }
-}
-
-fn style_debug_sections(
-    title: &str,
-    children: Vec<StyleDebugRow>,
-    indent: usize,
-) -> Option<StyleDebugRow> {
-    if children.is_empty() {
-        return None;
-    }
-
-    Some(style_debug_section(
-        title.to_string(),
-        StyleDebugRow {
-            render: Rc::new(move |start_with_base| style_debug_rows(&children, start_with_base)),
-            is_empty: false,
-        },
-        indent,
-    ))
-}
-
-fn style_debug_style_section(
-    title: String,
-    style: &Style,
-    inherited_groups: &HashSet<StyleKey>,
-    indent: usize,
-) -> StyleDebugRow {
-    let nested_inherited = effective_inherited_debug_groups(style, inherited_groups);
-    style_debug_section(
-        title,
-        style_debug_body(style, None, &nested_inherited, indent + 1),
-        indent,
-    )
-}
-
-fn style_debug_prop_rows(
-    style: &Style,
-    direct_keys: Option<&HashSet<StyleKey>>,
-    inherited_groups: &HashSet<StyleKey>,
-    indent: usize,
-) -> Vec<StyleDebugRow> {
-    let mut rows: Vec<StyleDebugRow> = Vec::new();
-    let mut hidden_props = HashSet::new();
-
-    for info in style_debug_active_groups(style, inherited_groups) {
-        let members = (info.member_props)();
-        let present = members
-            .iter()
-            .copied()
-            .filter(|key| style.map.contains_key(key) && !hidden_props.contains(key))
-            .collect::<Vec<_>>();
-        if present.is_empty() {
-            continue;
-        }
-        hidden_props.extend(present);
-        if (info.debug_view)(style).is_some() {
-            let info = info.clone();
-            let style = style.clone();
-            rows.push(style_debug_group_row(
-                short_style_name((info.name)()),
-                move || {
-                    (info.debug_view)(&style)
-                        .unwrap_or_else(|| Label::new("empty").into_any())
-                        .into_any()
-                },
-                true,
-                indent,
-            ));
-        }
-    }
-
-    let mut props = style
-        .map
-        .iter()
-        .filter_map(|(key, value)| match key.info {
-            StyleKeyInfo::Prop(..) if !hidden_props.contains(key) => {
-                Some((StylePropRef { key: *key }, value))
-            }
-            _ => None,
-        })
-        .collect::<Vec<_>>();
-    props.sort_unstable_by_key(|(prop, _)| short_style_name(&format!("{:?}", prop.key)));
-
-    for (prop, value) in props {
-        let is_direct = direct_keys
-            .as_ref()
-            .is_none_or(|keys| keys.contains(&prop.key));
-        rows.push(style_debug_prop_row(style, prop, value, is_direct, indent));
-    }
-
-    rows
-}
-
-fn style_debug_selector_rows(
-    style: &Style,
-    inherited_groups: &HashSet<StyleKey>,
-    indent: usize,
-) -> Vec<StyleDebugRow> {
-    let mut selector_rows: Vec<StyleDebugRow> = Vec::new();
-    let mut selectors = style
-        .map
-        .iter()
-        .filter_map(|(key, value)| match key.info {
-            StyleKeyInfo::Selector(selector) => Some((selector.debug_string(), value)),
-            _ => None,
-        })
-        .collect::<Vec<_>>();
-    selectors.sort_unstable_by(|a, b| a.0.cmp(&b.0));
-    for (name, value) in selectors {
-        if let Some(nested_style) = value.downcast_ref::<Style>() {
-            selector_rows.push(style_debug_style_section(
-                name,
-                nested_style,
-                inherited_groups,
-                indent,
-            ));
-        }
-    }
-
-    for value in style.map.values() {
-        if let Some(rules) = value.downcast_ref::<StructuralSelectors>() {
-            for (selector, nested_style) in &rules.0 {
-                selector_rows.push(style_debug_style_section(
-                    format!("Structural: {selector:?}"),
-                    nested_style,
-                    inherited_groups,
-                    indent,
-                ));
-            }
-        }
-        if let Some(rules) = value.downcast_ref::<ResponsiveSelectors>() {
-            for (selector, nested_style) in &rules.0 {
-                selector_rows.push(style_debug_style_section(
-                    format!("Responsive: {selector:?}"),
-                    nested_style,
-                    inherited_groups,
-                    indent,
-                ));
-            }
-        }
-    }
-
-    selector_rows
-}
-
-fn style_debug_class_rows(
-    style: &Style,
-    inherited_groups: &HashSet<StyleKey>,
-    indent: usize,
-) -> Vec<StyleDebugRow> {
-    let mut class_rows: Vec<StyleDebugRow> = Vec::new();
-    let mut classes = style
-        .map
-        .iter()
-        .filter_map(|(key, value)| match key.info {
-            StyleKeyInfo::Class(info) => Some((short_style_name((info.name)()), value)),
-            _ => None,
-        })
-        .collect::<Vec<_>>();
-    classes.sort_unstable_by(|a, b| a.0.cmp(&b.0));
-    for (name, value) in classes {
-        if let Some(nested_style) = value.downcast_ref::<Style>() {
-            class_rows.push(style_debug_style_section(
-                name,
-                nested_style,
-                inherited_groups,
-                indent,
-            ));
-        }
-    }
-    class_rows
-}
-
-fn style_debug_body(
-    style: &Style,
-    direct_keys: Option<&HashSet<StyleKey>>,
-    inherited_groups: &HashSet<StyleKey>,
-    indent: usize,
-) -> StyleDebugRow {
-    let style = style.clone();
-    let inherited_groups = inherited_groups.clone();
-    let is_empty = style_debug_is_empty(&style, &inherited_groups);
-    let direct_keys = direct_keys.cloned();
-    StyleDebugRow {
-        render: Rc::new(move |start_with_base| {
-            let mut rows =
-                style_debug_prop_rows(&style, direct_keys.as_ref(), &inherited_groups, indent);
-            if let Some(selectors_section) = style_debug_sections(
-                "Selectors",
-                style_debug_selector_rows(&style, &inherited_groups, indent),
-                indent,
-            ) {
-                rows.push(selectors_section);
-            }
-            if let Some(classes_section) = style_debug_sections(
-                "Classes",
-                style_debug_class_rows(&style, &inherited_groups, indent),
-                indent,
-            ) {
-                rows.push(classes_section);
-            }
-
-            if rows.is_empty() {
-                return Label::new("empty")
-                    .style(|s| s.with_theme(|s, t| s.color(t.text_muted())))
-                    .into_any();
-            }
-
-            style_debug_rows(&rows, start_with_base)
-        }),
-        is_empty,
-    }
-}
-
-fn style_debug_rows(rows: &[StyleDebugRow], start_with_base: bool) -> AnyView {
-    Stack::vertical_from_iter(rows.iter().enumerate().map(|(idx, row)| {
-        let is_base = if start_with_base {
-            idx.is_multiple_of(2)
-        } else {
-            !idx.is_multiple_of(2)
-        };
-        (row.render)(is_base).style(move |s| {
-            s.width_full().padding_horiz(4.0).with_theme(move |s, t| {
-                s.apply_if(is_base, |s| s.background(t.bg_base()))
-                    .apply_if(!is_base, |s| s.background(t.bg_elevated()))
-            })
-        })
-    }))
-    .style(|s| s.gap(4.0).width_full())
-    .into_any()
-}
-
-impl Style {
-    pub fn debug_view(&self, direct_style: Option<&Style>) -> Box<dyn View> {
-        let direct_keys =
-            direct_style.map(|style| style.map.keys().copied().collect::<HashSet<_>>());
-        let style = self.clone();
-        let inherited_groups = effective_inherited_debug_groups(&style, &HashSet::new());
-        let selected_tab = RwSignal::new(0);
-        let tab_item = move |name, index| {
-            Label::new(name)
-                .class(TabSelectorClass)
-                .action(move || selected_tab.set(index))
-                .style(move |s| s.set_selected(selected_tab.get() == index))
-        };
-        let tabs = (
-            tab_item("View Style", 0),
-            tab_item("Selectors", 1),
-            tab_item("Classes", 2),
-        )
-            .h_stack()
-            .style(|s| s.with_theme(|s, t| s.background(t.bg_base())));
-        let direct_keys_for_body = direct_keys.clone();
-        let style_for_body = style.clone();
-        let style_for_selectors = style.clone();
-        let style_for_classes = style.clone();
-        Stack::vertical((
-            tabs,
-            tab(
-                move || Some(selected_tab.get()),
-                move || [0, 1, 2],
-                |it| *it,
-                move |it| match it {
-                    0 => {
-                        let rows = style_debug_prop_rows(
-                            &style_for_body,
-                            direct_keys_for_body.as_ref(),
-                            &inherited_groups,
-                            0,
-                        );
-                        if rows.is_empty() {
-                            Label::new("empty")
-                                .style(|s| s.with_theme(|s, t| s.color(t.text_muted())))
-                                .into_any()
-                        } else {
-                            style_debug_rows(&rows, true)
-                        }
-                    }
-                    1 => {
-                        let rows =
-                            style_debug_selector_rows(&style_for_selectors, &inherited_groups, 0);
-                        if rows.is_empty() {
-                            Label::new("empty")
-                                .style(|s| s.with_theme(|s, t| s.color(t.text_muted())))
-                                .into_any()
-                        } else {
-                            style_debug_rows(&rows, true)
-                        }
-                    }
-                    2 => {
-                        let rows = style_debug_class_rows(&style_for_classes, &inherited_groups, 0);
-                        if rows.is_empty() {
-                            Label::new("empty")
-                                .style(|s| s.with_theme(|s, t| s.color(t.text_muted())))
-                                .into_any()
-                        } else {
-                            style_debug_rows(&rows, true)
-                        }
-                    }
-                    _ => Label::new("empty").into_any(),
-                },
-            ),
-        ))
-        .style(|s| s.width_full().gap(6.0))
-        .into_any()
-    }
-}
diff --git a/src/view/id.rs b/src/view/id.rs
index 05206842a..5e8c5b32b 100644
--- a/src/view/id.rs
+++ b/src/view/id.rs
@@ -83,6 +83,15 @@ unsafe impl slotmap::Key for ViewId {
     }
 }
 
+impl ViewId {
+    /// Raw bits of this `ViewId`'s slotmap key, suitable for storing in
+    /// host-agnostic engine structures like `floem_style::ElementId`.
+    #[inline]
+    pub fn as_raw(&self) -> u64 {
+        self.0.as_ffi()
+    }
+}
+
 fn request_structural_selector_restyle(children: &[ViewId]) {
     for child in children {
         child.request_style(StyleReason::full_recalc());
@@ -792,7 +801,7 @@ impl ViewId {
     pub fn is_hidden(&self) -> bool {
         let state = self.state();
         let state = state.borrow();
-        state.visibility.is_hidden()
+        state.style_storage.visibility.is_hidden()
     }
 
     /// if the view has pointer events none
@@ -800,7 +809,7 @@ impl ViewId {
         let state = self.state();
         let state = state.borrow();
         state
-            .computed_style
+            .style_storage.computed_style
             .builtin()
             .pointer_events()
             .map(|p| p == PointerEvents::None)
@@ -811,7 +820,7 @@ impl ViewId {
     ///
     /// This is done by checking if the style for this view has `Disabled` set to true.
     pub fn is_disabled(&self) -> bool {
-        self.state().borrow_mut().style_interaction_cx.disabled
+        self.state().borrow_mut().style_storage.style_interaction_cx.disabled
     }
 
     /// Returns true if the view is selected
@@ -819,7 +828,7 @@ impl ViewId {
     /// This is done by checking if the parent has set this view as selected
     /// via `parent_set_selected()`.
     pub fn is_selected(&self) -> bool {
-        self.state().borrow().parent_set_style_interaction.selected
+        self.state().borrow().style_storage.parent_set_style_interaction.selected
     }
 
     /// Check if this id can be focused.
@@ -828,7 +837,7 @@ impl ViewId {
     pub fn can_focus(&self) -> bool {
         self.state()
             .borrow()
-            .computed_style
+            .style_storage.computed_style
             .get(Focusable)
             .is_focusable()
     }
@@ -1067,7 +1076,7 @@ impl ViewId {
     /// a [prop extractor](crate::prop_extractor) that is updated in a style method
     /// of the View to extract the property.
     pub fn get_combined_style(&self) -> Style {
-        self.state().borrow().combined_style.clone()
+        self.state().borrow().style_storage.combined_style.clone()
     }
 
     /// Add a class to the list of style classes that are associated with this `ViewId`
@@ -1289,7 +1298,7 @@ impl ViewId {
                 Some(parent_box_node.0),
                 understory_box_tree::LocalNode::default(),
             );
-            let element_id = ElementId(child_element_id, *self, false);
+            let element_id = ElementId(child_element_id, self.as_raw(), false);
             box_tree
                 .borrow_mut()
                 .set_element_meta(child_element_id, Some(crate::ElementMeta::new(element_id)));
@@ -1585,8 +1594,8 @@ impl ViewId {
         let changed = {
             let state = self.state();
             let mut state = state.borrow_mut();
-            if !state.parent_set_style_interaction.selected {
-                state.parent_set_style_interaction.selected = true;
+            if !state.style_storage.parent_set_style_interaction.selected {
+                state.style_storage.parent_set_style_interaction.selected = true;
                 true
             } else {
                 false
@@ -1604,8 +1613,8 @@ impl ViewId {
         let changed = {
             let state = self.state();
             let mut state = state.borrow_mut();
-            if state.parent_set_style_interaction.selected {
-                state.parent_set_style_interaction.selected = false;
+            if state.style_storage.parent_set_style_interaction.selected {
+                state.style_storage.parent_set_style_interaction.selected = false;
                 true
             } else {
                 false
@@ -1623,8 +1632,8 @@ impl ViewId {
         let changed = {
             let state = self.state();
             let mut state = state.borrow_mut();
-            if !state.parent_set_style_interaction.disabled {
-                state.parent_set_style_interaction.disabled = true;
+            if !state.style_storage.parent_set_style_interaction.disabled {
+                state.style_storage.parent_set_style_interaction.disabled = true;
                 true
             } else {
                 false
@@ -1642,8 +1651,8 @@ impl ViewId {
         let changed = {
             let state = self.state();
             let mut state = state.borrow_mut();
-            if state.parent_set_style_interaction.disabled {
-                state.parent_set_style_interaction.disabled = false;
+            if state.style_storage.parent_set_style_interaction.disabled {
+                state.style_storage.parent_set_style_interaction.disabled = false;
                 true
             } else {
                 false
@@ -1663,9 +1672,9 @@ impl ViewId {
         let changed = {
             let state = self.state();
             let mut state = state.borrow_mut();
-            if !state.parent_set_style_interaction.hidden {
-                state.parent_set_style_interaction.hidden = true;
-                state.visibility.phase = VisibilityPhase::Hidden;
+            if !state.style_storage.parent_set_style_interaction.hidden {
+                state.style_storage.parent_set_style_interaction.hidden = true;
+                state.style_storage.visibility.phase = VisibilityPhase::Hidden;
                 true
             } else {
                 false
@@ -1684,10 +1693,10 @@ impl ViewId {
         let changed = {
             let state = self.state();
             let mut state = state.borrow_mut();
-            if state.parent_set_style_interaction.hidden {
-                state.parent_set_style_interaction.hidden = false;
+            if state.style_storage.parent_set_style_interaction.hidden {
+                state.style_storage.parent_set_style_interaction.hidden = false;
                 // Reset phase to Initial so the normal transition logic can run
-                state.visibility.phase = VisibilityPhase::Initial;
+                state.style_storage.visibility.phase = VisibilityPhase::Initial;
                 true
             } else {
                 false
diff --git a/src/view/mod.rs b/src/view/mod.rs
index d2bfcf8df..504ab05de 100644
--- a/src/view/mod.rs
+++ b/src/view/mod.rs
@@ -76,7 +76,6 @@ use crate::{
         dyn_view,
     },
 };
-use state::ViewStyleProps;
 
 /// type erased [`View`]
 ///
diff --git a/src/view/state.rs b/src/view/state.rs
index 09915aacf..595a4267b 100644
--- a/src/view/state.rs
+++ b/src/view/state.rs
@@ -8,14 +8,7 @@ use crate::{
     },
     event::listener::{self, EventListenerKey},
     message::UpdateMessage,
-    prop_extractor,
-    style::{
-        Background, BorderBottomColor, BorderBottomLeftRadius, BorderBottomRightRadius,
-        BorderLeftColor, BorderRightColor, BorderTopColor, BorderTopLeftRadius,
-        BorderTopRightRadius, BoxShadowProp, CursorStyle, InheritedInteractionCx, LayoutProps,
-        Outline, OutlineColor, Style, StyleClassRef, StyleSelectors, TransformProps,
-        recalc::StyleReason,
-    },
+    style::{CursorStyle, Style, StyleClassRef, StyleStorage, recalc::StyleReason},
     view::LayoutTree,
 };
 use floem_reactive::Scope;
@@ -77,138 +70,7 @@ impl<T> Stack<T> {
     }
 }
 
-prop_extractor! {
-    pub(crate) ViewStyleProps {
-        pub border_top_left_radius: BorderTopLeftRadius,
-        pub border_top_right_radius: BorderTopRightRadius,
-        pub border_bottom_left_radius: BorderBottomLeftRadius,
-        pub border_bottom_right_radius: BorderBottomRightRadius,
-        pub border_progress: crate::style::BorderProgress,
-
-        pub outline: Outline,
-        pub outline_color: OutlineColor,
-        pub outline_progress: crate::style::OutlineProgress,
-        pub border_left_color: BorderLeftColor,
-        pub border_top_color: BorderTopColor,
-        pub border_right_color: BorderRightColor,
-        pub border_bottom_color: BorderBottomColor,
-        pub background: Background,
-        pub shadow: BoxShadowProp,
-    }
-}
-
-/// The current phase of visibility for enter/exit animations.
-///
-/// This enum tracks the display state during CSS-driven visibility transitions
-/// (e.g., animating from visible to display:none).
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
-pub enum VisibilityPhase {
-    /// Initial state - display not yet computed.
-    #[default]
-    Initial,
-    /// Visible with the given display mode.
-    Visible(taffy::style::Display),
-    /// Exit animation in progress.
-    Animating(taffy::style::Display),
-    /// Hidden (display: none).
-    Hidden,
-}
-
-impl VisibilityPhase {
-    pub(crate) fn get_display_override(&self) -> Option<taffy::style::Display> {
-        match self {
-            VisibilityPhase::Animating(dis) => Some(*dis),
-            _ => None,
-        }
-    }
-
-    pub(crate) fn transition(
-        &mut self,
-        computed_display: taffy::Display,
-        remove_animations: impl FnOnce() -> bool,
-        add_animations: impl FnOnce(),
-        stop_reset_animations: impl FnOnce(),
-        num_waiting_anim: impl FnOnce() -> u16,
-    ) {
-        let computed_has_hide = computed_display == taffy::Display::None;
-        *self = match self {
-            // initial states (makes it so that the animations aren't run on initial app/view load)
-            Self::Initial if computed_has_hide => Self::Hidden,
-            Self::Initial if !computed_has_hide => Self::Visible(computed_display),
-            // do nothing
-            Self::Visible(dis) if !computed_has_hide => Self::Visible(*dis),
-            // transition to hidden
-            Self::Visible(dis) if computed_has_hide => {
-                let active_animations = remove_animations();
-                if active_animations {
-                    Self::Animating(*dis)
-                } else {
-                    Self::Hidden
-                }
-            }
-            Self::Animating(_) if !computed_has_hide => {
-                stop_reset_animations();
-                Self::Visible(computed_display)
-            }
-            Self::Animating(dis) if computed_has_hide => {
-                if num_waiting_anim() == 0 {
-                    Self::Hidden
-                } else {
-                    Self::Animating(*dis)
-                }
-            }
-            Self::Hidden if computed_has_hide => Self::Hidden,
-            Self::Hidden if !computed_has_hide => {
-                add_animations();
-                Self::Visible(computed_display)
-            }
-            _ => unreachable!(),
-        };
-    }
-}
-
-/// Controls view visibility state.
-///
-/// This struct consolidates two related aspects of visibility:
-/// - `phase`: CSS-driven visibility phase for enter/exit animations
-/// - `force_hidden`: API-driven hiding (e.g., Tab hiding inactive children)
-///
-/// When `force_hidden` is true, the view is immediately hidden without animations.
-#[derive(Debug, Clone, Copy, Default)]
-pub struct Visibility {
-    /// The current visibility phase (for enter/exit animations).
-    pub phase: VisibilityPhase,
-    // /// When true, view is force-hidden via set_hidden() API.
-    // /// This bypasses the normal transition logic.
-    // pub force_hidden: bool,
-}
-
-impl Visibility {
-    /// Returns true if the view should be treated as hidden.
-    pub fn is_hidden(&self) -> bool {
-        self.phase == VisibilityPhase::Hidden
-    }
-}
-
-impl ViewStyleProps {
-    pub fn border_radius(&self) -> crate::style::BorderRadius {
-        crate::style::BorderRadius {
-            top_left: Some(self.border_top_left_radius()),
-            top_right: Some(self.border_top_right_radius()),
-            bottom_left: Some(self.border_bottom_left_radius()),
-            bottom_right: Some(self.border_bottom_right_radius()),
-        }
-    }
-
-    pub fn border_color(&self) -> crate::style::BorderColor {
-        crate::style::BorderColor {
-            left: self.border_left_color(),
-            top: self.border_top_color(),
-            right: self.border_right_color(),
-            bottom: self.border_bottom_color(),
-        }
-    }
-}
+pub use floem_style::{ViewStyleProps, Visibility, VisibilityPhase};
 
 /// Cached prefix-sum style stack with dirty tracking.
 pub struct StyleStack {
@@ -325,67 +187,23 @@ pub struct ViewState {
     /// We store the stack offset to the view style to keep the api consistent but it should
     /// always be the first offset.
     pub(crate) view_style_offset: StackOffset<Style>,
-    pub(crate) has_style_selectors: Option<StyleSelectors>,
     // the translation value that this view applies to children elements. Scroll view can use this to scroll.
     pub(crate) child_translation: Vec2,
-    pub(crate) layout_props: LayoutProps,
-    pub(crate) view_style_props: ViewStyleProps,
-    pub(crate) view_transform_props: TransformProps,
     pub(crate) animations: Stack<Animation>,
     pub(crate) classes: SmallVec<[StyleClassRef; 4]>,
     pub(crate) dragging_style: Option<Style>,
-    pub(crate) combined_pre_animation_style: Style,
-    /// The resolved style for this view (base + selectors + classes).
-    /// Does NOT include inherited properties from ancestors.
-    ///
-    /// Use for style resolution logic (what did this view define?):
-    /// - Checking if a property is explicitly set on this view
-    /// - Computing class context propagation to children
-    /// - Building style cache keys
-    pub(crate) combined_style: Style,
-    /// The final computed style including inherited properties from ancestors.
-    /// This is combined_style merged with inherited context (font_size, color, etc.).
-    ///
-    /// Use for rendering and layout (what will the user see?):
-    /// - Layout calculations via prop extractors
-    /// - Visual properties (background, border, transform)
-    /// - Anything that affects what gets rendered
-    /// - Converting to taffy style for layout engine
-    ///
-    /// This DOES NOT have final interpolated values and it DOES NOT resolve properties into points.
-    pub(crate) computed_style: Style,
+    /// Engine-owned per-node style state (resolved styles, extracted props,
+    /// visibility phase, interaction cx, etc.). See [`StyleStorage`].
+    pub(crate) style_storage: StyleStorage,
+    /// Companion node in [`WindowState::style_tree`](crate::window::state::WindowState).
+    /// Populated when the view is first seen by the window and cleared on
+    /// teardown. Phase 2a wires lifecycle only; style data and cascade still
+    /// live in `StyleStorage` / `StyleCx`.
+    pub(crate) style_node: Option<floem_style::StyleNodeId>,
     /// this can be used to make it so that a view will pull it's style context from a different parent.
     /// This is useful for overlays that are children of the window root but should pull their style cx from the creating view
     pub(crate) style_cx_parent: Option<ViewId>,
-    /// The inherited properties context for children.
-    /// Contains only properties marked as `inherited` (font-size, color, etc.).
-    ///
-    /// Derived from this view's computed_style (which includes inherited properties
-    /// from ancestors). Children will merge this with their combined_style to produce
-    /// their computed_style.
-    pub(crate) style_cx: Style,
-    /// The class context containing class definitions for descendants.
-    /// Contains `.class(SomeClass, ...)` nested maps that flow down the tree.
-    ///
-    /// Derived from this view's combined_style (only explicitly set class definitions).
-    /// Children will use this to resolve their class references when computing their
-    /// combined_style.
-    pub(crate) class_cx: Style,
-    /// the style interaction cx that is saved after computing the final style.
-    /// This will be used as the base interaction for all **children** of this view as these are the inherited interactions
-    pub(crate) style_interaction_cx: InheritedInteractionCx,
-    /// View-local interaction flags derived from this view's resolved combined style.
-    ///
-    /// This excludes inherited parent interaction and is OR'ed onto StyleCx interaction
-    /// state during fast-path style passes that skip `compute_combined`.
-    pub(crate) post_compute_combined_interaction: InheritedInteractionCx,
-    /// This interaction context can be set by a parent on this view. This will be used when building the StyleCx for **this** view.
-    pub(crate) parent_set_style_interaction: InheritedInteractionCx,
-    /// Controls view visibility for phase transitions.
-    pub(crate) visibility: Visibility,
-    /// The cursor style set by the style pass on the view. There is also the [`Self::user_cursor`] that takes precedance over this cursor.
-    pub(crate) style_cursor: Option<CursorStyle>,
-    /// the cursor style that a user can set on a view through the `ViewId`. This takes precedance over style_cursor.
+    /// the cursor style that a user can set on a view through the `ViewId`. This takes precedance over `style_storage.style_cursor`.
     pub(crate) user_cursor: Option<CursorStyle>,
     pub(crate) taffy_style: taffy::style::Style,
     pub(crate) event_listeners: FxHashMap<EventListenerKey, EventListenerVec>,
@@ -396,7 +214,6 @@ pub struct ViewState {
     pub(crate) context_menu: Option<Rc<MenuCallback>>,
     pub(crate) popout_menu: Option<Rc<MenuCallback>>,
     pub(crate) cleanup_listeners: Rc<RefCell<CleanupListeners>>,
-    pub(crate) num_waiting_animations: u16,
     pub(crate) disable_default_events: HashSet<EventListenerKey>,
     /// This transform is user settable and is a transfrom that is applied after the transfrom from the `view_transform_props` which is the transfrom applied by style properties.
     pub(crate) transform: Affine,
@@ -422,7 +239,7 @@ impl ViewState {
 
         let element_id = crate::ElementId(
             box_tree.push_child(None, understory_box_tree::LocalNode::default()),
-            id,
+            id.as_raw(),
             true,
         );
         box_tree.set_element_meta(element_id.0, Some(crate::ElementMeta::new(element_id)));
@@ -437,16 +254,12 @@ impl ViewState {
             element_id,
             style,
             view_style_offset,
-            layout_props: Default::default(),
-            view_style_props: Default::default(),
-            has_style_selectors: None,
             animations: Default::default(),
             classes: SmallVec::new(),
-            combined_pre_animation_style: Style::new(),
-            combined_style: Style::new(),
-            computed_style: Style::new(),
             taffy_style: taffy::style::Style::DEFAULT,
             dragging_style: None,
+            style_storage: StyleStorage::default(),
+            style_node: None,
             event_listeners: FxHashMap::default(),
             registered_listener_keys: SmallVec::new(),
             layout: None,
@@ -455,19 +268,10 @@ impl ViewState {
             popout_menu: None,
             child_translation: Vec2::ZERO,
             cleanup_listeners: Default::default(),
-            num_waiting_animations: 0,
             disable_default_events: HashSet::new(),
-            view_transform_props: Default::default(),
             transform: Affine::IDENTITY,
             debug_name: Default::default(),
             style_cx_parent: None,
-            style_cx: Style::new(),
-            class_cx: Style::new(),
-            style_interaction_cx: Default::default(),
-            post_compute_combined_interaction: Default::default(),
-            parent_set_style_interaction: Default::default(),
-            visibility: Visibility::default(),
-            style_cursor: None,
             user_cursor: None,
             children_scope: None,
             keyed_children: None,
@@ -479,122 +283,43 @@ impl ViewState {
         self.style.style()
     }
 
-    /// Get the content hash of the current style without cloning.
-    /// O(1) after the style stack is clean (hash is cached during recomputation).
-    pub(crate) fn style_content_hash(&mut self) -> u64 {
-        self.style.ensure_clean();
-        self.style.content_hash()
-    }
-
-    /// Check if the current style is cacheable without cloning.
-    pub(crate) fn style_is_cacheable(&mut self) -> bool {
-        self.style.ensure_clean();
-        self.style.is_cacheable()
-    }
-
     pub fn cursor(&self) -> Option<CursorStyle> {
-        self.style_cursor.or(self.user_cursor)
-    }
-
-    /// Compute the combined style by applying selectors, responsive styles, and classes.
-    /// Returns the combined style and a flag indicating if new classes were applied.
-    ///
-    /// Takes two separate contexts:
-    /// - `inherited_context`: Contains inherited properties (font-size, color, etc.)
-    ///   Used for `with_context` evaluation and inherited prop resolution.
-    /// - `class_context`: Contains class nested maps (`.class(SomeClass, ...)`)
-    ///   Used for class styling that flows from ancestors.
-    pub(crate) fn compute_combined(
-        &mut self,
-        interact_state: &mut crate::style::InteractionState,
-        screen_size_bp: crate::layout::responsive::ScreenSizeBp,
-        view_class: Option<crate::style::StyleClassRef>,
-        inherited_context: &Style,
-        class_context: &Style,
-    ) {
-        // Start with the combined stacked styles
-        let base_style = self.style().with_inherited_context(inherited_context);
-        interact_state.is_disabled |= base_style.builtin().set_disabled();
-        interact_state.is_selected |= base_style.builtin().set_selected();
-        interact_state.is_hidden |= base_style.builtin().display() == taffy::Display::None;
-        let base_selectors = base_style.selectors() | class_context.selectors();
-
-        // Build the full class list: view's classes + view type class
-        let mut all_classes =
-            Vec::with_capacity(self.classes.len() + usize::from(view_class.is_some()));
-        all_classes.extend(self.classes.iter().copied());
-        if let Some(vc) = view_class {
-            all_classes.push(vc);
-        }
-
-        // Create mutable contexts - inherited for with_context evaluation
-        // Resolve all nested maps: selectors, responsive styles, and classes
-        let (combined, selectors) = crate::style::resolve_nested_maps(
-            base_style,
-            interact_state,
-            screen_size_bp,
-            &all_classes,
-            inherited_context,
-            class_context,
-        );
-
-        interact_state.is_hidden |= combined.builtin().display() == taffy::Display::None;
-        interact_state.is_selected |= combined.builtin().set_selected();
-        interact_state.is_disabled |= combined.builtin().set_disabled();
-        self.post_compute_combined_interaction = InheritedInteractionCx {
-            hidden: combined.builtin().display() == taffy::Display::None,
-            selected: combined.builtin().set_selected(),
-            disabled: combined.builtin().set_disabled(),
-        };
-
-        self.has_style_selectors = Some(selectors | base_selectors);
-        self.combined_pre_animation_style = combined.clone();
-        self.combined_style = combined.clone();
+        self.style_storage.style_cursor.or(self.user_cursor)
     }
 
+    /// Apply this view's animation stack on top of `combined`, mutating
+    /// it in place with interpolated values. ORs any animated
+    /// `display:none`/`set_disabled`/`set_selected` into `interact_state`.
+    /// Returns `true` iff any animation is still active (so the tree
+    /// cascade can schedule another pass).
     pub fn apply_animations(
         &mut self,
+        combined: &mut Style,
         interact_state: &mut crate::style::InteractionState,
     ) -> bool {
-        let mut combined = self.combined_pre_animation_style.clone();
-        // ─────────────────────────────────────────────────────────────────────
-        // Process animations
-        // ─────────────────────────────────────────────────────────────────────
-        // Animations modify the computed style by interpolating between keyframe values.
-        // We process animations here, after the base style is computed but before
-        // it's stored, so animated values override static style values.
         let mut has_active_animation = false;
+        for animation in self
+            .animations
+            .stack
+            .iter_mut()
+            .filter(|anim| anim.can_advance() || anim.should_apply_folded())
         {
-            for animation in self
-                .animations
-                .stack
-                .iter_mut()
-                .filter(|anim| anim.can_advance() || anim.should_apply_folded())
-            {
-                if animation.can_advance() {
-                    has_active_animation = true;
-                    animation.animate_into(&mut combined);
-                    animation.advance();
-                } else {
-                    animation.apply_folded(&mut combined);
-                }
-                debug_assert!(
-                    !animation.is_idle(),
-                    "Animation should not be idle after processing"
-                );
+            if animation.can_advance() {
+                has_active_animation = true;
+                animation.animate_into(combined);
+                animation.advance();
+            } else {
+                animation.apply_folded(combined);
             }
+            debug_assert!(
+                !animation.is_idle(),
+                "Animation should not be idle after processing"
+            );
         }
 
         interact_state.is_hidden |= combined.builtin().display() == taffy::Display::None;
         interact_state.is_selected |= combined.builtin().set_selected();
         interact_state.is_disabled |= combined.builtin().set_disabled();
-        self.post_compute_combined_interaction = InheritedInteractionCx {
-            hidden: combined.builtin().display() == taffy::Display::None,
-            selected: combined.builtin().set_selected(),
-            disabled: combined.builtin().set_disabled(),
-        };
-
-        self.combined_style = combined;
 
         has_active_animation
     }
diff --git a/src/views/dropdown.rs b/src/views/dropdown.rs
index d77f0f50d..fe9263cc1 100644
--- a/src/views/dropdown.rs
+++ b/src/views/dropdown.rs
@@ -227,9 +227,13 @@ impl<T: 'static + Clone + PartialEq + core::fmt::Debug> View for Dropdown<T> {
     }
 
     fn style_pass(&mut self, cx: &mut crate::context::StyleCx<'_>) {
-        if self.style.read(cx) {
+        let mut transitioning = false;
+        if self.style.read(cx, &mut transitioning) {
             cx.window_state.request_paint(self.id);
         }
+        if transitioning {
+            cx.request_transition();
+        }
     }
 
     fn update(&mut self, cx: &mut crate::context::UpdateCx, state: Box<dyn std::any::Any>) {
diff --git a/src/views/dyn_container.rs b/src/views/dyn_container.rs
index 6cea322d5..6a7f4f287 100644
--- a/src/views/dyn_container.rs
+++ b/src/views/dyn_container.rs
@@ -199,7 +199,7 @@ fn animations_recursive_on_remove(id: ViewId, child_id: ViewId, child_scope: Sco
     let animations = &mut state.animations.stack;
     let mut request_style = false;
     for anim in animations {
-        if anim.run_on_remove && !matches!(anim.repeat_mode, RepeatMode::LoopForever) {
+        if anim.runs_on_remove() && !matches!(anim.repeat_mode(), RepeatMode::LoopForever) {
             anim.reverse_mut();
             request_style = true;
             wait_for += 1;
@@ -230,7 +230,7 @@ fn animations_recursive_on_create(child_id: ViewId) {
     let animations = &mut state.animations.stack;
     let mut request_style = false;
     for anim in animations {
-        if anim.run_on_create && !matches!(anim.repeat_mode, RepeatMode::LoopForever) {
+        if anim.runs_on_create() && !matches!(anim.repeat_mode(), RepeatMode::LoopForever) {
             anim.start_mut();
             request_style = true;
         }
diff --git a/src/views/editor/gutter.rs b/src/views/editor/gutter.rs
index 1f676e8fc..eb2ff82c0 100644
--- a/src/views/editor/gutter.rs
+++ b/src/views/editor/gutter.rs
@@ -79,9 +79,13 @@ impl View for EditorGutterView {
     }
 
     fn style_pass(&mut self, cx: &mut crate::context::StyleCx<'_>) {
-        if self.gutter_style.read(cx) {
+        let mut transitioning = false;
+        if self.gutter_style.read(cx, &mut transitioning) {
             cx.window_state.request_paint(self.id());
         }
+        if transitioning {
+            cx.request_transition();
+        }
     }
 
     fn paint(&mut self, cx: &mut PaintCx) {
diff --git a/src/views/editor/mod.rs b/src/views/editor/mod.rs
index 9786750df..abe7116d7 100644
--- a/src/views/editor/mod.rs
+++ b/src/views/editor/mod.rs
@@ -15,9 +15,8 @@ use crate::{
     peniko::{Brush, Color, color::palette},
     prop, prop_extractor,
     reactive::{Effect, ReadSignal, RwSignal, Scope},
-    style::{CursorColor, StylePropValue, TextColor},
+    style::{CursorColor, PropDebugView, StylePropValue, TextColor},
     text::{Attrs, AttrsList, LineHeightValue, OverflowWrap, TextLayout, TextWrapMode},
-    view::{IntoView, View},
 };
 use floem_editor_core::{
     buffer::rope_text::{RopeText, RopeTextVal},
@@ -65,12 +64,14 @@ use self::{
     },
 };
 
-use super::Label;
-
 prop!(pub WrapProp: WrapMethod {} = WrapMethod::EditorWidth);
-impl StylePropValue for WrapMethod {
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        Some(crate::views::Label::new(self).into_any())
+impl StylePropValue for WrapMethod {}
+impl PropDebugView for WrapMethod {
+    fn debug_view(
+        &self,
+        r: &dyn crate::style::InspectorRender,
+    ) -> Option<Box<dyn std::any::Any>> {
+        Some(r.text(&self.to_string()))
     }
 }
 prop!(pub CursorSurroundingLines: usize {} = 1);
@@ -83,17 +84,16 @@ prop!(pub PhantomColor: Color {} = palette::css::DIM_GRAY);
 prop!(pub PlaceholderColor: Color {} = palette::css::DIM_GRAY);
 prop!(pub PreeditUnderlineColor: Color {} = palette::css::WHITE);
 prop!(pub RenderWhitespaceProp: RenderWhitespace {} = RenderWhitespace::None);
-impl StylePropValue for RenderWhitespace {
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        Some(crate::views::Label::new(self).into_any())
+impl StylePropValue for RenderWhitespace {}
+impl PropDebugView for RenderWhitespace {
+    fn debug_view(
+        &self,
+        r: &dyn crate::style::InspectorRender,
+    ) -> Option<Box<dyn std::any::Any>> {
+        Some(r.text(&self.to_string()))
     }
 }
 prop!(pub IndentStyleProp: IndentStyle {} = IndentStyle::Spaces(4));
-impl StylePropValue for IndentStyle {
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        Some(Label::new(self).into_any())
-    }
-}
 prop!(pub DropdownShadow: Option<Color> {} = None);
 prop!(pub Foreground: Color { inherited } = Color::from_rgb8(0x38, 0x3A, 0x42));
 prop!(pub Focus: Option<Color> {} = None);
diff --git a/src/views/editor/view.rs b/src/views/editor/view.rs
index 5743317b6..58c2b0c19 100644
--- a/src/views/editor/view.rs
+++ b/src/views/editor/view.rs
@@ -964,14 +964,18 @@ impl View for EditorView {
     }
 
     fn style_pass(&mut self, cx: &mut crate::context::StyleCx<'_>) {
+        let mut transitioning = false;
         self.editor.with_untracked(|ed| {
             ed.es.update(|s| {
-                if s.read(cx) {
+                if s.read(cx, &mut transitioning) {
                     ed.floem_style_id.update(|val| *val += 1);
                     cx.window_state.request_paint(self.id());
                 }
             })
         });
+        if transitioning {
+            cx.request_transition();
+        }
     }
 
     fn debug_name(&self) -> std::borrow::Cow<'static, str> {
diff --git a/src/views/img.rs b/src/views/img.rs
index 8a5154f9e..d6d79ddcd 100644
--- a/src/views/img.rs
+++ b/src/views/img.rs
@@ -354,11 +354,15 @@ impl View for Img {
     }
 
     fn style_pass(&mut self, cx: &mut crate::context::StyleCx<'_>) {
-        if self.style.read(cx) {
+        let mut transitioning = false;
+        if self.style.read(cx, &mut transitioning) {
             // object_fit changed, update taffy layout
             self.set_taffy_layout();
             self.id.request_layout();
         }
+        if transitioning {
+            cx.request_transition();
+        }
     }
 
     fn paint(&mut self, cx: &mut crate::context::PaintCx) {
diff --git a/src/views/label.rs b/src/views/label.rs
index daea0e671..d44c7593b 100644
--- a/src/views/label.rs
+++ b/src/views/label.rs
@@ -482,15 +482,21 @@ impl View for Label {
     }
 
     fn style_pass(&mut self, cx: &mut crate::context::StyleCx<'_>) {
-        if self.font_props.read(cx) | self.label_props.read(cx) {
+        let mut transitioning = false;
+        if self.font_props.read(cx, &mut transitioning)
+            | self.label_props.read(cx, &mut transitioning)
+        {
             self.layout_data.borrow_mut().clear_overflow_state();
             self.set_text_layout();
             self.id.request_layout();
             self.id.request_paint();
         }
-        if self.selection_style.read(cx) {
+        if self.selection_style.read(cx, &mut transitioning) {
             cx.window_state.request_paint(self.id);
         }
+        if transitioning {
+            cx.request_transition();
+        }
     }
 
     fn update(&mut self, cx: &mut UpdateCx, state: Box<dyn Any>) {
diff --git a/src/views/localization.rs b/src/views/localization.rs
index dcbecee75..c2beb84da 100644
--- a/src/views/localization.rs
+++ b/src/views/localization.rs
@@ -3,9 +3,9 @@
 use std::borrow::Cow;
 use std::rc::Rc;
 
-use crate::style::{CustomStylable, CustomStyle, Style, StylePropValue};
+use crate::style::{CustomStylable, CustomStyle, PropDebugView, Style, StylePropValue};
 use crate::views::Decorators;
-use crate::{AnyView, IntoView, View, ViewId, prop, prop_extractor, style_class};
+use crate::{IntoView, View, ViewId, prop, prop_extractor, style_class};
 use floem_reactive::UpdaterEffect;
 use fluent_bundle::{FluentBundle, FluentResource};
 use ouroboros::self_referencing;
@@ -56,15 +56,19 @@ impl PartialEq for LocaleMap {
     }
 }
 
-impl StylePropValue for LocaleMap {
-    fn debug_view(&self) -> Option<AnyView> {
+impl StylePropValue for LocaleMap {}
+impl PropDebugView for LocaleMap {
+    fn debug_view(
+        &self,
+        _r: &dyn crate::style::InspectorRender,
+    ) -> Option<Box<dyn std::any::Any>> {
         use crate::prelude::*;
 
         let languages: Vec<String> = self.0.keys().map(|lang_id| lang_id.to_string()).collect();
 
         let count = languages.len();
 
-        let view = Stack::new((
+        let view: Box<dyn crate::view::View> = Stack::new((
             format!("Languages ({count})").style(|s| {
                 s.font_size(12.0)
                     .font_weight(floem_renderer::text::FontWeight::SEMI_BOLD)
@@ -90,21 +94,17 @@ impl StylePropValue for LocaleMap {
                 .border_color(palette::css::WHITE.with_alpha(0.3))
                 .border_radius(6.0)
                 .min_width(120.0)
-        });
+        })
+        .into_any();
 
-        Some(view.into_any())
+        Some(Box::new(view))
     }
 }
 
-impl StylePropValue for LanguageIdentifier {
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        Some(crate::views::Label::new(format!("{self:?}")).into_any())
-    }
-
-    fn interpolate(&self, _other: &Self, _value: f64) -> Option<Self> {
-        None
-    }
-}
+// `impl StylePropValue for LanguageIdentifier` and
+// `impl PropDebugView for LanguageIdentifier` both live in
+// `floem_style::value_impls::localization` (behind the `localization` feature)
+// to satisfy the orphan rule.
 
 impl LocaleMap {
     /// Accepts list of the language resources in a form of a list implementing [IntoIterator]
@@ -463,7 +463,8 @@ impl View for L10n {
     }
 
     fn style_pass(&mut self, cx: &mut crate::context::StyleCx<'_>) {
-        if self.locale.read(cx) {
+        let mut transitioning = false;
+        if self.locale.read(cx, &mut transitioning) {
             self.has_format_value = false;
         }
         if !self.has_format_value
@@ -472,10 +473,13 @@ impl View for L10n {
             self.label_id.update_state(formatted);
             self.has_format_value = true;
         }
-        self.fallback.read(cx);
+        self.fallback.read(cx, &mut transitioning);
         if !self.has_format_value && !self.apply_fallback() {
             self.label_id.update_state(self.key.clone());
         }
+        if transitioning {
+            cx.request_transition();
+        }
     }
 
     fn update(&mut self, _cx: &mut crate::context::UpdateCx, state: Box<dyn std::any::Any>) {
diff --git a/src/views/resizable.rs b/src/views/resizable.rs
index 53b47e543..031a1e709 100644
--- a/src/views/resizable.rs
+++ b/src/views/resizable.rs
@@ -25,6 +25,7 @@ use peniko::{
     kurbo::{Axis, Rect},
 };
 use rustc_hash::FxHashMap;
+use smallvec::SmallVec;
 use taffy::{FlexDirection, Overflow};
 use ui_events::pointer::PointerEvent;
 use understory_box_tree::NodeFlags;
@@ -319,9 +320,13 @@ impl Handle {
             &[ResizableHandleClass::class_ref()],
             self.element_id,
         );
+        let node = cx
+            .window_state
+            .ensure_style_node_for_element(self.element_id);
+        let mut transitioning = false;
         if self
             .handle_style
-            .read_style_for(cx, &resolved, self.element_id)
+            .read_style(cx, &resolved, &mut transitioning)
         {
             let cursor = match axis {
                 Axis::Horizontal => CursorStyle::ColResize,
@@ -331,6 +336,9 @@ impl Handle {
             cx.window_state.set_cursor(self.element_id, cursor);
             cx.window_state.request_paint(self.element_id);
         }
+        if transitioning {
+            cx.request_transition_for(node);
+        }
     }
 
     fn paint(&self, cx: &mut PaintCx<'_>, axis: Axis) {
@@ -383,8 +391,12 @@ impl View for Resizable {
     }
 
     fn style_pass(&mut self, cx: &mut crate::context::StyleCx<'_>) {
+        let mut transitioning = false;
         if cx.reason.flags != StyleReasonFlags::TARGET {
-            self.re_style.read(cx);
+            self.re_style.read(cx, &mut transitioning);
+        }
+        if transitioning {
+            cx.request_transition();
         }
 
         // If the reason implies nested style maps must be resolved, restyle everything.
@@ -395,9 +407,21 @@ impl View for Resizable {
             return;
         }
 
-        for (element_id, _reason) in cx.targeted_elements.clone() {
-            if let Some(handle) = self.handles.get_mut(&element_id) {
-                handle.style(cx, self.re_style.direction().axis());
+        let handle_nodes: SmallVec<[(ElementId, floem_style::StyleNodeId); 2]> = self
+            .handles
+            .keys()
+            .map(|element_id| {
+                (
+                    *element_id,
+                    cx.window_state.ensure_style_node_for_element(*element_id),
+                )
+            })
+            .collect();
+        for (node, _reason) in cx.targeted_elements.clone() {
+            if let Some((element_id, _)) = handle_nodes.iter().find(|(_, n)| *n == node) {
+                if let Some(handle) = self.handles.get_mut(element_id) {
+                    handle.style(cx, self.re_style.direction().axis());
+                }
             }
         }
     }
diff --git a/src/views/scroll.rs b/src/views/scroll.rs
index 3552c8e11..8f6fb4ae7 100644
--- a/src/views/scroll.rs
+++ b/src/views/scroll.rs
@@ -106,9 +106,16 @@ impl ScrollHandle {
     fn style(&mut self, cx: &mut StyleCx) {
         let resolved =
             cx.resolve_nested_maps(Style::new(), &[Handle::class_ref()], self.element_id);
-        if self.style.read_style_for(cx, &resolved, self.element_id) {
+        let node = cx
+            .window_state
+            .ensure_style_node_for_element(self.element_id);
+        let mut transitioning = false;
+        if self.style.read_style(cx, &resolved, &mut transitioning) {
             self.element_id.owning_id().request_paint();
         }
+        if transitioning {
+            cx.request_transition_for(node);
+        }
     }
 
     fn event(
@@ -328,9 +335,16 @@ impl ScrollTrack {
 
     fn style(&mut self, cx: &mut StyleCx) {
         let resolved = cx.resolve_nested_maps(Style::new(), &[Track::class_ref()], self.element_id);
-        if self.style.read_style_for(cx, &resolved, self.element_id) {
+        let node = cx
+            .window_state
+            .ensure_style_node_for_element(self.element_id);
+        let mut transitioning = false;
+        if self.style.read_style(cx, &resolved, &mut transitioning) {
             self.element_id.owning_id().request_paint();
         }
+        if transitioning {
+            cx.request_transition_for(node);
+        }
     }
 
     fn event(
@@ -932,7 +946,11 @@ impl View for Scroll {
     }
 
     fn style_pass(&mut self, cx: &mut crate::context::StyleCx<'_>) {
-        self.scroll_style.read(cx);
+        let mut transitioning = false;
+        self.scroll_style.read(cx, &mut transitioning);
+        if transitioning {
+            cx.request_transition();
+        }
 
         // If the reason implies nested style maps must be resolved, restyle everything.
         if cx.reason.needs_resolve_nested_maps() {
@@ -943,14 +961,26 @@ impl View for Scroll {
             return;
         }
 
-        for (element_id, _reason) in cx.targeted_elements.clone() {
-            if element_id == self.v_handle.element_id {
+        let v_handle_node = cx
+            .window_state
+            .ensure_style_node_for_element(self.v_handle.element_id);
+        let h_handle_node = cx
+            .window_state
+            .ensure_style_node_for_element(self.h_handle.element_id);
+        let v_track_node = cx
+            .window_state
+            .ensure_style_node_for_element(self.v_track.element_id);
+        let h_track_node = cx
+            .window_state
+            .ensure_style_node_for_element(self.h_track.element_id);
+        for (node, _reason) in cx.targeted_elements.clone() {
+            if node == v_handle_node {
                 self.v_handle.style(cx);
-            } else if element_id == self.h_handle.element_id {
+            } else if node == h_handle_node {
                 self.h_handle.style(cx);
-            } else if element_id == self.v_track.element_id {
+            } else if node == v_track_node {
                 self.v_track.style(cx);
-            } else if element_id == self.h_track.element_id {
+            } else if node == h_track_node {
                 self.h_track.style(cx);
             }
         }
diff --git a/src/views/slider.rs b/src/views/slider.rs
index beaac358f..5db1b8e34 100644
--- a/src/views/slider.rs
+++ b/src/views/slider.rs
@@ -358,16 +358,24 @@ impl View for Slider {
     fn style_pass(&mut self, cx: &mut crate::context::StyleCx<'_>) {
         let style = cx.style();
         let mut paint = false;
+        let mut transitioning = false;
 
         let base_bar_style = style.clone().apply_class(BarClass);
-        paint |= self.base_bar_style.read_style(cx, &base_bar_style);
+        paint |= self
+            .base_bar_style
+            .read_style(cx, &base_bar_style, &mut transitioning);
 
         let accent_bar_style = style.apply_class(AccentBarClass);
-        paint |= self.accent_bar_style.read_style(cx, &accent_bar_style);
-        paint |= self.style.read(cx);
+        paint |= self
+            .accent_bar_style
+            .read_style(cx, &accent_bar_style, &mut transitioning);
+        paint |= self.style.read(cx, &mut transitioning);
         if paint {
             cx.window_state.request_paint(self.id);
         }
+        if transitioning {
+            cx.request_transition();
+        }
     }
 
     fn paint(&mut self, cx: &mut crate::context::PaintCx) {
diff --git a/src/views/svg.rs b/src/views/svg.rs
index 4c28d5d5c..634e0ae6a 100644
--- a/src/views/svg.rs
+++ b/src/views/svg.rs
@@ -262,7 +262,8 @@ impl View for Svg {
 
     fn style_pass(&mut self, cx: &mut crate::context::StyleCx<'_>) {
         let style = cx.style();
-        self.svg_style.read_style(cx, &style);
+        let mut transitioning = false;
+        self.svg_style.read_style(cx, &style, &mut transitioning);
         if let Some(tree) = &self.svg_tree {
             let size = tree.size();
             let aspect_ratio = size.width() / size.height();
@@ -277,6 +278,9 @@ impl View for Svg {
             self.id
                 .update_state(SvgOrStyle::Style(prop_reader.css_string()));
         }
+        if transitioning {
+            cx.request_transition();
+        }
     }
 
     fn update(&mut self, _cx: &mut crate::context::UpdateCx, state: Box<dyn std::any::Any>) {
diff --git a/src/views/text_input.rs b/src/views/text_input.rs
index d704622ba..e99e2a14a 100644
--- a/src/views/text_input.rs
+++ b/src/views/text_input.rs
@@ -1456,17 +1456,19 @@ impl View for TextInput {
 
     fn style_pass(&mut self, cx: &mut crate::context::StyleCx<'_>) {
         let style = cx.style();
+        let mut transitioning = false;
 
         let placeholder_style =
             cx.resolve_nested_maps(Style::new(), &[PlaceholderTextClass::class_ref()], self.id);
-        self.placeholder_style.read_style(cx, &placeholder_style);
+        self.placeholder_style
+            .read_style(cx, &placeholder_style, &mut transitioning);
 
-        if self.font.read(cx) {
+        if self.font.read(cx, &mut transitioning) {
             self.layout_data.borrow_mut().clear_overflow_state();
             self.update_text_layout();
             self.id.request_layout();
         }
-        if self.style.read(cx) {
+        if self.style.read(cx, &mut transitioning) {
             cx.window_state.request_paint(self.id);
 
             // necessary to update the text layout attrs
@@ -1474,7 +1476,12 @@ impl View for TextInput {
             self.update_text_layout();
         }
 
-        self.selection_style.read_style(cx, &style);
+        self.selection_style
+            .read_style(cx, &style, &mut transitioning);
+
+        if transitioning {
+            cx.request_transition();
+        }
     }
 
     fn paint(&mut self, cx: &mut crate::context::PaintCx) {
@@ -1565,7 +1572,7 @@ impl View for TextInput {
                 .id
                 .state()
                 .borrow()
-                .combined_style
+                .style_storage.combined_style
                 .builtin()
                 .cursor_color();
             let cursor_rect = self.get_cursor_rect();
diff --git a/src/views/toggle_button.rs b/src/views/toggle_button.rs
index 4aca86b19..7adcfb8c7 100644
--- a/src/views/toggle_button.rs
+++ b/src/views/toggle_button.rs
@@ -21,7 +21,7 @@ use crate::{
         PointerCaptureEvent, listener::UpdatePhaseLayout,
     },
     prop, prop_extractor,
-    style::{FontSize, Foreground, LineHeight, Style},
+    style::{FontSize, Foreground, LineHeight, Style, StyleCustomExt},
     style_class,
     unit::Length,
     view::View,
@@ -393,9 +393,13 @@ impl View for ToggleButton {
     }
 
     fn style_pass(&mut self, cx: &mut crate::context::StyleCx<'_>) {
-        if self.style.read(cx) {
+        let mut transitioning = false;
+        if self.style.read(cx, &mut transitioning) {
             cx.window_state.request_paint(self.id);
         }
+        if transitioning {
+            cx.request_transition();
+        }
     }
 
     fn paint(&mut self, cx: &mut PaintCx) {
diff --git a/src/views/tooltip.rs b/src/views/tooltip.rs
index 9c1fa380f..fc4d27b40 100644
--- a/src/views/tooltip.rs
+++ b/src/views/tooltip.rs
@@ -91,12 +91,16 @@ impl View for Tooltip {
     }
 
     fn style_pass(&mut self, cx: &mut crate::context::StyleCx<'_>) {
-        self.style.read(cx);
+        let mut transitioning = false;
+        self.style.read(cx, &mut transitioning);
         if self.overlay.borrow().is_some() && self.id.is_hidden() {
             let id = self.overlay.take().unwrap();
             self.hover_point = None;
             remove_overlay(id);
         }
+        if transitioning {
+            cx.request_transition();
+        }
     }
 
     fn event_capture(&mut self, cx: &mut EventCx) -> EventPropagation {
diff --git a/src/views/virtual_stack.rs b/src/views/virtual_stack.rs
index 055b94824..c3c9fdb66 100644
--- a/src/views/virtual_stack.rs
+++ b/src/views/virtual_stack.rs
@@ -530,12 +530,16 @@ impl<T> View for VirtualStack<T> {
     }
 
     fn style_pass(&mut self, cx: &mut crate::context::StyleCx<'_>) {
-        if self.style.read(cx) {
+        let mut transitioning = false;
+        if self.style.read(cx, &mut transitioning) {
             cx.window_state.request_paint(self.id);
             let dir = self.style.direction();
             self.direction.set(dir);
             self.content_size.borrow_mut().direction = dir;
         }
+        if transitioning {
+            cx.request_transition();
+        }
         for (child_id_index, child) in self.id.children().into_iter().enumerate() {
             if self
                 .selected_idx
diff --git a/src/window/handle.rs b/src/window/handle.rs
index de5a87e4c..b95c368fa 100644
--- a/src/window/handle.rs
+++ b/src/window/handle.rs
@@ -359,8 +359,8 @@ impl WindowHandle {
 
         // Run initial style and layout passes
         window_handle.process_update_messages();
-        // Mark root view as needing style so initial style pass runs compute_combined
-        // and populates has_style_selectors for selector detection
+        // Mark root view as needing style so the initial style pass drives the
+        // StyleTree cascade and populates has_style_selectors for selector detection
         window_handle.id.request_style(StyleReason::full_recalc());
         window_handle.process_update_messages();
         window_handle.style();
@@ -606,7 +606,15 @@ impl WindowHandle {
                 break;
             }
 
-            // Style each view in order, passing the global change for first iteration
+            // Sync host state into the engine's StyleTree, run the
+            // cascade, and copy outputs back into each view's
+            // `style_storage`. See `WindowState::run_style_cascade` for
+            // the three-pass breakdown.
+            self.window_state.run_style_cascade(self.id, &traversal);
+
+            // Per-view loop: animations, taffy, View::style_pass. The
+            // cascade has already run; `style_view` reads results from
+            // `style_storage` on the fast path (no `compute_combined`).
             for (view_id, traversal_reason) in traversal {
                 let cx = &mut StyleCx::new(&mut self.window_state, view_id, traversal_reason);
                 cx.style_view();
@@ -1321,8 +1329,8 @@ impl WindowHandle {
                     }
                     UpdateMessage::ViewTransitionAnimComplete(id) => {
                         let num_waiting =
-                            id.state().borrow().num_waiting_animations.saturating_sub(1);
-                        id.state().borrow_mut().num_waiting_animations = num_waiting;
+                            id.state().borrow().style_storage.num_waiting_animations.saturating_sub(1);
+                        id.state().borrow_mut().style_storage.num_waiting_animations = num_waiting;
                     }
                     UpdateMessage::SetTheme(theme) => {
                         self.set_theme(theme, false);
diff --git a/src/window/state.rs b/src/window/state.rs
index bb95030b3..f79871a72 100644
--- a/src/window/state.rs
+++ b/src/window/state.rs
@@ -4,7 +4,7 @@ use crate::{
     action::exec_after_animation_frame,
     inspector::CaptureState,
     platform::menu_types::MenuId,
-    style::{StyleCache, StyleSelectors, recalc::StyleReason},
+    style::{StyleSelectors, recalc::StyleReason},
     view::ViewStorage,
 };
 
@@ -115,9 +115,6 @@ pub struct WindowState {
     pub(crate) root_view_id: ViewId,
     pub(crate) root_layout_node: NodeId,
     pub(crate) root_size: Size,
-    /// Set of ViewIds that have IsFixed style. When root_size changes,
-    /// we request layout on these views directly instead of traversing the tree.
-    pub(crate) fixed_elements: FxHashSet<ViewId>,
     /// The OS-provided DPI scale for this window.
     ///
     /// This comes from the platform/windowing backend and changes when the window
@@ -137,9 +134,6 @@ pub struct WindowState {
     pub(crate) user_scale: f64,
     pub(crate) scheduled_updates: Vec<FrameUpdate>,
     pub(crate) style_dirty: FxHashMap<ViewId, StyleReason>,
-    pub(crate) responsive_selector_views: FxHashMap<ViewId, ()>,
-    pub(crate) disabled_selector_views: FxHashMap<ViewId, ()>,
-    pub(crate) selected_selector_views: FxHashMap<ViewId, ()>,
     pub(crate) request_paint: bool,
     pub(crate) drag_tracker: DragTracker,
     pub(crate) screen_size_bp: ScreenSizeBp,
@@ -168,9 +162,37 @@ pub struct WindowState {
     /// This is set if we're currently capturing the window for the inspector.
     pub(crate) capture: Option<CaptureState>,
 
-    /// Cache for style resolution results.
-    /// Views with identical styles and interaction states can share resolved styles.
-    pub(crate) style_cache: StyleCache,
+    /// Engine-owned style tree. One [`StyleNodeId`](floem_style::StyleNodeId)
+    /// per styled view — kept in sync with the view hierarchy by this crate,
+    /// then walked by [`StyleTree::compute_style`] during the style pass.
+    ///
+    /// Phase 2a (this commit): the tree's node set and parent/child edges
+    /// track view lifecycle; style data and cascade invocation still live
+    /// in `StyleCx`. Later phases push style/class data and flip the
+    /// cascade to run here.
+    pub(crate) style_tree: floem_style::StyleTree,
+
+    /// Reverse of `ViewState.style_node` — given a `StyleNodeId` handed
+    /// back by the engine, recover the owning floem `ViewId` so
+    /// `StyleSink` reads can dispatch to view-keyed interaction state
+    /// and post-cascade drains can route into floem's view bookkeeping.
+    /// Same shape taffy hosts keep to relate their `NodeId` back to the
+    /// view that allocated it.
+    ///
+    /// Also populated for sub-element `StyleNodeId`s (see
+    /// `element_style_nodes`) so they resolve to their owning view.
+    pub(crate) style_node_to_view: FxHashMap<floem_style::StyleNodeId, ViewId>,
+
+    /// Maps each sub-element [`ElementId`] (`is_view() == false`) to a
+    /// dedicated [`StyleNodeId`]. Allocated lazily when a sub-element is
+    /// first marked dirty or queried during style dispatch.
+    ///
+    /// These nodes are *orphan* in the style tree — they carry no
+    /// parent/child edges and are never passed to `compute_style`. Their
+    /// only role is identity: they appear in `StyleReason::targets` so
+    /// sub-element dispatch loops (scroll handles, resizable handles)
+    /// can route a targeted restyle to the right sub-handler.
+    pub(crate) element_style_nodes: FxHashMap<ElementId, floem_style::StyleNodeId>,
 
     /// The default theme style containing class definitions for built-in components.
     /// This is used as the root style context for all views when no parent exists.
@@ -214,14 +236,10 @@ impl WindowState {
             os_scale,
             user_scale: 1.0,
             root_size: Size::ZERO,
-            fixed_elements: FxHashSet::default(),
             screen_size_bp: ScreenSizeBp::Xs,
             scheduled_updates: vec![FrameUpdate::Paint(root_view_id)],
             request_paint: true,
             style_dirty: Default::default(),
-            responsive_selector_views: FxHashMap::default(),
-            disabled_selector_views: FxHashMap::default(),
-            selected_selector_views: FxHashMap::default(),
             drag_tracker: DragTracker::new(),
             focus_state: FocusState::new(),
             last_focused_element: None,
@@ -247,7 +265,9 @@ impl WindowState {
             grid_bps: GridBreakpoints::default(),
             context_menu: HashMap::new(),
             capture: None,
-            style_cache: StyleCache::new(),
+            style_tree: floem_style::StyleTree::new(),
+            style_node_to_view: FxHashMap::default(),
+            element_style_nodes: FxHashMap::default(),
             default_theme: theme,
             default_theme_inherited: inherited,
             needs_layout: true,
@@ -312,7 +332,7 @@ impl WindowState {
         let mut inherited_style = Style::new();
         if theme.any_inherited() {
             let inherited_props = theme.map.iter().filter(|(k, _)| k.inherited());
-            inherited_style.apply_iter(inherited_props, None);
+            inherited_style.apply_iter(inherited_props);
         }
         inherited_style
     }
@@ -323,7 +343,7 @@ impl WindowState {
         let inherited = Self::extract_inherited_props(&new_theme);
         self.default_theme = new_theme;
         self.default_theme_inherited = inherited;
-        self.style_cache.clear();
+        self.style_tree.clear_cache();
     }
 
     /// This removes a view from the app state.
@@ -365,7 +385,6 @@ impl WindowState {
         box_tree.borrow_mut().remove(this_element_id.0);
         self.needs_box_tree_commit = true;
         id.remove();
-        self.fixed_elements.remove(&id);
         let keys = view_state.borrow().registered_listener_keys.clone();
         for key in keys {
             if let Some(ids) = self.listeners.get_mut(&key) {
@@ -373,11 +392,31 @@ impl WindowState {
             }
         }
         self.style_dirty.remove(&id);
-        self.responsive_selector_views.remove(&id);
-        self.disabled_selector_views.remove(&id);
-        self.selected_selector_views.remove(&id);
         self.views_needing_box_tree_update.remove(&id);
 
+        // Release the companion StyleTree node. `remove_view` recurses
+        // into children first, so their nodes are already gone by the
+        // time we reach this point and no orphan descendants are left
+        // behind.
+        if let Some(style_node) = view_state.borrow().style_node {
+            self.style_tree.remove_node(style_node);
+            self.style_node_to_view.remove(&style_node);
+        }
+
+        // Drop any sub-element `StyleNodeId`s this view lazily allocated.
+        let view_raw = id.as_raw();
+        let sub_nodes: SmallVec<[(ElementId, floem_style::StyleNodeId); 2]> = self
+            .element_style_nodes
+            .iter()
+            .filter(|(element_id, _)| element_id.1 == view_raw)
+            .map(|(k, v)| (*k, *v))
+            .collect();
+        for (element_id, style_node) in sub_nodes {
+            self.element_style_nodes.remove(&element_id);
+            self.style_tree.remove_node(style_node);
+            self.style_node_to_view.remove(&style_node);
+        }
+
         // Clean up pointer capture state for removed view
         self.pointer_capture_target
             .retain(|(_, v)| *v != this_element_id);
@@ -665,42 +704,55 @@ impl WindowState {
 
     pub fn set_root_size(&mut self, size: Size) {
         if self.root_size != size {
-            // Request layout on all fixed elements since their size depends on root_size
-            for &id in &self.fixed_elements {
-                id.request_layout();
+            // Request layout on all fixed elements since their size
+            // depends on root_size. Translate engine StyleNodeIds back
+            // to floem ViewIds via the reverse map.
+            for &node in self.style_tree.fixed_elements() {
+                if let Some(view) = self.style_node_to_view.get(&node) {
+                    view.request_layout();
+                }
             }
         }
         self.root_size = size;
     }
 
-    /// Register a view as having fixed positioning.
-    /// Called when a view's style sets IsFixed to true.
-    pub fn register_fixed_element(&mut self, id: ViewId) {
-        if self.fixed_elements.insert(id) {
+    /// Apply the post-cascade side effects the style tree recorded during
+    /// its pass — `position: fixed` transitions (relayout + box-tree
+    /// world-position resets) and any other engine-detected relayout
+    /// triggers (visibility flips etc.). Called right after
+    /// `compute_style` returns so the host's layout and box-tree state
+    /// catches up before the next frame starts.
+    fn drain_style_tree_effects(&mut self) {
+        let (_added, removed) = self.style_tree.take_fixed_element_changes();
+        if self.style_tree.take_needs_layout() {
             self.needs_layout = true;
         }
-    }
-
-    /// Unregister a view from fixed positioning.
-    /// Called when a view's style sets IsFixed to false.
-    pub fn unregister_fixed_element(&mut self, id: ViewId) {
-        if self.fixed_elements.remove(&id) {
-            self.box_tree
-                .borrow_mut()
-                .set_world_position(id.get_element_id().0, None);
+        if !removed.is_empty() {
+            let mut box_tree = self.box_tree.borrow_mut();
+            for node in &removed {
+                if let Some(view) = self.style_node_to_view.get(node) {
+                    let element_id = view.get_element_id();
+                    box_tree.set_world_position(element_id.0, None);
+                }
+            }
+            drop(box_tree);
             self.needs_box_tree_commit = true;
-            self.needs_layout = true;
         }
     }
 
     fn apply_fixed_element_styles(&self) {
         let root_size = self.root_size / self.user_scale;
-        let fixed_views: SmallVec<[ViewId; 32]> = self.fixed_elements.iter().copied().collect();
+        let fixed_views: SmallVec<[ViewId; 32]> = self
+            .style_tree
+            .fixed_elements()
+            .iter()
+            .filter_map(|node| self.style_node_to_view.get(node).copied())
+            .collect();
         VIEW_STORAGE.with_borrow(|s| {
             for view_id in fixed_views {
                 if let Some(state) = s.states.get(view_id) {
                     let state_borrow = state.borrow();
-                    if !state_borrow.combined_style.builtin().is_fixed() {
+                    if !state_borrow.style_storage.combined_style.builtin().is_fixed() {
                         continue;
                     }
                     let layout_node = state_borrow.layout_id;
@@ -1065,9 +1117,9 @@ impl WindowState {
                         let overlay_element_id = overlay_state_borrow.element_id;
                         let overlay_layout_id = overlay_state_borrow.layout_id;
                         let overlay_transform = overlay_state_borrow.transform;
-                        let font_size_cx = overlay_state_borrow.layout_props.font_size_cx();
+                        let font_size_cx = overlay_state_borrow.style_storage.layout_props.font_size_cx();
                         let style_transform_props =
-                            overlay_state_borrow.view_transform_props.clone();
+                            overlay_state_borrow.style_storage.view_transform_props.clone();
                         drop(overlay_state_borrow);
 
                         let logical_parent_id = s.parent.get(overlay_id).and_then(|p| *p)?;
@@ -1124,9 +1176,11 @@ impl WindowState {
     fn apply_fixed_positioning_transforms(&self) {
         let root_size = self.root_size / self.user_scale;
         let positions: SmallVec<[(ElementId, Point); 32]> = VIEW_STORAGE.with_borrow(|s| {
-            self.fixed_elements
+            self.style_tree
+                .fixed_elements()
                 .iter()
-                .filter_map(|&view_id| {
+                .filter_map(|node| {
+                    let view_id = self.style_node_to_view.get(node).copied()?;
                     let state = s.states.get(view_id)?;
                     let state_borrow = state.borrow();
                     let element_id = state_borrow.element_id;
@@ -1137,8 +1191,8 @@ impl WindowState {
                         .unwrap_or_default();
 
                     let mut pos = Point::new(0.0, 0.0);
-                    let font_size_cx = state_borrow.layout_props.font_size_cx();
-                    let layout_props = &state_borrow.layout_props;
+                    let font_size_cx = state_borrow.style_storage.layout_props.font_size_cx();
+                    let layout_props = &state_borrow.style_storage.layout_props;
 
                     if let (Some(left), Some(_)) = (
                         layout_props
@@ -1199,6 +1253,298 @@ impl WindowState {
         self.schedule_style_with_target(id.get_element_id(), reason);
     }
 
+    /// Ensure `view_id` has a companion [`floem_style::StyleNodeId`] in
+    /// [`Self::style_tree`] and that its parent edge matches the current
+    /// style-cx parent. Allocates the node on first call.
+    ///
+    /// The tree parent follows floem's `style_cx_parent` override when
+    /// set (e.g. list items re-parent their row under the list) so
+    /// inherited-prop / class-context propagation matches the old
+    /// cascade. Structural `:nth-child` position is computed separately
+    /// via [`Self::structural_position_for`] and pushed to the tree.
+    ///
+    /// Relies on top-down style traversal: when a child calls this, the
+    /// style-parent's style-node has already been allocated in the same
+    /// or an earlier pass, so the parent edge can be wired immediately.
+    pub(crate) fn ensure_style_node(&mut self, view_id: ViewId) -> floem_style::StyleNodeId {
+        let existing = view_id.state().borrow().style_node;
+        let node = match existing {
+            Some(id) if self.style_tree.contains(id) => id,
+            _ => {
+                let id = self.style_tree.new_node();
+                view_id.state().borrow_mut().style_node = Some(id);
+                self.style_node_to_view.insert(id, view_id);
+                id
+            }
+        };
+
+        let style_parent_view = view_id
+            .state()
+            .borrow()
+            .style_cx_parent
+            .or_else(|| view_id.parent());
+        let parent_node = style_parent_view
+            .and_then(|p| p.state().borrow().style_node)
+            .filter(|p| self.style_tree.contains(*p));
+        let current_parent = self.style_tree.get(node).and_then(|n| n.parent());
+        if current_parent != parent_node {
+            self.style_tree.set_parent(node, parent_node);
+        }
+        node
+    }
+
+    /// Resolve `element_id` (primary or sub-element) to a [`floem_style::StyleNodeId`].
+    ///
+    /// - Primary (`is_view() == true`): returns the owning view's companion
+    ///   node via [`Self::ensure_style_node`].
+    /// - Sub-element (`is_view() == false`): lazily allocates a dedicated
+    ///   orphan node in the style tree and caches the mapping in
+    ///   [`Self::element_style_nodes`]. The node is not wired into the
+    ///   cascade tree — it exists only as an identity token used by
+    ///   [`StyleReason::targets`] so sub-handler dispatch can match.
+    pub(crate) fn ensure_style_node_for_element(
+        &mut self,
+        element_id: ElementId,
+    ) -> floem_style::StyleNodeId {
+        if element_id.is_view() {
+            return self.ensure_style_node(element_id.owning_id());
+        }
+        if let Some(&node) = self.element_style_nodes.get(&element_id) {
+            if self.style_tree.contains(node) {
+                return node;
+            }
+            self.element_style_nodes.remove(&element_id);
+            self.style_node_to_view.remove(&node);
+        }
+        let node = self.style_tree.new_node();
+        self.element_style_nodes.insert(element_id, node);
+        self.style_node_to_view.insert(node, element_id.owning_id());
+        node
+    }
+
+    /// Compute the structural position (1-based `:nth-child` index and
+    /// sibling count) for `view_id` relative to its style-cx parent. When
+    /// a view (e.g. a row inside a list item) has a custom `style_cx_parent`,
+    /// we walk up the DOM tree to find the ancestor that's a direct child
+    /// of the style parent and use that ancestor's position. This matches
+    /// the behavior `StyleCx::get_interact_state` had before the tree
+    /// cascade took over.
+    pub(crate) fn structural_position_for(&self, view_id: ViewId) -> (Option<usize>, usize) {
+        let style_parent = view_id
+            .state()
+            .borrow()
+            .style_cx_parent
+            .or_else(|| view_id.parent());
+        let Some(parent) = style_parent else {
+            return (None, 0);
+        };
+        let indexed_child = parent.with_children(|siblings| {
+            if siblings.contains(&view_id) {
+                Some(view_id)
+            } else {
+                let mut cursor = view_id.parent();
+                while let Some(ancestor) = cursor {
+                    if ancestor.parent() == Some(parent) {
+                        return Some(ancestor);
+                    }
+                    cursor = ancestor.parent();
+                }
+                None
+            }
+        });
+        parent.with_children(|siblings| {
+            (
+                indexed_child
+                    .and_then(|id| siblings.iter().position(|child| *child == id))
+                    .map(|i| i + 1),
+                siblings.len(),
+            )
+        })
+    }
+
+    /// Drive one cascade over the subtree rooted at `root_view`, given
+    /// the set of views the traversal wants to re-style.
+    ///
+    /// Three passes:
+    ///   1. Mirror each view's `view_style` (when the reason requests),
+    ///      merged direct style, classes, parent-set interaction, and
+    ///      structural position into the [`floem_style::StyleTree`].
+    ///   2. Call [`floem_style::StyleTree::compute_style`]. `self` briefly
+    ///      hands out its tree by move so it can pass itself as the
+    ///      `&mut dyn StyleSink` sink (trait methods don't touch
+    ///      `style_tree`, so the split is safe).
+    ///   3. Copy cascade outputs back into each view's `style_storage` so
+    ///      downstream per-view work (animations, taffy push, prop
+    ///      extractors) continues reading from `ViewState` unchanged.
+    pub(crate) fn run_style_cascade(
+        &mut self,
+        root_view: ViewId,
+        traversal: &[(ViewId, StyleReason)],
+    ) {
+        // Pass 1: sync host state into the tree.
+        for (view_id, traversal_reason) in traversal {
+            let style_node = self.ensure_style_node(*view_id);
+
+            if traversal_reason
+                .flags
+                .contains(floem_style::recalc::StyleReasonFlags::VIEW_STYLE)
+                && let Some(view_style) = view_id.view().borrow().view_style()
+            {
+                let state = view_id.state();
+                let mut vs = state.borrow_mut();
+                let offset = vs.view_style_offset;
+                vs.style.set(offset, view_style);
+            }
+
+            let view_class = view_id.view().borrow().view_class();
+            let state = view_id.state();
+            let direct = state.borrow_mut().style();
+            let mut all_classes: SmallVec<[floem_style::StyleClassRef; 4]> =
+                state.borrow().classes.clone();
+            if let Some(vc) = view_class {
+                all_classes.push(vc);
+            }
+            let parent_set_interaction = state.borrow().style_storage.parent_set_style_interaction;
+            let structural = self.structural_position_for(*view_id);
+
+            self.style_tree.set_direct_style(style_node, direct);
+            self.style_tree.set_classes(style_node, &all_classes);
+            self.style_tree
+                .set_parent_interaction(style_node, parent_set_interaction);
+            self.style_tree
+                .set_structural_position_override(style_node, Some(structural));
+        }
+
+        // Pass 2: engine cascade.
+        let root_style_node = root_view.state().borrow().style_node;
+        if let Some(root_style_node) = root_style_node {
+            let mut tree = std::mem::take(&mut self.style_tree);
+            // Assemble the cascade inputs from self's fields. Pulling
+            // everything out first lets the interaction closure borrow
+            // only what it needs without tangling with `self` as a
+            // whole. The animation backend stays a small stack value
+            // that borrows the reverse map read-only.
+            let reverse_map = &self.style_node_to_view;
+            let anim_backend = crate::style::sink::FloemAnimationBackend {
+                style_node_to_view: reverse_map,
+            };
+            let interactions =
+                |node: floem_style::StyleNodeId| -> floem_style::PerNodeInteraction {
+                    let Some(view_id) = reverse_map.get(&node).copied() else {
+                        return floem_style::PerNodeInteraction::default();
+                    };
+                    let element_id = view_id.get_element_id();
+                    floem_style::PerNodeInteraction {
+                        is_hovered: self.is_hovered(element_id),
+                        is_focused: self.is_focused(element_id),
+                        is_focus_within: self.is_focus_within(element_id),
+                        is_active: self.is_active(element_id),
+                        is_file_hover: self.is_file_hover(element_id),
+                    }
+                };
+            let inputs = floem_style::CascadeInputs {
+                frame_start: self.frame_start,
+                screen_size_bp: self.screen_size_bp,
+                keyboard_navigation: self.keyboard_navigation,
+                root_size_width: self.root_size.width,
+                is_dark_mode: Self::is_dark_mode(self),
+                default_theme_classes: &self.default_theme,
+                default_theme_inherited: &self.default_theme_inherited,
+                interactions: &interactions,
+                animations: &anim_backend,
+            };
+            tree.compute_style(root_style_node, &inputs);
+            drop(inputs);
+            // Engine-originated next-frame schedule (animations mid-flight,
+            // transitions still interpolating). Route each into floem's
+            // per-frame update queue.
+            let engine_scheduled: Vec<_> = tree.take_scheduled().collect();
+            // Descendants the cascade dirtied during this pass (inherited /
+            // class-context / visibility changes). These need to feed into
+            // floem's `style_dirty` map so the next frame's traversal picks
+            // them up for per-view work (animations, taffy push).
+            let cascade_dirtied: Vec<_> = tree.take_dirtied_this_pass().collect();
+            self.style_tree = tree;
+            // Translate the engine's `StyleNodeId` drains back to
+            // floem's `ElementId` via the reverse map before feeding
+            // its per-view maps. If a node was removed mid-pass its
+            // entry in the reverse map may be gone — skip those.
+            for (node, reason) in engine_scheduled {
+                if let Some(view) = self.style_node_to_view.get(&node) {
+                    let element_id = view.get_element_id();
+                    self.schedule_style_with_target(element_id, reason);
+                }
+            }
+            for (node, reason) in cascade_dirtied {
+                if let Some(view) = self.style_node_to_view.get(&node) {
+                    let element_id = view.get_element_id();
+                    self.mark_style_dirty_with(element_id, reason);
+                }
+            }
+            // Fixed-element transitions detected by the cascade need
+            // box-tree world-position resets, and any engine-requested
+            // relayout (visibility flips, fixed transitions) needs to
+            // flip the host's layout-dirty flag.
+            self.drain_style_tree_effects();
+        }
+
+        // Pass 3: copy outputs back into per-view `style_storage`.
+        for (view_id, _) in traversal {
+            let Some(style_node) = view_id.state().borrow().style_node else {
+                continue;
+            };
+            let Some(combined) = self.style_tree.combined_style(style_node).cloned() else {
+                continue;
+            };
+            let inherited_cx = self
+                .style_tree
+                .inherited_context(style_node)
+                .cloned()
+                .unwrap_or_default();
+            let class_cx = self
+                .style_tree
+                .class_context(style_node)
+                .cloned()
+                .unwrap_or_default();
+            let post_interact = self
+                .style_tree
+                .style_interaction_cx(style_node)
+                .unwrap_or_default();
+            let computed = self
+                .style_tree
+                .computed_style(style_node)
+                .cloned()
+                .unwrap_or_default();
+            let has_selectors = self.style_tree.has_style_selectors(style_node);
+
+            // Snapshot for the inspector if a capture is active. Covers
+            // the previous engine-side `StyleSink::inspector_capture_style`
+            // callback — same data, fired per dirty view instead of per
+            // cascade node. Pass 3 already walks every view the cascade
+            // recomputed, so this loses no coverage and lets the engine
+            // stay host-free.
+            if let Some(capture) = self.capture.as_mut() {
+                capture.record_computed_style(*view_id, computed.clone());
+            }
+
+            let new_cursor = computed.builtin().cursor();
+            let state = view_id.state();
+            let mut vs = state.borrow_mut();
+            let cursor_changed = vs.style_storage.style_cursor != new_cursor;
+            vs.style_storage.combined_style = combined;
+            vs.style_storage.computed_style = computed;
+            vs.style_storage.style_cx = inherited_cx;
+            vs.style_storage.class_cx = class_cx;
+            vs.style_storage.style_interaction_cx = post_interact;
+            vs.style_storage.has_style_selectors = has_selectors;
+            if cursor_changed {
+                vs.style_storage.style_cursor = new_cursor;
+                drop(vs);
+                self.needs_cursor_resolution = true;
+            }
+        }
+    }
+
     /// Requests that the style pass will run for a specific element target on the next frame.
     ///
     /// Use this when a style update should be scoped to a sub-element owned by a view,
@@ -1235,7 +1581,7 @@ impl WindowState {
         let bp = self.grid_bps.get_width_bp(size.width);
         if bp != self.screen_size_bp {
             self.screen_size_bp = bp;
-            self.style_cache.clear();
+            self.style_tree.clear_cache();
             self.root_view_id.request_style(StyleReason::with_selectors(
                 StyleSelectors::empty().responsive(),
             ));
@@ -1247,77 +1593,40 @@ impl WindowState {
         let view_state = view_state.borrow();
 
         view_state
-            .has_style_selectors
+            .style_storage.has_style_selectors
             .is_some_and(|s| s.has(selector_kind))
     }
 
-    pub(crate) fn update_selector_interest(
-        &mut self,
-        id: ViewId,
-        selectors: Option<StyleSelectors>,
-    ) {
-        let has_responsive = selectors.is_some_and(StyleSelectors::has_responsive);
-        let has_disabled = selectors.is_some_and(|s| s.has(StyleSelector::Disabled));
-        let has_selected = selectors.is_some_and(|s| s.has(StyleSelector::Selected));
-
-        Self::set_selector_interest_entry(&mut self.responsive_selector_views, id, has_responsive);
-        Self::set_selector_interest_entry(&mut self.disabled_selector_views, id, has_disabled);
-        Self::set_selector_interest_entry(&mut self.selected_selector_views, id, has_selected);
-    }
-
-    fn set_selector_interest_entry(
-        index: &mut FxHashMap<ViewId, ()>,
-        id: ViewId,
-        interested: bool,
-    ) {
-        if interested {
-            index.insert(id, ());
-        } else {
-            index.remove(&id);
-        }
-    }
-
-    fn is_descendant_of(descendant: ViewId, ancestor: ViewId) -> bool {
-        let mut current = descendant.parent();
-        while let Some(parent) = current {
-            if parent == ancestor {
-                return true;
-            }
-            current = parent.parent();
-        }
-        false
-    }
-
     pub(crate) fn mark_descendants_with_selector_dirty(
         &mut self,
         ancestor: ViewId,
         selector: StyleSelector,
     ) {
-        let candidates: Vec<ViewId> = match selector {
-            StyleSelector::Disabled => self.disabled_selector_views.keys().copied().collect(),
-            StyleSelector::Selected => self.selected_selector_views.keys().copied().collect(),
-            _ => return,
+        let Some(node) = ancestor.state().borrow().style_node else {
+            return;
         };
-
-        for view_id in candidates {
-            if Self::is_descendant_of(view_id, ancestor) {
-                self.mark_style_dirty_with(
-                    view_id.get_element_id(),
-                    StyleReason::with_selector(selector),
-                );
+        let dirtied = self
+            .style_tree
+            .mark_descendants_with_selector_dirty(node, selector);
+        for (node, reason) in dirtied {
+            if let Some(view) = self.style_node_to_view.get(&node) {
+                let element_id = view.get_element_id();
+                self.mark_style_dirty_with(element_id, reason);
             }
         }
     }
 
     pub(crate) fn mark_descendants_with_responsive_selector_dirty(&mut self, ancestor: ViewId) {
-        let candidates: Vec<ViewId> = self.responsive_selector_views.keys().copied().collect();
-
-        for view_id in candidates {
-            if Self::is_descendant_of(view_id, ancestor) {
-                self.mark_style_dirty_with(
-                    view_id.get_element_id(),
-                    StyleReason::with_selectors(StyleSelectors::empty().responsive()),
-                );
+        let Some(node) = ancestor.state().borrow().style_node else {
+            return;
+        };
+        let dirtied = self
+            .style_tree
+            .mark_descendants_with_responsive_selector_dirty(node);
+        for (node, reason) in dirtied {
+            if let Some(view) = self.style_node_to_view.get(&node) {
+                let element_id = view.get_element_id();
+                self.mark_style_dirty_with(element_id, reason);
             }
         }
     }
@@ -1362,7 +1671,8 @@ impl WindowState {
         if element_id.is_view() {
             (view_id, reason)
         } else {
-            (view_id, StyleReason::with_target(element_id, reason))
+            let style_node = self.ensure_style_node_for_element(element_id);
+            (view_id, StyleReason::with_target(style_node, reason))
         }
     }
 
@@ -1420,14 +1730,14 @@ fn compute_view_box_properties(
     let state = s.states.get(view_id).unwrap();
     let state_borrow = state.borrow();
 
-    let font_size_cx = state_borrow.layout_props.font_size_cx();
+    let font_size_cx = state_borrow.style_storage.layout_props.font_size_cx();
     let style_transform = state_borrow
-        .view_transform_props
+        .style_storage.view_transform_props
         .affine(size, &font_size_cx);
     let view_local_transform = style_transform * state_borrow.transform;
     let scroll_offset = state_borrow.child_translation;
     let clip = state_borrow
-        .view_transform_props
+        .style_storage.view_transform_props
         .clip_rect(local_rect, &font_size_cx);
     let element_id = state_borrow.element_id;
 
diff --git a/style/Cargo.toml b/style/Cargo.toml
new file mode 100644
index 000000000..05b1add0d
--- /dev/null
+++ b/style/Cargo.toml
@@ -0,0 +1,25 @@
+[package]
+name = "floem_style"
+version.workspace = true
+edition.workspace = true
+repository = "https://github.com/lapce/floem"
+description = "Style engine for Floem UI"
+license.workspace = true
+
+[dependencies]
+bitflags = "2.9"
+taffy = { version = "0.9.2", features = ["grid"] }
+rustc-hash = { workspace = true }
+peniko = { workspace = true }
+parley = { workspace = true }
+smallvec = "1.15"
+paste = "1.0"
+slotmap = "1.0"
+imbl = { workspace = true }
+unic-langid = { version = "0.9", optional = true }
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+web-time = "1"
+
+[features]
+localization = ["dep:unic-langid"]
diff --git a/style/src/animation.rs b/style/src/animation.rs
new file mode 100644
index 000000000..2b9d3e485
--- /dev/null
+++ b/style/src/animation.rs
@@ -0,0 +1,1167 @@
+//! The engine-side animation system.
+//!
+//! This module owns the declarative animation data model — keyframes,
+//! timing, repeat / reverse modes, the state machine — plus the tick
+//! functions the cascade uses to interpolate values per frame.
+//!
+//! What's **not** here by design:
+//! - Imperative controllers (`.start()`, `.pause()`, gesture-linked
+//!   values, reactive triggers). Those couple to whatever runtime the
+//!   host uses and live in the host crate (for floem, `src/animate`).
+//! - Trigger firing during `advance()`. Instead, `advance()` returns an
+//!   [`AnimationEvents`] struct so hosts can decide how to propagate
+//!   `started`, `visual_completed`, and `completed` transitions to
+//!   their own observers.
+//!
+//! A native host such as floem-native can treat [`Animation`] as pure
+//! configuration data (easing, duration, keyframes) and decide at
+//! registration time whether to delegate to the platform's compositor
+//! animation engine or fall back to this crate's CPU ticker.
+//!
+//! See the floem_style crate-level docs for the broader engine/host split.
+
+use std::any::Any;
+use std::rc::Rc;
+use std::time::Duration;
+
+#[cfg(not(target_arch = "wasm32"))]
+use std::time::Instant;
+#[cfg(target_arch = "wasm32")]
+use web_time::Instant;
+
+use smallvec::{SmallVec, smallvec};
+
+use crate::easing::{Bezier, Easing, Linear, Spring};
+use crate::props::StylePropRef;
+use crate::style::Style;
+use crate::unit::UnitExt;
+
+// ============================================================================
+// KeyFrame building blocks
+// ============================================================================
+
+/// Holds a resolved prop, along with the associated frame id and easing function
+#[derive(Clone, Debug)]
+pub struct KeyFrameProp {
+    // The style prop value. Either comes from an animation frame or is
+    // pulled from the computed style.
+    val: Rc<dyn Any>,
+    // The frame id.
+    id: u16,
+    // Easing used while animating *towards* this keyframe. When this
+    // prop is the lower frame in a pair, the easing is taken from the
+    // upper frame instead.
+    easing: Rc<dyn Easing>,
+}
+
+/// Whether a keyframe's style is stored in the frame itself or pulled from the
+/// computed style at tick time.
+#[derive(Clone, Debug)]
+pub enum KeyFrameStyle {
+    /// Props pulled from the computed style each tick (retargeting).
+    Computed,
+    /// Props stored inline with the keyframe.
+    Style(Style),
+}
+
+impl From<Style> for KeyFrameStyle {
+    fn from(value: Style) -> Self {
+        Self::Style(value)
+    }
+}
+
+/// Style properties plus easing for a single keyframe.
+#[derive(Clone, Debug)]
+pub struct KeyFrame {
+    #[allow(unused)]
+    id: u16,
+    style: KeyFrameStyle,
+    easing: Rc<dyn Easing>,
+}
+
+impl KeyFrame {
+    /// Create a new keyframe at the given frame id.
+    pub fn new(id: u16) -> Self {
+        Self {
+            id,
+            style: Style::default().into(),
+            easing: Rc::new(Spring::default()),
+        }
+    }
+
+    /// Apply a style to this keyframe.
+    pub fn style(mut self, style: impl Fn(Style) -> Style) -> Self {
+        let style = style(Style::new());
+        match &mut self.style {
+            cs @ KeyFrameStyle::Computed => *cs = style.into(),
+            KeyFrameStyle::Style(s) => s.apply_mut(&style),
+        }
+        self
+    }
+
+    /// Use the live computed style instead of a stored style for this
+    /// keyframe. Completely overwrites any previously set style.
+    pub fn computed_style(mut self) -> Self {
+        self.style = KeyFrameStyle::Computed;
+        self
+    }
+
+    /// Easing used while animating towards this keyframe.
+    pub fn ease(mut self, easing: impl Easing + 'static) -> Self {
+        self.easing = Rc::new(easing);
+        self
+    }
+
+    /// Bezier ease-in-out.
+    pub fn ease_in_out(self) -> Self {
+        self.ease(Bezier::ease_in_out())
+    }
+
+    /// Default spring.
+    pub fn ease_spring(self) -> Self {
+        self.ease(Spring::default())
+    }
+
+    /// Linear easing.
+    pub fn ease_linear(self) -> Self {
+        self.ease(Linear)
+    }
+
+    /// Bezier ease-in.
+    pub fn ease_in(self) -> Self {
+        self.ease(Bezier::ease_in())
+    }
+
+    /// Bezier ease-out.
+    pub fn ease_out(self) -> Self {
+        self.ease(Bezier::ease_out())
+    }
+}
+
+// ============================================================================
+// PropCache
+// ============================================================================
+
+/// Holds frame ids and marks whether the frame pulls its props from a stored
+/// style or from the computed style.
+#[derive(Debug, Clone, Copy, Eq)]
+enum PropFrameKind {
+    Normal(u16),
+    Computed(u16),
+}
+
+impl PropFrameKind {
+    const fn inner(self) -> u16 {
+        match self {
+            Self::Normal(val) => val,
+            Self::Computed(val) => val,
+        }
+    }
+}
+
+impl PartialOrd for PropFrameKind {
+    fn partial_cmp(&self, other: &Self) -> Option<std::cmp::Ordering> {
+        Some(self.cmp(other))
+    }
+}
+
+impl Ord for PropFrameKind {
+    fn cmp(&self, other: &Self) -> std::cmp::Ordering {
+        self.inner().cmp(&other.inner())
+    }
+}
+
+impl PartialEq for PropFrameKind {
+    fn eq(&self, other: &Self) -> bool {
+        self.inner() == other.inner()
+    }
+}
+
+/// Pair of frame ids spanning a single prop's current interpolation.
+#[derive(Debug, Clone, Copy)]
+struct PropFrames {
+    // The closest frame less than or equal to the target idx.
+    lower_idx: Option<PropFrameKind>,
+    // The closest frame greater than the target idx.
+    upper_idx: Option<PropFrameKind>,
+}
+
+/// Lets the animate loop find which keyframes contain a given prop even
+/// when the prop appears sparsely across the keyframe set.
+#[derive(Debug, Clone, Default)]
+pub struct PropCache {
+    prop_map: imbl::HashMap<StylePropRef, SmallVec<[PropFrameKind; 5]>>,
+    computed_idxs: SmallVec<[u16; 2]>,
+}
+
+impl PropCache {
+    fn get_prop_frames(&self, prop: StylePropRef, target_idx: u16) -> Option<PropFrames> {
+        self.prop_map.get(&prop).map(|frames| {
+            match frames.binary_search(&PropFrameKind::Normal(target_idx)) {
+                Ok(exact_idx) => {
+                    let lower = Some(frames[exact_idx]);
+                    let upper = frames.get(exact_idx + 1).copied();
+                    PropFrames {
+                        lower_idx: lower,
+                        upper_idx: upper,
+                    }
+                }
+                Err(pos) => {
+                    let lower = if pos > 0 { Some(frames[pos - 1]) } else { None };
+                    let upper = frames.get(pos).copied();
+                    PropFrames {
+                        lower_idx: lower,
+                        upper_idx: upper,
+                    }
+                }
+            }
+        })
+    }
+
+    fn insert_prop(&mut self, prop: StylePropRef, idx: PropFrameKind) {
+        match self.prop_map.entry(prop) {
+            imbl::hashmap::Entry::Occupied(mut oe) => {
+                if let Err(pos) = oe.get().binary_search(&idx) {
+                    oe.get_mut().insert(pos, idx)
+                }
+            }
+            imbl::hashmap::Entry::Vacant(ve) => {
+                ve.insert(smallvec![idx]);
+            }
+        }
+    }
+
+    fn insert_computed_prop(&mut self, prop: StylePropRef, idx: PropFrameKind) {
+        if let imbl::hashmap::Entry::Occupied(mut oe) = self.prop_map.entry(prop) {
+            if let Err(pos) = oe.get().binary_search(&idx) {
+                oe.get_mut().insert(pos, idx)
+            } else {
+                unreachable!(
+                    "this should err because a computed prop shouldn't be inserted more than once."
+                )
+            }
+        }
+    }
+
+    fn remove_prop(&mut self, prop: StylePropRef, idx: u16) {
+        if let imbl::hashmap::Entry::Occupied(mut oe) = self.prop_map.entry(prop)
+            && let Ok(pos) = oe.get().binary_search(&PropFrameKind::Normal(idx))
+        {
+            oe.get_mut().remove(pos);
+        }
+    }
+
+    fn insert_computed(&mut self, idx: u16) {
+        if let Err(pos) = self.computed_idxs.binary_search(&idx) {
+            self.computed_idxs.insert(pos, idx)
+        }
+    }
+
+    fn remove_computed(&mut self, idx: u16) {
+        if let Ok(pos) = self.computed_idxs.binary_search(&idx) {
+            self.computed_idxs.remove(pos);
+        }
+    }
+}
+
+// ============================================================================
+// State machine
+// ============================================================================
+
+/// Whether the animation is allowed to reverse when the view is being
+/// removed/hidden, and whether it's currently doing so.
+#[derive(Debug, Clone, Copy)]
+pub enum ReverseOnce {
+    /// Reversing is disabled for this animation.
+    Never,
+    /// Reversing is allowed; `Val(true)` means "currently reversing".
+    Val(bool),
+}
+
+impl ReverseOnce {
+    /// Toggle the currently-reversing bit when allowed.
+    pub fn set(&mut self, val: bool) {
+        if let Self::Val(v) = self {
+            *v = val;
+        }
+    }
+
+    /// Returns `true` if the animation should currently be reversing.
+    pub const fn is_rev(self) -> bool {
+        match self {
+            Self::Never => false,
+            Self::Val(v) => v,
+        }
+    }
+}
+
+/// Repeat behavior of an animation.
+#[derive(Clone, Debug)]
+pub enum RepeatMode {
+    /// Loop until stopped externally.
+    LoopForever,
+    /// Play exactly `times` times, then enter [`AnimStateKind::Completed`].
+    Times(usize),
+}
+
+#[derive(Debug, Clone)]
+pub(crate) enum AnimState {
+    Idle,
+    Stopped,
+    Paused {
+        elapsed: Option<Duration>,
+    },
+    PassInProgress {
+        started_on: Instant,
+        elapsed: Duration,
+    },
+    ExtMode {
+        started_on: Instant,
+        elapsed: Duration,
+    },
+    PassFinished {
+        elapsed: Duration,
+        was_in_ext: bool,
+    },
+    Completed {
+        elapsed: Option<Duration>,
+        was_reversing: bool,
+    },
+}
+
+/// Coarse discriminant for an animation's current state.
+#[derive(Debug, PartialEq, Eq, Clone, Copy)]
+pub enum AnimStateKind {
+    Idle,
+    Paused,
+    Stopped,
+    PassInProgress,
+    PassFinished,
+    Completed,
+}
+
+/// Imperative command that drives the animation state machine.
+#[derive(Debug, PartialEq, Eq, Clone, Copy)]
+pub enum AnimStateCommand {
+    Pause,
+    Resume,
+    Start,
+    Stop,
+    Reverse,
+}
+
+/// Events produced by a single call to [`Animation::advance`].
+///
+/// Hosts inspect these to fire observers (for floem: reactive `Trigger`s;
+/// for a native host: platform-specific notifications). Keeping events
+/// as a return value — instead of a callback closure on `Animation` —
+/// leaves the engine pure data.
+#[derive(Debug, Default, Clone, Copy)]
+pub struct AnimationEvents {
+    /// The animation just entered its first active pass.
+    pub started: bool,
+    /// The animation's duration just elapsed (easing may still be
+    /// settling on `props_in_ext_progress`).
+    pub visual_completed: bool,
+    /// Every repeat is done; the animation transitioned to
+    /// [`AnimStateKind::Completed`].
+    pub completed: bool,
+}
+
+// ============================================================================
+// Animation
+// ============================================================================
+
+/// Declarative animation data + state machine. Pure engine side — no
+/// reactive hooks and no view-id coupling.
+#[derive(Debug, Clone)]
+pub struct Animation {
+    pub(crate) state: AnimState,
+    pub(crate) auto_reverse: bool,
+    pub(crate) delay: Duration,
+    pub(crate) delay_on_reverse: bool,
+    pub(crate) duration: Duration,
+    pub(crate) repeat_mode: RepeatMode,
+    pub(crate) repeat_count: usize,
+    /// Whether the animation should run when the view is being created
+    /// (e.g. appearing via a `dyn` container or after being hidden).
+    /// Consumed by the host's lifecycle code.
+    pub(crate) run_on_remove: bool,
+    /// Whether the animation should run when the view is being removed
+    /// (hidden / destroyed). Host-driven.
+    pub(crate) run_on_create: bool,
+    pub(crate) reverse_once: ReverseOnce,
+    pub(crate) max_key_frame_num: u16,
+    pub(crate) apply_when_finished: bool,
+    pub(crate) folded_style: Style,
+    pub(crate) key_frames: imbl::HashMap<u16, KeyFrame>,
+    pub(crate) props_in_ext_progress:
+        imbl::HashMap<StylePropRef, (KeyFrameProp, KeyFrameProp)>,
+    pub(crate) cache: PropCache,
+    pub(crate) debug_description: Option<String>,
+}
+
+impl Default for Animation {
+    fn default() -> Self {
+        Self {
+            state: AnimState::Idle,
+            auto_reverse: false,
+            delay: Duration::ZERO,
+            delay_on_reverse: false,
+            duration: Duration::from_millis(200),
+            repeat_mode: RepeatMode::Times(1),
+            repeat_count: 0,
+            run_on_remove: false,
+            run_on_create: false,
+            reverse_once: ReverseOnce::Val(false),
+            max_key_frame_num: 100,
+            apply_when_finished: false,
+            folded_style: Style::new(),
+            cache: Default::default(),
+            key_frames: imbl::HashMap::new(),
+            props_in_ext_progress: imbl::HashMap::new(),
+            debug_description: None,
+        }
+    }
+}
+
+/// # Constructors and quick-setup helpers.
+impl Animation {
+    /// Empty animation.
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    /// Configure this animation as a view transition (runs on view
+    /// create and remove; keyframes 0 and 100 default to the computed
+    /// style).
+    pub fn view_transition(self) -> Self {
+        self.run_on_create(true)
+            .run_on_remove(true)
+            .initial_state(AnimStateCommand::Stop)
+            .keyframe(0, |f| f.computed_style().ease(Spring::gentle()))
+            .keyframe(100, |f| f.computed_style().ease(Spring::gentle()))
+    }
+
+    /// View transition with a custom easing on both keyframes.
+    pub fn view_transition_with_ease(self, ease: impl Easing + 'static + Clone) -> Self {
+        self.view_transition()
+            .keyframe(0, |f| f.computed_style().ease(ease.clone()))
+            .keyframe(100, |f| f.computed_style().ease(ease.clone()))
+    }
+
+    /// View transition animating scale 0% → 100%.
+    pub fn scale_effect(self) -> Self {
+        self.view_transition()
+            .keyframe(0, |f| f.style(|s| s.scale(0.pct())))
+            .debug_name("Scale the width and height from zero to the default")
+    }
+
+    /// View transition animating size 0×0 → computed.
+    pub fn scale_size_effect(self) -> Self {
+        self.view_transition()
+            .keyframe(0, |f| f.style(|s| s.size(0, 0)))
+            .debug_name("Scale the width and height from zero to the default")
+    }
+}
+
+/// # Builder methods for configuring an `Animation`.
+impl Animation {
+    /// Build a [`KeyFrame`].
+    ///
+    /// If a keyframe already exists at `frame_id`, its style is merged
+    /// (only set fields override). For full replacement see
+    /// [`Animation::keyframe_override`].
+    pub fn keyframe(mut self, frame_id: u16, key_frame: impl Fn(KeyFrame) -> KeyFrame) -> Self {
+        let frame = key_frame(KeyFrame::new(frame_id));
+        if let KeyFrameStyle::Style(ref style) = frame.style {
+            self.cache.remove_computed(frame_id);
+            for prop in style.style_props() {
+                self.cache
+                    .insert_prop(prop, PropFrameKind::Normal(frame_id));
+            }
+        } else {
+            self.cache.insert_computed(frame_id);
+        }
+
+        match self.key_frames.entry(frame_id) {
+            imbl::hashmap::Entry::Occupied(mut oe) => {
+                let e_frame = oe.get_mut();
+                match (&mut e_frame.style, frame.style) {
+                    (KeyFrameStyle::Computed, KeyFrameStyle::Computed) => {}
+                    (s @ KeyFrameStyle::Computed, KeyFrameStyle::Style(ns)) => {
+                        *s = KeyFrameStyle::Style(ns);
+                    }
+                    (s @ KeyFrameStyle::Style(_), KeyFrameStyle::Computed) => {
+                        *s = KeyFrameStyle::Computed;
+                    }
+                    (KeyFrameStyle::Style(s), KeyFrameStyle::Style(ns)) => {
+                        s.apply_mut(&ns);
+                    }
+                }
+                e_frame.easing = frame.easing;
+            }
+            imbl::hashmap::Entry::Vacant(ve) => {
+                ve.insert(frame);
+            }
+        }
+        self
+    }
+
+    /// Build a [`KeyFrame`] replacing any existing one at `frame_id`.
+    pub fn keyframe_override(
+        mut self,
+        frame_id: u16,
+        key_frame: impl Fn(KeyFrame) -> KeyFrame,
+    ) -> Self {
+        let frame = key_frame(KeyFrame::new(frame_id));
+        let frame_style = frame.style.clone();
+        if let Some(f) = self.key_frames.insert(frame_id, frame)
+            && let KeyFrameStyle::Style(style) = f.style
+        {
+            for prop in style.style_props() {
+                self.cache.remove_prop(prop, frame_id);
+            }
+        }
+        if let KeyFrameStyle::Style(style) = frame_style {
+            self.cache.insert_computed(frame_id);
+            for prop in style.style_props() {
+                self.cache
+                    .insert_prop(prop, PropFrameKind::Normal(frame_id));
+            }
+        } else {
+            self.cache.remove_computed(frame_id);
+        }
+        self
+    }
+
+    /// Perceived animation duration. The total run extends until all
+    /// animating props report `finished` from their easing, which can
+    /// exceed `duration` for springs.
+    pub const fn duration(mut self, duration: Duration) -> Self {
+        self.duration = duration;
+        self
+    }
+
+    /// Invoke `f` with the current duration so callers can derive values from it.
+    pub fn with_duration(self, duration: impl FnOnce(Self, Duration) -> Self) -> Self {
+        let d = self.duration;
+        duration(self, d)
+    }
+
+    /// Conditionally apply `f` when `cond` is `true`.
+    pub fn apply_if(self, cond: bool, f: impl FnOnce(Self) -> Self) -> Self {
+        if cond { f(self) } else { self }
+    }
+
+    /// Run on view create (appearing via dyn container, post-hide).
+    pub const fn run_on_create(mut self, run_on_create: bool) -> Self {
+        self.run_on_create = run_on_create;
+        self
+    }
+
+    /// Run on create and NOT on remove.
+    pub const fn only_on_create(mut self) -> Self {
+        self.run_on_remove = false;
+        self.run_on_create = true;
+        self
+    }
+
+    /// Run on view remove (hidden / destroyed).
+    pub const fn run_on_remove(mut self, run_on_remove: bool) -> Self {
+        self.run_on_remove = run_on_remove;
+        self
+    }
+
+    /// Run on remove and NOT on create.
+    pub const fn only_on_remove(mut self) -> Self {
+        self.run_on_remove = true;
+        self.run_on_create = false;
+        self
+    }
+
+    /// Apply the final keyframe's props even once the animation is
+    /// finished.
+    pub const fn apply_when_finished(mut self, apply: bool) -> Self {
+        self.apply_when_finished = apply;
+        self
+    }
+
+    /// Enable auto-reverse (reach 100% twice as fast, then animate back).
+    pub const fn auto_reverse(mut self, auto_rev: bool) -> Self {
+        self.auto_reverse = auto_rev;
+        self
+    }
+
+    /// Allow the animation to reverse on view remove/hide.
+    pub const fn reverse_on_exit(mut self, allow: bool) -> Self {
+        if allow {
+            self.reverse_once = ReverseOnce::Val(false);
+        } else {
+            self.reverse_once = ReverseOnce::Never;
+        }
+        self
+    }
+
+    /// Delay before the animation starts.
+    pub const fn delay(mut self, delay: Duration) -> Self {
+        self.delay = delay;
+        self
+    }
+
+    /// Also delay when reversing.
+    pub const fn delay_on_reverse(mut self, on_reverse: bool) -> Self {
+        self.delay_on_reverse = on_reverse;
+        self
+    }
+
+    /// Loop forever (`true`) or play once (`false`).
+    pub const fn repeat(mut self, repeat: bool) -> Self {
+        self.repeat_mode = if repeat {
+            RepeatMode::LoopForever
+        } else {
+            RepeatMode::Times(1)
+        };
+        self
+    }
+
+    /// Play exactly `times` times.
+    pub const fn repeat_times(mut self, times: usize) -> Self {
+        self.repeat_mode = RepeatMode::Times(times);
+        self
+    }
+
+    /// Keyframe number representing 100% completion. Default is 100.
+    /// Increasing this allows more than 100 keyframes (each then
+    /// represents a smaller fraction of total progress).
+    pub const fn max_key_frame(mut self, max: u16) -> Self {
+        self.max_key_frame_num = max;
+        self
+    }
+
+    /// Apply an initial state command at build time.
+    pub fn initial_state(mut self, command: AnimStateCommand) -> Self {
+        self.transition(command);
+        self
+    }
+
+    /// Human-readable description shown in debug output / inspectors.
+    pub fn debug_name(mut self, description: impl Into<String>) -> Self {
+        match &mut self.debug_description {
+            Some(inner_desc) => {
+                inner_desc.push_str("; ");
+                inner_desc.push_str(&description.into())
+            }
+            val @ None => *val = Some(description.into()),
+        }
+        self
+    }
+}
+
+/// # State inspection.
+impl Animation {
+    /// Match the current state and return its kind.
+    pub const fn state_kind(&self) -> AnimStateKind {
+        match self.state {
+            AnimState::Idle => AnimStateKind::Idle,
+            AnimState::Stopped => AnimStateKind::Stopped,
+            AnimState::PassInProgress { .. } => AnimStateKind::PassInProgress,
+            AnimState::ExtMode { .. } => AnimStateKind::PassInProgress,
+            AnimState::PassFinished { .. } => AnimStateKind::PassFinished,
+            AnimState::Completed { .. } => AnimStateKind::Completed,
+            AnimState::Paused { .. } => AnimStateKind::Paused,
+        }
+    }
+
+    /// Total elapsed time since the animation (first) started.
+    pub fn elapsed(&self) -> Option<Duration> {
+        match &self.state {
+            AnimState::Idle | AnimState::Stopped => None,
+            AnimState::PassInProgress {
+                started_on,
+                elapsed,
+            }
+            | AnimState::ExtMode {
+                started_on,
+                elapsed,
+            } => {
+                let duration = Instant::now() - *started_on;
+                Some(*elapsed + duration)
+            }
+            AnimState::PassFinished { elapsed, .. } => Some(*elapsed),
+            AnimState::Completed { elapsed, .. } => *elapsed,
+            AnimState::Paused { elapsed } => *elapsed,
+        }
+    }
+
+    /// `true` when `state_kind() == Idle`.
+    pub fn is_idle(&self) -> bool {
+        self.state_kind() == AnimStateKind::Idle
+    }
+
+    /// `true` when a pass is currently running.
+    pub fn is_in_progress(&self) -> bool {
+        self.state_kind() == AnimStateKind::PassInProgress
+    }
+
+    /// `true` when the animation has fully completed.
+    pub fn is_completed(&self) -> bool {
+        self.state_kind() == AnimStateKind::Completed
+    }
+
+    /// `true` when the animation is stopped.
+    pub fn is_stopped(&self) -> bool {
+        self.state_kind() == AnimStateKind::Stopped
+    }
+
+    /// `true` when calling [`Self::advance`] will make progress (either
+    /// transition state or interpolate values).
+    pub const fn can_advance(&self) -> bool {
+        match self.state_kind() {
+            AnimStateKind::PassFinished
+            | AnimStateKind::PassInProgress
+            | AnimStateKind::Idle
+            | AnimStateKind::Completed => true,
+            AnimStateKind::Paused | AnimStateKind::Stopped => false,
+        }
+    }
+
+    /// `true` if [`Self::auto_reverse`] is enabled.
+    pub const fn is_auto_reverse(&self) -> bool {
+        self.auto_reverse
+    }
+
+    /// `true` when the folded style should be re-applied even though
+    /// [`Self::advance`] won't make progress (paused state, or
+    /// `apply_when_finished`).
+    pub fn should_apply_folded(&self) -> bool {
+        self.apply_when_finished
+            || match self.state_kind() {
+                AnimStateKind::Paused => true,
+                AnimStateKind::Idle
+                | AnimStateKind::Stopped
+                | AnimStateKind::PassInProgress
+                | AnimStateKind::PassFinished
+                | AnimStateKind::Completed => false,
+            }
+    }
+
+    /// Whether the animation is currently playing in reverse.
+    pub const fn is_reversing(&self) -> bool {
+        self.reverse_once.is_rev()
+    }
+
+    /// Whether `run_on_create` is enabled.
+    pub const fn runs_on_create(&self) -> bool {
+        self.run_on_create
+    }
+
+    /// Whether `run_on_remove` is enabled.
+    pub const fn runs_on_remove(&self) -> bool {
+        self.run_on_remove
+    }
+
+    /// Optional debug description set via [`Self::debug_name`].
+    pub fn debug_description(&self) -> Option<&str> {
+        self.debug_description.as_deref()
+    }
+
+    /// Configured perceived duration.
+    pub fn get_duration(&self) -> Duration {
+        self.duration
+    }
+
+    /// Configured repeat mode.
+    pub fn get_repeat_mode(&self) -> &RepeatMode {
+        &self.repeat_mode
+    }
+}
+
+/// # Engine tick + state transitions.
+impl Animation {
+    /// Advance the animation by one frame. Returns which lifecycle
+    /// events (if any) fired — hosts propagate these to their own
+    /// observers.
+    pub fn advance(&mut self) -> AnimationEvents {
+        let mut events = AnimationEvents::default();
+        let use_delay = self.use_delay();
+        match &mut self.state {
+            AnimState::Idle => {
+                self.start_mut();
+                events.started = true;
+            }
+            AnimState::PassInProgress {
+                started_on,
+                elapsed,
+            } => {
+                let now = Instant::now();
+                let duration = now - *started_on;
+                let og_elapsed = *elapsed;
+                *elapsed = duration;
+
+                let temp_elapsed = if *elapsed <= self.delay && use_delay {
+                    Duration::ZERO
+                } else if use_delay {
+                    *elapsed - self.delay
+                } else {
+                    *elapsed
+                };
+
+                if temp_elapsed >= self.duration {
+                    if self.props_in_ext_progress.is_empty() {
+                        self.state = AnimState::PassFinished {
+                            elapsed: *elapsed,
+                            was_in_ext: false,
+                        };
+                    } else {
+                        events.visual_completed = true;
+                        self.state = AnimState::ExtMode {
+                            started_on: *started_on,
+                            elapsed: og_elapsed,
+                        };
+                    }
+                }
+            }
+            AnimState::ExtMode {
+                started_on,
+                elapsed,
+            } => {
+                let now = Instant::now();
+                let duration = now - *started_on;
+                *elapsed = duration;
+
+                if self.props_in_ext_progress.is_empty() {
+                    self.state = AnimState::PassFinished {
+                        elapsed: *elapsed,
+                        was_in_ext: true,
+                    };
+                }
+            }
+            AnimState::PassFinished {
+                elapsed,
+                was_in_ext,
+            } => match self.repeat_mode {
+                RepeatMode::LoopForever => {
+                    if self.reverse_once.is_rev() {
+                        self.reverse_once.set(false);
+                    } else if self.auto_reverse {
+                        self.reverse_once.set(true);
+                    }
+                    self.state = AnimState::PassInProgress {
+                        started_on: Instant::now(),
+                        elapsed: Duration::ZERO,
+                    }
+                }
+                RepeatMode::Times(times) => {
+                    self.repeat_count += 1;
+                    if self.repeat_count >= times {
+                        let was_reversing = self.reverse_once.is_rev();
+                        self.reverse_once.set(false);
+                        events.completed = true;
+                        if !*was_in_ext {
+                            events.visual_completed = true;
+                        }
+                        self.state = AnimState::Completed {
+                            elapsed: Some(*elapsed),
+                            was_reversing,
+                        }
+                    } else {
+                        self.state = AnimState::PassInProgress {
+                            started_on: Instant::now(),
+                            elapsed: Duration::ZERO,
+                        }
+                    }
+                }
+            },
+            AnimState::Paused { .. } => {
+                debug_assert!(false, "Tried to advance a paused animation")
+            }
+            AnimState::Stopped => {
+                debug_assert!(false, "Tried to advance a stopped animation")
+            }
+            AnimState::Completed { was_reversing, .. } => {
+                if self.auto_reverse && !*was_reversing {
+                    self.reverse_mut();
+                } else {
+                    self.state = AnimState::Stopped;
+                }
+            }
+        }
+        events
+    }
+
+    /// Apply a state-machine transition command directly.
+    pub fn transition(&mut self, command: AnimStateCommand) {
+        match command {
+            AnimStateCommand::Pause => {
+                self.state = AnimState::Paused {
+                    elapsed: self.elapsed(),
+                }
+            }
+            AnimStateCommand::Resume => {
+                if let AnimState::Paused { elapsed } = &self.state {
+                    self.state = AnimState::PassInProgress {
+                        started_on: Instant::now(),
+                        elapsed: elapsed.unwrap_or(Duration::ZERO),
+                    }
+                }
+            }
+            AnimStateCommand::Start => {
+                self.reverse_once.set(false);
+                Rc::make_mut(&mut self.folded_style.map).clear();
+                self.repeat_count = 0;
+                self.state = AnimState::PassInProgress {
+                    started_on: Instant::now(),
+                    elapsed: Duration::ZERO,
+                }
+            }
+            AnimStateCommand::Reverse => {
+                self.reverse_once.set(true);
+                Rc::make_mut(&mut self.folded_style.map).clear();
+                self.repeat_count = 0;
+                self.state = AnimState::PassInProgress {
+                    started_on: Instant::now(),
+                    elapsed: Duration::ZERO,
+                }
+            }
+            AnimStateCommand::Stop => {
+                self.repeat_count = 0;
+                self.state = AnimState::Stopped;
+            }
+        }
+    }
+
+    fn start_mut(&mut self) {
+        self.transition(AnimStateCommand::Start)
+    }
+
+    fn reverse_mut(&mut self) {
+        self.transition(AnimStateCommand::Reverse)
+    }
+
+    /// Total elapsed time normalized to `[0, 1]` (can exceed 1 if duration
+    /// has passed and `props_in_ext_progress` is still settling).
+    pub fn total_time_percent(&self) -> f64 {
+        if self.duration == Duration::ZERO {
+            return 0.;
+        }
+        let mut elapsed = self.elapsed().unwrap_or(Duration::ZERO);
+        if self.use_delay() {
+            elapsed = elapsed.saturating_sub(self.delay);
+        }
+        let percent = elapsed.as_secs_f64() / self.duration.as_secs_f64();
+        if self.reverse_once.is_rev() {
+            1. - percent
+        } else {
+            percent
+        }
+    }
+
+    fn use_delay(&self) -> bool {
+        !self.is_reversing() || self.delay_on_reverse
+    }
+}
+
+/// # Interpolation.
+impl Animation {
+    fn get_current_kf_props(
+        &self,
+        prop: StylePropRef,
+        frame_target: u16,
+        computed_style: &Style,
+    ) -> Option<(KeyFrameProp, KeyFrameProp)> {
+        let PropFrames {
+            lower_idx,
+            upper_idx,
+        } = self.cache.get_prop_frames(prop, frame_target)?;
+
+        let mut upper_computed = false;
+
+        let upper = {
+            let upper = upper_idx?;
+            let frame = self
+                .key_frames
+                .get(&upper.inner())
+                .expect("If the value is in the cache, it should also be in the key frames");
+
+            let prop = match &frame.style {
+                KeyFrameStyle::Computed => {
+                    debug_assert!(
+                        matches!(upper, PropFrameKind::Computed(_)),
+                        "computed frame should have come from matching computed idx"
+                    );
+                    upper_computed = true;
+                    computed_style
+                        .map
+                        .get(&prop.key)
+                        .expect("was in the cache as a computed frame")
+                        .clone()
+                }
+                KeyFrameStyle::Style(s) => s.map.get(&prop.key).expect("same as above").clone(),
+            };
+
+            KeyFrameProp {
+                id: upper.inner(),
+                val: prop,
+                easing: frame.easing.clone(),
+            }
+        };
+
+        let lower = {
+            let lower = lower_idx?;
+            let frame = self
+                .key_frames
+                .get(&lower.inner())
+                .expect("If the value is in the cache, it should also be in the key frames");
+
+            let prop = match &frame.style {
+                KeyFrameStyle::Computed => {
+                    debug_assert!(
+                        matches!(lower, PropFrameKind::Computed(_)),
+                        "computed frame should have come from matching computed idx"
+                    );
+                    if upper_computed {
+                        return None;
+                    }
+                    computed_style
+                        .map
+                        .get(&prop.key)
+                        .expect("was in the cache as a computed frame")
+                        .clone()
+                }
+                KeyFrameStyle::Style(s) => s.map.get(&prop.key).expect("same as above").clone(),
+            };
+
+            KeyFrameProp {
+                id: lower.inner(),
+                val: prop,
+                easing: frame.easing.clone(),
+            }
+        };
+
+        if self.is_reversing() {
+            Some((upper, lower))
+        } else {
+            Some((lower, upper))
+        }
+    }
+
+    /// Interpolate every animated prop at the current time and apply
+    /// the result to `computed_style`.
+    pub fn animate_into(&mut self, computed_style: &mut Style) {
+        let computed_idxs = self.cache.computed_idxs.clone();
+        for computed_idx in &computed_idxs {
+            for prop in computed_style.style_props() {
+                self.cache
+                    .insert_computed_prop(prop, PropFrameKind::Computed(*computed_idx));
+            }
+        }
+        let local_percents: Vec<_> = self
+            .props_in_ext_progress
+            .iter()
+            .map(|(p, (l, u))| (*p, self.get_local_percent(l.id, u.id)))
+            .collect();
+
+        self.props_in_ext_progress.retain(|p, (_l, u)| {
+            let local_percent = local_percents
+                .iter()
+                .find(|&&(prop, _)| prop == *p)
+                .map(|&(_, percent)| percent)
+                .unwrap_or_default();
+            !u.easing.finished(local_percent)
+        });
+        for (ext_prop, (l, u)) in &self.props_in_ext_progress {
+            let local_percent = local_percents
+                .iter()
+                .find(|&&(prop, _)| prop == *ext_prop)
+                .map(|&(_, percent)| percent)
+                .unwrap_or_default();
+
+            let eased_time = u.easing.eval(local_percent);
+            if let Some(interpolated) =
+                (ext_prop.info().interpolate)(&*l.val.clone(), &*u.val.clone(), eased_time)
+            {
+                Rc::make_mut(&mut self.folded_style.map).insert(ext_prop.key, interpolated);
+            }
+        }
+
+        let percent = self.total_time_percent();
+        let frame_target = (self.max_key_frame_num as f64 * percent).round() as u16;
+
+        let props: Vec<_> = self.cache.prop_map.keys().copied().collect();
+
+        for prop in &props {
+            if self.props_in_ext_progress.contains_key(prop) {
+                continue;
+            }
+            let Some((prev, target)) =
+                self.get_current_kf_props(*prop, frame_target, computed_style)
+            else {
+                continue;
+            };
+            let local_percent = self.get_local_percent(prev.id, target.id);
+            let easing = target.easing.clone();
+            // TODO: Better way to detect ext-mode entry than just
+            // checking after 97%.
+            if (local_percent > 0.97) && !easing.finished(local_percent) {
+                self.props_in_ext_progress
+                    .insert(*prop, (prev.clone(), target.clone()));
+            } else {
+                self.props_in_ext_progress.remove(prop);
+            }
+            let eased_time = easing.eval(local_percent);
+            if let Some(interpolated) =
+                (prop.info().interpolate)(&*prev.val.clone(), &*target.val.clone(), eased_time)
+            {
+                Rc::make_mut(&mut self.folded_style.map).insert(prop.key, interpolated);
+            }
+        }
+
+        computed_style.apply_mut(&self.folded_style);
+
+        for computed_idx in computed_idxs {
+            for prop in computed_style.style_props() {
+                self.cache.remove_prop(prop, computed_idx);
+            }
+        }
+    }
+
+    /// Given a pair of keyframes, return the animation's progress inside
+    /// the sub-range they bound.
+    pub fn get_local_percent(&self, prev_frame: u16, target_frame: u16) -> f64 {
+        let (low_frame, high_frame) = if self.is_reversing() {
+            (target_frame as f64, prev_frame as f64)
+        } else {
+            (prev_frame as f64, target_frame as f64)
+        };
+        let total_num_frames = self.max_key_frame_num as f64;
+        let low_frame_percent = low_frame / total_num_frames;
+        let high_frame_percent = high_frame / total_num_frames;
+        let keyframe_range = (high_frame_percent.max(0.001) - low_frame_percent.max(0.001)).abs();
+        let total_time_percent = self.total_time_percent();
+        let local = (total_time_percent - low_frame_percent) / keyframe_range;
+
+        if self.is_reversing() {
+            1. - local
+        } else {
+            local
+        }
+    }
+
+    /// Apply the last-computed folded style without advancing.
+    pub fn apply_folded(&self, computed_style: &mut Style) {
+        computed_style.apply_mut(&self.folded_style);
+    }
+}
+
+/// # Introspection for backends that may offload to native animation
+/// engines (iOS CoreAnimation, Android ViewPropertyAnimator, etc.).
+impl Animation {
+    /// Every prop key this animation currently touches. A native
+    /// backend can intersect this set against its compositor-animatable
+    /// property list to decide whether to offload or fall back to
+    /// CPU ticking.
+    pub fn touched_props(&self) -> impl Iterator<Item = StylePropRef> + '_ {
+        self.cache.prop_map.keys().copied()
+    }
+}
diff --git a/style/src/builtin_props.rs b/style/src/builtin_props.rs
new file mode 100644
index 000000000..0ae06b5b8
--- /dev/null
+++ b/style/src/builtin_props.rs
@@ -0,0 +1,1596 @@
+//! Built-in style property declarations.
+//!
+//! This module defines every built-in prop type (e.g. [`Width`], [`Height`],
+//! [`FontSize`]) and generates the convenience setters on [`Style`] /
+//! [`ExprStyle`] and getters on [`BuiltinStyle`] via
+//! [`define_builtin_props!`].
+//!
+//! The macro drives three rounds of expansion per prop:
+//! - `prop!(..)` to install the zero-sized marker type and its `StyleProp` impl
+//! - `decl`/`expr_decl` to emit fluent setters (respecting the `nocb` flag)
+//! - `unset`/`expr_unset` plus optional `transition_*` (when the `tr` flag is
+//!   present)
+//!
+//! Most of the ambient layout/positioning vocabulary is re-exported from
+//! `taffy::style` so downstream users can keep writing
+//! `floem::style::FlexDirection::Row` after the extraction.
+
+use parley::{FontStyle as FontStyleProp, FontWeight as FontWeightProp};
+use peniko::color::palette;
+use peniko::kurbo::{Affine, Stroke};
+use peniko::{Brush, Color};
+use smallvec::SmallVec;
+use taffy::GridTemplateComponent;
+
+pub use taffy::style::{
+    AlignContent, AlignItems, BoxSizing, Dimension, Display, FlexDirection, FlexWrap,
+    JustifyContent, JustifyItems, Position,
+};
+use taffy::{
+    geometry::MinMax,
+    prelude::{GridPlacement, Line},
+    style::{MaxTrackSizingFunction, MinTrackSizingFunction, Overflow},
+};
+
+use parley::Alignment;
+
+use crate::components::BoxShadow;
+use crate::prop;
+use crate::style::{BuiltinStyle, ExprStyle, Style};
+use crate::transition::Transition;
+use crate::unit::{AnchorAbout, Angle, Length, LengthAuto, LineHeightValue, Pct, Pt};
+use crate::values::{CursorStyle, Focus, NoWrapOverflow, ObjectFit, ObjectPosition, PointerEvents, TextOverflow};
+
+/// Defines built-in style properties with optional builder methods.
+///
+/// Properties can be marked with flags in braces:
+/// - `nocb` (no callback/no chain builder) - no fluent builder method generated
+/// - `tr` (transition) - generates a `transition_property_name()` method
+///
+/// For `Option<T>` properties, specify the inner type in brackets after the full type:
+///
+/// ```text
+/// Color color { tr }: Option<Color> [Color] { inherited } = None,
+/// ```
+///
+/// This generates a setter that accepts `impl Into<Color>` and wraps in `Some`,
+/// rather than the confusing `impl Into<Option<Color>>`. Use `unset_*()` to clear.
+macro_rules! define_builtin_props {
+    (
+        $(
+            $(#[$meta:meta])*
+            $type_name:ident $name:ident $({ $($flags:ident),* })? :
+            $typ:ty $( [$inner:ty] )? { $($options:tt)* } = $val:expr
+        ),*
+        $(,)?
+    ) => {
+        $(
+            prop!($(#[$meta])* pub $type_name: $typ { $($options)* } = $val);
+        )*
+        impl Style {
+            $(
+                define_builtin_props!(decl: $(#[$meta])* $type_name $name $({ $($flags),* })? : $typ $( [$inner] )? = $val);
+            )*
+            $(
+                define_builtin_props!(unset: $(#[$meta])* $type_name $name);
+            )*
+            $(
+                define_builtin_props!(transition: $(#[$meta])* $type_name $name $({ $($flags),* })?);
+            )*
+        }
+        impl BuiltinStyle<'_> {
+            $(
+                $(#[$meta])*
+                pub fn $name(&self) -> $typ {
+                    self.style.get($type_name)
+                }
+            )*
+        }
+        impl ExprStyle {
+            $(
+                define_builtin_props!(expr_decl: $(#[$meta])* $type_name $name $({ $($flags),* })? : $typ $( [$inner] )? = $val);
+            )*
+            $(
+                define_builtin_props!(expr_unset: $(#[$meta])* $type_name $name);
+            )*
+        }
+    };
+
+    // Built-in setters for `Option<T> [T]` take `Into<T>` and wrap in `Some`.
+    (decl: $(#[$meta:meta])* $type_name:ident $name:ident { $($flags:ident),* } : $typ:ty [$inner:ty] = $val:expr) => {
+        define_builtin_props!(@opt_check_nocb $(#[$meta])* $type_name $name [$($flags)*]: $inner);
+    };
+    (decl: $(#[$meta:meta])* $type_name:ident $name:ident : $typ:ty [$inner:ty] = $val:expr) => {
+        $(#[$meta])*
+        pub fn $name(self, v: impl Into<$inner>) -> Self {
+            self.set($type_name, Some(v.into()))
+        }
+    };
+    (decl: $(#[$meta:meta])* $type_name:ident $name:ident { $($flags:ident),* } : $typ:ty = $val:expr) => {
+        define_builtin_props!(@check_nocb $(#[$meta])* $type_name $name [$($flags)*]: $typ);
+    };
+    (decl: $(#[$meta:meta])* $type_name:ident $name:ident : $typ:ty = $val:expr) => {
+        $(#[$meta])*
+        pub fn $name(self, v: impl Into<$typ>) -> Self {
+            self.set($type_name, v.into())
+        }
+    };
+
+    (expr_decl: $(#[$meta:meta])* $type_name:ident $name:ident { $($flags:ident),* } : $typ:ty [$inner:ty] = $val:expr) => {
+        define_builtin_props!(@opt_check_nocb_expr $(#[$meta])* $type_name $name [$($flags)*]: $inner);
+    };
+    (expr_decl: $(#[$meta:meta])* $type_name:ident $name:ident : $typ:ty [$inner:ty] = $val:expr) => {
+        $(#[$meta])*
+        pub fn $name<T>(self, v: $crate::ContextValue<T>) -> Self
+        where
+            T: Into<$inner> + 'static,
+        {
+            self.set($type_name, v.map(|x| Some(x.into())))
+        }
+    };
+    (expr_decl: $(#[$meta:meta])* $type_name:ident $name:ident { $($flags:ident),* } : $typ:ty = $val:expr) => {
+        define_builtin_props!(@check_nocb_expr $(#[$meta])* $type_name $name [$($flags)*]: $typ);
+    };
+    (expr_decl: $(#[$meta:meta])* $type_name:ident $name:ident : $typ:ty = $val:expr) => {
+        $(#[$meta])*
+        pub fn $name<T>(self, v: $crate::ContextValue<T>) -> Self
+        where
+            T: Into<$typ> + 'static,
+        {
+            self.set($type_name, v.map(Into::into))
+        }
+    };
+
+    (@opt_check_nocb $(#[$meta:meta])* $type_name:ident $name:ident [nocb $($rest:ident)*]: $inner:ty) => {};
+    (@opt_check_nocb $(#[$meta:meta])* $type_name:ident $name:ident [$first:ident $($rest:ident)*]: $inner:ty) => {
+        define_builtin_props!(@opt_check_nocb $(#[$meta])* $type_name $name [$($rest)*]: $inner);
+    };
+    (@opt_check_nocb $(#[$meta:meta])* $type_name:ident $name:ident []: $inner:ty) => {
+        $(#[$meta])*
+        pub fn $name(self, v: impl Into<$inner>) -> Self {
+            self.set($type_name, Some(v.into()))
+        }
+    };
+
+    (@opt_check_nocb_expr $(#[$meta:meta])* $type_name:ident $name:ident [nocb $($rest:ident)*]: $inner:ty) => {};
+    (@opt_check_nocb_expr $(#[$meta:meta])* $type_name:ident $name:ident [$first:ident $($rest:ident)*]: $inner:ty) => {
+        define_builtin_props!(@opt_check_nocb_expr $(#[$meta])* $type_name $name [$($rest)*]: $inner);
+    };
+    (@opt_check_nocb_expr $(#[$meta:meta])* $type_name:ident $name:ident []: $inner:ty) => {
+        $(#[$meta])*
+        pub fn $name<T>(self, v: $crate::ContextValue<T>) -> Self
+        where
+            T: Into<$inner> + 'static,
+        {
+            self.set($type_name, v.map(|x| Some(x.into())))
+        }
+    };
+
+    // -------------------------------------------------------------------------
+    // @check_nocb — plain (non-Option) setter, respects nocb flag
+    // -------------------------------------------------------------------------
+
+    (@check_nocb $(#[$meta:meta])* $type_name:ident $name:ident [nocb $($rest:ident)*]: $typ:ty) => {};
+    (@check_nocb $(#[$meta:meta])* $type_name:ident $name:ident [$first:ident $($rest:ident)*]: $typ:ty) => {
+        define_builtin_props!(@check_nocb $(#[$meta])* $type_name $name [$($rest)*]: $typ);
+    };
+    (@check_nocb $(#[$meta:meta])* $type_name:ident $name:ident []: $typ:ty) => {
+        $(#[$meta])*
+        pub fn $name(self, v: impl Into<$typ>) -> Self {
+            self.set($type_name, v.into())
+        }
+    };
+
+    (@check_nocb_expr $(#[$meta:meta])* $type_name:ident $name:ident [nocb $($rest:ident)*]: $typ:ty) => {};
+    (@check_nocb_expr $(#[$meta:meta])* $type_name:ident $name:ident [$first:ident $($rest:ident)*]: $typ:ty) => {
+        define_builtin_props!(@check_nocb_expr $(#[$meta])* $type_name $name [$($rest)*]: $typ);
+    };
+    (@check_nocb_expr $(#[$meta:meta])* $type_name:ident $name:ident []: $typ:ty) => {
+        $(#[$meta])*
+        pub fn $name<T>(self, v: $crate::ContextValue<T>) -> Self
+        where
+            T: Into<$typ> + 'static,
+        {
+            self.set($type_name, v.map(Into::into))
+        }
+    };
+
+    // -------------------------------------------------------------------------
+    // unset — generated for all properties
+    // -------------------------------------------------------------------------
+
+    (unset: $(#[$meta:meta])* $type_name:ident $name:ident) => {
+        paste::paste! {
+            #[doc = "Unsets the `" $name "` property."]
+            pub fn [<unset_ $name>](self) -> Self {
+                self.set_style_value($type_name, $crate::StyleValue::Unset)
+            }
+        }
+    };
+
+    (expr_unset: $(#[$meta:meta])* $type_name:ident $name:ident) => {
+        paste::paste! {
+            #[doc = "Unsets the `" $name "` property."]
+            pub fn [<unset_ $name>](self) -> Self {
+                self.set($type_name, $crate::StyleValue::Unset)
+            }
+        }
+    };
+
+    // -------------------------------------------------------------------------
+    // transition — generated when `tr` flag is present
+    // -------------------------------------------------------------------------
+
+    // With flags — check for tr
+    (transition: $(#[$meta:meta])* $type_name:ident $name:ident { $($flags:ident),* }) => {
+        define_builtin_props!(@check_tr $(#[$meta])* $type_name $name [$($flags)*]);
+    };
+    // Without flags — never generate
+    (transition: $(#[$meta:meta])* $type_name:ident $name:ident) => {};
+
+    (@check_tr $(#[$meta:meta])* $type_name:ident $name:ident [tr $($rest:ident)*]) => {
+        paste::paste! {
+            #[doc = "Sets a transition for the `" $name "` property."]
+            $(#[$meta])*
+            pub fn [<transition_ $name>](self, transition: impl Into<Transition>) -> Self {
+                self.transition($type_name, transition.into())
+            }
+        }
+    };
+    (@check_tr $(#[$meta:meta])* $type_name:ident $name:ident [$first:ident $($rest:ident)*]) => {
+        define_builtin_props!(@check_tr $(#[$meta])* $type_name $name [$($rest)*]);
+    };
+    (@check_tr $(#[$meta:meta])* $type_name:ident $name:ident []) => {};
+}
+
+define_builtin_props!(
+    /// Controls the display type of the view.
+    ///
+    /// This determines how the view participates in layout.
+    DisplayProp display {}: Display {} = Display::Flex,
+
+    /// Sets the positioning scheme for the view.
+    ///
+    /// This affects how the view is positioned relative to its normal position in the document flow.
+    PositionProp position {}: Position {} = Position::Relative,
+
+    /// Enables fixed positioning relative to the viewport.
+    ///
+    /// When true, the view is positioned relative to the window viewport rather than
+    /// its parent. This is similar to CSS `position: fixed`. The view will:
+    /// - Use `inset` properties relative to the viewport
+    /// - Have percentage sizes relative to the viewport
+    /// - Be painted above all other content (like overlays)
+    ///
+    /// Note: This works in conjunction with `position: absolute` internally.
+    IsFixed is_fixed {}: bool {} = false,
+
+    /// Sets the width of the view.
+    ///
+    /// Can be specified in pixels, percentages, or auto.
+    Width width {tr}: LengthAuto {} = LengthAuto::Auto,
+
+    /// Sets the height of the view.
+    ///
+    /// Can be specified in pixels, percentages, or auto.
+    Height height {tr}: LengthAuto {} = LengthAuto::Auto,
+
+    /// Sets the minimum width of the view.
+    ///
+    /// The view will not shrink below this width.
+    MinWidth min_width {tr}: LengthAuto {} = LengthAuto::Auto,
+
+    /// Sets the minimum height of the view.
+    ///
+    /// The view will not shrink below this height.
+    MinHeight min_height {tr}: LengthAuto {} = LengthAuto::Auto,
+
+    /// Sets the maximum width of the view.
+    ///
+    /// The view will not grow beyond this width.
+    MaxWidth max_width {tr}: LengthAuto {} = LengthAuto::Auto,
+
+    /// Sets the maximum height of the view.
+    ///
+    /// The view will not grow beyond this height.
+    MaxHeight max_height {tr}: LengthAuto {} = LengthAuto::Auto,
+
+    /// Sets the direction of the main axis for flex items.
+    ///
+    /// Determines whether flex items are laid out in rows or columns.
+    FlexDirectionProp flex_direction {}: FlexDirection {} = FlexDirection::Row,
+
+    /// Controls whether flex items wrap to new lines.
+    ///
+    /// When enabled, items that don't fit will wrap to the next line.
+    FlexWrapProp flex_wrap {}: FlexWrap {} = FlexWrap::NoWrap,
+
+    /// Sets the flex grow factor for the flex item.
+    ///
+    /// Determines how much the item should grow relative to other items.
+    FlexGrow flex_grow {}: f32 {} = 0.0,
+
+    /// Sets the flex shrink factor for the flex item.
+    ///
+    /// Determines how much the item should shrink relative to other items.
+    FlexShrink flex_shrink {}: f32 {} = 1.0,
+
+    /// Sets the initial main size of a flex item.
+    ///
+    /// This is the size of the item before free space is distributed.
+    FlexBasis flex_basis {tr}: LengthAuto {} = LengthAuto::Auto,
+
+    /// Controls alignment of flex items along the main axis.
+    ///
+    /// Determines how extra space is distributed between and around items.
+    JustifyContentProp justify_content {}: Option<JustifyContent> [JustifyContent] {} = None,
+
+    /// Controls default alignment of grid items along the inline axis.
+    ///
+    /// Sets the default justify-self value for all items in the container.
+    JustifyItemsProp justify_items {}: Option<JustifyItems> [JustifyItems] {} = None,
+
+    /// Controls how the total width and height are calculated.
+    ///
+    /// Determines whether borders and padding are included in the view's size.
+    BoxSizingProp box_sizing {}: Option<BoxSizing> [BoxSizing] {} = None,
+
+    /// Controls individual alignment along the inline axis.
+    ///
+    /// Overrides the container's justify-items value for this specific item.
+    JustifySelf justify_self {}: Option<AlignItems> [AlignItems] {} = None,
+
+    /// Controls alignment of flex items along the cross axis.
+    ///
+    /// Determines how items are aligned when they don't fill the container's cross axis.
+    AlignItemsProp align_items {}: Option<AlignItems> [AlignItems] {} = None,
+
+    /// Controls alignment of wrapped flex lines.
+    ///
+    /// Only has an effect when flex-wrap is enabled and there are multiple lines.
+    AlignContentProp align_content {}: Option<AlignContent> [AlignContent] {} = None,
+
+    /// Defines the line names and track sizing functions of the grid rows.
+    ///
+    /// Specifies the size and names of the rows in a grid layout.
+    GridTemplateRows grid_template_rows {}: Vec<GridTemplateComponent<String>> {} = Vec::new(),
+
+    /// Defines the line names and track sizing functions of the grid columns.
+    ///
+    /// Specifies the size and names of the columns in a grid layout.
+    GridTemplateColumns grid_template_columns {}: Vec<GridTemplateComponent<String>> {} = Vec::new(),
+
+    /// Specifies the size of implicitly-created grid rows.
+    ///
+    /// Sets the default size for rows that are created automatically.
+    GridAutoRows grid_auto_rows {}: Vec<MinMax<MinTrackSizingFunction, MaxTrackSizingFunction>> {} = Vec::new(),
+
+    /// Specifies the size of implicitly-created grid columns.
+    ///
+    /// Sets the default size for columns that are created automatically.
+    GridAutoColumns grid_auto_columns {}: Vec<MinMax<MinTrackSizingFunction, MaxTrackSizingFunction>> {} = Vec::new(),
+
+    /// Controls how auto-placed items get flowed into the grid.
+    ///
+    /// Determines the direction that grid items are placed when not explicitly positioned.
+    GridAutoFlow grid_auto_flow {}: taffy::GridAutoFlow {} = taffy::GridAutoFlow::Row,
+
+    /// Specifies a grid item's location within the grid row.
+    ///
+    /// Determines which grid rows the item spans.
+    GridRow grid_row {}: Line<GridPlacement> {} = Line::default(),
+
+    /// Specifies a grid item's location within the grid column.
+    ///
+    /// Determines which grid columns the item spans.
+    GridColumn grid_column {}: Line<GridPlacement> {} = Line::default(),
+
+    /// Controls individual alignment along the cross axis.
+    ///
+    /// Overrides the container's align-items value for this specific item.
+    AlignSelf align_self {}: Option<AlignItems> [AlignItems] {} = None,
+
+    /// Sets the color of the view's outline.
+    ///
+    /// The outline is drawn outside the border and doesn't affect layout.
+    OutlineColor outline_color {tr}: Brush {} = Brush::Solid(palette::css::TRANSPARENT),
+
+    /// Sets the outline stroke properties.
+    ///
+    /// Defines the width, style, and other properties of the outline.
+    Outline outline {nocb, tr}: Stroke {} = Stroke::new(0.),
+
+    /// Controls the progress/completion of the outline animation.
+    ///
+    /// Useful for creating animated outline effects.
+    OutlineProgress outline_progress {tr}: Pct {} = Pct(100.),
+
+    /// Controls the progress/completion of the border animation.
+    ///
+    /// Useful for creating animated border effects.
+    BorderProgress border_progress {tr}: Pct {} = Pct(100.),
+
+    /// Sets the left border.
+    BorderLeft border_left {nocb, tr}: Stroke {} = Stroke::new(0.),
+    /// Sets the top border.
+    BorderTop border_top {nocb, tr}: Stroke {} = Stroke::new(0.),
+    /// Sets the right border.
+    BorderRight border_right {nocb, tr}: Stroke {} = Stroke::new(0.),
+    /// Sets the bottom border.
+    BorderBottom border_bottom {nocb, tr}: Stroke {} = Stroke::new(0.),
+
+    /// Sets the left border color.
+    BorderLeftColor border_left_color { tr }: Option<Brush> [Brush] {} = None,
+    /// Sets the top border color.
+    BorderTopColor border_top_color {  tr }: Option<Brush> [Brush] {} = None,
+    /// Sets the right border color.
+    BorderRightColor border_right_color { tr }: Option<Brush> [Brush] {} = None,
+    /// Sets the bottom border color.
+    BorderBottomColor border_bottom_color { tr }: Option<Brush> [Brush] {} = None,
+
+    /// Sets the top-left border radius.
+    BorderTopLeftRadius border_top_left_radius { tr }: Length {} = Length::Pt(0.),
+    /// Sets the top-right border radius.
+    BorderTopRightRadius border_top_right_radius { tr }: Length {} = Length::Pt(0.),
+    /// Sets the bottom-left border radius.
+    BorderBottomLeftRadius border_bottom_left_radius { tr }: Length {} = Length::Pt(0.),
+    /// Sets the bottom-right border radius.
+    BorderBottomRightRadius border_bottom_right_radius { tr }: Length {} = Length::Pt(0.),
+
+    /// Sets the left padding.
+    PaddingLeft padding_left { tr }: Length {} = Length::Pt(0.),
+    /// Sets the top padding.
+    PaddingTop padding_top { tr }: Length {} = Length::Pt(0.),
+    /// Sets the right padding.
+    PaddingRight padding_right { tr }: Length {} = Length::Pt(0.),
+    /// Sets the bottom padding.
+    PaddingBottom padding_bottom { tr }: Length {} = Length::Pt(0.),
+
+    /// Sets the left margin.
+    MarginLeft margin_left { tr }: LengthAuto {} = LengthAuto::Pt(0.),
+    /// Sets the top margin.
+    MarginTop margin_top { tr }: LengthAuto {} = LengthAuto::Pt(0.),
+    /// Sets the right margin.
+    MarginRight margin_right { tr }: LengthAuto {} = LengthAuto::Pt(0.),
+    /// Sets the bottom margin.
+    MarginBottom margin_bottom { tr }: LengthAuto {} = LengthAuto::Pt(0.),
+
+    /// Sets the left offset for positioned views.
+    InsetLeft inset_left {tr}: LengthAuto {} = LengthAuto::Auto,
+
+    /// Sets the top offset for positioned views.
+    InsetTop inset_top {tr}: LengthAuto {} = LengthAuto::Auto,
+
+    /// Sets the right offset for positioned views.
+    InsetRight inset_right {tr}: LengthAuto {} = LengthAuto::Auto,
+
+    /// Sets the bottom offset for positioned views.
+    InsetBottom inset_bottom {tr}: LengthAuto {} = LengthAuto::Auto,
+
+    /// Controls whether the view can be the target of mouse events.
+    ///
+    /// When disabled, mouse events pass through to views behind.
+    PointerEventsProp pointer_events {}: Option<PointerEvents> [PointerEvents] { inherited } = None,
+
+    /// Controls the stack order of positioned views.
+    ///
+    /// This is not a global z-index and will only be used as an override to the sorted order of sibling elements.
+    /// If you want a view positioned above others, use an overlay.
+    ///
+    /// Higher values appear in front of lower values.
+    ZIndex z_index {  tr }: Option<i32> [i32] {} = None,
+
+    /// Sets the cursor style when hovering over the view.
+    ///
+    /// Changes the appearance of the mouse cursor.
+    Cursor cursor { }: Option<CursorStyle> [CursorStyle] {} = None,
+
+    /// Sets the text color.
+    ///
+    /// This property is inherited by child views.
+    TextColor color { tr }: Option<Color> [Color] { inherited } = None,
+
+    /// Sets the background color or image.
+    ///
+    /// Can be a solid color, gradient, or image.
+    Background background { tr }: Option<Brush> [Brush] {} = None,
+
+    /// Sets the foreground color or pattern.
+    ///
+    /// Used for drawing content like icons or shapes.
+    Foreground foreground { tr }: Option<Brush> [Brush] {} = None,
+
+    /// Adds one or more drop shadows to the view.
+    ///
+    /// Can create depth and visual separation effects.
+    BoxShadowProp box_shadow {  tr }: SmallVec<[BoxShadow; 3]> {} = SmallVec::new(),
+
+    /// Sets the font size for text content.
+    ///
+    /// This property is inherited by child views.
+    FontSize font_size { nocb, tr }: f64 { inherited } = 14.,
+
+    /// Sets the font family for text content.
+    ///
+    /// This property is inherited by child views.
+    FontFamily font_family { }: Option<String> [String] { inherited } = None,
+
+    /// Sets the font weight (boldness) for text content.
+    ///
+    /// This property is inherited by child views.
+    FontWeight font_weight { }: Option<FontWeightProp> [FontWeightProp] { inherited } = None,
+
+    /// Sets the font style (italic, normal) for text content.
+    ///
+    /// This property is inherited by child views.
+    FontStyle font_style { }: Option<FontStyleProp> [FontStyleProp] { inherited } = None,
+
+    /// Sets the color of the text cursor.
+    ///
+    /// Visible when text input views have focus.
+    CursorColor cursor_color { tr }: Brush {} = Brush::Solid(palette::css::BLACK.with_alpha(0.3)),
+
+    /// Sets the corner radius of text selections.
+    ///
+    /// Controls how rounded the corners of selected text appear.
+    SelectionCornerRadius selection_corer_radius { nocb, tr }: f64 {} = 1.,
+
+    /// Controls whether the view's text can be selected.
+    ///
+    /// This property is inherited by child views.
+    // TODO: rename this TextSelectable
+    Selectable selectable {}: bool { inherited } = true,
+
+    /// Controls how overflowed text content is handled.
+    ///
+    /// Determines whether text wraps or gets clipped.
+    TextOverflowProp text_overflow {}: TextOverflow { inherited } = TextOverflow::NoWrap(NoWrapOverflow::Clip),
+
+    /// Sets text alignment within the view.
+    ///
+    /// Controls horizontal alignment of text content.
+    TextAlignProp text_align {}: Option<Alignment> [Alignment] {} = None,
+
+    /// Sets the line height for text content.
+    ///
+    /// This property is inherited by child views.
+    LineHeight line_height { tr }: LineHeightValue { inherited } = LineHeightValue::Normal(1.),
+
+    /// Sets the preferred aspect ratio for the view.
+    ///
+    /// Maintains width-to-height proportions during layout.
+    AspectRatio aspect_ratio {tr}: Option<f32> [f32] {} = None,
+
+    /// Controls how replaced content (like images) should be resized to fit its container.
+    ObjectFitProp object_fit {}: ObjectFit {} = ObjectFit::Fill,
+
+    /// Controls where replaced content is anchored inside its content box.
+    ObjectPositionProp object_position {}: ObjectPosition {} = ObjectPosition::Center,
+
+    /// Sets the gap between columns in grid or flex layouts.
+    ColGap col_gap { tr }: Length {} = Length::Pt(0.),
+
+    /// Sets the gap between rows in grid or flex layouts.
+    RowGap row_gap { tr }: Length {} = Length::Pt(0.),
+
+    /// Width of the scrollbar track in pixels.
+    ///
+    /// This property reserves space for scrollbars when `overflow_x` or `overflow_y` is set to `Scroll`.
+    /// The reserved space reduces the available content area but ensures content doesn't flow under the scrollbar.
+    ///
+    /// **Default:** `8px`
+    ScrollbarWidth scrollbar_width {tr}: Pt {} = Pt(8.),
+
+    /// How children overflowing their container in X axis should affect layout
+    OverflowX overflow_x {}: Overflow {} = Overflow::default(),
+
+    /// How children overflowing their container in Y axis should affect layout
+    OverflowY overflow_y {}: Overflow {} = Overflow::default(),
+
+    /// Sets the horizontal scale transform.
+    ScaleX scale_x {tr}: Pct {} = Pct(100.),
+
+    /// Sets the vertical scale transform.
+    ScaleY scale_y {tr}: Pct {} = Pct(100.),
+
+    /// Sets the horizontal translation transform.
+    TranslateX translate_x {tr}: Length {} = Length::Pt(0.),
+
+    /// Sets the vertical translation transform.
+    TranslateY translate_y {tr}: Length {} = Length::Pt(0.),
+
+    /// Sets the rotation transform angle.
+    Rotation rotate {tr}: Angle {} = Angle::Rad(0.0),
+
+    /// Sets the anchor point for rotation transformations.
+    RotateAbout rotate_about {}: AnchorAbout {} = AnchorAbout::CENTER,
+
+    /// Sets the anchor point for scaling transformations.
+    ScaleAbout scale_about {tr}: AnchorAbout {} = AnchorAbout::CENTER,
+
+    /// Sets a custom affine transformation matrix.
+    Transform transform {tr}: Affine {} = Affine::IDENTITY,
+
+    /// Sets the opacity of the view.
+    Opacity opacity {tr}: f32 {} = 1.0,
+
+    /// Sets the selected state of the view.
+    Selected set_selected {}: bool { inherited } = false,
+
+    /// Controls the disabled state of the view.
+    Disabled set_disabled {}: bool { inherited } = false,
+
+    /// Controls whether the view can receive focus during navigation such as tab or arrow navigation.
+    Focusable set_focus {}: Focus { } = Focus::None,
+);
+
+
+// ============================================================================
+// Convenience setters and helpers on Style that build on the built-in props.
+// Moved from floem::style::Style's inherent impl blocks.
+// ============================================================================
+
+use crate::components::{Border, BorderColor, BorderRadius, Margin, Padding};
+use crate::style_value::StyleValue;
+use crate::unit::UnitExt;
+use crate::values::StrokeWrap;
+use parley::style::{OverflowWrap, WordBreakStrength};
+
+impl Style {
+    /// Sets the width to 100% of the parent container.
+    pub fn width_full(self) -> Self {
+        self.width_pct(100.0)
+    }
+
+    /// Sets the width as a percentage of the parent container.
+    pub fn width_pct(self, width: f64) -> Self {
+        self.width(width.pct())
+    }
+
+    /// Sets the height to 100% of the parent container.
+    pub fn height_full(self) -> Self {
+        self.height_pct(100.0)
+    }
+
+    /// Sets the height as a percentage of the parent container.
+    pub fn height_pct(self, height: f64) -> Self {
+        self.height(height.pct())
+    }
+
+    /// Makes the view fully keyboard navigable.
+    ///
+    /// The view can receive focus via Tab/Shift+Tab navigation, arrow keys,
+    /// pointer clicks, and programmatic focus calls. This is the recommended
+    /// setting for interactive controls like buttons, inputs, and links.
+    /// Keyboard navigable is a strict superset of focusable.
+    ///
+    /// Equivalent to `focus(Focus::Keyboard)`.
+    pub fn keyboard_navigable(self) -> Self {
+        self.set(Focusable, Focus::Keyboard)
+    }
+
+    /// Makes the view focusable by pointer and programmatically, but excludes it
+    /// from keyboard navigation. For many elements (especially buttons) you should
+    /// probably use [Self::keyboard_navigable].
+    ///
+    /// The view can be clicked to receive focus or focused via `request_focus()`,
+    /// but will not be included in Tab order or arrow key navigation. Useful for
+    /// scroll containers, modal backdrops, or roving tabindex patterns.
+    /// If you need keyboard traversal, use [Self::keyboard_navigable], which
+    /// also enables focusability automatically.
+    ///
+    /// Equivalent to `focus(Focus::PointerAndProgrammatic)`.
+    pub fn focusable(self) -> Self {
+        self.set(Focusable, Focus::PointerAndProgrammatic)
+    }
+
+    /// Sets the font size for text content.
+    pub fn font_size(self, size: impl Into<Pt>) -> Self {
+        let px = size.into();
+        self.set_style_value(FontSize, StyleValue::Val(px.0))
+    }
+
+    /// Makes the view non-focusable through any means.
+    ///
+    /// The view cannot receive focus via keyboard, pointer, or programmatic calls.
+    /// Use this for decorative elements or containers that should never be interactive.
+    ///
+    /// Equivalent to `focus(Focus::None)`.
+    pub fn focus_none(self) -> Self {
+        self.set(Focusable, Focus::None)
+    }
+
+    /// Sets different gaps for rows and columns in grid or flex layouts.
+    pub fn row_col_gap(self, width: impl Into<Length>, height: impl Into<Length>) -> Self {
+        self.col_gap(width).row_gap(height)
+    }
+
+    /// Sets the same gap for both rows and columns in grid or flex layouts.
+    pub fn gap(self, gap: impl Into<Length>) -> Self {
+        let gap = gap.into();
+        self.col_gap(gap).row_gap(gap)
+    }
+
+    /// Sets both width and height of the view.
+    pub fn size(self, width: impl Into<LengthAuto>, height: impl Into<LengthAuto>) -> Self {
+        self.width(width).height(height)
+    }
+
+    /// Sets both width and height to 100% of the parent container.
+    pub fn size_full(self) -> Self {
+        self.size_pct(100.0, 100.0)
+    }
+
+    /// Sets both width and height as percentages of the parent container.
+    pub fn size_pct(self, width: f64, height: f64) -> Self {
+        self.width(width.pct()).height(height.pct())
+    }
+
+    /// Sets the minimum width to 100% of the parent container.
+    pub fn min_width_full(self) -> Self {
+        self.min_width_pct(100.0)
+    }
+
+    /// Sets the minimum width as a percentage of the parent container.
+    pub fn min_width_pct(self, min_width: f64) -> Self {
+        self.min_width(min_width.pct())
+    }
+
+    /// Sets the minimum height to 100% of the parent container.
+    pub fn min_height_full(self) -> Self {
+        self.min_height_pct(100.0)
+    }
+
+    /// Sets the minimum height as a percentage of the parent container.
+    pub fn min_height_pct(self, min_height: f64) -> Self {
+        self.min_height(min_height.pct())
+    }
+
+    /// Sets both minimum width and height to 100% of the parent container.
+    pub fn min_size_full(self) -> Self {
+        self.min_size_pct(100.0, 100.0)
+    }
+
+    /// Sets both minimum width and height of the view.
+    pub fn min_size(
+        self,
+        min_width: impl Into<LengthAuto>,
+        min_height: impl Into<LengthAuto>,
+    ) -> Self {
+        self.min_width(min_width).min_height(min_height)
+    }
+
+    /// Sets both minimum width and height as percentages of the parent container.
+    pub fn min_size_pct(self, min_width: f64, min_height: f64) -> Self {
+        self.min_size(min_width.pct(), min_height.pct())
+    }
+
+    /// Sets the maximum width to 100% of the parent container.
+    pub fn max_width_full(self) -> Self {
+        self.max_width_pct(100.0)
+    }
+
+    /// Sets the maximum width as a percentage of the parent container.
+    pub fn max_width_pct(self, max_width: f64) -> Self {
+        self.max_width(max_width.pct())
+    }
+
+    /// Sets the maximum height to 100% of the parent container.
+    pub fn max_height_full(self) -> Self {
+        self.max_height_pct(100.0)
+    }
+
+    /// Sets the maximum height as a percentage of the parent container.
+    pub fn max_height_pct(self, max_height: f64) -> Self {
+        self.max_height(max_height.pct())
+    }
+
+    /// Sets both maximum width and height of the view.
+    pub fn max_size(
+        self,
+        max_width: impl Into<LengthAuto>,
+        max_height: impl Into<LengthAuto>,
+    ) -> Self {
+        self.max_width(max_width).max_height(max_height)
+    }
+
+    /// Sets both maximum width and height to 100% of the parent container.
+    pub fn max_size_full(self) -> Self {
+        self.max_size_pct(100.0, 100.0)
+    }
+
+    /// Sets both maximum width and height as percentages of the parent container.
+    pub fn max_size_pct(self, max_width: f64, max_height: f64) -> Self {
+        self.max_size(max_width.pct(), max_height.pct())
+    }
+
+    /// Sets the border color for all sides of the view.
+    pub fn border_color(self, color: impl Into<Brush>) -> Self {
+        let color = color.into();
+        self.set(BorderLeftColor, Some(color.clone()))
+            .set(BorderTopColor, Some(color.clone()))
+            .set(BorderRightColor, Some(color.clone()))
+            .set(BorderBottomColor, Some(color))
+    }
+
+    /// Sets the border properties for all sides of the view.
+    pub fn border(self, border: impl Into<StrokeWrap>) -> Self {
+        let border = border.into();
+        self.set(BorderLeft, border.0.clone())
+            .set(BorderTop, border.0.clone())
+            .set(BorderRight, border.0.clone())
+            .set(BorderBottom, border.0)
+    }
+
+    /// Sets the outline properties of the view.
+    pub fn outline(self, outline: impl Into<StrokeWrap>) -> Self {
+        self.set_style_value(Outline, StyleValue::Val(outline.into().0))
+    }
+
+    /// Sets the left border.
+    pub fn border_left(self, border: impl Into<StrokeWrap>) -> Self {
+        self.set(BorderLeft, border.into().0)
+    }
+
+    /// Sets the top border.
+    pub fn border_top(self, border: impl Into<StrokeWrap>) -> Self {
+        self.set(BorderTop, border.into().0)
+    }
+
+    /// Sets the right border.
+    pub fn border_right(self, border: impl Into<StrokeWrap>) -> Self {
+        self.set(BorderRight, border.into().0)
+    }
+
+    /// Sets the bottom border.
+    pub fn border_bottom(self, border: impl Into<StrokeWrap>) -> Self {
+        self.set(BorderBottom, border.into().0)
+    }
+
+    /// Sets `border_left` and `border_right` to `border`
+    pub fn border_horiz(self, border: impl Into<StrokeWrap>) -> Self {
+        let border = border.into();
+        self.set(BorderLeft, border.0.clone())
+            .set(BorderRight, border.0)
+    }
+
+    /// Sets `border_top` and `border_bottom` to `border`
+    pub fn border_vert(self, border: impl Into<StrokeWrap>) -> Self {
+        let border = border.into();
+        self.set(BorderTop, border.0.clone())
+            .set(BorderBottom, border.0)
+    }
+
+    /// Sets the left padding as a percentage of the parent container width.
+    pub fn padding_left_pct(self, padding: f64) -> Self {
+        self.padding_left(padding.pct())
+    }
+
+    /// Sets the right padding as a percentage of the parent container width.
+    pub fn padding_right_pct(self, padding: f64) -> Self {
+        self.padding_right(padding.pct())
+    }
+
+    /// Sets the top padding as a percentage of the parent container width.
+    pub fn padding_top_pct(self, padding: f64) -> Self {
+        self.padding_top(padding.pct())
+    }
+
+    /// Sets the bottom padding as a percentage of the parent container width.
+    pub fn padding_bottom_pct(self, padding: f64) -> Self {
+        self.padding_bottom(padding.pct())
+    }
+
+    /// Set padding on all directions
+    pub fn padding(self, padding: impl Into<Length>) -> Self {
+        let padding = padding.into();
+        self.set(PaddingLeft, padding)
+            .set(PaddingTop, padding)
+            .set(PaddingRight, padding)
+            .set(PaddingBottom, padding)
+    }
+
+    /// Sets padding on all sides as a percentage of the parent container width.
+    pub fn padding_pct(self, padding: f64) -> Self {
+        self.padding(padding.pct())
+    }
+
+    /// Sets `padding_left` and `padding_right` to `padding`
+    pub fn padding_horiz(self, padding: impl Into<Length>) -> Self {
+        let padding = padding.into();
+        self.set(PaddingLeft, padding).set(PaddingRight, padding)
+    }
+
+    /// Sets horizontal padding as a percentage of the parent container width.
+    pub fn padding_horiz_pct(self, padding: f64) -> Self {
+        self.padding_horiz(padding.pct())
+    }
+
+    /// Sets `padding_top` and `padding_bottom` to `padding`
+    pub fn padding_vert(self, padding: impl Into<Length>) -> Self {
+        let padding = padding.into();
+        self.set(PaddingTop, padding).set(PaddingBottom, padding)
+    }
+
+    /// Sets vertical padding as a percentage of the parent container width.
+    pub fn padding_vert_pct(self, padding: f64) -> Self {
+        self.padding_vert(padding.pct())
+    }
+
+    /// Sets the left margin as a percentage of the parent container width.
+    pub fn margin_left_pct(self, margin: f64) -> Self {
+        self.margin_left(margin.pct())
+    }
+
+    /// Sets the right margin as a percentage of the parent container width.
+    pub fn margin_right_pct(self, margin: f64) -> Self {
+        self.margin_right(margin.pct())
+    }
+
+    /// Sets the top margin as a percentage of the parent container width.
+    pub fn margin_top_pct(self, margin: f64) -> Self {
+        self.margin_top(margin.pct())
+    }
+
+    /// Sets the bottom margin as a percentage of the parent container width.
+    pub fn margin_bottom_pct(self, margin: f64) -> Self {
+        self.margin_bottom(margin.pct())
+    }
+
+    /// Sets margin on all sides of the view.
+    pub fn margin(self, margin: impl Into<LengthAuto>) -> Self {
+        let margin = margin.into();
+        self.set(MarginLeft, margin)
+            .set(MarginTop, margin)
+            .set(MarginRight, margin)
+            .set(MarginBottom, margin)
+    }
+
+    /// Sets margin on all sides as a percentage of the parent container width.
+    pub fn margin_pct(self, margin: f64) -> Self {
+        self.margin(margin.pct())
+    }
+
+    /// Sets `margin_left` and `margin_right` to `margin`
+    pub fn margin_horiz(self, margin: impl Into<LengthAuto>) -> Self {
+        let margin = margin.into();
+        self.set(MarginLeft, margin).set(MarginRight, margin)
+    }
+
+    /// Sets horizontal margin as a percentage of the parent container width.
+    pub fn margin_horiz_pct(self, margin: f64) -> Self {
+        self.margin_horiz(margin.pct())
+    }
+
+    /// Sets `margin_top` and `margin_bottom` to `margin`
+    pub fn margin_vert(self, margin: impl Into<LengthAuto>) -> Self {
+        let margin = margin.into();
+        self.set(MarginTop, margin).set(MarginBottom, margin)
+    }
+
+    /// Sets vertical margin as a percentage of the parent container width.
+    pub fn margin_vert_pct(self, margin: f64) -> Self {
+        self.margin_vert(margin.pct())
+    }
+
+    /// Applies a complete padding configuration to the view.
+    pub fn apply_padding(self, padding: Padding) -> Self {
+        let mut style = self;
+        if let Some(left) = padding.left {
+            style = style.set(PaddingLeft, left);
+        }
+        if let Some(top) = padding.top {
+            style = style.set(PaddingTop, top);
+        }
+        if let Some(right) = padding.right {
+            style = style.set(PaddingRight, right);
+        }
+        if let Some(bottom) = padding.bottom {
+            style = style.set(PaddingBottom, bottom);
+        }
+        style
+    }
+    /// Applies a complete margin configuration to the view.
+    pub fn apply_margin(self, margin: Margin) -> Self {
+        let mut style = self;
+        if let Some(left) = margin.left {
+            style = style.set(MarginLeft, left);
+        }
+        if let Some(top) = margin.top {
+            style = style.set(MarginTop, top);
+        }
+        if let Some(right) = margin.right {
+            style = style.set(MarginRight, right);
+        }
+        if let Some(bottom) = margin.bottom {
+            style = style.set(MarginBottom, bottom);
+        }
+        style
+    }
+
+    /// Sets the border radius for all corners of the view.
+    pub fn border_radius(self, radius: impl Into<Length>) -> Self {
+        let radius = radius.into();
+        self.set(BorderTopLeftRadius, radius)
+            .set(BorderTopRightRadius, radius)
+            .set(BorderBottomLeftRadius, radius)
+            .set(BorderBottomRightRadius, radius)
+    }
+
+    /// Applies a complete border configuration to the view.
+    pub fn apply_border(self, border: Border) -> Self {
+        let mut style = self;
+        if let Some(left) = border.left {
+            style = style.set(BorderLeft, left);
+        }
+        if let Some(top) = border.top {
+            style = style.set(BorderTop, top);
+        }
+        if let Some(right) = border.right {
+            style = style.set(BorderRight, right);
+        }
+        if let Some(bottom) = border.bottom {
+            style = style.set(BorderBottom, bottom);
+        }
+        style
+    }
+    /// Applies a complete border color configuration to the view.
+    pub fn apply_border_color(self, border_color: BorderColor) -> Self {
+        let mut style = self;
+        if let Some(left) = border_color.left {
+            style = style.set(BorderLeftColor, Some(left));
+        }
+        if let Some(top) = border_color.top {
+            style = style.set(BorderTopColor, Some(top));
+        }
+        if let Some(right) = border_color.right {
+            style = style.set(BorderRightColor, Some(right));
+        }
+        if let Some(bottom) = border_color.bottom {
+            style = style.set(BorderBottomColor, Some(bottom));
+        }
+        style
+    }
+    /// Applies a complete border radius configuration to the view.
+    pub fn apply_border_radius(self, border_radius: BorderRadius) -> Self {
+        let mut style = self;
+        if let Some(top_left) = border_radius.top_left {
+            style = style.set(BorderTopLeftRadius, top_left);
+        }
+        if let Some(top_right) = border_radius.top_right {
+            style = style.set(BorderTopRightRadius, top_right);
+        }
+        if let Some(bottom_left) = border_radius.bottom_left {
+            style = style.set(BorderBottomLeftRadius, bottom_left);
+        }
+        if let Some(bottom_right) = border_radius.bottom_right {
+            style = style.set(BorderBottomRightRadius, bottom_right);
+        }
+        style
+    }
+
+    /// Sets the left inset as a percentage of the parent container width.
+    pub fn inset_left_pct(self, inset: f64) -> Self {
+        self.inset_left(inset.pct())
+    }
+
+    /// Sets the right inset as a percentage of the parent container width.
+    pub fn inset_right_pct(self, inset: f64) -> Self {
+        self.inset_right(inset.pct())
+    }
+
+    /// Sets the top inset as a percentage of the parent container height.
+    pub fn inset_top_pct(self, inset: f64) -> Self {
+        self.inset_top(inset.pct())
+    }
+
+    /// Sets the bottom inset as a percentage of the parent container height.
+    pub fn inset_bottom_pct(self, inset: f64) -> Self {
+        self.inset_bottom(inset.pct())
+    }
+
+    /// Sets all insets (left, top, right, bottom) to the same value.
+    pub fn inset(self, inset: impl Into<LengthAuto>) -> Self {
+        let inset = inset.into();
+        self.inset_left(inset)
+            .inset_top(inset)
+            .inset_right(inset)
+            .inset_bottom(inset)
+    }
+
+    /// Sets all insets as percentages of the parent container.
+    pub fn inset_pct(self, inset: f64) -> Self {
+        let inset = inset.pct();
+        self.inset_left(inset)
+            .inset_top(inset)
+            .inset_right(inset)
+            .inset_bottom(inset)
+    }
+
+    /// Specifies shadow blur. The larger this value, the bigger the blur,
+    /// so the shadow becomes bigger and lighter.
+    pub fn box_shadow_blur(self, blur_radius: impl Into<Length>) -> Self {
+        let mut value = self.get(BoxShadowProp);
+        if let Some(v) = value.first_mut() {
+            v.blur_radius = blur_radius.into();
+        } else {
+            value.push(BoxShadow {
+                blur_radius: blur_radius.into(),
+                ..Default::default()
+            });
+        }
+        self.set(BoxShadowProp, value)
+    }
+
+    /// Specifies color for the shadow.
+    pub fn box_shadow_color(self, color: Color) -> Self {
+        let mut value = self.get(BoxShadowProp);
+        if let Some(v) = value.first_mut() {
+            v.color = color;
+        } else {
+            value.push(BoxShadow {
+                color,
+                ..Default::default()
+            });
+        }
+        self.set(BoxShadowProp, value)
+    }
+
+    /// Specifies shadow blur spread. Positive values will cause the shadow
+    /// to expand and grow bigger, negative values will cause the shadow to shrink.
+    pub fn box_shadow_spread(self, spread: impl Into<Length>) -> Self {
+        let mut value = self.get(BoxShadowProp);
+        if let Some(v) = value.first_mut() {
+            v.spread = spread.into();
+        } else {
+            value.push(BoxShadow {
+                spread: spread.into(),
+                ..Default::default()
+            });
+        }
+        self.set(BoxShadowProp, value)
+    }
+
+    /// Applies a shadow for the stylized view. Use [BoxShadow] builder
+    /// to construct each shadow.
+    /// ```rust
+    /// use floem_style::{BoxShadow, Style};
+    /// use peniko::color::palette::css;
+    ///
+    /// let _ = Style::new().apply_box_shadows(vec![
+    ///    BoxShadow::new()
+    ///        .color(css::BLACK)
+    ///        .top_offset(5.)
+    ///        .bottom_offset(-30.)
+    ///        .right_offset(-20.)
+    ///        .left_offset(10.)
+    ///        .blur_radius(5.)
+    ///        .spread(10.)
+    /// ]);
+    /// ```
+    /// ### Info
+    /// If you only specify one shadow on the view, use standard style methods directly
+    /// on [Style] struct:
+    /// ```rust
+    /// use floem_style::Style;
+    ///
+    /// let _ = Style::new()
+    ///     .box_shadow_top_offset(-5.)
+    ///     .box_shadow_bottom_offset(30.)
+    ///     .box_shadow_right_offset(20.)
+    ///     .box_shadow_left_offset(-10.)
+    ///     .box_shadow_spread(1.)
+    ///     .box_shadow_blur(3.);
+    /// ```
+    pub fn apply_box_shadows(self, shadow: impl Into<SmallVec<[BoxShadow; 3]>>) -> Self {
+        self.set(BoxShadowProp, shadow.into())
+    }
+
+    /// Specifies the offset on horizontal axis.
+    /// Negative offset value places the shadow to the left of the view.
+    pub fn box_shadow_h_offset(self, h_offset: impl Into<Length>) -> Self {
+        let mut value = self.get(BoxShadowProp);
+        let offset = h_offset.into();
+        if let Some(v) = value.first_mut() {
+            v.left_offset = -offset;
+            v.right_offset = offset;
+        } else {
+            value.push(BoxShadow {
+                left_offset: -offset,
+                right_offset: offset,
+                ..Default::default()
+            });
+        }
+        self.set(BoxShadowProp, value)
+    }
+
+    /// Specifies the offset on vertical axis.
+    /// Negative offset value places the shadow above the view.
+    pub fn box_shadow_v_offset(self, v_offset: impl Into<Length>) -> Self {
+        let mut value = self.get(BoxShadowProp);
+        let offset = v_offset.into();
+        if let Some(v) = value.first_mut() {
+            v.top_offset = -offset;
+            v.bottom_offset = offset;
+        } else {
+            value.push(BoxShadow {
+                top_offset: -offset,
+                bottom_offset: offset,
+                ..Default::default()
+            });
+        }
+        self.set(BoxShadowProp, value)
+    }
+
+    /// Specifies the offset of the left edge.
+    pub fn box_shadow_left_offset(self, left_offset: impl Into<Length>) -> Self {
+        let mut value = self.get(BoxShadowProp);
+        if let Some(v) = value.first_mut() {
+            v.left_offset = left_offset.into();
+        } else {
+            value.push(BoxShadow {
+                left_offset: left_offset.into(),
+                ..Default::default()
+            });
+        }
+        self.set(BoxShadowProp, value)
+    }
+
+    /// Specifies the offset of the right edge.
+    pub fn box_shadow_right_offset(self, right_offset: impl Into<Length>) -> Self {
+        let mut value = self.get(BoxShadowProp);
+        if let Some(v) = value.first_mut() {
+            v.right_offset = right_offset.into();
+        } else {
+            value.push(BoxShadow {
+                right_offset: right_offset.into(),
+                ..Default::default()
+            });
+        }
+        self.set(BoxShadowProp, value)
+    }
+
+    /// Specifies the offset of the top edge.
+    pub fn box_shadow_top_offset(self, top_offset: impl Into<Length>) -> Self {
+        let mut value = self.get(BoxShadowProp);
+        if let Some(v) = value.first_mut() {
+            v.top_offset = top_offset.into();
+        } else {
+            value.push(BoxShadow {
+                top_offset: top_offset.into(),
+                ..Default::default()
+            });
+        }
+        self.set(BoxShadowProp, value)
+    }
+
+    /// Specifies the offset of the bottom edge.
+    pub fn box_shadow_bottom_offset(self, bottom_offset: impl Into<Length>) -> Self {
+        let mut value = self.get(BoxShadowProp);
+        if let Some(v) = value.first_mut() {
+            v.bottom_offset = bottom_offset.into();
+        } else {
+            value.push(BoxShadow {
+                bottom_offset: bottom_offset.into(),
+                ..Default::default()
+            });
+        }
+        self.set(BoxShadowProp, value)
+    }
+
+    /// Sets the font weight to bold.
+    pub fn font_bold(self) -> Self {
+        self.font_weight(FontWeightProp::BOLD)
+    }
+
+    /// Enables pointer events for the view (allows mouse interaction).
+    pub fn pointer_events_auto(self) -> Self {
+        self.pointer_events(PointerEvents::Auto)
+    }
+
+    /// Disables pointer events for the view (mouse events pass through).
+    pub fn pointer_events_none(self) -> Self {
+        self.pointer_events(PointerEvents::None)
+    }
+
+    /// Sets text overflow to show ellipsis (...) when text is clipped.
+    pub fn text_ellipsis(self) -> Self {
+        self.text_overflow(TextOverflow::NoWrap(NoWrapOverflow::Ellipsis))
+    }
+
+    /// Sets text overflow to clip text without showing ellipsis.
+    pub fn text_clip(self) -> Self {
+        self.text_overflow(TextOverflow::NoWrap(NoWrapOverflow::Clip))
+    }
+
+    /// Sets text to wrap using Parley's normal overflow-wrap behavior.
+    pub fn text_wrap(self) -> Self {
+        self.text_overflow(TextOverflow::Wrap {
+            overflow_wrap: OverflowWrap::Normal,
+            word_break: WordBreakStrength::Normal,
+        })
+    }
+
+    /// Sets the view to absolute positioning.
+    pub fn absolute(self) -> Self {
+        self.position(taffy::style::Position::Absolute)
+    }
+
+    /// Sets the view to fixed positioning relative to the viewport.
+    ///
+    /// This is similar to CSS `position: fixed`. The view will:
+    /// - Be positioned relative to the window viewport
+    /// - Use `inset` properties relative to the viewport
+    /// - Have percentage sizes relative to the viewport
+    /// - Be painted above all other content
+    ///
+    /// # Example
+    /// ```rust
+    /// use floem_style::Style;
+    ///
+    /// // Create a full-screen overlay
+    /// let _ = Style::new().fixed().inset(0.0);
+    /// ```
+    pub fn fixed(self) -> Self {
+        self.position(taffy::style::Position::Absolute)
+            .is_fixed(true)
+    }
+
+    /// Aligns flex items to stretch and fill the cross axis.
+    pub fn items_stretch(self) -> Self {
+        self.align_items(taffy::style::AlignItems::Stretch)
+    }
+
+    /// Aligns flex items to the start of the cross axis.
+    pub fn items_start(self) -> Self {
+        self.align_items(taffy::style::AlignItems::FlexStart)
+    }
+
+    /// Defines the alignment along the cross axis as Centered
+    pub fn items_center(self) -> Self {
+        self.align_items(taffy::style::AlignItems::Center)
+    }
+
+    /// Aligns flex items to the end of the cross axis.
+    pub fn items_end(self) -> Self {
+        self.align_items(taffy::style::AlignItems::FlexEnd)
+    }
+
+    /// Aligns flex items along their baselines.
+    pub fn items_baseline(self) -> Self {
+        self.align_items(taffy::style::AlignItems::Baseline)
+    }
+
+    /// Aligns flex items to the start of the main axis.
+    pub fn justify_start(self) -> Self {
+        self.justify_content(taffy::style::JustifyContent::FlexStart)
+    }
+
+    /// Aligns flex items to the end of the main axis.
+    pub fn justify_end(self) -> Self {
+        self.justify_content(taffy::style::JustifyContent::FlexEnd)
+    }
+
+    /// Defines the alignment along the main axis as Centered
+    pub fn justify_center(self) -> Self {
+        self.justify_content(taffy::style::JustifyContent::Center)
+    }
+
+    /// Distributes flex items with space between them.
+    pub fn justify_between(self) -> Self {
+        self.justify_content(taffy::style::JustifyContent::SpaceBetween)
+    }
+
+    /// Distributes flex items with space around them.
+    pub fn justify_around(self) -> Self {
+        self.justify_content(taffy::style::JustifyContent::SpaceAround)
+    }
+
+    /// Distributes flex items with equal space around them.
+    pub fn justify_evenly(self) -> Self {
+        self.justify_content(taffy::style::JustifyContent::SpaceEvenly)
+    }
+
+    /// Hides the view from view and layout.
+    pub fn hide(self) -> Self {
+        self.set(DisplayProp, Display::None)
+    }
+
+    /// Sets the view to use flexbox layout.
+    pub fn flex(self) -> Self {
+        self.display(taffy::style::Display::Flex)
+    }
+
+    /// Sets the view to use grid layout.
+    pub fn grid(self) -> Self {
+        self.display(taffy::style::Display::Grid)
+    }
+
+    /// Sets flex direction to row (horizontal).
+    pub fn flex_row(self) -> Self {
+        self.flex_direction(taffy::style::FlexDirection::Row)
+    }
+
+    /// Sets flex direction to column (vertical).
+    pub fn flex_col(self) -> Self {
+        self.flex_direction(taffy::style::FlexDirection::Column)
+    }
+
+    /// Sets uniform scaling for both X and Y axes.
+    pub fn scale(self, scale: impl Into<Pct>) -> Self {
+        let val = scale.into();
+        self.scale_x(val).scale_y(val)
+    }
+}
+
+// ============================================================================
+// ExprStyle convenience setters that mirror Style's but take ContextValue<T>.
+// Moved from floem::style::ExprStyle's inherent impl block.
+// ============================================================================
+
+use crate::context_value::ContextValue;
+
+impl ExprStyle {
+    /// Sets the font size for text content.
+    pub fn font_size<T>(self, size: ContextValue<T>) -> Self
+    where
+        T: Into<Pt> + 'static,
+    {
+        let px = size.map(|s| s.into().0);
+        self.set_context(FontSize, px)
+    }
+
+    pub fn size<W, H>(self, width: ContextValue<W>, height: ContextValue<H>) -> Self
+    where
+        W: Into<LengthAuto> + 'static,
+        H: Into<LengthAuto> + 'static,
+    {
+        self.width(width).height(height)
+    }
+
+    pub fn absolute(self) -> Self {
+        self.set(PositionProp, Position::Absolute)
+    }
+
+    pub fn flex_row(self) -> Self {
+        self.set(FlexDirectionProp, FlexDirection::Row)
+    }
+
+    pub fn margin<T>(self, margin: ContextValue<T>) -> Self
+    where
+        T: Into<LengthAuto> + 'static,
+    {
+        let margin = margin.map(Into::into);
+        self.set(MarginLeft, margin.clone())
+            .set(MarginTop, margin.clone())
+            .set(MarginRight, margin.clone())
+            .set(MarginBottom, margin)
+    }
+
+    pub fn border_color<T>(self, color: ContextValue<T>) -> Self
+    where
+        T: Into<Brush> + 'static,
+    {
+        let color = color.map(|color| Some(color.into()));
+        self.set(BorderLeftColor, color.clone())
+            .set(BorderTopColor, color.clone())
+            .set(BorderRightColor, color.clone())
+            .set(BorderBottomColor, color)
+    }
+
+    pub fn border_radius<T>(self, radius: ContextValue<T>) -> Self
+    where
+        T: Into<Length> + 'static,
+    {
+        let radius = radius.map(Into::into);
+        self.set(BorderTopLeftRadius, radius.clone())
+            .set(BorderTopRightRadius, radius.clone())
+            .set(BorderBottomLeftRadius, radius.clone())
+            .set(BorderBottomRightRadius, radius)
+    }
+
+    pub fn border<T>(self, width: ContextValue<T>) -> Self
+    where
+        T: Into<Pt> + 'static,
+    {
+        let stroke = width.map(|width| Stroke::new(width.into().0));
+        self.set(BorderLeft, stroke.clone())
+            .set(BorderTop, stroke.clone())
+            .set(BorderRight, stroke.clone())
+            .set(BorderBottom, stroke)
+    }
+
+    pub fn border_top<T>(self, width: ContextValue<T>) -> Self
+    where
+        T: Into<Pt> + 'static,
+    {
+        self.set(BorderTop, width.map(|width| Stroke::new(width.into().0)))
+    }
+
+    pub fn items_center(self) -> Self {
+        self.set(AlignItemsProp, Some(AlignItems::Center))
+    }
+
+    pub fn justify_center(self) -> Self {
+        self.set(
+            JustifyContentProp,
+            Some(taffy::style::JustifyContent::Center),
+        )
+    }
+
+    pub fn selected(self, style: impl FnOnce(ExprStyle) -> ExprStyle) -> Self {
+        self.merge(Style::default().selected(|s| style(s.into()).into()))
+    }
+
+    pub fn drag(self, style: impl FnOnce(ExprStyle) -> ExprStyle) -> Self {
+        self.merge(Style::default().drag(|s| style(s.into()).into()))
+    }
+
+    pub fn file_hover(self, style: impl FnOnce(ExprStyle) -> ExprStyle) -> Self {
+        self.merge(Style::default().file_hover(|s| style(s.into()).into()))
+    }
+
+    pub fn padding<T>(self, padding: ContextValue<T>) -> Self
+    where
+        T: Into<Length> + 'static,
+    {
+        let padding = padding.map(Into::into);
+        self.set(PaddingLeft, padding.clone())
+            .set(PaddingTop, padding.clone())
+            .set(PaddingRight, padding.clone())
+            .set(PaddingBottom, padding)
+    }
+
+    pub fn padding_horiz<T>(self, padding: ContextValue<T>) -> Self
+    where
+        T: Into<Length> + 'static,
+    {
+        let padding = padding.map(Into::into);
+        self.set(PaddingLeft, padding.clone())
+            .set(PaddingRight, padding)
+    }
+
+    pub fn padding_vert<T>(self, padding: ContextValue<T>) -> Self
+    where
+        T: Into<Length> + 'static,
+    {
+        let padding = padding.map(Into::into);
+        self.set(PaddingTop, padding.clone())
+            .set(PaddingBottom, padding)
+    }
+
+    pub fn gap<T>(self, gap: ContextValue<T>) -> Self
+    where
+        T: Into<Length> + 'static,
+    {
+        let gap = gap.map(Into::into);
+        self.set(ColGap, gap.clone()).set(RowGap, gap)
+    }
+
+    pub fn custom<CS>(self, custom: impl FnOnce(CS) -> CS) -> Self
+    where
+        CS: Default + Clone + Into<Style> + From<Style>,
+    {
+        self.merge(custom(CS::default()).into())
+    }
+
+    pub fn apply_border_radius(self, border_radius: BorderRadius) -> Self {
+        self.merge(Style::new().apply_border_radius(border_radius))
+    }
+
+    pub fn apply_box_shadows(self, shadow: impl Into<SmallVec<[BoxShadow; 3]>>) -> Self {
+        self.set(BoxShadowProp, shadow.into())
+    }
+
+    pub fn transition_background(self, transition: Transition) -> Self {
+        self.merge(Style::new().transition_background(transition))
+    }
+
+    pub fn border_bottom(self, width: impl Into<Pt>) -> Self {
+        self.set(BorderBottom, Stroke::new(width.into().0))
+    }
+
+    pub fn outline(self, width: impl Into<Pt>) -> Self {
+        self.set(Outline, Stroke::new(width.into().0))
+    }
+}
diff --git a/src/style/cache.rs b/style/src/cache.rs
similarity index 96%
rename from src/style/cache.rs
rename to style/src/cache.rs
index a326080a3..336bf9342 100644
--- a/src/style/cache.rs
+++ b/style/src/cache.rs
@@ -26,14 +26,13 @@
 
 use std::hash::{Hash, Hasher};
 
-use super::cx::InheritedInteractionCx;
-use super::selectors::StyleSelectors;
-
 use rustc_hash::{FxHashMap, FxHasher};
 
-use super::Style;
-use crate::layout::responsive::ScreenSizeBp;
-use crate::style::{InteractionState, StyleClassRef};
+use crate::interaction::{InheritedInteractionCx, InteractionState};
+use crate::props::{StyleClassRef, StyleKeyInfo};
+use crate::responsive::ScreenSizeBp;
+use crate::selectors::StyleSelectors;
+use crate::style::Style;
 
 /// Maximum number of hash buckets in the cache.
 const MAX_CACHE_BUCKETS: usize = 256;
@@ -133,7 +132,9 @@ impl Hash for StyleCacheKey {
     }
 }
 
-/// The result of a cache hit, containing all outputs of `compute_combined()`.
+/// The result of a cache hit, carrying the cascade outputs that would
+/// otherwise be recomputed via [`resolve_nested_maps`](crate::resolve_nested_maps).
+#[derive(Debug)]
 pub struct CacheHit {
     /// The resolved combined style.
     pub combined_style: Style,
@@ -144,6 +145,7 @@ pub struct CacheHit {
 }
 
 /// A single cached entry with parent context for validation.
+#[derive(Debug)]
 struct CacheEntry {
     /// The resolved combined style.
     combined_style: Style,
@@ -163,6 +165,7 @@ struct CacheEntry {
 }
 
 /// A bucket that can hold multiple entries (handles hash collisions).
+#[derive(Debug)]
 struct CacheBucket {
     entries: Vec<CacheEntry>,
 }
@@ -259,6 +262,7 @@ impl CacheBucket {
 ///
 /// Unlike a simple hash cache, this validates parent inherited properties
 /// on lookup to ensure correctness (matching Chromium's MatchedPropertiesCache).
+#[derive(Debug)]
 pub struct StyleCache {
     /// The cached style buckets, keyed by style hash.
     cache: FxHashMap<StyleCacheKey, CacheBucket>,
@@ -270,7 +274,7 @@ pub struct StyleCache {
     stats: CacheStatsMut,
 }
 
-#[derive(Default)]
+#[derive(Default, Debug)]
 struct CacheStatsMut {
     hits: u64,
     misses: u64,
@@ -480,41 +484,6 @@ fn hash_classes(classes: &[StyleClassRef]) -> u64 {
     hasher.finish()
 }
 
-impl InteractionState {
-    /// Pack interaction state into bits for efficient hashing.
-    fn to_bits(self) -> u16 {
-        let mut bits = 0u16;
-        if self.is_hovered {
-            bits |= 1 << 0;
-        }
-        if self.is_selected {
-            bits |= 1 << 1;
-        }
-        if self.is_disabled {
-            bits |= 1 << 2;
-        }
-        if self.is_focused {
-            bits |= 1 << 3;
-        }
-        if self.is_active {
-            bits |= 1 << 4;
-        }
-        if self.is_dark_mode {
-            bits |= 1 << 5;
-        }
-        if self.is_file_hover {
-            bits |= 1 << 6;
-        }
-        if self.using_keyboard_navigation {
-            bits |= 1 << 7;
-        }
-        if self.is_focus_within {
-            bits |= 1 << 8;
-        }
-        bits
-    }
-}
-
 impl Style {
     /// Compute a content hash of this style for cache keying.
     ///
@@ -522,8 +491,6 @@ impl Style {
     /// value-based hashing. Identical style values will produce identical
     /// hashes, enabling effective cache sharing.
     pub fn content_hash(&self) -> u64 {
-        use crate::style::props::StyleKeyInfo;
-
         // Use XOR-based order-independent hashing to avoid Vec allocation + sort.
         // Each entry is independently hashed and XOR'd into the accumulator.
         // We mix in the entry count separately to distinguish e.g. {A} from {A, B}
@@ -567,8 +534,6 @@ impl Style {
     /// Two styles with different inherited values cannot share a cache entry
     /// even if their non-inherited properties are identical.
     pub fn inherited_equal(&self, other: &Style) -> bool {
-        use crate::style::props::StyleKeyInfo;
-
         // Compare only inherited properties
         for (key, value) in self.map.iter() {
             if let StyleKeyInfo::Prop(prop_info) = key.info
@@ -962,7 +927,7 @@ mod tests {
 
     #[test]
     fn test_inherited_equal_with_actual_inherited_props() {
-        use crate::style::TextColor;
+        use crate::TextColor;
 
         let style1 = Style::new().set(TextColor, Some(css::RED));
         let style2 = Style::new().set(TextColor, Some(css::BLUE));
diff --git a/style/src/cascade.rs b/style/src/cascade.rs
new file mode 100644
index 000000000..4dc65a319
--- /dev/null
+++ b/style/src/cascade.rs
@@ -0,0 +1,517 @@
+//! Style cascade and selector resolution.
+//!
+//! This module holds the nested-map resolution pipeline ([`resolve_nested_maps`]
+//! and friends), the responsive/structural selector containers, and the
+//! `selector_xs..xxl` responsive breakpoint keys referenced by
+//! `resolve_selectors`.
+
+use std::any::Any;
+use std::rc::Rc;
+
+use rustc_hash::FxHashMap;
+use smallvec::SmallVec;
+
+use crate::interaction::InteractionState;
+use crate::props::{StyleClassRef, StyleKey, RESPONSIVE_SELECTORS_INFO, STRUCTURAL_SELECTORS_INFO};
+use crate::responsive::{GridBreakpoints, ScreenSize, ScreenSizeBp};
+use crate::selectors::{StructuralSelector, StyleSelector, StyleSelectors};
+use crate::style::Style;
+use crate::style_key_selector;
+use crate::unit::Pt;
+
+#[doc(hidden)]
+pub type StructuralSelectorRules = SmallVec<[(StructuralSelector, Rc<Style>); 2]>;
+#[doc(hidden)]
+pub type ResponsiveSelectorRules = SmallVec<[(ResponsiveSelector, Rc<Style>); 2]>;
+
+#[doc(hidden)]
+pub fn fx_hash_map_with_capacity<K, V>(capacity: usize) -> FxHashMap<K, V> {
+    FxHashMap::with_capacity_and_hasher(capacity, Default::default())
+}
+
+#[doc(hidden)]
+pub fn take_any<T: Any + Clone>(value: Rc<dyn Any>) -> T {
+    Rc::downcast::<T>(value)
+        .map(|rc| Rc::try_unwrap(rc).unwrap_or_else(|rc| (*rc).clone()))
+        .unwrap_or_else(|_| panic!("unexpected style map payload type"))
+}
+
+#[derive(Clone)]
+pub struct StructuralSelectors(#[doc(hidden)] pub StructuralSelectorRules);
+
+#[derive(Clone)]
+pub struct ResponsiveSelectors(#[doc(hidden)] pub ResponsiveSelectorRules);
+
+#[derive(Clone, Copy, Debug, PartialEq)]
+pub enum ResponsiveSelector {
+    ScreenSize(ScreenSize),
+    MinWidth(Pt),
+    MaxWidth(Pt),
+    WidthRange { min: Pt, max: Pt },
+}
+
+impl ResponsiveSelector {
+    pub(crate) fn matches(&self, width: f64) -> bool {
+        match self {
+            ResponsiveSelector::ScreenSize(size) => {
+                let bp = GridBreakpoints::default().get_width_bp(width);
+                size.breakpoints().contains(&bp)
+            }
+            ResponsiveSelector::MinWidth(min) => width >= min.0,
+            ResponsiveSelector::MaxWidth(max) => width <= max.0,
+            ResponsiveSelector::WidthRange { min, max } => width >= min.0 && width <= max.0,
+        }
+    }
+}
+
+style_key_selector!(selector_xs, StyleSelectors::empty().responsive());
+style_key_selector!(selector_sm, StyleSelectors::empty().responsive());
+style_key_selector!(selector_md, StyleSelectors::empty().responsive());
+style_key_selector!(selector_lg, StyleSelectors::empty().responsive());
+style_key_selector!(selector_xl, StyleSelectors::empty().responsive());
+style_key_selector!(selector_xxl, StyleSelectors::empty().responsive());
+
+pub(crate) fn screen_size_bp_to_key(breakpoint: ScreenSizeBp) -> StyleKey {
+    match breakpoint {
+        ScreenSizeBp::Xs => selector_xs(),
+        ScreenSizeBp::Sm => selector_sm(),
+        ScreenSizeBp::Md => selector_md(),
+        ScreenSizeBp::Lg => selector_lg(),
+        ScreenSizeBp::Xl => selector_xl(),
+        ScreenSizeBp::Xxl => selector_xxl(),
+    }
+}
+
+pub(crate) fn structural_selectors_key() -> StyleKey {
+    StyleKey {
+        info: &STRUCTURAL_SELECTORS_INFO,
+    }
+}
+
+pub(crate) fn responsive_selectors_key() -> StyleKey {
+    StyleKey {
+        info: &RESPONSIVE_SELECTORS_INFO,
+    }
+}
+
+/// the bool in the return is a classes_applied flag. if a new class has been applied, we need to do a request_style_recursive
+pub fn resolve_nested_maps(
+    style: Style,
+    interact_state: &mut InteractionState,
+    screen_size_bp: ScreenSizeBp,
+    classes: &[StyleClassRef],
+    inherited_context: &Style,
+    class_context: &Style,
+) -> (Style, StyleSelectors) {
+    // TODO: update interact state as each map is resolved
+
+    let mut selectors = StyleSelectors::empty();
+
+    let class_style = resolve_classes(
+        classes,
+        interact_state,
+        screen_size_bp,
+        class_context,
+        &mut selectors,
+    );
+    selectors |= class_style.selectors();
+    let view_style = resolve_style(style, interact_state, screen_size_bp, &mut selectors);
+    let result = class_style
+        .apply(view_style)
+        .with_inherited_context(inherited_context);
+    result.run_deferred_effects();
+    (result, selectors)
+}
+
+fn resolve_classes(
+    classes: &[StyleClassRef],
+    interact_state: &InteractionState,
+    screen_size_bp: ScreenSizeBp,
+    class_context: &Style,
+    selectors: &mut StyleSelectors,
+) -> Style {
+    let mut result = Style::with_capacity(classes.len());
+
+    for class in classes {
+        if let Some(map) = class_context.get_nested_map(class.key) {
+            let resolved = resolve_style(map.clone(), interact_state, screen_size_bp, selectors);
+            result.apply_mut(&resolved);
+        }
+    }
+
+    result
+}
+
+fn resolve_style(
+    style: Style,
+    interact_state: &InteractionState,
+    screen_size_bp: ScreenSizeBp,
+    selectors: &mut StyleSelectors,
+) -> Style {
+    resolve_selectors(style, interact_state, screen_size_bp, selectors)
+}
+
+fn resolve_selectors(
+    mut style: Style,
+    interact_state: &InteractionState,
+    screen_size_bp: ScreenSizeBp,
+    selectors: &mut StyleSelectors,
+) -> Style {
+    *selectors |= style.selectors();
+
+    // Validate cached selectors in debug builds
+    #[cfg(debug_assertions)]
+    debug_assert!(
+        style
+            .cached_selectors
+            .contains(style.compute_selectors_slow()),
+        "cached_selectors {:?} missing bits from computed {:?}",
+        style.cached_selectors,
+        style.compute_selectors_slow()
+    );
+
+    const MAX_DEPTH: u32 = 20;
+    let mut depth = 0;
+
+    loop {
+        if depth >= MAX_DEPTH {
+            break;
+        }
+        depth += 1;
+
+        let mut changed = false;
+
+        // Apply structural selectors (:first-child, :last-child, :nth-child(...))
+        // before state selectors so nested :hover/:focus inside structural maps can
+        // be discovered and applied in the same resolution loop.
+        if let Some(structural_rules) = extract_structural_selectors(&mut style) {
+            for (selector, map) in structural_rules {
+                if selector.matches(interact_state.child_index, interact_state.sibling_count) {
+                    style.apply_mut(map.as_ref());
+                    changed = true;
+                }
+            }
+        }
+
+        // Apply responsive selectors (parameterized)
+        if let Some(responsive_rules) = extract_responsive_selectors(&mut style) {
+            for (selector, map) in responsive_rules {
+                if selector.matches(interact_state.window_width) {
+                    style.apply_mut(map.as_ref());
+                    changed = true;
+                }
+            }
+        }
+
+        // Helper to apply a nested map and collect any context mappings from it
+        let apply_nested = |style: &mut Style, key: StyleKey| -> bool {
+            if let Some(map) = style.get_nested_map(key) {
+                style.apply_mut(&map);
+                style.remove_nested_map(key);
+                true
+            } else {
+                false
+            }
+        };
+
+        // Apply screen size breakpoints
+        if apply_nested(&mut style, screen_size_bp_to_key(screen_size_bp)) {
+            changed = true;
+        }
+
+        // DarkMode
+        if interact_state.is_dark_mode && apply_nested(&mut style, StyleSelector::DarkMode.to_key())
+        {
+            changed = true;
+        }
+
+        // Disabled state
+        if interact_state.is_disabled || style.get(crate::builtin_props::Disabled) {
+            if apply_nested(&mut style, StyleSelector::Disabled.to_key()) {
+                changed = true;
+            }
+        } else {
+            // Selected
+            if (interact_state.is_selected || style.get(crate::builtin_props::Selected))
+                && apply_nested(&mut style, StyleSelector::Selected.to_key())
+            {
+                changed = true;
+            }
+
+            // Hover
+            if interact_state.is_hovered && apply_nested(&mut style, StyleSelector::Hover.to_key())
+            {
+                changed = true;
+            }
+
+            // File Hover
+            if interact_state.is_file_hover
+                && apply_nested(&mut style, StyleSelector::FileHover.to_key())
+            {
+                changed = true;
+            }
+
+            // Focus states
+            if interact_state.is_focused && apply_nested(&mut style, StyleSelector::Focus.to_key())
+            {
+                changed = true;
+            }
+
+            if interact_state.is_focus_within
+                && apply_nested(&mut style, StyleSelector::FocusWithin.to_key())
+            {
+                changed = true;
+            }
+
+            if interact_state.is_focused && interact_state.using_keyboard_navigation {
+                if apply_nested(&mut style, StyleSelector::FocusVisible.to_key()) {
+                    changed = true;
+                }
+
+                if interact_state.is_active
+                    && apply_nested(&mut style, StyleSelector::Active.to_key())
+                {
+                    changed = true;
+                }
+            }
+
+            // Active (mouse)
+            if interact_state.is_active
+                && !interact_state.using_keyboard_navigation
+                && apply_nested(&mut style, StyleSelector::Active.to_key())
+            {
+                changed = true;
+            }
+        }
+
+        if !changed {
+            break;
+        }
+    }
+
+    style
+}
+
+pub(crate) fn extract_structural_selectors(style: &mut Style) -> Option<StructuralSelectorRules> {
+    let key = structural_selectors_key();
+    style
+        .map_mut()
+        .remove(&key)
+        .map(|rc| take_any::<StructuralSelectors>(rc).0)
+}
+
+pub(crate) fn extract_responsive_selectors(style: &mut Style) -> Option<ResponsiveSelectorRules> {
+    let key = responsive_selectors_key();
+    style
+        .map_mut()
+        .remove(&key)
+        .map(|rc| take_any::<ResponsiveSelectors>(rc).0)
+}
+
+#[cfg(test)]
+mod tests {
+    //! Standalone cascade tests exercising `floem_style` without any floem/view
+    //! scaffolding. These validate that the extracted engine can resolve
+    //! nested selector maps, classes, and structural selectors using only
+    //! the crate's public API.
+
+    use super::*;
+    use crate::builtin_props::{Background, Disabled, FontSize, TextColor};
+    use crate::props::StyleClass;
+    use crate::style_class;
+    use peniko::color::palette::css;
+
+    fn default_bp() -> ScreenSizeBp {
+        ScreenSizeBp::Xs
+    }
+
+    fn empty_state() -> InteractionState {
+        InteractionState::default()
+    }
+
+    #[test]
+    fn plain_style_passes_through_with_no_selectors() {
+        let style = Style::new().background(css::RED);
+        let mut state = empty_state();
+        let (resolved, selectors) = resolve_nested_maps(
+            style,
+            &mut state,
+            default_bp(),
+            &[],
+            &Style::new(),
+            &Style::new(),
+        );
+        assert_eq!(resolved.get(Background), Some(css::RED.into()));
+        assert!(selectors.is_empty());
+    }
+
+    #[test]
+    fn hover_nested_map_applies_when_hovered() {
+        let style = Style::new()
+            .background(css::RED)
+            .hover(|s| s.background(css::BLUE));
+
+        // Not hovered → base background wins.
+        let mut state = empty_state();
+        let (resolved, _) = resolve_nested_maps(
+            style.clone(),
+            &mut state,
+            default_bp(),
+            &[],
+            &Style::new(),
+            &Style::new(),
+        );
+        assert_eq!(resolved.get(Background), Some(css::RED.into()));
+
+        // Hovered → hover nested map overrides.
+        let mut state = InteractionState {
+            is_hovered: true,
+            ..Default::default()
+        };
+        let (resolved, selectors) = resolve_nested_maps(
+            style,
+            &mut state,
+            default_bp(),
+            &[],
+            &Style::new(),
+            &Style::new(),
+        );
+        assert_eq!(resolved.get(Background), Some(css::BLUE.into()));
+        assert!(selectors.has(StyleSelector::Hover));
+    }
+
+    #[test]
+    fn disabled_selector_short_circuits_hover() {
+        let style = Style::new()
+            .background(css::RED)
+            .hover(|s| s.background(css::BLUE))
+            .disabled(|s| s.background(css::GRAY));
+
+        // Both hovered and disabled → cascade enters the disabled branch and
+        // skips hover (matching resolve_selectors' design).
+        let mut state = InteractionState {
+            is_hovered: true,
+            is_disabled: true,
+            ..Default::default()
+        };
+        let (resolved, _) = resolve_nested_maps(
+            style,
+            &mut state,
+            default_bp(),
+            &[],
+            &Style::new(),
+            &Style::new(),
+        );
+        assert_eq!(resolved.get(Background), Some(css::GRAY.into()));
+    }
+
+    #[test]
+    fn inherited_prop_resolves_from_context() {
+        let inherited = Style::new().set(TextColor, Some(css::RED));
+        let style = Style::new();
+        let mut state = empty_state();
+        let (resolved, _) = resolve_nested_maps(
+            style,
+            &mut state,
+            default_bp(),
+            &[],
+            &inherited,
+            &Style::new(),
+        );
+        // TextColor is inherited, so resolved should pick it up from the inherited context.
+        assert_eq!(resolved.get(TextColor), Some(css::RED));
+    }
+
+    #[test]
+    fn class_application_merges_class_map_into_result() {
+        style_class!(pub MyClass);
+
+        let class_ctx = Style::new().class(MyClass, |s| s.background(css::GREEN));
+        let base = Style::new().background(css::RED);
+        let mut state = empty_state();
+        let (resolved, _) = resolve_nested_maps(
+            base,
+            &mut state,
+            default_bp(),
+            &[MyClass::class_ref()],
+            &Style::new(),
+            &class_ctx,
+        );
+        // Class resolves first, then base overrides with RED (later application wins).
+        assert_eq!(resolved.get(Background), Some(css::RED.into()));
+    }
+
+    #[test]
+    fn nested_hover_inside_class_applies_when_hovered() {
+        style_class!(pub ButtonClass);
+
+        let class_ctx = Style::new().class(ButtonClass, |s| {
+            s.background(css::RED).hover(|s| s.background(css::BLUE))
+        });
+
+        let base = Style::new();
+
+        // Not hovered → class background wins.
+        let mut state = empty_state();
+        let (resolved, _) = resolve_nested_maps(
+            base.clone(),
+            &mut state,
+            default_bp(),
+            &[ButtonClass::class_ref()],
+            &Style::new(),
+            &class_ctx,
+        );
+        assert_eq!(resolved.get(Background), Some(css::RED.into()));
+
+        // Hovered → hover nested inside class applies.
+        let mut state = InteractionState {
+            is_hovered: true,
+            ..Default::default()
+        };
+        let (resolved, _) = resolve_nested_maps(
+            base,
+            &mut state,
+            default_bp(),
+            &[ButtonClass::class_ref()],
+            &Style::new(),
+            &class_ctx,
+        );
+        assert_eq!(resolved.get(Background), Some(css::BLUE.into()));
+    }
+
+    #[test]
+    fn inherited_font_size_survives_cascade() {
+        let inherited = Style::new().set(FontSize, 20.0);
+        let style = Style::new().background(css::RED);
+        let mut state = empty_state();
+        let (resolved, _) = resolve_nested_maps(
+            style,
+            &mut state,
+            default_bp(),
+            &[],
+            &inherited,
+            &Style::new(),
+        );
+        assert_eq!(resolved.get(FontSize), 20.0);
+    }
+
+    #[test]
+    fn disabled_prop_on_style_enables_disabled_selector() {
+        // Even without interact_state.is_disabled, setting Disabled=true in the
+        // style itself opens the :disabled branch.
+        let style = Style::new()
+            .set(Disabled, true)
+            .background(css::RED)
+            .disabled(|s| s.background(css::GRAY));
+        let mut state = empty_state();
+        let (resolved, _) = resolve_nested_maps(
+            style,
+            &mut state,
+            default_bp(),
+            &[],
+            &Style::new(),
+            &Style::new(),
+        );
+        assert_eq!(resolved.get(Background), Some(css::GRAY.into()));
+    }
+}
diff --git a/src/style/components.rs b/style/src/components.rs
similarity index 56%
rename from src/style/components.rs
rename to style/src/components.rs
index 522243ef5..07f25d39f 100644
--- a/src/style/components.rs
+++ b/style/src/components.rs
@@ -1,70 +1,21 @@
-//! Style component types for borders, shadows, padding, and margins.
+//! Composite style value types.
 //!
-//! This module provides composite style types that represent multi-value
-//! CSS properties like borders and padding.
+//! This module provides multi-value style types like [`Border`], [`Padding`],
+//! [`Margin`], and [`BoxShadow`]. They are data types only. The
+//! `PropDebugView` impls delegate to [`crate::InspectorRender`] for the
+//! actual widget construction, so the view code stays in the `floem` crate.
+
+use std::any::Any;
 
-use floem_renderer::text::FontWeight;
-use parley::style::{OverflowWrap, WordBreakStrength};
 use peniko::color::palette;
 use peniko::kurbo::Stroke;
 use peniko::{Brush, Color};
 
-use crate::theme::StyleThemeExt;
+use crate::debug_view::PropDebugView;
+use crate::inspector_render::InspectorRender;
+use crate::prop_value::StylePropValue;
 use crate::unit::{FontSizeCx, Length, LengthAuto};
-use crate::view::{IntoView, View};
-use crate::views::{ContainerExt, Decorators, Stack, TooltipExt};
-
-use super::values::{StrokeWrap, StylePropValue};
-
-/// Pointer event handling mode
-#[derive(Debug, Clone, Copy, PartialEq, Eq)]
-pub enum PointerEvents {
-    Auto,
-    None,
-}
-
-/// Text overflow behavior
-#[derive(Debug, Clone, Copy, PartialEq, Eq)]
-pub enum TextOverflow {
-    NoWrap(NoWrapOverflow),
-    Wrap {
-        overflow_wrap: OverflowWrap,
-        word_break: WordBreakStrength,
-    },
-}
-
-#[derive(Debug, Clone, Copy, PartialEq, Eq)]
-pub enum NoWrapOverflow {
-    Clip,
-    Ellipsis,
-}
-
-/// Cursor style
-#[derive(Debug, Clone, Copy, PartialEq, Default)]
-pub enum CursorStyle {
-    #[default]
-    Default,
-    Pointer,
-    Progress,
-    Wait,
-    Crosshair,
-    Text,
-    Move,
-    Grab,
-    Grabbing,
-    ColResize,
-    RowResize,
-    WResize,
-    EResize,
-    SResize,
-    NResize,
-    NwResize,
-    NeResize,
-    SwResize,
-    SeResize,
-    NeswResize,
-    NwseResize,
-}
+use crate::values::StrokeWrap;
 
 /// Structure holding data about the shadow.
 #[derive(Debug, Clone, Copy, PartialEq)]
@@ -162,6 +113,48 @@ impl Default for BoxShadow {
     }
 }
 
+impl StylePropValue for BoxShadow {
+    fn content_hash(&self) -> u64 {
+        use std::hash::{Hash, Hasher};
+        let mut h = rustc_hash::FxHasher::default();
+        self.blur_radius.content_hash().hash(&mut h);
+        self.color.content_hash().hash(&mut h);
+        self.spread.content_hash().hash(&mut h);
+        self.left_offset.content_hash().hash(&mut h);
+        self.right_offset.content_hash().hash(&mut h);
+        self.top_offset.content_hash().hash(&mut h);
+        self.bottom_offset.content_hash().hash(&mut h);
+        h.finish()
+    }
+
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        Some(Self {
+            blur_radius: self
+                .blur_radius
+                .interpolate(&other.blur_radius, value)
+                .unwrap(),
+            color: self.color.interpolate(&other.color, value).unwrap(),
+            spread: self.spread.interpolate(&other.spread, value).unwrap(),
+            left_offset: self
+                .left_offset
+                .interpolate(&other.left_offset, value)
+                .unwrap(),
+            right_offset: self
+                .right_offset
+                .interpolate(&other.right_offset, value)
+                .unwrap(),
+            top_offset: self
+                .top_offset
+                .interpolate(&other.top_offset, value)
+                .unwrap(),
+            bottom_offset: self
+                .bottom_offset
+                .interpolate(&other.bottom_offset, value)
+                .unwrap(),
+        })
+    }
+}
+
 /// Structure holding border widths for all four sides
 #[derive(Debug, Clone, PartialEq, Default)]
 pub struct Border {
@@ -231,33 +224,6 @@ impl StylePropValue for Border {
         self.bottom.content_hash().hash(&mut h);
         h.finish()
     }
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        let border = self.clone();
-        let details_view = move || {
-            let sides = [
-                ("Left:", border.left),
-                ("Top:", border.top),
-                ("Right:", border.right),
-                ("Bottom:", border.bottom),
-            ];
-
-            Stack::vertical_from_iter(
-                sides
-                    .into_iter()
-                    .filter_map(|(l, v)| v.map(|v| (l, v)))
-                    .map(|(label, value)| {
-                        Stack::horizontal((
-                            label.style(|s| s.font_weight(FontWeight::BOLD).width(80.0)),
-                            value.debug_view().unwrap(),
-                        ))
-                        .style(|s| s.items_center().gap(4.0))
-                        .into_any()
-                    }),
-            )
-            .style(|s| s.gap(4.0).padding(8.0))
-        };
-        Some(details_view().into_any())
-    }
 
     fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
         Some(Self {
@@ -338,32 +304,6 @@ impl StylePropValue for BorderColor {
         self.bottom.content_hash().hash(&mut h);
         h.finish()
     }
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        let border_color = self.clone();
-        let details_view = move || {
-            let sides = [
-                ("Left:", border_color.left),
-                ("Top:", border_color.top),
-                ("Right:", border_color.right),
-                ("Bottom:", border_color.bottom),
-            ];
-
-            Stack::vertical_from_iter(
-                sides
-                    .into_iter()
-                    .filter_map(|(l, v)| v.map(|v| (l, v)))
-                    .map(|(label, color)| {
-                        Stack::horizontal((
-                            label.style(|s| s.font_weight(FontWeight::BOLD).width(80.0)),
-                            color.debug_view().unwrap(),
-                        ))
-                        .style(|s| s.items_center().gap(4.0))
-                    }),
-            )
-            .style(|s| s.gap(4.0).padding(8.0))
-        };
-        Some(details_view().into_any())
-    }
 
     fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
         Some(Self {
@@ -477,32 +417,6 @@ impl StylePropValue for BorderRadius {
         self.bottom_right.content_hash().hash(&mut h);
         h.finish()
     }
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        let border_radius = *self;
-        let details_view = move || {
-            let corners = [
-                ("Top Left:", border_radius.top_left),
-                ("Top Right:", border_radius.top_right),
-                ("Bottom Left:", border_radius.bottom_left),
-                ("Bottom Right:", border_radius.bottom_right),
-            ];
-
-            Stack::vertical_from_iter(
-                corners
-                    .into_iter()
-                    .filter_map(|(l, v)| v.map(|v| (l, v)))
-                    .map(|(label, radius)| {
-                        Stack::horizontal((
-                            label.style(|s| s.font_weight(FontWeight::BOLD).width(80.0)),
-                            radius.debug_view().unwrap(),
-                        ))
-                        .style(|s| s.items_center().gap(4.0))
-                    }),
-            )
-            .style(|s| s.gap(4.0).padding(8.0))
-        };
-        Some(details_view().into_any())
-    }
 
     fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
         Some(Self {
@@ -583,32 +497,6 @@ impl StylePropValue for Padding {
         self.bottom.content_hash().hash(&mut h);
         h.finish()
     }
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        let padding = *self;
-        let details_view = move || {
-            let sides = [
-                ("Left:", padding.left),
-                ("Top:", padding.top),
-                ("Right:", padding.right),
-                ("Bottom:", padding.bottom),
-            ];
-
-            Stack::vertical_from_iter(
-                sides
-                    .into_iter()
-                    .filter_map(|(l, v)| v.map(|v| (l, v)))
-                    .map(|(label, padding)| {
-                        Stack::horizontal((
-                            label.style(|s| s.font_weight(FontWeight::BOLD).width(80.0)),
-                            padding.debug_view().unwrap(),
-                        ))
-                        .style(|s| s.items_center().gap(4.0))
-                    }),
-            )
-            .style(|s| s.gap(4.0).padding(8.0))
-        };
-        Some(details_view().into_any())
-    }
 
     fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
         Some(Self {
@@ -689,32 +577,6 @@ impl StylePropValue for Margin {
         self.bottom.content_hash().hash(&mut h);
         h.finish()
     }
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        let margin = *self;
-        let details_view = move || {
-            let sides = [
-                ("Left:", margin.left),
-                ("Top:", margin.top),
-                ("Right:", margin.right),
-                ("Bottom:", margin.bottom),
-            ];
-
-            Stack::vertical_from_iter(
-                sides
-                    .into_iter()
-                    .filter_map(|(l, v)| v.map(|v| (l, v)))
-                    .map(|(label, margin)| {
-                        Stack::horizontal((
-                            label.style(|s| s.font_weight(FontWeight::BOLD).width(80.0)),
-                            margin.debug_view().unwrap(),
-                        ))
-                        .style(|s| s.items_center().gap(4.0))
-                    }),
-            )
-            .style(|s| s.gap(4.0).padding(8.0))
-        };
-        Some(details_view().into_any())
-    }
 
     fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
         Some(Self {
@@ -726,236 +588,38 @@ impl StylePropValue for Margin {
     }
 }
 
-// Simple StylePropValue implementations for enums
-impl StylePropValue for CursorStyle {
-    fn content_hash(&self) -> u64 {
-        use std::hash::{Hash, Hasher};
-        let mut h = rustc_hash::FxHasher::default();
-        std::mem::discriminant(self).hash(&mut h);
-        h.finish()
-    }
-}
-impl StylePropValue for TextOverflow {
-    fn content_hash(&self) -> u64 {
-        use std::hash::{Hash, Hasher};
-        let mut h = rustc_hash::FxHasher::default();
-        std::mem::discriminant(self).hash(&mut h);
-        h.finish()
-    }
-}
-impl StylePropValue for PointerEvents {
-    fn content_hash(&self) -> u64 {
-        use std::hash::{Hash, Hasher};
-        let mut h = rustc_hash::FxHasher::default();
-        std::mem::discriminant(self).hash(&mut h);
-        h.finish()
+impl PropDebugView for Border {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        Some(r.border(self))
     }
 }
 
-impl StylePropValue for BoxShadow {
-    fn content_hash(&self) -> u64 {
-        use std::hash::{Hash, Hasher};
-        let mut h = rustc_hash::FxHasher::default();
-        self.blur_radius.content_hash().hash(&mut h);
-        self.color.content_hash().hash(&mut h);
-        self.spread.content_hash().hash(&mut h);
-        self.left_offset.content_hash().hash(&mut h);
-        self.right_offset.content_hash().hash(&mut h);
-        self.top_offset.content_hash().hash(&mut h);
-        self.bottom_offset.content_hash().hash(&mut h);
-        h.finish()
+impl PropDebugView for BorderColor {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        Some(r.border_color(self))
     }
-    fn debug_view(&self) -> Option<Box<dyn View>> {
-        // Create a preview container that shows a visual representation of the shadow
-        let shadow = *self;
-
-        // Shadow preview box
-        let shadow_preview =
-            ().style(move |s| s.width(50.0).height(50.0))
-                .container()
-                .style(move |s| {
-                    s.background(Color::TRANSPARENT)
-                        .border(1.)
-                        .apply_box_shadows(vec![shadow])
-                        .margin(10.0)
-                        .with_theme(|s, t| {
-                            s.border_color(t.border()).border_radius(t.border_radius())
-                        })
-                });
-
-        // Create a details section showing the shadow properties
-        let details_view = move || {
-            Stack::vertical((
-                Stack::horizontal((
-                    "Color:".style(|s| s.font_weight(FontWeight::BOLD).width(80.0)),
-                    shadow.color.debug_view().unwrap(),
-                ))
-                .style(|s| s.items_center().gap(4.0)),
-                Stack::horizontal((
-                    "Blur:".style(|s| s.font_weight(FontWeight::BOLD).width(80.0)),
-                    format!("{:?}", shadow.blur_radius),
-                ))
-                .style(|s| s.items_center().gap(4.0)),
-                Stack::horizontal((
-                    "Spread:".style(|s| s.font_weight(FontWeight::BOLD).width(80.0)),
-                    format!("{:?}", shadow.spread),
-                ))
-                .style(|s| s.items_center().gap(4.0)),
-                Stack::horizontal((
-                    "Offset:".style(|s| s.font_weight(FontWeight::BOLD).width(80.0)),
-                    format!(
-                        "L: {:?}, R: {:?}, T: {:?}, B: {:?}",
-                        shadow.left_offset,
-                        shadow.right_offset,
-                        shadow.top_offset,
-                        shadow.bottom_offset
-                    ),
-                ))
-                .style(|s| s.items_center().gap(4.0)),
-            ))
-            .style(|s| s.gap(4.0).padding(8.0))
-        };
-
-        // Combine preview and details
-        let view = shadow_preview.tooltip(details_view);
-
-        Some(view.into_any())
-    }
-
-    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
-        Some(Self {
-            blur_radius: self
-                .blur_radius
-                .interpolate(&other.blur_radius, value)
-                .unwrap(),
-            color: self.color.interpolate(&other.color, value).unwrap(),
-            spread: self.spread.interpolate(&other.spread, value).unwrap(),
-            left_offset: self
-                .left_offset
-                .interpolate(&other.left_offset, value)
-                .unwrap(),
-            right_offset: self
-                .right_offset
-                .interpolate(&other.right_offset, value)
-                .unwrap(),
-            top_offset: self
-                .top_offset
-                .interpolate(&other.top_offset, value)
-                .unwrap(),
-            bottom_offset: self
-                .bottom_offset
-                .interpolate(&other.bottom_offset, value)
-                .unwrap(),
-        })
-    }
-}
-
-/// Controls whether and how a view can receive focus.
-///
-/// Focus determines which element receives keyboard input and is used for accessibility
-/// and keyboard navigation. This enum provides three levels of focus behavior, where
-/// each level includes the capabilities of the previous level. In particular,
-/// [`Focus::Keyboard`] always implies full focusability for pointer and
-/// programmatic focus too.
-///
-/// # Focus Sources
-///
-/// - **Programmatic**: Focus set via code (e.g., `view.request_focus()`)
-/// - **Pointer**: Focus set by clicking or tapping the view
-/// - **Keyboard**: Focus set by sequential navigation (Tab key, arrow keys, etc.)
-///
-/// # Examples
-///
-/// ```rust
-/// # use floem::prelude::*;
-/// // A button that can be focused by any means
-/// let _button = Button::new("Click me")
-///     .style(|s| s.keyboard_navigable());
-///
-/// // A custom scrollable container: focusable for arrow keys, but not in tab order
-/// let _scrollable = Empty::new()
-///     .scroll()
-///     .style(|s| s.focusable());
-///
-/// // A purely decorative element that should never receive focus
-/// let _decorative = Container::new(Empty::new())
-///     .style(|s| s.focus_none());
-/// ```
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Default)]
-pub enum Focus {
-    /// The view cannot receive focus through any means.
-    ///
-    /// Use this for decorative elements, labels, or containers that should never
-    /// be interactive. Clicking the view will not focus it, and programmatic
-    /// focus requests will be ignored.
-    #[default]
-    None,
-
-    /// The view can receive focus programmatically or via pointer, but is not
-    /// included in keyboard navigation order.
-    ///
-    /// Use this for:
-    /// - Custom containers that need focus for scroll or keyboard handling
-    /// - Elements that should be clickable but not tab-able
-    /// - Roving tabindex scenarios where only one item is keyboard navigable
-    /// - Dialog/modal containers that need programmatic focus
-    ///
-    /// The view will not be reachable via Tab or arrow key navigation, but can
-    /// be focused by clicking or calling `request_focus()`.
-    PointerAndProgrammatic,
-
-    /// The view can receive focus through all means: programmatically, via pointer,
-    /// and via keyboard navigation.
-    ///
-    /// Use this for interactive controls like buttons, inputs, links, and custom
-    /// widgets that should be fully accessible via keyboard. The view will be
-    /// included in the sequential focus navigation order (Tab/Shift+Tab) and
-    /// spatial navigation (arrow keys).
-    ///
-    /// This is the recommended setting for all interactive UI elements.
-    Keyboard,
 }
 
-impl Focus {
-    /// Returns `true` if the view can receive focus in any way.
-    ///
-    /// This includes programmatic focus, pointer focus, and keyboard navigation.
-    #[inline]
-    pub fn is_focusable(self) -> bool {
-        !matches!(self, Focus::None)
-    }
-
-    /// Returns `true` if the view can receive focus via pointer (click/tap).
-    #[inline]
-    pub fn allows_pointer_focus(self) -> bool {
-        matches!(self, Focus::PointerAndProgrammatic | Focus::Keyboard)
-    }
-
-    /// Returns `true` if the view can receive focus programmatically (via code).
-    #[inline]
-    pub fn allows_programmatic_focus(self) -> bool {
-        matches!(self, Focus::PointerAndProgrammatic | Focus::Keyboard)
+impl PropDebugView for BorderRadius {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        Some(r.border_radius(self))
     }
+}
 
-    /// Returns `true` if the view is included in keyboard navigation order.
-    ///
-    /// This means the view can be reached via Tab, Shift+Tab, or arrow key navigation.
-    #[inline]
-    pub fn allows_keyboard_navigation(self) -> bool {
-        matches!(self, Focus::Keyboard)
+impl PropDebugView for Padding {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        Some(r.padding(self))
     }
+}
 
-    /// Returns `true` if the view should be excluded from all focus mechanisms.
-    #[inline]
-    pub fn is_none(self) -> bool {
-        matches!(self, Focus::None)
+impl PropDebugView for Margin {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        Some(r.margin(self))
     }
 }
-impl StylePropValue for Focus {
-    fn content_hash(&self) -> u64 {
-        use std::hash::{Hash, Hasher};
-        let mut h = rustc_hash::FxHasher::default();
-        self.hash(&mut h);
-        h.finish()
+
+impl PropDebugView for BoxShadow {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        Some(r.box_shadow(self))
     }
 }
diff --git a/style/src/context_value.rs b/style/src/context_value.rs
new file mode 100644
index 000000000..cc4a1b409
--- /dev/null
+++ b/style/src/context_value.rs
@@ -0,0 +1,75 @@
+//! Deferred, context-resolved style values.
+//!
+//! [`ContextValue<T>`] packages a closure that computes a value of type `T`
+//! from a host-specific style type (typically [`crate::Style`]). The eval
+//! closure is stored with the host type erased behind `&dyn Any`, so this
+//! type does not require a concrete `Style` at construction.
+//!
+//! For resolution against the built-in [`crate::Style`] with reactive
+//! tracking, use [`crate::Style::resolve_context`]. For raw resolution
+//! against an arbitrary host type, use [`ContextValue::resolve_erased`].
+
+use std::any::Any;
+use std::rc::Rc;
+
+/// Erased evaluator closure stored inside [`ContextValue`]. The host-specific
+/// style type is erased behind `&dyn Any` so this crate does not depend on
+/// any concrete `Style`.
+pub type ContextEvalFn<T> = Rc<dyn Fn(&dyn Any) -> T>;
+
+pub struct ContextValue<T> {
+    pub(crate) eval: ContextEvalFn<T>,
+}
+
+impl<T> Clone for ContextValue<T> {
+    fn clone(&self) -> Self {
+        Self {
+            eval: self.eval.clone(),
+        }
+    }
+}
+
+impl<T> std::fmt::Debug for ContextValue<T> {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.write_str("ContextValue(..)")
+    }
+}
+
+impl<T> PartialEq for ContextValue<T> {
+    fn eq(&self, other: &Self) -> bool {
+        Rc::ptr_eq(&self.eval, &other.eval)
+    }
+}
+
+impl<T> Eq for ContextValue<T> {}
+
+impl<T: 'static> ContextValue<T> {
+    /// Build a `ContextValue` from a closure that reads the host style type
+    /// `S`. The concrete `S` is usually [`crate::Style`], but any `'static`
+    /// type works; the eval closure is stored type-erased and
+    /// `resolve_erased` downcasts back to `&S` at call time.
+    pub fn new<S: 'static>(eval: impl Fn(&S) -> T + 'static) -> Self {
+        Self {
+            eval: Rc::new(move |any| {
+                eval(
+                    any.downcast_ref::<S>()
+                        .expect("ContextValue: style type mismatch"),
+                )
+            }),
+        }
+    }
+
+    /// Low-level resolve. Prefer [`crate::Style::resolve_context`] when
+    /// resolving against the built-in `Style`, which additionally wraps
+    /// the call in the reactive `with_effect` context for signal tracking.
+    pub fn resolve_erased(&self, style: &dyn Any) -> T {
+        (self.eval)(style)
+    }
+
+    pub fn map<U: 'static>(self, f: impl Fn(T) -> U + 'static) -> ContextValue<U> {
+        let eval = self.eval;
+        ContextValue {
+            eval: Rc::new(move |any| f(eval(any))),
+        }
+    }
+}
diff --git a/style/src/debug_view.rs b/style/src/debug_view.rs
new file mode 100644
index 000000000..0b8cacd0a
--- /dev/null
+++ b/style/src/debug_view.rs
@@ -0,0 +1,29 @@
+//! A side-trait that types opt into when they can render an inspector
+//! preview of their value. Kept separate from `StylePropValue` so the
+//! engine's value types don't depend on `crate::view::View`.
+//!
+//! The trait's body receives an `&dyn InspectorRender` and returns a
+//! `Box<dyn Any>`. Concrete renderers (e.g. `FloemInspectorRender` in the
+//! `floem` crate) build their host view type and box it as `Any`; inspector
+//! call sites downcast back to the host view type.
+
+use std::any::Any;
+
+use crate::InspectorRender;
+
+pub trait PropDebugView {
+    fn debug_view(&self, _r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        None
+    }
+}
+
+/// Shorthand for types that don't provide an inspector preview.
+/// Emits `impl PropDebugView for T {}` using the default `None` return.
+#[macro_export]
+macro_rules! no_debug_view {
+    ($($t:ty),* $(,)?) => {
+        $(
+            impl $crate::PropDebugView for $t {}
+        )*
+    };
+}
diff --git a/style/src/design_system.rs b/style/src/design_system.rs
new file mode 100644
index 000000000..7569a5eab
--- /dev/null
+++ b/style/src/design_system.rs
@@ -0,0 +1,194 @@
+//! Design system color and spacing primitives.
+//!
+//! [`DesignSystem`] holds the colors and dimensions that the built-in
+//! `floem` theme (light/dark modes) resolves from. The value type lives in
+//! `floem_style` so it can be referenced from inspector previews and
+//! interpolated alongside other style values. The `Theme` prop and the
+//! `StyleThemeExt` trait stay in `floem`.
+
+use std::any::Any;
+
+use peniko::Color;
+
+use crate::debug_view::PropDebugView;
+use crate::inspector_render::InspectorRender;
+use crate::prop_value::StylePropValue;
+
+#[derive(Debug, Clone, PartialEq)]
+pub struct DesignSystem {
+    pub bg_base: Color,
+    pub text_base: Color,
+    pub text_lightness: f32,
+    pub primary_base: Color,
+    pub success_base: Color,
+    pub warning_base: Color,
+    pub danger_base: Color,
+    pub is_dark: bool,
+    pub padding: f32,
+    pub border_radius: f32,
+    pub font_size: f64,
+}
+
+impl DesignSystem {
+    /// Create a light mode design system.
+    pub fn light() -> Self {
+        Self {
+            bg_base: Color::from_rgb8(248, 248, 248),
+            text_base: Color::from_rgb8(0, 0, 0),
+            text_lightness: 0.05,
+            primary_base: Color::from_rgb8(0x18, 0x96, 0xC2),
+            success_base: Color::from_rgb8(0x2D, 0x9D, 0x67),
+            warning_base: Color::from_rgb8(0xE5, 0xA2, 0x23),
+            danger_base: Color::from_rgb8(0xD7, 0x37, 0x45),
+            padding: 5.,
+            border_radius: 5.,
+            font_size: 14.,
+            is_dark: false,
+        }
+    }
+
+    /// Create a dark mode design system.
+    pub fn dark() -> Self {
+        Self {
+            bg_base: Color::from_rgb8(0x24, 0x24, 0x24),
+            text_base: Color::from_rgb8(255, 255, 255),
+            text_lightness: 0.95,
+            primary_base: Color::from_rgb8(0x3A, 0xAA, 0xD8),
+            success_base: Color::from_rgb8(0x4A, 0xBE, 0x8A),
+            warning_base: Color::from_rgb8(0xF5, 0xB8, 0x4E),
+            danger_base: Color::from_rgb8(0xF0, 0x56, 0x54),
+            padding: 5.,
+            border_radius: 5.,
+            font_size: 14.,
+            is_dark: true,
+        }
+    }
+
+    // Background levels
+
+    pub fn bg_base(&self) -> Color {
+        self.bg_base
+    }
+
+    pub fn bg_elevated(&self) -> Color {
+        let adjustment = 0.05;
+        self.bg_base.map_lightness(|l| l + adjustment)
+    }
+
+    pub fn bg_overlay(&self) -> Color {
+        let adjustment = 0.10;
+        self.bg_base.map_lightness(|l| l + adjustment)
+    }
+
+    pub fn bg_disabled(&self) -> Color {
+        let adjustment = if self.is_dark { -0.05 } else { -0.1 };
+        self.bg_base.map_lightness(|l| l + adjustment)
+    }
+
+    // Border
+
+    pub fn border(&self) -> Color {
+        let adjustment = if self.is_dark { 0.25 } else { -0.25 };
+        self.bg_base.map_lightness(|l| l + adjustment)
+    }
+
+    pub fn border_muted(&self) -> Color {
+        let adjustment = if self.is_dark { 0.15 } else { -0.15 };
+        self.border()
+            .map_lightness(|l| l + adjustment)
+            .with_alpha(0.8)
+    }
+
+    // Text
+
+    pub fn text(&self) -> Color {
+        self.text_base.map_lightness(|_| self.text_lightness)
+    }
+
+    pub fn text_muted(&self) -> Color {
+        let adjustment = if self.is_dark { -0.25 } else { 0.25 };
+        self.text_base
+            .map_lightness(|l| l + adjustment)
+            .with_alpha(0.5)
+    }
+
+    // Primary
+
+    pub fn primary(&self) -> Color {
+        self.primary_base
+    }
+
+    pub fn primary_muted(&self) -> Color {
+        self.primary_base.map_lightness(|l| l - 0.05)
+    }
+
+    // Semantic colors
+
+    pub fn success(&self) -> Color {
+        self.success_base
+    }
+
+    pub fn warning(&self) -> Color {
+        self.warning_base
+    }
+
+    pub fn danger(&self) -> Color {
+        self.danger_base
+    }
+
+    pub fn info(&self) -> Color {
+        self.primary_base
+    }
+
+    pub fn padding(&self) -> f32 {
+        self.padding
+    }
+
+    pub fn border_radius(&self) -> f32 {
+        self.border_radius
+    }
+
+    pub fn font_size(&self) -> f64 {
+        self.font_size
+    }
+}
+
+impl StylePropValue for DesignSystem {
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        use peniko::color::HueDirection;
+        let t = value as f32;
+        let inv_t = 1.0 - t;
+        let t64 = value;
+        let inv_t64 = 1.0 - t64;
+
+        Some(DesignSystem {
+            bg_base: self.bg_base.lerp(other.bg_base, t, HueDirection::default()),
+            text_base: self
+                .text_base
+                .lerp(other.text_base, t, HueDirection::default()),
+            text_lightness: self.text_lightness * inv_t + other.text_lightness * t,
+            primary_base: self
+                .primary_base
+                .lerp(other.primary_base, t, HueDirection::default()),
+            success_base: self
+                .success_base
+                .lerp(other.success_base, t, HueDirection::default()),
+            warning_base: self
+                .warning_base
+                .lerp(other.warning_base, t, HueDirection::default()),
+            danger_base: self
+                .danger_base
+                .lerp(other.danger_base, t, HueDirection::default()),
+            is_dark: if t < 0.5 { self.is_dark } else { other.is_dark },
+            padding: self.padding * inv_t + other.padding * t,
+            border_radius: self.border_radius * inv_t + other.border_radius * t,
+            font_size: self.font_size * inv_t64 + other.font_size * t64,
+        })
+    }
+}
+
+impl PropDebugView for DesignSystem {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        Some(r.design_system(self))
+    }
+}
diff --git a/src/animate/easing.rs b/style/src/easing.rs
similarity index 98%
rename from src/animate/easing.rs
rename to style/src/easing.rs
index 0122c8dc7..d25635dbf 100644
--- a/src/animate/easing.rs
+++ b/style/src/easing.rs
@@ -1,6 +1,6 @@
 //! The Easing trait and the built-in easing functions.
 
-use peniko::kurbo::{ParamCurve, Point};
+use peniko::kurbo::{CubicBez, ParamCurve, Point};
 
 /// A trait for easing functions used in animations.
 ///
@@ -190,7 +190,7 @@ impl Bezier {
         let p2 = Point::new(self.0, self.1);
         let p3 = Point::new(self.2, self.3);
         let p4 = Point::new(1., 1.);
-        let point = crate::kurbo::CubicBez::new(p1, p2, p3, p4).eval(time);
+        let point = CubicBez::new(p1, p2, p3, p4).eval(time);
         point.y
     }
 }
diff --git a/style/src/extractors.rs b/style/src/extractors.rs
new file mode 100644
index 000000000..b8728b40c
--- /dev/null
+++ b/style/src/extractors.rs
@@ -0,0 +1,304 @@
+//! Prop extractors the style engine runs during property extraction.
+//!
+//! These `prop_extractor!`-generated structs pull resolved values off the
+//! cascaded [`Style`](crate::Style) and cache them as typed state. Hosts
+//! read the extracted values during layout / paint / box-tree updates.
+//!
+//! - [`LayoutProps`] — sizes, padding, margin, insets, gap, flex metrics,
+//!   plus font-size / line-height (kept alongside layout because `em` and
+//!   `lh` unit resolution needs them).
+//! - [`TransformProps`] — translate / scale / rotate, overflow, corner
+//!   radii (these change the node's visual box geometry).
+//! - [`ViewStyleProps`] — backgrounds, outlines, border colors, shadows.
+
+use peniko::kurbo::{self, Affine, RoundedRect, Vec2};
+use taffy::geometry::Rect;
+use taffy::prelude::{LengthPercentage, Size};
+use taffy::style::{Overflow, Style as TaffyStyle};
+
+use crate::builtin_props::{
+    Background, BorderBottom, BorderBottomColor, BorderBottomLeftRadius, BorderBottomRightRadius,
+    BorderLeft, BorderLeftColor, BorderProgress, BorderRight, BorderRightColor, BorderTop,
+    BorderTopColor, BorderTopLeftRadius, BorderTopRightRadius, BoxShadowProp, ColGap, FlexBasis,
+    FlexGrow, FlexShrink, FontFamily, FontSize, FontStyle, FontWeight, Height, InsetBottom,
+    InsetLeft, InsetRight, InsetTop, LineHeight, MarginBottom, MarginLeft, MarginRight, MarginTop,
+    MaxHeight, MaxWidth, MinHeight, MinWidth, Outline, OutlineColor, OutlineProgress, OverflowX,
+    OverflowY, PaddingBottom, PaddingLeft, PaddingRight, PaddingTop, RotateAbout, Rotation, RowGap,
+    ScaleAbout, ScaleX, ScaleY, Transform, TranslateX, TranslateY, Width,
+};
+use crate::components::{Border, BorderColor, BorderRadius};
+use crate::prop_extractor;
+use crate::unit::FontSizeCx;
+
+prop_extractor! {
+    pub FontProps {
+        pub size: FontSize,
+        pub family: FontFamily,
+        pub weight: FontWeight,
+        pub style: FontStyle,
+    }
+}
+
+prop_extractor! {
+    pub LayoutProps {
+        pub border_left: BorderLeft,
+        pub border_top: BorderTop,
+        pub border_right: BorderRight,
+        pub border_bottom: BorderBottom,
+
+        pub padding_left: PaddingLeft,
+        pub padding_top: PaddingTop,
+        pub padding_right: PaddingRight,
+        pub padding_bottom: PaddingBottom,
+
+        pub margin_left: MarginLeft,
+        pub margin_top: MarginTop,
+        pub margin_right: MarginRight,
+        pub margin_bottom: MarginBottom,
+
+        pub width: Width,
+        pub height: Height,
+
+        pub min_width: MinWidth,
+        pub min_height: MinHeight,
+
+        pub max_width: MaxWidth,
+        pub max_height: MaxHeight,
+
+        pub flex_grow: FlexGrow,
+        pub flex_shrink: FlexShrink,
+        pub flex_basis: FlexBasis,
+
+        pub inset_left: InsetLeft,
+        pub inset_top: InsetTop,
+        pub inset_right: InsetRight,
+        pub inset_bottom: InsetBottom,
+
+        pub row_gap: RowGap,
+        pub col_gap: ColGap,
+
+        // Part of layout props because `em` / `lh` unit resolution needs them.
+        pub font_size: FontSize,
+        pub line_height: LineHeight,
+    }
+}
+
+impl LayoutProps {
+    pub fn border(&self) -> Border {
+        Border {
+            left: Some(self.border_left()),
+            top: Some(self.border_top()),
+            right: Some(self.border_right()),
+            bottom: Some(self.border_bottom()),
+        }
+    }
+
+    pub fn font_size_cx(&self) -> FontSizeCx {
+        let font_size = self.font_size();
+        let line_height = self.line_height();
+        let line_height = line_height.resolve(font_size as f32);
+        FontSizeCx::new(font_size, line_height as f64)
+    }
+
+    /// Push this extractor's resolved values onto a taffy `Style`. Hosts
+    /// call this before handing the taffy style to a taffy layout engine.
+    pub fn apply_to_taffy_style(&self, style: &mut TaffyStyle) {
+        let resolve_cx = &self.font_size_cx();
+        style.size = Size {
+            width: self.width().to_taffy_dim(resolve_cx),
+            height: self.height().to_taffy_dim(resolve_cx),
+        };
+        style.min_size = Size {
+            width: self.min_width().to_taffy_dim(resolve_cx),
+            height: self.min_height().to_taffy_dim(resolve_cx),
+        };
+        style.max_size = Size {
+            width: self.max_width().to_taffy_dim(resolve_cx),
+            height: self.max_height().to_taffy_dim(resolve_cx),
+        };
+        style.flex_grow = self.flex_grow();
+        style.flex_shrink = self.flex_shrink();
+        style.flex_basis = self.flex_basis().to_taffy_dim(resolve_cx);
+        style.border = Rect {
+            left: LengthPercentage::length(self.border_left().width as f32),
+            top: LengthPercentage::length(self.border_top().width as f32),
+            right: LengthPercentage::length(self.border_right().width as f32),
+            bottom: LengthPercentage::length(self.border_bottom().width as f32),
+        };
+        style.padding = Rect {
+            left: self.padding_left().to_taffy(resolve_cx),
+            top: self.padding_top().to_taffy(resolve_cx),
+            right: self.padding_right().to_taffy(resolve_cx),
+            bottom: self.padding_bottom().to_taffy(resolve_cx),
+        };
+        style.margin = Rect {
+            left: self.margin_left().to_taffy_len_perc_auto(resolve_cx),
+            top: self.margin_top().to_taffy_len_perc_auto(resolve_cx),
+            right: self.margin_right().to_taffy_len_perc_auto(resolve_cx),
+            bottom: self.margin_bottom().to_taffy_len_perc_auto(resolve_cx),
+        };
+        style.inset = Rect {
+            left: self.inset_left().to_taffy_len_perc_auto(resolve_cx),
+            top: self.inset_top().to_taffy_len_perc_auto(resolve_cx),
+            right: self.inset_right().to_taffy_len_perc_auto(resolve_cx),
+            bottom: self.inset_bottom().to_taffy_len_perc_auto(resolve_cx),
+        };
+        style.gap = Size {
+            width: self.col_gap().to_taffy(resolve_cx),
+            height: self.row_gap().to_taffy(resolve_cx),
+        };
+    }
+}
+
+prop_extractor! {
+    /// Properties that require a box-tree commit when they change.
+    pub TransformProps {
+        pub scale_x: ScaleX,
+        pub scale_y: ScaleY,
+
+        pub translate_x: TranslateX,
+        pub translate_y: TranslateY,
+
+        pub rotation: Rotation,
+        pub rotate_about: RotateAbout,
+        pub scale_about: ScaleAbout,
+
+        pub transform: Transform,
+
+        pub overflow_x: OverflowX,
+        pub overflow_y: OverflowY,
+        pub border_top_left_radius: BorderTopLeftRadius,
+        pub border_top_right_radius: BorderTopRightRadius,
+        pub border_bottom_left_radius: BorderBottomLeftRadius,
+        pub border_bottom_right_radius: BorderBottomRightRadius,
+    }
+}
+
+impl TransformProps {
+    pub fn border_radius(&self) -> BorderRadius {
+        BorderRadius {
+            top_left: Some(self.border_top_left_radius()),
+            top_right: Some(self.border_top_right_radius()),
+            bottom_left: Some(self.border_bottom_left_radius()),
+            bottom_right: Some(self.border_bottom_right_radius()),
+        }
+    }
+
+    pub fn affine(&self, size: kurbo::Size, resolve_cx: &FontSizeCx) -> Affine {
+        let mut result = Affine::IDENTITY;
+        // CANONICAL ORDER (matches CSS individual properties):
+        // 1. translate → 2. rotate → 3. scale → 4. transform property
+
+        // 1. Translate
+        let transform_x = self.translate_x().resolve(size.width, resolve_cx);
+        let transform_y = self.translate_y().resolve(size.height, resolve_cx);
+        result *= Affine::translate(Vec2 {
+            x: transform_x,
+            y: transform_y,
+        });
+
+        // 2. Rotate (around rotate_about anchor)
+        let rotation = self.rotation().to_radians();
+        if rotation != 0.0 {
+            let rotate_about = self.rotate_about();
+            let (rotate_x_frac, rotate_y_frac) = rotate_about.as_fractions();
+            let rotate_point = Vec2 {
+                x: rotate_x_frac * size.width,
+                y: rotate_y_frac * size.height,
+            };
+            result *= Affine::translate(rotate_point)
+                * Affine::rotate(rotation)
+                * Affine::translate(-rotate_point);
+        }
+
+        // 3. Scale (around scale_about anchor)
+        let scale_x = self.scale_x().0 / 100.;
+        let scale_y = self.scale_y().0 / 100.;
+        if scale_x != 1.0 || scale_y != 1.0 {
+            let scale_about = self.scale_about();
+            let (scale_x_frac, scale_y_frac) = scale_about.as_fractions();
+            let scale_point = Vec2 {
+                x: scale_x_frac * size.width,
+                y: scale_y_frac * size.height,
+            };
+            result *= Affine::translate(scale_point)
+                * Affine::scale_non_uniform(scale_x, scale_y)
+                * Affine::translate(-scale_point);
+        }
+
+        // 4. Apply custom transform property last
+        result *= self.transform();
+        result
+    }
+
+    pub fn clip_rect(
+        &self,
+        mut local_rect: kurbo::Rect,
+        resolve_cx: &FontSizeCx,
+    ) -> Option<RoundedRect> {
+        use Overflow::*;
+
+        let (overflow_x, overflow_y) = (self.overflow_x(), self.overflow_y());
+
+        // No clipping if both are visible.
+        if overflow_x == Visible && overflow_y == Visible {
+            return None;
+        }
+
+        let border_radius = self
+            .border_radius()
+            .resolve_border_radii(local_rect.size().min_side(), resolve_cx);
+
+        // Extend to infinity on visible axes.
+        if overflow_x == Visible {
+            local_rect.x0 = f64::NEG_INFINITY;
+            local_rect.x1 = f64::INFINITY;
+        }
+        if overflow_y == Visible {
+            local_rect.y0 = f64::NEG_INFINITY;
+            local_rect.y1 = f64::INFINITY;
+        }
+
+        Some(RoundedRect::from_rect(local_rect, border_radius))
+    }
+}
+
+prop_extractor! {
+    pub ViewStyleProps {
+        pub border_top_left_radius: BorderTopLeftRadius,
+        pub border_top_right_radius: BorderTopRightRadius,
+        pub border_bottom_left_radius: BorderBottomLeftRadius,
+        pub border_bottom_right_radius: BorderBottomRightRadius,
+        pub border_progress: BorderProgress,
+
+        pub outline: Outline,
+        pub outline_color: OutlineColor,
+        pub outline_progress: OutlineProgress,
+        pub border_left_color: BorderLeftColor,
+        pub border_top_color: BorderTopColor,
+        pub border_right_color: BorderRightColor,
+        pub border_bottom_color: BorderBottomColor,
+        pub background: Background,
+        pub shadow: BoxShadowProp,
+    }
+}
+
+impl ViewStyleProps {
+    pub fn border_radius(&self) -> BorderRadius {
+        BorderRadius {
+            top_left: Some(self.border_top_left_radius()),
+            top_right: Some(self.border_top_right_radius()),
+            bottom_left: Some(self.border_bottom_left_radius()),
+            bottom_right: Some(self.border_bottom_right_radius()),
+        }
+    }
+
+    pub fn border_color(&self) -> BorderColor {
+        BorderColor {
+            left: self.border_left_color(),
+            top: self.border_top_color(),
+            right: self.border_right_color(),
+            bottom: self.border_bottom_color(),
+        }
+    }
+}
diff --git a/style/src/inspector_render.rs b/style/src/inspector_render.rs
new file mode 100644
index 000000000..54c4a2004
--- /dev/null
+++ b/style/src/inspector_render.rs
@@ -0,0 +1,105 @@
+//! Renderer-abstraction for inspector previews.
+//!
+//! `PropDebugView` impls need to build view widgets (labels, canvases,
+//! stacks, tooltips, ...) when a prop is rendered in the inspector. Those
+//! widgets live in the `floem` crate, which `floem_style` can't name. To
+//! break the cycle, `PropDebugView` impls take a `&dyn InspectorRender` and
+//! ask it for a preview widget, returned as `Box<dyn Any>`. The concrete
+//! implementor in `floem` downcasts back to `Box<dyn View>` at the call
+//! site.
+//!
+//! Each method here corresponds to ONE kind of inspector preview. Keep the
+//! surface small: only add a method when the current impl is
+//! widget-heavy enough that keeping its body in `floem_style` would pull
+//! in view types. Simpler impls can and do use `text(..)` / `sequence(..)`.
+
+use std::any::Any;
+
+use parley::{FontStyle, FontWeight};
+use peniko::kurbo::{Affine, Rect, Stroke};
+use peniko::{Brush, Color, Gradient};
+
+use crate::components::{Border, BorderColor, BorderRadius, BoxShadow, Margin, Padding};
+use crate::design_system::DesignSystem;
+use crate::transition::Transition;
+use crate::values::{ObjectFit, ObjectPosition};
+
+/// An abstract renderer for inspector previews. See module docs.
+pub trait InspectorRender {
+    /// A preview with no content. Use as a fallback when a value has no
+    /// meaningful inspector rendering.
+    fn empty(&self) -> Box<dyn Any>;
+
+    /// A text preview. Used for all simple "just print a label" impls.
+    fn text(&self, s: &str) -> Box<dyn Any>;
+
+    /// A vertical sequence of previews.
+    fn sequence(&self, items: Vec<Box<dyn Any>>) -> Box<dyn Any>;
+
+    /// Color swatch with hex/rgba/components tooltip.
+    fn color(&self, c: Color) -> Box<dyn Any>;
+
+    /// Gradient preview box plus textual description.
+    fn gradient(&self, g: &Gradient) -> Box<dyn Any>;
+
+    /// Brush preview. Solid colors delegate to `color`; gradients to
+    /// `gradient`; image brushes are currently not previewed.
+    fn brush(&self, b: &Brush) -> Box<dyn Any>;
+
+    /// Stroke line preview with width/join/caps/dash tooltip.
+    fn stroke(&self, s: &Stroke) -> Box<dyn Any>;
+
+    /// Rectangle preview: coords, width/height, and a scaled box.
+    fn rect(&self, r: &Rect) -> Box<dyn Any>;
+
+    /// 2D affine transform preview: matrix + decomposed translate/rotate/scale.
+    fn affine(&self, a: &Affine) -> Box<dyn Any>;
+
+    /// `ObjectFit` preview showing a simulated image fitted into a square.
+    fn object_fit(&self, f: ObjectFit) -> Box<dyn Any>;
+
+    /// `ObjectPosition` preview showing the anchor point of an image.
+    fn object_position(&self, p: &ObjectPosition) -> Box<dyn Any>;
+
+    /// Transition easing-curve preview with duration/easing tooltip.
+    fn transition(&self, t: &Transition) -> Box<dyn Any>;
+
+    /// Text styled with muted/deemphasized color, for placeholders like "[]".
+    fn muted_text(&self, s: &str) -> Box<dyn Any>;
+
+    /// A row of `[label] content`, typically for numbered list items.
+    fn labelled(&self, label: &str, content: Box<dyn Any>) -> Box<dyn Any>;
+
+    /// Vertical list of pre-rendered child items with a small gap.
+    fn vertical_list(&self, items: Vec<Box<dyn Any>>) -> Box<dyn Any>;
+
+    /// Two debug views side by side (summary + details).
+    fn horizontal_pair(&self, first: Box<dyn Any>, second: Box<dyn Any>) -> Box<dyn Any>;
+
+    /// Text rendered using a concrete `FontWeight` (for weight previews).
+    fn font_weight(&self, weight: FontWeight, label: &str) -> Box<dyn Any>;
+
+    /// Text rendered using a concrete `FontStyle` (for italic previews).
+    fn font_style(&self, style: FontStyle, label: &str) -> Box<dyn Any>;
+
+    /// Preview for a [`Border`]: one row per side with its stroke preview.
+    fn border(&self, b: &Border) -> Box<dyn Any>;
+
+    /// Preview for a [`BorderColor`]: one row per side with its brush preview.
+    fn border_color(&self, bc: &BorderColor) -> Box<dyn Any>;
+
+    /// Preview for a [`BorderRadius`]: one row per corner with its length preview.
+    fn border_radius(&self, br: &BorderRadius) -> Box<dyn Any>;
+
+    /// Preview for a [`Padding`]: one row per side with its length preview.
+    fn padding(&self, p: &Padding) -> Box<dyn Any>;
+
+    /// Preview for a [`Margin`]: one row per side with its length preview.
+    fn margin(&self, m: &Margin) -> Box<dyn Any>;
+
+    /// Preview for a [`BoxShadow`]: a shadowed rectangle with a details tooltip.
+    fn box_shadow(&self, s: &BoxShadow) -> Box<dyn Any>;
+
+    /// Preview for a [`DesignSystem`]: expandable panel listing colors and spacing.
+    fn design_system(&self, ds: &DesignSystem) -> Box<dyn Any>;
+}
diff --git a/style/src/interaction.rs b/style/src/interaction.rs
new file mode 100644
index 000000000..6a4583619
--- /dev/null
+++ b/style/src/interaction.rs
@@ -0,0 +1,95 @@
+//! Interaction state inputs to the style engine.
+//!
+//! These describe the per-node pseudo-class state (hover, focus, active, etc.)
+//! the host reports into the engine at style-recomputation time. Hosts build
+//! an [`InteractionState`] for each node they're restyling; inheritance from
+//! ancestors arrives separately via [`InheritedInteractionCx`].
+
+/// The interaction state of a view, used to determine which style selectors apply.
+///
+/// This struct captures the current state of user interaction with a view,
+/// such as whether it's hovered, focused, being clicked, etc. This state is
+/// used during style computation to apply conditional styles like `:hover`,
+/// `:active`, `:focus`, etc.
+#[derive(Default, Debug, Clone, Copy)]
+pub struct InteractionState {
+    /// Whether the pointer is currently over this element.
+    pub is_hovered: bool,
+    /// Whether this element is in a selected state.
+    pub is_selected: bool,
+    /// Whether this element is disabled.
+    pub is_disabled: bool,
+    /// Whether this element has keyboard focus.
+    pub is_focused: bool,
+    /// Whether this element or a descendant currently has keyboard focus.
+    pub is_focus_within: bool,
+    /// Whether the element has been hidden
+    pub is_hidden: bool,
+    /// Whether an element is currently in the "active" state.
+    /// active: pointer down and not up with the pointer in the element either by
+    ///   1. remaining in, or
+    ///   2. returning into the element
+    ///      or keyboard trigger is down.
+    pub is_active: bool,
+    /// Whether dark mode is enabled.
+    pub is_dark_mode: bool,
+    /// Whether a file is being dragged over this element.
+    pub is_file_hover: bool,
+    /// Whether keyboard navigation is active.
+    pub using_keyboard_navigation: bool,
+    /// 1-based child index within parent, if this view has a parent.
+    pub child_index: Option<usize>,
+    /// Number of siblings under this view's parent.
+    pub sibling_count: usize,
+    /// Current window width in px for responsive selector matching.
+    pub window_width: f64,
+}
+
+impl InteractionState {
+    /// Pack interaction state into bits for efficient hashing.
+    pub fn to_bits(self) -> u16 {
+        let mut bits = 0u16;
+        if self.is_hovered {
+            bits |= 1 << 0;
+        }
+        if self.is_selected {
+            bits |= 1 << 1;
+        }
+        if self.is_disabled {
+            bits |= 1 << 2;
+        }
+        if self.is_focused {
+            bits |= 1 << 3;
+        }
+        if self.is_active {
+            bits |= 1 << 4;
+        }
+        if self.is_dark_mode {
+            bits |= 1 << 5;
+        }
+        if self.is_file_hover {
+            bits |= 1 << 6;
+        }
+        if self.using_keyboard_navigation {
+            bits |= 1 << 7;
+        }
+        if self.is_focus_within {
+            bits |= 1 << 8;
+        }
+        bits
+    }
+}
+
+/// Inherited interaction context that is propagated from parent to children.
+///
+/// These states can be set by parent views and are inherited by children,
+/// allowing parents to control the disabled or selected state of entire subtrees.
+#[derive(Default, Debug, Clone, Copy)]
+pub struct InheritedInteractionCx {
+    /// Whether this view (or an ancestor) is disabled.
+    pub disabled: bool,
+    /// Whether this view (or an ancestor) is selected.
+    pub selected: bool,
+    /// Whether this view (or an ancestor) is hidden.
+    pub hidden: bool,
+}
diff --git a/style/src/lib.rs b/style/src/lib.rs
new file mode 100644
index 000000000..ddf8cb161
--- /dev/null
+++ b/style/src/lib.rs
@@ -0,0 +1,142 @@
+//! The Floem style engine.
+//!
+//! A CSS-style cascade engine tied to [`taffy`] for layout. Holds the
+//! view-agnostic parts of Floem's style system: unit types, pseudo-class
+//! selectors, the cascade, built-in property definitions, transitions,
+//! per-node style storage, and the [`StyleTree`] that drives it all.
+//!
+//! # Scope
+//!
+//! Floem's model follows CSS: layout *is* style. `display`, `flex-*`,
+//! `grid-*`, `width`, `padding` etc. are style properties the cascade
+//! resolves, and their resolved values are the input to a layout solver.
+//! This crate embraces that by bundling [`taffy`] as the layout-input
+//! contract: style types in `floem_style` include taffy's enums
+//! ([`Display`], [`FlexDirection`], [`AlignItems`], etc.) as first-class
+//! values, and [`Style::to_taffy_style`] is the public bridge.
+//!
+//! The whole `taffy` crate is re-exported as [`crate::taffy`] so consumers
+//! don't need a separate dependency.
+//!
+//! # What this crate does NOT own
+//!
+//! - **Reactive runtime**: hosts bring their own signal/effect primitives.
+//!   The engine itself holds no reactive state.
+//! - **View tree / hit-test structure**: hosts own their node type
+//!   ([`floem::ViewId`], etc.) and keep a sidecar map to [`StyleNodeId`]
+//!   (the engine's slotmap-key identity).
+//! - **Rendering / input**: out of scope.
+//!
+//! # Integration
+//!
+//! A host drives the engine by:
+//! 1. Building a [`CascadeInputs`] each frame describing the viewport
+//!    (frame time, screen size, dark-mode flag), per-node interaction state,
+//!    and an [`AnimationBackend`].
+//! 2. Allocating a [`StyleNodeId`] per element via [`StyleTree::new_node`]
+//!    and wiring parent/children edges.
+//! 3. Pushing direct styles and classes via
+//!    [`StyleTree::set_direct_style`] / [`StyleTree::set_classes`].
+//! 4. Calling [`StyleTree::compute_style`] each frame, which runs the
+//!    cascade (animations, selector matching, inherited/class context
+//!    propagation) using the host-supplied [`CascadeInputs`].
+//! 5. Reading resolved values from the [`StyleNode`] and converting
+//!    layout-relevant ones to a [`taffy::style::Style`] via
+//!    [`Style::to_taffy_style`] before passing to taffy.
+//!
+//! See `tests/mock_sink.rs` and `tests/style_tree_cascade.rs` for
+//! end-to-end examples without floem.
+
+pub mod animation;
+pub mod builtin_props;
+pub mod cache;
+pub mod cascade;
+pub mod components;
+pub mod context_value;
+pub mod debug_view;
+pub mod design_system;
+pub mod easing;
+pub mod extractors;
+pub mod inspector_render;
+pub mod interaction;
+pub mod merge_id;
+pub mod prop_reader;
+pub mod prop_value;
+pub mod props;
+pub mod recalc;
+pub mod responsive;
+pub mod selectors;
+pub mod sink;
+pub mod style;
+// Holds only `#[macro_export]` macros, which surface at the crate root;
+// no user needs to name this module directly.
+pub(crate) mod style_macros;
+pub mod style_value;
+pub mod transition;
+pub mod tree;
+pub mod unit;
+pub(crate) mod value_impls;
+pub mod values;
+pub mod visibility;
+
+/// Re-export of the [`taffy`] crate. floem_style owns the style →
+/// layout-input bridge for taffy (see crate-level docs), so consumers
+/// can reach taffy types directly through `floem_style::taffy::...`
+/// without adding a separate dependency.
+pub use taffy;
+
+pub use builtin_props::{
+    AlignContent, AlignContentProp, AlignItems, AlignItemsProp, AlignSelf, AspectRatio,
+    Background, BorderBottom, BorderBottomColor, BorderBottomLeftRadius, BorderBottomRightRadius,
+    BorderLeft, BorderLeftColor, BorderProgress, BorderRight, BorderRightColor, BorderTop,
+    BorderTopColor, BorderTopLeftRadius, BorderTopRightRadius, BoxShadowProp, BoxSizing,
+    BoxSizingProp, ColGap, Cursor, CursorColor, Dimension, Disabled, Display, DisplayProp,
+    FlexBasis, FlexDirection, FlexDirectionProp, FlexGrow, FlexShrink, FlexWrap, FlexWrapProp,
+    Focusable, FontFamily, FontSize, FontStyle, FontWeight, Foreground, GridAutoColumns,
+    GridAutoFlow, GridAutoRows, GridColumn, GridRow, GridTemplateColumns, GridTemplateRows, Height,
+    InsetBottom, InsetLeft, InsetRight, InsetTop, IsFixed, JustifyContent, JustifyContentProp,
+    JustifyItems, JustifyItemsProp, JustifySelf, LineHeight, MarginBottom, MarginLeft, MarginRight,
+    MarginTop, MaxHeight, MaxWidth, MinHeight, MinWidth, ObjectFitProp, ObjectPositionProp,
+    Opacity, Outline, OutlineColor, OutlineProgress, OverflowX, OverflowY, PaddingBottom,
+    PaddingLeft, PaddingRight, PaddingTop, PointerEventsProp, Position, PositionProp, RotateAbout,
+    Rotation, RowGap, ScaleAbout, ScaleX, ScaleY, ScrollbarWidth, Selectable, Selected,
+    SelectionCornerRadius, TextAlignProp, TextColor, TextOverflowProp, Transform, TranslateX,
+    TranslateY, Width, ZIndex,
+};
+pub use animation::{
+    AnimStateCommand, AnimStateKind, Animation, AnimationEvents, KeyFrame, KeyFrameStyle,
+    PropCache, RepeatMode, ReverseOnce,
+};
+pub use cache::{CacheHit, CacheStats, StyleCache, StyleCacheKey};
+pub use cascade::resolve_nested_maps;
+pub use components::{Border, BorderColor, BorderRadius, BoxShadow, Margin, Padding};
+pub use context_value::ContextValue;
+pub use debug_view::PropDebugView;
+pub use design_system::DesignSystem;
+pub use easing::{Bezier, Easing, Linear, Spring, Step, StepPosition};
+pub use extractors::{FontProps, LayoutProps, TransformProps, ViewStyleProps};
+pub use inspector_render::InspectorRender;
+pub use interaction::{InheritedInteractionCx, InteractionState};
+pub use merge_id::{
+    combine_merge_ids, next_style_merge_id, DEFERRED_EFFECTS_INFO, DEFERRED_EFFECTS_KEY,
+};
+pub use prop_reader::{ExtractorField, PropExtractorCx};
+pub use prop_value::StylePropValue;
+pub use props::{
+    EqAnyFn, HashAnyFn, InterpolateFn, ResolveInheritedAnyFn, StyleClass, StyleClassInfo,
+    StyleClassRef, StyleDebugGroup, StyleDebugGroupInfo, StyleDebugGroupRef, StyleKey,
+    StyleKeyInfo, StyleProp, StylePropInfo, StylePropRef, RESPONSIVE_SELECTORS_INFO,
+    STRUCTURAL_SELECTORS_INFO,
+};
+pub use sink::{AnimationBackend, CascadeInputs, NoAnimationBackend, PerNodeInteraction};
+pub use style::{BuiltinStyle, ContextRef, DeferredStyleEffect, ExprStyle, Style};
+pub use style_value::{StyleMapValue, StyleValue};
+pub use transition::{ActiveTransition, DirectTransition, Transition, TransitionState};
+pub use tree::{StyleNode, StyleNodeId, StyleTree};
+pub use unit::LineHeightValue;
+pub use value_impls::AffineLerp;
+pub use values::{
+    CursorStyle, Focus, NoWrapOverflow, ObjectFit, ObjectPosition, PointerEvents, StrokeWrap,
+    TextOverflow,
+};
+pub use visibility::{Visibility, VisibilityPhase};
diff --git a/style/src/merge_id.rs b/style/src/merge_id.rs
new file mode 100644
index 000000000..dc378716c
--- /dev/null
+++ b/style/src/merge_id.rs
@@ -0,0 +1,31 @@
+//! Merge-id machinery for tracking style-map identity across cascades.
+//!
+//! Each mutation to a [`crate::Style`] increments the global counter; downstream
+//! consumers compare merge ids to know when to recompute derived state.
+
+use std::sync::atomic::{AtomicU64, Ordering};
+
+use crate::props::StyleKeyInfo;
+use crate::StyleKey;
+
+static NEXT_STYLE_MERGE_ID: AtomicU64 = AtomicU64::new(1);
+const MERGE_MIX_CONST: u64 = 0x9E3779B97F4A7C15;
+
+/// Static key referring to the deferred-effects slot in the style map.
+pub static DEFERRED_EFFECTS_INFO: StyleKeyInfo = StyleKeyInfo::DeferredEffects;
+pub const DEFERRED_EFFECTS_KEY: StyleKey = StyleKey {
+    info: &DEFERRED_EFFECTS_INFO,
+};
+
+/// Allocate a fresh merge id. Guaranteed unique for the lifetime of the
+/// process.
+#[inline]
+pub fn next_style_merge_id() -> u64 {
+    NEXT_STYLE_MERGE_ID.fetch_add(1, Ordering::Relaxed)
+}
+
+/// Combine two merge ids. Order-dependent so `combine(a, b) != combine(b, a)`.
+#[inline]
+pub fn combine_merge_ids(a: u64, b: u64) -> u64 {
+    a.rotate_left(13) ^ b.wrapping_mul(MERGE_MIX_CONST)
+}
diff --git a/style/src/prop_reader.rs b/style/src/prop_reader.rs
new file mode 100644
index 000000000..3a5194f70
--- /dev/null
+++ b/style/src/prop_reader.rs
@@ -0,0 +1,136 @@
+//! Property-reading abstractions used by `prop_extractor!`-generated structs.
+//!
+//! [`ExtractorField`] is the per-prop state slot the `prop_extractor!`
+//! macro embeds in each generated struct: it holds the last-read value and
+//! its transition state, and knows how to pull fresh values off a
+//! [`Style`].
+//!
+//! [`PropExtractorCx`] is the narrow host interface the convenience
+//! methods on extractor structs need — hosts implement it on whatever
+//! per-view context they hand to `.read(cx)` / `.read_style(cx, ..)`.
+
+use std::fmt::{self, Debug};
+use std::hash::Hasher;
+
+#[cfg(not(target_arch = "wasm32"))]
+use std::time::Instant;
+#[cfg(target_arch = "wasm32")]
+use web_time::Instant;
+
+use crate::props::StyleProp;
+use crate::style::Style;
+use crate::style_value::StyleValue;
+use crate::transition::TransitionState;
+
+// ============================================================================
+// ExtractorField
+// ============================================================================
+
+#[derive(Clone)]
+pub struct ExtractorField<P: StyleProp> {
+    value: P::Type,
+    transition: TransitionState<P::Type>,
+}
+
+impl<P: StyleProp> Debug for ExtractorField<P>
+where
+    P::Type: Debug,
+{
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        (&self.value, &self.transition).fmt(f)
+    }
+}
+
+impl<P: StyleProp> ExtractorField<P> {
+    /// Pull the current value of `P` off `style`, update the transition
+    /// state, and return whether the resolved value changed. Sets
+    /// `*request_transition` if a transition is currently animating.
+    pub fn read(&mut self, style: &Style, now: &Instant, request_transition: &mut bool) -> bool {
+        let style_value = style.get_prop_style_value::<P>();
+        let mut prop_animated = false;
+        let new = match style_value {
+            StyleValue::Context(_) => {
+                unreachable!("context values should resolve during property reads")
+            }
+            StyleValue::Animated(val) => {
+                *request_transition = true;
+                prop_animated = true;
+                val
+            }
+            StyleValue::Val(val) => val,
+            StyleValue::Unset | StyleValue::Base => P::default_value(),
+        };
+        self.transition.read(style.get_transition::<P>());
+
+        let changed = new != self.value;
+        if changed && !prop_animated {
+            self.transition.transition(&self.get(), &new);
+            self.value = new;
+        } else if prop_animated {
+            self.value = new;
+        }
+        changed | self.transition.step(now, request_transition)
+    }
+
+    /// Current resolved value, driven by the transition if one is active.
+    pub fn get(&self) -> P::Type {
+        self.transition.get(&self.value)
+    }
+
+    #[allow(clippy::new_without_default)]
+    pub fn new() -> Self {
+        Self {
+            value: P::default_value(),
+            transition: TransitionState::default(),
+        }
+    }
+}
+
+impl<P: StyleProp> PartialEq for ExtractorField<P>
+where
+    P::Type: PartialEq,
+{
+    fn eq(&self, other: &Self) -> bool {
+        self.get() == other.get()
+    }
+}
+
+impl<P: StyleProp> Eq for ExtractorField<P> where P::Type: Eq {}
+
+impl<P: StyleProp> std::hash::Hash for ExtractorField<P>
+where
+    P::Type: std::hash::Hash,
+{
+    fn hash<H: Hasher>(&self, state: &mut H) {
+        self.get().hash(state)
+    }
+}
+
+// ============================================================================
+// PropExtractorCx
+// ============================================================================
+
+/// Narrow host interface the `prop_extractor!`-generated convenience
+/// methods (`read`, `read_style`) need.
+///
+/// Hosts implement this on their per-view style context type (e.g.
+/// floem's `StyleCx`). A second host's context needs only to answer:
+///
+/// - "what time is it?" for transition ticks ([`Self::now`]),
+/// - "what style am I extracting from?" for the no-arg `read`
+///   convenience ([`Self::direct_style`]).
+///
+/// Transitions are reported as data: each generated method takes a
+/// `&mut bool` the extractor sets when a read is still animating, and
+/// the caller decides what to do (typically schedule a re-cascade on
+/// the node). No host callback fires during property extraction.
+///
+/// Keeps the `prop_extractor!` macro fully engine-defined — the
+/// macro's expansion references only this trait, never a host type.
+pub trait PropExtractorCx {
+    /// Frame timestamp used to advance in-flight transitions.
+    fn now(&self) -> Instant;
+    /// The merged direct style the extractor reads from when no
+    /// explicit style is passed.
+    fn direct_style(&self) -> &Style;
+}
diff --git a/style/src/prop_value.rs b/style/src/prop_value.rs
new file mode 100644
index 000000000..8be2e1a12
--- /dev/null
+++ b/style/src/prop_value.rs
@@ -0,0 +1,49 @@
+//! The [`StylePropValue`] trait — the common interface the engine uses for
+//! every value stored on a [`crate::Style`] map.
+//!
+//! Hosts typically don't implement this directly; instead the `prop!` macro
+//! in floem proper registers property types that already carry this bound
+//! on their value type.
+
+use std::fmt::Debug;
+
+pub trait StylePropValue: Clone + PartialEq + Debug {
+    fn interpolate(&self, _other: &Self, _value: f64) -> Option<Self> {
+        None
+    }
+
+    /// Compute a content-based hash for this value.
+    ///
+    /// This hash is used for style caching — identical values should produce
+    /// identical hashes. The default implementation uses the `Debug`
+    /// representation, which works for most types but allocates. Types should
+    /// override this for better performance.
+    fn content_hash(&self) -> u64 {
+        use std::hash::{Hash, Hasher};
+        let mut hasher = rustc_hash::FxHasher::default();
+        let debug_str = format!("{:?}", self);
+        debug_str.hash(&mut hasher);
+        hasher.finish()
+    }
+}
+
+/// Hash a type that implements `Hash` using FxHasher.
+#[inline]
+pub fn hash_value<T: std::hash::Hash>(val: &T) -> u64 {
+    use std::hash::Hasher;
+    let mut h = rustc_hash::FxHasher::default();
+    val.hash(&mut h);
+    h.finish()
+}
+
+/// Hash an `f32` by its bit representation.
+#[inline]
+pub fn hash_f32(v: f32) -> u64 {
+    hash_value(&v.to_bits())
+}
+
+/// Hash an `f64` by its bit representation.
+#[inline]
+pub fn hash_f64(v: f64) -> u64 {
+    hash_value(&v.to_bits())
+}
diff --git a/style/src/props.rs b/style/src/props.rs
new file mode 100644
index 000000000..7a79b989f
--- /dev/null
+++ b/style/src/props.rs
@@ -0,0 +1,284 @@
+//! Style property traits, classes, and keys.
+//!
+//! This module provides the view-agnostic core of Floem's style property
+//! system:
+//! - [`StyleClass`] / [`StyleDebugGroup`] / [`StyleProp`] traits for defining
+//!   styles.
+//! - [`StyleKey`] / [`StyleKeyInfo`] — unique identifier for style entries.
+//! - [`StylePropInfo`] / [`StyleClassInfo`] / [`StyleDebugGroupInfo`] —
+//!   reflective metadata for each kind of key.
+//!
+//! The `style_class!`, `prop!`, and `style_debug_group!` macros live in this
+//! crate (see `props.rs` and `style_macros.rs`). `prop_extractor!` remains
+//! in the `floem` crate because it references `floem::context::StyleCx`.
+//! `StylePropInfo`'s fields are `pub` rather than hidden behind a `new`
+//! constructor because those macros construct it directly.
+
+use std::any::Any;
+use std::fmt::{self, Debug};
+use std::hash::{Hash, Hasher};
+use std::ptr;
+use std::rc::Rc;
+
+use crate::selectors::StyleSelectors;
+
+// ============================================================================
+// StyleClass
+// ============================================================================
+
+pub trait StyleClass: Default + Copy + 'static {
+    fn key() -> StyleKey;
+    fn class_ref() -> StyleClassRef {
+        StyleClassRef { key: Self::key() }
+    }
+}
+
+/// Declare a style class marker type.
+///
+/// Expands to a zero-sized struct that implements [`StyleClass`] by installing
+/// a unique `'static` [`StyleKeyInfo::Class`] and returning a [`StyleKey`]
+/// pointing at it.
+#[macro_export]
+macro_rules! style_class {
+    ($(#[$meta:meta])* $v:vis $name:ident) => {
+        $(#[$meta])*
+        #[derive(Default, Copy, Clone)]
+        $v struct $name;
+
+        impl $crate::StyleClass for $name {
+            fn key() -> $crate::StyleKey {
+                static INFO: $crate::StyleKeyInfo = $crate::StyleKeyInfo::Class(
+                    $crate::StyleClassInfo::new::<$name>()
+                );
+                $crate::StyleKey { info: &INFO }
+            }
+        }
+    };
+}
+
+/// A trait for defining a logical grouping of [`StyleProp`] entries for the
+/// style inspector. The group can provide a compact inspector preview that
+/// summarises the group's members.
+pub trait StyleDebugGroup: Default + Copy + 'static {
+    fn key() -> StyleKey;
+    fn group_ref() -> StyleDebugGroupRef {
+        StyleDebugGroupRef { key: Self::key() }
+    }
+    fn member_props() -> Vec<StyleKey>;
+    /// Render the inspector preview for this group. The `style` argument is
+    /// type-erased as `&dyn Any` because this trait lives in `floem_style`
+    /// which does not know about `floem::style::Style`; callers in `floem`
+    /// pass `&Style` and implementors (generated by `style_debug_group!`)
+    /// downcast it.
+    fn debug_view(style: &dyn Any) -> Option<Box<dyn Any>>;
+}
+
+#[derive(Debug, Clone)]
+pub struct StyleClassInfo {
+    pub name: fn() -> &'static str,
+}
+
+impl StyleClassInfo {
+    pub const fn new<Name>() -> Self {
+        StyleClassInfo {
+            name: || std::any::type_name::<Name>(),
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, PartialEq)]
+pub struct StyleClassRef {
+    pub key: StyleKey,
+}
+
+#[derive(Debug, Clone)]
+pub struct StyleDebugGroupInfo {
+    pub name: fn() -> &'static str,
+    pub inherited: bool,
+    pub member_props: fn() -> Vec<StyleKey>,
+    /// Render an inspector preview for this group. `style` is passed as
+    /// `&dyn Any` to avoid a dependency on `floem::style::Style` (it's
+    /// the concrete `Style`); the function body downcasts it back.
+    pub debug_view: fn(style: &dyn Any) -> Option<Box<dyn Any>>,
+}
+
+impl StyleDebugGroupInfo {
+    pub const fn new<Name>(
+        inherited: bool,
+        member_props: fn() -> Vec<StyleKey>,
+        debug_view: fn(style: &dyn Any) -> Option<Box<dyn Any>>,
+    ) -> Self {
+        StyleDebugGroupInfo {
+            name: || std::any::type_name::<Name>(),
+            inherited,
+            member_props,
+            debug_view,
+        }
+    }
+}
+
+#[derive(Copy, Clone, Debug, Eq, PartialEq, Hash)]
+pub struct StyleDebugGroupRef {
+    pub key: StyleKey,
+}
+
+// ============================================================================
+// StyleProp
+// ============================================================================
+
+use crate::prop_value::StylePropValue;
+
+pub trait StyleProp: Default + Copy + 'static {
+    type Type: StylePropValue;
+    fn key() -> StyleKey;
+    fn prop_ref() -> StylePropRef {
+        StylePropRef { key: Self::key() }
+    }
+    fn default_value() -> Self::Type;
+}
+
+pub type InterpolateFn =
+    fn(val1: &dyn Any, val2: &dyn Any, time: f64) -> Option<Rc<dyn Any>>;
+
+/// Function pointer type for computing content hash of a style value.
+pub type HashAnyFn = fn(val: &dyn Any) -> u64;
+
+/// Function pointer type for comparing two style values for equality.
+pub type EqAnyFn = fn(val1: &dyn Any, val2: &dyn Any) -> bool;
+
+/// Function pointer type for resolving a stored inherited property into a
+/// concrete value. `style` is passed type-erased as `&dyn Any` so this
+/// function pointer type does not need to name a concrete `Style`; the
+/// `prop!` macro's expansion downcasts it back to [`crate::Style`].
+pub type ResolveInheritedAnyFn = fn(val: &dyn Any, style: &dyn Any) -> Rc<dyn Any>;
+
+/// Function pointer type for rendering a property's inspector preview. The
+/// renderer is passed as `&dyn InspectorRender` so hosts can provide their
+/// own widget-building logic; the returned value is type-erased as
+/// `Box<dyn Any>` and downcast by the caller to the host's view type.
+pub type DebugViewFn =
+    fn(val: &dyn Any, r: &dyn crate::InspectorRender) -> Option<Box<dyn Any>>;
+
+#[derive(Debug)]
+pub struct StylePropInfo {
+    pub name: fn() -> &'static str,
+    pub inherited: bool,
+    #[allow(unused)]
+    pub default_as_any: fn() -> Rc<dyn Any>,
+    pub interpolate: InterpolateFn,
+    pub debug_any: fn(val: &dyn Any) -> String,
+    /// Render an inspector preview for this property value.
+    ///
+    /// Takes `&dyn InspectorRender` so the renderer is chosen by the caller,
+    /// keeping this crate free of view-layer dependencies. Floem hosts pass
+    /// their concrete `FloemInspectorRender`; other hosts can pass their own.
+    pub debug_view: DebugViewFn,
+    pub transition_key: StyleKey,
+    /// Computes a content-based hash for a style value.
+    pub hash_any: HashAnyFn,
+    /// Compares two style values for equality.
+    pub eq_any: EqAnyFn,
+    /// Resolves a stored property value for inheritance propagation.
+    pub resolve_inherited_any: ResolveInheritedAnyFn,
+}
+
+#[derive(Copy, Clone, Debug, Eq, PartialEq, Hash)]
+pub struct StylePropRef {
+    pub key: StyleKey,
+}
+
+impl StylePropRef {
+    pub fn info(&self) -> &StylePropInfo {
+        if let StyleKeyInfo::Prop(prop) = self.key.info {
+            prop
+        } else {
+            panic!()
+        }
+    }
+}
+
+// ============================================================================
+// StyleKey
+// ============================================================================
+
+#[derive(Debug)]
+pub enum StyleKeyInfo {
+    Transition,
+    Prop(StylePropInfo),
+    Selector(StyleSelectors),
+    Class(StyleClassInfo),
+    DebugGroup(StyleDebugGroupInfo),
+    DeferredEffects,
+    /// Storage for parameterized structural selectors (`:first-child`,
+    /// `:nth-child(...)`, etc.).
+    StructuralSelectors,
+    /// Storage for parameterized responsive selectors (`min/max/range` window
+    /// width).
+    ResponsiveSelectors,
+}
+
+pub static STRUCTURAL_SELECTORS_INFO: StyleKeyInfo = StyleKeyInfo::StructuralSelectors;
+pub static RESPONSIVE_SELECTORS_INFO: StyleKeyInfo = StyleKeyInfo::ResponsiveSelectors;
+
+#[derive(Copy, Clone)]
+pub struct StyleKey {
+    pub info: &'static StyleKeyInfo,
+}
+
+impl StyleKey {
+    pub fn debug_any(&self, value: &dyn Any) -> String {
+        match self.info {
+            StyleKeyInfo::Selector(selectors) => selectors.debug_string(),
+            StyleKeyInfo::Transition
+            | StyleKeyInfo::DebugGroup(_)
+            | StyleKeyInfo::DeferredEffects
+            | StyleKeyInfo::StructuralSelectors
+            | StyleKeyInfo::ResponsiveSelectors => String::new(),
+            StyleKeyInfo::Class(info) => (info.name)().to_string(),
+            StyleKeyInfo::Prop(v) => (v.debug_any)(value),
+        }
+    }
+    pub fn inherited(&self) -> bool {
+        match self.info {
+            StyleKeyInfo::Selector(..)
+            | StyleKeyInfo::Transition
+            | StyleKeyInfo::DeferredEffects
+            | StyleKeyInfo::StructuralSelectors
+            | StyleKeyInfo::ResponsiveSelectors => false,
+            StyleKeyInfo::Class(..) => true,
+            StyleKeyInfo::DebugGroup(v) => v.inherited,
+            StyleKeyInfo::Prop(v) => v.inherited,
+        }
+    }
+}
+
+impl PartialEq for StyleKey {
+    fn eq(&self, other: &Self) -> bool {
+        ptr::eq(self.info, other.info)
+    }
+}
+
+impl Hash for StyleKey {
+    fn hash<H: Hasher>(&self, state: &mut H) {
+        state.write_usize(self.info as *const _ as usize)
+    }
+}
+
+impl Eq for StyleKey {}
+
+impl Debug for StyleKey {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self.info {
+            StyleKeyInfo::Selector(selectors) => {
+                write!(f, "selectors: {}", selectors.debug_string())
+            }
+            StyleKeyInfo::Transition => write!(f, "transition"),
+            StyleKeyInfo::DeferredEffects => write!(f, "DeferredEffects"),
+            StyleKeyInfo::StructuralSelectors => write!(f, "StructuralSelectors"),
+            StyleKeyInfo::ResponsiveSelectors => write!(f, "ResponsiveSelectors"),
+            StyleKeyInfo::Class(v) => write!(f, "{}", (v.name)()),
+            StyleKeyInfo::DebugGroup(v) => write!(f, "{}", (v.name)()),
+            StyleKeyInfo::Prop(v) => write!(f, "{}", (v.name)()),
+        }
+    }
+}
diff --git a/src/style/recalc.rs b/style/src/recalc.rs
similarity index 90%
rename from src/style/recalc.rs
rename to style/src/recalc.rs
index a27b1b4f6..f7c7da969 100644
--- a/src/style/recalc.rs
+++ b/style/src/recalc.rs
@@ -12,10 +12,9 @@
 //! The existing [`ChangeFlags`] are binary: a view either needs style recalc or doesn't.
 //! [`StyleRecalcChange`] adds *why* the recalc is needed, enabling optimization decisions.
 
-use crate::{
-    ElementId,
-    style::{StyleClassRef, StyleSelector, StyleSelectors},
-};
+use crate::props::StyleClassRef;
+use crate::selectors::{StyleSelector, StyleSelectors};
+use crate::tree::StyleNodeId;
 
 use bitflags::bitflags;
 use smallvec::SmallVec;
@@ -39,10 +38,10 @@ bitflags! {
         const TRANSITION = 1 << 2;
 
         /// One or more specific sub-element rectangles owned by this view need restyling,
-        /// identified by their `ElementId`. Used when a view owns multiple `ElementId`s
+        /// identified by their `StyleNodeId`. Used when a view owns multiple style nodes
         /// (e.g. a scroll view's content area, vertical scrollbar, horizontal scrollbar)
         /// and only a subset need to be updated. The `targets` vec carries each affected
-        /// `ElementId` and the `StyleReasonSet` describing why that specific element is dirty,
+        /// `StyleNodeId` and the `StyleReasonSet` describing why that specific element is dirty,
         /// allowing `style_pass` to dispatch targeted updates rather than fully restyling
         /// the entire view.
         const TARGET = 1 << 3;
@@ -91,15 +90,13 @@ pub struct StyleReason {
     pub classes_changed: Option<SmallVec<[StyleClassRef; 4]>>,
 
     /// Sub-element rectangles owned by this view that need targeted restyling.
-    /// Each entry is `(element_id, reason)` where `element_id` identifies a specific
-    /// box-tree rectangle (e.g. the vertical scrollbar of a scroll view) and `reason`
+    /// Each entry is `(style_node, reason)` where `style_node` identifies a specific
+    /// style-tree node (e.g. the vertical scrollbar of a scroll view) and `reason`
     /// describes why that rectangle is dirty (typically `SELECTOR` due to hover/press
     /// state change on that specific hit region).
     ///
-    /// Present when `TARGET` is set. `SmallVec<2>` because most views with sub-elements
-    /// have only a small fixed number of them (e.g. scroll view has 3 total, rarely more
-    /// than 2 dirty simultaneously).
-    pub targets: Vec<(crate::ElementId, StyleReason)>,
+    /// Present when `TARGET` is set.
+    pub targets: Vec<(StyleNodeId, StyleReason)>,
 }
 
 impl StyleReason {
@@ -163,7 +160,7 @@ impl StyleReason {
         self.selectors = Some(selectors);
     }
 
-    pub fn add_target(&mut self, id: crate::ElementId, reason: StyleReason) {
+    pub fn add_target(&mut self, id: StyleNodeId, reason: StyleReason) {
         self.flags |= StyleReasonFlags::TARGET;
         self.targets.push((id, reason));
     }
@@ -259,11 +256,11 @@ impl StyleReason {
         self.flags.contains(StyleReasonFlags::TARGET)
     }
 
-    pub fn has_target_id(&self, id: crate::ElementId) -> bool {
+    pub fn has_target_id(&self, id: StyleNodeId) -> bool {
         self.targets.iter().any(|(tid, _)| *tid == id)
     }
 
-    pub fn target_reason(&self, id: crate::ElementId) -> Option<&StyleReason> {
+    pub fn target_reason(&self, id: StyleNodeId) -> Option<&StyleReason> {
         self.targets
             .iter()
             .find(|(tid, _)| *tid == id)
@@ -337,7 +334,7 @@ impl StyleReason {
         }
     }
 
-    pub fn clear_target(&mut self, id: crate::ElementId) {
+    pub fn clear_target(&mut self, id: StyleNodeId) {
         self.targets.retain(|(tid, _)| *tid != id);
         if self.targets.is_empty() {
             self.flags.remove(StyleReasonFlags::TARGET);
@@ -368,15 +365,15 @@ impl StyleReason {
         out
     }
 
-    pub fn with_target(element_id: ElementId, reason: StyleReason) -> Self {
+    pub fn with_target(node: StyleNodeId, reason: StyleReason) -> Self {
         let mut s = Self::empty();
-        s.add_target(element_id, reason);
+        s.add_target(node, reason);
         s
     }
 
-    pub fn with_selectors_and_target(element_id: ElementId, selectors: StyleSelectors) -> Self {
+    pub fn with_selectors_and_target(node: StyleNodeId, selectors: StyleSelectors) -> Self {
         let inner = StyleReason::with_selectors(selectors);
-        Self::with_target(element_id, inner)
+        Self::with_target(node, inner)
     }
 
     /// All flags set — forces a full recalc with no fast paths possible.
diff --git a/src/layout/responsive.rs b/style/src/responsive.rs
similarity index 98%
rename from src/layout/responsive.rs
rename to style/src/responsive.rs
index 9350062fa..b4264026a 100644
--- a/src/layout/responsive.rs
+++ b/style/src/responsive.rs
@@ -49,7 +49,7 @@ impl Default for GridBreakpoints {
 }
 
 impl GridBreakpoints {
-    pub(crate) fn get_width_bp(&self, width: f64) -> ScreenSizeBp {
+    pub fn get_width_bp(&self, width: f64) -> ScreenSizeBp {
         if self.xs.contains(&width) {
             return ScreenSizeBp::Xs;
         }
@@ -133,7 +133,7 @@ impl ScreenSize {
         Self { flags }
     }
 
-    pub(crate) fn breakpoints(&self) -> Vec<ScreenSizeBp> {
+    pub fn breakpoints(&self) -> Vec<ScreenSizeBp> {
         let mut breakpoints = vec![];
 
         if self.flags.contains(SizeFlags::XS) {
diff --git a/src/style/selectors.rs b/style/src/selectors.rs
similarity index 69%
rename from src/style/selectors.rs
rename to style/src/selectors.rs
index 10f9444e4..60c002e9d 100644
--- a/src/style/selectors.rs
+++ b/style/src/selectors.rs
@@ -170,7 +170,7 @@ impl StyleSelectors {
         self.contains(selector.flag())
     }
 
-    pub(crate) const fn responsive(self) -> Self {
+    pub const fn responsive(self) -> Self {
         self.union(StyleSelectors::RESPONSIVE)
     }
 
@@ -211,3 +211,72 @@ impl std::fmt::Debug for StyleSelectors {
         write!(f, "StyleSelectors({})", self.debug_string())
     }
 }
+
+// ────────────────────────────────────────────────────────────────────────────
+// Selector -> StyleKey plumbing
+// ────────────────────────────────────────────────────────────────────────────
+
+use crate::StyleKey;
+
+/// Helper macro for declaring selector-backed [`StyleKey`]s as static items.
+///
+/// The resulting function returns a `StyleKey` whose `info` points to a
+/// `'static` [`StyleKeyInfo::Selector`] for the given selector set.
+#[macro_export]
+macro_rules! style_key_selector {
+    ($v:vis $name:ident, $sel:expr) => {
+        fn $name() -> $crate::StyleKey {
+            static INFO: $crate::props::StyleKeyInfo = $crate::props::StyleKeyInfo::Selector($sel);
+            $crate::StyleKey { info: &INFO }
+        }
+    };
+}
+
+style_key_selector!(hover, StyleSelectors::empty().set_selector(StyleSelector::Hover, true));
+style_key_selector!(
+    file_hover,
+    StyleSelectors::empty().set_selector(StyleSelector::FileHover, true)
+);
+style_key_selector!(focus, StyleSelectors::empty().set_selector(StyleSelector::Focus, true));
+style_key_selector!(
+    focus_visible,
+    StyleSelectors::empty().set_selector(StyleSelector::FocusVisible, true)
+);
+style_key_selector!(
+    focus_within,
+    StyleSelectors::empty().set_selector(StyleSelector::FocusWithin, true)
+);
+style_key_selector!(
+    disabled,
+    StyleSelectors::empty().set_selector(StyleSelector::Disabled, true)
+);
+style_key_selector!(active, StyleSelectors::empty().set_selector(StyleSelector::Active, true));
+style_key_selector!(
+    dragging,
+    StyleSelectors::empty().set_selector(StyleSelector::Dragging, true)
+);
+style_key_selector!(
+    selected,
+    StyleSelectors::empty().set_selector(StyleSelector::Selected, true)
+);
+style_key_selector!(
+    darkmode,
+    StyleSelectors::empty().set_selector(StyleSelector::DarkMode, true)
+);
+
+impl StyleSelector {
+    pub fn to_key(self) -> StyleKey {
+        match self {
+            StyleSelector::Hover => hover(),
+            StyleSelector::Focus => focus(),
+            StyleSelector::FocusVisible => focus_visible(),
+            StyleSelector::FocusWithin => focus_within(),
+            StyleSelector::Disabled => disabled(),
+            StyleSelector::Active => active(),
+            StyleSelector::Dragging => dragging(),
+            StyleSelector::Selected => selected(),
+            StyleSelector::DarkMode => darkmode(),
+            StyleSelector::FileHover => file_hover(),
+        }
+    }
+}
diff --git a/style/src/sink.rs b/style/src/sink.rs
new file mode 100644
index 000000000..a1fdd6285
--- /dev/null
+++ b/style/src/sink.rs
@@ -0,0 +1,115 @@
+//! Inputs and the animation-backend policy hook the cascade takes at
+//! call time.
+//!
+//! [`compute_style`](crate::StyleTree::compute_style) matches taffy's
+//! shape: reads flow in through [`CascadeInputs`] (values + one closure
+//! for per-node interaction state), and the only host-pluggable
+//! during-cascade callback is [`AnimationBackend`] — the hook a native
+//! host overrides to delegate animation ticking to the platform's
+//! compositor instead of the tree's CPU ticker.
+//!
+//! Everything else the cascade might want to tell the host — fixed-
+//! element transitions, dirtied descendants, layout invalidations,
+//! schedule-me-next-frame, animation lifecycle events — lands in
+//! tree-owned state the host drains via `tree.take_*` calls after
+//! `compute_style` returns. No mid-cascade callbacks for pure
+//! notifications.
+
+use crate::interaction::InteractionState;
+use crate::responsive::ScreenSizeBp;
+use crate::style::Style;
+use crate::tree::StyleNodeId;
+
+#[cfg(not(target_arch = "wasm32"))]
+use std::time::Instant;
+#[cfg(target_arch = "wasm32")]
+use web_time::Instant;
+
+/// The five pseudo-class input bits the cascade reads per node.
+///
+/// Hosts materialize one of these for each dirty node the cascade
+/// visits, via the [`CascadeInputs::interactions`] closure. Splitting
+/// the per-node state from global reads (dark-mode, theme, etc.) keeps
+/// the hot callback narrow.
+#[derive(Debug, Default, Clone, Copy)]
+pub struct PerNodeInteraction {
+    pub is_hovered: bool,
+    pub is_focused: bool,
+    pub is_focus_within: bool,
+    pub is_active: bool,
+    pub is_file_hover: bool,
+}
+
+/// The animation policy hook.
+///
+/// `apply` runs during [`StyleTree::compute_style`] on every dirty node
+/// after the cascade has resolved `combined`, before inherited context
+/// is derived. Hosts that keep their own per-view animation registry
+/// (floem today, via `ViewState.animations`) tick them here and fold
+/// results into `combined`. Native-offload backends register the
+/// animation with the platform's compositor on first sight and return
+/// `false` afterwards — the compositor drives interpolation separately.
+///
+/// Returns `true` while any animation is still active. The cascade
+/// records the node in its schedule set so the host brings it back
+/// next frame.
+///
+/// Receives `&self` rather than `&mut self` because floem's impl
+/// mutates through `RefCell`-backed view state. Backends that need
+/// internal mutation use interior mutability (`RefCell`, `Cell`,
+/// atomics for native-shared state).
+///
+/// The default impl is a no-op — standalone hosts and tests that
+/// don't animate anything can omit it and the cascade sees no
+/// animation work.
+pub trait AnimationBackend {
+    fn apply(
+        &self,
+        _node: StyleNodeId,
+        _combined: &mut Style,
+        _interact: &mut InteractionState,
+    ) -> bool {
+        false
+    }
+}
+
+/// An [`AnimationBackend`] that does nothing. Handy when a host wants
+/// to use tree-stored animations exclusively, or for tests that don't
+/// exercise animations.
+pub struct NoAnimationBackend;
+impl AnimationBackend for NoAnimationBackend {}
+
+/// Everything [`StyleTree::compute_style`](crate::StyleTree::compute_style)
+/// needs from the host.
+///
+/// Every read is a plain value (`Copy` or `&Style`) except the per-node
+/// interaction lookup, which has to call back into host state — that
+/// one comes through a closure. The single active policy callback is
+/// [`animations`](Self::animations); all other engine-detected facts
+/// land in tree-owned state the host drains after `compute_style`
+/// returns.
+pub struct CascadeInputs<'a> {
+    /// Frame-wide time snapshot. Used for transition progress.
+    pub frame_start: Instant,
+    /// Responsive breakpoint the root matched this frame.
+    pub screen_size_bp: ScreenSizeBp,
+    /// Whether the host is in keyboard-navigation mode (for
+    /// `:focus-visible` resolution).
+    pub keyboard_navigation: bool,
+    /// Root width in logical pixels. Used by relative-unit resolution
+    /// (`Pct`) that takes the viewport as its basis.
+    pub root_size_width: f64,
+    /// System-dark-mode flag.
+    pub is_dark_mode: bool,
+    /// Class map the root inherits from (floem: default theme's classes).
+    pub default_theme_classes: &'a Style,
+    /// Inherited-style map the root inherits from.
+    pub default_theme_inherited: &'a Style,
+    /// Per-node interaction state. Called for every dirty node the
+    /// cascade visits; returns the five pseudo-class bits.
+    pub interactions: &'a dyn Fn(StyleNodeId) -> PerNodeInteraction,
+    /// Animation policy hook. Defaulting to `NoAnimationBackend` is
+    /// fine — hosts that don't animate don't need to wire anything
+    /// beyond that.
+    pub animations: &'a dyn AnimationBackend,
+}
diff --git a/style/src/style.rs b/style/src/style.rs
new file mode 100644
index 000000000..6368aa76e
--- /dev/null
+++ b/style/src/style.rs
@@ -0,0 +1,1331 @@
+//! The [`Style`] map, its helpers, and expression-style counterpart.
+//!
+//! [`Style`] is the core hashmap of style keys to erased values that the
+//! cascade consumes. It also carries the inherited-context map, the
+//! deterministic merge id, and cached flags used for fast-path early-exits.
+//!
+//! [`ExprStyle`] is a thin wrapper that accepts [`ContextValue`]-typed setters
+//! and merges into a [`Style`] when built. [`ContextRef<P>`] is the companion
+//! zero-sized marker for reading a context prop.
+//!
+//! [`DeferredStyleEffect`] packages a closure that runs during
+//! `resolve_nested_maps` to let host code observe resolved context values.
+//!
+//! [`BuiltinStyle`] is the `Style`-derived getter façade; its getter methods
+//! are generated by `define_builtin_props!` in [`crate::builtin_props`].
+
+use std::any::Any;
+use std::collections::HashMap;
+use std::fmt::{self, Debug};
+use std::marker::PhantomData;
+use std::rc::Rc;
+
+use rustc_hash::FxHashMap;
+use smallvec::SmallVec;
+
+use crate::cascade::{
+    fx_hash_map_with_capacity, responsive_selectors_key, structural_selectors_key, take_any,
+    ResponsiveSelector, ResponsiveSelectorRules, ResponsiveSelectors, StructuralSelectorRules,
+    StructuralSelectors,
+};
+use crate::context_value::ContextValue;
+use crate::merge_id::{combine_merge_ids, next_style_merge_id, DEFERRED_EFFECTS_KEY};
+use crate::props::{
+    StyleClass, StyleClassRef, StyleDebugGroup, StyleKey, StyleKeyInfo, StyleProp, StylePropRef,
+};
+use crate::responsive::ScreenSize;
+use crate::selectors::{NthChild, StructuralSelector, StyleSelector, StyleSelectors};
+use crate::style_value::{StyleMapValue, StyleValue};
+use crate::transition::Transition;
+use crate::unit::Pt;
+
+#[derive(Clone)]
+pub struct DeferredStyleEffect {
+    run: Rc<dyn Fn(&Style)>,
+}
+
+impl DeferredStyleEffect {
+    #[doc(hidden)]
+    pub fn new(run: impl Fn(&Style) + 'static) -> Self {
+        Self { run: Rc::new(run) }
+    }
+
+    fn run(&self, style: &Style) {
+        (self.run)(style);
+    }
+}
+
+#[derive(Clone, Default, Debug)]
+pub struct ExprStyle {
+    pub(crate) style: Style,
+}
+
+impl From<Style> for ExprStyle {
+    fn from(style: Style) -> Self {
+        Self { style }
+    }
+}
+
+impl From<ExprStyle> for Style {
+    fn from(style: ExprStyle) -> Self {
+        style.style
+    }
+}
+
+#[derive(Debug, Clone, Copy, Default)]
+pub struct ContextRef<P: StyleProp> {
+    _marker: PhantomData<P>,
+}
+
+impl<P: StyleProp> ContextRef<P> {
+    /// Create a deferred value from the current context prop.
+    ///
+    /// This is for producing another style value from context, such as
+    /// `font_size(fs.def(|fs| fs * 0.85))` or `background(t.def(|t| t.bg_base()))`.
+    ///
+    /// You can read `def` either as "function definition" or as shorthand for
+    /// "defer": it packages a closure that will be evaluated later when the
+    /// resulting value is needed.
+    ///
+    /// The closure is evaluated only if the property using the returned [`ContextValue`]
+    /// is actually read later. It does not run eagerly during `resolve_nested_maps`, so
+    /// it should not be used for side effects that must always happen during style
+    /// resolution. Use [`Style::defer`] for that.
+    pub fn def<T>(self, f: impl Fn(P::Type) -> T + 'static) -> ContextValue<T>
+    where
+        P::Type: 'static,
+        T: 'static,
+    {
+        ContextValue::new(move |style: &Style| {
+            let value = style.get_prop::<P>().unwrap_or_else(P::default_value);
+            f(value)
+        })
+    }
+
+    pub fn map<T>(self, f: impl Fn(P::Type) -> T + 'static) -> ContextValue<T>
+    where
+        P::Type: 'static,
+        T: 'static,
+    {
+        self.def(f)
+    }
+
+    pub(crate) fn into_deferred(self, f: impl Fn(P::Type) + 'static) -> DeferredStyleEffect
+    where
+        P::Type: 'static,
+    {
+        let effect = self.def(move |value| {
+            f(value);
+        });
+        DeferredStyleEffect::new(move |style| {
+            effect.resolve_erased(style as &dyn Any);
+        })
+    }
+}
+
+impl ExprStyle {
+    pub fn new() -> Self {
+        Self {
+            style: Style::new(),
+        }
+    }
+
+    pub fn build(self) -> Style {
+        self.style
+    }
+
+    pub fn map(self, over: impl FnOnce(Self) -> Self) -> Self {
+        over(self)
+    }
+
+    pub(crate) fn merge(mut self, over: Style) -> Self {
+        self.style.apply_mut(&over);
+        self
+    }
+
+    pub fn apply_if(self, cond: bool, f: impl FnOnce(Self) -> Self) -> Self {
+        if cond { f(self) } else { self }
+    }
+
+    pub fn set<P: StyleProp>(mut self, prop: P, value: impl Into<StyleValue<P::Type>>) -> Self {
+        self.style = self.style.set_style_value(prop, value.into());
+        self
+    }
+
+    pub fn set_context<P: StyleProp>(mut self, prop: P, value: ContextValue<P::Type>) -> Self {
+        self.style = self.style.set_context(prop, value);
+        self
+    }
+
+    pub fn set_from_context<C: StyleProp, P: StyleProp>(
+        mut self,
+        prop: P,
+        context: ContextRef<C>,
+        f: impl Fn(C::Type) -> P::Type + 'static,
+    ) -> Self
+    where
+        C::Type: 'static,
+        P::Type: 'static,
+    {
+        self.style = self.style.set_from_context(prop, context, f);
+        self
+    }
+
+    pub fn set_context_opt<P: StyleProp<Type = Option<T>>, T: 'static>(
+        mut self,
+        prop: P,
+        value: ContextValue<Option<T>>,
+    ) -> Self {
+        self.style = self.style.set_context_opt(prop, value);
+        self
+    }
+
+    pub fn set_from_context_opt<C: StyleProp, P: StyleProp<Type = Option<T>>, T: 'static>(
+        mut self,
+        prop: P,
+        context: ContextRef<C>,
+        f: impl Fn(C::Type) -> Option<T> + 'static,
+    ) -> Self
+    where
+        C::Type: 'static,
+    {
+        self.style = self.style.set_from_context_opt(prop, context, f);
+        self
+    }
+
+    pub fn with<P: StyleProp>(self, f: impl FnOnce(ExprStyle, ContextRef<P>) -> ExprStyle) -> Self {
+        f(self, ContextRef::default())
+    }
+
+    pub fn hover(self, style: impl FnOnce(ExprStyle) -> ExprStyle) -> Self {
+        self.merge(Style::default().hover(|s| style(s.into()).into()))
+    }
+
+    pub fn focus(self, style: impl FnOnce(ExprStyle) -> ExprStyle) -> Self {
+        self.merge(Style::default().focus(|s| style(s.into()).into()))
+    }
+
+    pub fn focus_visible(self, style: impl FnOnce(ExprStyle) -> ExprStyle) -> Self {
+        self.merge(Style::default().focus_visible(|s| style(s.into()).into()))
+    }
+
+    pub fn focus_within(self, style: impl FnOnce(ExprStyle) -> ExprStyle) -> Self {
+        self.merge(Style::default().focus_within(|s| style(s.into()).into()))
+    }
+
+    pub fn active(self, style: impl FnOnce(ExprStyle) -> ExprStyle) -> Self {
+        self.merge(Style::default().active(|s| style(s.into()).into()))
+    }
+
+    pub fn disabled(self, style: impl FnOnce(ExprStyle) -> ExprStyle) -> Self {
+        self.merge(Style::default().disabled(|s| style(s.into()).into()))
+    }
+
+    pub fn class<C: StyleClass>(
+        self,
+        class: C,
+        style: impl FnOnce(ExprStyle) -> ExprStyle,
+    ) -> Self {
+        self.merge(Style::default().class(class, |s| style(s.into()).into()))
+    }
+}
+
+#[derive(Clone)]
+pub struct Style {
+    #[doc(hidden)]
+    pub map: Rc<FxHashMap<StyleKey, Rc<dyn Any>>>,
+    #[doc(hidden)]
+    pub inherited_context: Option<Rc<FxHashMap<StyleKey, Rc<dyn Any>>>>,
+    /// Deterministic identity for style merges.
+    merge_id: u64,
+    /// Cached flag indicating whether this style contains any class maps.
+    /// This enables O(1) early-exit in `apply_only_class_maps` for the common case
+    /// where a view's style has no class definitions.
+    has_class_maps: bool,
+    /// Cached flag indicating whether this style contains any inherited properties.
+    /// This enables O(1) early-exit in `apply_only_inherited` for the common case
+    /// where a view's style has no inherited properties.
+    has_inherited: bool,
+    /// Cached bitmask of which selectors are present in this style (including nested).
+    /// Updated incrementally when selectors are added via `apply_iter`, `set_selector`, etc.
+    /// Enables O(1) checks in `resolve_selectors` to skip absent selectors.
+    pub(crate) cached_selectors: StyleSelectors,
+    /// Cached flag indicating whether this style contains any context-dependent values.
+    /// Styles with context values cannot be reliably cached because their content_hash()
+    /// is constant (all context values hash to 1), so different context values produce
+    /// the same cache key despite resolving to different output.
+    has_context_values: bool,
+}
+
+impl Default for Style {
+    fn default() -> Self {
+        Self::with_capacity(0)
+    }
+}
+
+impl Style {
+    #[doc(hidden)]
+    pub fn with_capacity(capacity: usize) -> Self {
+        let map = Rc::new(fx_hash_map_with_capacity(capacity));
+        Self {
+            merge_id: next_style_merge_id(),
+            map,
+            inherited_context: None,
+            has_class_maps: false,
+            has_inherited: false,
+            cached_selectors: StyleSelectors::empty(),
+            has_context_values: false,
+        }
+    }
+
+    #[doc(hidden)]
+    pub fn map_mut(&mut self) -> &mut FxHashMap<StyleKey, Rc<dyn Any>> {
+        Rc::make_mut(&mut self.map)
+    }
+
+    pub fn new() -> Self {
+        Self::with_capacity(0)
+    }
+
+    #[doc(hidden)]
+    pub fn with_inherited_context(mut self, inherited: &Style) -> Self {
+        self.inherited_context = Some(inherited.map.clone());
+        self
+    }
+
+    /// Apply only inherited properties from `from` style to `to` style.
+    /// This is used during style propagation to pass inherited values to children.
+    ///
+    /// Only properties marked as `inherited: true` in their `StylePropInfo` are applied.
+    /// This is more efficient than `apply_mut` when we only need to propagate
+    /// inherited properties like font-size, color, etc.
+    pub fn apply_only_inherited(to: &mut Style, from: &Style) {
+        if from.any_inherited() {
+            for (k, v) in from.map.iter().filter(|(p, _)| p.inherited()) {
+                let StyleKeyInfo::Prop(info) = k.info else {
+                    continue;
+                };
+                to.map_mut()
+                    .insert(*k, (info.resolve_inherited_any)(&**v, from as &dyn std::any::Any));
+                to.has_inherited = true;
+            }
+            to.merge_id = combine_merge_ids(to.merge_id, from.merge_id);
+        }
+    }
+
+    /// Apply inherited properties and class nested maps from `from` style to `to` style.
+    ///
+    /// This is used during style propagation to pass both inherited values and
+    /// class definitions to children. Class nested maps (like `.class(ListItemClass, ...)`)
+    /// need to flow to descendants so they can apply the styling when they have matching classes.
+    pub fn apply_inherited_and_class_maps(to: &mut Rc<Style>, from: &Style) {
+        let has_inherited = from.any_inherited();
+        // O(1) check using cached flag
+        let has_class_maps = from.has_class_maps;
+
+        if has_inherited || has_class_maps {
+            let mut new_style = (**to).clone();
+
+            // Apply inherited properties
+            if has_inherited {
+                for (k, v) in from.map.iter().filter(|(p, _)| p.inherited()) {
+                    let StyleKeyInfo::Prop(info) = k.info else {
+                        continue;
+                    };
+                    new_style.map_mut().insert(
+                        *k,
+                        (info.resolve_inherited_any)(&**v, from as &dyn std::any::Any),
+                    );
+                    new_style.has_inherited = true;
+                }
+                new_style.merge_id = combine_merge_ids(new_style.merge_id, from.merge_id);
+            }
+
+            // Apply class nested maps so they flow to descendants
+            if has_class_maps {
+                let class_maps = from
+                    .map
+                    .iter()
+                    .filter(|(k, _)| matches!(k.info, StyleKeyInfo::Class(..)));
+                new_style.apply_iter(class_maps);
+                new_style.merge_id = combine_merge_ids(new_style.merge_id, from.merge_id);
+            }
+
+            *to = Rc::new(new_style);
+        }
+    }
+
+    /// Apply only class nested maps from `from` style to `to` style.
+    /// This is used during style propagation to pass class definitions to children.
+    ///
+    /// Only class nested maps (`.class(SomeClass, ...)`) are applied, not inherited props.
+    pub fn apply_only_class_maps(to: &mut Style, from: &Style) {
+        if !from.has_class_maps {
+            return;
+        }
+        let class_maps = from
+            .map
+            .iter()
+            .filter(|(k, _)| matches!(k.info, StyleKeyInfo::Class(..)));
+        to.apply_iter(class_maps);
+        to.merge_id = combine_merge_ids(to.merge_id, from.merge_id);
+    }
+
+    #[doc(hidden)]
+    pub fn merge_id(&self) -> u64 {
+        self.merge_id
+    }
+
+    /// Returns the raw pointer of the inner `Rc<FxHashMap>` as a `usize`.
+    /// Used by the style cache for O(1) identity comparison.
+    #[doc(hidden)]
+    pub fn map_ptr(&self) -> usize {
+        Rc::as_ptr(&self.map) as usize
+    }
+
+    /// Whether this style contains any context-dependent values.
+    #[doc(hidden)]
+    pub fn has_context_values(&self) -> bool {
+        self.has_context_values
+    }
+
+    /// Whether this style contains structural selectors (`:first-child`, `:nth-child`, etc.).
+    /// Styles with structural selectors depend on `child_index`/`sibling_count` which are
+    /// per-position values not captured in the cache key, so they must be excluded from caching.
+    #[doc(hidden)]
+    pub fn has_structural_selectors(&self) -> bool {
+        self.map.contains_key(&structural_selectors_key())
+    }
+
+    pub fn class_maps_eq(&self, other: &Style) -> SmallVec<[StyleClassRef; 4]> {
+        // Pass 1: every Class entry in self must exist in other
+        let mut changed = SmallVec::new();
+        for (k, v) in self.map.iter() {
+            let StyleKeyInfo::Class(_) = k.info else {
+                continue;
+            };
+
+            match other.map.get(k) {
+                Some(other_v) => {
+                    let v_style = v.downcast_ref::<Style>().unwrap();
+                    let other_v_style = other_v.downcast_ref::<Style>().unwrap();
+
+                    if v_style.merge_id != other_v_style.merge_id {
+                        changed.push(StyleClassRef { key: *k });
+                    }
+                }
+                None => {
+                    changed.push(StyleClassRef { key: *k });
+                }
+            }
+        }
+
+        // Pass 2: ensure other does not contain extra Class entries
+        for k in other.map.keys() {
+            if !matches!(k.info, StyleKeyInfo::Class(..)) {
+                continue;
+            }
+
+            if !self.map.contains_key(k) {
+                changed.push(StyleClassRef { key: *k });
+            }
+        }
+
+        changed
+    }
+
+    #[doc(hidden)]
+    pub fn get_transition<P: StyleProp>(&self) -> Option<Transition> {
+        self.map
+            .get(&P::prop_ref().info().transition_key)
+            .map(|v| v.downcast_ref::<Transition>().unwrap().clone())
+    }
+
+    fn get_prop_from_map<P: StyleProp>(
+        map: &FxHashMap<StyleKey, Rc<dyn Any>>,
+        context_style: &Style,
+    ) -> Option<P::Type> {
+        map.get(&P::key()).and_then(
+            |v| match v.downcast_ref::<StyleMapValue<P::Type>>().unwrap() {
+                StyleMapValue::Animated(v) | StyleMapValue::Val(v) => Some(v.clone()),
+                StyleMapValue::Context(context_value) => {
+                    Some(context_style.resolve_context(context_value))
+                }
+                StyleMapValue::Unset => None,
+            },
+        )
+    }
+
+    fn get_style_value_from_map<P: StyleProp>(
+        map: &FxHashMap<StyleKey, Rc<dyn Any>>,
+        context_style: &Style,
+    ) -> Option<StyleValue<P::Type>> {
+        map.get(&P::key()).map(
+            |v| match v.downcast_ref::<StyleMapValue<P::Type>>().unwrap() {
+                StyleMapValue::Val(v) => StyleValue::Val(v.clone()),
+                StyleMapValue::Animated(v) => StyleValue::Animated(v.clone()),
+                StyleMapValue::Context(v) => {
+                    StyleValue::Val(context_style.resolve_context(v))
+                }
+                StyleMapValue::Unset => StyleValue::Unset,
+            },
+        )
+    }
+
+    #[doc(hidden)]
+    pub fn get_prop_or_default<P: StyleProp>(&self) -> P::Type {
+        self.get_prop::<P>().unwrap_or_else(|| P::default_value())
+    }
+
+    #[doc(hidden)]
+    pub fn get_prop<P: StyleProp>(&self) -> Option<P::Type> {
+        Self::get_prop_from_map::<P>(&self.map, self).or_else(|| {
+            self.inherited_context
+                .as_ref()
+                .and_then(|map| Self::get_prop_from_map::<P>(map, self))
+        })
+    }
+
+    #[doc(hidden)]
+    pub fn get_prop_style_value<P: StyleProp>(&self) -> StyleValue<P::Type> {
+        Self::get_style_value_from_map::<P>(&self.map, self)
+            .or_else(|| {
+                self.inherited_context
+                    .as_ref()
+                    .and_then(|map| Self::get_style_value_from_map::<P>(map, self))
+            })
+            .unwrap_or(StyleValue::Base)
+    }
+
+    #[doc(hidden)]
+    pub fn style_props(&self) -> impl Iterator<Item = StylePropRef> + '_ {
+        self.map.keys().filter_map(|p| match p.info {
+            StyleKeyInfo::Prop(..) => Some(StylePropRef { key: *p }),
+            _ => None,
+        })
+    }
+
+    #[doc(hidden)]
+    pub fn selectors(&self) -> StyleSelectors {
+        self.cached_selectors
+    }
+
+    /// Recompute selectors by traversing the map. Used for debug assertions.
+    #[cfg(debug_assertions)]
+    #[doc(hidden)]
+    pub fn compute_selectors_slow(&self) -> StyleSelectors {
+        let mut result = StyleSelectors::empty();
+
+        for (k, v) in self.map.iter() {
+            match k.info {
+                StyleKeyInfo::Selector(selector) => {
+                    result = result
+                        .union(*selector)
+                        .union(v.downcast_ref::<Style>().unwrap().selectors());
+                }
+                StyleKeyInfo::StructuralSelectors => {
+                    let rules = &v.downcast_ref::<StructuralSelectors>().unwrap().0;
+                    for (_, nested_style) in rules {
+                        result = result.union(nested_style.as_ref().selectors());
+                    }
+                }
+                StyleKeyInfo::ResponsiveSelectors => {
+                    result = result.responsive();
+                    let rules = &v.downcast_ref::<ResponsiveSelectors>().unwrap().0;
+                    for (_, nested_style) in rules {
+                        result = result.union(nested_style.as_ref().selectors());
+                    }
+                }
+                StyleKeyInfo::DebugGroup(..) => {}
+                _ => {}
+            }
+        }
+
+        result
+    }
+
+    pub fn apply_class<C: StyleClass>(mut self, _class: C) -> Style {
+        if let Some(map) = self.map.get(&C::key()).cloned() {
+            self.apply_mut(map.downcast_ref::<Style>().unwrap());
+        }
+        self
+    }
+
+    pub fn apply_selectors(mut self, selectors: &[StyleSelector]) -> Style {
+        for selector in selectors {
+            if let Some(map) = self.get_nested_map(selector.to_key()) {
+                let resolved = map.apply_selectors(selectors);
+                self.apply_mut(&resolved);
+            }
+        }
+        if self.get(crate::builtin_props::Selected)
+            && let Some(map) = self.get_nested_map(StyleSelector::Selected.to_key())
+        {
+            let resolved = map.apply_selectors(&[StyleSelector::Selected]);
+            self.apply_mut(&resolved);
+        }
+        self
+    }
+
+    /// Build style values from a context prop without introducing a deferred style map pass.
+    ///
+    /// The closure runs immediately and must produce an ordinary style map. Any deferred
+    /// context work is captured at the individual property-value level through
+    /// [`ContextRef::map`].
+    pub fn with<P: StyleProp>(self, f: impl FnOnce(ExprStyle, ContextRef<P>) -> ExprStyle) -> Self {
+        f(ExprStyle { style: self }, ContextRef::default()).style
+    }
+
+    #[doc(hidden)]
+    pub fn get_nested_map(&self, key: StyleKey) -> Option<Style> {
+        self.map
+            .get(&key)
+            .map(|map| map.downcast_ref::<Style>().unwrap().clone())
+    }
+
+    #[doc(hidden)]
+    pub fn debug_group_enabled(&self, key: StyleKey) -> bool {
+        self.map
+            .get(&key)
+            .and_then(|value| value.downcast_ref::<bool>().copied())
+            .unwrap_or(false)
+    }
+
+    #[doc(hidden)]
+    pub fn remove_nested_map(&mut self, key: StyleKey) -> Option<Style> {
+        let removed = self.map_mut().remove(&key).map(take_any::<Style>);
+        if removed.is_some() {
+            self.merge_id = next_style_merge_id();
+        }
+        removed
+    }
+
+    /// Check if this style has any inherited properties.
+    /// Used to determine if children should be re-styled when this view's style changes.
+    /// O(1) using cached flag.
+    #[doc(hidden)]
+    pub fn any_inherited(&self) -> bool {
+        self.has_inherited
+    }
+
+    #[doc(hidden)]
+    pub fn inherited(&self) -> Style {
+        let mut new = Style::new();
+        if self.any_inherited() {
+            let inherited = self.map.iter().filter(|(p, _)| p.inherited());
+
+            new.apply_iter(inherited);
+            new.merge_id = combine_merge_ids(new.merge_id, self.merge_id);
+        }
+        new
+    }
+
+    fn set_selector(&mut self, selector: StyleSelector, map: Style) {
+        self.set_map_selector(selector.to_key(), map)
+    }
+
+    fn set_structural_selector(&mut self, selector: StructuralSelector, map: Style) {
+        self.cached_selectors |= map.cached_selectors;
+        let key = structural_selectors_key();
+        let mut rules = self
+            .map_mut()
+            .remove(&key)
+            .map(|current| take_any::<StructuralSelectors>(current).0)
+            .unwrap_or_default();
+        rules.push((selector, Rc::new(map)));
+        self.map_mut()
+            .insert(key, Rc::new(StructuralSelectors(rules)));
+        self.merge_id = next_style_merge_id();
+    }
+
+    fn set_responsive_selector(&mut self, selector: ResponsiveSelector, map: Style) {
+        self.cached_selectors |= StyleSelectors::RESPONSIVE;
+        self.cached_selectors |= map.cached_selectors;
+        let key = responsive_selectors_key();
+        let mut rules = self
+            .map_mut()
+            .remove(&key)
+            .map(|current| take_any::<ResponsiveSelectors>(current).0)
+            .unwrap_or_default();
+        rules.push((selector, Rc::new(map)));
+        self.map_mut()
+            .insert(key, Rc::new(ResponsiveSelectors(rules)));
+        self.merge_id = next_style_merge_id();
+    }
+
+    fn set_map_selector(&mut self, key: StyleKey, map: Style) {
+        // Track selector presence
+        if let StyleKeyInfo::Selector(sel) = key.info {
+            self.cached_selectors |= *sel;
+            self.cached_selectors |= map.cached_selectors;
+        }
+        let value = if let Some(current) = self.map_mut().remove(&key) {
+            let mut current: Style = take_any(current);
+            current.apply_mut(&map);
+            Rc::new(current)
+        } else {
+            Rc::new(map)
+        };
+        self.map_mut().insert(key, value);
+        self.merge_id = next_style_merge_id();
+    }
+
+    fn set_class(&mut self, class: StyleClassRef, map: Style) {
+        self.has_class_maps = true;
+        self.set_map_selector(class.key, map)
+    }
+
+    pub fn debug_group<G: StyleDebugGroup>(mut self, _group: G) -> Self {
+        self.map_mut().insert(G::key(), Rc::new(true));
+        self.merge_id = next_style_merge_id();
+        self
+    }
+
+    pub fn unset_debug_group<G: StyleDebugGroup>(mut self, _group: G) -> Self {
+        self.map_mut().insert(G::key(), Rc::new(false));
+        self.merge_id = next_style_merge_id();
+        self
+    }
+
+    pub fn builtin(&self) -> BuiltinStyle<'_> {
+        BuiltinStyle { style: self }
+    }
+
+    #[doc(hidden)]
+    pub fn apply_iter<'a>(
+        &mut self,
+        iter: impl Iterator<Item = (&'a StyleKey, &'a Rc<dyn Any>)>,
+    ) {
+        for (k, v) in iter {
+            match k.info {
+                StyleKeyInfo::Class(..) | StyleKeyInfo::Selector(..) => {
+                    // Track class maps for O(1) early-exit in apply_only_class_maps
+                    if matches!(k.info, StyleKeyInfo::Class(..)) {
+                        self.has_class_maps = true;
+                    }
+                    // Track selectors for O(1) selector presence checks
+                    if let StyleKeyInfo::Selector(sel) = k.info {
+                        self.cached_selectors |= *sel;
+                        if let Some(nested) = v.downcast_ref::<Style>() {
+                            self.cached_selectors |= nested.cached_selectors;
+                        }
+                    }
+                    if let Some(existing_rc) = self.map_mut().remove(k) {
+                        if Rc::ptr_eq(&existing_rc, v) {
+                            self.map_mut().insert(*k, existing_rc);
+                            continue;
+                        }
+
+                        let mut current: Style = take_any(existing_rc);
+                        current.apply_mut(v.downcast_ref::<Style>().unwrap());
+                        self.map_mut().insert(*k, Rc::new(current));
+                    } else {
+                        self.map_mut().insert(*k, v.clone());
+                    }
+                }
+                StyleKeyInfo::StructuralSelectors => {
+                    // Propagate nested selectors from structural rules
+                    let rules = &v.downcast_ref::<StructuralSelectors>().unwrap().0;
+                    for (_, nested) in rules {
+                        self.cached_selectors |= nested.cached_selectors;
+                    }
+                    let merged = if let Some(current) = self.map_mut().remove(k) {
+                        let new_rules = &v.downcast_ref::<StructuralSelectors>().unwrap().0;
+                        let current: StructuralSelectors = take_any(current);
+                        let mut merged: StructuralSelectorRules = current.0;
+                        merged.extend(new_rules.iter().cloned());
+                        Rc::new(StructuralSelectors(merged))
+                    } else {
+                        v.clone()
+                    };
+                    self.map_mut().insert(*k, merged);
+                }
+                StyleKeyInfo::ResponsiveSelectors => {
+                    self.cached_selectors |= StyleSelectors::RESPONSIVE;
+                    // Propagate nested selectors from responsive rules
+                    let rules = &v.downcast_ref::<ResponsiveSelectors>().unwrap().0;
+                    for (_, nested) in rules {
+                        self.cached_selectors |= nested.cached_selectors;
+                    }
+                    let merged = if let Some(current) = self.map_mut().remove(k) {
+                        let new_rules = &v.downcast_ref::<ResponsiveSelectors>().unwrap().0;
+                        let current: ResponsiveSelectors = take_any(current);
+                        let mut merged: ResponsiveSelectorRules = current.0;
+                        merged.extend(new_rules.iter().cloned());
+                        Rc::new(ResponsiveSelectors(merged))
+                    } else {
+                        v.clone()
+                    };
+                    self.map_mut().insert(*k, merged);
+                }
+                StyleKeyInfo::DeferredEffects => {
+                    let merged = if let Some(current) = self.map_mut().remove(k) {
+                        let mut current: Vec<DeferredStyleEffect> = take_any(current);
+                        current.extend(
+                            v.downcast_ref::<Vec<DeferredStyleEffect>>()
+                                .unwrap()
+                                .iter()
+                                .cloned(),
+                        );
+                        Rc::new(current)
+                    } else {
+                        v.clone()
+                    };
+                    self.map_mut().insert(*k, merged);
+                }
+                StyleKeyInfo::Transition | StyleKeyInfo::DebugGroup(..) => {
+                    self.map_mut().insert(*k, v.clone());
+                }
+                StyleKeyInfo::Prop(info) => {
+                    // Track inherited props for O(1) early-exit in apply_only_inherited
+                    if info.inherited {
+                        self.has_inherited = true;
+                    }
+                    self.map_mut().insert(*k, v.clone());
+                }
+            }
+        }
+    }
+
+    #[doc(hidden)]
+    pub fn apply_mut(&mut self, over: &Style) {
+        // FAST PATH: identical semantic payload identity
+        if self.merge_id == over.merge_id {
+            return;
+        }
+        let over_merge_id = over.merge_id;
+        self.apply_iter(over.map.iter());
+        self.has_context_values |= over.has_context_values;
+        self.merge_id = combine_merge_ids(self.merge_id, over_merge_id);
+    }
+
+    /// Resolve a [`ContextValue`] against this style.
+    ///
+    /// The closure receives this style type-erased and returns the resolved
+    /// value. Closures are expected to be pure functions of the cascaded
+    /// style they receive — if a closure reads external signals, the host
+    /// is responsible for wrapping the closure in its own reactive-scope
+    /// machinery before handing it to [`ContextValue::new`].
+    ///
+    /// `pub` because `prop!` expansions in downstream crates call it from
+    /// their generated code.
+    #[doc(hidden)]
+    pub fn resolve_context<T: 'static>(&self, cv: &ContextValue<T>) -> T {
+        cv.resolve_erased(self as &dyn Any)
+    }
+
+    /// Apply another `Style` to this style, returning a new `Style` with the overrides
+    ///
+    /// `StyleValue::Val` will override the value with the given value
+    /// `StyleValue::Unset` will unset the value, causing it to fall back to the default.
+    /// `StyleValue::Base` will leave the value as-is, whether falling back to the default
+    /// or using the value in the `Style`.
+    pub fn apply(mut self, over: Style) -> Style {
+        self.apply_mut(&over);
+        self
+    }
+
+    pub fn map(self, over: impl FnOnce(Self) -> Self) -> Self {
+        over(self)
+    }
+
+    /// Apply multiple `Style`s to this style, returning a new `Style` with the overrides.
+    /// Later styles take precedence over earlier styles.
+    pub fn apply_overriding_styles(self, overrides: impl Iterator<Item = Style>) -> Style {
+        overrides.fold(self, |acc, x| acc.apply(x))
+    }
+}
+
+impl Debug for Style {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.debug_struct("Style")
+            .field(
+                "map",
+                &self
+                    .map
+                    .iter()
+                    .map(|(p, v)| (*p, (p.debug_any(&**v))))
+                    .collect::<HashMap<StyleKey, String>>(),
+            )
+            .finish()
+    }
+}
+
+// ============================================================================
+// Deferred effects, selector setters, and the main action API on Style
+// ============================================================================
+
+impl Style {
+    fn deferred_effects(&self) -> impl Iterator<Item = &DeferredStyleEffect> {
+        self.map
+            .get(&DEFERRED_EFFECTS_KEY)
+            .into_iter()
+            .flat_map(|effects| {
+                effects
+                    .downcast_ref::<Vec<DeferredStyleEffect>>()
+                    .into_iter()
+                    .flat_map(|effects| effects.iter())
+            })
+    }
+
+    pub(crate) fn run_deferred_effects(&self) {
+        for effect in self.deferred_effects() {
+            effect.run(self);
+        }
+    }
+
+    fn push_deferred_effect(mut self, effect: DeferredStyleEffect) -> Self {
+        let mut effects = self
+            .map
+            .get(&DEFERRED_EFFECTS_KEY)
+            .and_then(|effects| effects.downcast_ref::<Vec<DeferredStyleEffect>>())
+            .cloned()
+            .unwrap_or_default();
+        effects.push(effect);
+        self.map_mut()
+            .insert(DEFERRED_EFFECTS_KEY, Rc::new(effects));
+        self.merge_id = next_style_merge_id();
+        self
+    }
+
+    /// Gets the value of a style property, returning the default if not set.
+    pub fn get<P: StyleProp>(&self, _prop: P) -> P::Type {
+        self.get_prop_or_default::<P>()
+    }
+
+    /// Gets the raw style value of a property, including unset and base states.
+    pub fn get_style_value<P: StyleProp>(&self, _prop: P) -> StyleValue<P::Type> {
+        self.get_prop_style_value::<P>()
+    }
+
+    /// Sets a style property to a specific value.
+    pub fn set<P: StyleProp>(self, prop: P, value: impl Into<P::Type>) -> Self {
+        self.set_style_value(prop, StyleValue::Val(value.into()))
+    }
+
+    /// Sets a property to a deferred context-derived value.
+    pub fn set_context<P: StyleProp>(self, prop: P, value: ContextValue<P::Type>) -> Self {
+        self.set_style_value(prop, StyleValue::Context(value))
+    }
+
+    /// Register a deferred side effect for a context prop.
+    ///
+    /// Unlike [`ContextRef::def`], this does not produce a property value. The closure is
+    /// guaranteed to run during nested-style resolution after inherited context has been
+    /// attached, even if no property later reads the context value.
+    ///
+    /// Use this for debug-view setup and similar side effects:
+    /// `Style::new().defer::<Theme>(|t| color.set(t.primary()))`.
+    pub fn defer<P: StyleProp>(self, f: impl Fn(P::Type) + 'static) -> Self
+    where
+        P::Type: 'static,
+    {
+        self.push_deferred_effect(ContextRef::<P>::default().into_deferred(f))
+    }
+
+    pub fn set_from_context<C: StyleProp, P: StyleProp>(
+        self,
+        prop: P,
+        context: ContextRef<C>,
+        f: impl Fn(C::Type) -> P::Type + 'static,
+    ) -> Self
+    where
+        C::Type: 'static,
+        P::Type: 'static,
+    {
+        self.set_context(prop, context.def(f))
+    }
+
+    /// Sets a property to a deferred optional context-derived value.
+    ///
+    /// `None` resolves to an unset property, allowing the base/fallback style to win.
+    pub fn set_context_opt<P: StyleProp<Type = Option<T>>, T: 'static>(
+        self,
+        prop: P,
+        value: ContextValue<Option<T>>,
+    ) -> Self {
+        self.set_style_value(prop, StyleValue::Context(value))
+    }
+
+    pub fn set_from_context_opt<C: StyleProp, P: StyleProp<Type = Option<T>>, T: 'static>(
+        self,
+        prop: P,
+        context: ContextRef<C>,
+        f: impl Fn(C::Type) -> Option<T> + 'static,
+    ) -> Self
+    where
+        C::Type: 'static,
+    {
+        self.set_context_opt(prop, context.def(f))
+    }
+
+    pub fn set_style_value<P: StyleProp>(mut self, _prop: P, value: StyleValue<P::Type>) -> Self {
+        let previous_value = self.map.get(&P::key()).cloned();
+        let insert = match value {
+            StyleValue::Val(value) => StyleMapValue::Val(value),
+            StyleValue::Animated(value) => StyleMapValue::Animated(value),
+            StyleValue::Context(value) => {
+                self.has_context_values = true;
+                let previous_value = previous_value.clone();
+                StyleMapValue::Context(ContextValue::new(move |style: &Style| {
+                    let mut base_style = style.clone();
+                    base_style.map_mut().remove(&P::key());
+                    // A deferred value for property `P` is allowed to read `P` from context,
+                    // e.g. `FontSize := FontSize * 0.8`. If we resolved against the current
+                    // style as-is, that lookup would see the context expression we are
+                    // installing right now and recurse forever.
+                    //
+                    // Instead, same-prop context reads resolve against the previous effective
+                    // value for `P`: the previous local value if there was one, otherwise the
+                    // inherited fallback carried by `Style`.
+                    if let Some(previous_value) = previous_value.clone() {
+                        let previous_value = match previous_value
+                            .downcast_ref::<StyleMapValue<P::Type>>()
+                            .unwrap()
+                        {
+                            StyleMapValue::Val(value) | StyleMapValue::Animated(value) => {
+                                Some(value.clone())
+                            }
+                            StyleMapValue::Context(context_value) => {
+                                Some(base_style.resolve_context(context_value))
+                            }
+                            StyleMapValue::Unset => None,
+                        };
+
+                        if let Some(previous_value) = previous_value {
+                            base_style
+                                .map_mut()
+                                .insert(P::key(), Rc::new(StyleMapValue::Val(previous_value)));
+                        }
+                    }
+                    base_style.resolve_context(&value)
+                }))
+            }
+            StyleValue::Unset => StyleMapValue::Unset,
+            StyleValue::Base => {
+                if self.map_mut().remove(&P::key()).is_some() {
+                    self.merge_id = next_style_merge_id();
+                }
+                return self;
+            }
+        };
+        // Track inherited props for O(1) early-exit in apply_only_inherited
+        if P::prop_ref().info().inherited {
+            self.has_inherited = true;
+        }
+        self.map_mut().insert(P::key(), Rc::new(insert));
+        self.merge_id = next_style_merge_id();
+        self
+    }
+
+    /// Sets a transition animation for a specific style property.
+    pub fn transition<P: StyleProp>(mut self, _prop: P, transition: Transition) -> Self {
+        self.map_mut()
+            .insert(P::prop_ref().info().transition_key, Rc::new(transition));
+        self.merge_id = next_style_merge_id();
+        self
+    }
+
+    #[doc(hidden)]
+    pub fn selector(mut self, selector: StyleSelector, style: impl FnOnce(Style) -> Style) -> Self {
+        let over = style(Style::default());
+        self.set_selector(selector, over);
+        self
+    }
+
+    #[doc(hidden)]
+    pub fn structural_selector(
+        mut self,
+        selector: StructuralSelector,
+        style: impl FnOnce(Style) -> Style,
+    ) -> Self {
+        let over = style(Style::default());
+        self.set_structural_selector(selector, over);
+        self
+    }
+
+    /// The visual style to apply when the mouse hovers over the view
+    pub fn hover(self, style: impl FnOnce(Style) -> Style) -> Self {
+        self.selector(StyleSelector::Hover, style)
+    }
+
+    /// The visual style to apply when the view has keyboard focus.
+    pub fn focus(self, style: impl FnOnce(Style) -> Style) -> Self {
+        self.selector(StyleSelector::Focus, style)
+    }
+
+    /// Similar to the `:focus-visible` css selector, this style only activates when the view was focused via tab or arrow navigation.
+    pub fn focus_visible(self, style: impl FnOnce(Style) -> Style) -> Self {
+        self.selector(StyleSelector::FocusVisible, style)
+    }
+
+    /// Similar to the `:focus-within` css selector, this style activates when this
+    /// view or any descendant is in the focus path.
+    pub fn focus_within(self, style: impl FnOnce(Style) -> Style) -> Self {
+        self.selector(StyleSelector::FocusWithin, style)
+    }
+
+    /// Similar to the `:first-child` css selector.
+    pub fn first_child(self, style: impl FnOnce(Style) -> Style) -> Self {
+        self.structural_selector(StructuralSelector::FirstChild, style)
+    }
+
+    /// Similar to the `:last-child` css selector.
+    pub fn last_child(self, style: impl FnOnce(Style) -> Style) -> Self {
+        self.structural_selector(StructuralSelector::LastChild, style)
+    }
+
+    /// Similar to the `:nth-child(...)` css selector.
+    pub fn nth_child(self, nth: NthChild, style: impl FnOnce(Style) -> Style) -> Self {
+        self.structural_selector(StructuralSelector::NthChild(nth), style)
+    }
+
+    /// Convenience for `:nth-child(odd)`.
+    pub fn odd(self, style: impl FnOnce(Style) -> Style) -> Self {
+        self.nth_child(NthChild::odd(), style)
+    }
+
+    /// Convenience for `:nth-child(even)`.
+    pub fn even(self, style: impl FnOnce(Style) -> Style) -> Self {
+        self.nth_child(NthChild::even(), style)
+    }
+
+    /// The visual style to apply when the view is in a selected state.
+    pub fn selected(self, style: impl FnOnce(Style) -> Style) -> Self {
+        self.selector(StyleSelector::Selected, style)
+    }
+
+    /// The visual style to apply when the view is being dragged
+    pub fn drag(self, style: impl FnOnce(Style) -> Style) -> Self {
+        self.selector(StyleSelector::Dragging, style)
+    }
+
+    /// The visual style to apply when the view is disabled.
+    pub fn disabled(self, style: impl FnOnce(Style) -> Style) -> Self {
+        self.selector(StyleSelector::Disabled, style)
+    }
+
+    /// The visual style to apply when the application is in dark mode.
+    pub fn dark_mode(self, style: impl FnOnce(Style) -> Style) -> Self {
+        self.selector(StyleSelector::DarkMode, style)
+    }
+
+    /// The visual style to apply when a file is being dragged over the view.
+    pub fn file_hover(self, style: impl FnOnce(Style) -> Style) -> Self {
+        self.selector(StyleSelector::FileHover, style)
+    }
+
+    /// The visual style to apply when the view is being actively pressed.
+    pub fn active(self, style: impl FnOnce(Style) -> Style) -> Self {
+        self.selector(StyleSelector::Active, style)
+    }
+
+    /// Applies styles that activate at specific screen sizes (responsive design).
+    pub fn responsive(mut self, size: ScreenSize, style: impl FnOnce(Style) -> Style) -> Self {
+        let over = style(Style::default());
+        self.set_responsive_selector(ResponsiveSelector::ScreenSize(size), over);
+        self
+    }
+
+    /// Applies styles when window width is at least `min`.
+    pub fn min_window_width(
+        mut self,
+        min: impl Into<Pt>,
+        style: impl FnOnce(Style) -> Style,
+    ) -> Self {
+        let over = style(Style::default());
+        self.set_responsive_selector(ResponsiveSelector::MinWidth(min.into()), over);
+        self
+    }
+
+    /// Applies styles when window width is at most `max`.
+    pub fn max_window_width(
+        mut self,
+        max: impl Into<Pt>,
+        style: impl FnOnce(Style) -> Style,
+    ) -> Self {
+        let over = style(Style::default());
+        self.set_responsive_selector(ResponsiveSelector::MaxWidth(max.into()), over);
+        self
+    }
+
+    /// Applies styles when window width is within `[min, max]` (inclusive).
+    pub fn window_width_range(
+        mut self,
+        min: impl Into<Pt>,
+        max: impl Into<Pt>,
+        style: impl FnOnce(Style) -> Style,
+    ) -> Self {
+        let over = style(Style::default());
+        self.set_responsive_selector(
+            ResponsiveSelector::WidthRange {
+                min: min.into(),
+                max: max.into(),
+            },
+            over,
+        );
+        self
+    }
+
+    /// Applies styles to views with a specific CSS class.
+    pub fn class<C: StyleClass>(mut self, _class: C, style: impl FnOnce(Style) -> Style) -> Self {
+        let over = style(Style::default());
+        self.set_class(C::class_ref(), over);
+        self
+    }
+
+    /// Allow the application of a function if the option exists.
+    /// This is useful for chaining together a bunch of optional style changes.
+    pub fn apply_opt<T>(self, opt: Option<T>, f: impl FnOnce(Self, T) -> Self) -> Self {
+        if let Some(t) = opt { f(self, t) } else { self }
+    }
+
+    /// Allow the application of a function if the condition holds.
+    /// This is useful for chaining together optional style changes.
+    pub fn apply_if(self, cond: bool, f: impl FnOnce(Self) -> Self) -> Self {
+        if cond { f(self) } else { self }
+    }
+}
+
+pub struct BuiltinStyle<'a> {
+    pub(crate) style: &'a Style,
+}
+
+impl Style {
+    /// Build a [`FontSizeCx`](crate::unit::FontSizeCx) from the style's
+    /// font-size and line-height props.
+    pub fn font_size_cx(&self) -> crate::unit::FontSizeCx {
+        let builtin = self.builtin();
+        let font_size = builtin.font_size();
+        let line_height = builtin.line_height();
+        let line_height = line_height.resolve(font_size as f32);
+        crate::unit::FontSizeCx::new(font_size, line_height as f64)
+    }
+
+    /// Convert to a [`taffy::style::Style`] used for layout computation.
+    pub fn to_taffy_style(&self) -> taffy::style::Style {
+        use taffy::prelude::{Rect, Size};
+        use taffy::style::LengthPercentage;
+
+        let style = self.builtin();
+        let font_size_cx = self.font_size_cx();
+        taffy::style::Style {
+            display: style.display(),
+            overflow: taffy::Point {
+                x: self.get(crate::builtin_props::OverflowX),
+                y: self.get(crate::builtin_props::OverflowY),
+            },
+            position: style.position(),
+            size: Size {
+                width: style.width().to_taffy_dim(&font_size_cx),
+                height: style.height().to_taffy_dim(&font_size_cx),
+            },
+            min_size: Size {
+                width: style.min_width().to_taffy_dim(&font_size_cx),
+                height: style.min_height().to_taffy_dim(&font_size_cx),
+            },
+            max_size: Size {
+                width: style.max_width().to_taffy_dim(&font_size_cx),
+                height: style.max_height().to_taffy_dim(&font_size_cx),
+            },
+            flex_direction: style.flex_direction(),
+            flex_grow: style.flex_grow(),
+            flex_shrink: style.flex_shrink(),
+            flex_basis: style.flex_basis().to_taffy_dim(&font_size_cx),
+            flex_wrap: style.flex_wrap(),
+            justify_content: style.justify_content(),
+            justify_self: style.justify_self(),
+            justify_items: style.justify_items(),
+            align_items: style.align_items(),
+            align_content: style.align_content(),
+            align_self: style.align_self(),
+            aspect_ratio: style.aspect_ratio(),
+            border: Rect {
+                left: LengthPercentage::length(style.border_left().width as f32),
+                top: LengthPercentage::length(style.border_top().width as f32),
+                right: LengthPercentage::length(style.border_right().width as f32),
+                bottom: LengthPercentage::length(style.border_bottom().width as f32),
+            },
+            padding: Rect {
+                left: style.padding_left().to_taffy(&font_size_cx),
+                top: style.padding_top().to_taffy(&font_size_cx),
+                right: style.padding_right().to_taffy(&font_size_cx),
+                bottom: style.padding_bottom().to_taffy(&font_size_cx),
+            },
+            margin: Rect {
+                left: style.margin_left().to_taffy_len_perc_auto(&font_size_cx),
+                top: style.margin_top().to_taffy_len_perc_auto(&font_size_cx),
+                right: style.margin_right().to_taffy_len_perc_auto(&font_size_cx),
+                bottom: style.margin_bottom().to_taffy_len_perc_auto(&font_size_cx),
+            },
+            inset: Rect {
+                left: style.inset_left().to_taffy_len_perc_auto(&font_size_cx),
+                top: style.inset_top().to_taffy_len_perc_auto(&font_size_cx),
+                right: style.inset_right().to_taffy_len_perc_auto(&font_size_cx),
+                bottom: style.inset_bottom().to_taffy_len_perc_auto(&font_size_cx),
+            },
+            gap: Size {
+                width: style.col_gap().to_taffy(&font_size_cx),
+                height: style.row_gap().to_taffy(&font_size_cx),
+            },
+            grid_template_rows: style.grid_template_rows(),
+            grid_template_columns: style.grid_template_columns(),
+            grid_row: style.grid_row(),
+            grid_column: style.grid_column(),
+            grid_auto_rows: style.grid_auto_rows(),
+            grid_auto_columns: style.grid_auto_columns(),
+            grid_auto_flow: style.grid_auto_flow(),
+            scrollbar_width: style.scrollbar_width().0 as f32,
+            ..Default::default()
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    //! Standalone Style tests covering `apply`, aggregate-setter round-trips,
+    //! and context-value resolution at property-read time.
+
+    use super::*;
+    use crate::builtin_props::{Background, PaddingBottom, PaddingLeft, PaddingRight, TextColor};
+    use crate::components::Padding;
+    use crate::unit::Length;
+    use peniko::color::palette::css;
+    use peniko::Brush;
+
+    #[test]
+    fn apply_overrides_matching_props_and_preserves_others() {
+        let style1 = Style::new().padding_left(32.0);
+        let style2 = Style::new().padding_left(64.0);
+        let style = style1.apply(style2);
+        assert_eq!(style.get(PaddingLeft), Length::Pt(64.0));
+
+        let style1 = Style::new().padding_left(32.0).padding_bottom(45.0);
+        let style2 = Style::new().padding_left(64.0);
+        let style = style1.apply(style2);
+        assert_eq!(style.get(PaddingLeft), Length::Pt(64.0));
+        assert_eq!(style.get(PaddingBottom), Length::Pt(45.0));
+    }
+
+    #[test]
+    fn apply_padding_aggregate_matches_individual_setters() {
+        let style1 = Style::new().apply_padding(Padding::new().left(32.0).bottom(45.0));
+        let style2 = Style::new().apply_padding(Padding::new().left(64.0));
+        let style = style1.apply(style2);
+        assert_eq!(style.get(PaddingLeft), Length::Pt(64.0));
+        assert_eq!(style.get(PaddingBottom), Length::Pt(45.0));
+
+        let custom_padding = Padding::new().left(100.0).right(200.0);
+        let style1 = Style::new().apply_padding(custom_padding);
+        assert_eq!(style1.get(PaddingLeft), Length::Pt(100.0));
+        assert_eq!(style1.get(PaddingRight), Length::Pt(200.0));
+    }
+
+    #[test]
+    fn context_value_resolves_at_property_read() {
+        let style = Style::new()
+            .set(TextColor, Some(css::RED))
+            .with::<TextColor>(|s, t| s.set_context(Background, t.map(|tc| tc.map(Brush::Solid))));
+        assert_eq!(style.get(Background), Some(Brush::Solid(css::RED)));
+    }
+}
diff --git a/style/src/style_macros.rs b/style/src/style_macros.rs
new file mode 100644
index 000000000..17e039ac4
--- /dev/null
+++ b/style/src/style_macros.rs
@@ -0,0 +1,303 @@
+//! Style system macros usable from `floem_style`.
+//!
+//! [`prop!`] expands to define a zero-sized prop type and a [`StyleProp`]
+//! impl that installs a static [`StyleKeyInfo::Prop`].
+//! [`style_debug_group!`] expands to a similar zero-sized group marker.
+//! [`prop_extractor!`] expands to a struct that collects a set of
+//! [`StyleProp`]s and reads them off a [`Style`] with transition
+//! bookkeeping; the generated convenience methods drive transitions
+//! through the [`PropExtractorCx`](crate::PropExtractorCx) trait so the
+//! macro is host-neutral.
+//!
+//! All three macros live in this crate (rather than `floem`) because their
+//! expansions reference types in `floem_style` — `Style`, `StyleMapValue`,
+//! `StyleValue`, `PropDebugView`, `StyleProp`, `ExtractorField`, and
+//! `PropExtractorCx`.
+
+#[macro_export]
+macro_rules! style_debug_group {
+    ($(#[$meta:meta])* $v:vis $name:ident $(, inherited = $inherited:ident)?, members = [$($prop:ty),* $(,)?], view = $view:path) => {
+        $(#[$meta])*
+        #[derive(Default, Copy, Clone)]
+        $v struct $name;
+
+        impl $crate::StyleDebugGroup for $name {
+            fn key() -> $crate::StyleKey {
+                static INFO: $crate::StyleKeyInfo =
+                    $crate::StyleKeyInfo::DebugGroup(
+                        $crate::StyleDebugGroupInfo::new::<$name>(
+                            $crate::style_debug_group!(@inherited $($inherited)?),
+                            || vec![$(<$prop as $crate::StyleProp>::key()),*],
+                            |style| {
+                                let style = style
+                                    .downcast_ref::<$crate::Style>()
+                                    .expect("debug_view called with non-Style argument");
+                                $view(style).map(|view| {
+                                    Box::new(view) as Box<dyn std::any::Any>
+                                })
+                            },
+                        )
+                    );
+                $crate::StyleKey { info: &INFO }
+            }
+
+            fn member_props() -> Vec<$crate::StyleKey> {
+                vec![$(<$prop as $crate::StyleProp>::key()),*]
+            }
+
+            fn debug_view(style: &dyn std::any::Any) -> Option<Box<dyn std::any::Any>> {
+                let style = style
+                    .downcast_ref::<$crate::Style>()
+                    .expect("debug_view called with non-Style argument");
+                $view(style).map(|view| Box::new(view) as Box<dyn std::any::Any>)
+            }
+        }
+    };
+    (@inherited inherited) => {
+        true
+    };
+    (@inherited) => {
+        false
+    };
+}
+
+#[macro_export]
+macro_rules! prop {
+    ($(#[$meta:meta])* $v:vis $name:ident: $ty:ty { $($options:tt)* } = $default:expr
+    ) => {
+        $(#[$meta])*
+        #[derive(Default, Copy, Clone)]
+        #[allow(missing_docs)]
+        $v struct $name;
+        impl $crate::StyleProp for $name {
+            type Type = $ty;
+            fn key() -> $crate::StyleKey {
+                static TRANSITION_INFO: $crate::StyleKeyInfo = $crate::StyleKeyInfo::Transition;
+                static INFO: $crate::StyleKeyInfo = $crate::StyleKeyInfo::Prop($crate::StylePropInfo {
+                    name: || std::any::type_name::<$name>(),
+                    inherited: $crate::prop!([impl inherited][$($options)*]),
+                    default_as_any: || std::rc::Rc::new($crate::StyleMapValue::Val($name::default_value())),
+                    interpolate: |val1, val2, time| {
+                        use std::any::{Any, type_name};
+                        if let (Some(v1), Some(v2)) = (
+                            val1.downcast_ref::<$crate::StyleMapValue<$ty>>(),
+                            val2.downcast_ref::<$crate::StyleMapValue<$ty>>(),
+                        ) {
+                            if let (
+                                $crate::StyleMapValue::Val(v1) | $crate::StyleMapValue::Animated(v1),
+                                $crate::StyleMapValue::Val(v2) | $crate::StyleMapValue::Animated(v2),
+                            ) = (v1, v2)
+                            {
+                                <$ty as $crate::StylePropValue>::interpolate(v1, v2, time)
+                                    .map(|val| std::rc::Rc::new($crate::StyleMapValue::Animated(val)) as std::rc::Rc<dyn Any>)
+                            } else {
+                                None
+                            }
+                        } else {
+                            panic!(
+                                "expected type {} for property {}. Got typeids {:?} and {:?}",
+                                type_name::<$ty>(),
+                                type_name::<$name>(),
+                                val1.type_id(),
+                                val2.type_id()
+                            )
+                        }
+                    },
+                    debug_any: |val| {
+                        use std::any::type_name;
+                        if let Some(v) = val.downcast_ref::<$crate::StyleMapValue<$ty>>() {
+                            match v {
+                                $crate::StyleMapValue::Val(v) | $crate::StyleMapValue::Animated(v) => format!("{v:?}"),
+                                $crate::StyleMapValue::Context(_) => "Context(..)".to_owned(),
+                                $crate::StyleMapValue::Unset => "Unset".to_owned(),
+                            }
+                        } else {
+                            panic!(
+                                "expected type {} for property {}",
+                                type_name::<$ty>(),
+                                type_name::<$name>(),
+                            )
+                        }
+                    },
+                    debug_view: |val, r| {
+                        if let Some(v) = val.downcast_ref::<$crate::StyleMapValue<$ty>>() {
+                            match v {
+                                $crate::StyleMapValue::Val(v) | $crate::StyleMapValue::Animated(v) => {
+                                    <$ty as $crate::PropDebugView>::debug_view(v, r)
+                                }
+                                $crate::StyleMapValue::Context(_) => Some(r.text("Context(..)")),
+                                $crate::StyleMapValue::Unset => Some(r.text("Unset")),
+                            }
+                        } else {
+                            panic!(
+                                "expected type {} for property {}",
+                                std::any::type_name::<$ty>(),
+                                std::any::type_name::<$name>(),
+                            )
+                        }
+                    },
+                    transition_key: $crate::StyleKey { info: &TRANSITION_INFO },
+                    hash_any: |val| {
+                        use std::any::type_name;
+                        if let Some(v) = val.downcast_ref::<$crate::StyleMapValue<$ty>>() {
+                            match v {
+                                $crate::StyleMapValue::Val(v) | $crate::StyleMapValue::Animated(v) => <$ty as $crate::StylePropValue>::content_hash(v),
+                                $crate::StyleMapValue::Context(_) => 1,
+                                $crate::StyleMapValue::Unset => 0,
+                            }
+                        } else {
+                            panic!(
+                                "expected type {} for property {}",
+                                type_name::<$ty>(),
+                                type_name::<$name>(),
+                            )
+                        }
+                    },
+                    eq_any: |val1, val2| {
+                        use std::any::type_name;
+                        if let (Some(v1), Some(v2)) = (
+                            val1.downcast_ref::<$crate::StyleMapValue<$ty>>(),
+                            val2.downcast_ref::<$crate::StyleMapValue<$ty>>(),
+                        ) {
+                            match (v1, v2) {
+                                (
+                                    $crate::StyleMapValue::Val(a) | $crate::StyleMapValue::Animated(a),
+                                    $crate::StyleMapValue::Val(b) | $crate::StyleMapValue::Animated(b),
+                                ) => a == b,
+                                ($crate::StyleMapValue::Unset, $crate::StyleMapValue::Unset) => true,
+                                _ => false,
+                            }
+                        } else {
+                            panic!(
+                                "expected type {} for property {}. Got typeids {:?} and {:?}",
+                                type_name::<$ty>(),
+                                type_name::<$name>(),
+                                val1.type_id(),
+                                val2.type_id()
+                            )
+                        }
+                    },
+                    resolve_inherited_any: |val, style| {
+                        use std::any::type_name;
+                        let style = style
+                            .downcast_ref::<$crate::Style>()
+                            .expect("resolve_inherited_any called with non-Style argument");
+                        let resolved = match val.downcast_ref::<$crate::StyleMapValue<$ty>>().unwrap_or_else(|| {
+                            panic!(
+                                "expected type {} for property {}",
+                                type_name::<$ty>(),
+                                type_name::<$name>(),
+                            )
+                        }) {
+                            $crate::StyleMapValue::Val(value) | $crate::StyleMapValue::Animated(value) => {
+                                $crate::StyleMapValue::Val(value.clone())
+                            }
+                            $crate::StyleMapValue::Context(context_value) => {
+                                $crate::StyleMapValue::Val(
+                                    style.resolve_context(context_value),
+                                )
+                            }
+                            $crate::StyleMapValue::Unset => $crate::StyleMapValue::Unset,
+                        };
+                        std::rc::Rc::new(resolved)
+                    },
+                });
+                $crate::StyleKey { info: &INFO }
+            }
+            fn default_value() -> Self::Type {
+                $default
+            }
+        }
+    };
+    ([impl inherited][inherited]) => {
+        true
+    };
+    ([impl inherited][]) => {
+        false
+    };
+}
+
+#[macro_export]
+macro_rules! prop_extractor {
+    (
+        $(#[$attrs:meta])* $vis:vis $name:ident {
+            $($prop_vis:vis $field:ident: $prop:ty),*
+            $(,)?
+        }
+    ) => {
+        #[derive(Debug, Clone)]
+        $(#[$attrs])?
+        $vis struct $name {
+            $(
+                $prop_vis $field: $crate::ExtractorField<$prop>,
+            )*
+        }
+
+        impl $name {
+            /// Read every field of this extractor from `style`, advancing
+            /// any in-flight transitions against `cx.now()`. Returns
+            /// whether the aggregate resolved value changed. Sets
+            /// `*transitioning` to `true` if any field is still animating
+            /// after this pass — the caller is expected to schedule a
+            /// re-cascade on the owning node when that happens.
+            #[allow(dead_code)]
+            $vis fn read_style(
+                &mut self,
+                cx: &dyn $crate::PropExtractorCx,
+                style: &$crate::Style,
+                transitioning: &mut bool,
+            ) -> bool {
+                let now = $crate::PropExtractorCx::now(cx);
+                let mut changed = false;
+                $(
+                    changed |= self.$field.read(style, &now, transitioning);
+                )*
+                changed
+            }
+
+            /// Read every field of this extractor from `cx.direct_style()`.
+            /// See [`read_style`] for the transition contract.
+            #[allow(dead_code)]
+            $vis fn read(
+                &mut self,
+                cx: &dyn $crate::PropExtractorCx,
+                transitioning: &mut bool,
+            ) -> bool {
+                self.read_explicit(
+                    $crate::PropExtractorCx::direct_style(cx),
+                    &$crate::PropExtractorCx::now(cx),
+                    transitioning,
+                )
+            }
+
+            #[allow(dead_code)]
+            $vis fn read_explicit(
+                &mut self,
+                style: &$crate::Style,
+                #[cfg(not(target_arch = "wasm32"))]
+                now: &std::time::Instant,
+                #[cfg(target_arch = "wasm32")]
+                now: &web_time::Instant,
+                request_transition: &mut bool,
+            ) -> bool {
+                false $(| self.$field.read(style, now, request_transition))*
+            }
+
+            $($prop_vis fn $field(&self) -> <$prop as $crate::StyleProp>::Type
+            {
+                self.$field.get()
+            })*
+        }
+
+        impl Default for $name {
+            fn default() -> Self {
+                Self {
+                    $(
+                        $field: $crate::ExtractorField::new(),
+                    )*
+                }
+            }
+        }
+    };
+}
+
diff --git a/style/src/style_value.rs b/style/src/style_value.rs
new file mode 100644
index 000000000..b65c54759
--- /dev/null
+++ b/style/src/style_value.rs
@@ -0,0 +1,98 @@
+//! Internal and public style-property value enums.
+//!
+//! [`StyleMapValue<T>`] is the internal representation used in the style
+//! hashmap; [`StyleValue<T>`] is used in the public API. Both reference
+//! [`ContextValue<T>`] for context-resolved values, which is why they live
+//! here alongside it.
+
+use crate::context_value::ContextValue;
+
+/// Internal storage for style property values in the style map.
+///
+/// Unlike `StyleValue<T>` which is used in the public API, `StyleMapValue<T>`
+/// is the internal representation stored in the style hashmap.
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum StyleMapValue<T> {
+    /// Value inserted by animation interpolation
+    Animated(T),
+    /// Value set directly
+    Val(T),
+    /// Value resolved from inherited context when the property is read.
+    Context(ContextValue<T>),
+    /// Use the default value for the style, typically from the underlying `ComputedStyle`
+    Unset,
+}
+
+/// The value for a [`Style`] property in the public API.
+///
+/// This represents the result of reading a style property, with additional
+/// states like `Base` that indicate inheritance from parent styles.
+#[derive(Debug, Clone, PartialEq, Eq, Default)]
+pub enum StyleValue<T> {
+    /// Value resolved from inherited context when the property is read.
+    Context(ContextValue<T>),
+    /// Value inserted by animation interpolation
+    Animated(T),
+    /// Value set directly
+    Val(T),
+    /// Use the default value for the style, typically from the underlying `ComputedStyle`.
+    Unset,
+    /// Use whatever the base style is. For an overriding style like hover, this uses the base
+    /// style. For the base style, this is equivalent to `Unset`.
+    #[default]
+    Base,
+}
+
+impl<T: 'static> StyleValue<T> {
+    pub fn map<U: 'static>(self, f: impl Fn(T) -> U + 'static) -> StyleValue<U> {
+        match self {
+            Self::Context(x) => StyleValue::Context(x.map(f)),
+            Self::Val(x) => StyleValue::Val(f(x)),
+            Self::Animated(x) => StyleValue::Animated(f(x)),
+            Self::Unset => StyleValue::Unset,
+            Self::Base => StyleValue::Base,
+        }
+    }
+
+    pub fn unwrap_or(self, default: T) -> T {
+        match self {
+            Self::Context(_) => default,
+            Self::Val(x) => x,
+            Self::Animated(x) => x,
+            Self::Unset => default,
+            Self::Base => default,
+        }
+    }
+
+    pub fn unwrap_or_else(self, f: impl FnOnce() -> T) -> T {
+        match self {
+            Self::Context(_) => f(),
+            Self::Val(x) => x,
+            Self::Animated(x) => x,
+            Self::Unset => f(),
+            Self::Base => f(),
+        }
+    }
+
+    pub fn as_mut(&mut self) -> Option<&mut T> {
+        match self {
+            Self::Context(_) => None,
+            Self::Val(x) => Some(x),
+            Self::Animated(x) => Some(x),
+            Self::Unset => None,
+            Self::Base => None,
+        }
+    }
+}
+
+impl<T> From<T> for StyleValue<T> {
+    fn from(x: T) -> Self {
+        Self::Val(x)
+    }
+}
+
+impl<T> From<ContextValue<T>> for StyleValue<T> {
+    fn from(x: ContextValue<T>) -> Self {
+        Self::Context(x)
+    }
+}
diff --git a/src/style/transition.rs b/style/src/transition.rs
similarity index 60%
rename from src/style/transition.rs
rename to style/src/transition.rs
index 707b59659..f252e3312 100644
--- a/src/style/transition.rs
+++ b/style/src/transition.rs
@@ -4,45 +4,42 @@
 //! - [`Transition`] - Animation parameters (duration, easing)
 //! - [`TransitionState`] - Internal state for tracking active transitions
 //! - [`DirectTransition`] - Standalone transition controller
+//!
+//! The inspector preview for [`Transition`] (`Transition::debug_view`) lives
+//! in the `floem` crate behind the `TransitionDebugViewExt` extension trait,
+//! because it constructs views and so depends on `floem::view::View`.
 
-use floem_reactive::{RwSignal, SignalGet};
-use floem_renderer::Renderer;
-use peniko::color::palette;
-use peniko::kurbo::{self, Point, Stroke};
 use std::rc::Rc;
-use taffy::prelude::{auto, fr};
-
-use crate::platform::{Duration, Instant};
 
-use crate::animate::{Bezier, Easing, Linear, Spring};
-use crate::theme::StyleThemeExt;
-use crate::view::{IntoView, View};
-use crate::views::{ContainerExt, Decorators, Label, Stack, TooltipExt, canvas};
+#[cfg(not(target_arch = "wasm32"))]
+use std::time::{Duration, Instant};
+#[cfg(target_arch = "wasm32")]
+use web_time::{Duration, Instant};
 
-use super::StylePropValue;
-use super::values::views;
+use crate::easing::{Bezier, Easing, Linear, Spring};
+use crate::prop_value::StylePropValue;
 
 #[derive(Clone, Debug)]
-pub(crate) struct ActiveTransition<T: StylePropValue> {
-    pub(crate) start: Instant,
-    pub(crate) before: T,
-    pub(crate) current: T,
-    pub(crate) after: T,
+pub struct ActiveTransition<T: StylePropValue> {
+    pub start: Instant,
+    pub before: T,
+    pub current: T,
+    pub after: T,
 }
 
 #[derive(Clone, Debug)]
 pub struct TransitionState<T: StylePropValue> {
-    pub(crate) transition: Option<Transition>,
-    pub(crate) active: Option<ActiveTransition<T>>,
-    pub(crate) initial: bool,
+    pub transition: Option<Transition>,
+    pub active: Option<ActiveTransition<T>>,
+    pub initial: bool,
 }
 
 impl<T: StylePropValue> TransitionState<T> {
-    pub(crate) fn read(&mut self, transition: Option<Transition>) {
+    pub fn read(&mut self, transition: Option<Transition>) {
         self.transition = transition;
     }
 
-    pub(crate) fn transition(&mut self, before: &T, after: &T) {
+    pub fn transition(&mut self, before: &T, after: &T) {
         if !self.initial {
             return;
         }
@@ -57,7 +54,7 @@ impl<T: StylePropValue> TransitionState<T> {
     }
 
     /// Returns true if changed
-    pub(crate) fn step(&mut self, now: &Instant, request_transition: &mut bool) -> bool {
+    pub fn step(&mut self, now: &Instant, request_transition: &mut bool) -> bool {
         if !self.initial {
             // We have observed the initial value. Any further changes may trigger animations.
             self.initial = true;
@@ -87,7 +84,7 @@ impl<T: StylePropValue> TransitionState<T> {
         }
     }
 
-    pub(crate) fn get(&self, value: &T) -> T {
+    pub fn get(&self, value: &T) -> T {
         if let Some(active) = &self.active {
             active.current.clone()
         } else {
@@ -112,146 +109,6 @@ pub struct Transition {
     pub easing: Rc<dyn Easing>,
 }
 
-impl Transition {
-    pub fn debug_view(&self) -> Box<dyn View> {
-        let transition = self.clone();
-        let easing_clone = transition.easing.clone();
-
-        let curve_color = RwSignal::new(palette::css::BLUE);
-        let axis_color = RwSignal::new(palette::css::GRAY);
-
-        // Visual preview of the easing curve
-        let preview = canvas(move |cx, size| {
-            let width = size.width;
-            let height = size.height;
-            let padding = 4.0;
-            let graph_width = width - padding * 2.0;
-            let graph_height = height - padding * 2.0;
-
-            // Sample the easing function
-            let sample_count = 50;
-            let mut path = kurbo::BezPath::new();
-
-            for i in 0..=sample_count {
-                let t = i as f64 / sample_count as f64;
-                let eased = easing_clone.eval(t);
-                let x = padding + t * graph_width;
-                let y = padding + (1.0 - eased) * graph_height;
-
-                if i == 0 {
-                    path.move_to(Point::new(x, y));
-                } else {
-                    path.line_to(Point::new(x, y));
-                }
-            }
-
-            // Draw the curve
-            cx.stroke(
-                &path,
-                curve_color.get(),
-                &Stroke {
-                    width: 2.0,
-                    ..Default::default()
-                },
-            );
-
-            // Draw axes
-            let axis_stroke = Stroke {
-                width: 1.0,
-                ..Default::default()
-            };
-
-            // X axis
-            cx.stroke(
-                &kurbo::Line::new(
-                    Point::new(padding, height - padding),
-                    Point::new(width - padding, height - padding),
-                ),
-                axis_color.get(),
-                &axis_stroke,
-            );
-
-            // Y axis
-            cx.stroke(
-                &kurbo::Line::new(
-                    Point::new(padding, padding),
-                    Point::new(padding, height - padding),
-                ),
-                axis_color.get(),
-                &axis_stroke,
-            );
-        })
-        .style(|s| s.width(80.0).height(60.0))
-        .container()
-        .style(move |s| {
-            s.padding(4.0)
-                .border(1.)
-                .border_radius(5.0)
-                .with_theme(move |s, t| s.border_color(t.border()))
-        });
-
-        let tooltip_view = move || {
-            let transition = transition.clone();
-
-            let duration_row = views((
-                "Duration:".style(|s| s.font_bold().min_width(80.0).justify_end()),
-                Label::derived(move || format!("{:.0}ms", transition.duration.as_millis())),
-            ));
-
-            let easing_name = format!("{:?}", transition.easing);
-            let easing_row = views((
-                "Easing:".style(|s| s.font_bold().min_width(80.0).justify_end()),
-                Label::derived(move || easing_name.clone()),
-            ));
-
-            // Show velocity at key points if available
-            let velocity_samples = if transition.easing.velocity(0.0).is_some() {
-                let samples = vec![0.0, 0.25, 0.5, 0.75, 1.0]
-                    .into_iter()
-                    .filter_map(|t| {
-                        transition
-                            .easing
-                            .velocity(t)
-                            .map(|v| Label::new(format!("t={:.2}: {:.3}", t, v)))
-                    })
-                    .collect::<Vec<_>>();
-
-                if !samples.is_empty() {
-                    Some(views((
-                        "Velocity:".style(|s| s.font_bold().min_width(80.0).justify_end()),
-                        Stack::vertical_from_iter(samples).style(|s| s.gap(2.0)),
-                    )))
-                } else {
-                    None
-                }
-            } else {
-                None
-            };
-
-            let mut rows = vec![duration_row.into_any(), easing_row.into_any()];
-
-            if let Some(velocity_row) = velocity_samples {
-                rows.push(velocity_row.into_any());
-            }
-
-            Stack::vertical_from_iter(rows).style(|s| {
-                s.grid()
-                    .grid_template_columns([auto(), fr(1.)])
-                    .justify_center()
-                    .items_center()
-                    .row_gap(12)
-                    .col_gap(10)
-                    .padding(20)
-            })
-        };
-
-        preview
-            .tooltip(tooltip_view)
-            .style(|s| s.items_center())
-            .into_any()
-    }
-}
-
 impl Transition {
     pub fn new(duration: Duration, easing: impl Easing + 'static) -> Self {
         Self {
@@ -283,7 +140,7 @@ impl Transition {
 ///
 /// ```rust
 /// use std::time::{Duration, Instant};
-/// use floem::style::{DirectTransition, Transition};
+/// use floem_style::{DirectTransition, Transition};
 ///
 /// // Create a transition for animating opacity
 /// let mut opacity = DirectTransition::new(1., None);
@@ -446,3 +303,113 @@ impl<T: StylePropValue> DirectTransition<T> {
         }
     }
 }
+
+#[cfg(test)]
+mod tests {
+    //! Standalone transition tests exercising the interpolation machinery
+    //! without any floem/view scaffolding.
+
+    use super::*;
+
+    #[cfg(not(target_arch = "wasm32"))]
+    fn instant_plus(base: Instant, millis: u64) -> Instant {
+        base + Duration::from_millis(millis)
+    }
+    #[cfg(target_arch = "wasm32")]
+    fn instant_plus(base: Instant, millis: u64) -> Instant {
+        base + Duration::from_millis(millis)
+    }
+
+    #[test]
+    fn no_transition_set_ignores_trigger() {
+        let mut state: TransitionState<f64> = initial_state();
+        state.transition(&0.0, &100.0);
+        assert!(
+            state.active.is_none(),
+            "TransitionState::transition should not activate when no transition is configured"
+        );
+        assert_eq!(state.get(&100.0), 100.0);
+    }
+
+    #[test]
+    fn first_read_does_not_animate_initial_value() {
+        // The `initial` flag exists so the very first value observation does not
+        // fire a spurious transition (e.g. baseline→default on mount).
+        let mut state: TransitionState<f64> = TransitionState::default();
+        state.read(Some(Transition::linear(Duration::from_millis(100))));
+        state.transition(&0.0, &100.0);
+        assert!(
+            state.active.is_none(),
+            "initial transition() call should be suppressed until initial is observed"
+        );
+    }
+
+    fn initial_state<T: StylePropValue>() -> TransitionState<T> {
+        // Bypass the first-read gate so `transition()` activates on first call.
+        TransitionState {
+            initial: true,
+            ..Default::default()
+        }
+    }
+
+    #[test]
+    fn linear_transition_midpoint_is_interpolated() {
+        let mut state: DirectTransition<f64> =
+            DirectTransition::new(0.0, Some(Transition::linear(Duration::from_millis(100))));
+        let started = Instant::now();
+        // Trigger transition 0 → 100.
+        assert!(state.transition_to(100.0));
+        assert!(state.is_active());
+
+        // Step forward to ~50% of the duration.
+        let mid = instant_plus(started, 50);
+        let _changed = state.step(&mid);
+        let current = state.get();
+        assert!(
+            (30.0..=70.0).contains(&current),
+            "midpoint value should lie between before/after, got {current}"
+        );
+    }
+
+    #[test]
+    fn linear_transition_completes_at_target() {
+        let mut state: DirectTransition<f64> =
+            DirectTransition::new(0.0, Some(Transition::linear(Duration::from_millis(50))));
+        let started = Instant::now();
+        state.transition_to(100.0);
+
+        // Step past duration — transition should clear and `get` returns the target.
+        let after = instant_plus(started, 200);
+        state.step(&after);
+        assert!(!state.is_active());
+        assert_eq!(state.get(), 100.0);
+    }
+
+    #[test]
+    fn direct_transition_reports_progress() {
+        let mut state: DirectTransition<f64> =
+            DirectTransition::new(0.0, Some(Transition::linear(Duration::from_millis(100))));
+        let started = Instant::now();
+        state.transition_to(100.0);
+
+        let quarter = instant_plus(started, 25);
+        let prog = state.progress(&quarter).unwrap();
+        assert!(
+            (0.15..=0.40).contains(&prog),
+            "quarter-elapsed progress should be roughly 0.25, got {prog}"
+        );
+    }
+
+    #[test]
+    fn set_immediate_cancels_active_transition() {
+        let mut state: DirectTransition<f64> =
+            DirectTransition::new(0.0, Some(Transition::linear(Duration::from_millis(100))));
+        state.transition_to(100.0);
+        assert!(state.is_active());
+
+        state.set_immediate(42.0);
+        assert!(!state.is_active());
+        assert_eq!(state.get(), 42.0);
+    }
+
+}
diff --git a/style/src/tree.rs b/style/src/tree.rs
new file mode 100644
index 000000000..3fcfd7d20
--- /dev/null
+++ b/style/src/tree.rs
@@ -0,0 +1,1143 @@
+//! Engine-owned style tree — the host-agnostic counterpart to Taffy's layout
+//! tree.
+//!
+//! A [`StyleTree`] stores one [`StyleNode`] per styled element, carrying the
+//! node's direct style, applied classes, cached cascade outputs, and the
+//! parent/child edges needed for selector matching (`:first-child`,
+//! `:nth-child`, cascade propagation).
+//!
+//! Hosts (floem, future floem-native) keep a mapping from their own id type
+//! (e.g. `ViewId`) to [`StyleNodeId`] and push state changes here:
+//!
+//! ```text
+//! host creates view   → tree.new_node()          -> StyleNodeId
+//! host adds child     → tree.set_parent(child, parent)
+//!                     → tree.set_children(parent, &[...])
+//! host sets style     → tree.set_direct_style(node, style)
+//! host marks dirty    → tree.mark_dirty(node, reason)
+//! host runs pass      → tree.compute_style(root, &inputs)
+//! host reads result   → tree.computed_style(node)
+//! ```
+//!
+//! The engine carries no host identity — hosts that need to relate a
+//! `StyleNodeId` back to their own view type (floem: `ViewId`) keep a
+//! sidecar mapping, same shape as [`taffy::NodeId`] ↔ host-view.
+
+use rustc_hash::{FxHashMap, FxHashSet};
+use smallvec::SmallVec;
+use slotmap::{SlotMap, new_key_type};
+
+use crate::animation::{Animation, AnimationEvents};
+use crate::builtin_props::Display;
+use crate::cache::{StyleCache, StyleCacheKey};
+use crate::cascade::resolve_nested_maps;
+use crate::interaction::{InheritedInteractionCx, InteractionState};
+use crate::props::StyleClassRef;
+use crate::recalc::StyleReason;
+use crate::selectors::{StyleSelector, StyleSelectors};
+use crate::sink::CascadeInputs;
+use crate::style::Style;
+
+new_key_type! {
+    /// Identity of a node inside a [`StyleTree`]. Dense key backed by
+    /// [`slotmap`]; stable across removals within the same tree but not
+    /// across trees.
+    pub struct StyleNodeId;
+}
+
+/// Per-element state owned by the style engine.
+///
+/// Most fields are caches populated by `compute_style`. Host-pushed inputs
+/// are [`direct_style`](Self::direct_style), [`classes`](Self::classes), the
+/// parent/children edges, and
+/// [`parent_set_style_interaction`](Self::parent_set_style_interaction).
+///
+/// The node carries no host-side identity. Hosts that need to relate a
+/// [`StyleNodeId`] back to their own view/element type keep a sidecar
+/// mapping (taffy-style): forward as `ViewState.style_node:
+/// Option<StyleNodeId>`, reverse as a `FxHashMap<StyleNodeId, ViewId>`
+/// on the host state. The engine's APIs are keyed entirely on
+/// [`StyleNodeId`] — cascade inputs, scheduling, fixed-element
+/// registry, animation hooks.
+#[derive(Debug, Clone)]
+pub struct StyleNode {
+    // ── Tree edges ──────────────────────────────────────────────────────
+    pub(crate) parent: Option<StyleNodeId>,
+    pub(crate) children: Vec<StyleNodeId>,
+
+    // ── Host-pushed inputs ──────────────────────────────────────────────
+    /// Style set directly on this node via the `.style(...)` setter.
+    pub direct_style: Style,
+    /// Classes applied to this node via `.class(...)` / `.apply_class(...)`.
+    pub classes: SmallVec<[StyleClassRef; 4]>,
+    /// Interaction overrides pushed by a parent (e.g. "force-disable
+    /// descendants"). OR'd with inherited parent state during cascade.
+    pub parent_set_style_interaction: InheritedInteractionCx,
+    /// Optional override of the `(child_index, sibling_count)` used for
+    /// `:nth-child` / `:first-child` / `:last-child`. Hosts that use a
+    /// separate DOM tree (e.g. floem's `style_cx_parent` split) push the
+    /// structural position computed from their own tree here. `None`
+    /// means "use the tree's own parent/children edges".
+    pub structural_position_override: Option<(Option<usize>, usize)>,
+
+    // ── Cascade outputs (populated by compute_style — Phase 1b) ────────
+    /// Resolved style after class + selector merging, without inherited
+    /// properties from ancestors. Used for cache keys and child
+    /// propagation.
+    pub(crate) combined_style: Style,
+    /// Final style including inherited properties. This is what prop
+    /// extractors read.
+    pub(crate) computed_style: Style,
+    /// Inherited-only slice of this node's computed style. Passed to
+    /// children as their inherited context.
+    pub(crate) inherited_context: Style,
+    /// Class-map-only slice of this node's direct style. Passed to
+    /// children as their class context.
+    pub(crate) class_context: Style,
+    /// Interaction cx after resolving — becomes the inherited cx for
+    /// children.
+    pub(crate) style_interaction_cx: InheritedInteractionCx,
+    /// Selectors present in this node's style tree, cached for fast-path
+    /// dirty propagation.
+    pub(crate) has_style_selectors: Option<StyleSelectors>,
+
+    // ── Dirty bookkeeping ──────────────────────────────────────────────
+    /// Why this node (or a subtree rooted here) is pending recomputation.
+    /// Empty means the caches are up to date.
+    pub(crate) dirty: StyleReason,
+
+    // ── Animation registry ─────────────────────────────────────────────
+    /// Animations declared on this node. The cascade ticks these during
+    /// [`StyleTree::compute_style`] and folds their interpolated values
+    /// into `combined_style` before the result is propagated to children.
+    ///
+    /// A host may either push animations here directly (standalone
+    /// hosts, tests) or keep its own registry and implement
+    /// [`AnimationBackend`](crate::AnimationBackend); both paths
+    /// coexist and are invoked in order each frame.
+    pub(crate) animations: SmallVec<[Animation; 1]>,
+
+    /// Lifecycle events produced by the most recent tick of this node's
+    /// animations. Hosts drain via
+    /// [`StyleTree::take_animation_events`] to fire their own observers.
+    pub(crate) pending_animation_events: SmallVec<[(usize, AnimationEvents); 1]>,
+}
+
+impl StyleNode {
+    fn new() -> Self {
+        Self {
+            parent: None,
+            children: Vec::new(),
+            direct_style: Style::new(),
+            classes: SmallVec::new(),
+            parent_set_style_interaction: InheritedInteractionCx::default(),
+            structural_position_override: None,
+            combined_style: Style::new(),
+            computed_style: Style::new(),
+            inherited_context: Style::new(),
+            class_context: Style::new(),
+            style_interaction_cx: InheritedInteractionCx::default(),
+            has_style_selectors: None,
+            dirty: StyleReason::style_pass(),
+            animations: SmallVec::new(),
+            pending_animation_events: SmallVec::new(),
+        }
+    }
+
+    pub fn parent(&self) -> Option<StyleNodeId> {
+        self.parent
+    }
+
+    pub fn children(&self) -> &[StyleNodeId] {
+        &self.children
+    }
+}
+
+/// Engine-owned slotmap of [`StyleNode`]s. Cheap to clone if you need a
+/// snapshot (nodes are plain data). Typical use is a single long-lived
+/// instance per host window.
+#[derive(Default, Debug)]
+pub struct StyleTree {
+    nodes: SlotMap<StyleNodeId, StyleNode>,
+    cache: StyleCache,
+    // Per-selector interest registries, populated as the cascade resolves
+    // each node's style. Let descendant-dirty walks skip directly to the
+    // small set of nodes that could possibly match a given selector
+    // instead of traversing the full subtree.
+    responsive_interest: FxHashSet<StyleNodeId>,
+    disabled_interest: FxHashSet<StyleNodeId>,
+    selected_interest: FxHashSet<StyleNodeId>,
+    // Nodes the engine needs a future cascade pass for (animations in
+    // flight, transitions still interpolating). Populated by the cascade
+    // and by `schedule`; drained by the host via [`take_scheduled`] after
+    // each `compute_style` to feed the host's own per-frame work queue.
+    scheduled: FxHashMap<StyleNodeId, StyleReason>,
+    // Authoritative set of nodes whose resolved style has
+    // `position: fixed`. Maintained inline by the cascade; hosts that
+    // need to walk every fixed node (for layout positioning, paint
+    // ordering, etc.) read it via [`Self::fixed_elements`].
+    fixed_elements: FxHashSet<StyleNodeId>,
+    // Transitions from the most recent `compute_style` pass. The host
+    // drains these via [`Self::take_fixed_element_changes`] to trigger
+    // post-cascade side-effects (relayout, box-tree commit), then gets
+    // an empty set next frame until more transitions happen.
+    fixed_elements_added: SmallVec<[StyleNodeId; 2]>,
+    fixed_elements_removed: SmallVec<[StyleNodeId; 2]>,
+    // Set during `compute_style` when the cascade detects a change
+    // that requires the host to re-run layout (e.g. a `display` /
+    // visibility flip). Hosts consume via
+    // [`Self::take_needs_layout`] after each pass.
+    needs_layout: bool,
+    // Nodes the cascade marked dirty during this pass for host-visible
+    // side effects — their computed-style changed in a way the host's
+    // per-view bookkeeping (animations, taffy push, next-frame
+    // traversal) needs to know about. Host drains via
+    // [`Self::take_dirtied_this_pass`] after `compute_style`.
+    dirtied_this_pass: FxHashMap<StyleNodeId, StyleReason>,
+}
+
+impl StyleTree {
+    pub fn new() -> Self {
+        Self {
+            nodes: SlotMap::with_key(),
+            cache: StyleCache::new(),
+            responsive_interest: FxHashSet::default(),
+            disabled_interest: FxHashSet::default(),
+            selected_interest: FxHashSet::default(),
+            scheduled: FxHashMap::default(),
+            fixed_elements: FxHashSet::default(),
+            fixed_elements_added: SmallVec::new(),
+            fixed_elements_removed: SmallVec::new(),
+            needs_layout: false,
+            dirtied_this_pass: FxHashMap::default(),
+        }
+    }
+
+    /// Record that `node` needs a restyle on the next frame. Called by
+    /// the cascade for animation-driven nodes and by prop-extractor
+    /// transition hooks.
+    pub fn schedule(&mut self, node: StyleNodeId, reason: StyleReason) {
+        self.scheduled
+            .entry(node)
+            .and_modify(|existing| existing.merge(reason.clone()))
+            .or_insert(reason);
+    }
+
+    /// Drain every pending engine-originated schedule request. Hosts
+    /// should call this once per cascade pass, immediately after
+    /// `compute_style` returns, and funnel each entry into their own
+    /// per-frame scheduling.
+    pub fn take_scheduled(&mut self) -> impl Iterator<Item = (StyleNodeId, StyleReason)> {
+        std::mem::take(&mut self.scheduled).into_iter()
+    }
+
+    /// Record that `node` resolved to `position: fixed` on the current
+    /// pass. Idempotent: a node already present in the set is a no-op,
+    /// not a reported transition. Addition flips `needs_layout` so the
+    /// host relayouts on the drain.
+    fn register_fixed_element(&mut self, node: StyleNodeId) {
+        if self.fixed_elements.insert(node) {
+            self.fixed_elements_added.push(node);
+            self.needs_layout = true;
+        }
+    }
+
+    /// Record that `node` no longer resolves to `position: fixed`.
+    /// Idempotent: a node already absent is a no-op. Removal flips
+    /// `needs_layout` (the host also needs to reset the box-tree world
+    /// position, surfaced through [`Self::take_fixed_element_changes`]).
+    fn unregister_fixed_element(&mut self, node: StyleNodeId) {
+        if self.fixed_elements.remove(&node) {
+            self.fixed_elements_removed.push(node);
+            self.needs_layout = true;
+        }
+    }
+
+    /// Every node currently resolving to `position: fixed`.
+    pub fn fixed_elements(&self) -> &FxHashSet<StyleNodeId> {
+        &self.fixed_elements
+    }
+
+    /// `(added, removed)` transitions to the fixed-element set since the
+    /// last drain. Hosts call this after `compute_style` to trigger any
+    /// layout / box-tree side effects their fixed-positioning flow
+    /// needs. Subsequent calls return empty sets until more transitions
+    /// happen.
+    pub fn take_fixed_element_changes(
+        &mut self,
+    ) -> (SmallVec<[StyleNodeId; 2]>, SmallVec<[StyleNodeId; 2]>) {
+        (
+            std::mem::take(&mut self.fixed_elements_added),
+            std::mem::take(&mut self.fixed_elements_removed),
+        )
+    }
+
+    /// `true` if the cascade detected a style change that invalidates
+    /// the host's layout (e.g. a `display` / visibility flip). Drained
+    /// each pass so subsequent calls return `false` until the cascade
+    /// asks for another relayout.
+    pub fn take_needs_layout(&mut self) -> bool {
+        std::mem::take(&mut self.needs_layout)
+    }
+
+    /// Drain every `(StyleNodeId, StyleReason)` the cascade surfaced
+    /// during the most recent `compute_style`. Hosts consume these to
+    /// update their own dirty maps — floem translates each to its own
+    /// view id and routes through `WindowState::mark_style_dirty_with`
+    /// so the next frame's traversal covers descendants whose
+    /// inherited / class / visibility context changed this pass.
+    pub fn take_dirtied_this_pass(
+        &mut self,
+    ) -> impl Iterator<Item = (StyleNodeId, StyleReason)> {
+        std::mem::take(&mut self.dirtied_this_pass).into_iter()
+    }
+
+    /// Record that `node` was marked dirty during this cascade pass.
+    /// Merges with any existing entry for the same node.
+    fn record_pass_dirty(&mut self, node: StyleNodeId, reason: StyleReason) {
+        self.dirtied_this_pass
+            .entry(node)
+            .and_modify(|existing| existing.merge(reason.clone()))
+            .or_insert(reason);
+    }
+
+    /// Register an [`Animation`] on `node`. Returns the slot index used
+    /// by later [`Self::set_animation`] / [`Self::update_animation_with`]
+    /// calls. Panics if `node` is unknown.
+    pub fn push_animation(&mut self, node: StyleNodeId, anim: Animation) -> usize {
+        let node = &mut self.nodes[node];
+        let idx = node.animations.len();
+        node.animations.push(anim);
+        idx
+    }
+
+    /// Replace the animation at `slot` on `node`. No-op if `node` or the
+    /// slot is missing.
+    pub fn set_animation(&mut self, node: StyleNodeId, slot: usize, anim: Animation) {
+        if let Some(n) = self.nodes.get_mut(node)
+            && let Some(existing) = n.animations.get_mut(slot)
+        {
+            *existing = anim;
+        }
+    }
+
+    /// Mutate the animation at `slot` on `node` in place (used by
+    /// reactive state commands).
+    pub fn update_animation_with<F>(&mut self, node: StyleNodeId, slot: usize, f: F)
+    where
+        F: FnOnce(&mut Animation),
+    {
+        if let Some(n) = self.nodes.get_mut(node)
+            && let Some(existing) = n.animations.get_mut(slot)
+        {
+            f(existing);
+        }
+    }
+
+    /// Read-only view of every animation registered on `node`.
+    pub fn animations(&self, node: StyleNodeId) -> &[Animation] {
+        self.nodes
+            .get(node)
+            .map(|n| n.animations.as_slice())
+            .unwrap_or(&[])
+    }
+
+    /// Mutable view of every animation registered on `node`.
+    pub fn animations_mut(&mut self, node: StyleNodeId) -> &mut [Animation] {
+        self.nodes
+            .get_mut(node)
+            .map(|n| n.animations.as_mut_slice())
+            .unwrap_or(&mut [])
+    }
+
+    /// Drain animation-lifecycle events produced by the most recent
+    /// [`Self::compute_style`]. Each entry is `(slot_index, events)`
+    /// for the node identified by `node`. Hosts call this to fire their
+    /// own observers (floem: reactive `Trigger`s; native hosts:
+    /// platform-specific notifications).
+    pub fn take_animation_events(
+        &mut self,
+        node: StyleNodeId,
+    ) -> SmallVec<[(usize, AnimationEvents); 1]> {
+        if let Some(n) = self.nodes.get_mut(node) {
+            std::mem::take(&mut n.pending_animation_events)
+        } else {
+            SmallVec::new()
+        }
+    }
+
+    /// Drop every cached cascade result. The host should call this when a
+    /// global input changes such that the cache keys are no longer
+    /// meaningful (OS theme flip, responsive breakpoint change, etc.).
+    pub fn clear_cache(&mut self) {
+        self.cache.clear();
+    }
+
+    /// Read-only view into the cache stats. Primarily for tests/debug.
+    pub fn cache_stats(&self) -> crate::cache::CacheStats {
+        self.cache.stats()
+    }
+
+    /// Update `node`'s entry in the per-selector interest registries to
+    /// match the selector set its style resolved to.
+    fn update_selector_interest(
+        &mut self,
+        node: StyleNodeId,
+        selectors: Option<StyleSelectors>,
+    ) {
+        let has_responsive = selectors.is_some_and(StyleSelectors::has_responsive);
+        let has_disabled = selectors.is_some_and(|s| s.has(StyleSelector::Disabled));
+        let has_selected = selectors.is_some_and(|s| s.has(StyleSelector::Selected));
+        set_membership(&mut self.responsive_interest, node, has_responsive);
+        set_membership(&mut self.disabled_interest, node, has_disabled);
+        set_membership(&mut self.selected_interest, node, has_selected);
+    }
+
+    /// Mark every descendant of `ancestor` that has interest in `selector`
+    /// as dirty and return `(StyleNodeId, reason)` pairs for each so the
+    /// host can feed them into its own per-frame scheduling. Only
+    /// `Selected` and `Disabled` are tracked; other selectors return empty.
+    pub fn mark_descendants_with_selector_dirty(
+        &mut self,
+        ancestor: StyleNodeId,
+        selector: StyleSelector,
+    ) -> SmallVec<[(StyleNodeId, StyleReason); 4]> {
+        let candidates: SmallVec<[StyleNodeId; 4]> = match selector {
+            StyleSelector::Disabled => self.disabled_interest.iter().copied().collect(),
+            StyleSelector::Selected => self.selected_interest.iter().copied().collect(),
+            _ => return SmallVec::new(),
+        };
+        let reason = StyleReason::with_selector(selector);
+        self.dirty_ancestry_matches(&candidates, ancestor, &reason)
+    }
+
+    /// Responsive counterpart of [`Self::mark_descendants_with_selector_dirty`].
+    pub fn mark_descendants_with_responsive_selector_dirty(
+        &mut self,
+        ancestor: StyleNodeId,
+    ) -> SmallVec<[(StyleNodeId, StyleReason); 4]> {
+        let candidates: SmallVec<[StyleNodeId; 4]> =
+            self.responsive_interest.iter().copied().collect();
+        let reason = StyleReason::with_selectors(StyleSelectors::empty().responsive());
+        self.dirty_ancestry_matches(&candidates, ancestor, &reason)
+    }
+
+    /// For each candidate whose parent chain passes through `ancestor`,
+    /// set its dirty bit and collect `(StyleNodeId, reason)`. Shared
+    /// core of both descendant-dirty walks. Skips `ancestor` itself —
+    /// floem's original walk excludes the node that triggered the
+    /// descent.
+    fn dirty_ancestry_matches(
+        &mut self,
+        candidates: &[StyleNodeId],
+        ancestor: StyleNodeId,
+        reason: &StyleReason,
+    ) -> SmallVec<[(StyleNodeId, StyleReason); 4]> {
+        let mut out: SmallVec<[(StyleNodeId, StyleReason); 4]> = SmallVec::new();
+        for &node in candidates {
+            if node != ancestor && self.is_descendant_of(node, ancestor) {
+                self.mark_dirty(node, reason.clone());
+                out.push((node, reason.clone()));
+            }
+        }
+        out
+    }
+
+    /// Allocate a new orphan node. The node has no parent and no
+    /// children until a setter is called. Hosts keep their own
+    /// `ViewId → StyleNodeId` map (taffy-style); the engine itself
+    /// carries no host identity.
+    pub fn new_node(&mut self) -> StyleNodeId {
+        self.nodes.insert(StyleNode::new())
+    }
+
+    /// Remove a node. Detaches from its parent's child list and clears
+    /// each child's `parent` pointer (children are NOT recursively removed
+    /// — hosts are responsible for removing subtrees explicitly).
+    pub fn remove_node(&mut self, id: StyleNodeId) -> Option<StyleNode> {
+        let node = self.nodes.remove(id)?;
+        self.responsive_interest.remove(&id);
+        self.disabled_interest.remove(&id);
+        self.selected_interest.remove(&id);
+        if self.fixed_elements.remove(&id) {
+            self.fixed_elements_removed.push(id);
+            self.needs_layout = true;
+        }
+        if let Some(parent) = node.parent
+            && let Some(parent_node) = self.nodes.get_mut(parent)
+        {
+            parent_node.children.retain(|c| *c != id);
+        }
+        for child in &node.children {
+            if let Some(child_node) = self.nodes.get_mut(*child) {
+                child_node.parent = None;
+            }
+        }
+        Some(node)
+    }
+
+    pub fn contains(&self, id: StyleNodeId) -> bool {
+        self.nodes.contains_key(id)
+    }
+
+    pub fn get(&self, id: StyleNodeId) -> Option<&StyleNode> {
+        self.nodes.get(id)
+    }
+
+    pub fn get_mut(&mut self, id: StyleNodeId) -> Option<&mut StyleNode> {
+        self.nodes.get_mut(id)
+    }
+
+    pub fn len(&self) -> usize {
+        self.nodes.len()
+    }
+
+    pub fn is_empty(&self) -> bool {
+        self.nodes.is_empty()
+    }
+
+    // ── Tree-structure setters ──────────────────────────────────────────
+
+    /// Set `child`'s parent to `parent`. Detaches `child` from any previous
+    /// parent. Panics if either id is unknown or if the operation would
+    /// create a cycle (parent must not be a descendant of child).
+    pub fn set_parent(&mut self, child: StyleNodeId, parent: Option<StyleNodeId>) {
+        assert!(self.contains(child), "unknown child node");
+        if let Some(p) = parent {
+            assert!(self.contains(p), "unknown parent node");
+            debug_assert!(
+                !self.is_descendant_of(p, child),
+                "set_parent would create a cycle"
+            );
+        }
+
+        let old_parent = self.nodes[child].parent;
+        if old_parent == parent {
+            return;
+        }
+
+        if let Some(old) = old_parent
+            && let Some(old_node) = self.nodes.get_mut(old)
+        {
+            old_node.children.retain(|c| *c != child);
+        }
+
+        self.nodes[child].parent = parent;
+        if let Some(p) = parent {
+            self.nodes[p].children.push(child);
+        }
+        let reason = StyleReason::inherited();
+        self.mark_dirty(child, reason);
+    }
+
+    /// Replace `parent`'s child list. Each child's `parent` pointer is
+    /// updated to point at `parent`. Previous children retained in the new
+    /// list keep their position; removed children become orphans.
+    pub fn set_children(&mut self, parent: StyleNodeId, children: &[StyleNodeId]) {
+        assert!(self.contains(parent), "unknown parent node");
+        for c in children {
+            assert!(self.contains(*c), "unknown child node");
+        }
+
+        let old_children = std::mem::take(&mut self.nodes[parent].children);
+        for c in &old_children {
+            if !children.contains(c)
+                && let Some(node) = self.nodes.get_mut(*c)
+            {
+                node.parent = None;
+            }
+        }
+        for c in children {
+            if let Some(node) = self.nodes.get_mut(*c) {
+                if let Some(prev_parent) = node.parent
+                    && prev_parent != parent
+                    && let Some(prev) = self.nodes.get_mut(prev_parent)
+                {
+                    prev.children.retain(|existing| existing != c);
+                }
+                self.nodes[*c].parent = Some(parent);
+            }
+        }
+        self.nodes[parent].children = children.to_vec();
+        self.mark_dirty(parent, StyleReason::inherited());
+    }
+
+    fn is_descendant_of(&self, candidate: StyleNodeId, root: StyleNodeId) -> bool {
+        let mut cursor = Some(candidate);
+        while let Some(id) = cursor {
+            if id == root {
+                return true;
+            }
+            cursor = self.nodes.get(id).and_then(|n| n.parent);
+        }
+        false
+    }
+
+    // ── Style input setters ─────────────────────────────────────────────
+
+    pub fn set_direct_style(&mut self, id: StyleNodeId, style: Style) {
+        if let Some(node) = self.nodes.get_mut(id) {
+            node.direct_style = style;
+            node.dirty.merge(StyleReason::style_pass());
+        }
+    }
+
+    pub fn set_classes(&mut self, id: StyleNodeId, classes: &[StyleClassRef]) {
+        if let Some(node) = self.nodes.get_mut(id) {
+            node.classes.clear();
+            node.classes.extend_from_slice(classes);
+            node.dirty.merge(StyleReason::class_cx(Default::default()));
+        }
+    }
+
+    pub fn set_parent_interaction(
+        &mut self,
+        id: StyleNodeId,
+        interaction: InheritedInteractionCx,
+    ) {
+        if let Some(node) = self.nodes.get_mut(id) {
+            node.parent_set_style_interaction = interaction;
+            node.dirty.merge(StyleReason::style_pass());
+        }
+    }
+
+    /// Override the structural position used for `:nth-child` et al. Hosts
+    /// whose structural-position notion differs from the tree's own
+    /// parent/children edges (e.g. floem's list-item re-parenting) push
+    /// the host-computed `(child_index, sibling_count)` here. Pass `None`
+    /// to defer to the tree's own edges.
+    pub fn set_structural_position_override(
+        &mut self,
+        id: StyleNodeId,
+        pos: Option<(Option<usize>, usize)>,
+    ) {
+        if let Some(node) = self.nodes.get_mut(id) {
+            if node.structural_position_override != pos {
+                node.dirty.merge(StyleReason::style_pass());
+            }
+            node.structural_position_override = pos;
+        }
+    }
+
+    pub fn mark_dirty(&mut self, id: StyleNodeId, reason: StyleReason) {
+        if let Some(node) = self.nodes.get_mut(id) {
+            node.dirty.merge(reason);
+        }
+    }
+
+    pub fn is_dirty(&self, id: StyleNodeId) -> bool {
+        self.nodes
+            .get(id)
+            .map(|n| !n.dirty.is_empty())
+            .unwrap_or(false)
+    }
+
+    // ── Cached-output readers ──────────────────────────────────────────
+
+    /// Final computed style (host-inherited + direct + selectors). Returns
+    /// the *last result of `compute_style`* — will be empty until the
+    /// cascade has run (Phase 1b).
+    pub fn computed_style(&self, id: StyleNodeId) -> Option<&Style> {
+        self.nodes.get(id).map(|n| &n.computed_style)
+    }
+
+    /// The pre-inheritance merged style (classes + selectors resolved) for
+    /// this node. Used for cache keys.
+    pub fn combined_style(&self, id: StyleNodeId) -> Option<&Style> {
+        self.nodes.get(id).map(|n| &n.combined_style)
+    }
+
+    pub fn has_style_selectors(&self, id: StyleNodeId) -> Option<StyleSelectors> {
+        self.nodes.get(id).and_then(|n| n.has_style_selectors)
+    }
+
+    pub fn style_interaction_cx(&self, id: StyleNodeId) -> Option<InheritedInteractionCx> {
+        self.nodes.get(id).map(|n| n.style_interaction_cx)
+    }
+
+    /// Inherited-only slice of the computed style. Hosts copy this to
+    /// their per-view inherited context so children see it on their
+    /// next cascade.
+    pub fn inherited_context(&self, id: StyleNodeId) -> Option<&Style> {
+        self.nodes.get(id).map(|n| &n.inherited_context)
+    }
+
+    /// Class-map-only slice of the direct style, propagated to
+    /// descendants for class resolution.
+    pub fn class_context(&self, id: StyleNodeId) -> Option<&Style> {
+        self.nodes.get(id).map(|n| &n.class_context)
+    }
+
+    // ── Cascade ─────────────────────────────────────────────────────────
+
+    /// Run the style cascade over the subtree rooted at `root`.
+    ///
+    /// For each dirty node in the subtree this resolves classes +
+    /// selectors + inherited context into `combined_style` /
+    /// `computed_style`, derives the child-facing `inherited_context`
+    /// and `class_context`, ticks tree-stored animations and the host's
+    /// optional [`AnimationBackend`](crate::AnimationBackend), and
+    /// records all side-effects (fixed-element transitions, scheduled
+    /// reruns, dirtied descendants, layout invalidations, animation
+    /// events) in tree-owned state.
+    ///
+    /// Callers assemble a [`CascadeInputs`] once per pass with the
+    /// global reads (theme, frame-start, screen-size, etc.) plus a
+    /// per-node interaction closure, then drain every output after the
+    /// call via `tree.take_*` methods.
+    ///
+    /// Clean nodes are traversed (so dirty descendants are visited)
+    /// but their own computed state is not recomputed.
+    ///
+    /// See `tests/mock_sink.rs` and `tests/style_tree_cascade.rs` for
+    /// complete standalone-host examples.
+    pub fn compute_style(&mut self, root: StyleNodeId, inputs: &CascadeInputs<'_>) {
+        if !self.contains(root) {
+            return;
+        }
+        self.compute_subtree(root, inputs);
+    }
+
+    fn compute_subtree(&mut self, id: StyleNodeId, inputs: &CascadeInputs<'_>) {
+        if self.is_dirty(id) {
+            self.compute_one(id, inputs);
+        }
+        // Always descend — a clean parent may have dirty descendants.
+        let children: Vec<StyleNodeId> = self
+            .nodes
+            .get(id)
+            .map(|n| n.children.clone())
+            .unwrap_or_default();
+        for child in children {
+            self.compute_subtree(child, inputs);
+        }
+    }
+
+    fn compute_one(&mut self, id: StyleNodeId, inputs: &CascadeInputs<'_>) {
+        // Gather parent context (or theme defaults if orphan / root).
+        let (parent_inherited, parent_class_cx, parent_interaction_cx) = {
+            let parent_id = self.nodes[id].parent;
+            match parent_id.and_then(|p| self.nodes.get(p)) {
+                Some(p) => (
+                    p.inherited_context.clone(),
+                    p.class_context.clone(),
+                    p.style_interaction_cx,
+                ),
+                None => (
+                    inputs.default_theme_inherited.clone(),
+                    inputs.default_theme_classes.clone(),
+                    InheritedInteractionCx::default(),
+                ),
+            }
+        };
+
+        // Structural position among siblings (1-based; None if orphan).
+        // Honor a host-pushed override if set (floem uses this for list
+        // items whose style-cx parent differs from their DOM parent).
+        let (child_index, sibling_count) = self
+            .nodes
+            .get(id)
+            .and_then(|n| n.structural_position_override)
+            .unwrap_or_else(|| self.structural_position(id));
+
+        // Snapshot node inputs while borrowed immutably.
+        let (direct_style, classes, parent_overrides) = {
+            let node = &self.nodes[id];
+            (
+                node.direct_style.clone(),
+                node.classes.clone(),
+                node.parent_set_style_interaction,
+            )
+        };
+
+        // Pull per-node interaction bits through the one cascade-time
+        // callback the host provides, combine with the parent's
+        // inherited interaction cx and global reads from `inputs`.
+        let per_node = (inputs.interactions)(id);
+        let mut interact_state = InteractionState {
+            is_selected: parent_overrides.selected | parent_interaction_cx.selected,
+            is_disabled: parent_overrides.disabled | parent_interaction_cx.disabled,
+            is_hidden: parent_overrides.hidden | parent_interaction_cx.hidden,
+            is_hovered: per_node.is_hovered,
+            is_focused: per_node.is_focused,
+            is_focus_within: per_node.is_focus_within,
+            is_active: per_node.is_active,
+            is_dark_mode: inputs.is_dark_mode,
+            is_file_hover: per_node.is_file_hover,
+            using_keyboard_navigation: inputs.keyboard_navigation,
+            child_index,
+            sibling_count,
+            window_width: inputs.root_size_width,
+        };
+
+        // Pull the direct style's own disabled/selected/hidden bits into
+        // `interact_state` BEFORE cascading so `:disabled` / `:selected`
+        // selectors activate based on the style itself, not just sink
+        // state inherited from the parent.
+        {
+            let builtin = direct_style.builtin();
+            interact_state.is_disabled |= builtin.set_disabled();
+            interact_state.is_selected |= builtin.set_selected();
+            interact_state.is_hidden |= builtin.display() == Display::None;
+        }
+
+        // Consult the engine-owned style cache. A hit lets us skip the
+        // cascade entirely — it stores `combined_style`,
+        // `has_style_selectors`, and the post-cascade interaction flags.
+        let cacheable = StyleCache::is_cacheable(&direct_style)
+            && !parent_class_cx.has_structural_selectors();
+        let cache_key = cacheable.then(|| {
+            StyleCacheKey::new_from_hash(
+                direct_style.content_hash(),
+                &interact_state,
+                inputs.screen_size_bp,
+                &classes,
+                &parent_class_cx,
+            )
+        });
+
+        let cache_hit = cache_key
+            .as_ref()
+            .and_then(|k| self.cache.get(k, &parent_inherited));
+
+        let (mut combined_style, selectors, post_interact) = if let Some(hit) = cache_hit {
+            let sels = hit.has_style_selectors.unwrap_or_default();
+            let post = hit.post_interact;
+            // Match the OR'ing a cascade would have done so selectors
+            // depending on these bits activate for downstream logic.
+            interact_state.is_disabled |= post.disabled;
+            interact_state.is_selected |= post.selected;
+            interact_state.is_hidden |= post.hidden;
+            (hit.combined_style, sels, post)
+        } else {
+            let (combined_style, selectors) = resolve_nested_maps(
+                direct_style,
+                &mut interact_state,
+                inputs.screen_size_bp,
+                &classes,
+                &parent_inherited,
+                &parent_class_cx,
+            );
+            // After cascade, the combined style may have set_disabled /
+            // set_selected / display:None explicitly (e.g. via a selector
+            // branch). OR those into the interaction cx we store & propagate.
+            {
+                let builtin = combined_style.builtin();
+                interact_state.is_disabled |= builtin.set_disabled();
+                interact_state.is_selected |= builtin.set_selected();
+                interact_state.is_hidden |= builtin.display() == Display::None;
+            }
+            let post_interact = InheritedInteractionCx {
+                hidden: combined_style.builtin().display() == Display::None,
+                selected: combined_style.builtin().set_selected(),
+                disabled: combined_style.builtin().set_disabled(),
+            };
+            if let Some(key) = cache_key {
+                self.cache.insert(
+                    key,
+                    &combined_style,
+                    Some(selectors),
+                    post_interact,
+                    &parent_inherited,
+                );
+            }
+            (combined_style, selectors, post_interact)
+        };
+
+        // Apply animations on top of the cached/cascaded combined_style.
+        // Animations must run AFTER the cache write so the cache holds
+        // pre-animation baselines (per-pass time-varying values can't be
+        // cached), and BEFORE inherited context derivation so animated
+        // inherited props propagate to descendants.
+        //
+        // Two parallel paths coexist:
+        // - Tree-stored animations ticked inline (for standalone hosts
+        //   and tests that push directly via `push_animation`). Events
+        //   are queued on the node for the host to drain via
+        //   `take_animation_events`.
+        // - `StyleSink::apply_animations` for hosts that maintain their
+        //   own registry with reactive wrappers (floem today). This also
+        //   gives native hosts a hook to delegate to a compositor
+        //   animation engine instead of CPU-ticking.
+        let tree_has_active = {
+            let node = &mut self.nodes[id];
+            let mut any_active = false;
+            for (slot, anim) in node.animations.iter_mut().enumerate() {
+                let can_advance = anim.can_advance();
+                let should_apply = anim.should_apply_folded();
+                if !can_advance && !should_apply {
+                    continue;
+                }
+                if can_advance {
+                    any_active = true;
+                    anim.animate_into(&mut combined_style);
+                    let events = anim.advance();
+                    if events.started || events.visual_completed || events.completed {
+                        node.pending_animation_events.push((slot, events));
+                    }
+                } else {
+                    anim.apply_folded(&mut combined_style);
+                }
+            }
+            // Mirror host-apply_animations interact OR'ing.
+            let builtin = combined_style.builtin();
+            interact_state.is_hidden |= builtin.display() == Display::None;
+            interact_state.is_selected |= builtin.set_selected();
+            interact_state.is_disabled |= builtin.set_disabled();
+            any_active
+        };
+
+        let backend_has_active =
+            inputs
+                .animations
+                .apply(id, &mut combined_style, &mut interact_state);
+
+        if tree_has_active || backend_has_active {
+            self.schedule(id, StyleReason::animation());
+        }
+
+        // Merge inherited + combined → computed style for this node.
+        let mut computed_style = parent_inherited.clone();
+        computed_style.apply_mut(&combined_style);
+        let computed_style = computed_style.with_inherited_context(&parent_inherited);
+
+        if computed_style.builtin().is_fixed() {
+            self.register_fixed_element(id);
+        } else {
+            self.unregister_fixed_element(id);
+        }
+
+        // Derive the inherited + class contexts children will see.
+        let mut new_inherited = parent_inherited.clone();
+        Style::apply_only_inherited(&mut new_inherited, &combined_style);
+        let mut new_class_cx = parent_class_cx.clone();
+        Style::apply_only_class_maps(&mut new_class_cx, &combined_style);
+
+        // Did child-facing context change? If so, dirty the children.
+        let old_inherited_id = self.nodes[id].inherited_context.merge_id();
+        let inherited_changed = new_inherited.merge_id() != old_inherited_id;
+        let changed_classes = self
+            .nodes[id]
+            .class_context
+            .class_maps_eq(&new_class_cx);
+        let class_cx_changed = !changed_classes.is_empty();
+
+        // Children see the full post-cascade interaction state — combined
+        // style bits OR'd with parent_set_style_interaction and ancestor
+        // context — so e.g. descendants of a list-selected item inherit
+        // the selected bit. Matches floem's old `style_interaction_cx`
+        // write-back. `post_interact` is still stored separately for
+        // cache validation.
+        let new_interaction_cx = InheritedInteractionCx {
+            disabled: interact_state.is_disabled,
+            selected: interact_state.is_selected,
+            hidden: interact_state.is_hidden,
+        };
+        let _ = post_interact;
+
+        // Snapshot the previous interaction cx + the dirty reason that
+        // drove this compute before we overwrite them below. We use
+        // these for descendant-dirtying side-effects so that e.g. a
+        // view flipping to hidden re-lays out and its kids restyle.
+        let old_interaction_cx = self.nodes[id].style_interaction_cx;
+        let old_dirty_selectors = self.nodes[id].dirty.selectors;
+
+        {
+            let node = &mut self.nodes[id];
+            node.combined_style = combined_style;
+            node.computed_style = computed_style;
+            node.inherited_context = new_inherited;
+            node.class_context = new_class_cx;
+            node.style_interaction_cx = new_interaction_cx;
+            node.has_style_selectors = Some(selectors);
+            node.dirty = StyleReason::empty();
+        }
+
+        if inherited_changed || class_cx_changed {
+            let children: Vec<StyleNodeId> = self.nodes[id].children.clone();
+            let reason = if class_cx_changed {
+                StyleReason::class_cx(changed_classes)
+            } else {
+                StyleReason::inherited()
+            };
+            for child in children {
+                self.mark_dirty(child, reason.clone());
+                // Also surface the dirty so the host's per-view
+                // bookkeeping (floem's `style_dirty` map, driving the
+                // next frame's traversal for animations / taffy push /
+                // etc.) covers descendants whose inherited or class
+                // context just changed.
+                self.record_pass_dirty(child, reason.clone());
+            }
+        }
+
+        // Propagate hidden/selected/disabled flips to descendants.
+        // `mark_descendants_with_selector_dirty` is skipped when the
+        // caller's `dirty` already carried the matching selector — the
+        // descendant walk has already been scheduled in that case.
+        if old_interaction_cx.hidden != new_interaction_cx.hidden {
+            let children: Vec<StyleNodeId> = self.nodes[id].children.clone();
+            for child in children {
+                self.record_pass_dirty(child, StyleReason::visibility());
+            }
+            self.needs_layout = true;
+        }
+        if old_interaction_cx.selected != new_interaction_cx.selected
+            && !old_dirty_selectors.is_some_and(|s| s.has(StyleSelector::Selected))
+        {
+            let dirtied = self
+                .mark_descendants_with_selector_dirty(id, StyleSelector::Selected);
+            for (node_id, reason) in dirtied {
+                self.record_pass_dirty(node_id, reason);
+            }
+        }
+        if old_interaction_cx.disabled != new_interaction_cx.disabled
+            && !old_dirty_selectors.is_some_and(|s| s.has(StyleSelector::Disabled))
+        {
+            let dirtied = self
+                .mark_descendants_with_selector_dirty(id, StyleSelector::Disabled);
+            for (node_id, reason) in dirtied {
+                self.record_pass_dirty(node_id, reason);
+            }
+        }
+
+        // Update this node's entry in the tree's per-selector interest
+        // registries. Subsequent descendant-dirty walks use these to
+        // visit only the subset of nodes that could match.
+        self.update_selector_interest(id, Some(selectors));
+    }
+
+    /// Return `(child_index, sibling_count)` for `id` using the tree's own
+    /// parent/children edges. `child_index` is 1-based to match the CSS
+    /// `:nth-child()` semantics expected by [`crate::cascade`].
+    fn structural_position(&self, id: StyleNodeId) -> (Option<usize>, usize) {
+        match self.nodes.get(id).and_then(|n| n.parent) {
+            Some(parent) => {
+                let siblings = self
+                    .nodes
+                    .get(parent)
+                    .map(|p| p.children.as_slice())
+                    .unwrap_or(&[]);
+                let idx = siblings.iter().position(|c| *c == id).map(|i| i + 1);
+                (idx, siblings.len())
+            }
+            None => (None, 0),
+        }
+    }
+}
+
+fn set_membership(set: &mut FxHashSet<StyleNodeId>, id: StyleNodeId, present: bool) {
+    if present {
+        set.insert(id);
+    } else {
+        set.remove(&id);
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    //! Phase 1a scaffolding tests: node allocation, parent/child edges,
+    //! style setters. Cascade behavior is covered in Phase 1b tests.
+
+    use super::*;
+    use crate::builtin_props::Background;
+
+    #[test]
+    fn new_node_allocates_a_fresh_id() {
+        let mut st = StyleTree::new();
+        let a = st.new_node();
+        let b = st.new_node();
+        assert_ne!(a, b);
+        assert_eq!(st.len(), 2);
+        assert!(st.contains(a));
+        assert!(st.contains(b));
+    }
+
+    #[test]
+    fn set_parent_updates_both_sides() {
+        let mut st = StyleTree::new();
+        let parent = st.new_node();
+        let child = st.new_node();
+
+        st.set_parent(child, Some(parent));
+        assert_eq!(st.get(child).unwrap().parent(), Some(parent));
+        assert_eq!(st.get(parent).unwrap().children(), &[child]);
+    }
+
+    #[test]
+    fn set_parent_detaches_from_old_parent() {
+        let mut st = StyleTree::new();
+        let p1 = st.new_node();
+        let p2 = st.new_node();
+        let child = st.new_node();
+
+        st.set_parent(child, Some(p1));
+        st.set_parent(child, Some(p2));
+        assert_eq!(st.get(p1).unwrap().children(), &[]);
+        assert_eq!(st.get(p2).unwrap().children(), &[child]);
+    }
+
+    #[test]
+    fn set_children_replaces_and_updates_parents() {
+        let mut st = StyleTree::new();
+        let parent = st.new_node();
+        let c1 = st.new_node();
+        let c2 = st.new_node();
+        let c3 = st.new_node();
+
+        st.set_children(parent, &[c1, c2]);
+        assert_eq!(st.get(parent).unwrap().children(), &[c1, c2]);
+        assert_eq!(st.get(c1).unwrap().parent(), Some(parent));
+        assert_eq!(st.get(c2).unwrap().parent(), Some(parent));
+
+        // Replacing with a different set detaches c2, attaches c3.
+        st.set_children(parent, &[c1, c3]);
+        assert_eq!(st.get(parent).unwrap().children(), &[c1, c3]);
+        assert_eq!(st.get(c2).unwrap().parent(), None);
+        assert_eq!(st.get(c3).unwrap().parent(), Some(parent));
+    }
+
+    #[test]
+    fn remove_node_detaches_from_tree() {
+        let mut st = StyleTree::new();
+        let parent = st.new_node();
+        let child = st.new_node();
+        let grandchild = st.new_node();
+        st.set_parent(child, Some(parent));
+        st.set_parent(grandchild, Some(child));
+
+        let removed = st.remove_node(child);
+        assert!(removed.is_some());
+        assert!(!st.contains(child));
+        // Parent's child list no longer references it.
+        assert_eq!(st.get(parent).unwrap().children(), &[]);
+        // Grandchild is orphaned (not recursively removed).
+        assert_eq!(st.get(grandchild).unwrap().parent(), None);
+    }
+
+    #[test]
+    fn set_direct_style_stores_style_and_marks_dirty() {
+        let mut st = StyleTree::new();
+        let n = st.new_node();
+
+        let style = Style::new().background(peniko::color::palette::css::RED);
+        st.set_direct_style(n, style);
+
+        assert_eq!(
+            st.get(n).unwrap().direct_style.get(Background),
+            Some(peniko::color::palette::css::RED.into())
+        );
+        assert!(st.is_dirty(n));
+    }
+
+    #[test]
+    #[should_panic(expected = "would create a cycle")]
+    fn set_parent_rejects_cycle() {
+        let mut st = StyleTree::new();
+        let a = st.new_node();
+        let b = st.new_node();
+        st.set_parent(b, Some(a));
+        // This would put `a` under its own descendant.
+        st.set_parent(a, Some(b));
+    }
+}
diff --git a/src/style/unit.rs b/style/src/unit.rs
similarity index 94%
rename from src/style/unit.rs
rename to style/src/unit.rs
index 27c180e8d..80ddda2f8 100644
--- a/src/style/unit.rs
+++ b/style/src/unit.rs
@@ -17,9 +17,56 @@
 #![allow(deprecated)]
 use std::{ops::Neg, time::Duration};
 
-pub use floem_renderer::text::LineHeightValue;
 use taffy::style::{Dimension, LengthPercentage, LengthPercentageAuto};
 
+/// Specifies how line height is computed for text layout.
+///
+/// # Example
+///
+/// ```
+/// use floem_style::LineHeightValue;
+///
+/// // 1.5x the font size (e.g. 24px for a 16px font).
+/// let lh = LineHeightValue::Normal(1.5);
+///
+/// // Fixed 20-point line height regardless of font size.
+/// let lh = LineHeightValue::Pt(20.0);
+/// ```
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub enum LineHeightValue {
+    /// A multiplier of the font size (e.g. `1.0` means line height equals font size).
+    Normal(f32),
+    /// An absolute line height in points.
+    Pt(f32),
+}
+
+impl LineHeightValue {
+    pub fn resolve(&self, font_size: f32) -> f32 {
+        match self {
+            LineHeightValue::Pt(value) => *value,
+            LineHeightValue::Normal(multiplier) => font_size * multiplier,
+        }
+    }
+}
+
+impl From<f32> for LineHeightValue {
+    fn from(value: f32) -> Self {
+        LineHeightValue::Normal(value)
+    }
+}
+
+impl From<f64> for LineHeightValue {
+    fn from(value: f64) -> Self {
+        LineHeightValue::Normal(value as f32)
+    }
+}
+
+impl From<i32> for LineHeightValue {
+    fn from(value: i32) -> Self {
+        LineHeightValue::Normal(value as f32)
+    }
+}
+
 /// An absolute length value in Floem layout points.
 #[derive(Debug, Clone, Copy, PartialEq)]
 pub struct Pt(pub f64);
diff --git a/style/src/value_impls/collections.rs b/style/src/value_impls/collections.rs
new file mode 100644
index 000000000..a0a684b6b
--- /dev/null
+++ b/style/src/value_impls/collections.rs
@@ -0,0 +1,101 @@
+//! `StylePropValue` impls for container types (`Option`, `Vec`, `SmallVec`) and
+//! `std::time::Duration` (or `web_time::Duration` on wasm).
+
+use smallvec::SmallVec;
+
+#[cfg(not(target_arch = "wasm32"))]
+use std::time::Duration;
+#[cfg(target_arch = "wasm32")]
+use web_time::Duration;
+
+use crate::prop_value::{StylePropValue, hash_value};
+
+impl<A: smallvec::Array> StylePropValue for SmallVec<A>
+where
+    <A as smallvec::Array>::Item: StylePropValue,
+{
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        self.iter().zip(other.iter()).try_fold(
+            SmallVec::with_capacity(self.len()),
+            |mut acc, (v1, v2)| {
+                if let Some(interpolated) = v1.interpolate(v2, value) {
+                    acc.push(interpolated);
+                    Some(acc)
+                } else {
+                    None
+                }
+            },
+        )
+    }
+
+    fn content_hash(&self) -> u64 {
+        use std::hash::{Hash, Hasher};
+        let mut h = rustc_hash::FxHasher::default();
+        self.len().hash(&mut h);
+        for item in self.iter() {
+            item.content_hash().hash(&mut h);
+        }
+        h.finish()
+    }
+}
+
+impl<T: StylePropValue> StylePropValue for Option<T> {
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        self.as_ref().and_then(|this| {
+            other
+                .as_ref()
+                .and_then(|other| this.interpolate(other, value).map(Some))
+        })
+    }
+
+    fn content_hash(&self) -> u64 {
+        use std::hash::{Hash, Hasher};
+        let mut h = rustc_hash::FxHasher::default();
+        match self {
+            Some(v) => {
+                1u8.hash(&mut h);
+                v.content_hash().hash(&mut h);
+            }
+            None => 0u8.hash(&mut h),
+        }
+        h.finish()
+    }
+}
+
+impl<T: StylePropValue + 'static> StylePropValue for Vec<T> {
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        self.iter().zip(other.iter()).try_fold(
+            Vec::with_capacity(self.len()),
+            |mut acc, (v1, v2)| {
+                if let Some(interpolated) = v1.interpolate(v2, value) {
+                    acc.push(interpolated);
+                    Some(acc)
+                } else {
+                    None
+                }
+            },
+        )
+    }
+
+    fn content_hash(&self) -> u64 {
+        use std::hash::{Hash, Hasher};
+        let mut h = rustc_hash::FxHasher::default();
+        self.len().hash(&mut h);
+        for item in self {
+            item.content_hash().hash(&mut h);
+        }
+        h.finish()
+    }
+}
+
+impl StylePropValue for Duration {
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        self.as_secs_f64()
+            .interpolate(&other.as_secs_f64(), value)
+            .map(Duration::from_secs_f64)
+    }
+
+    fn content_hash(&self) -> u64 {
+        hash_value(self)
+    }
+}
diff --git a/style/src/value_impls/debug_view_impls.rs b/style/src/value_impls/debug_view_impls.rs
new file mode 100644
index 000000000..36edca6e1
--- /dev/null
+++ b/style/src/value_impls/debug_view_impls.rs
@@ -0,0 +1,243 @@
+//! `PropDebugView` impls for types not owned by the `floem` crate.
+//!
+//! These live here (rather than in `floem`) because the orphan rule requires
+//! the impls to be in the crate that owns the trait. The impls are
+//! renderer-agnostic: they call methods on `&dyn InspectorRender` instead of
+//! constructing any concrete view type.
+
+use std::any::Any;
+
+use parley::{Alignment, FontStyle, FontWeight};
+
+use crate::unit::LineHeightValue;
+use peniko::kurbo::{self, Affine, Stroke};
+use peniko::{Brush, Color, Gradient};
+use smallvec::SmallVec;
+use taffy::geometry::{MinMax, Size};
+use taffy::prelude::{GridPlacement, Line};
+use taffy::style::{
+    AlignContent, AlignItems, BoxSizing, Display, FlexDirection, FlexWrap, LengthPercentage,
+    MaxTrackSizingFunction, MinTrackSizingFunction, Overflow, Position,
+};
+use taffy::{GridAutoFlow, GridTemplateComponent};
+
+#[cfg(not(target_arch = "wasm32"))]
+use std::time::Duration;
+#[cfg(target_arch = "wasm32")]
+use web_time::Duration;
+
+use crate::debug_view::PropDebugView;
+use crate::inspector_render::InspectorRender;
+use crate::prop_value::StylePropValue;
+#[allow(deprecated)]
+use crate::unit::{AnchorAbout, Angle, Length, LengthAuto, Pct, Pt, Px, PxPct, PxPctAuto};
+use crate::values::{ObjectFit, ObjectPosition};
+
+crate::no_debug_view!(
+    i32,
+    bool,
+    f32,
+    u16,
+    usize,
+    f64,
+    Overflow,
+    Display,
+    Position,
+    FlexDirection,
+    FlexWrap,
+    AlignItems,
+    BoxSizing,
+    AlignContent,
+    GridTemplateComponent<String>,
+    MinTrackSizingFunction,
+    MaxTrackSizingFunction,
+    GridAutoFlow,
+    GridPlacement,
+    String,
+    Alignment,
+    LineHeightValue,
+    Size<LengthPercentage>,
+    Angle,
+    AnchorAbout,
+    Duration,
+);
+
+impl<T, M> PropDebugView for MinMax<T, M> {}
+impl<T> PropDebugView for Line<T> {}
+
+impl PropDebugView for ObjectFit {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        Some(r.object_fit(*self))
+    }
+}
+
+impl PropDebugView for ObjectPosition {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        Some(r.object_position(self))
+    }
+}
+
+impl<T: PropDebugView> PropDebugView for Option<T> {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        self.as_ref().and_then(|v| v.debug_view(r))
+    }
+}
+
+impl<T: StylePropValue + PropDebugView + 'static> PropDebugView for Vec<T> {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        if self.is_empty() {
+            return Some(r.muted_text("[]"));
+        }
+
+        let items: Vec<Box<dyn Any>> = self
+            .iter()
+            .enumerate()
+            .map(|(i, item)| {
+                let content = item
+                    .debug_view(r)
+                    .unwrap_or_else(|| r.text(&format!("{:?}", item)));
+                r.labelled(&format!("[{}]", i), content)
+            })
+            .collect();
+
+        Some(r.vertical_list(items))
+    }
+}
+
+impl<A: smallvec::Array> PropDebugView for SmallVec<A>
+where
+    <A as smallvec::Array>::Item: StylePropValue + PropDebugView,
+{
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        if self.is_empty() {
+            return Some(r.text("smallvec\n[]"));
+        }
+
+        let count = self.len();
+        let is_spilled = self.spilled();
+
+        let summary_label = if is_spilled {
+            format!("smallvec\n[{}] (heap)", count)
+        } else {
+            format!("smallvec\n[{}] (inline)", count)
+        };
+        let summary = r.text(&summary_label);
+
+        let items: Vec<Box<dyn Any>> = self
+            .iter()
+            .enumerate()
+            .map(|(i, item)| {
+                let content = item
+                    .debug_view(r)
+                    .unwrap_or_else(|| r.text(&format!("{:?}", item)));
+                r.labelled(&format!("[{}]", i), content)
+            })
+            .collect();
+        let details = r.vertical_list(items);
+
+        Some(r.horizontal_pair(summary, details))
+    }
+}
+
+impl PropDebugView for FontWeight {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        Some(r.font_weight(*self, &format!("{self:?}")))
+    }
+}
+
+impl PropDebugView for FontStyle {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        Some(r.font_style(*self, &format!("{self:?}")))
+    }
+}
+
+impl PropDebugView for Pt {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        Some(r.text(&format!("{} pt", self.0)))
+    }
+}
+#[allow(deprecated)]
+impl PropDebugView for Px {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        Pt(self.0).debug_view(r)
+    }
+}
+impl PropDebugView for Pct {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        Some(r.text(&format!("{}%", self.0)))
+    }
+}
+impl PropDebugView for LengthAuto {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        let label = match self {
+            Self::Pt(v) => format!("{v} pt"),
+            Self::Pct(v) => format!("{v}%"),
+            Self::Em(v) => format!("{v} em"),
+            Self::Lh(v) => format!("{v} lh"),
+            Self::Auto => "auto".to_string(),
+        };
+        Some(r.text(&label))
+    }
+}
+#[allow(deprecated)]
+impl PropDebugView for PxPctAuto {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        LengthAuto::from(*self).debug_view(r)
+    }
+}
+impl PropDebugView for Length {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        let label = match self {
+            Self::Pt(v) => format!("{v} pt"),
+            Self::Pct(v) => format!("{v}%"),
+            Self::Em(v) => format!("{v} em"),
+            Self::Lh(v) => format!("{v} lh"),
+        };
+        Some(r.text(&label))
+    }
+}
+#[allow(deprecated)]
+impl PropDebugView for PxPct {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        Length::from(*self).debug_view(r)
+    }
+}
+
+impl PropDebugView for Color {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        Some(r.color(*self))
+    }
+}
+
+impl PropDebugView for Gradient {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        Some(r.gradient(self))
+    }
+}
+
+impl PropDebugView for Stroke {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        Some(r.stroke(self))
+    }
+}
+
+impl PropDebugView for Brush {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        match self {
+            Brush::Solid(_) | Brush::Gradient(_) => Some(r.brush(self)),
+            Brush::Image(_) => None,
+        }
+    }
+}
+
+impl PropDebugView for kurbo::Rect {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        Some(r.rect(self))
+    }
+}
+
+impl PropDebugView for Affine {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        Some(r.affine(self))
+    }
+}
diff --git a/style/src/value_impls/localization.rs b/style/src/value_impls/localization.rs
new file mode 100644
index 000000000..1b8c99593
--- /dev/null
+++ b/style/src/value_impls/localization.rs
@@ -0,0 +1,22 @@
+//! `StylePropValue` and `PropDebugView` impls for
+//! `unic_langid::LanguageIdentifier`, gated behind the `localization` feature.
+
+use std::any::Any;
+
+use unic_langid::LanguageIdentifier;
+
+use crate::debug_view::PropDebugView;
+use crate::inspector_render::InspectorRender;
+use crate::prop_value::StylePropValue;
+
+impl StylePropValue for LanguageIdentifier {
+    fn interpolate(&self, _other: &Self, _value: f64) -> Option<Self> {
+        None
+    }
+}
+
+impl PropDebugView for LanguageIdentifier {
+    fn debug_view(&self, r: &dyn InspectorRender) -> Option<Box<dyn Any>> {
+        Some(r.text(&format!("{self:?}")))
+    }
+}
diff --git a/style/src/value_impls/mod.rs b/style/src/value_impls/mod.rs
new file mode 100644
index 000000000..da7478cbc
--- /dev/null
+++ b/style/src/value_impls/mod.rs
@@ -0,0 +1,18 @@
+//! `StylePropValue` impls for types not owned by the `floem` crate.
+//!
+//! These impls live in `floem_style` to satisfy Rust's orphan rule, since
+//! both the trait and the types belong to external crates (or to
+//! `floem_style`'s own unit module).
+
+mod collections;
+mod debug_view_impls;
+mod peniko;
+mod primitives;
+mod taffy;
+mod text;
+mod unit;
+
+#[cfg(feature = "localization")]
+mod localization;
+
+pub use peniko::AffineLerp;
diff --git a/style/src/value_impls/peniko.rs b/style/src/value_impls/peniko.rs
new file mode 100644
index 000000000..7fda63bf2
--- /dev/null
+++ b/style/src/value_impls/peniko.rs
@@ -0,0 +1,303 @@
+//! `StylePropValue` impls for peniko types (`Color`, `Gradient`, `Brush`,
+//! `Stroke`) and kurbo types (`Rect`, `Affine`), plus the `AffineLerp` helper
+//! used by `Affine`'s interpolate implementation.
+
+use peniko::color::HueDirection;
+use peniko::kurbo::{self, Affine, Stroke, Vec2};
+use peniko::{
+    Brush, Color, ColorStop, ColorStops, Gradient, InterpolationAlphaSpace,
+};
+
+use crate::prop_value::{StylePropValue, hash_f64};
+
+impl StylePropValue for Color {
+    fn content_hash(&self) -> u64 {
+        use std::hash::{Hash, Hasher};
+        let mut h = rustc_hash::FxHasher::default();
+        for c in self.components {
+            c.to_bits().hash(&mut h);
+        }
+        h.finish()
+    }
+
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        Some(self.lerp(*other, value as f32, HueDirection::default()))
+    }
+}
+
+impl StylePropValue for Gradient {
+    fn interpolate(&self, _other: &Self, _value: f64) -> Option<Self> {
+        None
+    }
+
+    fn content_hash(&self) -> u64 {
+        use std::hash::{Hash, Hasher};
+        let mut h = rustc_hash::FxHasher::default();
+        std::mem::discriminant(&self.kind).hash(&mut h);
+        for stop in self.stops.iter() {
+            stop.offset.to_bits().hash(&mut h);
+            for c in stop.color.components {
+                c.to_bits().hash(&mut h);
+            }
+        }
+        h.finish()
+    }
+}
+
+impl StylePropValue for Stroke {
+    fn content_hash(&self) -> u64 {
+        hash_f64(self.width)
+    }
+}
+
+impl StylePropValue for Brush {
+    fn content_hash(&self) -> u64 {
+        use std::hash::{Hash, Hasher};
+        let mut h = rustc_hash::FxHasher::default();
+        std::mem::discriminant(self).hash(&mut h);
+        match self {
+            Brush::Solid(c) => {
+                for comp in c.components {
+                    comp.to_bits().hash(&mut h);
+                }
+            }
+            Brush::Gradient(g) => g.content_hash().hash(&mut h),
+            Brush::Image(_) => {}
+        }
+        h.finish()
+    }
+
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        match (self, other) {
+            (Brush::Solid(color), Brush::Solid(other)) => Some(Self::Solid(color.lerp(
+                *other,
+                value as f32,
+                HueDirection::default(),
+            ))),
+            (Brush::Gradient(gradient), Brush::Solid(solid)) => {
+                let interpolated_stops: Vec<ColorStop> = gradient
+                    .stops
+                    .iter()
+                    .map(|stop| {
+                        let interpolated_color = stop.color.to_alpha_color().lerp(
+                            *solid,
+                            value as f32,
+                            HueDirection::default(),
+                        );
+                        ColorStop::from((stop.offset, interpolated_color))
+                    })
+                    .collect();
+                Some(Brush::Gradient(Gradient {
+                    kind: gradient.kind,
+                    extend: gradient.extend,
+                    interpolation_cs: gradient.interpolation_cs,
+                    hue_direction: gradient.hue_direction,
+                    stops: ColorStops::from(&*interpolated_stops),
+                    interpolation_alpha_space: InterpolationAlphaSpace::Premultiplied,
+                }))
+            }
+            (Brush::Solid(solid), Brush::Gradient(gradient)) => {
+                let interpolated_stops: Vec<ColorStop> = gradient
+                    .stops
+                    .iter()
+                    .map(|stop| {
+                        let interpolated_color = solid.lerp(
+                            stop.color.to_alpha_color(),
+                            value as f32,
+                            HueDirection::default(),
+                        );
+                        ColorStop::from((stop.offset, interpolated_color))
+                    })
+                    .collect();
+                Some(Brush::Gradient(Gradient {
+                    kind: gradient.kind,
+                    extend: gradient.extend,
+                    interpolation_cs: gradient.interpolation_cs,
+                    hue_direction: gradient.hue_direction,
+                    stops: ColorStops::from(&*interpolated_stops),
+                    interpolation_alpha_space: InterpolationAlphaSpace::Premultiplied,
+                }))
+            }
+
+            (Brush::Gradient(gradient1), Brush::Gradient(gradient2)) => {
+                gradient1.interpolate(gradient2, value).map(Brush::Gradient)
+            }
+            _ => None,
+        }
+    }
+}
+
+impl StylePropValue for kurbo::Rect {
+    fn content_hash(&self) -> u64 {
+        use std::hash::{Hash, Hasher};
+        let mut h = rustc_hash::FxHasher::default();
+        self.x0.to_bits().hash(&mut h);
+        self.y0.to_bits().hash(&mut h);
+        self.x1.to_bits().hash(&mut h);
+        self.y1.to_bits().hash(&mut h);
+        h.finish()
+    }
+
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        let lerp = |a: f64, b: f64| a + (b - a) * value;
+
+        Some(Self {
+            x0: lerp(self.x0, other.x0),
+            y0: lerp(self.y0, other.y0),
+            x1: lerp(self.x1, other.x1),
+            y1: lerp(self.y1, other.y1),
+        })
+    }
+}
+
+impl StylePropValue for Affine {
+    fn interpolate(&self, other: &Self, t: f64) -> Option<Self> {
+        Some(self.lerp(other, t))
+    }
+
+    fn content_hash(&self) -> u64 {
+        use std::hash::{Hash, Hasher};
+        let mut hasher = rustc_hash::FxHasher::default();
+
+        let coeffs = self.as_coeffs();
+        for coeff in coeffs {
+            coeff.to_bits().hash(&mut hasher);
+        }
+
+        hasher.finish()
+    }
+}
+
+pub trait AffineLerp {
+    fn svd(self) -> (Vec2, f64);
+
+    /// Linearly interpolate between two affine transforms.
+    ///
+    /// This implements the CSS Transforms interpolation algorithm:
+    /// - Decompose both transforms into translation, rotation, and scale components
+    /// - Interpolate each component separately
+    /// - Recompose the result
+    ///
+    /// `t` should be in the range [0.0, 1.0] where:
+    /// - t = 0.0 returns `self`
+    /// - t = 1.0 returns `other`
+    /// - t = 0.5 returns the midpoint
+    fn lerp(&self, other: &Affine, t: f64) -> Affine;
+}
+
+impl AffineLerp for Affine {
+    fn svd(self) -> (Vec2, f64) {
+        let [a, b, c, d, _, _] = self.as_coeffs();
+        let a2 = a * a;
+        let b2 = b * b;
+        let c2 = c * c;
+        let d2 = d * d;
+        let ab = a * b;
+        let cd = c * d;
+        let angle = 0.5 * (2.0 * (ab + cd)).atan2(a2 - b2 + c2 - d2);
+        let s1 = a2 + b2 + c2 + d2;
+        let s2 = ((a2 - b2 + c2 - d2).powi(2) + 4.0 * (ab + cd).powi(2)).sqrt();
+        (
+            Vec2 {
+                x: (0.5 * (s1 + s2)).sqrt(),
+                y: (0.5 * (s1 - s2)).sqrt(),
+            },
+            angle,
+        )
+    }
+
+    fn lerp(&self, other: &Affine, t: f64) -> Affine {
+        // Extract translations
+        let trans_a = self.translation();
+        let trans_b = other.translation();
+
+        // Remove translations to get the linear parts
+        let linear_a = self.with_translation(Vec2::ZERO);
+        let linear_b = other.with_translation(Vec2::ZERO);
+
+        // Decompose into scale and rotation using SVD
+        let (scale_a, rotation_a) = linear_a.svd();
+        let (scale_b, rotation_b) = linear_b.svd();
+
+        // Interpolate translation
+        let trans = Vec2 {
+            x: trans_a.x + (trans_b.x - trans_a.x) * t,
+            y: trans_a.y + (trans_b.y - trans_a.y) * t,
+        };
+
+        // Interpolate scale
+        let scale = Vec2 {
+            x: scale_a.x + (scale_b.x - scale_a.x) * t,
+            y: scale_a.y + (scale_b.y - scale_a.y) * t,
+        };
+
+        // Interpolate rotation (taking the shorter path)
+        let mut angle_diff = rotation_b - rotation_a;
+        // Normalize to [-π, π] to take the shorter rotation path
+        while angle_diff > std::f64::consts::PI {
+            angle_diff -= 2.0 * std::f64::consts::PI;
+        }
+        while angle_diff < -std::f64::consts::PI {
+            angle_diff += 2.0 * std::f64::consts::PI;
+        }
+        let rotation = rotation_a + angle_diff * t;
+
+        // Recompose: rotate -> scale -> translate
+        Affine::rotate(rotation)
+            .then_scale_non_uniform(scale.x, scale.y)
+            .then_translate(trans)
+    }
+}
+
+#[cfg(test)]
+mod affine_lerp_tests {
+    use super::*;
+    use peniko::kurbo::Point;
+
+    #[test]
+    fn test_lerp_identity() {
+        let a = Affine::IDENTITY;
+        let b = Affine::translate(Vec2::new(100.0, 50.0));
+
+        let result = a.lerp(&b, 0.0);
+        assert_eq!(result.as_coeffs(), a.as_coeffs());
+
+        let result = a.lerp(&b, 1.0);
+        assert_eq!(result.as_coeffs(), b.as_coeffs());
+    }
+
+    #[test]
+    fn test_lerp_translation() {
+        let a = Affine::translate(Vec2::new(0.0, 0.0));
+        let b = Affine::translate(Vec2::new(100.0, 50.0));
+
+        let result = a.lerp(&b, 0.5);
+        let trans = result.translation();
+        assert!((trans.x - 50.0).abs() < 1e-10);
+        assert!((trans.y - 25.0).abs() < 1e-10);
+    }
+
+    #[test]
+    fn test_lerp_rotation() {
+        let a = Affine::rotate(0.0);
+        let b = Affine::rotate(std::f64::consts::PI / 2.0);
+
+        let result = a.lerp(&b, 0.5);
+        // Should be rotated by π/4
+        let point = result * Point::new(1.0, 0.0);
+        let expected_angle = std::f64::consts::PI / 4.0;
+        assert!((point.x - expected_angle.cos()).abs() < 1e-10);
+        assert!((point.y - expected_angle.sin()).abs() < 1e-10);
+    }
+
+    #[test]
+    fn test_lerp_scale() {
+        let a = Affine::scale(1.0);
+        let b = Affine::scale(2.0);
+
+        let result = a.lerp(&b, 0.5);
+        let point = result * Point::new(1.0, 1.0);
+        assert!((point.x - 1.5).abs() < 1e-10);
+        assert!((point.y - 1.5).abs() < 1e-10);
+    }
+}
diff --git a/style/src/value_impls/primitives.rs b/style/src/value_impls/primitives.rs
new file mode 100644
index 000000000..56575236d
--- /dev/null
+++ b/style/src/value_impls/primitives.rs
@@ -0,0 +1,54 @@
+//! `StylePropValue` impls for primitive types and `String`.
+
+use crate::prop_value::{StylePropValue, hash_f32, hash_f64, hash_value};
+
+impl StylePropValue for i32 {
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        Some((*self as f64 + (*other as f64 - *self as f64) * value).round() as i32)
+    }
+    fn content_hash(&self) -> u64 {
+        hash_value(self)
+    }
+}
+impl StylePropValue for bool {
+    fn content_hash(&self) -> u64 {
+        hash_value(self)
+    }
+}
+impl StylePropValue for f32 {
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        Some(*self * (1.0 - value as f32) + *other * value as f32)
+    }
+    fn content_hash(&self) -> u64 {
+        hash_f32(*self)
+    }
+}
+impl StylePropValue for u16 {
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        Some((*self as f64 + (*other as f64 - *self as f64) * value).round() as u16)
+    }
+    fn content_hash(&self) -> u64 {
+        hash_value(self)
+    }
+}
+impl StylePropValue for usize {
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        Some((*self as f64 + (*other as f64 - *self as f64) * value).round() as usize)
+    }
+    fn content_hash(&self) -> u64 {
+        hash_value(self)
+    }
+}
+impl StylePropValue for f64 {
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        Some(*self * (1.0 - value) + *other * value)
+    }
+    fn content_hash(&self) -> u64 {
+        hash_f64(*self)
+    }
+}
+impl StylePropValue for String {
+    fn content_hash(&self) -> u64 {
+        hash_value(self)
+    }
+}
diff --git a/style/src/value_impls/taffy.rs b/style/src/value_impls/taffy.rs
new file mode 100644
index 000000000..de03afabc
--- /dev/null
+++ b/style/src/value_impls/taffy.rs
@@ -0,0 +1,76 @@
+//! `StylePropValue` impls for taffy types.
+
+use taffy::GridTemplateComponent;
+use taffy::geometry::{MinMax, Size};
+use taffy::prelude::{GridPlacement, Line};
+use taffy::style::{
+    AlignContent, AlignItems, BoxSizing, Display, FlexDirection, FlexWrap, LengthPercentage,
+    MaxTrackSizingFunction, MinTrackSizingFunction, Overflow, Position,
+};
+
+use crate::prop_value::{StylePropValue, hash_value};
+
+// Taffy enums — use discriminant-based hashing (no Hash derive available).
+// For simple enums with no data fields, discriminant alone is a perfect hash.
+// For enums with data, we combine discriminant with field hashes.
+
+impl StylePropValue for Overflow {
+    fn content_hash(&self) -> u64 {
+        hash_value(&std::mem::discriminant(self))
+    }
+}
+impl StylePropValue for Display {
+    fn content_hash(&self) -> u64 {
+        hash_value(&std::mem::discriminant(self))
+    }
+}
+impl StylePropValue for Position {
+    fn content_hash(&self) -> u64 {
+        hash_value(&std::mem::discriminant(self))
+    }
+}
+impl StylePropValue for FlexDirection {
+    fn content_hash(&self) -> u64 {
+        hash_value(&std::mem::discriminant(self))
+    }
+}
+impl StylePropValue for FlexWrap {
+    fn content_hash(&self) -> u64 {
+        hash_value(&std::mem::discriminant(self))
+    }
+}
+impl StylePropValue for AlignItems {
+    fn content_hash(&self) -> u64 {
+        hash_value(&std::mem::discriminant(self))
+    }
+}
+impl StylePropValue for BoxSizing {
+    fn content_hash(&self) -> u64 {
+        hash_value(&std::mem::discriminant(self))
+    }
+}
+impl StylePropValue for AlignContent {
+    fn content_hash(&self) -> u64 {
+        hash_value(&std::mem::discriminant(self))
+    }
+}
+impl StylePropValue for GridTemplateComponent<String> {}
+impl StylePropValue for MinTrackSizingFunction {}
+impl StylePropValue for MaxTrackSizingFunction {}
+impl<T: StylePropValue, M: StylePropValue> StylePropValue for MinMax<T, M> {
+    fn content_hash(&self) -> u64 {
+        hash_value(&(self.min.content_hash(), self.max.content_hash()))
+    }
+}
+impl<T: StylePropValue> StylePropValue for Line<T> {
+    fn content_hash(&self) -> u64 {
+        hash_value(&(self.start.content_hash(), self.end.content_hash()))
+    }
+}
+impl StylePropValue for taffy::GridAutoFlow {
+    fn content_hash(&self) -> u64 {
+        hash_value(&std::mem::discriminant(self))
+    }
+}
+impl StylePropValue for GridPlacement {}
+impl StylePropValue for Size<LengthPercentage> {}
diff --git a/style/src/value_impls/text.rs b/style/src/value_impls/text.rs
new file mode 100644
index 000000000..d13bca3fd
--- /dev/null
+++ b/style/src/value_impls/text.rs
@@ -0,0 +1,53 @@
+//! `StylePropValue` impls for text-related types (font weight, line height,
+//! font style, alignment). Font types originate in `fontique` and are
+//! re-exported by `parley`; `LineHeightValue` is defined in this crate
+//! (see [`crate::unit::LineHeightValue`]).
+
+use parley::{Alignment, FontStyle, FontWeight};
+
+use crate::prop_value::{StylePropValue, hash_f32, hash_value};
+use crate::unit::LineHeightValue;
+
+impl StylePropValue for FontWeight {
+    fn content_hash(&self) -> u64 {
+        hash_f32(self.value())
+    }
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        self.value()
+            .interpolate(&other.value(), value)
+            .map(FontWeight::new)
+    }
+}
+impl StylePropValue for FontStyle {
+    fn content_hash(&self) -> u64 {
+        hash_value(&std::mem::discriminant(self))
+    }
+}
+impl StylePropValue for Alignment {
+    fn content_hash(&self) -> u64 {
+        hash_value(&std::mem::discriminant(self))
+    }
+}
+impl StylePropValue for LineHeightValue {
+    fn content_hash(&self) -> u64 {
+        use std::hash::{Hash, Hasher};
+        let mut h = rustc_hash::FxHasher::default();
+        std::mem::discriminant(self).hash(&mut h);
+        match self {
+            LineHeightValue::Normal(v) => v.to_bits().hash(&mut h),
+            LineHeightValue::Pt(v) => v.to_bits().hash(&mut h),
+        }
+        h.finish()
+    }
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        match (self, other) {
+            (LineHeightValue::Normal(v1), LineHeightValue::Normal(v2)) => {
+                v1.interpolate(v2, value).map(LineHeightValue::Normal)
+            }
+            (LineHeightValue::Pt(v1), LineHeightValue::Pt(v2)) => {
+                v1.interpolate(v2, value).map(LineHeightValue::Pt)
+            }
+            _ => None,
+        }
+    }
+}
diff --git a/style/src/value_impls/unit.rs b/style/src/value_impls/unit.rs
new file mode 100644
index 000000000..271a9b09a
--- /dev/null
+++ b/style/src/value_impls/unit.rs
@@ -0,0 +1,152 @@
+//! `StylePropValue` impls for floem_style's own unit types.
+
+#![allow(deprecated)]
+
+use crate::prop_value::{StylePropValue, hash_f64};
+use crate::unit::{
+    AnchorAbout, Angle, Length, LengthAuto, Pct, Pt, Px, PxPct, PxPctAuto,
+};
+
+impl StylePropValue for Pt {
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        self.0.interpolate(&other.0, value).map(Pt)
+    }
+    fn content_hash(&self) -> u64 {
+        hash_f64(self.0)
+    }
+}
+
+impl StylePropValue for Px {
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        self.0.interpolate(&other.0, value).map(Px)
+    }
+    fn content_hash(&self) -> u64 {
+        hash_f64(self.0)
+    }
+}
+
+impl StylePropValue for Pct {
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        self.0.interpolate(&other.0, value).map(Pct)
+    }
+    fn content_hash(&self) -> u64 {
+        hash_f64(self.0)
+    }
+}
+
+impl StylePropValue for LengthAuto {
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        match (self, other) {
+            (Self::Pt(v1), Self::Pt(v2)) => Some(Self::Pt(v1 + (v2 - v1) * value)),
+            (Self::Pct(v1), Self::Pct(v2)) => Some(Self::Pct(v1 + (v2 - v1) * value)),
+            (Self::Em(v1), Self::Em(v2)) => Some(Self::Em(v1 + (v2 - v1) * value)),
+            (Self::Lh(v1), Self::Lh(v2)) => Some(Self::Lh(v1 + (v2 - v1) * value)),
+            (Self::Auto, Self::Auto) => Some(Self::Auto),
+            // TODO: Figure out some way to get in the relevant layout information in order to interpolate between pixels and percent
+            _ => None,
+        }
+    }
+    fn content_hash(&self) -> u64 {
+        use std::hash::{Hash, Hasher};
+        let mut h = rustc_hash::FxHasher::default();
+        std::mem::discriminant(self).hash(&mut h);
+        match self {
+            Self::Pt(v) | Self::Pct(v) | Self::Em(v) | Self::Lh(v) => v.to_bits().hash(&mut h),
+            Self::Auto => {}
+        }
+        h.finish()
+    }
+}
+
+impl StylePropValue for PxPctAuto {
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        match (self, other) {
+            (Self::Px(v1), Self::Px(v2)) => Some(Self::Px(v1 + (v2 - v1) * value)),
+            (Self::Pct(v1), Self::Pct(v2)) => Some(Self::Pct(v1 + (v2 - v1) * value)),
+            (Self::Auto, Self::Auto) => Some(Self::Auto),
+            _ => None,
+        }
+    }
+    fn content_hash(&self) -> u64 {
+        use std::hash::{Hash, Hasher};
+        let mut h = rustc_hash::FxHasher::default();
+        std::mem::discriminant(self).hash(&mut h);
+        match self {
+            Self::Px(v) | Self::Pct(v) => v.to_bits().hash(&mut h),
+            Self::Auto => {}
+        }
+        h.finish()
+    }
+}
+
+impl StylePropValue for Length {
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        match (self, other) {
+            (Self::Pt(v1), Self::Pt(v2)) => Some(Self::Pt(v1 + (v2 - v1) * value)),
+            (Self::Pct(v1), Self::Pct(v2)) => Some(Self::Pct(v1 + (v2 - v1) * value)),
+            (Self::Em(v1), Self::Em(v2)) => Some(Self::Em(v1 + (v2 - v1) * value)),
+            (Self::Lh(v1), Self::Lh(v2)) => Some(Self::Lh(v1 + (v2 - v1) * value)),
+            // TODO: Figure out some way to get in the relevant layout information in order to interpolate between pixels and percent
+            _ => None,
+        }
+    }
+    fn content_hash(&self) -> u64 {
+        use std::hash::{Hash, Hasher};
+        let mut h = rustc_hash::FxHasher::default();
+        std::mem::discriminant(self).hash(&mut h);
+        match self {
+            Self::Pt(v) | Self::Pct(v) | Self::Em(v) | Self::Lh(v) => v.to_bits().hash(&mut h),
+        }
+        h.finish()
+    }
+}
+
+impl StylePropValue for PxPct {
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        match (self, other) {
+            (Self::Px(v1), Self::Px(v2)) => Some(Self::Px(v1 + (v2 - v1) * value)),
+            (Self::Pct(v1), Self::Pct(v2)) => Some(Self::Pct(v1 + (v2 - v1) * value)),
+            _ => None,
+        }
+    }
+    fn content_hash(&self) -> u64 {
+        use std::hash::{Hash, Hasher};
+        let mut h = rustc_hash::FxHasher::default();
+        std::mem::discriminant(self).hash(&mut h);
+        match self {
+            Self::Px(v) | Self::Pct(v) => v.to_bits().hash(&mut h),
+        }
+        h.finish()
+    }
+}
+
+impl StylePropValue for Angle {
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        Some(self.lerp(other, value))
+    }
+    fn content_hash(&self) -> u64 {
+        use std::hash::{Hash, Hasher};
+        let mut h = rustc_hash::FxHasher::default();
+        std::mem::discriminant(self).hash(&mut h);
+        match self {
+            Angle::Deg(v) | Angle::Rad(v) => v.to_bits().hash(&mut h),
+        }
+        h.finish()
+    }
+}
+
+impl StylePropValue for AnchorAbout {
+    fn interpolate(&self, other: &Self, value: f64) -> Option<Self> {
+        Some(Self {
+            x: self.x + (other.x - self.x) * value,
+            y: self.y + (other.y - self.y) * value,
+        })
+    }
+    fn content_hash(&self) -> u64 {
+        use std::hash::{Hash, Hasher};
+        let mut h = rustc_hash::FxHasher::default();
+        self.x.to_bits().hash(&mut h);
+        self.y.to_bits().hash(&mut h);
+        h.finish()
+    }
+}
diff --git a/style/src/values.rs b/style/src/values.rs
new file mode 100644
index 000000000..96afe4f4e
--- /dev/null
+++ b/style/src/values.rs
@@ -0,0 +1,286 @@
+//! Value types for style properties.
+//!
+//! These types are the pure data counterparts of values used in the Floem
+//! style system. Their inspector `PropDebugView` impls remain in `floem`
+//! because they reference `crate::view::View`.
+
+use parley::style::{OverflowWrap, WordBreakStrength};
+use peniko::kurbo::Stroke;
+
+use crate::debug_view::PropDebugView;
+use crate::prop_value::{StylePropValue, hash_value};
+use crate::unit::Length;
+
+/// How the content of a replaced element, such as an img, should be resized to fit its container.
+/// Corresponds to the CSS `object-fit` property.
+/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit>.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Default)]
+pub enum ObjectFit {
+    /// The replaced content is sized to fill the element's content box.
+    /// The entire object will completely fill the box.
+    /// If the object's aspect ratio does not match the aspect ratio of its box,
+    /// then the object will be stretched to fit.
+    #[default]
+    Fill,
+    /// The replaced content is scaled to maintain its aspect ratio while fitting
+    /// within the element's content box. The entire object is made to fill the box,
+    /// while preserving its aspect ratio, so the object will be "letterboxed"
+    /// if its aspect ratio does not match the aspect ratio of the box.
+    Contain,
+    /// The content is sized to maintain its aspect ratio while filling the element's
+    /// entire content box. If the object's aspect ratio does not match the aspect
+    /// ratio of its box, then the object will be clipped to fit.
+    Cover,
+    /// The content is sized as if none or contain were specified, whichever would
+    /// result in a smaller concrete object size.
+    ScaleDown,
+    /// The replaced content is not resized.
+    None,
+}
+
+/// Where the content of a replaced element should be positioned inside its container.
+/// Corresponds to common CSS `object-position` keyword combinations.
+#[derive(Debug, Clone, Copy, PartialEq, Default)]
+pub enum ObjectPosition {
+    /// Align content to the top-left corner.
+    TopLeft,
+    /// Align content to the top edge and center horizontally.
+    Top,
+    /// Align content to the top-right corner.
+    TopRight,
+    /// Align content to the left edge and center vertically.
+    Left,
+    /// Center content both horizontally and vertically.
+    #[default]
+    Center,
+    /// Align content to the right edge and center vertically.
+    Right,
+    /// Align content to the bottom-left corner.
+    BottomLeft,
+    /// Align content to the bottom edge and center horizontally.
+    Bottom,
+    /// Align content to the bottom-right corner.
+    BottomRight,
+    /// Position content using explicit horizontal and vertical offsets.
+    ///
+    /// Percentage values are resolved against the remaining free space on each axis,
+    /// matching CSS object-position behavior.
+    Custom(Length, Length),
+}
+
+impl StylePropValue for ObjectFit {
+    fn content_hash(&self) -> u64 {
+        hash_value(self)
+    }
+}
+
+impl StylePropValue for ObjectPosition {
+    fn content_hash(&self) -> u64 {
+        hash_value(&std::mem::discriminant(self))
+    }
+}
+
+/// Convenience wrapper so border/outline setters can accept numeric widths.
+#[derive(Clone, Debug, Default)]
+pub struct StrokeWrap(pub Stroke);
+
+impl StrokeWrap {
+    pub fn new(width: f64) -> Self {
+        Self(Stroke::new(width))
+    }
+}
+
+impl From<Stroke> for StrokeWrap {
+    fn from(value: Stroke) -> Self {
+        Self(value)
+    }
+}
+impl From<f32> for StrokeWrap {
+    fn from(value: f32) -> Self {
+        Self(Stroke::new(value.into()))
+    }
+}
+impl From<f64> for StrokeWrap {
+    fn from(value: f64) -> Self {
+        Self(Stroke::new(value))
+    }
+}
+impl From<i32> for StrokeWrap {
+    fn from(value: i32) -> Self {
+        Self(Stroke::new(value.into()))
+    }
+}
+
+/// Pointer event handling mode
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum PointerEvents {
+    Auto,
+    None,
+}
+
+/// Text overflow behavior
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum TextOverflow {
+    NoWrap(NoWrapOverflow),
+    Wrap {
+        overflow_wrap: OverflowWrap,
+        word_break: WordBreakStrength,
+    },
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum NoWrapOverflow {
+    Clip,
+    Ellipsis,
+}
+
+/// Cursor style
+#[derive(Debug, Clone, Copy, PartialEq, Default)]
+pub enum CursorStyle {
+    #[default]
+    Default,
+    Pointer,
+    Progress,
+    Wait,
+    Crosshair,
+    Text,
+    Move,
+    Grab,
+    Grabbing,
+    ColResize,
+    RowResize,
+    WResize,
+    EResize,
+    SResize,
+    NResize,
+    NwResize,
+    NeResize,
+    SwResize,
+    SeResize,
+    NeswResize,
+    NwseResize,
+}
+
+impl StylePropValue for CursorStyle {
+    fn content_hash(&self) -> u64 {
+        use std::hash::{Hash, Hasher};
+        let mut h = rustc_hash::FxHasher::default();
+        std::mem::discriminant(self).hash(&mut h);
+        h.finish()
+    }
+}
+impl PropDebugView for CursorStyle {}
+
+impl StylePropValue for TextOverflow {
+    fn content_hash(&self) -> u64 {
+        use std::hash::{Hash, Hasher};
+        let mut h = rustc_hash::FxHasher::default();
+        std::mem::discriminant(self).hash(&mut h);
+        h.finish()
+    }
+}
+impl PropDebugView for TextOverflow {}
+
+impl StylePropValue for PointerEvents {
+    fn content_hash(&self) -> u64 {
+        use std::hash::{Hash, Hasher};
+        let mut h = rustc_hash::FxHasher::default();
+        std::mem::discriminant(self).hash(&mut h);
+        h.finish()
+    }
+}
+impl PropDebugView for PointerEvents {}
+
+/// Controls whether and how a view can receive focus.
+///
+/// Focus determines which element receives keyboard input and is used for accessibility
+/// and keyboard navigation. This enum provides three levels of focus behavior, where
+/// each level includes the capabilities of the previous level. In particular,
+/// [`Focus::Keyboard`] always implies full focusability for pointer and
+/// programmatic focus too.
+///
+/// # Focus Sources
+///
+/// - **Programmatic**: Focus set via code (e.g., `view.request_focus()`)
+/// - **Pointer**: Focus set by clicking or tapping the view
+/// - **Keyboard**: Focus set by sequential navigation (Tab key, arrow keys, etc.)
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Default)]
+pub enum Focus {
+    /// The view cannot receive focus through any means.
+    ///
+    /// Use this for decorative elements, labels, or containers that should never
+    /// be interactive. Clicking the view will not focus it, and programmatic
+    /// focus requests will be ignored.
+    #[default]
+    None,
+
+    /// The view can receive focus programmatically or via pointer, but is not
+    /// included in keyboard navigation order.
+    ///
+    /// Use this for:
+    /// - Custom containers that need focus for scroll or keyboard handling
+    /// - Elements that should be clickable but not tab-able
+    /// - Roving tabindex scenarios where only one item is keyboard navigable
+    /// - Dialog/modal containers that need programmatic focus
+    ///
+    /// The view will not be reachable via Tab or arrow key navigation, but can
+    /// be focused by clicking or calling `request_focus()`.
+    PointerAndProgrammatic,
+
+    /// The view can receive focus through all means: programmatically, via pointer,
+    /// and via keyboard navigation.
+    ///
+    /// Use this for interactive controls like buttons, inputs, links, and custom
+    /// widgets that should be fully accessible via keyboard. The view will be
+    /// included in the sequential focus navigation order (Tab/Shift+Tab) and
+    /// spatial navigation (arrow keys).
+    ///
+    /// This is the recommended setting for all interactive UI elements.
+    Keyboard,
+}
+
+impl Focus {
+    /// Returns `true` if the view can receive focus in any way.
+    ///
+    /// This includes programmatic focus, pointer focus, and keyboard navigation.
+    #[inline]
+    pub fn is_focusable(self) -> bool {
+        !matches!(self, Focus::None)
+    }
+
+    /// Returns `true` if the view can receive focus via pointer (click/tap).
+    #[inline]
+    pub fn allows_pointer_focus(self) -> bool {
+        matches!(self, Focus::PointerAndProgrammatic | Focus::Keyboard)
+    }
+
+    /// Returns `true` if the view can receive focus programmatically (via code).
+    #[inline]
+    pub fn allows_programmatic_focus(self) -> bool {
+        matches!(self, Focus::PointerAndProgrammatic | Focus::Keyboard)
+    }
+
+    /// Returns `true` if the view is included in keyboard navigation order.
+    ///
+    /// This means the view can be reached via Tab, Shift+Tab, or arrow key navigation.
+    #[inline]
+    pub fn allows_keyboard_navigation(self) -> bool {
+        matches!(self, Focus::Keyboard)
+    }
+
+    /// Returns `true` if the view should be excluded from all focus mechanisms.
+    #[inline]
+    pub fn is_none(self) -> bool {
+        matches!(self, Focus::None)
+    }
+}
+
+impl StylePropValue for Focus {
+    fn content_hash(&self) -> u64 {
+        use std::hash::{Hash, Hasher};
+        let mut h = rustc_hash::FxHasher::default();
+        self.hash(&mut h);
+        h.finish()
+    }
+}
+impl PropDebugView for Focus {}
diff --git a/style/src/visibility.rs b/style/src/visibility.rs
new file mode 100644
index 000000000..b7b8607ba
--- /dev/null
+++ b/style/src/visibility.rs
@@ -0,0 +1,94 @@
+//! Per-node visibility state used to drive enter/exit transitions.
+//!
+//! [`Visibility`] tracks a node's current [`VisibilityPhase`]. The engine
+//! advances the phase via [`VisibilityPhase::transition`], invoking
+//! host-provided callbacks to start/stop/reset animations at each edge.
+
+use crate::builtin_props::Display;
+
+/// The current phase of visibility for enter/exit animations.
+///
+/// This enum tracks the display state during CSS-driven visibility transitions
+/// (e.g., animating from visible to display:none).
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub enum VisibilityPhase {
+    /// Initial state — display not yet computed.
+    #[default]
+    Initial,
+    /// Visible with the given display mode.
+    Visible(Display),
+    /// Exit animation in progress.
+    Animating(Display),
+    /// Hidden (display: none).
+    Hidden,
+}
+
+impl VisibilityPhase {
+    /// Returns the [`Display`] override this phase imposes, if any.
+    pub fn get_display_override(&self) -> Option<Display> {
+        match self {
+            VisibilityPhase::Animating(dis) => Some(*dis),
+            _ => None,
+        }
+    }
+
+    /// Advance the phase toward `computed_display`, invoking host callbacks
+    /// to start/stop/reset enter and exit animations at the edges.
+    pub fn transition(
+        &mut self,
+        computed_display: Display,
+        remove_animations: impl FnOnce() -> bool,
+        add_animations: impl FnOnce(),
+        stop_reset_animations: impl FnOnce(),
+        num_waiting_anim: impl FnOnce() -> u16,
+    ) {
+        let computed_has_hide = computed_display == Display::None;
+        *self = match self {
+            // Initial states — skip animations on initial app/view load.
+            Self::Initial if computed_has_hide => Self::Hidden,
+            Self::Initial if !computed_has_hide => Self::Visible(computed_display),
+            // No transition needed.
+            Self::Visible(dis) if !computed_has_hide => Self::Visible(*dis),
+            // Transition to hidden.
+            Self::Visible(dis) if computed_has_hide => {
+                let active_animations = remove_animations();
+                if active_animations {
+                    Self::Animating(*dis)
+                } else {
+                    Self::Hidden
+                }
+            }
+            Self::Animating(_) if !computed_has_hide => {
+                stop_reset_animations();
+                Self::Visible(computed_display)
+            }
+            Self::Animating(dis) if computed_has_hide => {
+                if num_waiting_anim() == 0 {
+                    Self::Hidden
+                } else {
+                    Self::Animating(*dis)
+                }
+            }
+            Self::Hidden if computed_has_hide => Self::Hidden,
+            Self::Hidden if !computed_has_hide => {
+                add_animations();
+                Self::Visible(computed_display)
+            }
+            _ => unreachable!(),
+        };
+    }
+}
+
+/// Controls view visibility state.
+#[derive(Debug, Clone, Copy, Default)]
+pub struct Visibility {
+    /// The current visibility phase (for enter/exit animations).
+    pub phase: VisibilityPhase,
+}
+
+impl Visibility {
+    /// Returns true if the view should be treated as hidden.
+    pub fn is_hidden(&self) -> bool {
+        self.phase == VisibilityPhase::Hidden
+    }
+}
diff --git a/style/tests/host_integration.rs b/style/tests/host_integration.rs
new file mode 100644
index 000000000..11422bc59
--- /dev/null
+++ b/style/tests/host_integration.rs
@@ -0,0 +1,423 @@
+//! End-to-end integration test: a non-floem host drives the style
+//! engine through every public surface a real consumer would touch.
+//!
+//! This test is the "proof of reusability" — if it compiles and
+//! passes using only `floem_style::*` (plus generic support crates
+//! like `peniko`, `taffy`), the engine is usable by `floem-native` or
+//! any other downstream host that brings its own view tree.
+//!
+//! Walks the full host-integration flow:
+//! 1. Allocate engine nodes in a [`StyleTree`], wire parent/child edges.
+//! 2. Push direct styles (plain props, classes, selectors).
+//! 3. Assemble a [`CascadeInputs`] per pass and drive
+//!    [`StyleTree::compute_style`].
+//! 4. Read resolved [`Style`] back from the tree and verify the
+//!    cascade did the right thing (direct values, inheritance,
+//!    class-context propagation, selector gates).
+//! 5. Run the engine prop extractors ([`LayoutProps`],
+//!    [`TransformProps`], [`ViewStyleProps`]) against the computed
+//!    style via both `read_explicit` and the `PropExtractorCx`-based
+//!    `read_style` path; exercise `apply_to_taffy_style` and
+//!    `affine` helpers.
+//! 6. Verify the animation backend hook fires and tree-stored
+//!    animations tick.
+//!
+//! Nothing in this file touches floem. If moved behind a
+//! `floem-native` feature flag tomorrow, it would still pass.
+
+#[cfg(not(target_arch = "wasm32"))]
+use std::time::Instant;
+#[cfg(target_arch = "wasm32")]
+use web_time::Instant;
+
+use std::cell::Cell;
+
+use floem_style::builtin_props::{Background, FontSize};
+use floem_style::responsive::ScreenSizeBp;
+use floem_style::unit::{Angle, Pt};
+use floem_style::{
+    AnimationBackend, CascadeInputs, InteractionState, LayoutProps, NoAnimationBackend,
+    PerNodeInteraction, PropExtractorCx, Style, StyleNodeId, StyleTree, TransformProps,
+    ViewStyleProps, recalc::StyleReason,
+};
+use peniko::color::palette::css;
+use peniko::kurbo;
+
+// ─────────────────────────────────────────────────────────────────────────
+// MockHost — bookkeeping a non-floem consumer would keep. The engine
+// reads from it through a `CascadeInputs::interactions` closure; extractor
+// tests also use it as a `PropExtractorCx`.
+// ─────────────────────────────────────────────────────────────────────────
+
+#[derive(Default)]
+struct MockHost {
+    frame_start: Option<Instant>,
+    default_inherited: Style,
+    default_classes: Style,
+
+    // Per-node state the cascade reads.
+    hovered: std::collections::HashSet<StyleNodeId>,
+
+    // State PropExtractorCx reads through.
+    current_direct: Style,
+}
+
+impl MockHost {
+    fn new() -> Self {
+        Self {
+            frame_start: Some(Instant::now()),
+            ..Self::default()
+        }
+    }
+}
+
+impl PropExtractorCx for MockHost {
+    fn now(&self) -> Instant {
+        self.frame_start.unwrap()
+    }
+    fn direct_style(&self) -> &Style {
+        &self.current_direct
+    }
+}
+
+/// Build a `CascadeInputs` for the current host state. Captures `host`
+/// immutably for the interactions closure and pairs with a
+/// `NoAnimationBackend`; scoping everything inside one call avoids
+/// tangling the closure's lifetime with the tree.
+fn with_inputs<R>(
+    host: &MockHost,
+    f: impl FnOnce(CascadeInputs<'_>) -> R,
+) -> R {
+    let anim = NoAnimationBackend;
+    let interactions = |node: StyleNodeId| PerNodeInteraction {
+        is_hovered: host.hovered.contains(&node),
+        ..Default::default()
+    };
+    f(CascadeInputs {
+        frame_start: host.frame_start.unwrap_or_else(Instant::now),
+        screen_size_bp: ScreenSizeBp::Md,
+        keyboard_navigation: false,
+        root_size_width: 1024.0,
+        is_dark_mode: false,
+        default_theme_classes: &host.default_classes,
+        default_theme_inherited: &host.default_inherited,
+        interactions: &interactions,
+        animations: &anim,
+    })
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Tests.
+// ─────────────────────────────────────────────────────────────────────────
+
+/// Build a small tree, run the cascade, verify direct-style flows to
+/// computed_style and inherited props propagate to descendants.
+#[test]
+fn tree_cascade_produces_computed_style_and_inheritance() {
+    let mut tree = StyleTree::new();
+    let host = MockHost::new();
+
+    let root = tree.new_node();
+    let child = tree.new_node();
+    tree.set_parent(child, Some(root));
+
+    tree.set_direct_style(
+        root,
+        Style::new()
+            .width(Pt(200.0))
+            .height(Pt(120.0))
+            .padding_left(Pt(8.0))
+            .font_size(14.0)
+            .background(css::RED),
+    );
+    tree.set_direct_style(child, Style::new().width(Pt(50.0)).height(Pt(30.0)));
+
+    with_inputs(&host, |cx| tree.compute_style(root, &cx));
+
+    // Root has its direct values resolved.
+    let root_computed = tree.computed_style(root).unwrap();
+    assert_eq!(root_computed.get(FontSize), 14.0);
+    assert_eq!(root_computed.get(Background), Some(css::RED.into()));
+
+    // Child inherits font-size from root (inherited prop, propagates).
+    let child_computed = tree.computed_style(child).unwrap();
+    assert_eq!(child_computed.get(FontSize), 14.0);
+    // But NOT background (non-inherited).
+    assert_eq!(child_computed.get(Background), None);
+}
+
+/// Run `LayoutProps::read_explicit` against a computed style and verify
+/// `apply_to_taffy_style` produces a taffy style hosts can feed to their
+/// layout solver.
+#[test]
+fn layout_extractor_fills_taffy_style() {
+    let mut tree = StyleTree::new();
+    let host = MockHost::new();
+
+    let n = tree.new_node();
+    tree.set_direct_style(
+        n,
+        Style::new()
+            .width(Pt(200.0))
+            .height(Pt(120.0))
+            .padding_left(Pt(8.0))
+            .font_size(14.0),
+    );
+    with_inputs(&host, |cx| tree.compute_style(n, &cx));
+
+    let computed = tree.computed_style(n).unwrap();
+
+    // Drive the extractor through `read_explicit` (no context needed).
+    let mut layout = LayoutProps::default();
+    let mut transitioning = false;
+    layout.read_explicit(computed, &host.now(), &mut transitioning);
+
+    assert_eq!(layout.font_size(), 14.0);
+
+    // apply_to_taffy_style fills in width/height/padding and friends.
+    // Confirm it pushes a non-default padding onto the taffy style.
+    let default_taffy: taffy::style::Style = taffy::style::Style::default();
+    let mut taffy: taffy::style::Style = taffy::style::Style::default();
+    layout.apply_to_taffy_style(&mut taffy);
+    assert_ne!(
+        taffy.padding.left, default_taffy.padding.left,
+        "apply_to_taffy_style should push a non-default padding"
+    );
+
+    // `border()` helper aggregates per-side values into a Border.
+    let _border = layout.border();
+}
+
+/// Run `TransformProps` through the `PropExtractorCx`-based `read_style`
+/// entry point (the one the convenience methods call) and verify the
+/// extracted values feed `affine()` correctly.
+#[test]
+fn transform_extractor_through_prop_extractor_cx() {
+    let mut tree = StyleTree::new();
+    let mut host = MockHost::new();
+
+    let n = tree.new_node();
+    tree.set_direct_style(
+        n,
+        Style::new()
+            .scale(150.0)
+            .rotate(Angle::Deg(90.0))
+            .border_top_left_radius(Pt(4.0)),
+    );
+    with_inputs(&host, |cx| tree.compute_style(n, &cx));
+
+    let computed = tree.computed_style(n).unwrap().clone();
+
+    // Set up PropExtractorCx state the extractor will read.
+    host.current_direct = computed.clone();
+
+    let mut transform = TransformProps::default();
+    // `read_style` reports whether any prop is still transitioning
+    // through the `transitioning` out-param; the caller (this test)
+    // would normally schedule a re-cascade on the owning node.
+    let mut transitioning = false;
+    transform.read_style(&host as &dyn PropExtractorCx, &computed, &mut transitioning);
+
+    // Rotation extracted — non-zero (we set 90°).
+    assert!(transform.rotation().to_radians().abs() > 0.0);
+
+    // `affine()` composes translate/rotate/scale — should differ from
+    // identity with these inputs.
+    let affine = transform.affine(
+        kurbo::Size::new(100.0, 100.0),
+        &floem_style::unit::FontSizeCx::new(14.0, 18.0),
+    );
+    assert_ne!(affine, kurbo::Affine::IDENTITY);
+
+    // border_radius() helper aggregates per-corner values into a BorderRadius.
+    let br = transform.border_radius();
+    assert!(br.top_left.is_some());
+}
+
+/// Run `ViewStyleProps` against a visual style. Exercises the
+/// `.background()` / `.border_color()` aggregator helpers.
+#[test]
+fn view_style_extractor_reads_visual_props() {
+    let mut tree = StyleTree::new();
+    let host = MockHost::new();
+
+    let n = tree.new_node();
+    tree.set_direct_style(n, Style::new().background(css::BLUE).outline(2.0));
+    with_inputs(&host, |cx| tree.compute_style(n, &cx));
+
+    let computed = tree.computed_style(n).unwrap();
+    let mut vs = ViewStyleProps::default();
+    vs.read_explicit(computed, &host.now(), &mut false);
+
+    assert_eq!(vs.background(), Some(peniko::Brush::Solid(css::BLUE)));
+
+    // Aggregator helpers don't panic on the extracted state.
+    let _radius = vs.border_radius();
+    let _colors = vs.border_color();
+}
+
+/// Class-context propagation through the tree: parent declares a class;
+/// child that applies the class picks up the class's styles without
+/// the host doing anything special.
+#[test]
+fn class_context_propagates_through_tree() {
+    use floem_style::props::StyleClass;
+    use floem_style::style_class;
+
+    style_class!(pub Callout);
+
+    let mut tree = StyleTree::new();
+    let host = MockHost::new();
+
+    let root = tree.new_node();
+    let child = tree.new_node();
+    tree.set_parent(child, Some(root));
+
+    tree.set_direct_style(
+        root,
+        Style::new().class(Callout, |s| s.background(css::BLUE)),
+    );
+    tree.set_classes(child, &[Callout::class_ref()]);
+
+    with_inputs(&host, |cx| tree.compute_style(root, &cx));
+
+    assert_eq!(
+        tree.computed_style(child).unwrap().get(Background),
+        Some(css::BLUE.into()),
+        "descendant applying a class defined on its ancestor should resolve to the class style"
+    );
+}
+
+/// Interaction-driven cascade: flipping `hovered` on the host between
+/// two `compute_style` passes must re-resolve the `:hover` branch.
+#[test]
+fn hover_selector_switches_between_passes() {
+    let mut tree = StyleTree::new();
+    let mut host = MockHost::new();
+
+    let n = tree.new_node();
+    tree.set_direct_style(
+        n,
+        Style::new()
+            .background(css::RED)
+            .hover(|s| s.background(css::GREEN)),
+    );
+
+    with_inputs(&host, |cx| tree.compute_style(n, &cx));
+    assert_eq!(
+        tree.computed_style(n).unwrap().get(Background),
+        Some(css::RED.into())
+    );
+
+    host.hovered.insert(n);
+    tree.mark_dirty(n, StyleReason::style_pass());
+    with_inputs(&host, |cx| tree.compute_style(n, &cx));
+    assert_eq!(
+        tree.computed_style(n).unwrap().get(Background),
+        Some(css::GREEN.into())
+    );
+}
+
+/// `AnimationBackend::apply` is the host's hook for injecting per-view
+/// animations into the cascade. Override it, confirm the tree invokes
+/// it every time it recomputes a node.
+#[test]
+fn animation_backend_hook_is_invoked() {
+    struct AnimBackend {
+        anim_calls: Cell<usize>,
+    }
+    impl AnimationBackend for AnimBackend {
+        fn apply(
+            &self,
+            _node: StyleNodeId,
+            _combined: &mut Style,
+            _interact: &mut InteractionState,
+        ) -> bool {
+            self.anim_calls.set(self.anim_calls.get() + 1);
+            false
+        }
+    }
+
+    let backend = AnimBackend {
+        anim_calls: Cell::new(0),
+    };
+    let host = MockHost::new();
+
+    let mut tree = StyleTree::new();
+    let n = tree.new_node();
+    tree.set_direct_style(n, Style::new().background(css::RED));
+
+    let interactions = |_: StyleNodeId| PerNodeInteraction::default();
+    let inputs = CascadeInputs {
+        frame_start: Instant::now(),
+        screen_size_bp: ScreenSizeBp::Md,
+        keyboard_navigation: false,
+        root_size_width: 1024.0,
+        is_dark_mode: false,
+        default_theme_classes: &host.default_classes,
+        default_theme_inherited: &host.default_inherited,
+        interactions: &interactions,
+        animations: &backend,
+    };
+    tree.compute_style(n, &inputs);
+
+    assert_eq!(
+        backend.anim_calls.get(),
+        1,
+        "compute_style should invoke AnimationBackend::apply once per dirty node"
+    );
+}
+
+/// Animations pushed directly onto a `StyleTree` node are ticked by the
+/// cascade without any host-side registry. The generated events land in
+/// the node's event buffer for the host to drain. This is the path
+/// standalone consumers (floem-native, tests) use — no reactive
+/// wrapper, no per-view `Stack<Animation>`, just the engine.
+#[test]
+fn tree_stored_animations_tick_during_cascade() {
+    use floem_style::animation::{Animation, KeyFrame};
+    use std::time::Duration;
+
+    let mut tree = StyleTree::new();
+    let host = MockHost::new();
+
+    let n = tree.new_node();
+    tree.set_direct_style(n, Style::new());
+
+    // Push a simple two-keyframe animation onto the tree node. The
+    // host never touches it — the cascade handles the whole lifecycle.
+    let anim = Animation::new()
+        .duration(Duration::from_millis(500))
+        .keyframe(0, |f: KeyFrame| {
+            f.ease_linear().style(|s| s.background(css::RED))
+        })
+        .keyframe(100, |f: KeyFrame| {
+            f.ease_linear().style(|s| s.background(css::BLUE))
+        });
+    let slot = tree.push_animation(n, anim);
+    assert_eq!(slot, 0);
+    assert_eq!(tree.animations(n).len(), 1);
+
+    // First compute_style: animation is Idle; the tick transitions it
+    // to PassInProgress and fires a `started` event.
+    with_inputs(&host, |cx| tree.compute_style(n, &cx));
+    let events = tree.take_animation_events(n);
+    assert_eq!(events.len(), 1, "started event should have fired");
+    assert!(events[0].1.started);
+    assert_eq!(events[0].0, slot, "event should reference the pushed slot");
+
+    // Cascade should also schedule the node for another frame while the
+    // animation is active.
+    let scheduled: Vec<_> = tree.take_scheduled().collect();
+    assert!(
+        scheduled.iter().any(|(id, _)| *id == n),
+        "active tree-animation should have scheduled its node"
+    );
+
+    // After the tick the animation is actually advancing: it's no
+    // longer Idle and `can_advance` remains true.
+    let anim = &tree.animations(n)[slot];
+    assert!(!anim.is_idle());
+    assert!(anim.is_in_progress());
+    assert!(anim.can_advance());
+}
diff --git a/style/tests/host_render_loop.rs b/style/tests/host_render_loop.rs
new file mode 100644
index 000000000..c3e4dca38
--- /dev/null
+++ b/style/tests/host_render_loop.rs
@@ -0,0 +1,383 @@
+//! Multi-frame render-loop integration test.
+//!
+//! The existing `host_integration.rs` exercises each public surface in
+//! isolation. This file drives the engine the way a real host would:
+//! a frame loop that builds a fresh [`CascadeInputs`] each pass, runs
+//! [`StyleTree::compute_style`], drains the engine's post-cascade
+//! outputs, advances time, mutates host state, and runs the next
+//! frame. If the engine holds up under multi-frame driving from a
+//! non-floem host — scheduling correctly, reacting to interaction
+//! changes, ticking animations across passes, picking up structural
+//! edits — the extraction is usable by a second consumer.
+//!
+//! Nothing here touches floem. Everything used is reachable via
+//! `floem_style::...` plus generic support crates. If this compiles
+//! and passes, a `floem-native`-style host can drive the engine.
+
+#[cfg(not(target_arch = "wasm32"))]
+use std::time::{Duration, Instant};
+#[cfg(target_arch = "wasm32")]
+use web_time::{Duration, Instant};
+
+use std::collections::HashMap;
+
+use floem_style::animation::{Animation, KeyFrame};
+use floem_style::builtin_props::{Background, FontSize};
+use floem_style::recalc::StyleReason;
+use floem_style::responsive::{ScreenSize, ScreenSizeBp};
+use floem_style::{
+    CascadeInputs, NoAnimationBackend, PerNodeInteraction, Style, StyleNodeId, StyleTree,
+};
+use peniko::color::palette::css;
+
+// ─────────────────────────────────────────────────────────────────────────
+// MiniHost — the second-host reference driver. A real host (floem,
+// floem-native) layers reactive state, taffy layout, paint, input on
+// top; everything that matters for *driving the style engine* is here.
+// ─────────────────────────────────────────────────────────────────────────
+
+slotmap::new_key_type! { struct NodeKey; }
+
+#[derive(Default)]
+struct NodeData {
+    style_node: Option<StyleNodeId>,
+    children: Vec<NodeKey>,
+    // Host-owned interaction facts the cascade reads through
+    // CascadeInputs::interactions.
+    hovered: bool,
+    focused: bool,
+    pressed: bool,
+}
+
+struct MiniHost {
+    tree: StyleTree,
+    nodes: slotmap::SlotMap<NodeKey, NodeData>,
+    style_node_to_key: HashMap<StyleNodeId, NodeKey>,
+
+    default_inherited: Style,
+    default_classes: Style,
+    screen_size_bp: ScreenSizeBp,
+    is_dark_mode: bool,
+    root_size_width: f64,
+    keyboard_navigation: bool,
+
+    frame_time: Instant,
+    frame_count: u64,
+}
+
+impl MiniHost {
+    fn new() -> Self {
+        Self {
+            tree: StyleTree::new(),
+            nodes: slotmap::SlotMap::with_key(),
+            style_node_to_key: HashMap::new(),
+            default_inherited: Style::new(),
+            default_classes: Style::new(),
+            screen_size_bp: ScreenSizeBp::Md,
+            is_dark_mode: false,
+            root_size_width: 1024.0,
+            keyboard_navigation: false,
+            frame_time: Instant::now(),
+            frame_count: 0,
+        }
+    }
+
+    /// Allocate a host node (and its companion `StyleNodeId`) and wire
+    /// it into the parent's child list + the style tree's edges.
+    fn add_node(&mut self, parent: Option<NodeKey>) -> NodeKey {
+        let key = self.nodes.insert(NodeData::default());
+        let style_node = self.tree.new_node();
+        self.nodes[key].style_node = Some(style_node);
+        self.style_node_to_key.insert(style_node, key);
+
+        if let Some(p) = parent {
+            self.nodes[p].children.push(key);
+            let parent_style_node = self.nodes[p].style_node;
+            self.tree.set_parent(style_node, parent_style_node);
+        }
+        key
+    }
+
+    fn style_node(&self, key: NodeKey) -> StyleNodeId {
+        self.nodes[key]
+            .style_node
+            .expect("host node missing style node")
+    }
+
+    fn set_direct_style(&mut self, key: NodeKey, style: Style) {
+        let id = self.style_node(key);
+        self.tree.set_direct_style(id, style);
+    }
+
+    fn mark_dirty(&mut self, key: NodeKey, reason: StyleReason) {
+        let id = self.style_node(key);
+        self.tree.mark_dirty(id, reason);
+    }
+
+    /// Run one frame: build inputs, cascade from `root`, drain
+    /// post-cascade outputs. Returns the `StyleNodeId`s that the
+    /// engine scheduled for re-cascade (transitions, animations,
+    /// etc.) so tests can assert on scheduling behavior.
+    fn run_frame(&mut self, root: NodeKey) -> Vec<StyleNodeId> {
+        self.frame_count += 1;
+        let root_node = self.style_node(root);
+
+        let reverse = &self.style_node_to_key;
+        let nodes = &self.nodes;
+        let interactions = |node: StyleNodeId| -> PerNodeInteraction {
+            let Some(&k) = reverse.get(&node) else {
+                return PerNodeInteraction::default();
+            };
+            let d = &nodes[k];
+            PerNodeInteraction {
+                is_hovered: d.hovered,
+                is_focused: d.focused,
+                is_active: d.pressed,
+                ..Default::default()
+            }
+        };
+
+        let anim = NoAnimationBackend;
+        let inputs = CascadeInputs {
+            frame_start: self.frame_time,
+            screen_size_bp: self.screen_size_bp,
+            keyboard_navigation: self.keyboard_navigation,
+            root_size_width: self.root_size_width,
+            is_dark_mode: self.is_dark_mode,
+            default_theme_classes: &self.default_classes,
+            default_theme_inherited: &self.default_inherited,
+            interactions: &interactions,
+            animations: &anim,
+        };
+        self.tree.compute_style(root_node, &inputs);
+        drop(inputs);
+
+        // Drain what the engine wants re-run next frame.
+        let scheduled: Vec<_> = self.tree.take_scheduled().map(|(id, _)| id).collect();
+        // Drop dirtied-this-pass (host would use these to invalidate
+        // downstream caches; MiniHost has none).
+        let _: Vec<_> = self.tree.take_dirtied_this_pass().collect();
+        scheduled
+    }
+
+    fn advance_time(&mut self, delta: Duration) {
+        self.frame_time += delta;
+    }
+
+    fn computed_background(&self, key: NodeKey) -> Option<peniko::Brush> {
+        self.tree.computed_style(self.style_node(key))?.get(Background)
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Tests — each drives multiple frames.
+// ─────────────────────────────────────────────────────────────────────────
+
+/// A steady-state loop (no host changes between frames) should settle:
+/// after the initial cascade, the second pass shouldn't schedule any
+/// work the engine isn't required to repeat.
+#[test]
+fn steady_state_loop_settles_after_initial_cascade() {
+    let mut host = MiniHost::new();
+    let root = host.add_node(None);
+    let child = host.add_node(Some(root));
+    host.set_direct_style(root, Style::new().font_size(14.0).background(css::RED));
+    host.set_direct_style(child, Style::new());
+
+    let _ = host.run_frame(root);
+    host.advance_time(Duration::from_millis(16));
+    let scheduled = host.run_frame(root);
+
+    assert!(
+        scheduled.is_empty(),
+        "steady-state frame should not schedule any follow-up work, got {:?}",
+        scheduled
+    );
+    // Inheritance still holds after the second pass.
+    assert_eq!(
+        host.tree
+            .computed_style(host.style_node(child))
+            .unwrap()
+            .get(FontSize),
+        14.0
+    );
+}
+
+/// Host flips `hovered` between frames; the interactions closure sees
+/// fresh state on the second pass and the cascade re-resolves the
+/// `:hover` branch accordingly. Siblings stay unaffected.
+#[test]
+fn hover_change_across_frames_restyles_affected_node_only() {
+    let mut host = MiniHost::new();
+    let root = host.add_node(None);
+    let a = host.add_node(Some(root));
+    let b = host.add_node(Some(root));
+
+    host.set_direct_style(root, Style::new());
+    let hover_style = Style::new()
+        .background(css::RED)
+        .hover(|s| s.background(css::BLUE));
+    host.set_direct_style(a, hover_style.clone());
+    host.set_direct_style(b, hover_style);
+
+    let _ = host.run_frame(root);
+    assert_eq!(host.computed_background(a), Some(css::RED.into()));
+    assert_eq!(host.computed_background(b), Some(css::RED.into()));
+
+    // Host flips hover on `a`, marks it dirty, runs frame 2.
+    host.nodes[a].hovered = true;
+    host.mark_dirty(a, StyleReason::style_pass());
+    host.advance_time(Duration::from_millis(16));
+    host.run_frame(root);
+
+    assert_eq!(host.computed_background(a), Some(css::BLUE.into()));
+    assert_eq!(
+        host.computed_background(b),
+        Some(css::RED.into()),
+        "sibling should not have restyled",
+    );
+}
+
+/// Push a tree-native animation, drive several frames, confirm the
+/// engine fires a `started` event on the first tick and schedules
+/// itself for re-cascade while active. The animation stays
+/// `is_in_progress` across passes.
+#[test]
+fn tree_animation_across_frames_schedules_and_progresses() {
+    let mut host = MiniHost::new();
+    let root = host.add_node(None);
+    host.set_direct_style(root, Style::new());
+
+    let anim = Animation::new()
+        .duration(Duration::from_millis(500))
+        .keyframe(0, |f: KeyFrame| {
+            f.ease_linear().style(|s| s.background(css::RED))
+        })
+        .keyframe(100, |f: KeyFrame| {
+            f.ease_linear().style(|s| s.background(css::BLUE))
+        });
+    let slot = host.tree.push_animation(host.style_node(root), anim);
+
+    // Frame 1: Idle → PassInProgress, `started` event fires, cascade
+    // schedules the node for the next frame.
+    let scheduled = host.run_frame(root);
+    let root_node = host.style_node(root);
+    let events = host.tree.take_animation_events(root_node);
+    assert!(events.iter().any(|(s, ev)| *s == slot && ev.started));
+    assert!(
+        scheduled.contains(&root_node),
+        "active animation must schedule its node for the next frame"
+    );
+    assert!(host.tree.animations(root_node)[slot].is_in_progress());
+
+    // Frames 2-3: animation stays in progress, engine keeps
+    // scheduling while it's active.
+    for _ in 0..2 {
+        host.advance_time(Duration::from_millis(50));
+        host.mark_dirty(root, StyleReason::animation());
+        let scheduled = host.run_frame(root);
+        assert!(
+            scheduled.contains(&root_node),
+            "animation in progress should keep scheduling"
+        );
+        assert!(host.tree.animations(root_node)[slot].is_in_progress());
+    }
+}
+
+/// Add a child mid-loop. After marking the parent dirty and running
+/// the next frame, the new child is cascaded and picks up the
+/// inherited `font-size` from its parent.
+#[test]
+fn adding_child_mid_loop_propagates_inheritance() {
+    let mut host = MiniHost::new();
+    let root = host.add_node(None);
+    host.set_direct_style(root, Style::new().font_size(22.0));
+
+    let _ = host.run_frame(root);
+
+    // Host mutates the tree: new child, wire up edges, run next frame.
+    let child = host.add_node(Some(root));
+    host.set_direct_style(child, Style::new());
+    host.mark_dirty(root, StyleReason::style_pass());
+
+    host.advance_time(Duration::from_millis(16));
+    host.run_frame(root);
+
+    assert_eq!(
+        host.tree
+            .computed_style(host.style_node(child))
+            .unwrap()
+            .get(FontSize),
+        22.0,
+        "late-added child should inherit parent font-size on next cascade"
+    );
+}
+
+/// Flip the window width between frames: a responsive rule attached
+/// to `ScreenSize::LG` matches on `window_width` (via
+/// `GridBreakpoints::default().get_width_bp(width)`), so shrinking
+/// the host-reported width to an Xs range inactivates it, and
+/// restoring it to LG range reactivates it.
+#[test]
+fn responsive_width_flip_resolves_different_branch() {
+    let mut host = MiniHost::new();
+    // Start in Xs range (default grid: xs is < 576px).
+    host.root_size_width = 400.0;
+
+    let root = host.add_node(None);
+    host.set_direct_style(
+        root,
+        Style::new()
+            .background(css::RED)
+            .responsive(ScreenSize::LG, |s| s.background(css::GREEN)),
+    );
+
+    let _ = host.run_frame(root);
+    assert_eq!(host.computed_background(root), Some(css::RED.into()));
+
+    // Widen into LG range (992..1200). Responsive branch activates.
+    host.root_size_width = 1100.0;
+    host.mark_dirty(root, StyleReason::style_pass());
+    host.advance_time(Duration::from_millis(16));
+    host.run_frame(root);
+
+    assert_eq!(
+        host.computed_background(root),
+        Some(css::GREEN.into()),
+        "responsive LG branch should activate once window_width is in the LG range"
+    );
+}
+
+/// Removing a node mid-loop: the engine should drop its node from the
+/// slotmap and no longer report a computed style for it.
+#[test]
+fn removing_node_mid_loop_drops_it_from_the_engine() {
+    let mut host = MiniHost::new();
+    let root = host.add_node(None);
+    let child = host.add_node(Some(root));
+    host.set_direct_style(root, Style::new().font_size(14.0));
+    host.set_direct_style(child, Style::new());
+
+    let _ = host.run_frame(root);
+    assert!(host.tree.computed_style(host.style_node(child)).is_some());
+
+    // Host removes the child: pull it from node tables + drop the
+    // style-tree node.
+    let child_style_node = host.style_node(child);
+    host.nodes[root].children.retain(|&c| c != child);
+    host.nodes.remove(child);
+    host.style_node_to_key.remove(&child_style_node);
+    host.tree.remove_node(child_style_node);
+
+    host.advance_time(Duration::from_millis(16));
+    host.run_frame(root);
+
+    assert!(
+        host.tree.computed_style(child_style_node).is_none(),
+        "removed node should no longer resolve through the tree"
+    );
+    assert!(
+        !host.tree.contains(child_style_node),
+        "engine should report the removed node as gone"
+    );
+}
diff --git a/style/tests/mock_sink.rs b/style/tests/mock_sink.rs
new file mode 100644
index 000000000..53423280f
--- /dev/null
+++ b/style/tests/mock_sink.rs
@@ -0,0 +1,185 @@
+//! End-to-end demonstration that a non-floem host can drive the style engine.
+//!
+//! A bookkeeping struct (no view tree, no window handle, no reactive
+//! runtime) assembles a [`CascadeInputs`] and exercises the cache plus
+//! `resolve_nested_maps`. If this compiles and passes, a second host
+//! like `floem-native` can reuse `floem_style` through the same public
+//! surface floem itself uses.
+
+#[cfg(not(target_arch = "wasm32"))]
+use std::time::Instant;
+#[cfg(target_arch = "wasm32")]
+use web_time::Instant;
+
+use floem_style::builtin_props::Background;
+use floem_style::responsive::ScreenSizeBp;
+use floem_style::selectors::StyleSelector;
+use floem_style::{
+    CacheHit, CursorStyle, InheritedInteractionCx, InteractionState, Style, StyleCache,
+    StyleCacheKey, StyleNodeId, resolve_nested_maps,
+};
+use peniko::color::palette::css;
+
+// ─────────────────────────────────────────────────────────────────────────
+// Minimal mock host.
+// ─────────────────────────────────────────────────────────────────────────
+
+/// Recorded calls, so tests can assert on behavior rather than side effects.
+#[derive(Default, Debug)]
+struct Calls {
+    paints: Vec<StyleNodeId>,
+    cursor_sets: Vec<(StyleNodeId, CursorStyle)>,
+    cursor_clears: Vec<StyleNodeId>,
+    needs_layout: bool,
+    needs_cursor_resolution: bool,
+}
+
+struct MockHost {
+    default_inherited: Style,
+    default_classes: Style,
+    calls: Calls,
+    hovered: std::collections::HashSet<StyleNodeId>,
+    cursors: std::collections::HashMap<StyleNodeId, CursorStyle>,
+}
+
+impl MockHost {
+    fn new() -> Self {
+        Self {
+            default_inherited: Style::new(),
+            default_classes: Style::new(),
+            calls: Calls::default(),
+            hovered: Default::default(),
+            cursors: Default::default(),
+        }
+    }
+
+    fn request_paint(&mut self, id: StyleNodeId) {
+        self.calls.paints.push(id);
+    }
+
+    fn mark_needs_cursor_resolution(&mut self) {
+        self.calls.needs_cursor_resolution = true;
+    }
+
+    fn mark_needs_layout(&mut self) {
+        self.calls.needs_layout = true;
+    }
+
+    fn set_cursor(&mut self, id: StyleNodeId, cursor: CursorStyle) -> Option<CursorStyle> {
+        self.calls.cursor_sets.push((id, cursor));
+        self.cursors.insert(id, cursor)
+    }
+
+    fn clear_cursor(&mut self, id: StyleNodeId) -> Option<CursorStyle> {
+        self.calls.cursor_clears.push(id);
+        self.cursors.remove(&id)
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Tests.
+// ─────────────────────────────────────────────────────────────────────────
+
+#[test]
+fn mock_host_records_inherent_calls() {
+    let mut tree = floem_style::StyleTree::new();
+    let node = tree.new_node();
+    let mut host = MockHost::new();
+
+    host.request_paint(node);
+    host.mark_needs_layout();
+    host.mark_needs_cursor_resolution();
+    host.set_cursor(node, CursorStyle::Pointer);
+
+    assert_eq!(host.calls.paints, vec![node]);
+    assert!(host.calls.needs_layout);
+    assert!(host.calls.needs_cursor_resolution);
+    assert_eq!(host.calls.cursor_sets, vec![(node, CursorStyle::Pointer)]);
+
+    let prev = host.clear_cursor(node);
+    assert_eq!(prev, Some(CursorStyle::Pointer));
+    assert_eq!(host.calls.cursor_clears, vec![node]);
+}
+
+#[test]
+fn resolve_nested_maps_picks_hover_branch_for_hovered_node() {
+    let mut tree = floem_style::StyleTree::new();
+    let node = tree.new_node();
+    let mut host = MockHost::new();
+    host.hovered.insert(node);
+
+    let style = Style::new()
+        .background(css::RED)
+        .hover(|s| s.background(css::BLUE));
+
+    // Build an InteractionState the way a host would when composing
+    // a `CascadeInputs::interactions` closure.
+    let mut state = InteractionState {
+        is_hovered: host.hovered.contains(&node),
+        ..Default::default()
+    };
+
+    let (resolved, selectors) = resolve_nested_maps(
+        style,
+        &mut state,
+        ScreenSizeBp::Md,
+        &[],
+        &host.default_inherited,
+        &host.default_classes,
+    );
+    assert_eq!(resolved.get(Background), Some(css::BLUE.into()));
+    assert!(selectors.has(StyleSelector::Hover));
+}
+
+#[test]
+fn style_cache_round_trips_values() {
+    let parent = Style::new();
+    let style = Style::new().background(css::RED);
+    let state = InteractionState::default();
+    let mut cache = StyleCache::new();
+
+    let key = StyleCacheKey::new(&style, &state, ScreenSizeBp::Md, &[], &Style::new());
+
+    assert!(cache.get(&key, &parent).is_none());
+
+    cache.insert(
+        key.clone(),
+        &style,
+        None,
+        InheritedInteractionCx::default(),
+        &parent,
+    );
+    let hit: CacheHit = cache.get(&key, &parent).unwrap();
+    assert_eq!(hit.combined_style.get(Background), Some(css::RED.into()));
+
+    let stats = cache.stats();
+    assert_eq!(stats.hits, 1);
+    assert_eq!(stats.misses, 1);
+    assert_eq!(stats.insertions, 1);
+}
+
+#[test]
+fn interactions_closure_captures_host_state() {
+    // Simulates the shape a host would construct for
+    // `CascadeInputs::interactions`: a closure that maps
+    // `StyleNodeId → PerNodeInteraction` by consulting the host's own
+    // per-view state. We exercise it standalone, without driving the
+    // full cascade — that's what `style_tree_cascade.rs` covers.
+    use floem_style::PerNodeInteraction;
+
+    let mut style_tree = floem_style::StyleTree::new();
+    let a = style_tree.new_node();
+    let b = style_tree.new_node();
+    let mut host = MockHost::new();
+    host.hovered.insert(a);
+
+    let _unused_instant: Instant = Instant::now();
+
+    let interactions = |node: StyleNodeId| PerNodeInteraction {
+        is_hovered: host.hovered.contains(&node),
+        ..Default::default()
+    };
+
+    assert!(interactions(a).is_hovered);
+    assert!(!interactions(b).is_hovered);
+}
diff --git a/style/tests/standalone_usage.rs b/style/tests/standalone_usage.rs
new file mode 100644
index 000000000..51ca5731e
--- /dev/null
+++ b/style/tests/standalone_usage.rs
@@ -0,0 +1,218 @@
+//! Standalone integration test exercising `floem_style` through its public
+//! API surface — as an external consumer (e.g. `floem-native`) would.
+//!
+//! Everything here is reachable via `floem_style::...` paths only, with no
+//! dependency on the `floem` crate. If this file compiles and passes, the
+//! extracted engine can be driven by a non-floem host.
+
+use floem_style::builtin_props::{Background, Disabled, FontSize, TextColor, Width};
+use floem_style::props::StyleClass;
+use floem_style::responsive::ScreenSizeBp;
+use floem_style::selectors::{StyleSelector, StyleSelectors};
+use floem_style::style_class;
+use floem_style::{
+    resolve_nested_maps, InteractionState, InheritedInteractionCx, Style, StyleCache,
+    StyleCacheKey,
+};
+use peniko::color::palette::css;
+
+fn empty_state() -> InteractionState {
+    InteractionState::default()
+}
+
+fn xs() -> ScreenSizeBp {
+    ScreenSizeBp::Xs
+}
+
+#[test]
+fn resolves_plain_style_untouched() {
+    let style = Style::new().background(css::RED).width(100.0);
+    let mut state = empty_state();
+    let (resolved, selectors) = resolve_nested_maps(
+        style,
+        &mut state,
+        xs(),
+        &[],
+        &Style::new(),
+        &Style::new(),
+    );
+    assert_eq!(resolved.get(Background), Some(css::RED.into()));
+    // Width uses LengthAuto; compare the variant.
+    assert!(matches!(
+        resolved.get(Width),
+        floem_style::unit::LengthAuto::Pt(v) if v == 100.0
+    ));
+    assert_eq!(selectors, StyleSelectors::empty());
+}
+
+#[test]
+fn hover_selector_activates_only_when_hovered() {
+    let style = Style::new()
+        .background(css::RED)
+        .hover(|s| s.background(css::BLUE));
+
+    let mut state = empty_state();
+    let (resolved, _) = resolve_nested_maps(
+        style.clone(),
+        &mut state,
+        xs(),
+        &[],
+        &Style::new(),
+        &Style::new(),
+    );
+    assert_eq!(resolved.get(Background), Some(css::RED.into()));
+
+    let mut state = InteractionState {
+        is_hovered: true,
+        ..Default::default()
+    };
+    let (resolved, selectors) = resolve_nested_maps(
+        style,
+        &mut state,
+        xs(),
+        &[],
+        &Style::new(),
+        &Style::new(),
+    );
+    assert_eq!(resolved.get(Background), Some(css::BLUE.into()));
+    assert!(selectors.has(StyleSelector::Hover));
+}
+
+#[test]
+fn inherited_props_flow_through_context() {
+    let inherited = Style::new()
+        .set(TextColor, Some(css::RED))
+        .set(FontSize, 18.0);
+    let style = Style::new().background(css::BLUE);
+    let mut state = empty_state();
+    let (resolved, _) = resolve_nested_maps(
+        style,
+        &mut state,
+        xs(),
+        &[],
+        &inherited,
+        &Style::new(),
+    );
+    assert_eq!(resolved.get(TextColor), Some(css::RED));
+    assert_eq!(resolved.get(FontSize), 18.0);
+    assert_eq!(resolved.get(Background), Some(css::BLUE.into()));
+}
+
+#[test]
+fn classes_apply_from_class_context() {
+    style_class!(pub Button);
+
+    let class_ctx = Style::new().class(Button, |s| {
+        s.background(css::GREEN)
+            .hover(|s| s.background(css::BLUE))
+    });
+
+    let base = Style::new();
+    let mut state = InteractionState {
+        is_hovered: true,
+        ..Default::default()
+    };
+    let (resolved, selectors) = resolve_nested_maps(
+        base,
+        &mut state,
+        xs(),
+        &[Button::class_ref()],
+        &Style::new(),
+        &class_ctx,
+    );
+    assert_eq!(resolved.get(Background), Some(css::BLUE.into()));
+    assert!(selectors.has(StyleSelector::Hover));
+}
+
+#[test]
+fn disabled_short_circuits_other_selectors() {
+    let style = Style::new()
+        .background(css::RED)
+        .hover(|s| s.background(css::BLUE))
+        .disabled(|s| s.background(css::GRAY));
+
+    // Hovered AND disabled → cascade enters the disabled branch, skipping hover.
+    let mut state = InteractionState {
+        is_hovered: true,
+        is_disabled: true,
+        ..Default::default()
+    };
+    let (resolved, _) = resolve_nested_maps(
+        style,
+        &mut state,
+        xs(),
+        &[],
+        &Style::new(),
+        &Style::new(),
+    );
+    assert_eq!(resolved.get(Background), Some(css::GRAY.into()));
+}
+
+#[test]
+fn disabled_as_prop_also_triggers_disabled_selector() {
+    // Even without interact_state.is_disabled, setting Disabled=true in the
+    // style itself opens the :disabled branch.
+    let style = Style::new()
+        .set(Disabled, true)
+        .background(css::RED)
+        .disabled(|s| s.background(css::GRAY));
+    let mut state = empty_state();
+    let (resolved, _) = resolve_nested_maps(
+        style,
+        &mut state,
+        xs(),
+        &[],
+        &Style::new(),
+        &Style::new(),
+    );
+    assert_eq!(resolved.get(Background), Some(css::GRAY.into()));
+}
+
+#[test]
+fn style_cache_hits_on_matching_inputs() {
+    let mut cache = StyleCache::new();
+    let style = Style::new().background(css::RED);
+    let parent = Style::new();
+
+    let key = StyleCacheKey::new(&style, &empty_state(), xs(), &[], &Style::new());
+
+    // Miss first.
+    assert!(cache.get(&key, &parent).is_none());
+    assert_eq!(cache.stats().misses, 1);
+
+    // Insert, then hit.
+    let post = InheritedInteractionCx::default();
+    cache.insert(key.clone(), &style, None, post, &parent);
+    assert!(cache.get(&key, &parent).is_some());
+    assert_eq!(cache.stats().hits, 1);
+}
+
+#[test]
+fn style_content_hash_is_deterministic_and_order_independent() {
+    let a = Style::new().background(css::RED).set(FontSize, 16.0);
+    let b = Style::new().set(FontSize, 16.0).background(css::RED);
+    // Insertion order doesn't matter.
+    assert_eq!(a.content_hash(), b.content_hash());
+
+    // And the hash is stable across calls.
+    let h1 = a.content_hash();
+    let h2 = a.content_hash();
+    assert_eq!(h1, h2);
+}
+
+#[test]
+fn inherited_equal_distinguishes_inherited_values() {
+    let a = Style::new().set(TextColor, Some(css::RED));
+    let b = Style::new().set(TextColor, Some(css::BLUE));
+    let c = Style::new().set(TextColor, Some(css::RED));
+    assert!(!a.inherited_equal(&b));
+    assert!(a.inherited_equal(&c));
+}
+
+#[test]
+fn inherited_equal_ignores_non_inherited_props() {
+    // `Background` is NOT inherited, so it should not affect inherited_equal.
+    let a = Style::new().background(css::RED);
+    let b = Style::new().background(css::BLUE);
+    assert!(a.inherited_equal(&b));
+}
diff --git a/style/tests/style_tree_cascade.rs b/style/tests/style_tree_cascade.rs
new file mode 100644
index 000000000..b879ad591
--- /dev/null
+++ b/style/tests/style_tree_cascade.rs
@@ -0,0 +1,295 @@
+//! Cascade tests for [`StyleTree`].
+//!
+//! Exercises `StyleTree::compute_style` end-to-end with a mock host: the
+//! cascade resolves classes + selectors + inheritance and walks parent →
+//! child through the tree's own edges. If these pass, a non-floem host
+//! can drive the style engine by assembling a `CascadeInputs` and running
+//! `compute_style`.
+
+#[cfg(not(target_arch = "wasm32"))]
+use std::time::Instant;
+#[cfg(target_arch = "wasm32")]
+use web_time::Instant;
+
+use floem_style::builtin_props::{Background, FontSize, TextColor};
+use floem_style::props::StyleClass;
+use floem_style::responsive::ScreenSizeBp;
+use floem_style::{
+    CascadeInputs, NoAnimationBackend, PerNodeInteraction, Style, StyleNodeId, StyleTree,
+    recalc::StyleReason, style_class,
+};
+use peniko::color::palette::css;
+
+// ─────────────────────────────────────────────────────────────────────────
+// Minimal host state. Cascade tests only need the per-node interaction
+// closure and the theme defaults; everything else is constant.
+// ─────────────────────────────────────────────────────────────────────────
+
+#[derive(Default)]
+struct MockHost {
+    hovered: std::collections::HashSet<StyleNodeId>,
+    default_inherited: Style,
+    default_classes: Style,
+}
+
+impl MockHost {
+    fn new_default() -> Self {
+        Self::default()
+    }
+}
+
+/// Build a fresh `CascadeInputs` for this pass. Using a function keeps
+/// the closures' lifetimes scoped to one call.
+fn cascade<'a>(host: &'a MockHost) -> (Box<dyn Fn(StyleNodeId) -> PerNodeInteraction + 'a>, NoAnimationBackend) {
+    let interactions: Box<dyn Fn(StyleNodeId) -> PerNodeInteraction + 'a> =
+        Box::new(|node: StyleNodeId| PerNodeInteraction {
+            is_hovered: host.hovered.contains(&node),
+            ..Default::default()
+        });
+    (interactions, NoAnimationBackend)
+}
+
+fn inputs<'a>(
+    host: &'a MockHost,
+    interactions: &'a dyn Fn(StyleNodeId) -> PerNodeInteraction,
+    animations: &'a NoAnimationBackend,
+) -> CascadeInputs<'a> {
+    CascadeInputs {
+        frame_start: Instant::now(),
+        screen_size_bp: ScreenSizeBp::Md,
+        keyboard_navigation: false,
+        root_size_width: 1024.0,
+        is_dark_mode: false,
+        default_theme_classes: &host.default_classes,
+        default_theme_inherited: &host.default_inherited,
+        interactions,
+        animations,
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Tests.
+// ─────────────────────────────────────────────────────────────────────────
+
+#[test]
+fn single_node_direct_style_flows_to_computed() {
+    let mut tree = StyleTree::new();
+    let host = MockHost::new_default();
+    let (interactions, anim) = cascade(&host);
+    let cx = inputs(&host, &*interactions, &anim);
+
+    let n = tree.new_node();
+    tree.set_direct_style(n, Style::new().background(css::RED));
+    tree.compute_style(n, &cx);
+
+    let computed = tree.computed_style(n).unwrap();
+    assert_eq!(computed.get(Background), Some(css::RED.into()));
+}
+
+#[test]
+fn hover_selector_respects_host_state() {
+    let mut tree = StyleTree::new();
+    let mut host = MockHost::new_default();
+
+    let n = tree.new_node();
+    tree.set_direct_style(
+        n,
+        Style::new()
+            .background(css::RED)
+            .hover(|s| s.background(css::BLUE)),
+    );
+
+    // Not hovered → base.
+    {
+        let (interactions, anim) = cascade(&host);
+        let cx = inputs(&host, &*interactions, &anim);
+        tree.compute_style(n, &cx);
+    }
+    assert_eq!(
+        tree.computed_style(n).unwrap().get(Background),
+        Some(css::RED.into())
+    );
+
+    // Hovered → hover branch.
+    host.hovered.insert(n);
+    tree.mark_dirty(n, StyleReason::style_pass());
+    {
+        let (interactions, anim) = cascade(&host);
+        let cx = inputs(&host, &*interactions, &anim);
+        tree.compute_style(n, &cx);
+    }
+    assert_eq!(
+        tree.computed_style(n).unwrap().get(Background),
+        Some(css::BLUE.into())
+    );
+}
+
+#[test]
+fn inherited_font_size_flows_parent_to_child() {
+    let mut tree = StyleTree::new();
+    let host = MockHost::new_default();
+    let (interactions, anim) = cascade(&host);
+    let cx = inputs(&host, &*interactions, &anim);
+
+    let parent = tree.new_node();
+    let child = tree.new_node();
+    tree.set_parent(child, Some(parent));
+
+    // Parent sets font-size; child inherits.
+    tree.set_direct_style(parent, Style::new().set(FontSize, 22.0));
+    tree.compute_style(parent, &cx);
+
+    assert_eq!(tree.computed_style(parent).unwrap().get(FontSize), 22.0);
+    assert_eq!(tree.computed_style(child).unwrap().get(FontSize), 22.0);
+}
+
+#[test]
+fn class_context_from_ancestor_resolves_in_descendant() {
+    style_class!(pub Button);
+
+    let mut tree = StyleTree::new();
+    let host = MockHost::new_default();
+    let (interactions, anim) = cascade(&host);
+    let cx = inputs(&host, &*interactions, &anim);
+
+    let grandparent = tree.new_node();
+    let parent = tree.new_node();
+    let child = tree.new_node();
+    tree.set_parent(parent, Some(grandparent));
+    tree.set_parent(child, Some(parent));
+
+    // Grandparent defines a class via its direct style.
+    tree.set_direct_style(
+        grandparent,
+        Style::new().class(Button, |s| s.background(css::GREEN)),
+    );
+    // Child applies the class.
+    tree.set_classes(child, &[Button::class_ref()]);
+
+    tree.compute_style(grandparent, &cx);
+
+    assert_eq!(
+        tree.computed_style(child).unwrap().get(Background),
+        Some(css::GREEN.into()),
+        "class defined on grandparent should reach child via class_context"
+    );
+}
+
+#[test]
+fn changing_parent_inherited_marks_child_dirty_on_next_pass() {
+    let mut tree = StyleTree::new();
+    let host = MockHost::new_default();
+
+    let parent = tree.new_node();
+    let child = tree.new_node();
+    tree.set_parent(child, Some(parent));
+
+    tree.set_direct_style(parent, Style::new().set(TextColor, Some(css::RED)));
+    {
+        let (interactions, anim) = cascade(&host);
+        let cx = inputs(&host, &*interactions, &anim);
+        tree.compute_style(parent, &cx);
+    }
+    assert_eq!(
+        tree.computed_style(child).unwrap().get(TextColor),
+        Some(css::RED)
+    );
+
+    // Change parent's inherited prop. Child shouldn't still show red.
+    tree.set_direct_style(parent, Style::new().set(TextColor, Some(css::BLUE)));
+    {
+        let (interactions, anim) = cascade(&host);
+        let cx = inputs(&host, &*interactions, &anim);
+        tree.compute_style(parent, &cx);
+    }
+    assert_eq!(
+        tree.computed_style(child).unwrap().get(TextColor),
+        Some(css::BLUE),
+        "child's computed style must refresh when parent's inherited changes"
+    );
+}
+
+#[test]
+fn first_child_structural_selector_uses_tree_sibling_order() {
+    let mut tree = StyleTree::new();
+    let host = MockHost::new_default();
+    let (interactions, anim) = cascade(&host);
+    let cx = inputs(&host, &*interactions, &anim);
+
+    let parent = tree.new_node();
+    let a = tree.new_node();
+    let b = tree.new_node();
+    tree.set_children(parent, &[a, b]);
+
+    // Each child has a style that changes background if it's the first child.
+    let styled = Style::new()
+        .background(css::RED)
+        .first_child(|s| s.background(css::GREEN));
+    tree.set_direct_style(a, styled.clone());
+    tree.set_direct_style(b, styled);
+
+    tree.compute_style(parent, &cx);
+
+    assert_eq!(
+        tree.computed_style(a).unwrap().get(Background),
+        Some(css::GREEN.into()),
+        "first child's :first-child branch should apply"
+    );
+    assert_eq!(
+        tree.computed_style(b).unwrap().get(Background),
+        Some(css::RED.into()),
+        "non-first sibling should not match :first-child"
+    );
+}
+
+#[test]
+fn clean_tree_stays_clean_after_compute() {
+    let mut tree = StyleTree::new();
+    let host = MockHost::new_default();
+
+    let n = tree.new_node();
+    tree.set_direct_style(n, Style::new().background(css::RED));
+
+    {
+        let (interactions, anim) = cascade(&host);
+        let cx = inputs(&host, &*interactions, &anim);
+        tree.compute_style(n, &cx);
+    }
+    assert!(!tree.is_dirty(n));
+
+    // Second pass with nothing dirty: node stays clean and
+    // `take_scheduled` reports nothing new.
+    {
+        let (interactions, anim) = cascade(&host);
+        let cx = inputs(&host, &*interactions, &anim);
+        tree.compute_style(n, &cx);
+    }
+    assert!(!tree.is_dirty(n), "clean node should not re-enter dirty");
+    assert!(
+        tree.take_scheduled().next().is_none(),
+        "no scheduling work when nothing dirty"
+    );
+}
+
+#[test]
+fn cascade_visits_each_dirty_node_and_computes_it() {
+    let mut tree = StyleTree::new();
+    let host = MockHost::new_default();
+    let (interactions, anim) = cascade(&host);
+    let cx = inputs(&host, &*interactions, &anim);
+
+    let parent = tree.new_node();
+    let c1 = tree.new_node();
+    let c2 = tree.new_node();
+    tree.set_children(parent, &[c1, c2]);
+
+    tree.compute_style(parent, &cx);
+
+    // All three nodes should be clean and have computed styles populated.
+    assert!(!tree.is_dirty(parent));
+    assert!(!tree.is_dirty(c1));
+    assert!(!tree.is_dirty(c2));
+    assert!(tree.computed_style(parent).is_some());
+    assert!(tree.computed_style(c1).is_some());
+    assert!(tree.computed_style(c2).is_some());
+}
diff --git a/test/tests/context_selectors.rs b/test/tests/context_selectors.rs
index 0e1da4c09..eb9734ce2 100644
--- a/test/tests/context_selectors.rs
+++ b/test/tests/context_selectors.rs
@@ -44,6 +44,7 @@ impl floem::style::StylePropValue for TestTheme {
         None
     }
 }
+impl floem::style::PropDebugView for TestTheme {}
 
 /// Helper extension trait for using the test theme
 trait TestThemeExt {
diff --git a/test/tests/with_context_layout.rs b/test/tests/with_context_layout.rs
index 885f60dda..febe9256c 100644
--- a/test/tests/with_context_layout.rs
+++ b/test/tests/with_context_layout.rs
@@ -39,6 +39,7 @@ impl floem::style::StylePropValue for TestTheme {
         None
     }
 }
+impl floem::style::PropDebugView for TestTheme {}
 
 /// Helper extension trait for using the test theme
 trait TestThemeExt {
diff --git a/test/tests/with_context_reactive.rs b/test/tests/with_context_reactive.rs
index 0981c4a09..f30fa1776 100644
--- a/test/tests/with_context_reactive.rs
+++ b/test/tests/with_context_reactive.rs
@@ -48,6 +48,7 @@ impl floem::style::StylePropValue for TestTheme {
         None
     }
 }
+impl floem::style::PropDebugView for TestTheme {}
 
 /// Helper extension trait for using the test theme
 trait TestThemeExt {