From c59d4be8572f8b9c270144b06f27efa04e2ceeef Mon Sep 17 00:00:00 2001
From: Colin White <colin@colinwhite.me>
Date: Tue, 12 Dec 2023 13:52:21 -0500
Subject: [PATCH 1/6] Add basic layout system documentation.

---
 redwood-layout-schema/README.md               | 85 +++++++++++++++++++
 redwood-layout-schema/docs_images/box1.png    |  3 +
 redwood-layout-schema/docs_images/column1.png |  3 +
 redwood-layout-schema/docs_images/row1.png    |  3 +
 redwood-layout-schema/docs_images/spacer1.png |  3 +
 5 files changed, 97 insertions(+)
 create mode 100644 redwood-layout-schema/README.md
 create mode 100644 redwood-layout-schema/docs_images/box1.png
 create mode 100644 redwood-layout-schema/docs_images/column1.png
 create mode 100644 redwood-layout-schema/docs_images/row1.png
 create mode 100644 redwood-layout-schema/docs_images/spacer1.png

diff --git a/redwood-layout-schema/README.md b/redwood-layout-schema/README.md
new file mode 100644
index 0000000000..6124831c2a
--- /dev/null
+++ b/redwood-layout-schema/README.md
@@ -0,0 +1,85 @@
+# Redwood Layout
+
+Redwood's layout system provides common layout primitives to support arranging and laying out widgets. It provides widgets for:
+
+- `Row`: Lays wigets out along the X axis (horizontally).
+- `Column`: Lays widgets out along the Y axis (vertically).
+- `Box`: Lays widgets out along the Z axis (on top of eachother).
+- `Spacer`: Adds space between widgets.
+
+Internally the layout system uses a common layout engine written in Kotlin Multiplatform to support consistent rendering across platforms. The system provides widget bindings for for Android Views (`redwood-layout-view`), iOS UiKit (`redwood-layout-uiview`), and Compose UI (`redwood-layout-composeui`).
+
+## Widgets
+
+### Row
+
+Lays widgets out along the X axis (horizontally). 
+
+```kotlin
+Row {
+    Text("One")
+    Text("Two")
+    Text("Three")
+}
+```
+
+<p style="text-align: center;">
+    <img src="../docs_images/row1.png">
+</p>
+
+### Column
+
+Lays widgets out along the Y axis (vertically). 
+
+```kotlin
+Column {
+    Text("One")
+    Text("Two")
+    Text("Three")
+}
+```
+
+<p style="text-align: center;">
+    <img src="../docs_images/column1.png">
+</p>
+
+### Box
+
+Lays widgets out along the Z axis (on top of eachother).
+
+```kotlin
+Box {
+    Color(
+        color = Red,
+        modifier = Modifier.size(24.dp),
+    )
+    Color(
+        color = Green,
+        modifier = Modifier.size(16.dp),
+    )
+    Color(
+        color = Blue,
+        modifier = Modifier.size(8.dp),
+    )
+}
+```
+
+<p style="text-align: center;">
+    <img src="../docs_images/box1.png">
+</p>
+
+### Spacer
+
+Adds space between widgets.
+
+```kotlin
+Column {
+    Text("Top")
+    Spacer(height = 24.dp)
+    Text("Bottom")
+}
+```
+
+<p style="text-align: center;">
+    <img src="../docs_images/spacer1.png">
+</p>
diff --git a/redwood-layout-schema/docs_images/box1.png b/redwood-layout-schema/docs_images/box1.png
new file mode 100644
index 0000000000..276653efe1
--- /dev/null
+++ b/redwood-layout-schema/docs_images/box1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:79f277f646dcfac8d766b949841e10b12f36865dff3dcdb4a64015b0c14c7a72
+size 5405
diff --git a/redwood-layout-schema/docs_images/column1.png b/redwood-layout-schema/docs_images/column1.png
new file mode 100644
index 0000000000..742fb8e3d5
--- /dev/null
+++ b/redwood-layout-schema/docs_images/column1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:535dbfbfb5ac7025da5c75a6a295a31c2804c280fb379bfd1cf9ecc69c71e241
+size 4501
diff --git a/redwood-layout-schema/docs_images/row1.png b/redwood-layout-schema/docs_images/row1.png
new file mode 100644
index 0000000000..24eb3252fe
--- /dev/null
+++ b/redwood-layout-schema/docs_images/row1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f4674392ab23ef7699b9546da1d6f6207fcd805a518abcdbb3edfbe4dea7401f
+size 3933
diff --git a/redwood-layout-schema/docs_images/spacer1.png b/redwood-layout-schema/docs_images/spacer1.png
new file mode 100644
index 0000000000..26a058223c
--- /dev/null
+++ b/redwood-layout-schema/docs_images/spacer1.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dd337157b942a2ca674aeca7a6bd84b54a577dd47959a3ba0b0717c3dbced12e
+size 3913

