feat: implement positioned component

Author: LeadcodeDev

.claude/skills/rustmotion/SKILL.md

@@ -685,7 +685,22 @@ Animated number counter. See Rule 4: must be standalone.
 
 Style: `font-size` (48.0), `color` (#FFFFFF), `font-family` (Inter), `font-weight`, `text-align`, `letter-spacing`, `text-shadow`, `stroke`
 
-### 10. `card` / `flex`
+### 10. `positioned`
+
+Container that places children at fixed absolute coordinates (like Flutter's `Stack`/`Positioned`). Each child uses `position: {x, y}` relative to the container's top-left.
+
+```json
+{
+  "type": "positioned",
+  "position": { "x": 100, "y": 200 },
+  "children": [
+    { "type": "shape", "shape": "rect", "position": { "x": 0, "y": 0 }, "size": { "width": 400, "height": 300 }, "style": { "fill": "#1E293B", "border-radius": 16 } },
+    { "type": "icon", "icon": "lucide:phone-off", "position": { "x": 170, "y": 120 }, "style": { "size": 64, "color": "#FFFFFF" } }
+  ]
+}
+```
+
+### 11. `card` / `flex`
 
 Visual container with CSS-like flex & grid layout. `flex` is an alias for `card`. See Rule 8.
 

src/components/mod.rs

@@ -10,7 +10,7 @@ pub mod image;
 pub mod progress;
 pub mod qrcode;
 pub mod shape;
-pub mod stack;
+pub mod positioned;
 pub mod svg;
 pub mod text;
 pub mod video;
@@ -30,7 +30,7 @@ pub use grid::Grid;
 pub use icon::Icon;
 pub use image::Image;
 pub use shape::Shape;
-pub use stack::Stack;
+pub use positioned::Positioned;
 pub use svg::Svg;
 pub use text::Text;
 pub use video::Video;
@@ -107,7 +107,7 @@ pub enum Component {
     Caption(Caption),
     Codeblock(Codeblock),
     // Container components
-    Stack(Stack),
+    Positioned(Positioned),
     Flex(Flex),
     Grid(Grid),
     /// Backward-compatible card container (supports both flex and grid display modes).
@@ -130,7 +130,7 @@ impl Component {
             Component::Counter(c) => c,
             Component::Caption(c) => c,
             Component::Codeblock(c) => c,
-            Component::Stack(c) => c,
+            Component::Positioned(c) => c,
             Component::Flex(c) => c,
             Component::Grid(c) => c,
             Component::Card(c) => c,
@@ -153,7 +153,7 @@ impl Component {
             Component::Flex(c) => Some(c),
             Component::Grid(c) => Some(c),
             Component::Card(c) => Some(c),
-            Component::Stack(_) => None,
+            Component::Positioned(_) => None,
         }
     }
 
@@ -172,7 +172,7 @@ impl Component {
             Component::Flex(c) => Some(c),
             Component::Grid(c) => Some(c),
             Component::Card(c) => Some(c),
-            Component::Caption(_) | Component::Stack(_) => None,
+            Component::Caption(_) | Component::Positioned(_) => None,
         }
     }
 
@@ -189,7 +189,7 @@ impl Component {
             Component::Counter(c) => c,
             Component::Caption(c) => c,
             Component::Codeblock(c) => c,
-            Component::Stack(c) => c,
+            Component::Positioned(c) => c,
             Component::Flex(c) => c,
             Component::Grid(c) => c,
             Component::Card(c) => c,
@@ -200,7 +200,7 @@ impl Component {
     #[allow(dead_code)]
     pub fn as_container(&self) -> Option<&dyn Container> {
         match self {
-            Component::Stack(c) => Some(c),
+            Component::Positioned(c) => Some(c),
             Component::Flex(c) => Some(c),
             Component::Grid(c) => Some(c),
             Component::Card(c) => Some(c),
@@ -211,7 +211,7 @@ impl Component {
     /// Returns a mutable reference to this component's children, if it has any.
     pub fn children_mut(&mut self) -> Option<&mut Vec<ChildComponent>> {
         match self {
-            Component::Stack(c) => Some(&mut c.children),
+            Component::Positioned(c) => Some(&mut c.children),
             Component::Flex(c) => Some(&mut c.children),
             Component::Grid(c) => Some(&mut c.children),
             Component::Card(c) => Some(&mut c.children),

src/components/stack.rs src/components/positioned.rssrc/components/stack.rs renamed to src/components/positioned.rs

@@ -9,27 +9,31 @@ use crate::traits::{Container, RenderContext, Widget};
 
 use super::ChildComponent;
 
-/// Stack container — children are positioned absolutely (like CSS `position: absolute`).
-/// Replaces the old `Group` layer.
+/// Positioned container — children are placed at fixed absolute coordinates.
+/// Like Flutter's Stack/Positioned: each child uses its `position: {x, y}` field.
 #[derive(Debug, Serialize, Deserialize, JsonSchema)]
-pub struct Stack {
+pub struct Positioned {
     #[serde(default)]
     pub children: Vec<ChildComponent>,
     #[serde(default)]
     pub style: LayerStyle,
 }
 
-crate::impl_traits!(Stack {
+crate::impl_traits!(Positioned {
     Styled => style,
 });
 
-impl Container for Stack {
+impl Container for Positioned {
     fn children(&self) -> &[ChildComponent] {
         &self.children
     }
 }
 
-impl Widget for Stack {
+impl Widget for Positioned {
+    fn layout(&self, constraints: &Constraints) -> LayoutNode {
+        crate::layout::stack::layout_stack(self, constraints)
+    }
+
     fn render(&self, canvas: &Canvas, layout: &LayoutNode, ctx: &RenderContext, _props: &crate::engine::animator::AnimatedProperties) -> Result<()> {
         crate::engine::render_v2::render_children(canvas, &self.children, layout, ctx)?;
         Ok(())

src/layout/stack.rs

@@ -1,4 +1,3 @@
-#![allow(dead_code)]
 use crate::components::ChildComponent;
 use crate::traits::{Container, Styled};
 
@@ -74,7 +73,7 @@ fn measure_child(child: &ChildComponent, constraints: &Constraints) -> (f32, f32
 mod tests {
     use super::*;
     use crate::components::shape::Shape;
-    use crate::components::stack::Stack;
+    use crate::components::positioned::Positioned;
     use crate::components::{ChildComponent, Component, PositionMode};
     use crate::schema::{LayerStyle, ShapeType, Size};
 
@@ -96,7 +95,7 @@ mod tests {
 
     #[test]
     fn test_stack_2_children() {
-        let stack = Stack {
+        let stack = Positioned {
             children: vec![
                 shape_child_at(100.0, 100.0, 0.0, 0.0),
                 shape_child_at(50.0, 50.0, 200.0, 150.0),