Grida Canvas - Flex layout

crates/grida-canvas-wasm/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@grida/canvas-wasm",
   "description": "WASM bindings for Grida Canvas",
-  "version": "0.0.79",
+  "version": "0.0.80-canary.3",
   "keywords": [
     "grida",
     "canvas",

crates/grida-canvas/AGENTS.md

@@ -48,6 +48,34 @@ cargo build
 cargo run --example <example-name>
 ```
 
+## Tools
+
+### `tool_io_grida` - Grida File Validator
+
+A CLI tool for validating `.grida` files and debugging parsing issues.
+
+**Usage:**
+
+```sh
+cargo run --example tool_io_grida <path-to-grida-file>
+```
+
+**Features:**
+
+- Validates `.grida` file structure and parses all nodes
+- Reports total node count, scene references, and entry scene
+- Provides node type breakdown (container, text, image, etc.)
+- Detects parsing errors with detailed error messages
+- Handles legacy file formats gracefully (missing fields, typos, etc.)
+
+**Example:**
+
+```sh
+cargo run --example tool_io_grida ../../editor/public/examples/canvas/instagram-post-01.grida
+```
+
+See [examples/tool_io_grida.rs](./examples/tool_io_grida.rs) for full documentation.
+
 ## Package Docs
 
 ```sh

crates/grida-canvas/CHANGELOG.md

@@ -4,6 +4,24 @@ All notable changes to the grida-canvas crate will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## [0.0.0-local.2] - 2025-10-19
+
+### Added
+
+- **Infinite Canvas + Flex Layout**: Root nodes (artboards) can be positioned anywhere in the viewport while their children participate in flex layout
+- **Universal Flex Layout Support**: All node types (Rectangle, Ellipse, Image, Text, etc.) can now participate in flex layout with `layout_positioning` and `layout_grow` properties
+- **Figma Layout Import**: Automatically map Figma's `layoutPositioning` to internal layout properties for all node types
+- **Root Node Positioning**: Containers and shapes now respect their x, y coordinates when used as root nodes (infinite canvas)
+- **Flex Layout Stacking**: Children are now properly positioned horizontally/vertically instead of stacking at (0, 0)
+- **Gap Stretching**: Vertical gap no longer incorrectly grows when parent container height increases
+- **Wrap Alignment**: Center alignment now works correctly with flex wrapping enabled
+- **Absolute Positioning**: Absolutely positioned children are correctly excluded from flex flow and positioned relative to parent
+- **Fixed-size Elements**: Elements maintain their specified dimensions instead of automatically shrinking when overflowing (flex_shrink: 0.0 default)
+
+### Changed
+
+- **Non-uniform Padding**: Support for CSS-style padding with individual values per side (`paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`)
+
 ## [0.0.0-local.1] - 2025-10-16
 
 ### Added

crates/grida-canvas/benches/bench_rectangles.rs

@@ -11,7 +11,7 @@ fn create_rectangles(count: usize, with_effects: bool) -> Scene {
 
     // Create rectangles
     let rectangles: Vec<Node> = (0..count)
-        .map(|i| {
+        .map(|_i| {
             Node::Rectangle(RectangleNodeRec {
                 active: true,
                 opacity: 1.0,
@@ -39,6 +39,7 @@ fn create_rectangles(count: usize, with_effects: bool) -> Scene {
                 } else {
                     LayerEffects::default()
                 },
+                layout_child: None,
             })
         })
         .collect();

crates/grida-canvas/examples/golden_container_stroke.rs

@@ -11,16 +11,15 @@ async fn scene() -> Scene {
     let mut graph = SceneGraph::new();
 
     let mut container = nf.create_container_node();
-    container.size = Size {
-        width: 400.0,
-        height: 400.0,
-    };
+    container.layout_dimensions.width = Some(400.0);
+    container.layout_dimensions.height = Some(400.0);
     container.stroke_width = 10.0;
     container.stroke_align = StrokeAlign::Outside;
     container.strokes = Paints::new([Paint::from(CGColor(255, 0, 0, 255))]);
     container.set_fill(Paint::from(CGColor(255, 255, 255, 255)));
     // Center the container in the 800x800 canvas
-    container.transform = AffineTransform::new(200.0, 200.0, 0.0);
+    container.position = CGPoint::new(200.0, 200.0).into();
+    container.rotation = 0.0;
 
     // Create a circle that will overlap with the container's stroke
     let mut circle = nf.create_ellipse_node();