From 9b5680c0f5bc2403b841b04eff47c1ca4c731e25 Mon Sep 17 00:00:00 2001
From: Colin White <colin@colinwhite.me>
Date: Tue, 12 Dec 2023 13:54:10 -0500
Subject: [PATCH 2/6] Fix links.

---
 redwood-layout-schema/README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/redwood-layout-schema/README.md b/redwood-layout-schema/README.md
index 6124831c2a..14b13c9cdb 100644
--- a/redwood-layout-schema/README.md
+++ b/redwood-layout-schema/README.md
@@ -24,7 +24,7 @@ Row {
 ```
 
 <p style="text-align: center;">
-    <img src="../docs_images/row1.png">
+    <img src="docs_images/row1.png">
 </p>
 
 ### Column
@@ -40,7 +40,7 @@ Column {
 ```
 
 <p style="text-align: center;">
-    <img src="../docs_images/column1.png">
+    <img src="docs_images/column1.png">
 </p>
 
 ### Box
@@ -65,7 +65,7 @@ Box {
 ```
 
 <p style="text-align: center;">
-    <img src="../docs_images/box1.png">
+    <img src="docs_images/box1.png">
 </p>
 
 ### Spacer
@@ -81,5 +81,5 @@ Column {
 ```
 
 <p style="text-align: center;">
-    <img src="../docs_images/spacer1.png">
+    <img src="docs_images/spacer1.png">
 </p>

From a465084ea09373e958965b1b66183b7e2fc5d629 Mon Sep 17 00:00:00 2001
From: Colin White <colin@colinwhite.me>
Date: Tue, 12 Dec 2023 13:58:43 -0500
Subject: [PATCH 3/6] Improve box rendering.

---
 redwood-layout-schema/docs_images/box1.png | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/redwood-layout-schema/docs_images/box1.png b/redwood-layout-schema/docs_images/box1.png
index 276653efe1..5f86c7e2bb 100644
--- a/redwood-layout-schema/docs_images/box1.png
+++ b/redwood-layout-schema/docs_images/box1.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:79f277f646dcfac8d766b949841e10b12f36865dff3dcdb4a64015b0c14c7a72
-size 5405
+oid sha256:909e4ca4b6ac44939173f3626ab3b5d912853f7ebccc688730eac44a652c4602
+size 23831

From 0a3c59eb7030c229de54968b6527e214e0dbfcd7 Mon Sep 17 00:00:00 2001
From: Colin White <colin@colinwhite.me>
Date: Tue, 12 Dec 2023 13:59:20 -0500
Subject: [PATCH 4/6] Fix size.

---
 redwood-layout-schema/README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/redwood-layout-schema/README.md b/redwood-layout-schema/README.md
index 14b13c9cdb..7c4642d97f 100644
--- a/redwood-layout-schema/README.md
+++ b/redwood-layout-schema/README.md
@@ -13,7 +13,7 @@ Internally the layout system uses a common layout engine written in Kotlin Multi
 
 ### Row
 
-Lays widgets out along the X axis (horizontally). 
+Lays widgets out along the X axis (horizontally).
 
 ```kotlin
 Row {
@@ -29,7 +29,7 @@ Row {
 
 ### Column
 
-Lays widgets out along the Y axis (vertically). 
+Lays widgets out along the Y axis (vertically).
 
 ```kotlin
 Column {
@@ -65,7 +65,7 @@ Box {
 ```
 
 <p style="text-align: center;">
-    <img src="docs_images/box1.png">
+    <img src="docs_images/box1.png" width="250" height="250">
 </p>
 
 ### Spacer

From 9d46d2d262a08cfa9c97af6e82e8d0872f60fb89 Mon Sep 17 00:00:00 2001
From: Colin White <colin@colinwhite.me>
Date: Wed, 13 Dec 2023 13:11:31 -0500
Subject: [PATCH 5/6] Fix formatting.

---
 redwood-layout-schema/README.md | 52 ++++++++++++++++++---------------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/redwood-layout-schema/README.md b/redwood-layout-schema/README.md
index 7c4642d97f..60b658d300 100644
--- a/redwood-layout-schema/README.md
+++ b/redwood-layout-schema/README.md
@@ -1,13 +1,17 @@
 # Redwood Layout
 
-Redwood's layout system provides common layout primitives to support arranging and laying out widgets. It provides widgets for:
+Redwood's layout system provides common layout primitives to support arranging and laying out
+widgets. It provides widgets for:
 
 - `Row`: Lays wigets out along the X axis (horizontally).
 - `Column`: Lays widgets out along the Y axis (vertically).
 - `Box`: Lays widgets out along the Z axis (on top of eachother).
 - `Spacer`: Adds space between widgets.
 
-Internally the layout system uses a common layout engine written in Kotlin Multiplatform to support consistent rendering across platforms. The system provides widget bindings for for Android Views (`redwood-layout-view`), iOS UiKit (`redwood-layout-uiview`), and Compose UI (`redwood-layout-composeui`).
+Internally the layout system uses a common layout engine written in Kotlin Multiplatform to support
+consistent rendering across platforms. The system provides widget bindings for for Android
+Views (`redwood-layout-view`), iOS UiKit (`redwood-layout-uiview`), and Compose
+UI (`redwood-layout-composeui`).
 
 ## Widgets
 
@@ -17,9 +21,9 @@ Lays widgets out along the X axis (horizontally).
 
 ```kotlin
 Row {
-    Text("One")
-    Text("Two")
-    Text("Three")
+  Text("One")
+  Text("Two")
+  Text("Three")
 }
 ```
 
@@ -33,9 +37,9 @@ Lays widgets out along the Y axis (vertically).
 
 ```kotlin
 Column {
-    Text("One")
-    Text("Two")
-    Text("Three")
+  Text("One")
+  Text("Two")
+  Text("Three")
 }
 ```
 
@@ -49,18 +53,18 @@ Lays widgets out along the Z axis (on top of eachother).
 
 ```kotlin
 Box {
-    Color(
-        color = Red,
-        modifier = Modifier.size(24.dp),
-    )
-    Color(
-        color = Green,
-        modifier = Modifier.size(16.dp),
-    )
-    Color(
-        color = Blue,
-        modifier = Modifier.size(8.dp),
-    )
+  Color(
+    color = Red,
+    modifier = Modifier.size(24.dp),
+  )
+  Color(
+    color = Green,
+    modifier = Modifier.size(16.dp),
+  )
+  Color(
+    color = Blue,
+    modifier = Modifier.size(8.dp),
+  )
 }
 ```
 
@@ -74,12 +78,12 @@ Adds space between widgets.
 
 ```kotlin
 Column {
-    Text("Top")
-    Spacer(height = 24.dp)
-    Text("Bottom")
+  Text("Top")
+  Spacer(height = 24.dp)
+  Text("Bottom")
 }
 ```
 
 <p style="text-align: center;">
-    <img src="docs_images/spacer1.png">
+  <img src="docs_images/spacer1.png">
 </p>

From cd545e3696b094353ec812ada31d613b509dac67 Mon Sep 17 00:00:00 2001
From: Colin White <colin@colinwhite.me>
Date: Wed, 13 Dec 2023 13:47:13 -0500
Subject: [PATCH 6/6] Explain DOM.

---
 redwood-layout-schema/README.md | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/redwood-layout-schema/README.md b/redwood-layout-schema/README.md
index 60b658d300..273a0e55e4 100644
--- a/redwood-layout-schema/README.md
+++ b/redwood-layout-schema/README.md
@@ -8,10 +8,12 @@ widgets. It provides widgets for:
 - `Box`: Lays widgets out along the Z axis (on top of eachother).
 - `Spacer`: Adds space between widgets.
 
-Internally the layout system uses a common layout engine written in Kotlin Multiplatform to support
-consistent rendering across platforms. The system provides widget bindings for for Android
-Views (`redwood-layout-view`), iOS UiKit (`redwood-layout-uiview`), and Compose
-UI (`redwood-layout-composeui`).
+Internally the layout system uses a common layout engine written in Kotlin Multiplatform. The
+layout engine operates on a virtual DOM (document object model) composed of simple nodes
+where each node is mapped to a widget in the real DOM. This lets the layout engine perform
+operations on the DOM with consistent rendering across platforms. The system provides widget
+bindings for for Android Views (`redwood-layout-view`), iOS UiKit (`redwood-layout-uiview`), and
+Compose UI (`redwood-layout-composeui`).
 
 ## Widgets
 
@@ -49,7 +51,8 @@ Column {
 
 ### Box
 
-Lays widgets out along the Z axis (on top of eachother).
+Lays widgets out along the Z axis (on top of eachother). Widgets are laid from lowest Z index
+(first) to highest Z index (last).
 
 ```kotlin
 Box {